design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
39 lines • 8.23 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core';
import { ItCollapseComponent } from '../collapse/collapse.component';
import * as i0 from "@angular/core";
/**
* Accordion
* @description Build vertically collapsible accordions based on Collapse.
*/
export class ItAccordionComponent extends ItCollapseComponent {
constructor() {
super(...arguments);
this.isCollapsed = true;
}
ngAfterViewInit() {
super.ngAfterViewInit();
this._renderer.removeAttribute(this._elementRef.nativeElement, 'title');
this.isCollapsed = !this.opened;
this.hideEvent.subscribe(() => {
this.isCollapsed = true;
this._changeDetectorRef.detectChanges();
});
this.showEvent.subscribe(() => {
this.isCollapsed = false;
this._changeDetectorRef.detectChanges();
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAccordionComponent, isStandalone: true, selector: "it-accordion", inputs: { title: "title" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itAccordion"], usesInheritance: true, ngImport: i0, template: "<div class=\"accordion\">\n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\" id=\"collapse-{{ id }}-heading\">\n <button\n class=\"accordion-button\"\n type=\"button\"\n data-bs-toggle=\"collapse\"\n [class.collapsed]=\"isCollapsed\"\n [attr.data-bs-target]=\"'#collapse-' + id\"\n [attr.aria-controls]=\"'collapse-' + id\"\n [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n {{ title }}\n </button>\n </h2>\n\n <div\n #collapse\n id=\"collapse-{{ id }}\"\n role=\"region\"\n class=\"accordion-collapse collapse {{ class }}\"\n [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n <div class=\"accordion-body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAccordionComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-accordion', exportAs: 'itAccordion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div class=\"accordion\">\n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\" id=\"collapse-{{ id }}-heading\">\n <button\n class=\"accordion-button\"\n type=\"button\"\n data-bs-toggle=\"collapse\"\n [class.collapsed]=\"isCollapsed\"\n [attr.data-bs-target]=\"'#collapse-' + id\"\n [attr.aria-controls]=\"'collapse-' + id\"\n [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n {{ title }}\n </button>\n </h2>\n\n <div\n #collapse\n id=\"collapse-{{ id }}\"\n role=\"region\"\n class=\"accordion-collapse collapse {{ class }}\"\n [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n <div class=\"accordion-body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n" }]
}], propDecorators: { title: [{
type: Input,
args: [{ required: true }]
}], collapseDiv: [{
type: ViewChild,
args: ['collapse']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1hbmd1bGFyLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvY29yZS9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1hbmd1bGFyLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvY29yZS9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsdUJBQXVCLEVBQUUsU0FBUyxFQUFjLEtBQUssRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEgsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7O0FBRXJFOzs7R0FHRztBQVNILE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxtQkFBbUI7SUFSN0Q7O1FBZ0JZLGdCQUFXLEdBQVksSUFBSSxDQUFDO0tBZ0J2QztJQWRVLGVBQWU7UUFDdEIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxTQUFTLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxFQUFFLE9BQU8sQ0FBQyxDQUFDO1FBRXhFLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQ2hDLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUM1QixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztZQUN4QixJQUFJLENBQUMsa0JBQWtCLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDMUMsQ0FBQyxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDNUIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7WUFDekIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQzFDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs4R0F2QlUsb0JBQW9CO2tHQUFwQixvQkFBb0IsK1BDZmpDLDB6QkEyQkE7OzJGRFphLG9CQUFvQjtrQkFSaEMsU0FBUztpQ0FDSSxJQUFJLFlBQ04sY0FBYyxZQUVkLGFBQWEsbUJBQ04sdUJBQXVCLENBQUMsTUFBTSxXQUN0QyxFQUFFOzhCQU1nQixLQUFLO3NCQUEvQixLQUFLO3VCQUFDLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRTtnQkFFaUIsV0FBVztzQkFBcEQsU0FBUzt1QkFBQyxVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSXRDb2xsYXBzZUNvbXBvbmVudCB9IGZyb20gJy4uL2NvbGxhcHNlL2NvbGxhcHNlLmNvbXBvbmVudCc7XG5cbi8qKlxuICogQWNjb3JkaW9uXG4gKiBAZGVzY3JpcHRpb24gQnVpbGQgdmVydGljYWxseSBjb2xsYXBzaWJsZSBhY2NvcmRpb25zIGJhc2VkIG9uIENvbGxhcHNlLlxuICovXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc2VsZWN0b3I6ICdpdC1hY2NvcmRpb24nLFxuICB0ZW1wbGF0ZVVybDogJy4vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sJyxcbiAgZXhwb3J0QXM6ICdpdEFjY29yZGlvbicsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbXSxcbn0pXG5leHBvcnQgY2xhc3MgSXRBY2NvcmRpb25Db21wb25lbnQgZXh0ZW5kcyBJdENvbGxhcHNlQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIC8qKlxuICAgKiBBY2NvcmRpb24gVGl0bGVcbiAgICovXG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHRpdGxlITogc3RyaW5nO1xuXG4gIEBWaWV3Q2hpbGQoJ2NvbGxhcHNlJykgcHJvdGVjdGVkIG92ZXJyaWRlIGNvbGxhcHNlRGl2PzogRWxlbWVudFJlZjxIVE1MRGl2RWxlbWVudD47XG5cbiAgcHJvdGVjdGVkIGlzQ29sbGFwc2VkOiBib29sZWFuID0gdHJ1ZTtcblxuICBvdmVycmlkZSBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgc3VwZXIubmdBZnRlclZpZXdJbml0KCk7XG4gICAgdGhpcy5fcmVuZGVyZXIucmVtb3ZlQXR0cmlidXRlKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ3RpdGxlJyk7XG5cbiAgICB0aGlzLmlzQ29sbGFwc2VkID0gIXRoaXMub3BlbmVkO1xuICAgIHRoaXMuaGlkZUV2ZW50LnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICB0aGlzLmlzQ29sbGFwc2VkID0gdHJ1ZTtcbiAgICAgIHRoaXMuX2NoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTtcbiAgICB9KTtcbiAgICB0aGlzLnNob3dFdmVudC5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgdGhpcy5pc0NvbGxhcHNlZCA9IGZhbHNlO1xuICAgICAgdGhpcy5fY2hhbmdlRGV0ZWN0b3JSZWYuZGV0ZWN0Q2hhbmdlcygpO1xuICAgIH0pO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiYWNjb3JkaW9uXCI+XG4gIDxkaXYgY2xhc3M9XCJhY2NvcmRpb24taXRlbVwiPlxuICAgIDxoMiBjbGFzcz1cImFjY29yZGlvbi1oZWFkZXJcIiBpZD1cImNvbGxhcHNlLXt7IGlkIH19LWhlYWRpbmdcIj5cbiAgICAgIDxidXR0b25cbiAgICAgICAgY2xhc3M9XCJhY2NvcmRpb24tYnV0dG9uXCJcbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgIGRhdGEtYnMtdG9nZ2xlPVwiY29sbGFwc2VcIlxuICAgICAgICBbY2xhc3MuY29sbGFwc2VkXT1cImlzQ29sbGFwc2VkXCJcbiAgICAgICAgW2F0dHIuZGF0YS1icy10YXJnZXRdPVwiJyNjb2xsYXBzZS0nICsgaWRcIlxuICAgICAgICBbYXR0ci5hcmlhLWNvbnRyb2xzXT1cIidjb2xsYXBzZS0nICsgaWRcIlxuICAgICAgICBbYXR0ci5hcmlhLWV4cGFuZGVkXT1cIm9wZW5lZCA/ICd0cnVlJyA6ICdmYWxzZSdcIj5cbiAgICAgICAge3sgdGl0bGUgfX1cbiAgICAgIDwvYnV0dG9uPlxuICAgIDwvaDI+XG5cbiAgICA8ZGl2XG4gICAgICAjY29sbGFwc2VcbiAgICAgIGlkPVwiY29sbGFwc2Ute3sgaWQgfX1cIlxuICAgICAgcm9sZT1cInJlZ2lvblwiXG4gICAgICBjbGFzcz1cImFjY29yZGlvbi1jb2xsYXBzZSBjb2xsYXBzZSB7eyBjbGFzcyB9fVwiXG4gICAgICBbYXR0ci5hcmlhLWxhYmVsbGVkYnldPVwiJ2NvbGxhcHNlLScgKyBpZCArICctaGVhZGluZydcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJhY2NvcmRpb24tYm9keVwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==