carbon-components-angular
Version:
Next generation components
131 lines (129 loc) • 12 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", actionData: "actionData", 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" [ngTemplateOutletContext]="{ $implicit: actionData }"></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" [ngTemplateOutletContext]="{ $implicit: actionData }"></ng-template>
</div>
</div>
<div role="list" [attr.aria-labelledby]="labelId">
<ng-content></ng-content>
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], propDecorators: { action: [{
type: Input
}], actionData: [{
type: Input
}], isInset: [{
type: Input
}], kind: [{
type: Input
}], label: [{
type: Input
}], size: [{
type: Input
}], labelId: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGFpbmVkLWxpc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbnRhaW5lZC1saXN0L2NvbnRhaW5lZC1saXN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7QUFFOUU7Ozs7Ozs7O0dBUUc7QUFvQ0gsTUFBTSxPQUFPLGFBQWE7SUFuQzFCO1FBaURDOztXQUVHO1FBQ00sWUFBTyxHQUFHLEtBQUssQ0FBQztRQUV6Qjs7V0FFRztRQUNNLFNBQUksR0FBc0IsaUJBQWlCLENBQUMsTUFBTSxDQUFDO1FBTzVEOztXQUVHO1FBQ00sU0FBSSxHQUFzQixpQkFBaUIsQ0FBQyxLQUFLLENBQUM7UUFFM0Q7O1dBRUc7UUFDTSxZQUFPLEdBQUcsa0JBQWtCLGFBQWEsQ0FBQyxLQUFLLEVBQUUsU0FBUyxDQUFDO1FBRXBFOztXQUVHO1FBQ0ksc0JBQWlCLEdBQTZCLGlCQUFpQixDQUFDO1FBRXZFOztXQUVHO1FBQ0ksc0JBQWlCLEdBQTZCLGlCQUFpQixDQUFDO0tBS3ZFO0lBSE8sVUFBVSxDQUFDLEtBQWdDO1FBQ2pELE9BQU8sS0FBSyxZQUFZLFdBQVcsQ0FBQztJQUNyQyxDQUFDOztBQWxERCxrQ0FBa0M7QUFDbkIsbUJBQUssR0FBRyxDQUFFLENBQUE7MEdBRmIsYUFBYTs4RkFBYixhQUFhLDBOQWpDZjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBOEJUOzJGQUdXLGFBQWE7a0JBbkN6QixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSx3Q0FBd0M7b0JBQ2xELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBOEJUO29CQUNELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2lCQUMvQzs4QkFRUyxNQUFNO3NCQUFkLEtBQUs7Z0JBS0csVUFBVTtzQkFBbEIsS0FBSztnQkFLRyxPQUFPO3NCQUFmLEtBQUs7Z0JBS0csSUFBSTtzQkFBWixLQUFLO2dCQUtHLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBS0csT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcblx0Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG5cdENvbXBvbmVudCxcblx0SW5wdXQsXG5cdFRlbXBsYXRlUmVmXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBDb250YWluZWRMaXN0S2luZCwgQ29udGFpbmVkTGlzdFNpemUgfSBmcm9tIFwiLi9jb250YWluZWQtbGlzdC5lbnVtc1wiO1xuXG4vKipcbiAqIEdldCBzdGFydGVkIHdpdGggaW1wb3J0aW5nIHRoZSBtb2R1bGU6XG4gKlxuICogYGBgdHlwZXNjcmlwdFxuICogaW1wb3J0IHsgQ29udGFpbmVkTGlzdE1vZHVsZSB9IGZyb20gJ2NhcmJvbi1jb21wb25lbnRzLWFuZ3VsYXInO1xuICogYGBgXG4gKlxuICogW1NlZSBkZW1vXSguLi8uLi8/cGF0aD0vc3RvcnkvY29tcG9uZW50cy1jb250YWluZWQtbGlzdC0tYmFzaWMpXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtY29udGFpbmVkLWxpc3QsIGlibS1jb250YWluZWQtbGlzdFwiLFxuXHR0ZW1wbGF0ZTogYFxuXHRcdDxkaXZcblx0XHRcdGNsYXNzPVwiY2RzLS1jb250YWluZWQtbGlzdFwiXG5cdFx0XHRbbmdDbGFzc109XCJ7XG5cdFx0XHRcdCdjZHMtLWNvbnRhaW5lZC1saXN0LS1pbnNldC1ydWxlcnMnOiBpc0luc2V0LFxuXHRcdFx0XHQnY2RzLS1jb250YWluZWQtbGlzdC0tb24tcGFnZSc6IGtpbmQgPT09IENvbnRhaW5lZExpc3RLaW5kLk9uUGFnZSxcblx0XHRcdFx0J2Nkcy0tY29udGFpbmVkLWxpc3QtLWRpc2Nsb3NlZCc6IGtpbmQgPT09IENvbnRhaW5lZExpc3RLaW5kLkRpc2Nsb3NlZCxcblx0XHRcdFx0J2Nkcy0tY29udGFpbmVkLWxpc3QtLXNtJzogc2l6ZSA9PT0gQ29udGFpbmVkTGlzdFNpemUuU21hbGwsXG5cdFx0XHRcdCdjZHMtLWNvbnRhaW5lZC1saXN0LS1tZCc6IHNpemUgPT09IENvbnRhaW5lZExpc3RTaXplLk1lZGl1bSxcblx0XHRcdFx0J2Nkcy0tY29udGFpbmVkLWxpc3QtLWxnJzogc2l6ZSA9PT0gQ29udGFpbmVkTGlzdFNpemUuTGFyZ2UsXG5cdFx0XHRcdCdjZHMtLWNvbnRhaW5lZC1saXN0LS14bCc6IHNpemUgPT09IENvbnRhaW5lZExpc3RTaXplLkV4dHJhTGFyZ2UsXG5cdFx0XHRcdCdjZHMtLWxheW91dC0tc2l6ZS1zbSc6IHNpemUgPT09IENvbnRhaW5lZExpc3RTaXplLlNtYWxsLFxuXHRcdFx0XHQnY2RzLS1sYXlvdXQtLXNpemUtbWQnOiBzaXplID09PSBDb250YWluZWRMaXN0U2l6ZS5NZWRpdW0sXG5cdFx0XHRcdCdjZHMtLWxheW91dC0tc2l6ZS1sZyc6IHNpemUgPT09IENvbnRhaW5lZExpc3RTaXplLkxhcmdlLFxuXHRcdFx0XHQnY2RzLS1sYXlvdXQtLXNpemUteGwnOiBzaXplID09PSBDb250YWluZWRMaXN0U2l6ZS5FeHRyYUxhcmdlXG5cdFx0XHR9XCI+XG5cdFx0XHQ8ZGl2IGNsYXNzPVwiY2RzLS1jb250YWluZWQtbGlzdF9faGVhZGVyXCI+XG5cdFx0XHRcdDxkaXYgW2lkXT1cImxhYmVsSWRcIiBjbGFzcz1cImNkcy0tY29udGFpbmVkLWxpc3RfX2xhYmVsXCI+XG5cdFx0XHRcdFx0PG5nLWNvbnRhaW5lciAqbmdJZj1cIiFpc1RlbXBsYXRlKGxhYmVsKVwiPnt7IGxhYmVsIH19PC9uZy1jb250YWluZXI+XG5cdFx0XHRcdFx0PG5nLXRlbXBsYXRlICpuZ0lmPVwiaXNUZW1wbGF0ZShsYWJlbClcIiBbbmdUZW1wbGF0ZU91dGxldF09XCJsYWJlbFwiPjwvbmctdGVtcGxhdGU+XG5cdFx0XHRcdDwvZGl2PlxuXG5cdFx0XHRcdDxkaXYgY2xhc3M9XCJjZHMtLWNvbnRhaW5lZC1saXN0X19hY3Rpb25cIiAqbmdJZj1cImFjdGlvblwiPlxuXHRcdFx0XHRcdDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJhY3Rpb25cIiBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwieyAkaW1wbGljaXQ6IGFjdGlvbkRhdGEgfVwiPjwvbmctdGVtcGxhdGU+XG5cdFx0XHRcdDwvZGl2PlxuXHRcdFx0PC9kaXY+XG5cdFx0XHQ8ZGl2IHJvbGU9XCJsaXN0XCIgW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XT1cImxhYmVsSWRcIj5cblx0XHRcdFx0PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuXHRcdFx0PC9kaXY+XG5cdFx0PC9kaXY+XG5cdGAsXG5cdGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIENvbnRhaW5lZExpc3Qge1xuXHQvKiogVXNlZCB0byBnZW5lcmF0ZSB1bmlxdWUgSURzICovXG5cdHByaXZhdGUgc3RhdGljIGNvdW50ID0gMDtcblxuXHQvKipcblx0ICogQSBzbG90IGZvciBhIHBvc3NpYmxlIGludGVyYWN0aXZlIGVsZW1lbnQgdG8gcmVuZGVyIHdpdGhpbiB0aGUgbGlzdCBoZWFkZXIuXG5cdCAqL1xuXHRASW5wdXQoKSBhY3Rpb246IFRlbXBsYXRlUmVmPGFueT47XG5cblx0LyoqXG5cdCAqIE9wdGlvbmFsIGludGVyYWN0aXZlIGVsZW1lbnQgZGF0YS5cblx0ICovXG5cdEBJbnB1dCgpIGFjdGlvbkRhdGE6IGFueTtcblxuXHQvKipcblx0ICogU3BlY2lmeSB3aGV0aGVyIHRoZSBkaXZpZGluZyBsaW5lcyBpbiBiZXR3ZWVuIGxpc3QgaXRlbXMgc2hvdWxkIGJlIGluc2V0LlxuXHQgKi9cblx0QElucHV0KCkgaXNJbnNldCA9IGZhbHNlO1xuXG5cdC8qKlxuXHQgKiBUaGUga2luZCBvZiBDb250YWluZWRMaXN0IHlvdSB3YW50IHRvIGRpc3BsYXkuXG5cdCAqL1xuXHRASW5wdXQoKSBraW5kOiBDb250YWluZWRMaXN0S2luZCA9IENvbnRhaW5lZExpc3RLaW5kLk9uUGFnZTtcblxuXHQvKipcblx0ICogQSBsYWJlbCBkZXNjcmliaW5nIHRoZSBjb250YWluZWQgbGlzdC5cblx0ICovXG5cdEBJbnB1dCgpIGxhYmVsOiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+O1xuXG5cdC8qKlxuXHQgKiBTcGVjaWZ5IHRoZSBzaXplIG9mIHRoZSBjb250YWluZWQgbGlzdC5cblx0ICovXG5cdEBJbnB1dCgpIHNpemU6IENvbnRhaW5lZExpc3RTaXplID0gQ29udGFpbmVkTGlzdFNpemUuTGFyZ2U7XG5cblx0LyoqXG5cdCAqIExhYmVsIGlkIGZvciB0aGUgY29udGFpbmVkIGxpc3QuXG5cdCAqL1xuXHRASW5wdXQoKSBsYWJlbElkID0gYGNvbnRhaW5lZC1saXN0LSR7Q29udGFpbmVkTGlzdC5jb3VudCsrfS1oZWFkZXJgO1xuXG5cdC8qKlxuXHQgKiBFeHBvc2luZyBDb250YWluZWRMaXN0U2l6ZSBlbnVtIHRvIHRoZSB0ZW1wbGF0ZVxuXHQgKi9cblx0cHVibGljIENvbnRhaW5lZExpc3RTaXplOiB0eXBlb2YgQ29udGFpbmVkTGlzdFNpemUgPSBDb250YWluZWRMaXN0U2l6ZTtcblxuXHQvKipcblx0ICogRXhwb3NpbmcgQ29udGFpbmVkTGlzdEtpbmQgZW51bSB0byB0aGUgdGVtcGxhdGVcblx0ICovXG5cdHB1YmxpYyBDb250YWluZWRMaXN0S2luZDogdHlwZW9mIENvbnRhaW5lZExpc3RLaW5kID0gQ29udGFpbmVkTGlzdEtpbmQ7XG5cblx0cHVibGljIGlzVGVtcGxhdGUodmFsdWU6IHN0cmluZyB8IFRlbXBsYXRlUmVmPGFueT4pIHtcblx0XHRyZXR1cm4gdmFsdWUgaW5zdGFuY2VvZiBUZW1wbGF0ZVJlZjtcblx0fVxufVxuIl19