Skip to content

Commit bebba60

Browse files
zvonimirfraszvonimirfras
authored
Merge branch 'master' into table
2 parents 522684f + f238dac commit bebba60

18 files changed

+302
-56
lines changed

‎src/accordion/accordion-item.component.ts‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,29 @@ import {
2121
viewBox="0 0 7 12">
2222
<path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z"/>
2323
</svg>
24-
<p class="bx--accordion__title">{{title}}</p>
24+
<p
25+
class="bx--accordion__title"
26+
[ngClass]="{
27+
'bx--skeleton__text': skeleton
28+
}">
29+
{{!skeleton ? title : null}}
30+
</p>
2531
</button>
2632
<div [id]="id" class="bx--accordion__content">
27-
<ng-content></ng-content>
33+
<ng-content *ngIf="!skeleton; else skeletonTemplate"></ng-content>
34+
<ng-template #skeletonTemplate>
35+
<p class="bx--skeleton__text" style="width: 90%"></p>
36+
<p class="bx--skeleton__text" style="width: 80%"></p>
37+
<p class="bx--skeleton__text" style="width: 95%"></p>
38+
</ng-template>
2839
</div>
2940
`
3041
})
3142
export class AccordionItem {
3243
static accordionItemCount = 0;
3344
@Input() title = `Title ${AccordionItem.accordionItemCount}`;
3445
@Input() id = `accordion-item-${AccordionItem.accordionItemCount}`;
46+
@Input() skeleton = false;
3547
@Output() selected = new EventEmitter();
3648

3749
@HostBinding("class.bx--accordion__item") itemClass = true;
@@ -45,7 +57,9 @@ export class AccordionItem {
4557
}
4658

4759
public toggleExpanded() {
48-
this.expanded = !this.expanded;
49-
this.selected.emit({id: this.id, expanded: this.expanded});
60+
if (!this.skeleton) {
61+
this.expanded = !this.expanded;
62+
this.selected.emit({id: this.id, expanded: this.expanded});
63+
}
5064
}
5165
}

‎src/accordion/accordion.component.ts‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { Component } from "@angular/core";
1+
import {
2+
Component,
3+
Input,
4+
ContentChildren,
5+
QueryList,
6+
AfterContentInit
7+
} from "@angular/core";
8+
import { AccordionItem } from "./accordion-item.component";
29

310
@Component({
411
selector: "ibm-accordion",
@@ -8,6 +15,28 @@ import { Component } from "@angular/core";
815
</ul>
916
`
1017
})
11-
export class Accordion {
18+
export class Accordion implements AfterContentInit {
19+
@ContentChildren(AccordionItem) children: QueryList<AccordionItem>;
1220

21+
protected _skeleton = false;
22+
23+
@Input()
24+
set skeleton(value: any) {
25+
this._skeleton = value;
26+
this.updateChildren();
27+
}
28+
29+
get skeleton(): any {
30+
return this._skeleton;
31+
}
32+
33+
ngAfterContentInit() {
34+
this.updateChildren();
35+
}
36+
37+
protected updateChildren() {
38+
if (this.children) {
39+
this.children.toArray().forEach(child => child.skeleton = this.skeleton);
40+
}
41+
}
1342
}

‎src/accordion/accordion.stories.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,16 @@ storiesOf("Accordion", module)
5252
],
5353
selected: action("item expanded")
5454
}
55+
}))
56+
.add("Skeleton", () => ({
57+
template: `
58+
<div style="width: 500px">
59+
<ibm-accordion skeleton="true">
60+
<ibm-accordion-item expanded="true"></ibm-accordion-item>
61+
<ibm-accordion-item></ibm-accordion-item>
62+
<ibm-accordion-item></ibm-accordion-item>
63+
<ibm-accordion-item></ibm-accordion-item>
64+
</ibm-accordion>
65+
</div>
66+
`
5567
}));

