Skip to content

Commit f6a0c4e

Browse files
cal-smithcal-smith
committed
minimal functional carbon
1 parent d2f7914 commit f6a0c4e

22 files changed

+86
-257
lines changed

‎demo/demo-app/app.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component, OnInit, ViewEncapsulation } from "@angular/core";
22
import { TranslateService } from "@ngx-translate/core";
33
import { Router, NavigationEnd, NavigationStart } from "@angular/router";
44
import { IconService } from "./../../src";
5-
import "rxjs/add/operator/filter";
5+
import { filter } from "rxjs/operators";
66

77
const en = require("./../../src/i18n/en.json");
88

@@ -185,13 +185,13 @@ export class AppComponent implements OnInit {
185185
}
186186

187187
ngOnInit() {
188-
this.router.events.filter(x => x instanceof NavigationEnd).subscribe(x => {
188+
this.router.events.pipe(filter(x => x instanceof NavigationEnd)).subscribe(x => {
189189
if (x["url"] === "/" && this.previousItem) {
190190
this.previousItem.selected = false;
191191
}
192192
});
193193

194-
this.router.events.filter(x => x instanceof NavigationStart).subscribe(x => {
194+
this.router.events.pipe(filter(x => x instanceof NavigationStart)).subscribe(x => {
195195
if (this.previousItem) {
196196
this.previousItem.selected = false;
197197
}

‎demo/demo-app/demo.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// sass-lint:disable-all
22
$font-path: "./../node_modules/@peretz/matter/fonts/";
3-
@import "~@peretz/matter/scss/matter.scss";
3+
@import "~carbon-components/scss/globals/scss/styles.scss";
44

55
/*
66
* Main demo container

‎demo/demo-app/icon-demo/icon-demo.component.ts‎

Lines changed: 1 addition & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -39,95 +39,6 @@ import { Component, OnInit, ViewEncapsulation, AfterViewInit } from "@angular/co
3939
<ibm-icon icon="alert" color="white" size="md"></ibm-icon>
4040
<ibm-icon class="test-custom-class foo" icon="alert" color="white" size="lg"></ibm-icon>
4141
</div>
42-
43-
<h2>peretz-icon tests</h2>
44-
45-
<peretz-icon set="core_set" icon="alert" size="sm"></peretz-icon>
46-
<peretz-icon set="core_set" icon="alert" size="md"></peretz-icon>
47-
<peretz-icon set="core_set" icon="alert" size="lg"></peretz-icon>
48-
49-
<div style="display: inline-block; background-color: aquamarine; padding: 2px">
50-
<peretz-icon class="icon" set="core_set" icon="alert" color="blue" size="md"></peretz-icon>
51-
<peretz-icon class="icon" set="core_set" icon="alert" color="light" size="md"></peretz-icon>
52-
<peretz-icon class="icon" set="core_set" icon="alert" color="dark" size="md"></peretz-icon>
53-
<peretz-icon class="icon" set="core_set" icon="alert" color="white" size="md"></peretz-icon>
54-
</div>
55-
56-
<peretz-icon set="core_set" icon="alert" color="blue" size="sm"></peretz-icon>
57-
<peretz-icon set="core_set" icon="alert" color="blue" size="md"></peretz-icon>
58-
<peretz-icon set="core_set" icon="alert" color="blue" size="lg"></peretz-icon>
59-
60-
<peretz-icon set="core_set" icon="alert" color="light" size="sm"></peretz-icon>
61-
<peretz-icon set="core_set" icon="alert" color="light" size="md"></peretz-icon>
62-
<peretz-icon set="core_set" icon="alert" color="light" size="lg"></peretz-icon>
63-
64-
<div style="display: inline-block; background-color: aquamarine; padding: 2px">
65-
<peretz-icon class="icon--sm" set="core_set" icon="alert" color="white" size="sm"></peretz-icon>
66-
<peretz-icon class="icon" set="core_set" icon="alert" color="white" size="md"></peretz-icon>
67-
<peretz-icon class="test-custom-class foo icon--lg" set="core_set" icon="alert" color="white" size="lg"></peretz-icon>
68-
</div>
69-
70-
<!--<div style="display: flex;">
71-
<label class="search_group" style="width: calc(70% - 20px); margin-right: 20px;">
72-
<svg class="search_icon" aria-hidden="true">
73-
<use href="#search_16"></use>
74-
</svg>
75-
<input
76-
#filter
77-
(keyup)="search($event)"
78-
type="search"
79-
placeholder="Search"
80-
tabindex="0"
81-
(focus)="filterFocus = true"
82-
(blur)="filterFocus = filter.value?true:false"
83-
[disabled]="waitingForLoad">
84-
<button
85-
class="close"
86-
type="reset"
87-
aria-label="Reset search"
88-
[ngClass]="{
89-
visible: filter.value.trim()
90-
}"
91-
(click)="filter.value = ''; search($event); filterFocus = false">
92-
<svg class="close_icon">
93-
<use href="#x_16"></use>
94-
</svg>
95-
</button>
96-
</label>
97-
<ibm-dropdown
98-
placeholder="Select a set"
99-
style="width: 30%; margin-bottom: 0;"
100-
type="multi"
101-
(select)="onSelect()"
102-
[(ngModel)]="selected"
103-
[disabled]="waitingForLoad">
104-
<ibm-dropdown-list [items]="sets"></ibm-dropdown-list>
105-
</ibm-dropdown>
106-
</div>
107-
<div
108-
class="loading"
109-
[ngClass]="{hide: !waitingForLoad}">
110-
</div>
111-
<div [ngClass]="{hide: waitingForLoad}">
112-
<div
113-
*ngFor="let set of iconMeta"
114-
[ngClass]="{hide: !set.visible}">
115-
<h2>{{ formatName(set.sprite) }}
116-
(<a
117-
href="{{formatURL(set.sprite)}}"
118-
download="{{formatFileName(set.sprite)}}">download</a>)
119-
</h2>
120-
<div class="set">
121-
<span
122-
*ngFor="let icon of set.icons"
123-
class="set-icon"
124-
[ngClass]="{hide: !icon.visible}">
125-
<h3>{{ icon.name }}</h3>
126-
<ibm-icon [icon]="icon.name" size="lg"></ibm-icon>
127-
</span>
128-
</div>
129-
</div>
130-
</div>-->
13142
`,
13243
styles: [`
13344
.hide {
@@ -230,81 +141,4 @@ import { Component, OnInit, ViewEncapsulation, AfterViewInit } from "@angular/co
230141
`],
231142
encapsulation: ViewEncapsulation.None
232143
})
233-
export class IconDemo /* implements AfterViewInit */ {
234-
iconMeta;
235-
sets = [];
236-
selected = [];
237-
waitingForLoad = true;
238-
239-
// async ngAfterViewInit() {
240-
// this.iconMeta = await fetch("https://peretz-icons.mybluemix.net/meta.json").then(res => res.json());
241-
// // gather and nest the available icons sizes into set.icons[].sizes[]
242-
// this.iconMeta.forEach(set => set.icons = set.icons.filter(icon => icon.size === 30));
243-
// this.iconMeta.sort((a, b) => {
244-
// if (b.sprite.includes("core")) { return 1; }
245-
// return a.sprite.localeCompare(b.sprite);
246-
// });
247-
// let newSets = [];
248-
// for (let set of this.iconMeta) {
249-
// newSets.push({
250-
// content: this.formatName(set.sprite),
251-
// sprite: set.sprite,
252-
// selected: false
253-
// });
254-
// set.visible = true;
255-
// set.icons.forEach(icon => {
256-
// icon.visible = true;
257-
// });
258-
// }
259-
// this.sets = newSets;
260-
// this.waitingForLoad = false;
261-
// }
262-
263-
formatName(name) {
264-
return name.slice(0, 1).toUpperCase() + name.slice(1).replace("_", " ");
265-
}
266-
267-
formatURL(name) {
268-
return `http://peretz-icons.mybluemix.net/${name}.svg`;
269-
}
270-
271-
formatFileName(name) {
272-
return `${name}.svg`;
273-
}
274-
275-
onSelect(ev) {
276-
console.log(ev);
277-
this.iconMeta.forEach(sprite => {
278-
if (this.selected === null || (this.selected.length === 0)) {
279-
sprite.visible = true;
280-
} else if ((this.selected && this.selected.find(item => item.sprite.includes(sprite.sprite)))) {
281-
sprite.visible = true;
282-
} else {
283-
sprite.visible = false;
284-
}
285-
});
286-
}
287-
288-
search(ev) {
289-
this.iconMeta.forEach(sprite => {
290-
if (this.selected === null || (this.selected.length === 0)) {
291-
sprite.visible = true;
292-
} else if ((this.selected && this.selected.find(item => item.sprite.includes(sprite.sprite)))) {
293-
sprite.visible = true;
294-
} else {
295-
sprite.visible = false;
296-
}
297-
sprite.icons.forEach(icon => {
298-
if (ev.target.value) {
299-
if (icon.name.includes(ev.target.value)) {
300-
icon.visible = true;
301-
} else {
302-
icon.visible = false;
303-
}
304-
} else {
305-
icon.visible = true;
306-
}
307-
});
308-
});
309-
}
310-
}
144+
export class IconDemo { }

‎demo/demo-app/table-demo/table-demo.service.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import { Injectable } from "@angular/core";
2-
import { Http } from "@angular/http";
3-
import "rxjs/add/operator/toPromise";
42

53
@Injectable()
64
export class TableDemoService {
7-
constructor(private http: Http) {}
85

96
getPage(page: number) {
107
const url = `table-demo-data-page-${page}.json`;

‎demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en-US">
33
<head>
44
<meta charset="utf-8">
5-
<title>Neutrino</title>
5+
<title>Carbon Components Angular</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<style type="text/css">
88
body {

‎package-lock.json‎

Lines changed: 7 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"@angular/http": "^6.1.0",
3333
"@angular/platform-browser": "^6.1.0",
3434
"@angular/platform-browser-dynamic": "^6.1.0",
35-
"@ngx-translate/core": "^9.0.2",
35+
"@ngx-translate/core": "^10.0.0",
3636
"core-js": "^2.5.3",
3737
"rxjs": "^6.0.0",
3838
"zone.js": "^0.8.26",
@@ -51,11 +51,11 @@
5151
"@angular/platform-server": "6.1.0",
5252
"@angular/router": "6.1.0",
5353
"@compodoc/compodoc": "1.0.4",
54-
"@ngx-translate/core": "9.0.2",
55-
"carbon-components": "9.1.13",
54+
"@ngx-translate/core": "^10.0.2",
5655
"@types/jasmine": "2.8.6",
5756
"@types/node": "8.5.2",
5857
"angular2-template-loader": "0.6.2",
58+
"carbon-components": "9.1.13",
5959
"codelyzer": "4.0.2",
6060
"core-js": "2.5.5",
6161
"css-loader": "0.28.11",
@@ -72,13 +72,13 @@
7272
"jasmine-core": "3.1.0",
7373
"karma": "2.0.2",
7474
"karma-chrome-launcher": "2.2.0",
75-
"karma-jasmine": "1.1.2",
7675
"karma-cli": "1.0.1",
7776
"karma-firefox-launcher": "1.1.0",
7877
"karma-html2js-preprocessor": "1.1.0",
79-
"karma-spec-reporter": "0.0.32",
78+
"karma-jasmine": "1.1.2",
8079
"karma-notify-reporter": "1.0.1",
8180
"karma-sourcemap-loader": "0.3.7",
81+
"karma-spec-reporter": "0.0.32",
8282
"karma-webpack": "3.0.0",
8383
"marked": "0.3.7",
8484
"node-sass": "4.9.0",
@@ -92,6 +92,7 @@
9292
"stylelint-webpack-plugin": "0.10.4",
9393
"svgxuse": "1.2.6",
9494
"ts-helpers": "1.1.2",
95+
"ts-loader": "4.3.0",
9596
"tslint": "5.10.0",
9697
"tslint-loader": "3.6.0",
9798
"typescript": "2.5.1",
@@ -101,7 +102,6 @@
101102
"webpack-dev-server": "3.1.4",
102103
"webpack-node-externals": "1.6.0",
103104
"whatwg-fetch": "2.0.3",
104-
"zone.js": "0.8.26",
105-
"ts-loader": "4.3.0"
105+
"zone.js": "0.8.26"
106106
}
107107
}

‎src/button-menu/button-menu.component.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import {
1515
QueryList
1616
} from "@angular/core";
1717

18-
import { Observable, fromEvent, throttleTime } from "rxjs";
19-
18+
import { fromEvent } from "rxjs";
19+
import { throttleTime } from "rxjs/operators";
2020
import { position } from "../utils/position";
2121
import { isFocusInLastItem, isFocusInFirstItem } from "./../common/tab.service";
2222

@@ -282,8 +282,8 @@ export class ButtonMenu implements AfterContentInit, AfterViewInit {
282282
document.body.appendChild(this.dropdownWrapper);
283283
positionDropdown();
284284
this.dropdownWrapper.addEventListener("keydown", this.keyboardNav, true);
285-
this.resize = Observable.fromEvent(window, "resize")
286-
.throttleTime(100)
285+
this.resize = fromEvent(window, "resize")
286+
.pipe(throttleTime(100))
287287
.subscribe(() => positionDropdown());
288288
}
289289

@@ -332,7 +332,7 @@ export class ButtonMenu implements AfterContentInit, AfterViewInit {
332332
const container = document.querySelector(this.scrollableContainer);
333333

334334
if (container) {
335-
this.scroll = Observable.fromEvent(container, "scroll")
335+
this.scroll = fromEvent(container, "scroll")
336336
.subscribe(() => {
337337
if (this.isVisibleInContainer(this.elementRef.nativeElement, container)) {
338338
position.setElement(

‎src/calendar/calendar-header.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ import { range } from "../common/utils";
99
<ul>
1010
<li class="pagination_chevron">
1111
<a (click)="previousYear()" title="Previous page" aria-label="Previous page">
12-
<peretz-icon set="arrows_chevrons" icon="chevron_left" size="xs"></peretz-icon>
12+
<!-- <peretz-icon set="arrows_chevrons" icon="chevron_left" size="xs"></peretz-icon> -->
1313
</a>
1414
</li>
1515
<li *ngIf="header === 'yearOnlyRange'">{{getYear() - 5}} - {{getYear()}}</li>
1616
<li *ngIf="header !== 'yearOnlyRange'">{{getYear()}}</li>
1717
<li class="pagination_chevron">
1818
<a (click)="nextYear()" title="Next page" aria-label="Next page">
19-
<peretz-icon set="arrows_chevrons" icon="chevron_right" size="xs"></peretz-icon>
19+
<!-- <peretz-icon set="arrows_chevrons" icon="chevron_right" size="xs"></peretz-icon> -->
2020
</a>
2121
</li>
2222
</ul>
@@ -29,7 +29,7 @@ import { range } from "../common/utils";
2929
<ul>
3030
<li class="pagination_chevron">
3131
<a (click)="previousMonth()" title="Previous page" aria-label="Previous page">
32-
<peretz-icon set="arrows_chevrons" icon="chevron_left" size="xs"></peretz-icon>
32+
<!-- <peretz-icon set="arrows_chevrons" icon="chevron_left" size="xs"></peretz-icon> -->
3333
</a>
3434
</li>
3535
<li
@@ -39,7 +39,7 @@ import { range } from "../common/utils";
3939
</li>
4040
<li class="pagination_chevron">
4141
<a (click)="nextMonth()" title="Next page" aria-label="Next page">
42-
<peretz-icon set="arrows_chevrons" icon="chevron_right" size="xs"></peretz-icon>
42+
<!-- <peretz-icon set="arrows_chevrons" icon="chevron_right" size="xs"></peretz-icon> -->
4343
</a>
4444
</li>
4545
</ul>

‎src/calendar/quarter-view/calendar-quarter.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export class CalendarQuarter implements OnInit {
7878
* @memberof CalendarQuarter
7979
*/
8080
constructor(private translate: TranslateService) {
81-
this.translate.get("CALENDAR.QUARTERS").toPromise().then((res: Array<any>) => {
81+
this.translate.get("CALENDAR.QUARTERS").subscribe((res: Array<any>) => {
8282
this.quarters = res;
8383
});
8484
}

0 commit comments

Comments
 (0)