carbon-components-angular
Version:
Next generation components
121 lines • 11.1 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output, TemplateRef } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "carbon-components-angular/icon";
export class ContainedListItem {
constructor() {
/**
* Whether this item is disabled.
*/
this.disabled = false;
/**
* Emits click event.
*/
this.click = new EventEmitter();
/**
* Host binding item class.
*/
this.itemClass = true;
/**
* Host binding item role attribute
*/
this.role = "listitem";
}
/**
* Host binding clickable item class.
*/
get itemClickableClass() {
return this.clickable;
}
/**
* Host binding item with icon class.
*/
get itemWithIconClass() {
return !!this.icon;
}
onClick() {
this.click.emit();
}
isTemplate(value) {
return value instanceof TemplateRef;
}
}
ContainedListItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContainedListItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
ContainedListItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContainedListItem, selector: "cds-contained-list-item, ibm-contained-list-item", inputs: { action: "action", actionData: "actionData", disabled: "disabled", clickable: "clickable", icon: "icon" }, outputs: { click: "click" }, host: { properties: { "class.cds--contained-list-item": "this.itemClass", "attr.role": "this.role", "class.cds--contained-list-item--clickable": "this.itemClickableClass", "class.cds--contained-list-item--with-icon": "this.itemWithIconClass" } }, ngImport: i0, template: `
<ng-container *ngIf="clickable">
<button
class="cds--contained-list-item__content"
type="button"
[]="disabled"
(click)="onClick()">
<ng-content select="[cdsContainedListItemButton],[ibmContainedListItemButton]"></ng-content>
</button>
</ng-container>
<ng-container *ngIf="!clickable">
<div class="cds--contained-list-item__content">
<div *ngIf="icon" class="cds--contained-list-item__icon">
<ng-container *ngIf="!isTemplate(icon)"><svg [ibmIcon]="icon" size="16"></svg></ng-container>
<ng-template *ngIf="isTemplate(icon)" [ngTemplateOutlet]="icon"></ng-template>
</div>
<ng-content></ng-content>
</div>
</ng-container>
<div class="cds--contained-list-item__action" *ngIf="action">
<ng-template [ngTemplateOutlet]="action" [ngTemplateOutletContext]="{ $implicit: actionData }"></ng-template>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContainedListItem, decorators: [{
type: Component,
args: [{
selector: "cds-contained-list-item, ibm-contained-list-item",
template: `
<ng-container *ngIf="clickable">
<button
class="cds--contained-list-item__content"
type="button"
[]="disabled"
(click)="onClick()">
<ng-content select="[cdsContainedListItemButton],[ibmContainedListItemButton]"></ng-content>
</button>
</ng-container>
<ng-container *ngIf="!clickable">
<div class="cds--contained-list-item__content">
<div *ngIf="icon" class="cds--contained-list-item__icon">
<ng-container *ngIf="!isTemplate(icon)"><svg [ibmIcon]="icon" size="16"></svg></ng-container>
<ng-template *ngIf="isTemplate(icon)" [ngTemplateOutlet]="icon"></ng-template>
</div>
<ng-content></ng-content>
</div>
</ng-container>
<div class="cds--contained-list-item__action" *ngIf="action">
<ng-template [ngTemplateOutlet]="action" [ngTemplateOutletContext]="{ $implicit: actionData }"></ng-template>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], propDecorators: { action: [{
type: Input
}], actionData: [{
type: Input
}], disabled: [{
type: Input
}], clickable: [{
type: Input
}], icon: [{
type: Input
}], click: [{
type: Output
}], itemClass: [{
type: HostBinding,
args: ["class.cds--contained-list-item"]
}], role: [{
type: HostBinding,
args: ["attr.role"]
}], itemClickableClass: [{
type: HostBinding,
args: ["class.cds--contained-list-item--clickable"]
}], itemWithIconClass: [{
type: HostBinding,
args: ["class.cds--contained-list-item--with-icon"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGFpbmVkLWxpc3QtaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29udGFpbmVkLWxpc3QvY29udGFpbmVkLWxpc3QtaXRlbS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLFdBQVcsRUFDWCxLQUFLLEVBQ0wsTUFBTSxFQUNOLFdBQVcsRUFDWCxNQUFNLGVBQWUsQ0FBQzs7OztBQTZCdkIsTUFBTSxPQUFPLGlCQUFpQjtJQTNCOUI7UUFzQ0M7O1dBRUc7UUFDTSxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBZ0IxQjs7V0FFRztRQUNPLFVBQUssR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBRTNDOztXQUVHO1FBQzRDLGNBQVMsR0FBRyxJQUFJLENBQUM7UUFFaEU7O1dBRUc7UUFDdUIsU0FBSSxHQUFHLFVBQVUsQ0FBQztLQXVCNUM7SUFyQkE7O09BRUc7SUFDSCxJQUE4RCxrQkFBa0I7UUFDL0UsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3ZCLENBQUM7SUFFRDs7T0FFRztJQUNILElBQThELGlCQUFpQjtRQUM5RSxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO0lBQ3BCLENBQUM7SUFFTSxPQUFPO1FBQ2IsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRU0sVUFBVSxDQUFDLEtBQWdDO1FBQ2pELE9BQU8sS0FBSyxZQUFZLFdBQVcsQ0FBQztJQUNyQyxDQUFDOzs4R0FqRVcsaUJBQWlCO2tHQUFqQixpQkFBaUIsZ2VBekJuQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQXNCVDsyRkFHVyxpQkFBaUI7a0JBM0I3QixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSxrREFBa0Q7b0JBQzVELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQXNCVDtvQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDL0M7OEJBS1MsTUFBTTtzQkFBZCxLQUFLO2dCQUtHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSztnQkFLRyxTQUFTO3NCQUFqQixLQUFLO2dCQVNHLElBQUk7c0JBQVosS0FBSztnQkFLSSxLQUFLO3NCQUFkLE1BQU07Z0JBS3dDLFNBQVM7c0JBQXZELFdBQVc7dUJBQUMsZ0NBQWdDO2dCQUtuQixJQUFJO3NCQUE3QixXQUFXO3VCQUFDLFdBQVc7Z0JBS3NDLGtCQUFrQjtzQkFBL0UsV0FBVzt1QkFBQywyQ0FBMkM7Z0JBT00saUJBQWlCO3NCQUE5RSxXQUFXO3VCQUFDLDJDQUEyQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuXHRDb21wb25lbnQsXG5cdEV2ZW50RW1pdHRlcixcblx0SG9zdEJpbmRpbmcsXG5cdElucHV0LFxuXHRPdXRwdXQsXG5cdFRlbXBsYXRlUmVmXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtY29udGFpbmVkLWxpc3QtaXRlbSwgaWJtLWNvbnRhaW5lZC1saXN0LWl0ZW1cIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8bmctY29udGFpbmVyICpuZ0lmPVwiY2xpY2thYmxlXCI+XG5cdFx0XHQ8YnV0dG9uXG5cdFx0XHRcdGNsYXNzPVwiY2RzLS1jb250YWluZWQtbGlzdC1pdGVtX19jb250ZW50XCJcblx0XHRcdFx0dHlwZT1cImJ1dHRvblwiXG5cdFx0XHRcdFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG5cdFx0XHRcdChjbGljayk9XCJvbkNsaWNrKClcIj5cblx0XHRcdFx0PG5nLWNvbnRlbnQgc2VsZWN0PVwiW2Nkc0NvbnRhaW5lZExpc3RJdGVtQnV0dG9uXSxbaWJtQ29udGFpbmVkTGlzdEl0ZW1CdXR0b25dXCI+PC9uZy1jb250ZW50PlxuXHRcdFx0PC9idXR0b24+XG5cdFx0PC9uZy1jb250YWluZXI+XG5cdFx0PG5nLWNvbnRhaW5lciAqbmdJZj1cIiFjbGlja2FibGVcIj5cblx0XHRcdDxkaXYgY2xhc3M9XCJjZHMtLWNvbnRhaW5lZC1saXN0LWl0ZW1fX2NvbnRlbnRcIj5cblx0XHRcdFx0PGRpdiAqbmdJZj1cImljb25cIiBjbGFzcz1cImNkcy0tY29udGFpbmVkLWxpc3QtaXRlbV9faWNvblwiPlxuXHRcdFx0XHRcdDxuZy1jb250YWluZXIgKm5nSWY9XCIhaXNUZW1wbGF0ZShpY29uKVwiPjxzdmcgW2libUljb25dPVwiaWNvblwiIHNpemU9XCIxNlwiPjwvc3ZnPjwvbmctY29udGFpbmVyPlxuXHRcdFx0XHRcdDxuZy10ZW1wbGF0ZSAqbmdJZj1cImlzVGVtcGxhdGUoaWNvbilcIiBbbmdUZW1wbGF0ZU91dGxldF09XCJpY29uXCI+PC9uZy10ZW1wbGF0ZT5cblx0XHRcdFx0PC9kaXY+XG5cdFx0XHRcdDxuZy1jb250ZW50PjwvbmctY29udGVudD5cblx0XHRcdDwvZGl2PlxuXHRcdDwvbmctY29udGFpbmVyPlxuXHRcdDxkaXYgY2xhc3M9XCJjZHMtLWNvbnRhaW5lZC1saXN0LWl0ZW1fX2FjdGlvblwiICpuZ0lmPVwiYWN0aW9uXCI+XG5cdFx0XHQ8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwiYWN0aW9uXCIgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cInsgJGltcGxpY2l0OiBhY3Rpb25EYXRhIH1cIj48L25nLXRlbXBsYXRlPlxuXHRcdDwvZGl2PlxuXHRgLFxuXHRjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBDb250YWluZWRMaXN0SXRlbSB7XG5cdC8qKlxuXHQgKiBBIHNsb3QgZm9yIGEgcG9zc2libGUgaW50ZXJhY3RpdmUgZWxlbWVudCB0byByZW5kZXIgd2l0aGluIHRoZSBpdGVtLlxuXHQgKi9cblx0QElucHV0KCkgYWN0aW9uOiBUZW1wbGF0ZVJlZjxhbnk+O1xuXG5cdC8qKlxuXHQgKiBPcHRpb25hbCBpbnRlcmFjdGl2ZSBlbGVtZW50IGRhdGEuXG5cdCAqL1xuXHRASW5wdXQoKSBhY3Rpb25EYXRhOiBhbnk7XG5cblx0LyoqXG5cdCAqIFdoZXRoZXIgdGhpcyBpdGVtIGlzIGRpc2FibGVkLlxuXHQgKi9cblx0QElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcblxuXHQvKipcblx0ICogV2hldGhlciB0aGlzIGl0ZW0gaXMgY2xpY2thYmxlLlxuXHQgKi9cblx0QElucHV0KCkgY2xpY2thYmxlOiBib29sZWFuO1xuXG5cdC8qKlxuXHQgKiBQcm92aWRlIGFuIG9wdGlvbmFsIGljb24gdG8gcmVuZGVyIGluIGZyb250IG9mIHRoZSBpdGVtJ3MgY29udGVudC5cblx0ICpcblx0ICogTm90ZSB0aGF0IGlmIHlvdSBpbnRlbmQgdG8gdXNlIHRoaXMgYXMgYSBzdHJpbmcgcmVmLCBpdCdzIGltcG9ydGFudCB0byByZW1lbWJlclxuXHQgKiB0byByZWdpc3RlciB0aGUgaWNvbiB0aGF0IHlvdSB3aXNoIHRvIGFkZC4gSW4gdGhpcyBjYXNlLCBpdCdzIGFsc28gd29ydGggbm90aW5nXG5cdCAqIHRoYXQgb25seSBpY29ucyB3aXRoIGEgc2l6ZSBvZiAxNiBhcmUgY3VycmVudGx5IHN1cHBvcnRlZC5cblx0ICovXG5cdEBJbnB1dCgpIGljb246IFRlbXBsYXRlUmVmPGFueT4gfCBzdHJpbmc7XG5cblx0LyoqXG5cdCAqIEVtaXRzIGNsaWNrIGV2ZW50LlxuXHQgKi9cblx0QE91dHB1dCgpIGNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG5cdC8qKlxuXHQgKiBIb3N0IGJpbmRpbmcgaXRlbSBjbGFzcy5cblx0ICovXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tY29udGFpbmVkLWxpc3QtaXRlbVwiKSBpdGVtQ2xhc3MgPSB0cnVlO1xuXG5cdC8qKlxuXHQgKiBIb3N0IGJpbmRpbmcgaXRlbSByb2xlIGF0dHJpYnV0ZVxuXHQgKi9cblx0QEhvc3RCaW5kaW5nKFwiYXR0ci5yb2xlXCIpIHJvbGUgPSBcImxpc3RpdGVtXCI7XG5cblx0LyoqXG5cdCAqIEhvc3QgYmluZGluZyBjbGlja2FibGUgaXRlbSBjbGFzcy5cblx0ICovXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tY29udGFpbmVkLWxpc3QtaXRlbS0tY2xpY2thYmxlXCIpIGdldCBpdGVtQ2xpY2thYmxlQ2xhc3MoKSB7XG5cdFx0cmV0dXJuIHRoaXMuY2xpY2thYmxlO1xuXHR9XG5cblx0LyoqXG5cdCAqIEhvc3QgYmluZGluZyBpdGVtIHdpdGggaWNvbiBjbGFzcy5cblx0ICovXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tY29udGFpbmVkLWxpc3QtaXRlbS0td2l0aC1pY29uXCIpIGdldCBpdGVtV2l0aEljb25DbGFzcygpIHtcblx0XHRyZXR1cm4gISF0aGlzLmljb247XG5cdH1cblxuXHRwdWJsaWMgb25DbGljaygpIHtcblx0XHR0aGlzLmNsaWNrLmVtaXQoKTtcblx0fVxuXG5cdHB1YmxpYyBpc1RlbXBsYXRlKHZhbHVlOiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+KSB7XG5cdFx0cmV0dXJuIHZhbHVlIGluc3RhbmNlb2YgVGVtcGxhdGVSZWY7XG5cdH1cbn1cbiJdfQ==