import { Component, HostListener, Input } from '@angular/core';
import { animate, style, transition, trigger } from '@angular/animations';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/evo-expanded.service";
import * as i2 from "../../evo-icon/evo-icon.component";
import * as i3 from "@angular/common";
export class EvoAccordionTitleComponent {
    constructor(expandedService) {
        this.expandedService = expandedService;
        this.isExpanded$ = this.expandedService.isExpandedChange$;
    }
    onClick() {
        this.expandedService.isExpanded = !this.expandedService.isExpanded;
    }
}
EvoAccordionTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoAccordionTitleComponent, deps: [{ token: i1.EvoExpandedService }], target: i0.ɵɵFactoryTarget.Component });
EvoAccordionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoAccordionTitleComponent, selector: "evo-accordion-title", inputs: { label: "label" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: "<ng-container *ngIf=\"label; else customContent\">\n    <div class=\"evo-accordion-title\">\n        <div class=\"evo-accordion-title__dot\"></div>\n        <h4 class=\"evo-accordion-title__label evo-title evo-title_h4\">{{label}}</h4>\n        <div *ngIf=\"{isExpanded: (isExpanded$ | async)} as asyncData\" class=\"evo-accordion-title__expander\">\n            <evo-icon\n                *ngIf=\"asyncData.isExpanded\"\n                shape=\"fold\"\n                @toggleBlock\n            ></evo-icon>\n            <evo-icon\n                *ngIf=\"!asyncData.isExpanded\"\n                shape=\"unfold\"\n                @toggleBlock\n            ></evo-icon>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #customContent>\n    <ng-content></ng-content>\n</ng-template>\n", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}.evo-accordion-title{display:flex;align-items:center;min-height:64px;color:#0986e2;transition:color .3s}.evo-accordion-title:hover{color:#3a9ee8}.evo-accordion-title:active{color:#0879cb}.evo-accordion-title__dot{flex:0 0 6px;width:6px;height:6px;margin-right:15px;margin-left:10px;background:#0986E2;border-radius:100%}.evo-accordion-title__expander{position:relative;display:flex;flex:0 0 24px;align-items:center;width:24px;height:24px;margin:16px 0 16px auto}.evo-accordion-title__expander evo-icon{position:absolute;transition:fill .3s,transform .3s;fill:currentColor}.evo-accordion-title__label{flex-grow:1;margin:16px 0;color:inherit;font-weight:700;font-size:18px}\n"], components: [{ type: i2.EvoIconComponent, selector: "evo-icon", inputs: ["shape", "svgWidth", "svgHeight", "svgViewBox"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, animations: [
        trigger('toggleBlock', [
            transition(':leave', [
                style({ opacity: 1 }),
                animate('.3s ease-in-out', style({
                    opacity: 0,
                })),
            ]),
            transition(':enter', [
                style({ opacity: 0 }),
                animate('.3s ease-in-out', style({
                    opacity: 1,
                })),
            ]),
        ]),
    ] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoAccordionTitleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'evo-accordion-title', animations: [
                        trigger('toggleBlock', [
                            transition(':leave', [
                                style({ opacity: 1 }),
                                animate('.3s ease-in-out', style({
                                    opacity: 0,
                                })),
                            ]),
                            transition(':enter', [
                                style({ opacity: 0 }),
                                animate('.3s ease-in-out', style({
                                    opacity: 1,
                                })),
                            ]),
                        ]),
                    ], template: "<ng-container *ngIf=\"label; else customContent\">\n    <div class=\"evo-accordion-title\">\n        <div class=\"evo-accordion-title__dot\"></div>\n        <h4 class=\"evo-accordion-title__label evo-title evo-title_h4\">{{label}}</h4>\n        <div *ngIf=\"{isExpanded: (isExpanded$ | async)} as asyncData\" class=\"evo-accordion-title__expander\">\n            <evo-icon\n                *ngIf=\"asyncData.isExpanded\"\n                shape=\"fold\"\n                @toggleBlock\n            ></evo-icon>\n            <evo-icon\n                *ngIf=\"!asyncData.isExpanded\"\n                shape=\"unfold\"\n                @toggleBlock\n            ></evo-icon>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #customContent>\n    <ng-content></ng-content>\n</ng-template>\n", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}.evo-accordion-title{display:flex;align-items:center;min-height:64px;color:#0986e2;transition:color .3s}.evo-accordion-title:hover{color:#3a9ee8}.evo-accordion-title:active{color:#0879cb}.evo-accordion-title__dot{flex:0 0 6px;width:6px;height:6px;margin-right:15px;margin-left:10px;background:#0986E2;border-radius:100%}.evo-accordion-title__expander{position:relative;display:flex;flex:0 0 24px;align-items:center;width:24px;height:24px;margin:16px 0 16px auto}.evo-accordion-title__expander evo-icon{position:absolute;transition:fill .3s,transform .3s;fill:currentColor}.evo-accordion-title__label{flex-grow:1;margin:16px 0;color:inherit;font-weight:700;font-size:18px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.EvoExpandedService }]; }, propDecorators: { label: [{
                type: Input
            }], onClick: [{
                type: HostListener,
                args: ['click']
            }] } });
//# sourceMappingURL=data:application/json;base64, 