import * as i0 from '@angular/core';
import { InjectionToken, input, forwardRef, Component, inject, Directive } from '@angular/core';
import { v7 } from 'uuid';
import { Ripple } from '@ngstarter-ui/components/core';

const RAIL_NAV = new InjectionToken('RAIL_NAV');

class RailNav {
    activeKey = input(...(ngDevMode ? [undefined, { debugName: "activeKey" }] : /* istanbul ignore next */ []));
    _activeKey;
    api = {
        activateItem: (key) => {
            this._activeKey = key;
        },
        getActiveKey: () => this._activeKey,
        isActive: (key) => key === this._activeKey,
    };
    ngOnInit() {
        this._activeKey = this.activeKey();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RailNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: RailNav, isStandalone: true, selector: "ngs-rail-nav", inputs: { activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-rail-nav" }, providers: [
            {
                provide: RAIL_NAV,
                useExisting: forwardRef(() => RailNav),
            }
        ], exportAs: ["ngsRailNav"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--ngs-rail-nav-bg: none;--ngs-rail-nav-bg-item-icon-is-active-bg: var(--ngs-nav-item-active-bg);--ngs-rail-nav-bg-item-icon-is-active-active-bg: var(--ngs-nav-item-active-bg);--ngs-rail-nav-bg-item-icon-hover-bg: var(--ngs-nav-item-hover-bg);--ngs-rail-nav-bg-item-icon-active-bg: var(--ngs-nav-item-hover-bg);--ngs-rail-nav-bg-item-icon-color: var(--ngs-nav-item-icon-color);--ngs-rail-nav-bg-item-icon-is-active-color: var(--ngs-nav-item-active-icon-color);--ngs-rail-nav-bg-item-active-color: var(--ngs-nav-item-active-color);--ngs-rail-nav-bg-item-color: var(--ngs-nav-item-color);--ngs-rail-nav-width: calc(var(--spacing, .25rem) * 24);--ngs-rail-nav-gap: var(--ngs-nav-items-gap);--ngs-rail-nav-padding: calc(var(--spacing, .25rem) * 0);--ngs-rail-nav-label-font-size: var(--ngs-font-size-xs);--ngs-rail-nav-item-gap: calc(var(--spacing, .25rem) * .5);--ngs-rail-nav-item-icon-padding: calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 4);--ngs-rail-nav-item-icon-radius: var(--ngs-radius-full);display:flex;flex-direction:column;gap:var(--ngs-rail-nav-gap);width:var(--ngs-rail-nav-width);background:var(--ngs-rail-nav-bg);padding:var(--ngs-rail-nav-padding)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RailNav, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-rail-nav', exportAs: 'ngsRailNav', imports: [], providers: [
                        {
                            provide: RAIL_NAV,
                            useExisting: forwardRef(() => RailNav),
                        }
                    ], host: {
                        'class': 'ngs-rail-nav'
                    }, template: "<ng-content/>\n", styles: [":host{--ngs-rail-nav-bg: none;--ngs-rail-nav-bg-item-icon-is-active-bg: var(--ngs-nav-item-active-bg);--ngs-rail-nav-bg-item-icon-is-active-active-bg: var(--ngs-nav-item-active-bg);--ngs-rail-nav-bg-item-icon-hover-bg: var(--ngs-nav-item-hover-bg);--ngs-rail-nav-bg-item-icon-active-bg: var(--ngs-nav-item-hover-bg);--ngs-rail-nav-bg-item-icon-color: var(--ngs-nav-item-icon-color);--ngs-rail-nav-bg-item-icon-is-active-color: var(--ngs-nav-item-active-icon-color);--ngs-rail-nav-bg-item-active-color: var(--ngs-nav-item-active-color);--ngs-rail-nav-bg-item-color: var(--ngs-nav-item-color);--ngs-rail-nav-width: calc(var(--spacing, .25rem) * 24);--ngs-rail-nav-gap: var(--ngs-nav-items-gap);--ngs-rail-nav-padding: calc(var(--spacing, .25rem) * 0);--ngs-rail-nav-label-font-size: var(--ngs-font-size-xs);--ngs-rail-nav-item-gap: calc(var(--spacing, .25rem) * .5);--ngs-rail-nav-item-icon-padding: calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 4);--ngs-rail-nav-item-icon-radius: var(--ngs-radius-full);display:flex;flex-direction:column;gap:var(--ngs-rail-nav-gap);width:var(--ngs-rail-nav-width);background:var(--ngs-rail-nav-bg);padding:var(--ngs-rail-nav-padding)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }] } });

class RailNavItem {
    _railNav = inject(RAIL_NAV);
    key = input(v7(), ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
    get isActive() {
        if (!this.key() || !this._railNav.api.getActiveKey()) {
            return false;
        }
        return this._railNav.api.isActive(this.key());
    }
    click(event) {
        if (!this.key()) {
            return;
        }
        this._railNav.api.activateItem(this.key());
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RailNavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: RailNavItem, isStandalone: true, selector: "ngs-rail-nav-item,[ngs-rail-nav-item]", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "click($event)" }, properties: { "class.is-active": "isActive" }, classAttribute: "ngs-rail-nav-item" }, exportAs: ["ngsRailNavItem"], ngImport: i0, template: "<div class=\"icon\" ngsRipple>\n  <ng-content select=\"[ngsRailNavItemIcon]\"/>\n</div>\n<div class=\"label\">\n  <ng-content/>\n</div>\n", styles: [":host{display:flex;flex:none;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;gap:var(--ngs-rail-nav-item-gap);color:var(--ngs-rail-nav-bg-item-color)}:host .icon{padding:var(--ngs-rail-nav-item-icon-padding);border-radius:var(--ngs-rail-nav-item-icon-radius);color:var(--ngs-rail-nav-bg-item-icon-color);display:flex;align-items:center;justify-content:center}:host .icon:empty{display:none}:host:hover .icon{background:var(--ngs-rail-nav-bg-item-icon-hover-bg)}:host:hover .icon ::ng-deep *{scale:1.025;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.25s}:host:active .icon{background:var(--ngs-rail-nav-bg-item-icon-active-bg)}:host.is-active{--ngs-icon-color: var(--ngs-rail-nav-bg-item-icon-is-active-color)}:host.is-active .icon{background:var(--ngs-rail-nav-bg-item-icon-is-active-bg)}:host.is-active{color:var(--ngs-rail-nav-bg-item-active-color)}:host.is-active:active .icon{background:var(--ngs-rail-nav-bg-item-icon-is-active-active-bg)}:host .label{font-size:var(--ngs-rail-nav-label-font-size)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RailNavItem, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-rail-nav-item,[ngs-rail-nav-item]', exportAs: 'ngsRailNavItem', imports: [
                        Ripple
                    ], host: {
                        'class': 'ngs-rail-nav-item',
                        '[class.is-active]': 'isActive',
                        '(click)': 'click($event)'
                    }, template: "<div class=\"icon\" ngsRipple>\n  <ng-content select=\"[ngsRailNavItemIcon]\"/>\n</div>\n<div class=\"label\">\n  <ng-content/>\n</div>\n", styles: [":host{display:flex;flex:none;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;gap:var(--ngs-rail-nav-item-gap);color:var(--ngs-rail-nav-bg-item-color)}:host .icon{padding:var(--ngs-rail-nav-item-icon-padding);border-radius:var(--ngs-rail-nav-item-icon-radius);color:var(--ngs-rail-nav-bg-item-icon-color);display:flex;align-items:center;justify-content:center}:host .icon:empty{display:none}:host:hover .icon{background:var(--ngs-rail-nav-bg-item-icon-hover-bg)}:host:hover .icon ::ng-deep *{scale:1.025;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.25s}:host:active .icon{background:var(--ngs-rail-nav-bg-item-icon-active-bg)}:host.is-active{--ngs-icon-color: var(--ngs-rail-nav-bg-item-icon-is-active-color)}:host.is-active .icon{background:var(--ngs-rail-nav-bg-item-icon-is-active-bg)}:host.is-active{color:var(--ngs-rail-nav-bg-item-active-color)}:host.is-active:active .icon{background:var(--ngs-rail-nav-bg-item-icon-is-active-active-bg)}:host .label{font-size:var(--ngs-rail-nav-label-font-size)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }] } });

class RailNavItemIconDirective {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RailNavItemIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: RailNavItemIconDirective, isStandalone: true, selector: "[ngsRailNavItemIcon]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RailNavItemIconDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsRailNavItemIcon]',
                    standalone: true
                }]
        }] });

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

export { RailNav, RailNavItem, RailNavItemIconDirective };
//# sourceMappingURL=ngstarter-ui-components-rail-nav.mjs.map
