carbon-components-angular
Version:
Next generation components
137 lines • 11.9 kB
JavaScript
import { Component, Input, HostBinding, Output, TemplateRef, EventEmitter } 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 AccordionItem {
constructor() {
this.context = null;
this.id = `accordion-item-${AccordionItem.accordionItemCount++}`;
this.skeleton = false;
this.selected = new EventEmitter();
this.itemClass = true;
this.expanded = false;
this.role = "listitem";
this._itemDisabled = false;
this._parentDisabled = false;
}
get disabledHostClass() {
return this.disabled;
}
set disabled(value) {
this._itemDisabled = value;
}
get disabled() {
return this._parentDisabled || this._itemDisabled;
}
// Called by Accordion to cascade disabled without overwriting the item `disabled` input.
setParentDisabled(value) {
this._parentDisabled = value;
}
toggleExpanded() {
if (!this.skeleton && !this.disabled) {
this.expanded = !this.expanded;
this.selected.emit({ id: this.id, expanded: this.expanded });
}
}
isTemplate(value) {
return value instanceof TemplateRef;
}
}
AccordionItem.accordionItemCount = 0;
AccordionItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
AccordionItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: { title: "title", context: "context", id: "id", skeleton: "skeleton", expanded: "expanded", disabled: "disabled" }, outputs: { selected: "selected" }, host: { properties: { "class.cds--accordion__item": "this.itemClass", "class.cds--accordion__item--active": "this.expanded", "class.cds--accordion__item--disabled": "this.disabledHostClass", "attr.role": "this.role" } }, ngImport: i0, template: `
<button
type="button"
[disabled]="disabled"
[attr.aria-expanded]="expanded"
[attr.aria-controls]="id"
(click)="toggleExpanded()"
class="cds--accordion__heading">
<svg cdsIcon="chevron--right" size="16" class="cds--accordion__arrow"></svg>
<p *ngIf="!isTemplate(title)"
class="cds--accordion__title"
[ngClass]="{
'cds--skeleton__text': skeleton
}">
{{!skeleton ? title : null}}
</p>
<ng-template
*ngIf="isTemplate(title)"
[ngTemplateOutlet]="title"
[ngTemplateOutletContext]="context">
</ng-template>
</button>
<div class="cds--accordion__wrapper">
<div [id]="id" class="cds--accordion__content">
<ng-content *ngIf="!skeleton; else skeletonTemplate"></ng-content>
<ng-template #skeletonTemplate>
<p class="cds--skeleton__text" style="width: 90%"></p>
<p class="cds--skeleton__text" style="width: 80%"></p>
<p class="cds--skeleton__text" style="width: 95%"></p>
</ng-template>
</div>
</div>
`, isInline: true, styles: [":host{display:list-item}\n"], 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"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccordionItem, decorators: [{
type: Component,
args: [{ selector: "cds-accordion-item, ibm-accordion-item", template: `
<button
type="button"
[disabled]="disabled"
[attr.aria-expanded]="expanded"
[attr.aria-controls]="id"
(click)="toggleExpanded()"
class="cds--accordion__heading">
<svg cdsIcon="chevron--right" size="16" class="cds--accordion__arrow"></svg>
<p *ngIf="!isTemplate(title)"
class="cds--accordion__title"
[ngClass]="{
'cds--skeleton__text': skeleton
}">
{{!skeleton ? title : null}}
</p>
<ng-template
*ngIf="isTemplate(title)"
[ngTemplateOutlet]="title"
[ngTemplateOutletContext]="context">
</ng-template>
</button>
<div class="cds--accordion__wrapper">
<div [id]="id" class="cds--accordion__content">
<ng-content *ngIf="!skeleton; else skeletonTemplate"></ng-content>
<ng-template #skeletonTemplate>
<p class="cds--skeleton__text" style="width: 90%"></p>
<p class="cds--skeleton__text" style="width: 80%"></p>
<p class="cds--skeleton__text" style="width: 95%"></p>
</ng-template>
</div>
</div>
`, styles: [":host{display:list-item}\n"] }]
}], propDecorators: { title: [{
type: Input
}], context: [{
type: Input
}], id: [{
type: Input
}], skeleton: [{
type: Input
}], selected: [{
type: Output
}], itemClass: [{
type: HostBinding,
args: ["class.cds--accordion__item"]
}], expanded: [{
type: HostBinding,
args: ["class.cds--accordion__item--active"]
}, {
type: Input
}], disabledHostClass: [{
type: HostBinding,
args: ["class.cds--accordion__item--disabled"]
}], role: [{
type: HostBinding,
args: ["attr.role"]
}], disabled: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2FjY29yZGlvbi9hY2NvcmRpb24taXRlbS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFDVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLE1BQU0sRUFDTixXQUFXLEVBQ1gsWUFBWSxFQUNaLE1BQU0sZUFBZSxDQUFDOzs7O0FBMkN2QixNQUFNLE9BQU8sYUFBYTtJQXpDMUI7UUE0Q1UsWUFBTyxHQUFrQixJQUFJLENBQUM7UUFDOUIsT0FBRSxHQUFHLGtCQUFrQixhQUFhLENBQUMsa0JBQWtCLEVBQUUsRUFBRSxDQUFDO1FBQzVELGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDaEIsYUFBUSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFFRyxjQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ0EsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUluRCxTQUFJLEdBQUcsVUFBVSxDQUFDO1FBRWxDLGtCQUFhLEdBQUcsS0FBSyxDQUFDO1FBQ3RCLG9CQUFlLEdBQUcsS0FBSyxDQUFDO0tBeUJsQztJQS9CQSxJQUF5RCxpQkFBaUI7UUFDekUsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ3RCLENBQUM7SUFNRCxJQUFhLFFBQVEsQ0FBQyxLQUFjO1FBQ25DLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO0lBQzVCLENBQUM7SUFFRCxJQUFJLFFBQVE7UUFDWCxPQUFPLElBQUksQ0FBQyxlQUFlLElBQUksSUFBSSxDQUFDLGFBQWEsQ0FBQztJQUNuRCxDQUFDO0lBRUQseUZBQXlGO0lBQ3pGLGlCQUFpQixDQUFDLEtBQWM7UUFDL0IsSUFBSSxDQUFDLGVBQWUsR0FBRyxLQUFLLENBQUM7SUFDOUIsQ0FBQztJQUVNLGNBQWM7UUFDcEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ3JDLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDO1lBQy9CLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUMsRUFBRSxFQUFFLElBQUksQ0FBQyxFQUFFLEVBQUUsUUFBUSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUMsQ0FBQyxDQUFDO1NBQzNEO0lBQ0YsQ0FBQztJQUVNLFVBQVUsQ0FBQyxLQUFLO1FBQ3RCLE9BQU8sS0FBSyxZQUFZLFdBQVcsQ0FBQztJQUNyQyxDQUFDOztBQXZDTSxnQ0FBa0IsR0FBRyxDQUFDLENBQUM7MEdBRGxCLGFBQWE7OEZBQWIsYUFBYSwwY0F2Q2Y7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBZ0NUOzJGQU9XLGFBQWE7a0JBekN6QixTQUFTOytCQUNDLHdDQUF3QyxZQUN4Qzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUFnQ1Q7OEJBU1EsS0FBSztzQkFBYixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDSSxRQUFRO3NCQUFqQixNQUFNO2dCQUVvQyxTQUFTO3NCQUFuRCxXQUFXO3VCQUFDLDRCQUE0QjtnQkFDbUIsUUFBUTtzQkFBbkUsV0FBVzt1QkFBQyxvQ0FBb0M7O3NCQUFHLEtBQUs7Z0JBQ0EsaUJBQWlCO3NCQUF6RSxXQUFXO3VCQUFDLHNDQUFzQztnQkFHekIsSUFBSTtzQkFBN0IsV0FBVzt1QkFBQyxXQUFXO2dCQUtYLFFBQVE7c0JBQXBCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuXHRDb21wb25lbnQsXG5cdElucHV0LFxuXHRIb3N0QmluZGluZyxcblx0T3V0cHV0LFxuXHRUZW1wbGF0ZVJlZixcblx0RXZlbnRFbWl0dGVyXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtYWNjb3JkaW9uLWl0ZW0sIGlibS1hY2NvcmRpb24taXRlbVwiLFxuXHR0ZW1wbGF0ZTogYFxuXHRcdDxidXR0b25cblx0XHRcdHR5cGU9XCJidXR0b25cIlxuXHRcdFx0W2Rpc2FibGVkXT1cImRpc2FibGVkXCJcblx0XHRcdFthdHRyLmFyaWEtZXhwYW5kZWRdPVwiZXhwYW5kZWRcIlxuXHRcdFx0W2F0dHIuYXJpYS1jb250cm9sc109XCJpZFwiXG5cdFx0XHQoY2xpY2spPVwidG9nZ2xlRXhwYW5kZWQoKVwiXG5cdFx0XHRjbGFzcz1cImNkcy0tYWNjb3JkaW9uX19oZWFkaW5nXCI+XG5cdFx0XHQ8c3ZnIGNkc0ljb249XCJjaGV2cm9uLS1yaWdodFwiIHNpemU9XCIxNlwiIGNsYXNzPVwiY2RzLS1hY2NvcmRpb25fX2Fycm93XCI+PC9zdmc+XG5cdFx0XHQ8cCAqbmdJZj1cIiFpc1RlbXBsYXRlKHRpdGxlKVwiXG5cdFx0XHRcdGNsYXNzPVwiY2RzLS1hY2NvcmRpb25fX3RpdGxlXCJcblx0XHRcdFx0W25nQ2xhc3NdPVwie1xuXHRcdFx0XHRcdCdjZHMtLXNrZWxldG9uX190ZXh0Jzogc2tlbGV0b25cblx0XHRcdFx0fVwiPlxuXHRcdFx0XHR7eyFza2VsZXRvbiA/IHRpdGxlIDogbnVsbH19XG5cdFx0XHQ8L3A+XG5cdFx0XHQ8bmctdGVtcGxhdGVcblx0XHRcdFx0Km5nSWY9XCJpc1RlbXBsYXRlKHRpdGxlKVwiXG5cdFx0XHRcdFtuZ1RlbXBsYXRlT3V0bGV0XT1cInRpdGxlXCJcblx0XHRcdFx0W25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cImNvbnRleHRcIj5cblx0XHRcdDwvbmctdGVtcGxhdGU+XG5cdFx0PC9idXR0b24+XG5cdFx0PGRpdiBjbGFzcz1cImNkcy0tYWNjb3JkaW9uX193cmFwcGVyXCI+XG5cdFx0XHQ8ZGl2IFtpZF09XCJpZFwiIGNsYXNzPVwiY2RzLS1hY2NvcmRpb25fX2NvbnRlbnRcIj5cblx0XHRcdFx0PG5nLWNvbnRlbnQgKm5nSWY9XCIhc2tlbGV0b247IGVsc2Ugc2tlbGV0b25UZW1wbGF0ZVwiPjwvbmctY29udGVudD5cblx0XHRcdFx0PG5nLXRlbXBsYXRlICNza2VsZXRvblRlbXBsYXRlPlxuXHRcdFx0XHRcdDxwIGNsYXNzPVwiY2RzLS1za2VsZXRvbl9fdGV4dFwiIHN0eWxlPVwid2lkdGg6IDkwJVwiPjwvcD5cblx0XHRcdFx0XHQ8cCBjbGFzcz1cImNkcy0tc2tlbGV0b25fX3RleHRcIiBzdHlsZT1cIndpZHRoOiA4MCVcIj48L3A+XG5cdFx0XHRcdFx0PHAgY2xhc3M9XCJjZHMtLXNrZWxldG9uX190ZXh0XCIgc3R5bGU9XCJ3aWR0aDogOTUlXCI+PC9wPlxuXHRcdFx0XHQ8L25nLXRlbXBsYXRlPlxuXHRcdFx0PC9kaXY+XG5cdFx0PC9kaXY+XG5cdGAsXG5cdHN0eWxlczogW2Bcblx0XHQ6aG9zdCB7XG5cdFx0XHRkaXNwbGF5OiBsaXN0LWl0ZW07XG5cdFx0fVxuXHRgXVxufSlcbmV4cG9ydCBjbGFzcyBBY2NvcmRpb25JdGVtIHtcblx0c3RhdGljIGFjY29yZGlvbkl0ZW1Db3VudCA9IDA7XG5cdEBJbnB1dCgpIHRpdGxlOiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+O1xuXHRASW5wdXQoKSBjb250ZXh0OiBPYmplY3QgfCBudWxsID0gbnVsbDtcblx0QElucHV0KCkgaWQgPSBgYWNjb3JkaW9uLWl0ZW0tJHtBY2NvcmRpb25JdGVtLmFjY29yZGlvbkl0ZW1Db3VudCsrfWA7XG5cdEBJbnB1dCgpIHNrZWxldG9uID0gZmFsc2U7XG5cdEBPdXRwdXQoKSBzZWxlY3RlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLWFjY29yZGlvbl9faXRlbVwiKSBpdGVtQ2xhc3MgPSB0cnVlO1xuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLWFjY29yZGlvbl9faXRlbS0tYWN0aXZlXCIpIEBJbnB1dCgpIGV4cGFuZGVkID0gZmFsc2U7XG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tYWNjb3JkaW9uX19pdGVtLS1kaXNhYmxlZFwiKSBnZXQgZGlzYWJsZWRIb3N0Q2xhc3MoKTogYm9vbGVhbiB7XG5cdFx0cmV0dXJuIHRoaXMuZGlzYWJsZWQ7XG5cdH1cblx0QEhvc3RCaW5kaW5nKFwiYXR0ci5yb2xlXCIpIHJvbGUgPSBcImxpc3RpdGVtXCI7XG5cblx0cHJvdGVjdGVkIF9pdGVtRGlzYWJsZWQgPSBmYWxzZTtcblx0cHJvdGVjdGVkIF9wYXJlbnREaXNhYmxlZCA9IGZhbHNlO1xuXG5cdEBJbnB1dCgpIHNldCBkaXNhYmxlZCh2YWx1ZTogYm9vbGVhbikge1xuXHRcdHRoaXMuX2l0ZW1EaXNhYmxlZCA9IHZhbHVlO1xuXHR9XG5cblx0Z2V0IGRpc2FibGVkKCk6IGJvb2xlYW4ge1xuXHRcdHJldHVybiB0aGlzLl9wYXJlbnREaXNhYmxlZCB8fCB0aGlzLl9pdGVtRGlzYWJsZWQ7XG5cdH1cblxuXHQvLyBDYWxsZWQgYnkgQWNjb3JkaW9uIHRvIGNhc2NhZGUgZGlzYWJsZWQgd2l0aG91dCBvdmVyd3JpdGluZyB0aGUgaXRlbSBgZGlzYWJsZWRgIGlucHV0LlxuXHRzZXRQYXJlbnREaXNhYmxlZCh2YWx1ZTogYm9vbGVhbik6IHZvaWQge1xuXHRcdHRoaXMuX3BhcmVudERpc2FibGVkID0gdmFsdWU7XG5cdH1cblxuXHRwdWJsaWMgdG9nZ2xlRXhwYW5kZWQoKSB7XG5cdFx0aWYgKCF0aGlzLnNrZWxldG9uICYmICF0aGlzLmRpc2FibGVkKSB7XG5cdFx0XHR0aGlzLmV4cGFuZGVkID0gIXRoaXMuZXhwYW5kZWQ7XG5cdFx0XHR0aGlzLnNlbGVjdGVkLmVtaXQoe2lkOiB0aGlzLmlkLCBleHBhbmRlZDogdGhpcy5leHBhbmRlZH0pO1xuXHRcdH1cblx0fVxuXG5cdHB1YmxpYyBpc1RlbXBsYXRlKHZhbHVlKSB7XG5cdFx0cmV0dXJuIHZhbHVlIGluc3RhbmNlb2YgVGVtcGxhdGVSZWY7XG5cdH1cbn1cbiJdfQ==