‎src/breadcrumb/breadcrumb-item.component.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import {
88
selector: "ibm-breadcrumb-item",
99
template: `
1010
<a class="bx--link"
11-
href="{{href}}"
12-
*ngIf="href; else content">
11+
href="{{skeleton ? href : '/#'}}"
12+
*ngIf="skeleton || href; else content">
1313
<ng-container *ngTemplateOutlet="content"></ng-container>
1414
</a>
1515
<ng-template #content>
@@ -19,5 +19,7 @@ import {
1919
export class BreadcrumbItemComponent {
2020
@Input() href: string;
2121

22+
@Input() skeleton = false;
23+
2224
@HostBinding("class.bx--breadcrumb-item") itemClass = true;
2325
}

‎src/breadcrumb/breadcrumb.component.ts‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import {
22
Component,
3-
Input
3+
Input,
4+
ContentChildren,
5+
QueryList,
6+
AfterContentInit
47
} from "@angular/core";
58

69
import { BreadcrumbItem } from "./breadcrumb-item.interface";
10+
import { BreadcrumbItemComponent } from "./breadcrumb-item.component";
711

812
const MINIMUM_OVERFLOW_THRESHOLD = 4;
913

@@ -12,6 +16,7 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4;
1216
template: `
1317
<nav #nav class="bx--breadcrumb"
1418
[ngClass]="{
19+
'bx--skeleton' : skeleton,
1520
'bx--breadcrumb--no-trailing-slash' : noTrailingSlash
1621
}"
1722
[attr.aria-label]="ariaLabel">
@@ -50,14 +55,27 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4;
5055
</ng-template>
5156
</nav>`
5257
})
53-
export class Breadcrumb {
58+
export class Breadcrumb implements AfterContentInit {
59+
@ContentChildren(BreadcrumbItemComponent) children: QueryList<BreadcrumbItemComponent>;
60+
5461
@Input() items: Array<BreadcrumbItem>;
5562

5663
@Input() noTrailingSlash = false;
5764

5865
@Input() ariaLabel: string;
5966

6067
protected _threshold: number;
68+
protected _skeleton = false;
69+
70+
@Input()
71+
set skeleton(value: any) {
72+
this._skeleton = value;
73+
this.updateChildren();
74+
}
75+
76+
get skeleton(): any {
77+
return this._skeleton;
78+
}
6179

6280
@Input()
6381
set threshold(threshold: number) {
@@ -71,6 +89,10 @@ export class Breadcrumb {
7189
return this._threshold;
7290
}
7391

92+
ngAfterContentInit() {
93+
this.updateChildren();
94+
}
95+
7496
get shouldShowContent(): boolean {
7597
return !this.items;
7698
}
@@ -97,4 +119,10 @@ export class Breadcrumb {
97119
get last(): BreadcrumbItem {
98120
return this.shouldShowOverflow ? this.items[this.items.length - 1] : null;
99121
}
122+
123+
protected updateChildren() {
124+
if (this.children) {
125+
this.children.toArray().forEach(child => child.skeleton = this.skeleton);
126+
}
127+
}
100128
}

‎src/breadcrumb/breadcrumb.stories.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,16 @@ storiesOf("Breadcrumb", module)
5757
threshold: number("threshold", 4),
5858
items: createBreadcrumbItems
5959
}
60+
}))
61+
.add("Skeleton", () => ({
62+
template: `
63+
<ibm-breadcrumb skeleton="true" [noTrailingSlash]="noTrailingSlash">
64+
<ibm-breadcrumb-item></ibm-breadcrumb-item>
65+
<ibm-breadcrumb-item></ibm-breadcrumb-item>
66+
<ibm-breadcrumb-item></ibm-breadcrumb-item>
67+
<ibm-breadcrumb-item></ibm-breadcrumb-item>
68+
</ibm-breadcrumb>`,
69+
props: {
70+
noTrailingSlash: boolean("noTrailingSlash", true)
71+
}
6072
}));

‎src/dropdown/dropdown.component.ts‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,12 @@ import { I18n } from "./../i18n/i18n.module";
2929
selector: "ibm-dropdown",
3030
template: `
3131
<div
32-
class="bx--list-box"
33-
[ngClass]="{'bx--dropdown--light': theme === 'light'}">
32+
class="bx--list-box bx--dropdown-v2"
33+
[ngClass]="{
34+
'bx--dropdown--light': theme === 'light',
35+
'bx--list-box--inline': inline,
36+
'bx--skeleton': skeleton
37+
}">
3438
<button
3539
type="button"
3640
#dropdownButton
@@ -42,7 +46,7 @@ import { I18n } from "./../i18n/i18n.module";
4246
(blur)="onBlur()"
4347
[disabled]="disabled">
4448
<span class="bx--list-box__label">{{getDisplayValue() | async}}</span>
45-
<div class="bx--list-box__menu-icon" [ngClass]="{'bx--list-box__menu-icon--open': !menuIsClosed }">
49+
<div *ngIf="!skeleton" class="bx--list-box__menu-icon" [ngClass]="{'bx--list-box__menu-icon--open': !menuIsClosed }">
4650
<svg fill-rule="evenodd" height="5" role="img" viewBox="0 0 10 5" width="10" alt="Open menu" [attr.aria-label]="menuButtonLabel">
4751
<title>{{menuButtonLabel}}</title>
4852
<path d="M0 0l5 4.998L10 0z"></path>
@@ -93,6 +97,14 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
9397
* Set to `true` to disable the dropdown.
9498
*/
9599
@Input() disabled = false;
100+
/**
101+
* Set to `true` for a loading dropdown.
102+
*/
103+
@Input() skeleton = false;
104+
/**
105+
* Set to `true` for an inline dropdown.
106+
*/
107+
@Input() inline = false;
96108
/**
97109
* Deprecated. Dropdown now defaults to appending inline
98110
* Set to `true` if the `Dropdown` is to be appended to the DOM body.
@@ -198,13 +210,18 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
198210
* The `type` property specifies whether the `Dropdown` allows single selection or multi selection.
199211
*/
200212
ngOnInit() {
201-
this.view.type = this.type;
213+
if (this.view) {
214+
this.view.type = this.type;
215+
}
202216
}
203217

