import { __decorate, __metadata } from "tslib";
import { Component, Input, Output, EventEmitter, HostBinding } 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-button/ecl-button.component";
import * as i2 from "../ecl-icon/ecl-icon.component";
import * as i3 from "../ecl-button/ecl-button-label.directive";
import * as i4 from "@angular/common";
import * as i5 from "@ngx-translate/core";
export class EclExpandableToggleEvent extends EclBaseEvent {
    constructor(isExpanded) {
        super();
        this.isExpanded = isExpanded;
    }
}
export class EclExpandableComponent extends ECLBaseDirective {
    constructor() {
        super(...arguments);
        this.toggle = new EventEmitter();
    }
    get cssClasses() {
        return [
            super.getCssClasses('ecl-expandable')
        ].join(' ').trim();
    }
    ngOnInit() {
        if (!this.expandedLabel) {
            this.expandedLabel = this.collapsedLabel;
        }
    }
    onButtonClick() {
        const nextExpandedState = !this.isExpanded;
        const event = new EclExpandableToggleEvent(nextExpandedState);
        this.toggle.next(event);
        if (!event.defaultPrevented) {
            this.isExpanded = nextExpandedState;
        }
    }
}
/** @nocollapse */ /** @nocollapse */ EclExpandableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: EclExpandableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ /** @nocollapse */ EclExpandableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: EclExpandableComponent, selector: "ecl-expandable", inputs: { isExpanded: "isExpanded", collapsedLabel: "collapsedLabel", expandedLabel: "expandedLabel" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<button eclButton\n  variant=\"secondary\"\n  class=\"ecl-expandable__toggle\"\n  [attr.aria-expanded]=\"isExpanded\"\n  (click)=\"onButtonClick()\">\n    <span eclButtonLabel>\n      <ng-container *ngIf=\"!isExpanded\">\n        {{ collapsedLabel || 'ecl.common.EXPAND' | translate }}\n      </ng-container>\n      <ng-container *ngIf=\"isExpanded\">\n        {{ expandedLabel || 'ecl.common.COLLAPSE' | translate }}\n      </ng-container>\n    </span>\n    <ecl-icon icon=\"corner-arrow\" size=\"fluid\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<div class=\"ecl-expandable__content\" [hidden]=\"!isExpanded\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"], components: [{ type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], directives: [{ type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i5.TranslatePipe } });
__decorate([
    coerceBoolean,
    __metadata("design:type", Boolean)
], EclExpandableComponent.prototype, "isExpanded", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: EclExpandableComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ecl-expandable', styles: [`
        :host { 
            display: block;
        }
    `], template: "<button eclButton\n  variant=\"secondary\"\n  class=\"ecl-expandable__toggle\"\n  [attr.aria-expanded]=\"isExpanded\"\n  (click)=\"onButtonClick()\">\n    <span eclButtonLabel>\n      <ng-container *ngIf=\"!isExpanded\">\n        {{ collapsedLabel || 'ecl.common.EXPAND' | translate }}\n      </ng-container>\n      <ng-container *ngIf=\"isExpanded\">\n        {{ expandedLabel || 'ecl.common.COLLAPSE' | translate }}\n      </ng-container>\n    </span>\n    <ecl-icon icon=\"corner-arrow\" size=\"fluid\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<div class=\"ecl-expandable__content\" [hidden]=\"!isExpanded\">\n  <ng-content></ng-content>\n</div>" }]
        }], propDecorators: { isExpanded: [{
                type: Input
            }], collapsedLabel: [{
                type: Input
            }], expandedLabel: [{
                type: Input
            }], toggle: [{
                type: Output
            }], cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });
//# sourceMappingURL=data:application/json;base64, 