carbon-components-angular
Version:
Next generation components
121 lines (119 loc) • 10.7 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input, TemplateRef } from "@angular/core";
import { ContainedListKind, ContainedListSize } from "./contained-list.enums";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* Get started with importing the module:
*
* ```typescript
* import { ContainedListModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-contained-list--basic)
*/
export class ContainedList {
constructor() {
/**
* Specify whether the dividing lines in between list items should be inset.
*/
this.isInset = false;
/**
* The kind of ContainedList you want to display.
*/
this.kind = ContainedListKind.OnPage;
/**
* Specify the size of the contained list.
*/
this.size = ContainedListSize.Large;
/**
* Label id for the contained list.
*/
this.labelId = `contained-list-${ContainedList.count++}-header`;
/**
* Exposing ContainedListSize enum to the template
*/
this.ContainedListSize = ContainedListSize;
/**
* Exposing ContainedListKind enum to the template
*/
this.ContainedListKind = ContainedListKind;
}
isTemplate(value) {
return value instanceof TemplateRef;
}
}
/** Used to generate unique IDs */
ContainedList.count = 0;
ContainedList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContainedList, deps: [], target: i0.ɵɵFactoryTarget.Component });
ContainedList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContainedList, selector: "cds-contained-list, ibm-contained-list", inputs: { action: "action", isInset: "isInset", kind: "kind", label: "label", size: "size", labelId: "labelId" }, ngImport: i0, template: `
<div
class="cds--contained-list"
[ngClass]="{
'cds--contained-list--inset-rulers': isInset,
'cds--contained-list--on-page': kind === ContainedListKind.OnPage,
'cds--contained-list--disclosed': kind === ContainedListKind.Disclosed,
'cds--contained-list--sm': size === ContainedListSize.Small,
'cds--contained-list--md': size === ContainedListSize.Medium,
'cds--contained-list--lg': size === ContainedListSize.Large,
'cds--contained-list--xl': size === ContainedListSize.ExtraLarge
}">
<div class="cds--contained-list__header">
<div [id]="labelId" class="cds--contained-list__label">
<ng-container *ngIf="!isTemplate(label)">{{ label }}</ng-container>
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
</div>
<div class="cds--contained-list__action" *ngIf="action">
<ng-template [ngTemplateOutlet]="action"></ng-template>
</div>
</div>
<div role="list" [attr.aria-labelledby]="labelId">
<ng-content></ng-content>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContainedList, decorators: [{
type: Component,
args: [{
selector: "cds-contained-list, ibm-contained-list",
template: `
<div
class="cds--contained-list"
[ngClass]="{
'cds--contained-list--inset-rulers': isInset,
'cds--contained-list--on-page': kind === ContainedListKind.OnPage,
'cds--contained-list--disclosed': kind === ContainedListKind.Disclosed,
'cds--contained-list--sm': size === ContainedListSize.Small,
'cds--contained-list--md': size === ContainedListSize.Medium,
'cds--contained-list--lg': size === ContainedListSize.Large,
'cds--contained-list--xl': size === ContainedListSize.ExtraLarge
}">
<div class="cds--contained-list__header">
<div [id]="labelId" class="cds--contained-list__label">
<ng-container *ngIf="!isTemplate(label)">{{ label }}</ng-container>
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
</div>
<div class="cds--contained-list__action" *ngIf="action">
<ng-template [ngTemplateOutlet]="action"></ng-template>
</div>
</div>
<div role="list" [attr.aria-labelledby]="labelId">
<ng-content></ng-content>
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], propDecorators: { action: [{
type: Input
}], isInset: [{
type: Input
}], kind: [{
type: Input
}], label: [{
type: Input
}], size: [{
type: Input
}], labelId: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGFpbmVkLWxpc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbnRhaW5lZC1saXN0L2NvbnRhaW5lZC1saXN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sdUJBQXVCLEVBQ3ZCLFNBQVMsRUFFVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7QUFFOUU7Ozs7Ozs7O0dBUUc7QUFnQ0gsTUFBTSxPQUFPLGFBQWE7SUEvQjFCO1FBd0NDOztXQUVHO1FBQ00sWUFBTyxHQUFHLEtBQUssQ0FBQztRQUV6Qjs7V0FFRztRQUNNLFNBQUksR0FBc0IsaUJBQWlCLENBQUMsTUFBTSxDQUFDO1FBTzVEOztXQUVHO1FBQ00sU0FBSSxHQUFzQixpQkFBaUIsQ0FBQyxLQUFLLENBQUM7UUFFM0Q7O1dBRUc7UUFDTSxZQUFPLEdBQUcsa0JBQWtCLGFBQWEsQ0FBQyxLQUFLLEVBQUUsU0FBUyxDQUFDO1FBRXBFOztXQUVHO1FBQ0ksc0JBQWlCLEdBQTZCLGlCQUFpQixDQUFDO1FBRXZFOztXQUVHO1FBQ0ksc0JBQWlCLEdBQTZCLGlCQUFpQixDQUFDO0tBS3ZFO0lBSE8sVUFBVSxDQUFDLEtBQWdDO1FBQ2pELE9BQU8sS0FBSyxZQUFZLFdBQVcsQ0FBQztJQUNyQyxDQUFDOztBQTdDRCxrQ0FBa0M7QUFDbkIsbUJBQUssR0FBRyxDQUFFLENBQUE7MEdBRmIsYUFBYTs4RkFBYixhQUFhLGdNQTdCZjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUEwQlQ7MkZBR1csYUFBYTtrQkEvQnpCLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLHdDQUF3QztvQkFDbEQsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQTBCVDtvQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDL0M7OEJBUVMsTUFBTTtzQkFBZCxLQUFLO2dCQUtHLE9BQU87c0JBQWYsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBS0csS0FBSztzQkFBYixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFLRyxPQUFPO3NCQUFmLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuXHRDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcblx0Q29tcG9uZW50LFxuXHRIb3N0QmluZGluZyxcblx0SW5wdXQsXG5cdFRlbXBsYXRlUmVmXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBDb250YWluZWRMaXN0S2luZCwgQ29udGFpbmVkTGlzdFNpemUgfSBmcm9tIFwiLi9jb250YWluZWQtbGlzdC5lbnVtc1wiO1xuXG4vKipcbiAqIEdldCBzdGFydGVkIHdpdGggaW1wb3J0aW5nIHRoZSBtb2R1bGU6XG4gKlxuICogYGBgdHlwZXNjcmlwdFxuICogaW1wb3J0IHsgQ29udGFpbmVkTGlzdE1vZHVsZSB9IGZyb20gJ2NhcmJvbi1jb21wb25lbnRzLWFuZ3VsYXInO1xuICogYGBgXG4gKlxuICogW1NlZSBkZW1vXSguLi8uLi8/cGF0aD0vc3RvcnkvY29tcG9uZW50cy1jb250YWluZWQtbGlzdC0tYmFzaWMpXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtY29udGFpbmVkLWxpc3QsIGlibS1jb250YWluZWQtbGlzdFwiLFxuXHR0ZW1wbGF0ZTogYFxuXHRcdDxkaXZcblx0XHRcdGNsYXNzPVwiY2RzLS1jb250YWluZWQtbGlzdFwiXG5cdFx0XHRbbmdDbGFzc109XCJ7XG5cdFx0XHRcdCdjZHMtLWNvbnRhaW5lZC1saXN0LS1pbnNldC1ydWxlcnMnOiBpc0luc2V0LFxuXHRcdFx0XHQnY2RzLS1jb250YWluZWQtbGlzdC0tb24tcGFnZSc6IGtpbmQgPT09IENvbnRhaW5lZExpc3RLaW5kLk9uUGFnZSxcblx0XHRcdFx0J2Nkcy0tY29udGFpbmVkLWxpc3QtLWRpc2Nsb3NlZCc6IGtpbmQgPT09IENvbnRhaW5lZExpc3RLaW5kLkRpc2Nsb3NlZCxcblx0XHRcdFx0J2Nkcy0tY29udGFpbmVkLWxpc3QtLXNtJzogc2l6ZSA9PT0gQ29udGFpbmVkTGlzdFNpemUuU21hbGwsXG5cdFx0XHRcdCdjZHMtLWNvbnRhaW5lZC1saXN0LS1tZCc6IHNpemUgPT09IENvbnRhaW5lZExpc3RTaXplLk1lZGl1bSxcblx0XHRcdFx0J2Nkcy0tY29udGFpbmVkLWxpc3QtLWxnJzogc2l6ZSA9PT0gQ29udGFpbmVkTGlzdFNpemUuTGFyZ2UsXG5cdFx0XHRcdCdjZHMtLWNvbnRhaW5lZC1saXN0LS14bCc6IHNpemUgPT09IENvbnRhaW5lZExpc3RTaXplLkV4dHJhTGFyZ2Vcblx0XHRcdH1cIj5cblx0XHRcdDxkaXYgY2xhc3M9XCJjZHMtLWNvbnRhaW5lZC1saXN0X19oZWFkZXJcIj5cblx0XHRcdFx0PGRpdiBbaWRdPVwibGFiZWxJZFwiIGNsYXNzPVwiY2RzLS1jb250YWluZWQtbGlzdF9fbGFiZWxcIj5cblx0XHRcdFx0XHQ8bmctY29udGFpbmVyICpuZ0lmPVwiIWlzVGVtcGxhdGUobGFiZWwpXCI+e3sgbGFiZWwgfX08L25nLWNvbnRhaW5lcj5cblx0XHRcdFx0XHQ8bmctdGVtcGxhdGUgKm5nSWY9XCJpc1RlbXBsYXRlKGxhYmVsKVwiIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImxhYmVsXCI+PC9uZy10ZW1wbGF0ZT5cblx0XHRcdFx0PC9kaXY+XG5cblx0XHRcdFx0PGRpdiBjbGFzcz1cImNkcy0tY29udGFpbmVkLWxpc3RfX2FjdGlvblwiICpuZ0lmPVwiYWN0aW9uXCI+XG5cdFx0XHRcdFx0PG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImFjdGlvblwiPjwvbmctdGVtcGxhdGU+XG5cdFx0XHRcdDwvZGl2PlxuXHRcdFx0PC9kaXY+XG5cdFx0XHQ8ZGl2IHJvbGU9XCJsaXN0XCIgW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XT1cImxhYmVsSWRcIj5cblx0XHRcdFx0PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuXHRcdFx0PC9kaXY+XG5cdFx0PC9kaXY+XG5cdGAsXG5cdGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIENvbnRhaW5lZExpc3Qge1xuXHQvKiogVXNlZCB0byBnZW5lcmF0ZSB1bmlxdWUgSURzICovXG5cdHByaXZhdGUgc3RhdGljIGNvdW50ID0gMDtcblxuXHQvKipcblx0ICogQSBzbG90IGZvciBhIHBvc3NpYmxlIGludGVyYWN0aXZlIGVsZW1lbnQgdG8gcmVuZGVyIHdpdGhpbiB0aGUgbGlzdCBoZWFkZXIuXG5cdCAqL1xuXHRASW5wdXQoKSBhY3Rpb246IFRlbXBsYXRlUmVmPGFueT47XG5cblx0LyoqXG5cdCAqIFNwZWNpZnkgd2hldGhlciB0aGUgZGl2aWRpbmcgbGluZXMgaW4gYmV0d2VlbiBsaXN0IGl0ZW1zIHNob3VsZCBiZSBpbnNldC5cblx0ICovXG5cdEBJbnB1dCgpIGlzSW5zZXQgPSBmYWxzZTtcblxuXHQvKipcblx0ICogVGhlIGtpbmQgb2YgQ29udGFpbmVkTGlzdCB5b3Ugd2FudCB0byBkaXNwbGF5LlxuXHQgKi9cblx0QElucHV0KCkga2luZDogQ29udGFpbmVkTGlzdEtpbmQgPSBDb250YWluZWRMaXN0S2luZC5PblBhZ2U7XG5cblx0LyoqXG5cdCAqIEEgbGFiZWwgZGVzY3JpYmluZyB0aGUgY29udGFpbmVkIGxpc3QuXG5cdCAqL1xuXHRASW5wdXQoKSBsYWJlbDogc3RyaW5nIHwgVGVtcGxhdGVSZWY8YW55PjtcblxuXHQvKipcblx0ICogU3BlY2lmeSB0aGUgc2l6ZSBvZiB0aGUgY29udGFpbmVkIGxpc3QuXG5cdCAqL1xuXHRASW5wdXQoKSBzaXplOiBDb250YWluZWRMaXN0U2l6ZSA9IENvbnRhaW5lZExpc3RTaXplLkxhcmdlO1xuXG5cdC8qKlxuXHQgKiBMYWJlbCBpZCBmb3IgdGhlIGNvbnRhaW5lZCBsaXN0LlxuXHQgKi9cblx0QElucHV0KCkgbGFiZWxJZCA9IGBjb250YWluZWQtbGlzdC0ke0NvbnRhaW5lZExpc3QuY291bnQrK30taGVhZGVyYDtcblxuXHQvKipcblx0ICogRXhwb3NpbmcgQ29udGFpbmVkTGlzdFNpemUgZW51bSB0byB0aGUgdGVtcGxhdGVcblx0ICovXG5cdHB1YmxpYyBDb250YWluZWRMaXN0U2l6ZTogdHlwZW9mIENvbnRhaW5lZExpc3RTaXplID0gQ29udGFpbmVkTGlzdFNpemU7XG5cblx0LyoqXG5cdCAqIEV4cG9zaW5nIENvbnRhaW5lZExpc3RLaW5kIGVudW0gdG8gdGhlIHRlbXBsYXRlXG5cdCAqL1xuXHRwdWJsaWMgQ29udGFpbmVkTGlzdEtpbmQ6IHR5cGVvZiBDb250YWluZWRMaXN0S2luZCA9IENvbnRhaW5lZExpc3RLaW5kO1xuXG5cdHB1YmxpYyBpc1RlbXBsYXRlKHZhbHVlOiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+KSB7XG5cdFx0cmV0dXJuIHZhbHVlIGluc3RhbmNlb2YgVGVtcGxhdGVSZWY7XG5cdH1cbn1cbiJdfQ==