carbon-components-angular
Version:
Next generation components
123 lines • 10.3 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.disabled = false;
this.role = "listitem";
}
toggleExpanded() {
if (!this.skeleton) {
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.disabled", "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
}], disabled: [{
type: HostBinding,
args: ["class.cds--accordion__item--disabled"]
}, {
type: Input
}], role: [{
type: HostBinding,
args: ["attr.role"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2FjY29yZGlvbi9hY2NvcmRpb24taXRlbS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFDVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLE1BQU0sRUFDTixXQUFXLEVBQ1gsWUFBWSxFQUNaLE1BQU0sZUFBZSxDQUFDOzs7O0FBMkN2QixNQUFNLE9BQU8sYUFBYTtJQXpDMUI7UUE0Q1UsWUFBTyxHQUFrQixJQUFJLENBQUM7UUFDOUIsT0FBRSxHQUFHLGtCQUFrQixhQUFhLENBQUMsa0JBQWtCLEVBQUUsRUFBRSxDQUFDO1FBQzVELGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDaEIsYUFBUSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFFRyxjQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ0EsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNmLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDckQsU0FBSSxHQUFHLFVBQVUsQ0FBQztLQVk1QztJQVZPLGNBQWM7UUFDcEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbkIsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7WUFDL0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBQyxFQUFFLEVBQUUsSUFBSSxDQUFDLEVBQUUsRUFBRSxRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVEsRUFBQyxDQUFDLENBQUM7U0FDM0Q7SUFDRixDQUFDO0lBRU0sVUFBVSxDQUFDLEtBQUs7UUFDdEIsT0FBTyxLQUFLLFlBQVksV0FBVyxDQUFDO0lBQ3JDLENBQUM7O0FBckJNLGdDQUFrQixHQUFHLENBQUMsQ0FBQzswR0FEbEIsYUFBYTs4RkFBYixhQUFhLGljQXZDZjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUFnQ1Q7MkZBT1csYUFBYTtrQkF6Q3pCLFNBQVM7K0JBQ0Msd0NBQXdDLFlBQ3hDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQWdDVDs4QkFTUSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLEVBQUU7c0JBQVYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLFFBQVE7c0JBQWpCLE1BQU07Z0JBRW9DLFNBQVM7c0JBQW5ELFdBQVc7dUJBQUMsNEJBQTRCO2dCQUNtQixRQUFRO3NCQUFuRSxXQUFXO3VCQUFDLG9DQUFvQzs7c0JBQUcsS0FBSztnQkFDSyxRQUFRO3NCQUFyRSxXQUFXO3VCQUFDLHNDQUFzQzs7c0JBQUcsS0FBSztnQkFDakMsSUFBSTtzQkFBN0IsV0FBVzt1QkFBQyxXQUFXIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcblx0Q29tcG9uZW50LFxuXHRJbnB1dCxcblx0SG9zdEJpbmRpbmcsXG5cdE91dHB1dCxcblx0VGVtcGxhdGVSZWYsXG5cdEV2ZW50RW1pdHRlclxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6IFwiY2RzLWFjY29yZGlvbi1pdGVtLCBpYm0tYWNjb3JkaW9uLWl0ZW1cIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8YnV0dG9uXG5cdFx0XHR0eXBlPVwiYnV0dG9uXCJcblx0XHRcdFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG5cdFx0XHRbYXR0ci5hcmlhLWV4cGFuZGVkXT1cImV4cGFuZGVkXCJcblx0XHRcdFthdHRyLmFyaWEtY29udHJvbHNdPVwiaWRcIlxuXHRcdFx0KGNsaWNrKT1cInRvZ2dsZUV4cGFuZGVkKClcIlxuXHRcdFx0Y2xhc3M9XCJjZHMtLWFjY29yZGlvbl9faGVhZGluZ1wiPlxuXHRcdFx0PHN2ZyBjZHNJY29uPVwiY2hldnJvbi0tcmlnaHRcIiBzaXplPVwiMTZcIiBjbGFzcz1cImNkcy0tYWNjb3JkaW9uX19hcnJvd1wiPjwvc3ZnPlxuXHRcdFx0PHAgKm5nSWY9XCIhaXNUZW1wbGF0ZSh0aXRsZSlcIlxuXHRcdFx0XHRjbGFzcz1cImNkcy0tYWNjb3JkaW9uX190aXRsZVwiXG5cdFx0XHRcdFtuZ0NsYXNzXT1cIntcblx0XHRcdFx0XHQnY2RzLS1za2VsZXRvbl9fdGV4dCc6IHNrZWxldG9uXG5cdFx0XHRcdH1cIj5cblx0XHRcdFx0e3shc2tlbGV0b24gPyB0aXRsZSA6IG51bGx9fVxuXHRcdFx0PC9wPlxuXHRcdFx0PG5nLXRlbXBsYXRlXG5cdFx0XHRcdCpuZ0lmPVwiaXNUZW1wbGF0ZSh0aXRsZSlcIlxuXHRcdFx0XHRbbmdUZW1wbGF0ZU91dGxldF09XCJ0aXRsZVwiXG5cdFx0XHRcdFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJjb250ZXh0XCI+XG5cdFx0XHQ8L25nLXRlbXBsYXRlPlxuXHRcdDwvYnV0dG9uPlxuXHRcdDxkaXYgY2xhc3M9XCJjZHMtLWFjY29yZGlvbl9fd3JhcHBlclwiPlxuXHRcdFx0PGRpdiBbaWRdPVwiaWRcIiBjbGFzcz1cImNkcy0tYWNjb3JkaW9uX19jb250ZW50XCI+XG5cdFx0XHRcdDxuZy1jb250ZW50ICpuZ0lmPVwiIXNrZWxldG9uOyBlbHNlIHNrZWxldG9uVGVtcGxhdGVcIj48L25nLWNvbnRlbnQ+XG5cdFx0XHRcdDxuZy10ZW1wbGF0ZSAjc2tlbGV0b25UZW1wbGF0ZT5cblx0XHRcdFx0XHQ8cCBjbGFzcz1cImNkcy0tc2tlbGV0b25fX3RleHRcIiBzdHlsZT1cIndpZHRoOiA5MCVcIj48L3A+XG5cdFx0XHRcdFx0PHAgY2xhc3M9XCJjZHMtLXNrZWxldG9uX190ZXh0XCIgc3R5bGU9XCJ3aWR0aDogODAlXCI+PC9wPlxuXHRcdFx0XHRcdDxwIGNsYXNzPVwiY2RzLS1za2VsZXRvbl9fdGV4dFwiIHN0eWxlPVwid2lkdGg6IDk1JVwiPjwvcD5cblx0XHRcdFx0PC9uZy10ZW1wbGF0ZT5cblx0XHRcdDwvZGl2PlxuXHRcdDwvZGl2PlxuXHRgLFxuXHRzdHlsZXM6IFtgXG5cdFx0Omhvc3Qge1xuXHRcdFx0ZGlzcGxheTogbGlzdC1pdGVtO1xuXHRcdH1cblx0YF1cbn0pXG5leHBvcnQgY2xhc3MgQWNjb3JkaW9uSXRlbSB7XG5cdHN0YXRpYyBhY2NvcmRpb25JdGVtQ291bnQgPSAwO1xuXHRASW5wdXQoKSB0aXRsZTogc3RyaW5nIHwgVGVtcGxhdGVSZWY8YW55Pjtcblx0QElucHV0KCkgY29udGV4dDogT2JqZWN0IHwgbnVsbCA9IG51bGw7XG5cdEBJbnB1dCgpIGlkID0gYGFjY29yZGlvbi1pdGVtLSR7QWNjb3JkaW9uSXRlbS5hY2NvcmRpb25JdGVtQ291bnQrK31gO1xuXHRASW5wdXQoKSBza2VsZXRvbiA9IGZhbHNlO1xuXHRAT3V0cHV0KCkgc2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1hY2NvcmRpb25fX2l0ZW1cIikgaXRlbUNsYXNzID0gdHJ1ZTtcblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1hY2NvcmRpb25fX2l0ZW0tLWFjdGl2ZVwiKSBASW5wdXQoKSBleHBhbmRlZCA9IGZhbHNlO1xuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLWFjY29yZGlvbl9faXRlbS0tZGlzYWJsZWRcIikgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcblx0QEhvc3RCaW5kaW5nKFwiYXR0ci5yb2xlXCIpIHJvbGUgPSBcImxpc3RpdGVtXCI7XG5cblx0cHVibGljIHRvZ2dsZUV4cGFuZGVkKCkge1xuXHRcdGlmICghdGhpcy5za2VsZXRvbikge1xuXHRcdFx0dGhpcy5leHBhbmRlZCA9ICF0aGlzLmV4cGFuZGVkO1xuXHRcdFx0dGhpcy5zZWxlY3RlZC5lbWl0KHtpZDogdGhpcy5pZCwgZXhwYW5kZWQ6IHRoaXMuZXhwYW5kZWR9KTtcblx0XHR9XG5cdH1cblxuXHRwdWJsaWMgaXNUZW1wbGF0ZSh2YWx1ZSkge1xuXHRcdHJldHVybiB2YWx1ZSBpbnN0YW5jZW9mIFRlbXBsYXRlUmVmO1xuXHR9XG59XG4iXX0=