import { __decorate, __metadata } from "tslib";
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { EclBaseEvent } from '../../model/ecl-base.event';
import { coerceBoolean } from '@eui/base';
import { ECLBaseDirective } from '../ecl-base.directive';
import * as i0 from "@angular/core";
import * as i1 from "../ecl-icon/ecl-icon.component";
import * as i2 from "@angular/common";
import * as i3 from "@ngx-translate/core";
export class EclAccordionToggleEvent extends EclBaseEvent {
    constructor(isExpanded) {
        super();
        this.isExpanded = isExpanded;
    }
}
export class EclAccordionItemComponent extends ECLBaseDirective {
    constructor() {
        super(...arguments);
        this.toggle = new EventEmitter();
    }
    get cssClasses() {
        return [
            super.getCssClasses('ecl-accordion__item')
        ].join(' ').trim();
    }
    onItemClick(evt) {
        const nextExpandedState = !this.isExpanded;
        const event = new EclAccordionToggleEvent(nextExpandedState);
        this.toggle.next(event);
        if (!event.defaultPrevented) {
            this.isExpanded = nextExpandedState;
        }
    }
}
/** @nocollapse */ /** @nocollapse */ EclAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EclAccordionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ /** @nocollapse */ EclAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EclAccordionItemComponent, selector: "ecl-accordion-item", inputs: { label: "label", isExpanded: "isExpanded" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<h3 class=\"ecl-accordion__title\">\n    <button \n        type=\"button\" \n        (click)=\"onItemClick($event)\"\n        [attr.aria-expanded]=\"isExpanded\"\n        class=\"ecl-accordion__toggle\">\n        <span class=\"ecl-accordion__toggle-flex\">\n            <span class=\"ecl-accordion__toggle-indicator\">\n                <span class=\"ecl-accordion__toggle-label\">{{ 'ecl.common.OPEN' | translate }}</span>\n                <ecl-icon \n                    *ngIf=\"!isExpanded\" \n                    icon=\"plus\" \n                    size=\"m\" \n                    class=\"ecl-accordion__toggle-icon\" \n                    [attr.aria-hidden]=\"!isExpanded\">\n                </ecl-icon>\n                <ecl-icon \n                    *ngIf=\"isExpanded\" \n                    icon=\"minus\" \n                    size=\"m\" \n                    class=\"ecl-accordion__toggle-icon\" \n                    [attr.aria-hidden]=\"isExpanded\">\n                </ecl-icon>\n            </span>\n            <span class=\"ecl-accordion__toggle-title\">{{ label }}</span>\n        </span>\n    </button>\n</h3>\n<div class=\"ecl-accordion__content\" [hidden]=\"!isExpanded\" role=\"region\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"], components: [{ type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
__decorate([
    coerceBoolean,
    __metadata("design:type", Boolean)
], EclAccordionItemComponent.prototype, "isExpanded", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EclAccordionItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ecl-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, styles: [`
        :host { 
            display: block;
        }
    `], template: "<h3 class=\"ecl-accordion__title\">\n    <button \n        type=\"button\" \n        (click)=\"onItemClick($event)\"\n        [attr.aria-expanded]=\"isExpanded\"\n        class=\"ecl-accordion__toggle\">\n        <span class=\"ecl-accordion__toggle-flex\">\n            <span class=\"ecl-accordion__toggle-indicator\">\n                <span class=\"ecl-accordion__toggle-label\">{{ 'ecl.common.OPEN' | translate }}</span>\n                <ecl-icon \n                    *ngIf=\"!isExpanded\" \n                    icon=\"plus\" \n                    size=\"m\" \n                    class=\"ecl-accordion__toggle-icon\" \n                    [attr.aria-hidden]=\"!isExpanded\">\n                </ecl-icon>\n                <ecl-icon \n                    *ngIf=\"isExpanded\" \n                    icon=\"minus\" \n                    size=\"m\" \n                    class=\"ecl-accordion__toggle-icon\" \n                    [attr.aria-hidden]=\"isExpanded\">\n                </ecl-icon>\n            </span>\n            <span class=\"ecl-accordion__toggle-title\">{{ label }}</span>\n        </span>\n    </button>\n</h3>\n<div class=\"ecl-accordion__content\" [hidden]=\"!isExpanded\" role=\"region\">\n    <ng-content></ng-content>\n</div>\n" }]
        }], propDecorators: { label: [{
                type: Input
            }], isExpanded: [{
                type: Input
            }], toggle: [{
                type: Output
            }], cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });
//# sourceMappingURL=data:application/json;base64, 