@favian/headwind-ui
Version:
Headless UI for Angular - Styleless Angular components to integrate with Tailwind CSS
81 lines • 11.9 kB
JavaScript
import { Component, ContentChild, EventEmitter, Input, Output, ViewChild, ViewContainerRef, } from '@angular/core';
import { HeadwindAccordionContentDirective } from './headwind-accordion-content/headwind-accordion-content.directive';
import { HeadwindAccordionService } from './service/headwind-accordion.service';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i0 from "@angular/core";
import * as i1 from "./service/headwind-accordion.service";
export class HeadwindAccordionComponent {
constructor(_headwindAccordionService) {
this._headwindAccordionService = _headwindAccordionService;
this.openedChange = new EventEmitter();
this._headwindAccordionService.toggleOpened.pipe(takeUntilDestroyed()).subscribe(() => {
const opened = !this.opened;
this.opened = opened; // to toggle content
this.openedChange.emit(opened);
});
}
get opened() {
return this._headwindAccordionService.opened;
}
set opened(value) {
this._headwindAccordionService.opened = value;
if (value) {
this.open();
}
else {
this.close();
}
}
ngAfterViewInit() {
// use timeout to prevent NG0100 error
this._openTimeoutId = setTimeout(() => {
if (this.opened) {
this.open();
}
});
}
ngOnDestroy() {
clearTimeout(this._openTimeoutId);
}
toggle() {
if (this.opened) {
this.close();
}
else {
this.open();
}
}
open() {
if (this.accordionContentContainer && this.accordionContent && !this._contentEmbeddedViewRef) {
this._contentEmbeddedViewRef = this.accordionContentContainer.createEmbeddedView(this.accordionContent.templateRef);
}
this.openedChange.emit(true);
this._headwindAccordionService.opened = true;
}
close() {
this._contentEmbeddedViewRef?.destroy();
delete this._contentEmbeddedViewRef;
this.openedChange.emit(false);
this._headwindAccordionService.opened = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeadwindAccordionComponent, deps: [{ token: i1.HeadwindAccordionService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeadwindAccordionComponent, isStandalone: true, selector: "headwind-accordion", inputs: { opened: "opened" }, outputs: { openedChange: "openedChange" }, host: { properties: { "class.headwind-opened": "opened" }, classAttribute: "headwind-accordion" }, providers: [HeadwindAccordionService], queries: [{ propertyName: "accordionContent", first: true, predicate: HeadwindAccordionContentDirective, descendants: true }], viewQueries: [{ propertyName: "accordionContentContainer", first: true, predicate: ["accordionContentContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n<ng-container #accordionContentContainer></ng-container>\r\n", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeadwindAccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'headwind-accordion', standalone: true, imports: [], providers: [HeadwindAccordionService], host: {
class: 'headwind-accordion',
['[class.headwind-opened]']: 'opened',
}, template: "<ng-content></ng-content>\r\n\r\n<ng-container #accordionContentContainer></ng-container>\r\n" }]
}], ctorParameters: () => [{ type: i1.HeadwindAccordionService }], propDecorators: { openedChange: [{
type: Output
}], accordionContentContainer: [{
type: ViewChild,
args: ['accordionContentContainer', { read: ViewContainerRef }]
}], accordionContent: [{
type: ContentChild,
args: [HeadwindAccordionContentDirective, { descendants: true }]
}], opened: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZHdpbmQtYWNjb3JkaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2hlYWR3aW5kLXVpL3NyYy9jb21wb25lbnRzL2hlYWR3aW5kLWFjY29yZGlvbi9oZWFkd2luZC1hY2NvcmRpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaGVhZHdpbmQtdWkvc3JjL2NvbXBvbmVudHMvaGVhZHdpbmQtYWNjb3JkaW9uL2hlYWR3aW5kLWFjY29yZGlvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsU0FBUyxFQUNULFlBQVksRUFFWixZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sRUFDTixTQUFTLEVBQ1QsZ0JBQWdCLEdBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxpQ0FBaUMsRUFBRSxNQUFNLG1FQUFtRSxDQUFDO0FBQ3RILE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQ2hGLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDOzs7QUFjaEUsTUFBTSxPQUFPLDBCQUEwQjtJQVNyQyxZQUE2Qix5QkFBbUQ7UUFBbkQsOEJBQXlCLEdBQXpCLHlCQUF5QixDQUEwQjtRQVJ0RSxpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFTbkQsSUFBSSxDQUFDLHlCQUF5QixDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDcEYsTUFBTSxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO1lBRTVCLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDLENBQUMsb0JBQW9CO1lBQzFDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ2pDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELElBQUksTUFBTTtRQUNSLE9BQU8sSUFBSSxDQUFDLHlCQUF5QixDQUFDLE1BQU0sQ0FBQztJQUMvQyxDQUFDO0lBRUQsSUFDSSxNQUFNLENBQUMsS0FBYztRQUN2QixJQUFJLENBQUMseUJBQXlCLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUU5QyxJQUFJLEtBQUssRUFBRSxDQUFDO1lBQ1YsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ2QsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDZixDQUFDO0lBQ0gsQ0FBQztJQUVELGVBQWU7UUFDYixzQ0FBc0M7UUFDdEMsSUFBSSxDQUFDLGNBQWMsR0FBRyxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ3BDLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO2dCQUNoQixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDZCxDQUFDO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsV0FBVztRQUNULFlBQVksQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7SUFDcEMsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztZQUNoQixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDZixDQUFDO2FBQU0sQ0FBQztZQUNOLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNkLENBQUM7SUFDSCxDQUFDO0lBRUQsSUFBSTtRQUNGLElBQUksSUFBSSxDQUFDLHlCQUF5QixJQUFJLElBQUksQ0FBQyxnQkFBZ0IsSUFBSSxDQUFDLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxDQUFDO1lBQzdGLElBQUksQ0FBQyx1QkFBdUIsR0FBRyxJQUFJLENBQUMseUJBQXlCLENBQUMsa0JBQWtCLENBQzlFLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxXQUFXLENBQ2xDLENBQUM7UUFDSixDQUFDO1FBRUQsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDN0IsSUFBSSxDQUFDLHlCQUF5QixDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7SUFDL0MsQ0FBQztJQUVELEtBQUs7UUFDSCxJQUFJLENBQUMsdUJBQXVCLEVBQUUsT0FBTyxFQUFFLENBQUM7UUFFeEMsT0FBTyxJQUFJLENBQUMsdUJBQXVCLENBQUM7UUFFcEMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDOUIsSUFBSSxDQUFDLHlCQUF5QixDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFDaEQsQ0FBQzsrR0F4RVUsMEJBQTBCO21HQUExQiwwQkFBMEIsNk9BTjFCLENBQUMsd0JBQXdCLENBQUMsd0VBU3ZCLGlDQUFpQyxtS0FEQyxnQkFBZ0IsNkJDOUJsRSwrRkFHQTs7NEZEeUJhLDBCQUEwQjtrQkFadEMsU0FBUzsrQkFDRSxvQkFBb0IsY0FDbEIsSUFBSSxXQUNQLEVBQUUsYUFHQSxDQUFDLHdCQUF3QixDQUFDLFFBQy9CO3dCQUNKLEtBQUssRUFBRSxvQkFBb0I7d0JBQzNCLENBQUMseUJBQXlCLENBQUMsRUFBRSxRQUFRO3FCQUN0Qzs2RkFHUyxZQUFZO3NCQUFyQixNQUFNO2dCQUM2RCx5QkFBeUI7c0JBQTVGLFNBQVM7dUJBQUMsMkJBQTJCLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBRWxFLGdCQUFnQjtzQkFEZixZQUFZO3VCQUFDLGlDQUFpQyxFQUFFLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRTtnQkFvQmxFLE1BQU07c0JBRFQsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQWZ0ZXJWaWV3SW5pdCxcclxuICBDb21wb25lbnQsXHJcbiAgQ29udGVudENoaWxkLFxyXG4gIEVtYmVkZGVkVmlld1JlZixcclxuICBFdmVudEVtaXR0ZXIsXHJcbiAgSW5wdXQsXHJcbiAgT25EZXN0cm95LFxyXG4gIE91dHB1dCxcclxuICBWaWV3Q2hpbGQsXHJcbiAgVmlld0NvbnRhaW5lclJlZixcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgSGVhZHdpbmRBY2NvcmRpb25Db250ZW50RGlyZWN0aXZlIH0gZnJvbSAnLi9oZWFkd2luZC1hY2NvcmRpb24tY29udGVudC9oZWFkd2luZC1hY2NvcmRpb24tY29udGVudC5kaXJlY3RpdmUnO1xyXG5pbXBvcnQgeyBIZWFkd2luZEFjY29yZGlvblNlcnZpY2UgfSBmcm9tICcuL3NlcnZpY2UvaGVhZHdpbmQtYWNjb3JkaW9uLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyB0YWtlVW50aWxEZXN0cm95ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2hlYWR3aW5kLWFjY29yZGlvbicsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vaGVhZHdpbmQtYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vaGVhZHdpbmQtYWNjb3JkaW9uLmNvbXBvbmVudC5zY3NzJyxcclxuICBwcm92aWRlcnM6IFtIZWFkd2luZEFjY29yZGlvblNlcnZpY2VdLFxyXG4gIGhvc3Q6IHtcclxuICAgIGNsYXNzOiAnaGVhZHdpbmQtYWNjb3JkaW9uJyxcclxuICAgIFsnW2NsYXNzLmhlYWR3aW5kLW9wZW5lZF0nXTogJ29wZW5lZCcsXHJcbiAgfSxcclxufSlcclxuZXhwb3J0IGNsYXNzIEhlYWR3aW5kQWNjb3JkaW9uQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcclxuICBAT3V0cHV0KCkgb3BlbmVkQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xyXG4gIEBWaWV3Q2hpbGQoJ2FjY29yZGlvbkNvbnRlbnRDb250YWluZXInLCB7IHJlYWQ6IFZpZXdDb250YWluZXJSZWYgfSkgYWNjb3JkaW9uQ29udGVudENvbnRhaW5lcj86IFZpZXdDb250YWluZXJSZWY7XHJcbiAgQENvbnRlbnRDaGlsZChIZWFkd2luZEFjY29yZGlvbkNvbnRlbnREaXJlY3RpdmUsIHsgZGVzY2VuZGFudHM6IHRydWUgfSlcclxuICBhY2NvcmRpb25Db250ZW50PzogSGVhZHdpbmRBY2NvcmRpb25Db250ZW50RGlyZWN0aXZlO1xyXG5cclxuICBwcml2YXRlIF9jb250ZW50RW1iZWRkZWRWaWV3UmVmPzogRW1iZWRkZWRWaWV3UmVmPGFueT47XHJcbiAgcHJpdmF0ZSBfb3BlblRpbWVvdXRJZD86IGFueTtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZWFkb25seSBfaGVhZHdpbmRBY2NvcmRpb25TZXJ2aWNlOiBIZWFkd2luZEFjY29yZGlvblNlcnZpY2UpIHtcclxuICAgIHRoaXMuX2hlYWR3aW5kQWNjb3JkaW9uU2VydmljZS50b2dnbGVPcGVuZWQucGlwZSh0YWtlVW50aWxEZXN0cm95ZWQoKSkuc3Vic2NyaWJlKCgpID0+IHtcclxuICAgICAgY29uc3Qgb3BlbmVkID0gIXRoaXMub3BlbmVkO1xyXG5cclxuICAgICAgdGhpcy5vcGVuZWQgPSBvcGVuZWQ7IC8vIHRvIHRvZ2dsZSBjb250ZW50XHJcbiAgICAgIHRoaXMub3BlbmVkQ2hhbmdlLmVtaXQob3BlbmVkKTtcclxuICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgZ2V0IG9wZW5lZCgpOiBib29sZWFuIHtcclxuICAgIHJldHVybiB0aGlzLl9oZWFkd2luZEFjY29yZGlvblNlcnZpY2Uub3BlbmVkO1xyXG4gIH1cclxuXHJcbiAgQElucHV0KClcclxuICBzZXQgb3BlbmVkKHZhbHVlOiBib29sZWFuKSB7XHJcbiAgICB0aGlzLl9oZWFkd2luZEFjY29yZGlvblNlcnZpY2Uub3BlbmVkID0gdmFsdWU7XHJcblxyXG4gICAgaWYgKHZhbHVlKSB7XHJcbiAgICAgIHRoaXMub3BlbigpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5jbG9zZSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbmdBZnRlclZpZXdJbml0KCkge1xyXG4gICAgLy8gdXNlIHRpbWVvdXQgdG8gcHJldmVudCBORzAxMDAgZXJyb3JcclxuICAgIHRoaXMuX29wZW5UaW1lb3V0SWQgPSBzZXRUaW1lb3V0KCgpID0+IHtcclxuICAgICAgaWYgKHRoaXMub3BlbmVkKSB7XHJcbiAgICAgICAgdGhpcy5vcGVuKCk7XHJcbiAgICAgIH1cclxuICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKSB7XHJcbiAgICBjbGVhclRpbWVvdXQodGhpcy5fb3BlblRpbWVvdXRJZCk7XHJcbiAgfVxyXG5cclxuICB0b2dnbGUoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5vcGVuZWQpIHtcclxuICAgICAgdGhpcy5jbG9zZSgpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5vcGVuKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBvcGVuKCk6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMuYWNjb3JkaW9uQ29udGVudENvbnRhaW5lciAmJiB0aGlzLmFjY29yZGlvbkNvbnRlbnQgJiYgIXRoaXMuX2NvbnRlbnRFbWJlZGRlZFZpZXdSZWYpIHtcclxuICAgICAgdGhpcy5fY29udGVudEVtYmVkZGVkVmlld1JlZiA9IHRoaXMuYWNjb3JkaW9uQ29udGVudENvbnRhaW5lci5jcmVhdGVFbWJlZGRlZFZpZXcoXHJcbiAgICAgICAgdGhpcy5hY2NvcmRpb25Db250ZW50LnRlbXBsYXRlUmVmLFxyXG4gICAgICApO1xyXG4gICAgfVxyXG5cclxuICAgIHRoaXMub3BlbmVkQ2hhbmdlLmVtaXQodHJ1ZSk7XHJcbiAgICB0aGlzLl9oZWFkd2luZEFjY29yZGlvblNlcnZpY2Uub3BlbmVkID0gdHJ1ZTtcclxuICB9XHJcblxyXG4gIGNsb3NlKCk6IHZvaWQge1xyXG4gICAgdGhpcy5fY29udGVudEVtYmVkZGVkVmlld1JlZj8uZGVzdHJveSgpO1xyXG5cclxuICAgIGRlbGV0ZSB0aGlzLl9jb250ZW50RW1iZWRkZWRWaWV3UmVmO1xyXG5cclxuICAgIHRoaXMub3BlbmVkQ2hhbmdlLmVtaXQoZmFsc2UpO1xyXG4gICAgdGhpcy5faGVhZHdpbmRBY2NvcmRpb25TZXJ2aWNlLm9wZW5lZCA9IGZhbHNlO1xyXG4gIH1cclxufVxyXG4iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcblxyXG48bmctY29udGFpbmVyICNhY2NvcmRpb25Db250ZW50Q29udGFpbmVyPjwvbmctY29udGFpbmVyPlxyXG4iXX0=