204218
/**
205219
* Initializes classes and subscribes to events for single or multi selection.
206220
*/
207221
ngAfterContentInit() {
222+
if (!this.view) {
223+
return;
224+
}
208225
this.view.type = this.type;
209226
this.view.size = this.size;
210227
this.view.select.subscribe(event => {
@@ -323,6 +340,9 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
323340
* Returns the display value if there is no selection, otherwise the selection will be returned.
324341
*/
325342
getDisplayValue(): Observable<string> {
343+
if (!this.view) {
344+
return;
345+
}
326346
let selected = this.view.getSelected();
327347
if (selected && !this.displayValue) {
328348
if (this.type === "multi") {

‎src/dropdown/dropdown.stories.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,4 +87,25 @@ storiesOf("Dropdown", module)
8787
],
8888
model: null
8989
}
90+
}))
91+
.add("Skeleton", () => ({
92+
template: `
93+
<div style="width: 300px">
94+
<ibm-dropdown skeleton="true">
95+
<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
96+
</ibm-dropdown>
97+
&nbsp;
98+
<ibm-dropdown skeleton="true" inline="true">
99+
<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
100+
</ibm-dropdown>
101+
</div>
102+
`,
103+
props: {
104+
items: [
105+
{ content: "one" },
106+
{ content: "two" },
107+
{ content: "three" },
108+
{ content: "four" }
109+
]
110+
}
90111
}));

‎src/file-uploader/file-uploader.component.ts‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,35 @@ const noop = () => {};
1616
@Component({
1717
selector: "ibm-file-uploader",
1818
template: `
19-
<strong class="bx--label">{{title}}</strong>
20-
<p class="bx--label-description">{{description}}</p>
21-
<div class="bx--file">
22-
<button
23-
ibmButton="secondary"
24-
(click)="fileInput.click()"
25-
[attr.for]="fileUploaderId">
26-
{{buttonText}}
27-
</button>
28-
<input
29-
#fileInput
30-
type="file"
31-
class="bx--file-input"
32-
[accept]="accept"
33-
[id]="fileUploaderId"
34-
[multiple]="multiple"
35-
(change)="onFilesAdded()"/>
36-
<div class="bx--file-container">
37-
<ibm-file *ngFor="let fileItem of files" [fileItem]="fileItem" (remove)="removeFile(fileItem)"></ibm-file>
19+
<ng-container *ngIf="!skeleton; else skeletonTemplate">
20+
<strong class="bx--label">{{title}}</strong>
21+
<p class="bx--label-description">{{description}}</p>
22+
<div class="bx--file">
23+
<button
24+
ibmButton="secondary"
25+
(click)="fileInput.click()"
26+
[attr.for]="fileUploaderId">
27+
{{buttonText}}
28+
</button>
29+
<input
30+
#fileInput
31+
type="file"
32+
class="bx--file-input"
33+
[accept]="accept"
34+
[id]="fileUploaderId"
35+
[multiple]="multiple"
36+
(change)="onFilesAdded()"/>
37+
<div class="bx--file-container">
38+
<ibm-file *ngFor="let fileItem of files" [fileItem]="fileItem" (remove)="removeFile(fileItem)"></ibm-file>
39+
</div>
3840
</div>
39-
</div>
41+
</ng-container>
42+
43+
<ng-template #skeletonTemplate>
44+
<div class="bx--skeleton__text" style="width: 100px"></div>
45+
<div class="bx--skeleton__text" style="width: 225px"></div>
46+
<button ibmButton skeleton="true"></button>
47+
</ng-template>
4048
`,
4149
providers: [
4250
{
@@ -75,6 +83,10 @@ export class FileUploader implements OnInit {
7583
* Defaults to `true`. Accepts multiple files.
7684
*/
7785
@Input() multiple = true;
86+
/**
87+
* Set to `true` for a loading file uploader.
88+
*/
89+
@Input() skeleton = false;
7890
/**
7991
* Provides a unique id for the underlying <input> node
8092
*/

0 commit comments

Comments
 (0)