@hxui/angular
Version:
* * *
72 lines • 9.07 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
import { Component, ChangeDetectorRef, Input } from "@angular/core";
import { state, style, transition, animate, trigger } from "@angular/animations";
export class AccordionContainerComponent {
/**
* @param {?} _changeDetectionRef
*/
constructor(_changeDetectionRef) {
this._changeDetectionRef = _changeDetectionRef;
this.expanded = true;
}
/**
* @return {?}
*/
toggle() {
this.expanded = !this.expanded;
this._changeDetectionRef.markForCheck();
}
}
AccordionContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'hx-accordion-container, hxa-accordion-container',
template: `
<li class="hx-accordion-container" [class.is-active]="expanded">
<a class="hx-accordion-header" (click)="toggle()">
<div class="header-title"><ng-content select="hx-accordion-header, hxa-accordion-header"></ng-content></div>
<div class="header-icon">
<i class="hx-icon icon-angle-down" *ngIf="!expanded"></i>
<i class="hx-icon icon-angle-up" *ngIf="expanded"></i>
</div>
</a>
<div class="hx-accordion-body" []="expanded" *ngIf="expanded">
<div class="hx-accordion-body-wrapper">
<ng-content select="hx-accordion-body, hxa-accordion-body"></ng-content>
</div>
</div>
</li>
`,
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),:host:not(:last-child) .hx-accordion-container{box-shadow:inset 0 -1px 0 0 rgba(0,0,0,.08)}.hx-accordion-container:not(.is-active) .hx-accordion-header:hover{background-color:rgba(0,0,0,.02);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 0 0 rgba(0,0,0,.08)}.hx-accordion-body-wrapper{padding:1rem}`],
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 }))
])
])
]
},] },
];
/** @nocollapse */
AccordionContainerComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
AccordionContainerComponent.propDecorators = {
expanded: [{ type: Input }]
};
if (false) {
/** @type {?} */
AccordionContainerComponent.prototype.expanded;
/** @type {?} */
AccordionContainerComponent.prototype._changeDetectionRef;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmNvbnRhaW5lci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AaHh1aS9hbmd1bGFyLyIsInNvdXJjZXMiOlsibGliL2FjY29yZGlvbi9hY2NvcmRpb24uY29udGFpbmVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDcEUsT0FBTyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQW9DakYsTUFBTSxPQUFPLDJCQUEyQjs7OztJQUdwQyxZQUFvQixtQkFBc0M7UUFBdEMsd0JBQW1CLEdBQW5CLG1CQUFtQixDQUFtQjtRQUZqRCxhQUFRLEdBQUcsSUFBSSxDQUFDO0lBRXFDLENBQUM7Ozs7SUFFeEQsTUFBTTtRQUNULElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDO1FBQy9CLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUM1QyxDQUFDOzs7WUExQ0osU0FBUyxTQUFDO2dCQUNQLFFBQVEsRUFBRSxpREFBaUQ7Z0JBQzNELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7O0NBZWI7Z0JBQ0csTUFBTSxFQUFFLENBQUMsMHlCQUEweUIsQ0FBQztnQkFDcHpCLFVBQVUsRUFBRTtvQkFDUixPQUFPLENBQUMsU0FBUyxFQUFFO3dCQUNmLEtBQUssQ0FBQyxHQUFHLEVBQUUsS0FBSyxDQUFDLEVBQUUsWUFBWSxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUM7d0JBQzdDLEtBQUssQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDLEVBQUUsWUFBWSxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUM7d0JBQ2hELFVBQVUsQ0FBQyxXQUFXLEVBQUU7NEJBQ3BCLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQzs0QkFDdEIsT0FBTyxDQUFDLGdCQUFnQixFQUFFLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7eUJBQzlELENBQUM7d0JBQ0YsVUFBVSxDQUFDLFdBQVcsRUFBRTs0QkFDcEIsS0FBSyxDQUFDLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDOzRCQUN0QixPQUFPLENBQUMsZ0JBQWdCLEVBQUUsS0FBSyxDQUFDLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQzt5QkFDaEUsQ0FBQztxQkFDTCxDQUFDO2lCQUNMO2FBQ0o7Ozs7WUFwQ21CLGlCQUFpQjs7O3VCQXNDaEMsS0FBSzs7OztJQUFOLCtDQUF5Qjs7SUFFYiwwREFBOEMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENoYW5nZURldGVjdG9yUmVmLCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcbmltcG9ydCB7IHN0YXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgYW5pbWF0ZSwgdHJpZ2dlciB9IGZyb20gXCJAYW5ndWxhci9hbmltYXRpb25zXCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnaHgtYWNjb3JkaW9uLWNvbnRhaW5lciwgaHhhLWFjY29yZGlvbi1jb250YWluZXInLFxyXG4gICAgdGVtcGxhdGU6IGAgICAgXHJcbiAgICA8bGkgY2xhc3M9XCJoeC1hY2NvcmRpb24tY29udGFpbmVyXCIgW2NsYXNzLmlzLWFjdGl2ZV09XCJleHBhbmRlZFwiPlxyXG4gICAgICAgIDxhIGNsYXNzPVwiaHgtYWNjb3JkaW9uLWhlYWRlclwiIChjbGljayk9XCJ0b2dnbGUoKVwiPlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiaGVhZGVyLXRpdGxlXCI+PG5nLWNvbnRlbnQgc2VsZWN0PVwiaHgtYWNjb3JkaW9uLWhlYWRlciwgaHhhLWFjY29yZGlvbi1oZWFkZXJcIj48L25nLWNvbnRlbnQ+PC9kaXY+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJoZWFkZXItaWNvblwiPlxyXG4gICAgICAgICAgICAgICAgPGkgY2xhc3M9XCJoeC1pY29uIGljb24tYW5nbGUtZG93blwiICpuZ0lmPVwiIWV4cGFuZGVkXCI+PC9pPlxyXG4gICAgICAgICAgICAgICAgPGkgY2xhc3M9XCJoeC1pY29uIGljb24tYW5nbGUtdXBcIiAqbmdJZj1cImV4cGFuZGVkXCI+PC9pPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2E+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImh4LWFjY29yZGlvbi1ib2R5XCIgW0BzbGlkZUluXT1cImV4cGFuZGVkXCIgKm5nSWY9XCJleHBhbmRlZFwiPlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiaHgtYWNjb3JkaW9uLWJvZHktd3JhcHBlclwiPlxyXG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiaHgtYWNjb3JkaW9uLWJvZHksIGh4YS1hY2NvcmRpb24tYm9keVwiPjwvbmctY29udGVudD5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2xpPlxyXG5gLFxyXG4gICAgc3R5bGVzOiBbYC5oeC1hY2NvcmRpb257bGlzdC1zdHlsZTpub25lO2JhY2tncm91bmQtY29sb3I6I2ZmZjtib3JkZXI6MXB4IHNvbGlkIHJnYmEoMCwwLDAsLjA4KTtwYWRkaW5nOjB9Lmh4LWFjY29yZGlvbi1jb250YWluZXJ7bWFyZ2luLXRvcDowfS5oeC1hY2NvcmRpb24tY29udGFpbmVyOm5vdCg6bGFzdC1jaGlsZCksOmhvc3Q6bm90KDpsYXN0LWNoaWxkKSAuaHgtYWNjb3JkaW9uLWNvbnRhaW5lcntib3gtc2hhZG93Omluc2V0IDAgLTFweCAwIDAgcmdiYSgwLDAsMCwuMDgpfS5oeC1hY2NvcmRpb24tY29udGFpbmVyOm5vdCguaXMtYWN0aXZlKSAuaHgtYWNjb3JkaW9uLWhlYWRlcjpob3ZlcntiYWNrZ3JvdW5kLWNvbG9yOnJnYmEoMCwwLDAsLjAyKTt0ZXh0LWRlY29yYXRpb246bm9uZTtjb2xvcjojNDFiOTg3fS5oeC1hY2NvcmRpb24taGVhZGVye2NvbG9yOiMyYTJjMmQ7cGFkZGluZzoxcmVtO2Rpc3BsYXk6ZmxleDthbGlnbi1pdGVtczpjZW50ZXI7anVzdGlmeS1jb250ZW50OnNwYWNlLWJldHdlZW47dHJhbnNpdGlvbjouM3N9Lmh4LWFjY29yZGlvbi1oZWFkZXI6aG92ZXJ7Y29sb3I6IzJhMmMyZDt0ZXh0LWRlY29yYXRpb246bm9uZX0uaHgtYWNjb3JkaW9uLWhlYWRlciAuaGVhZGVyLWljb257dHJhbnNpdGlvbjouM3M7ZGlzcGxheTpmbGV4fS5oeC1hY2NvcmRpb24tYm9keXtvdmVyZmxvdy15OmhpZGRlbjtiYWNrZ3JvdW5kLWNvbG9yOiNmYWZhZmE7dHJhbnNpdGlvbjouNXM7Ym94LXNoYWRvdzppbnNldCAwIDFweCAwIDAgcmdiYSgwLDAsMCwuMDgpfS5oeC1hY2NvcmRpb24tYm9keS13cmFwcGVye3BhZGRpbmc6MXJlbX1gXSxcclxuICAgIGFuaW1hdGlvbnM6IFtcclxuICAgICAgICB0cmlnZ2VyKCdzbGlkZUluJywgW1xyXG4gICAgICAgICAgICBzdGF0ZSgnKicsIHN0eWxlKHsgJ292ZXJmbG93LXknOiAnaGlkZGVuJyB9KSksXHJcbiAgICAgICAgICAgIHN0YXRlKCd2b2lkJywgc3R5bGUoeyAnb3ZlcmZsb3cteSc6ICdoaWRkZW4nIH0pKSxcclxuICAgICAgICAgICAgdHJhbnNpdGlvbignKiA9PiB2b2lkJywgW1xyXG4gICAgICAgICAgICAgICAgc3R5bGUoeyBoZWlnaHQ6ICcqJyB9KSxcclxuICAgICAgICAgICAgICAgIGFuaW1hdGUoJzAuMjVzIGVhc2Utb3V0Jywgc3R5bGUoeyBoZWlnaHQ6IDAsIG9wYWNpdHk6IDAgfSkpXHJcbiAgICAgICAgICAgIF0pLFxyXG4gICAgICAgICAgICB0cmFuc2l0aW9uKCd2b2lkID0+IConLCBbXHJcbiAgICAgICAgICAgICAgICBzdHlsZSh7IGhlaWdodDogJzAnIH0pLFxyXG4gICAgICAgICAgICAgICAgYW5pbWF0ZSgnMC4yNXMgZWFzZS1vdXQnLCBzdHlsZSh7IGhlaWdodDogJyonLCBvcGFjaXR5OiAxIH0pKVxyXG4gICAgICAgICAgICBdKVxyXG4gICAgICAgIF0pXHJcbiAgICBdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBBY2NvcmRpb25Db250YWluZXJDb21wb25lbnQge1xyXG4gICAgQElucHV0KCkgZXhwYW5kZWQgPSB0cnVlO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgX2NoYW5nZURldGVjdGlvblJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHsgfVxyXG5cclxuICAgIHB1YmxpYyB0b2dnbGUoKTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5leHBhbmRlZCA9ICF0aGlzLmV4cGFuZGVkO1xyXG4gICAgICAgIHRoaXMuX2NoYW5nZURldGVjdGlvblJlZi5tYXJrRm9yQ2hlY2soKTtcclxuICAgIH1cclxufVxyXG4iXX0=