carbon-components-angular
Version:
Next generation components
283 lines (274 loc) • 12.7 kB
JavaScript
import * as i0 from '@angular/core';
import { TemplateRef, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, HostBinding, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'carbon-components-angular/icon';
import { IconModule } from 'carbon-components-angular/icon';
var ContainedListSize;
(function (ContainedListSize) {
ContainedListSize["Small"] = "sm";
ContainedListSize["Medium"] = "md";
ContainedListSize["Large"] = "lg";
ContainedListSize["ExtraLarge"] = "xl";
})(ContainedListSize || (ContainedListSize = {}));
var ContainedListKind;
(function (ContainedListKind) {
ContainedListKind["OnPage"] = "on-page";
ContainedListKind["Disclosed"] = "disclosed";
})(ContainedListKind || (ContainedListKind = {}));
/**
* Get started with importing the module:
*
* ```typescript
* import { ContainedListModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-contained-list--basic)
*/
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
}] } });
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]="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]="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"]
}] } });
class ContainedListModule {
}
ContainedListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContainedListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ContainedListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ContainedListModule, declarations: [ContainedList, ContainedListItem], imports: [CommonModule, IconModule], exports: [ContainedList, ContainedListItem] });
ContainedListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContainedListModule, imports: [CommonModule, IconModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContainedListModule, decorators: [{
type: NgModule,
args: [{
declarations: [ContainedList, ContainedListItem],
exports: [ContainedList, ContainedListItem],
imports: [CommonModule, IconModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ContainedList, ContainedListItem, ContainedListKind, ContainedListModule, ContainedListSize };
//# sourceMappingURL=carbon-components-angular-contained-list.mjs.map