import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';

class CollapseLinkComponent {
    static nextIdSeed = 0;
    static _nextId = CollapseLinkComponent.nextIdSeed;
    static getNextId() {
        return this._nextId++;
    }
    buttonId = `s-collapse-button-${CollapseLinkComponent.getNextId()}`;
    expandedLabel = 'Mostrar menos';
    collapsedLabel = 'Mostrar mais';
    disabled = false;
    collapse = true;
    collapsed = true;
    animating = false;
    ngOnChanges(changes) {
        if (changes['collapse']) {
            this.onCollapse(changes['collapse'].currentValue);
        }
    }
    toggle() {
        if (this.animating) {
            return;
        }
        this.animating = true;
        this.collapsed = !this.collapsed;
    }
    onToggleDone() {
        this.animating = false;
    }
    onCollapse(collapse) {
        if (this.animating) {
            return;
        }
        this.animating = true;
        this.collapsed = collapse;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapseLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CollapseLinkComponent, selector: "s-collapse-link", inputs: { buttonId: "buttonId", expandedLabel: "expandedLabel", collapsedLabel: "collapsedLabel", disabled: "disabled", collapse: "collapse" }, usesOnChanges: true, ngImport: i0, template: "@if (!collapsed) {\n    <div\n        @collapseContent\n        (@collapseContent.done)=\"onToggleDone()\"\n    >\n        <ng-content></ng-content>\n    </div>\n}\n\n<button\n    [id]=\"buttonId\"\n    type=\"button\"\n    class=\"s-collapse-button\"\n    (click)=\"toggle()\"\n    [disabled]=\"disabled\"\n>\n    <span\n        class=\"s-button-icon fa\"\n        [ngClass]=\"{ 'fa-caret-down': collapsed, 'fa-caret-up': !collapsed }\"\n        aria-hidden=\"true\"\n    >\n    </span>\n    <span class=\"s-button-text\">{{\n        collapsed ? collapsedLabel : expandedLabel\n    }}</span>\n</button>\n", styles: ["button.s-collapse-button{align-items:center;cursor:pointer;font-family:Open Sans,sans-serif;font-size:14px;height:35px;max-width:100%;min-width:40px;outline:none;overflow:visible;padding:5px 20px;position:relative;text-decoration:none;text-transform:none;vertical-align:bottom;background-color:transparent;border-color:transparent}button.s-collapse-button:disabled{background-image:none;cursor:text;filter:Alpha(Opacity=50);opacity:.5}button.s-collapse-button:hover,button.s-collapse-button:focus{background-color:highlight(transparent);border-color:highlight(transparent)}button.s-collapse-button:active:not(:disabled),button.s-collapse-button.s-button-active:not(:disabled){background-color:active(transparent);border-color:active(transparent)}button.s-collapse-button .s-button-icon{left:10px;margin-top:-.5em;position:absolute;top:50%;width:20px}button.s-collapse-button .s-button-icon,button.s-collapse-button .s-button-text{color:#428bca}button.s-collapse-button .s-button-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;margin-left:10px;margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
            trigger('collapseContent', [
                state('void', style({
                    height: 0,
                    opacity: 0,
                })),
                state('*', style({
                    height: '*',
                    opacity: 1,
                })),
                transition('void <=> *', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
            ]),
        ] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapseLinkComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-collapse-link', animations: [
                        trigger('collapseContent', [
                            state('void', style({
                                height: 0,
                                opacity: 0,
                            })),
                            state('*', style({
                                height: '*',
                                opacity: 1,
                            })),
                            transition('void <=> *', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
                        ]),
                    ], template: "@if (!collapsed) {\n    <div\n        @collapseContent\n        (@collapseContent.done)=\"onToggleDone()\"\n    >\n        <ng-content></ng-content>\n    </div>\n}\n\n<button\n    [id]=\"buttonId\"\n    type=\"button\"\n    class=\"s-collapse-button\"\n    (click)=\"toggle()\"\n    [disabled]=\"disabled\"\n>\n    <span\n        class=\"s-button-icon fa\"\n        [ngClass]=\"{ 'fa-caret-down': collapsed, 'fa-caret-up': !collapsed }\"\n        aria-hidden=\"true\"\n    >\n    </span>\n    <span class=\"s-button-text\">{{\n        collapsed ? collapsedLabel : expandedLabel\n    }}</span>\n</button>\n", styles: ["button.s-collapse-button{align-items:center;cursor:pointer;font-family:Open Sans,sans-serif;font-size:14px;height:35px;max-width:100%;min-width:40px;outline:none;overflow:visible;padding:5px 20px;position:relative;text-decoration:none;text-transform:none;vertical-align:bottom;background-color:transparent;border-color:transparent}button.s-collapse-button:disabled{background-image:none;cursor:text;filter:Alpha(Opacity=50);opacity:.5}button.s-collapse-button:hover,button.s-collapse-button:focus{background-color:highlight(transparent);border-color:highlight(transparent)}button.s-collapse-button:active:not(:disabled),button.s-collapse-button.s-button-active:not(:disabled){background-color:active(transparent);border-color:active(transparent)}button.s-collapse-button .s-button-icon{left:10px;margin-top:-.5em;position:absolute;top:50%;width:20px}button.s-collapse-button .s-button-icon,button.s-collapse-button .s-button-text{color:#428bca}button.s-collapse-button .s-button-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;margin-left:10px;margin-right:10px}\n"] }]
        }], propDecorators: { buttonId: [{
                type: Input
            }], expandedLabel: [{
                type: Input
            }], collapsedLabel: [{
                type: Input
            }], disabled: [{
                type: Input
            }], collapse: [{
                type: Input
            }] } });

class CollapseLinkModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapseLinkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: CollapseLinkModule, declarations: [CollapseLinkComponent], imports: [CommonModule], exports: [CollapseLinkComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapseLinkModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapseLinkModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [CollapseLinkComponent],
                    exports: [CollapseLinkComponent],
                    imports: [CommonModule],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { CollapseLinkComponent, CollapseLinkModule };
//# sourceMappingURL=seniorsistemas-angular-components-collapse-link.mjs.map
