@hxui/angular
Version:
An Angular library based on the [HXUI design system](https://hxui.io).
134 lines • 14.1 kB
JavaScript
import { animate, state, style, transition, trigger } from '@angular/animations';
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* TODO: !BREAKING! align accordion markup for accessibility,
* consider using attribute selector
* @see {@link https://www.w3.org/TR/wai-aria-practices/#accordion}
* @see {@link https://medium.com/javascript-everyday/when-to-use-an-attribute-selector-for-angular-components-7e788ba1bfe7}
*/
export class AccordionContainerComponent {
constructor(_changeDetectionRef) {
this._changeDetectionRef = _changeDetectionRef;
this.expanded = true;
this.index = null;
this.disabled = false;
this.empty = true;
this.headerClick = new EventEmitter();
}
toggle() {
if (this.index !== null) {
this.headerClick.emit(this.index);
}
this.expanded = !this.expanded;
this._changeDetectionRef.markForCheck();
}
}
AccordionContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccordionContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
AccordionContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AccordionContainerComponent, selector: "hx-accordion-container, hxa-accordion-container", inputs: { expanded: "expanded", index: "index", disabled: "disabled", empty: "empty" }, outputs: { headerClick: "headerClick" }, ngImport: i0, template: `
<li
class="hx-accordion-container"
[class.is-active]="expanded && !disabled"
>
<a
class="hx-accordion-header"
[class.is-disabled]="!empty && disabled"
(click)="toggle()"
>
<div class="header-title">
<ng-content
select="hx-accordion-header, hxa-accordion-header"
></ng-content>
</div>
<div class="header-icon" *ngIf="empty">
<i class="hx-icon icon-angle-down" *ngIf="!expanded || disabled"></i>
<i class="hx-icon icon-angle-up" *ngIf="expanded && !disabled"></i>
</div>
</a>
<div
class="hx-accordion-body"
[]="expanded && !disabled"
*ngIf="expanded && !disabled"
>
<div class="hx-accordion-body-wrapper">
<ng-content
select="hx-accordion-body, hxa-accordion-body"
></ng-content>
</div>
</div>
</li>
`, isInline: true, styles: [".hx-accordion{list-style:none;background-color:#fff;border:1px solid rgba(0,0,0,.08);padding:0}.hx-accordion-container{margin-top:0}.hx-accordion-container:not(:last-child){box-shadow:inset 0 -1px #00000014}.hx-accordion-container:not(.is-active) .hx-accordion-header:hover{background-color:#00000005;text-decoration:none;color:#41b987}.hx-accordion-header{color:#2a2c2d;padding:1rem;display:flex;align-items:center;justify-content:space-between;transition:.3s}.hx-accordion-header:hover{color:#2a2c2d;text-decoration:none}.hx-accordion-header .header-icon{transition:.3s;display:flex}.hx-accordion-body{overflow-y:hidden;background-color:#fafafa;transition:.5s;box-shadow:inset 0 1px #00000014}.hx-accordion-body-wrapper{padding:1rem}:host:not(:last-child) .hx-accordion-container{box-shadow:inset 0 -1px #00000014}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
trigger('slideIn', [
state('*', style({ 'overflow-y': 'hidden' })),
state('void', style({ 'overflow-y': 'hidden' })),
transition('* => void', [
style({ height: '*' }),
animate('0.25s ease-out', style({ height: 0, opacity: 0 }))
]),
transition('void => *', [
style({ height: '0' }),
animate('0.25s ease-out', style({ height: '*', opacity: 1 }))
])
])
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccordionContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'hx-accordion-container, hxa-accordion-container', template: `
<li
class="hx-accordion-container"
[class.is-active]="expanded && !disabled"
>
<a
class="hx-accordion-header"
[class.is-disabled]="!empty && disabled"
(click)="toggle()"
>
<div class="header-title">
<ng-content
select="hx-accordion-header, hxa-accordion-header"
></ng-content>
</div>
<div class="header-icon" *ngIf="empty">
<i class="hx-icon icon-angle-down" *ngIf="!expanded || disabled"></i>
<i class="hx-icon icon-angle-up" *ngIf="expanded && !disabled"></i>
</div>
</a>
<div
class="hx-accordion-body"
[]="expanded && !disabled"
*ngIf="expanded && !disabled"
>
<div class="hx-accordion-body-wrapper">
<ng-content
select="hx-accordion-body, hxa-accordion-body"
></ng-content>
</div>
</div>
</li>
`, animations: [
trigger('slideIn', [
state('*', style({ 'overflow-y': 'hidden' })),
state('void', style({ 'overflow-y': 'hidden' })),
transition('* => void', [
style({ height: '*' }),
animate('0.25s ease-out', style({ height: 0, opacity: 0 }))
]),
transition('void => *', [
style({ height: '0' }),
animate('0.25s ease-out', style({ height: '*', opacity: 1 }))
])
])
], styles: [".hx-accordion{list-style:none;background-color:#fff;border:1px solid rgba(0,0,0,.08);padding:0}.hx-accordion-container{margin-top:0}.hx-accordion-container:not(:last-child){box-shadow:inset 0 -1px #00000014}.hx-accordion-container:not(.is-active) .hx-accordion-header:hover{background-color:#00000005;text-decoration:none;color:#41b987}.hx-accordion-header{color:#2a2c2d;padding:1rem;display:flex;align-items:center;justify-content:space-between;transition:.3s}.hx-accordion-header:hover{color:#2a2c2d;text-decoration:none}.hx-accordion-header .header-icon{transition:.3s;display:flex}.hx-accordion-body{overflow-y:hidden;background-color:#fafafa;transition:.5s;box-shadow:inset 0 1px #00000014}.hx-accordion-body-wrapper{padding:1rem}:host:not(:last-child) .hx-accordion-container{box-shadow:inset 0 -1px #00000014}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { expanded: [{
type: Input
}], index: [{
type: Input
}], disabled: [{
type: Input
}], empty: [{
type: Input
}], headerClick: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmNvbnRhaW5lci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9oeC11aS9zcmMvbGliL2FjY29yZGlvbi9hY2NvcmRpb24uY29udGFpbmVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsT0FBTyxFQUNQLEtBQUssRUFDTCxLQUFLLEVBQ0wsVUFBVSxFQUNWLE9BQU8sRUFDUixNQUFNLHFCQUFxQixDQUFDO0FBQzdCLE9BQU8sRUFDTCxpQkFBaUIsRUFDakIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxFQUNQLE1BQU0sZUFBZSxDQUFDOzs7QUFFdkI7Ozs7O0dBS0c7QUFvREgsTUFBTSxPQUFPLDJCQUEyQjtJQU90QyxZQUFvQixtQkFBc0M7UUFBdEMsd0JBQW1CLEdBQW5CLG1CQUFtQixDQUFtQjtRQU5qRCxhQUFRLEdBQUcsSUFBSSxDQUFDO1FBQ2hCLFVBQUssR0FBVyxJQUFJLENBQUM7UUFDckIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixVQUFLLEdBQUcsSUFBSSxDQUFDO1FBQ1osZ0JBQVcsR0FBeUIsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQUVaLENBQUM7SUFFdkQsTUFBTTtRQUNYLElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxJQUFJLEVBQUU7WUFDdkIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ25DO1FBQ0QsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7UUFDL0IsSUFBSSxDQUFDLG1CQUFtQixDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzFDLENBQUM7O3lIQWZVLDJCQUEyQjs2R0FBM0IsMkJBQTJCLHdOQWpENUI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBZ0NULDY3QkFFVztRQUNWLE9BQU8sQ0FBQyxTQUFTLEVBQUU7WUFDakIsS0FBSyxDQUFDLEdBQUcsRUFBRSxLQUFLLENBQUMsRUFBRSxZQUFZLEVBQUUsUUFBUSxFQUFFLENBQUMsQ0FBQztZQUM3QyxLQUFLLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQyxFQUFFLFlBQVksRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDO1lBQ2hELFVBQVUsQ0FBQyxXQUFXLEVBQUU7Z0JBQ3RCLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQztnQkFDdEIsT0FBTyxDQUFDLGdCQUFnQixFQUFFLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7YUFDNUQsQ0FBQztZQUNGLFVBQVUsQ0FBQyxXQUFXLEVBQUU7Z0JBQ3RCLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQztnQkFDdEIsT0FBTyxDQUFDLGdCQUFnQixFQUFFLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7YUFDOUQsQ0FBQztTQUNILENBQUM7S0FDSDs0RkFFVSwyQkFBMkI7a0JBbkR2QyxTQUFTOytCQUNFLGlEQUFpRCxZQUNqRDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQ1QsY0FFVzt3QkFDVixPQUFPLENBQUMsU0FBUyxFQUFFOzRCQUNqQixLQUFLLENBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQyxFQUFFLFlBQVksRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDOzRCQUM3QyxLQUFLLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQyxFQUFFLFlBQVksRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDOzRCQUNoRCxVQUFVLENBQUMsV0FBVyxFQUFFO2dDQUN0QixLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLENBQUM7Z0NBQ3RCLE9BQU8sQ0FBQyxnQkFBZ0IsRUFBRSxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDOzZCQUM1RCxDQUFDOzRCQUNGLFVBQVUsQ0FBQyxXQUFXLEVBQUU7Z0NBQ3RCLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQztnQ0FDdEIsT0FBTyxDQUFDLGdCQUFnQixFQUFFLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7NkJBQzlELENBQUM7eUJBQ0gsQ0FBQztxQkFDSDt3R0FHUSxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDSSxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBhbmltYXRlLFxyXG4gIHN0YXRlLFxyXG4gIHN0eWxlLFxyXG4gIHRyYW5zaXRpb24sXHJcbiAgdHJpZ2dlclxyXG59IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xyXG5pbXBvcnQge1xyXG4gIENoYW5nZURldGVjdG9yUmVmLFxyXG4gIENvbXBvbmVudCxcclxuICBFdmVudEVtaXR0ZXIsXHJcbiAgSW5wdXQsXHJcbiAgT3V0cHV0XHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG4vKipcclxuICogVE9ETzogIUJSRUFLSU5HISBhbGlnbiBhY2NvcmRpb24gbWFya3VwIGZvciBhY2Nlc3NpYmlsaXR5LFxyXG4gKiBjb25zaWRlciB1c2luZyBhdHRyaWJ1dGUgc2VsZWN0b3JcclxuICogQHNlZSB7QGxpbmsgaHR0cHM6Ly93d3cudzMub3JnL1RSL3dhaS1hcmlhLXByYWN0aWNlcy8jYWNjb3JkaW9ufVxyXG4gKiBAc2VlIHtAbGluayBodHRwczovL21lZGl1bS5jb20vamF2YXNjcmlwdC1ldmVyeWRheS93aGVuLXRvLXVzZS1hbi1hdHRyaWJ1dGUtc2VsZWN0b3ItZm9yLWFuZ3VsYXItY29tcG9uZW50cy03ZTc4OGJhMWJmZTd9XHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2h4LWFjY29yZGlvbi1jb250YWluZXIsIGh4YS1hY2NvcmRpb24tY29udGFpbmVyJyxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPGxpXHJcbiAgICAgIGNsYXNzPVwiaHgtYWNjb3JkaW9uLWNvbnRhaW5lclwiXHJcbiAgICAgIFtjbGFzcy5pcy1hY3RpdmVdPVwiZXhwYW5kZWQgJiYgIWRpc2FibGVkXCJcclxuICAgID5cclxuICAgICAgPGFcclxuICAgICAgICBjbGFzcz1cImh4LWFjY29yZGlvbi1oZWFkZXJcIlxyXG4gICAgICAgIFtjbGFzcy5pcy1kaXNhYmxlZF09XCIhZW1wdHkgJiYgZGlzYWJsZWRcIlxyXG4gICAgICAgIChjbGljayk9XCJ0b2dnbGUoKVwiXHJcbiAgICAgID5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiaGVhZGVyLXRpdGxlXCI+XHJcbiAgICAgICAgICA8bmctY29udGVudFxyXG4gICAgICAgICAgICBzZWxlY3Q9XCJoeC1hY2NvcmRpb24taGVhZGVyLCBoeGEtYWNjb3JkaW9uLWhlYWRlclwiXHJcbiAgICAgICAgICA+PC9uZy1jb250ZW50PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJoZWFkZXItaWNvblwiICpuZ0lmPVwiZW1wdHlcIj5cclxuICAgICAgICAgIDxpIGNsYXNzPVwiaHgtaWNvbiBpY29uLWFuZ2xlLWRvd25cIiAqbmdJZj1cIiFleHBhbmRlZCB8fCBkaXNhYmxlZFwiPjwvaT5cclxuICAgICAgICAgIDxpIGNsYXNzPVwiaHgtaWNvbiBpY29uLWFuZ2xlLXVwXCIgKm5nSWY9XCJleHBhbmRlZCAmJiAhZGlzYWJsZWRcIj48L2k+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvYT5cclxuICAgICAgPGRpdlxyXG4gICAgICAgIGNsYXNzPVwiaHgtYWNjb3JkaW9uLWJvZHlcIlxyXG4gICAgICAgIFtAc2xpZGVJbl09XCJleHBhbmRlZCAmJiAhZGlzYWJsZWRcIlxyXG4gICAgICAgICpuZ0lmPVwiZXhwYW5kZWQgJiYgIWRpc2FibGVkXCJcclxuICAgICAgPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJoeC1hY2NvcmRpb24tYm9keS13cmFwcGVyXCI+XHJcbiAgICAgICAgICA8bmctY29udGVudFxyXG4gICAgICAgICAgICBzZWxlY3Q9XCJoeC1hY2NvcmRpb24tYm9keSwgaHhhLWFjY29yZGlvbi1ib2R5XCJcclxuICAgICAgICAgID48L25nLWNvbnRlbnQ+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgPC9saT5cclxuICBgLFxyXG4gIHN0eWxlVXJsczogWycuL2FjY29yZGlhbi5jb250YWluZXIuc2NzcyddLFxyXG4gIGFuaW1hdGlvbnM6IFtcclxuICAgIHRyaWdnZXIoJ3NsaWRlSW4nLCBbXHJcbiAgICAgIHN0YXRlKCcqJywgc3R5bGUoeyAnb3ZlcmZsb3cteSc6ICdoaWRkZW4nIH0pKSxcclxuICAgICAgc3RhdGUoJ3ZvaWQnLCBzdHlsZSh7ICdvdmVyZmxvdy15JzogJ2hpZGRlbicgfSkpLFxyXG4gICAgICB0cmFuc2l0aW9uKCcqID0+IHZvaWQnLCBbXHJcbiAgICAgICAgc3R5bGUoeyBoZWlnaHQ6ICcqJyB9KSxcclxuICAgICAgICBhbmltYXRlKCcwLjI1cyBlYXNlLW91dCcsIHN0eWxlKHsgaGVpZ2h0OiAwLCBvcGFjaXR5OiAwIH0pKVxyXG4gICAgICBdKSxcclxuICAgICAgdHJhbnNpdGlvbigndm9pZCA9PiAqJywgW1xyXG4gICAgICAgIHN0eWxlKHsgaGVpZ2h0OiAnMCcgfSksXHJcbiAgICAgICAgYW5pbWF0ZSgnMC4yNXMgZWFzZS1vdXQnLCBzdHlsZSh7IGhlaWdodDogJyonLCBvcGFjaXR5OiAxIH0pKVxyXG4gICAgICBdKVxyXG4gICAgXSlcclxuICBdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBBY2NvcmRpb25Db250YWluZXJDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIGV4cGFuZGVkID0gdHJ1ZTtcclxuICBASW5wdXQoKSBpbmRleDogbnVtYmVyID0gbnVsbDtcclxuICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGVtcHR5ID0gdHJ1ZTtcclxuICBAT3V0cHV0KCkgaGVhZGVyQ2xpY2s6IEV2ZW50RW1pdHRlcjxudW1iZXI+ID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgX2NoYW5nZURldGVjdGlvblJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XHJcblxyXG4gIHB1YmxpYyB0b2dnbGUoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5pbmRleCAhPT0gbnVsbCkge1xyXG4gICAgICB0aGlzLmhlYWRlckNsaWNrLmVtaXQodGhpcy5pbmRleCk7XHJcbiAgICB9XHJcbiAgICB0aGlzLmV4cGFuZGVkID0gIXRoaXMuZXhwYW5kZWQ7XHJcbiAgICB0aGlzLl9jaGFuZ2VEZXRlY3Rpb25SZWYubWFya0ZvckNoZWNrKCk7XHJcbiAgfVxyXG59XHJcbiJdfQ==