import * as i0 from '@angular/core';
import { inject, ElementRef, input, booleanAttribute, output, effect, Component } from '@angular/core';

class Expand {
    _elementRef = inject(ElementRef);
    expanded = input(false, { ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
    expandLabel = input('Show more', ...(ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []));
    collapseLabel = input('Show less', ...(ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []));
    showButtonIfExpanded = input(false, { ...(ngDevMode ? { debugName: "showButtonIfExpanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    height = input('', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
    expandedChange = output();
    _expanded = false;
    constructor() {
        effect(() => {
            this._expanded = this.expanded();
            this._elementRef.nativeElement.style.setProperty('--ngs-expand-fade-color', this.color(), 'important');
            this._elementRef.nativeElement.style.setProperty('--ngs-expand-expanded-height', this.height(), 'important');
        });
    }
    get api() {
        return {
            expand: () => this._expand(),
            collapse: () => this._collapse(),
            toggle: () => this._toggle()
        };
    }
    _toggle() {
        this._expanded = !this._expanded;
        this.expandedChange.emit(this._expanded);
    }
    _expand() {
        this._expanded = true;
        this.expandedChange.emit(this._expanded);
    }
    _collapse() {
        this._expanded = false;
        this.expandedChange.emit(this._expanded);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Expand, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Expand, isStandalone: true, selector: "ngs-expand", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, showButtonIfExpanded: { classPropertyName: "showButtonIfExpanded", publicName: "showButtonIfExpanded", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class.is-expanded": "_expanded" }, classAttribute: "ngs-expand" }, exportAs: ["ngsExpand"], ngImport: i0, template: "<div class=\"content\">\n  <ng-content/>\n</div>\n\n@if (showButtonIfExpanded()) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    @if (!_expanded) {\n      {{ expandLabel() }}\n    } @else {\n      {{ collapseLabel() }}\n    }\n  </button>\n} @else if (!showButtonIfExpanded() && !_expanded) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    {{ expandLabel() }}\n  </button>\n}\n", styles: [":host{--ngs-expand-fade-color: var(--ngs-color-background);--ngs-expand-button-bg: var(--ngs-color-surface-container);--ngs-expand-button-hover-bg: var(--ngs-color-surface-container-high);--ngs-expand-button-color: var(--ngs-color-on-surface);--ngs-expand-button-font-size: var(--text-tiny);--ngs-expand-button-box-shadow: var(--ngs-shadow-md);--ngs-expand-button-border-radius: calc(infinity * 1px);--ngs-expand-button-padding: calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);--ngs-expand-button-hover-opacity: 90%;--ngs-expand-expanded-height: 300px;display:block;position:relative;max-height:var(--ngs-expand-expanded-height);overflow:hidden}:host .button{position:absolute;inset-inline-start:50%;bottom:calc(var(--spacing, .25rem) * 12);padding:var(--ngs-expand-button-padding);border-radius:var(--ngs-expand-button-border-radius);background:var(--ngs-expand-button-bg);display:flex;align-items:center;justify-content:center;z-index:2;transform:translate(-50%,50%);color:var(--ngs-expand-button-color);font-size:var(--ngs-expand-button-font-size);box-shadow:var(--ngs-expand-button-box-shadow)}:host .button:hover{cursor:pointer;opacity:var(--ngs-expand-button-hover-opacity);background:var(--ngs-expand-button-hover-bg)}:host .button:active{scale:.98}:host:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(transparent,var(--ngs-expand-fade-color));z-index:1}:host.is-expanded{max-height:max-content;overflow:auto}:host.is-expanded:after{display:none}:host.is-expanded .button{visibility:hidden}:host.is-expanded:hover .button{visibility:visible}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Expand, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-expand', exportAs: 'ngsExpand', host: {
                        'class': 'ngs-expand',
                        '[class.is-expanded]': '_expanded'
                    }, template: "<div class=\"content\">\n  <ng-content/>\n</div>\n\n@if (showButtonIfExpanded()) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    @if (!_expanded) {\n      {{ expandLabel() }}\n    } @else {\n      {{ collapseLabel() }}\n    }\n  </button>\n} @else if (!showButtonIfExpanded() && !_expanded) {\n  <button class=\"button\" (click)=\"api.toggle()\">\n    {{ expandLabel() }}\n  </button>\n}\n", styles: [":host{--ngs-expand-fade-color: var(--ngs-color-background);--ngs-expand-button-bg: var(--ngs-color-surface-container);--ngs-expand-button-hover-bg: var(--ngs-color-surface-container-high);--ngs-expand-button-color: var(--ngs-color-on-surface);--ngs-expand-button-font-size: var(--text-tiny);--ngs-expand-button-box-shadow: var(--ngs-shadow-md);--ngs-expand-button-border-radius: calc(infinity * 1px);--ngs-expand-button-padding: calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);--ngs-expand-button-hover-opacity: 90%;--ngs-expand-expanded-height: 300px;display:block;position:relative;max-height:var(--ngs-expand-expanded-height);overflow:hidden}:host .button{position:absolute;inset-inline-start:50%;bottom:calc(var(--spacing, .25rem) * 12);padding:var(--ngs-expand-button-padding);border-radius:var(--ngs-expand-button-border-radius);background:var(--ngs-expand-button-bg);display:flex;align-items:center;justify-content:center;z-index:2;transform:translate(-50%,50%);color:var(--ngs-expand-button-color);font-size:var(--ngs-expand-button-font-size);box-shadow:var(--ngs-expand-button-box-shadow)}:host .button:hover{cursor:pointer;opacity:var(--ngs-expand-button-hover-opacity);background:var(--ngs-expand-button-hover-bg)}:host .button:active{scale:.98}:host:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(transparent,var(--ngs-expand-fade-color));z-index:1}:host.is-expanded{max-height:max-content;overflow:auto}:host.is-expanded:after{display:none}:host.is-expanded .button{visibility:hidden}:host.is-expanded:hover .button{visibility:visible}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], showButtonIfExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonIfExpanded", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });

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

export { Expand };
//# sourceMappingURL=ngstarter-ui-components-expand.mjs.map
