carbon-components-angular
Version:
Next generation components
129 lines (127 loc) • 11.6 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,
'cds--layout--size-sm': size === ContainedListSize.Small,
'cds--layout--size-md': size === ContainedListSize.Medium,
'cds--layout--size-lg': size === ContainedListSize.Large,
'cds--layout--size-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,
'cds--layout--size-sm': size === ContainedListSize.Small,
'cds--layout--size-md': size === ContainedListSize.Medium,
'cds--layout--size-lg': size === ContainedListSize.Large,
'cds--layout--size-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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGFpbmVkLWxpc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbnRhaW5lZC1saXN0L2NvbnRhaW5lZC1saXN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sdUJBQXVCLEVBQ3ZCLFNBQVMsRUFFVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7QUFFOUU7Ozs7Ozs7O0dBUUc7QUFvQ0gsTUFBTSxPQUFPLGFBQWE7SUFuQzFCO1FBNENDOztXQUVHO1FBQ00sWUFBTyxHQUFHLEtBQUssQ0FBQztRQUV6Qjs7V0FFRztRQUNNLFNBQUksR0FBc0IsaUJBQWlCLENBQUMsTUFBTSxDQUFDO1FBTzVEOztXQUVHO1FBQ00sU0FBSSxHQUFzQixpQkFBaUIsQ0FBQyxLQUFLLENBQUM7UUFFM0Q7O1dBRUc7UUFDTSxZQUFPLEdBQUcsa0JBQWtCLGFBQWEsQ0FBQyxLQUFLLEVBQUUsU0FBUyxDQUFDO1FBRXBFOztXQUVHO1FBQ0ksc0JBQWlCLEdBQTZCLGlCQUFpQixDQUFDO1FBRXZFOztXQUVHO1FBQ0ksc0JBQWlCLEdBQTZCLGlCQUFpQixDQUFDO0tBS3ZFO0lBSE8sVUFBVSxDQUFDLEtBQWdDO1FBQ2pELE9BQU8sS0FBSyxZQUFZLFdBQVcsQ0FBQztJQUNyQyxDQUFDOztBQTdDRCxrQ0FBa0M7QUFDbkIsbUJBQUssR0FBRyxDQUFFLENBQUE7MEdBRmIsYUFBYTs4RkFBYixhQUFhLGdNQWpDZjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBOEJUOzJGQUdXLGFBQWE7a0JBbkN6QixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSx3Q0FBd0M7b0JBQ2xELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBOEJUO29CQUNELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2lCQUMvQzs4QkFRUyxNQUFNO3NCQUFkLEtBQUs7Z0JBS0csT0FBTztzQkFBZixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFLRyxLQUFLO3NCQUFiLEtBQUs7Z0JBS0csSUFBSTtzQkFBWixLQUFLO2dCQUtHLE9BQU87c0JBQWYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuXHRDb21wb25lbnQsXG5cdEhvc3RCaW5kaW5nLFxuXHRJbnB1dCxcblx0VGVtcGxhdGVSZWZcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IENvbnRhaW5lZExpc3RLaW5kLCBDb250YWluZWRMaXN0U2l6ZSB9IGZyb20gXCIuL2NvbnRhaW5lZC1saXN0LmVudW1zXCI7XG5cbi8qKlxuICogR2V0IHN0YXJ0ZWQgd2l0aCBpbXBvcnRpbmcgdGhlIG1vZHVsZTpcbiAqXG4gKiBgYGB0eXBlc2NyaXB0XG4gKiBpbXBvcnQgeyBDb250YWluZWRMaXN0TW9kdWxlIH0gZnJvbSAnY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhcic7XG4gKiBgYGBcbiAqXG4gKiBbU2VlIGRlbW9dKC4uLy4uLz9wYXRoPS9zdG9yeS9jb21wb25lbnRzLWNvbnRhaW5lZC1saXN0LS1iYXNpYylcbiAqL1xuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiBcImNkcy1jb250YWluZWQtbGlzdCwgaWJtLWNvbnRhaW5lZC1saXN0XCIsXG5cdHRlbXBsYXRlOiBgXG5cdFx0PGRpdlxuXHRcdFx0Y2xhc3M9XCJjZHMtLWNvbnRhaW5lZC1saXN0XCJcblx0XHRcdFtuZ0NsYXNzXT1cIntcblx0XHRcdFx0J2Nkcy0tY29udGFpbmVkLWxpc3QtLWluc2V0LXJ1bGVycyc6IGlzSW5zZXQsXG5cdFx0XHRcdCdjZHMtLWNvbnRhaW5lZC1saXN0LS1vbi1wYWdlJzoga2luZCA9PT0gQ29udGFpbmVkTGlzdEtpbmQuT25QYWdlLFxuXHRcdFx0XHQnY2RzLS1jb250YWluZWQtbGlzdC0tZGlzY2xvc2VkJzoga2luZCA9PT0gQ29udGFpbmVkTGlzdEtpbmQuRGlzY2xvc2VkLFxuXHRcdFx0XHQnY2RzLS1jb250YWluZWQtbGlzdC0tc20nOiBzaXplID09PSBDb250YWluZWRMaXN0U2l6ZS5TbWFsbCxcblx0XHRcdFx0J2Nkcy0tY29udGFpbmVkLWxpc3QtLW1kJzogc2l6ZSA9PT0gQ29udGFpbmVkTGlzdFNpemUuTWVkaXVtLFxuXHRcdFx0XHQnY2RzLS1jb250YWluZWQtbGlzdC0tbGcnOiBzaXplID09PSBDb250YWluZWRMaXN0U2l6ZS5MYXJnZSxcblx0XHRcdFx0J2Nkcy0tY29udGFpbmVkLWxpc3QtLXhsJzogc2l6ZSA9PT0gQ29udGFpbmVkTGlzdFNpemUuRXh0cmFMYXJnZSxcblx0XHRcdFx0J2Nkcy0tbGF5b3V0LS1zaXplLXNtJzogc2l6ZSA9PT0gQ29udGFpbmVkTGlzdFNpemUuU21hbGwsXG5cdFx0XHRcdCdjZHMtLWxheW91dC0tc2l6ZS1tZCc6IHNpemUgPT09IENvbnRhaW5lZExpc3RTaXplLk1lZGl1bSxcblx0XHRcdFx0J2Nkcy0tbGF5b3V0LS1zaXplLWxnJzogc2l6ZSA9PT0gQ29udGFpbmVkTGlzdFNpemUuTGFyZ2UsXG5cdFx0XHRcdCdjZHMtLWxheW91dC0tc2l6ZS14bCc6IHNpemUgPT09IENvbnRhaW5lZExpc3RTaXplLkV4dHJhTGFyZ2Vcblx0XHRcdH1cIj5cblx0XHRcdDxkaXYgY2xhc3M9XCJjZHMtLWNvbnRhaW5lZC1saXN0X19oZWFkZXJcIj5cblx0XHRcdFx0PGRpdiBbaWRdPVwibGFiZWxJZFwiIGNsYXNzPVwiY2RzLS1jb250YWluZWQtbGlzdF9fbGFiZWxcIj5cblx0XHRcdFx0XHQ8bmctY29udGFpbmVyICpuZ0lmPVwiIWlzVGVtcGxhdGUobGFiZWwpXCI+e3sgbGFiZWwgfX08L25nLWNvbnRhaW5lcj5cblx0XHRcdFx0XHQ8bmctdGVtcGxhdGUgKm5nSWY9XCJpc1RlbXBsYXRlKGxhYmVsKVwiIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImxhYmVsXCI+PC9uZy10ZW1wbGF0ZT5cblx0XHRcdFx0PC9kaXY+XG5cblx0XHRcdFx0PGRpdiBjbGFzcz1cImNkcy0tY29udGFpbmVkLWxpc3RfX2FjdGlvblwiICpuZ0lmPVwiYWN0aW9uXCI+XG5cdFx0XHRcdFx0PG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImFjdGlvblwiPjwvbmctdGVtcGxhdGU+XG5cdFx0XHRcdDwvZGl2PlxuXHRcdFx0PC9kaXY+XG5cdFx0XHQ8ZGl2IHJvbGU9XCJsaXN0XCIgW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XT1cImxhYmVsSWRcIj5cblx0XHRcdFx0PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuXHRcdFx0PC9kaXY+XG5cdFx0PC9kaXY+XG5cdGAsXG5cdGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIENvbnRhaW5lZExpc3Qge1xuXHQvKiogVXNlZCB0byBnZW5lcmF0ZSB1bmlxdWUgSURzICovXG5cdHByaXZhdGUgc3RhdGljIGNvdW50ID0gMDtcblxuXHQvKipcblx0ICogQSBzbG90IGZvciBhIHBvc3NpYmxlIGludGVyYWN0aXZlIGVsZW1lbnQgdG8gcmVuZGVyIHdpdGhpbiB0aGUgbGlzdCBoZWFkZXIuXG5cdCAqL1xuXHRASW5wdXQoKSBhY3Rpb246IFRlbXBsYXRlUmVmPGFueT47XG5cblx0LyoqXG5cdCAqIFNwZWNpZnkgd2hldGhlciB0aGUgZGl2aWRpbmcgbGluZXMgaW4gYmV0d2VlbiBsaXN0IGl0ZW1zIHNob3VsZCBiZSBpbnNldC5cblx0ICovXG5cdEBJbnB1dCgpIGlzSW5zZXQgPSBmYWxzZTtcblxuXHQvKipcblx0ICogVGhlIGtpbmQgb2YgQ29udGFpbmVkTGlzdCB5b3Ugd2FudCB0byBkaXNwbGF5LlxuXHQgKi9cblx0QElucHV0KCkga2luZDogQ29udGFpbmVkTGlzdEtpbmQgPSBDb250YWluZWRMaXN0S2luZC5PblBhZ2U7XG5cblx0LyoqXG5cdCAqIEEgbGFiZWwgZGVzY3JpYmluZyB0aGUgY29udGFpbmVkIGxpc3QuXG5cdCAqL1xuXHRASW5wdXQoKSBsYWJlbDogc3RyaW5nIHwgVGVtcGxhdGVSZWY8YW55PjtcblxuXHQvKipcblx0ICogU3BlY2lmeSB0aGUgc2l6ZSBvZiB0aGUgY29udGFpbmVkIGxpc3QuXG5cdCAqL1xuXHRASW5wdXQoKSBzaXplOiBDb250YWluZWRMaXN0U2l6ZSA9IENvbnRhaW5lZExpc3RTaXplLkxhcmdlO1xuXG5cdC8qKlxuXHQgKiBMYWJlbCBpZCBmb3IgdGhlIGNvbnRhaW5lZCBsaXN0LlxuXHQgKi9cblx0QElucHV0KCkgbGFiZWxJZCA9IGBjb250YWluZWQtbGlzdC0ke0NvbnRhaW5lZExpc3QuY291bnQrK30taGVhZGVyYDtcblxuXHQvKipcblx0ICogRXhwb3NpbmcgQ29udGFpbmVkTGlzdFNpemUgZW51bSB0byB0aGUgdGVtcGxhdGVcblx0ICovXG5cdHB1YmxpYyBDb250YWluZWRMaXN0U2l6ZTogdHlwZW9mIENvbnRhaW5lZExpc3RTaXplID0gQ29udGFpbmVkTGlzdFNpemU7XG5cblx0LyoqXG5cdCAqIEV4cG9zaW5nIENvbnRhaW5lZExpc3RLaW5kIGVudW0gdG8gdGhlIHRlbXBsYXRlXG5cdCAqL1xuXHRwdWJsaWMgQ29udGFpbmVkTGlzdEtpbmQ6IHR5cGVvZiBDb250YWluZWRMaXN0S2luZCA9IENvbnRhaW5lZExpc3RLaW5kO1xuXG5cdHB1YmxpYyBpc1RlbXBsYXRlKHZhbHVlOiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+KSB7XG5cdFx0cmV0dXJuIHZhbHVlIGluc3RhbmNlb2YgVGVtcGxhdGVSZWY7XG5cdH1cbn1cbiJdfQ==