@coreui/angular
Version:
CoreUI Components Library for Angular
59 lines • 13.3 kB
JavaScript
import { booleanAttribute, Component, computed, contentChildren, inject, Input } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { CollapseDirective } from '../../collapse';
import { TemplateIdDirective } from '../../shared';
import { AccordionButtonDirective } from '../accordion-button/accordion-button.directive';
import { AccordionService } from '../accordion.service';
import * as i0 from "@angular/core";
let nextId = 0;
export class AccordionItemComponent {
constructor() {
this.#accordionService = inject(AccordionService);
/**
* Toggle an accordion item programmatically
* @type boolean
* @default false
*/
this.visible = false;
this.contentId = `accordion-item-${nextId++}`;
this.contentTemplates = contentChildren(TemplateIdDirective, { descendants: true });
this.templates = computed(() => {
return this.contentTemplates().reduce((acc, child) => {
acc[child.id] = child.templateRef;
return acc;
}, {});
});
}
#accordionService;
set open(value) {
console.warn('c-accordion-item "open" prop is deprecated, use "visible" prop instead.');
this.visible = value || this.visible;
}
get open() {
return this.visible;
}
get itemContext() {
return { $implicit: this.visible };
}
ngOnInit() {
this.#accordionService.addItem(this);
}
ngOnDestroy() {
this.#accordionService.removeItem(this);
}
toggleItem() {
this.#accordionService.toggleItem(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.12", type: AccordionItemComponent, isStandalone: true, selector: "c-accordion-item", inputs: { visible: ["visible", "visible", booleanAttribute], open: "open" }, host: { classAttribute: "accordion-item" }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], exportAs: ["cAccordionItem"], ngImport: i0, template: "@let tmpl = templates();\n<ng-container>\n <div class=\"accordion-header\">\n <ng-container *ngTemplateOutlet=\"tmpl['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\" />\n </div>\n <div class=\"accordion-collapse\" cCollapse [visible]=\"visible\" [attr.aria-expanded]=\"visible\" [id]=\"contentId\">\n <ng-container *ngTemplateOutlet=\"tmpl['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\" />\n </div>\n</ng-container>\n\n<ng-template #defaultAccordionHeaderTemplate>\n <button cAccordionButton [collapsed]=\"!visible\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\n <ng-container\n *ngTemplateOutlet=\"tmpl['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\">\n </ng-container>\n </button>\n</ng-template>\n\n<ng-template #defaultAccordionHeaderContentTemplate>\n <ng-content />\n</ng-template>\n\n<ng-template #defaultAccordionBodyTemplate>\n <div class=\"accordion-body\">\n <ng-container\n *ngTemplateOutlet=\"tmpl['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\">\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultAccordionBodyContentTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: AccordionButtonDirective, selector: "[cAccordionButton]", inputs: ["collapsed", "type"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar", "duration", "transition"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionItemComponent, decorators: [{
type: Component,
args: [{ selector: 'c-accordion-item', exportAs: 'cAccordionItem', standalone: true, imports: [AccordionButtonDirective, NgTemplateOutlet, CollapseDirective], host: { class: 'accordion-item' }, template: "@let tmpl = templates();\n<ng-container>\n <div class=\"accordion-header\">\n <ng-container *ngTemplateOutlet=\"tmpl['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\" />\n </div>\n <div class=\"accordion-collapse\" cCollapse [visible]=\"visible\" [attr.aria-expanded]=\"visible\" [id]=\"contentId\">\n <ng-container *ngTemplateOutlet=\"tmpl['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\" />\n </div>\n</ng-container>\n\n<ng-template #defaultAccordionHeaderTemplate>\n <button cAccordionButton [collapsed]=\"!visible\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\n <ng-container\n *ngTemplateOutlet=\"tmpl['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\">\n </ng-container>\n </button>\n</ng-template>\n\n<ng-template #defaultAccordionHeaderContentTemplate>\n <ng-content />\n</ng-template>\n\n<ng-template #defaultAccordionBodyTemplate>\n <div class=\"accordion-body\">\n <ng-container\n *ngTemplateOutlet=\"tmpl['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\">\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultAccordionBodyContentTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"] }]
}], propDecorators: { visible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], open: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZXVpLWFuZ3VsYXIvc3JjL2xpYi9hY2NvcmRpb24vYWNjb3JkaW9uLWl0ZW0vYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZXVpLWFuZ3VsYXIvc3JjL2xpYi9hY2NvcmRpb24vYWNjb3JkaW9uLWl0ZW0vYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLGdCQUFnQixFQUNoQixTQUFTLEVBQ1QsUUFBUSxFQUNSLGVBQWUsRUFDZixNQUFNLEVBQ04sS0FBSyxFQUlOLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRW5ELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUNuRCxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQUMxRixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQzs7QUFFeEQsSUFBSSxNQUFNLEdBQUcsQ0FBQyxDQUFDO0FBV2YsTUFBTSxPQUFPLHNCQUFzQjtJQVRuQztRQVVXLHNCQUFpQixHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBRXREOzs7O1dBSUc7UUFDcUMsWUFBTyxHQUFZLEtBQUssQ0FBQztRQVlqRSxjQUFTLEdBQUcsa0JBQWtCLE1BQU0sRUFBRSxFQUFFLENBQUM7UUFNaEMscUJBQWdCLEdBQUcsZUFBZSxDQUFDLG1CQUFtQixFQUFFLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7UUFFL0UsY0FBUyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDakMsT0FBTyxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxNQUFNLENBQ25DLENBQUMsR0FBRyxFQUFFLEtBQUssRUFBRSxFQUFFO2dCQUNiLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQztnQkFDbEMsT0FBTyxHQUFHLENBQUM7WUFDYixDQUFDLEVBQ0QsRUFBc0MsQ0FDdkMsQ0FBQztRQUNKLENBQUMsQ0FBQyxDQUFDO0tBYUo7SUFoRFUsaUJBQWlCLENBQTRCO0lBU3RELElBQ0ksSUFBSSxDQUFDLEtBQWM7UUFDckIsT0FBTyxDQUFDLElBQUksQ0FBQywwRUFBMEUsQ0FBQyxDQUFDO1FBQ3pGLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxJQUFJLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDdkMsQ0FBQztJQUVELElBQUksSUFBSTtRQUNOLE9BQWdCLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDL0IsQ0FBQztJQUlELElBQUksV0FBVztRQUNiLE9BQU8sRUFBRSxTQUFTLEVBQVcsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBQzlDLENBQUM7SUFjRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGlCQUFpQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDMUMsQ0FBQztJQUVELFVBQVU7UUFDUixJQUFJLENBQUMsaUJBQWlCLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzFDLENBQUM7K0dBaERVLHNCQUFzQjttR0FBdEIsc0JBQXNCLDhGQVFiLGdCQUFnQix3SEFrQlEsbUJBQW1CLDhGQ3ZEakUsc3dDQWlDQSxnR0RQWSx3QkFBd0IsOEZBQUUsZ0JBQWdCLG9KQUFFLGlCQUFpQjs7NEZBRzVELHNCQUFzQjtrQkFUbEMsU0FBUzsrQkFDRSxrQkFBa0IsWUFHbEIsZ0JBQWdCLGNBQ2QsSUFBSSxXQUNQLENBQUMsd0JBQXdCLEVBQUUsZ0JBQWdCLEVBQUUsaUJBQWlCLENBQUMsUUFDbEUsRUFBRSxLQUFLLEVBQUUsZ0JBQWdCLEVBQUU7OEJBVU8sT0FBTztzQkFBOUMsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRTtnQkFHbEMsSUFBSTtzQkFEUCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgYm9vbGVhbkF0dHJpYnV0ZSxcbiAgQ29tcG9uZW50LFxuICBjb21wdXRlZCxcbiAgY29udGVudENoaWxkcmVuLFxuICBpbmplY3QsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgVGVtcGxhdGVSZWZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOZ1RlbXBsYXRlT3V0bGV0IH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuaW1wb3J0IHsgQ29sbGFwc2VEaXJlY3RpdmUgfSBmcm9tICcuLi8uLi9jb2xsYXBzZSc7XG5pbXBvcnQgeyBUZW1wbGF0ZUlkRGlyZWN0aXZlIH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcbmltcG9ydCB7IEFjY29yZGlvbkJ1dHRvbkRpcmVjdGl2ZSB9IGZyb20gJy4uL2FjY29yZGlvbi1idXR0b24vYWNjb3JkaW9uLWJ1dHRvbi5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgQWNjb3JkaW9uU2VydmljZSB9IGZyb20gJy4uL2FjY29yZGlvbi5zZXJ2aWNlJztcblxubGV0IG5leHRJZCA9IDA7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2MtYWNjb3JkaW9uLWl0ZW0nLFxuICB0ZW1wbGF0ZVVybDogJy4vYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hY2NvcmRpb24taXRlbS5jb21wb25lbnQuc2NzcyddLFxuICBleHBvcnRBczogJ2NBY2NvcmRpb25JdGVtJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0FjY29yZGlvbkJ1dHRvbkRpcmVjdGl2ZSwgTmdUZW1wbGF0ZU91dGxldCwgQ29sbGFwc2VEaXJlY3RpdmVdLFxuICBob3N0OiB7IGNsYXNzOiAnYWNjb3JkaW9uLWl0ZW0nIH1cbn0pXG5leHBvcnQgY2xhc3MgQWNjb3JkaW9uSXRlbUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgcmVhZG9ubHkgI2FjY29yZGlvblNlcnZpY2UgPSBpbmplY3QoQWNjb3JkaW9uU2VydmljZSk7XG5cbiAgLyoqXG4gICAqIFRvZ2dsZSBhbiBhY2NvcmRpb24gaXRlbSBwcm9ncmFtbWF0aWNhbGx5XG4gICAqIEB0eXBlIGJvb2xlYW5cbiAgICogQGRlZmF1bHQgZmFsc2VcbiAgICovXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KSB2aXNpYmxlOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgc2V0IG9wZW4odmFsdWU6IGJvb2xlYW4pIHtcbiAgICBjb25zb2xlLndhcm4oJ2MtYWNjb3JkaW9uLWl0ZW0gXCJvcGVuXCIgcHJvcCBpcyBkZXByZWNhdGVkLCB1c2UgXCJ2aXNpYmxlXCIgIHByb3AgaW5zdGVhZC4nKTtcbiAgICB0aGlzLnZpc2libGUgPSB2YWx1ZSB8fCB0aGlzLnZpc2libGU7XG4gIH1cblxuICBnZXQgb3BlbigpIHtcbiAgICByZXR1cm4gPGJvb2xlYW4+dGhpcy52aXNpYmxlO1xuICB9XG5cbiAgY29udGVudElkID0gYGFjY29yZGlvbi1pdGVtLSR7bmV4dElkKyt9YDtcblxuICBnZXQgaXRlbUNvbnRleHQoKSB7XG4gICAgcmV0dXJuIHsgJGltcGxpY2l0OiA8Ym9vbGVhbj50aGlzLnZpc2libGUgfTtcbiAgfVxuXG4gIHJlYWRvbmx5IGNvbnRlbnRUZW1wbGF0ZXMgPSBjb250ZW50Q2hpbGRyZW4oVGVtcGxhdGVJZERpcmVjdGl2ZSwgeyBkZXNjZW5kYW50czogdHJ1ZSB9KTtcblxuICByZWFkb25seSB0ZW1wbGF0ZXMgPSBjb21wdXRlZCgoKSA9PiB7XG4gICAgcmV0dXJuIHRoaXMuY29udGVudFRlbXBsYXRlcygpLnJlZHVjZShcbiAgICAgIChhY2MsIGNoaWxkKSA9PiB7XG4gICAgICAgIGFjY1tjaGlsZC5pZF0gPSBjaGlsZC50ZW1wbGF0ZVJlZjtcbiAgICAgICAgcmV0dXJuIGFjYztcbiAgICAgIH0sXG4gICAgICB7fSBhcyBSZWNvcmQ8c3RyaW5nLCBUZW1wbGF0ZVJlZjxhbnk+PlxuICAgICk7XG4gIH0pO1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuI2FjY29yZGlvblNlcnZpY2UuYWRkSXRlbSh0aGlzKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuI2FjY29yZGlvblNlcnZpY2UucmVtb3ZlSXRlbSh0aGlzKTtcbiAgfVxuXG4gIHRvZ2dsZUl0ZW0oKTogdm9pZCB7XG4gICAgdGhpcy4jYWNjb3JkaW9uU2VydmljZS50b2dnbGVJdGVtKHRoaXMpO1xuICB9XG59XG4iLCJAbGV0IHRtcGwgPSB0ZW1wbGF0ZXMoKTtcbjxuZy1jb250YWluZXI+XG4gIDxkaXYgY2xhc3M9XCJhY2NvcmRpb24taGVhZGVyXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInRtcGxbJ2FjY29yZGlvbkhlYWRlclRlbXBsYXRlJ10gfHwgZGVmYXVsdEFjY29yZGlvbkhlYWRlclRlbXBsYXRlOyBjb250ZXh0OiBpdGVtQ29udGV4dFwiIC8+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiYWNjb3JkaW9uLWNvbGxhcHNlXCIgY0NvbGxhcHNlIFt2aXNpYmxlXT1cInZpc2libGVcIiBbYXR0ci5hcmlhLWV4cGFuZGVkXT1cInZpc2libGVcIiBbaWRdPVwiY29udGVudElkXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInRtcGxbJ2FjY29yZGlvbkJvZHlUZW1wbGF0ZSddIHx8IGRlZmF1bHRBY2NvcmRpb25Cb2R5VGVtcGxhdGU7IGNvbnRleHQ6IGl0ZW1Db250ZXh0XCIgLz5cbiAgPC9kaXY+XG48L25nLWNvbnRhaW5lcj5cblxuPG5nLXRlbXBsYXRlICNkZWZhdWx0QWNjb3JkaW9uSGVhZGVyVGVtcGxhdGU+XG4gIDxidXR0b24gY0FjY29yZGlvbkJ1dHRvbiBbY29sbGFwc2VkXT1cIiF2aXNpYmxlXCIgW2F0dHIuYXJpYS1jb250cm9sc109XCJjb250ZW50SWRcIiAoY2xpY2spPVwidG9nZ2xlSXRlbSgpXCI+XG4gICAgPG5nLWNvbnRhaW5lclxuICAgICAgKm5nVGVtcGxhdGVPdXRsZXQ9XCJ0bXBsWydhY2NvcmRpb25IZWFkZXInXSB8fCBkZWZhdWx0QWNjb3JkaW9uSGVhZGVyQ29udGVudFRlbXBsYXRlOyBjb250ZXh0OiBpdGVtQ29udGV4dFwiPlxuICAgIDwvbmctY29udGFpbmVyPlxuICA8L2J1dHRvbj5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjZGVmYXVsdEFjY29yZGlvbkhlYWRlckNvbnRlbnRUZW1wbGF0ZT5cbiAgPG5nLWNvbnRlbnQgLz5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjZGVmYXVsdEFjY29yZGlvbkJvZHlUZW1wbGF0ZT5cbiAgPGRpdiBjbGFzcz1cImFjY29yZGlvbi1ib2R5XCI+XG4gICAgPG5nLWNvbnRhaW5lclxuICAgICAgKm5nVGVtcGxhdGVPdXRsZXQ9XCJ0bXBsWydhY2NvcmRpb25Cb2R5J10gfHwgZGVmYXVsdEFjY29yZGlvbkJvZHlDb250ZW50VGVtcGxhdGU7IGNvbnRleHQ6IGl0ZW1Db250ZXh0XCI+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNkZWZhdWx0QWNjb3JkaW9uQm9keUNvbnRlbnRUZW1wbGF0ZT5cbiAgPG5nLWNvbnRlbnQgLz5cbjwvbmctdGVtcGxhdGU+XG4iXX0=