@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
73 lines • 11.6 kB
JavaScript
import { Component, EventEmitter, HostBinding, inject, Input, Output } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { AccordionService } from '../accordion.service';
import * as i0 from "@angular/core";
import * as i1 from "../../../directives/accessibility/focus-indicator/focus-indicator.directive";
let uniqueId = 1;
export class AccordionPanelComponent {
constructor() {
this.accordion = inject(AccordionService);
this.panelId = `ux-accordion-panel-${uniqueId++}`;
this.headingId = `${this.panelId}-heading`;
this.disabled = false;
this.expanded = false;
this.expandedChange = new EventEmitter();
this._onDestroy = new Subject();
}
ngOnInit() {
this.accordion.collapse.pipe(takeUntil(this._onDestroy)).subscribe(() => this.collapse());
}
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
}
toggle() {
if (this.expanded) {
this.collapse();
return;
}
// check if we should collapse others
if (this.accordion.collapseOthers) {
this.accordion.collapseAll();
}
// store the new expanded state
this.expand();
}
expand() {
if (this.disabled === false && this.expanded === false) {
this.expanded = true;
this.expandedChange.next(true);
}
}
collapse() {
if (this.disabled === false && this.expanded === true) {
this.expanded = false;
this.expandedChange.next(false);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: AccordionPanelComponent, selector: "ux-accordion-panel", inputs: { panelId: "panelId", headingId: "headingId", disabled: "disabled", heading: "heading", expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class.panel-open": "this.expanded" }, classAttribute: "panel panel-default" }, ngImport: i0, template: "<div class=\"panel-heading\"\n role=\"button\"\n uxFocusIndicator\n [tabindex]=\"disabled ? -1 : 0\"\n [id]=\"headingId\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"panelId\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.spacebar)=\"toggle(); $event.preventDefault()\">\n\n <div class=\"panel-title\">\n {{ heading }}\n <ng-content select=\"ux-accordion-panel-header\"></ng-content>\n </div>\n</div>\n\n<div [id]=\"panelId\"\n class=\"panel-collapse collapse\"\n [class.in]=\"expanded\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"headingId\">\n\n <div class=\"panel-body\">\n <ng-content></ng-content>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i1.FocusIndicatorDirective, selector: "[uxFocusIndicator]", inputs: ["checkChildren", "mouseFocusIndicator", "touchFocusIndicator", "keyboardFocusIndicator", "programmaticFocusIndicator"], outputs: ["indicator"], exportAs: ["ux-focus-indicator"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AccordionPanelComponent, decorators: [{
type: Component,
args: [{ selector: 'ux-accordion-panel', host: {
'class': 'panel panel-default'
}, template: "<div class=\"panel-heading\"\n role=\"button\"\n uxFocusIndicator\n [tabindex]=\"disabled ? -1 : 0\"\n [id]=\"headingId\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"panelId\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.spacebar)=\"toggle(); $event.preventDefault()\">\n\n <div class=\"panel-title\">\n {{ heading }}\n <ng-content select=\"ux-accordion-panel-header\"></ng-content>\n </div>\n</div>\n\n<div [id]=\"panelId\"\n class=\"panel-collapse collapse\"\n [class.in]=\"expanded\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"headingId\">\n\n <div class=\"panel-body\">\n <ng-content></ng-content>\n </div>\n</div>" }]
}], propDecorators: { panelId: [{
type: Input
}], headingId: [{
type: Input
}], disabled: [{
type: Input
}], heading: [{
type: Input
}], expanded: [{
type: Input
}, {
type: HostBinding,
args: ['class.panel-open']
}], expandedChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLXBhbmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2FjY29yZGlvbi9hY2NvcmRpb24tcGFuZWwvYWNjb3JkaW9uLXBhbmVsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2FjY29yZGlvbi9hY2NvcmRpb24tcGFuZWwvYWNjb3JkaW9uLXBhbmVsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFxQixNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0csT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDM0MsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7OztBQUV4RCxJQUFJLFFBQVEsR0FBVyxDQUFDLENBQUM7QUFTekIsTUFBTSxPQUFPLHVCQUF1QjtJQVBwQztRQVNhLGNBQVMsR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUVyQyxZQUFPLEdBQVcsc0JBQXNCLFFBQVEsRUFBRSxFQUFFLENBQUM7UUFDckQsY0FBUyxHQUFXLEdBQUcsSUFBSSxDQUFDLE9BQU8sVUFBVSxDQUFDO1FBRTlDLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFTyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBRTFELG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUV0QyxlQUFVLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztLQXlDckQ7SUF2Q0csUUFBUTtRQUNKLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO0lBQzlGLENBQUM7SUFFRCxXQUFXO1FBQ1AsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQy9CLENBQUM7SUFFRCxNQUFNO1FBRUYsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDaEIsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ2hCLE9BQU87UUFDWCxDQUFDO1FBRUQscUNBQXFDO1FBQ3JDLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUNoQyxJQUFJLENBQUMsU0FBUyxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ2pDLENBQUM7UUFFRCwrQkFBK0I7UUFDL0IsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQ2xCLENBQUM7SUFFRCxNQUFNO1FBQ0YsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFLLEtBQUssSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFLLEtBQUssRUFBRSxDQUFDO1lBQ3JELElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1lBQ3JCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ25DLENBQUM7SUFDTCxDQUFDO0lBRUQsUUFBUTtRQUNKLElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSyxLQUFLLElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSyxJQUFJLEVBQUUsQ0FBQztZQUNwRCxJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztZQUN0QixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNwQyxDQUFDO0lBQ0wsQ0FBQzsrR0FwRFEsdUJBQXVCO21HQUF2Qix1QkFBdUIsdVVDZHBDLDYwQkE0Qk07OzRGRGRPLHVCQUF1QjtrQkFQbkMsU0FBUzsrQkFDSSxvQkFBb0IsUUFFeEI7d0JBQ0YsT0FBTyxFQUFFLHFCQUFxQjtxQkFDakM7OEJBTVEsT0FBTztzQkFBZixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ29DLFFBQVE7c0JBQWpELEtBQUs7O3NCQUFJLFdBQVc7dUJBQUMsa0JBQWtCO2dCQUU5QixjQUFjO3NCQUF2QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBpbmplY3QsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBBY2NvcmRpb25TZXJ2aWNlIH0gZnJvbSAnLi4vYWNjb3JkaW9uLnNlcnZpY2UnO1xuXG5sZXQgdW5pcXVlSWQ6IG51bWJlciA9IDE7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAndXgtYWNjb3JkaW9uLXBhbmVsJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vYWNjb3JkaW9uLXBhbmVsLmNvbXBvbmVudC5odG1sJyxcbiAgICBob3N0OiB7XG4gICAgICAgICdjbGFzcyc6ICdwYW5lbCBwYW5lbC1kZWZhdWx0J1xuICAgIH1cbn0pXG5leHBvcnQgY2xhc3MgQWNjb3JkaW9uUGFuZWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG5cbiAgICByZWFkb25seSBhY2NvcmRpb24gPSBpbmplY3QoQWNjb3JkaW9uU2VydmljZSk7XG5cbiAgICBASW5wdXQoKSBwYW5lbElkOiBzdHJpbmcgPSBgdXgtYWNjb3JkaW9uLXBhbmVsLSR7dW5pcXVlSWQrK31gO1xuICAgIEBJbnB1dCgpIGhlYWRpbmdJZDogc3RyaW5nID0gYCR7dGhpcy5wYW5lbElkfS1oZWFkaW5nYDtcblxuICAgIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG4gICAgQElucHV0KCkgaGVhZGluZzogc3RyaW5nO1xuICAgIEBJbnB1dCgpIEBIb3N0QmluZGluZygnY2xhc3MucGFuZWwtb3BlbicpIGV4cGFuZGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICBAT3V0cHV0KCkgZXhwYW5kZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgICBwcml2YXRlIHJlYWRvbmx5IF9vbkRlc3Ryb3kgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuYWNjb3JkaW9uLmNvbGxhcHNlLnBpcGUodGFrZVVudGlsKHRoaXMuX29uRGVzdHJveSkpLnN1YnNjcmliZSgoKSA9PiB0aGlzLmNvbGxhcHNlKCkpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9vbkRlc3Ryb3kubmV4dCgpO1xuICAgICAgICB0aGlzLl9vbkRlc3Ryb3kuY29tcGxldGUoKTtcbiAgICB9XG5cbiAgICB0b2dnbGUoKTogdm9pZCB7XG5cbiAgICAgICAgaWYgKHRoaXMuZXhwYW5kZWQpIHtcbiAgICAgICAgICAgIHRoaXMuY29sbGFwc2UoKTtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIC8vIGNoZWNrIGlmIHdlIHNob3VsZCBjb2xsYXBzZSBvdGhlcnNcbiAgICAgICAgaWYgKHRoaXMuYWNjb3JkaW9uLmNvbGxhcHNlT3RoZXJzKSB7XG4gICAgICAgICAgICB0aGlzLmFjY29yZGlvbi5jb2xsYXBzZUFsbCgpO1xuICAgICAgICB9XG5cbiAgICAgICAgLy8gc3RvcmUgdGhlIG5ldyBleHBhbmRlZCBzdGF0ZVxuICAgICAgICB0aGlzLmV4cGFuZCgpO1xuICAgIH1cblxuICAgIGV4cGFuZCgpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuZGlzYWJsZWQgPT09IGZhbHNlICYmIHRoaXMuZXhwYW5kZWQgPT09IGZhbHNlKSB7XG4gICAgICAgICAgICB0aGlzLmV4cGFuZGVkID0gdHJ1ZTtcbiAgICAgICAgICAgIHRoaXMuZXhwYW5kZWRDaGFuZ2UubmV4dCh0cnVlKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIGNvbGxhcHNlKCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5kaXNhYmxlZCA9PT0gZmFsc2UgJiYgdGhpcy5leHBhbmRlZCA9PT0gdHJ1ZSkge1xuICAgICAgICAgICAgdGhpcy5leHBhbmRlZCA9IGZhbHNlO1xuICAgICAgICAgICAgdGhpcy5leHBhbmRlZENoYW5nZS5uZXh0KGZhbHNlKTtcbiAgICAgICAgfVxuICAgIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cInBhbmVsLWhlYWRpbmdcIlxuICAgICAgcm9sZT1cImJ1dHRvblwiXG4gICAgICB1eEZvY3VzSW5kaWNhdG9yXG4gICAgICBbdGFiaW5kZXhdPVwiZGlzYWJsZWQgPyAtMSA6IDBcIlxuICAgICAgW2lkXT1cImhlYWRpbmdJZFwiXG4gICAgICBbYXR0ci5hcmlhLWV4cGFuZGVkXT1cImV4cGFuZGVkXCJcbiAgICAgIFthdHRyLmFyaWEtY29udHJvbHNdPVwicGFuZWxJZFwiXG4gICAgICBbYXR0ci5hcmlhLWRpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgIChjbGljayk9XCJ0b2dnbGUoKVwiXG4gICAgICAoa2V5ZG93bi5lbnRlcik9XCJ0b2dnbGUoKVwiXG4gICAgICAoa2V5ZG93bi5zcGFjZSk9XCJ0b2dnbGUoKTsgJGV2ZW50LnByZXZlbnREZWZhdWx0KClcIlxuICAgICAgKGtleWRvd24uc3BhY2ViYXIpPVwidG9nZ2xlKCk7ICRldmVudC5wcmV2ZW50RGVmYXVsdCgpXCI+XG5cbiAgPGRpdiBjbGFzcz1cInBhbmVsLXRpdGxlXCI+XG4gICAgICB7eyBoZWFkaW5nIH19XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJ1eC1hY2NvcmRpb24tcGFuZWwtaGVhZGVyXCI+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbjwvZGl2PlxuXG48ZGl2IFtpZF09XCJwYW5lbElkXCJcbiAgICAgIGNsYXNzPVwicGFuZWwtY29sbGFwc2UgY29sbGFwc2VcIlxuICAgICAgW2NsYXNzLmluXT1cImV4cGFuZGVkXCJcbiAgICAgIHJvbGU9XCJ0YWJwYW5lbFwiXG4gICAgICBbYXR0ci5hcmlhLWxhYmVsbGVkYnldPVwiaGVhZGluZ0lkXCI+XG5cbiAgPGRpdiBjbGFzcz1cInBhbmVsLWJvZHlcIj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuPC9kaXY+Il19