import * as i0 from '@angular/core';
import { inject, TemplateRef, Directive, InjectionToken, ElementRef, contentChild, computed, input, booleanAttribute, ChangeDetectionStrategy, Component, Renderer2, DestroyRef, contentChildren, output, afterNextRender, forwardRef, signal } from '@angular/core';
import { NgTemplateOutlet, Location } from '@angular/common';
import * as i1 from '@ngstarter-ui/components/core';
import { Ripple } from '@ngstarter-ui/components/core';
import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';
import { Router, NavigationEnd } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

class NavigationItemIconDirective {
    templateRef = inject(TemplateRef, { optional: true });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationItemIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: NavigationItemIconDirective, isStandalone: true, selector: "[ngsNavigationItemIcon]", host: { classAttribute: "ngs-navigation-item-icon" }, exportAs: ["ngsNavigationItemIcon"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationItemIconDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsNavigationItemIcon]',
                    exportAs: 'ngsNavigationItemIcon',
                    host: {
                        'class': 'ngs-navigation-item-icon'
                    }
                }]
        }] });

const NAVIGATION = new InjectionToken('NAVIGATION');
const NAVIGATION_GROUP = new InjectionToken('NAVIGATION_GROUP');

const initialState = {
    activeKey: null,
    activeGroupKey: null
};
const NavigationStore = signalStore(withState(initialState), withMethods((store) => ({
    setActiveKey(activeKey) {
        patchState(store, {
            activeKey
        });
    },
    setActiveGroupKey(activeGroupKey) {
        patchState(store, {
            activeGroupKey
        });
    },
})));

let nextKey = 0;
class NavigationItem {
    store = inject(NavigationStore);
    _navigation = inject(NAVIGATION);
    _elementRef = inject(ElementRef);
    parentGroup = inject(NAVIGATION_GROUP, { optional: true });
    iconRef = contentChild(NavigationItemIconDirective, ...(ngDevMode ? [{ debugName: "iconRef" }] : /* istanbul ignore next */ []));
    active = computed(() => {
        return this.store.activeKey() === this.key();
    }, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
    get api() {
        return {
            isActive: () => this.active()
        };
    }
    key = input(`ngs-navigation-item-${nextKey++}`, ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
    forceActive = input(false, { ...(ngDevMode ? { debugName: "forceActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    badgeTextOnly = input(false, { ...(ngDevMode ? { debugName: "badgeTextOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    click(event) {
        if (!this.key()) {
            return;
        }
        this._navigation.itemClicked.emit(this.key());
        this.store.setActiveKey(this.key());
        if (this.parentGroup) {
            this.store.setActiveGroupKey(this.parentGroup.key());
        }
        else {
            this.store.setActiveGroupKey(null);
        }
    }
    get _hostElement() {
        return this._elementRef;
    }
    get iconRefTemplate() {
        return this.iconRef()?.templateRef;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: NavigationItem, isStandalone: true, selector: "ngs-navigation-item,[ngs-navigation-item]", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, forceActive: { classPropertyName: "forceActive", publicName: "forceActive", isSignal: true, isRequired: false, transformFunction: null }, badgeTextOnly: { classPropertyName: "badgeTextOnly", publicName: "badgeTextOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "click($event)" }, properties: { "class.is-active": "forceActive() || active()", "class.is-badge-text-only": "badgeTextOnly()" }, classAttribute: "ngs-navigation-item" }, queries: [{ propertyName: "iconRef", first: true, predicate: NavigationItemIconDirective, descendants: true, isSignal: true }], exportAs: ["ngsNavigationItem"], ngImport: i0, template: "<div class=\"inner\" ngsRipple>\n  <div class=\"icon\">\n    <ng-content select=\"[ngsNavigationItemIcon]\"/>\n    @if (iconRef()) {\n      <ng-container [ngTemplateOutlet]=\"iconRefTemplate\"/>\n    }\n  </div>\n  <span class=\"text grow\"><ng-content/></span>\n  <div class=\"badge\">\n    <ng-content select=\"[ngsNavigationItemBadge]\"/>\n  </div>\n</div>\n", styles: [":host{display:block;text-decoration:none;position:relative}:host .inner{display:flex;align-items:center;min-width:0;white-space:nowrap;flex:none;cursor:pointer;-webkit-user-select:none;user-select:none;margin:0;width:var(--ngs-navigation-item-width);background:var(--ngs-navigation-item-bg);min-height:var(--ngs-navigation-item-height);padding:var(--ngs-navigation-item-padding);font-size:var(--ngs-navigation-item-font-size);border-radius:var(--ngs-navigation-item-border-radius);font-weight:var(--ngs-navigation-item-font-weight);color:var(--ngs-navigation-item-color);gap:var(--ngs-navigation-item-gap)}:host:hover{text-decoration:none}:host:hover .inner{transition:background-color .2s;background:var(--ngs-navigation-item-hover-bg);color:var(--ngs-navigation-item-hover-color)}:host .text{overflow:hidden;text-overflow:ellipsis}:host .badge:empty{display:none}:host .badge{display:inline-flex;flex:none;border-radius:calc(infinity * 1px);height:var(--ngs-nav-badge-size);min-width:var(--ngs-nav-badge-size);align-items:center;justify-content:center;font-size:var(--ngs-font-size-xs);padding:var(--ngs-nav-badge-padding);font-weight:700}:host:not(.is-badge-text-only) .badge{font-weight:600;font-size:var(--ngs-font-size-xs);background:var(--ngs-color-primary);color:var(--ngs-color-on-primary)}:host .icon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--ngs-navigation-item-icon-width);color:var(--ngs-navigation-item-icon-color)}:host .icon:empty{display:none}:host.is-active .inner,:host.is-active:hover .inner{background:var(--ngs-navigation-item-active-bg);color:var(--ngs-navigation-item-active-color)}:host:not(.is-active):hover{text-decoration:none}:host:not(.is-active):hover .icon{color:var(--ngs-navigation-item-hover-icon-color)}:host.is-active .icon{color:var(--ngs-navigation-item-active-icon-color)}:host-context(.ngs-navigation-group-menu) .inner{margin:var(--ngs-navigation-nested-item-margin);width:calc(var(--ngs-navigation-item-width) - var(--ngs-navigation-nested-item-margin));background:var(--ngs-navigation-nested-item-bg);min-height:var(--ngs-navigation-nested-item-height);padding:var(--ngs-navigation-nested-item-padding);color:var(--ngs-navigation-nested-item-color)}:host-context(.ngs-navigation-group-menu):hover .inner{background:var(--ngs-navigation-nested-item-hover-bg);color:var(--ngs-navigation-nested-item-hover-color)}:host-context(.ngs-navigation-group-menu).is-active .inner,:host-context(.ngs-navigation-group-menu).is-active:hover .inner{background:var(--ngs-navigation-nested-item-active-bg);color:var(--ngs-navigation-nested-item-active-color)}:host-context(.ngs-navigation-group-menu):not(:last-child):before{content:\"\";position:absolute;top:0;left:20px;bottom:-10px;width:1px;background:var(--ngs-navigation-group-tree-lines-color);z-index:0}:host-context(.ngs-navigation-group-menu):after{content:\"\";position:absolute;top:0;left:20px;width:calc(var(--ngs-navigation-nested-item-height) / 1.5);height:calc(var(--ngs-navigation-nested-item-height) / 2);border-bottom-left-radius:calc(var(--ngs-navigation-nested-item-height) / 4);border-left:1px solid var(--ngs-navigation-group-tree-lines-color);border-bottom:1px solid var(--ngs-navigation-group-tree-lines-color)}\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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationItem, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-navigation-item,[ngs-navigation-item]', exportAs: 'ngsNavigationItem', imports: [
                        Ripple,
                        NgTemplateOutlet
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-navigation-item',
                        '[class.is-active]': 'forceActive() || active()',
                        '[class.is-badge-text-only]': 'badgeTextOnly()',
                        '(click)': 'click($event)'
                    }, template: "<div class=\"inner\" ngsRipple>\n  <div class=\"icon\">\n    <ng-content select=\"[ngsNavigationItemIcon]\"/>\n    @if (iconRef()) {\n      <ng-container [ngTemplateOutlet]=\"iconRefTemplate\"/>\n    }\n  </div>\n  <span class=\"text grow\"><ng-content/></span>\n  <div class=\"badge\">\n    <ng-content select=\"[ngsNavigationItemBadge]\"/>\n  </div>\n</div>\n", styles: [":host{display:block;text-decoration:none;position:relative}:host .inner{display:flex;align-items:center;min-width:0;white-space:nowrap;flex:none;cursor:pointer;-webkit-user-select:none;user-select:none;margin:0;width:var(--ngs-navigation-item-width);background:var(--ngs-navigation-item-bg);min-height:var(--ngs-navigation-item-height);padding:var(--ngs-navigation-item-padding);font-size:var(--ngs-navigation-item-font-size);border-radius:var(--ngs-navigation-item-border-radius);font-weight:var(--ngs-navigation-item-font-weight);color:var(--ngs-navigation-item-color);gap:var(--ngs-navigation-item-gap)}:host:hover{text-decoration:none}:host:hover .inner{transition:background-color .2s;background:var(--ngs-navigation-item-hover-bg);color:var(--ngs-navigation-item-hover-color)}:host .text{overflow:hidden;text-overflow:ellipsis}:host .badge:empty{display:none}:host .badge{display:inline-flex;flex:none;border-radius:calc(infinity * 1px);height:var(--ngs-nav-badge-size);min-width:var(--ngs-nav-badge-size);align-items:center;justify-content:center;font-size:var(--ngs-font-size-xs);padding:var(--ngs-nav-badge-padding);font-weight:700}:host:not(.is-badge-text-only) .badge{font-weight:600;font-size:var(--ngs-font-size-xs);background:var(--ngs-color-primary);color:var(--ngs-color-on-primary)}:host .icon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--ngs-navigation-item-icon-width);color:var(--ngs-navigation-item-icon-color)}:host .icon:empty{display:none}:host.is-active .inner,:host.is-active:hover .inner{background:var(--ngs-navigation-item-active-bg);color:var(--ngs-navigation-item-active-color)}:host:not(.is-active):hover{text-decoration:none}:host:not(.is-active):hover .icon{color:var(--ngs-navigation-item-hover-icon-color)}:host.is-active .icon{color:var(--ngs-navigation-item-active-icon-color)}:host-context(.ngs-navigation-group-menu) .inner{margin:var(--ngs-navigation-nested-item-margin);width:calc(var(--ngs-navigation-item-width) - var(--ngs-navigation-nested-item-margin));background:var(--ngs-navigation-nested-item-bg);min-height:var(--ngs-navigation-nested-item-height);padding:var(--ngs-navigation-nested-item-padding);color:var(--ngs-navigation-nested-item-color)}:host-context(.ngs-navigation-group-menu):hover .inner{background:var(--ngs-navigation-nested-item-hover-bg);color:var(--ngs-navigation-nested-item-hover-color)}:host-context(.ngs-navigation-group-menu).is-active .inner,:host-context(.ngs-navigation-group-menu).is-active:hover .inner{background:var(--ngs-navigation-nested-item-active-bg);color:var(--ngs-navigation-nested-item-active-color)}:host-context(.ngs-navigation-group-menu):not(:last-child):before{content:\"\";position:absolute;top:0;left:20px;bottom:-10px;width:1px;background:var(--ngs-navigation-group-tree-lines-color);z-index:0}:host-context(.ngs-navigation-group-menu):after{content:\"\";position:absolute;top:0;left:20px;width:calc(var(--ngs-navigation-nested-item-height) / 1.5);height:calc(var(--ngs-navigation-nested-item-height) / 2);border-bottom-left-radius:calc(var(--ngs-navigation-nested-item-height) / 4);border-left:1px solid var(--ngs-navigation-group-tree-lines-color);border-bottom:1px solid var(--ngs-navigation-group-tree-lines-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { iconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationItemIconDirective), { isSignal: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], forceActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceActive", required: false }] }], badgeTextOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeTextOnly", required: false }] }] } });

class NavigationItemDefDirective {
    template;
    when = input(undefined, { ...(ngDevMode ? { debugName: "when" } : /* istanbul ignore next */ {}), alias: 'ngsNavigationItemDef' });
    constructor(template) {
        this.template = template;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationItemDefDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: NavigationItemDefDirective, isStandalone: true, selector: "[ngsNavigationItemDef]", inputs: { when: { classPropertyName: "when", publicName: "ngsNavigationItemDef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationItemDefDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsNavigationItemDef]',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { when: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsNavigationItemDef", required: false }] }] } });

class Navigation {
    store = inject(NavigationStore);
    _elementRef = inject(ElementRef);
    _renderer = inject(Renderer2);
    location = inject(Location);
    router = inject(Router);
    destroyRef = inject(DestroyRef);
    _items = contentChildren(NavigationItem, { ...(ngDevMode ? { debugName: "_items" } : /* istanbul ignore next */ {}), descendants: true });
    _defs = contentChildren(NavigationItemDefDirective, ...(ngDevMode ? [{ debugName: "_defs" }] : /* istanbul ignore next */ []));
    activeKey = input(...(ngDevMode ? [undefined, { debugName: "activeKey" }] : /* istanbul ignore next */ []));
    dataSource = input(...(ngDevMode ? [undefined, { debugName: "dataSource" }] : /* istanbul ignore next */ []));
    itemTypeProperty = input('type', ...(ngDevMode ? [{ debugName: "itemTypeProperty" }] : /* istanbul ignore next */ []));
    appearance = input(...(ngDevMode ? [undefined, { debugName: "appearance" }] : /* istanbul ignore next */ []));
    activateByRoute = input(false, { ...(ngDevMode ? { debugName: "activateByRoute" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    autoScrollToActiveItem = input(false, { ...(ngDevMode ? { debugName: "autoScrollToActiveItem" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    itemClicked = output();
    constructor() {
        // scroll to the active item if it is not visible in the viewport
        afterNextRender(() => {
            if (!this.autoScrollToActiveItem()) {
                return;
            }
            this._items().forEach((item) => {
                if (item.active()) {
                    let parentElement = this._elementRef.nativeElement.parentNode || null;
                    const itemElement = item._hostElement.nativeElement;
                    while (parentElement !== null) {
                        if (this._hasScroll(parentElement)) {
                            if (!this._isScrolledIntoView(itemElement, parentElement)) {
                                const parentRect = parentElement.getBoundingClientRect();
                                const elementRect = itemElement.getBoundingClientRect();
                                parentElement.scrollTop = elementRect.top - parentRect.height / 2;
                            }
                            parentElement = null;
                        }
                        else {
                            parentElement = parentElement.parentNode || null;
                        }
                    }
                }
            });
        });
    }
    ngAfterContentInit() {
        if (!this.activateByRoute()) {
            return;
        }
        this.findActiveItemByRoute();
        this.router
            .events
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe((event) => {
            if (event instanceof NavigationEnd) {
                this.findActiveItemByRoute();
            }
        });
    }
    ngOnChanges(changes) {
        if (changes['activeKey']) {
            this.store.setActiveKey(changes['activeKey'].currentValue);
        }
        if (changes['appearance']) {
            this._renderer.setAttribute(this._elementRef.nativeElement, 'data-appearance', changes['appearance'].currentValue);
        }
    }
    _hasScroll(element) {
        if (!element.getBoundingClientRect) {
            return false;
        }
        return Math.ceil(element.scrollHeight) > Math.ceil(element.getBoundingClientRect().height);
    }
    _isScrolledIntoView(element, parent) {
        const elementRect = element.getBoundingClientRect();
        const parentRect = parent.getBoundingClientRect();
        return (elementRect.top >= 0) && (elementRect.bottom <= parentRect.height);
    }
    findActiveItemByRoute() {
        const activeItem = this._items().find((item) => {
            const element = item._hostElement.nativeElement;
            if (element.tagName === 'A') {
                const href = element.getAttribute('href');
                if (href) {
                    if (href === this.location.path()) {
                        return true;
                    }
                    return href !== '/' && this.location.path().includes(href);
                }
            }
            return null;
        });
        if (activeItem) {
            this.store.setActiveKey(activeItem.key());
        }
    }
    getTemplate(item) {
        const def = this._defs().find(d => {
            const when = d.when();
            if (when) {
                if (typeof when === 'function') {
                    return when(item);
                }
                return item[this.itemTypeProperty()] === when;
            }
            return false;
        }) || this._defs().find(d => !d.when());
        return def?.template || null;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Navigation, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Navigation, isStandalone: true, selector: "ngs-navigation", inputs: { activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, itemTypeProperty: { classPropertyName: "itemTypeProperty", publicName: "itemTypeProperty", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, activateByRoute: { classPropertyName: "activateByRoute", publicName: "activateByRoute", isSignal: true, isRequired: false, transformFunction: null }, autoScrollToActiveItem: { classPropertyName: "autoScrollToActiveItem", publicName: "autoScrollToActiveItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "ngs-navigation" }, providers: [
            NavigationStore,
            {
                provide: NAVIGATION,
                useExisting: forwardRef(() => Navigation),
            }
        ], queries: [{ propertyName: "_items", predicate: NavigationItem, descendants: true, isSignal: true }, { propertyName: "_defs", predicate: NavigationItemDefDirective, isSignal: true }], exportAs: ["ngsNavigation"], usesOnChanges: true, ngImport: i0, template: "@if (dataSource(); as data) {\n  @for (item of data; track item) {\n    <ng-container *ngTemplateOutlet=\"getTemplate(item); context: { $implicit: item }\" />\n  }\n} @else {\n  <ng-content/>\n}\n", styles: [":host{--ngs-navigation-bg: inherit;--ngs-navigation-items-gap: var(--ngs-nav-items-gap);--ngs-navigation-item-width: var(--ngs-nav-item-width);--ngs-navigation-item-bg: transparent;--ngs-navigation-item-height: var(--ngs-nav-item-height);--ngs-navigation-item-padding: var(--ngs-nav-item-padding);--ngs-navigation-item-font-size: var(--ngs-nav-item-font-size);--ngs-navigation-item-border-radius: var(--ngs-nav-item-radius);--ngs-navigation-item-border-width: var(--ngs-nav-item-border-width);--ngs-navigation-item-border-color: var(--ngs-nav-item-border-color);--ngs-navigation-item-font-weight: var(--ngs-nav-item-font-weight);--ngs-navigation-item-color: var(--ngs-nav-item-color);--ngs-navigation-item-hover-bg: var(--ngs-nav-item-hover-bg);--ngs-navigation-item-active-bg: var(--ngs-nav-item-active-bg);--ngs-navigation-item-hover-color: var(--ngs-nav-item-hover-color);--ngs-navigation-item-active-color: var(--ngs-nav-item-active-color);--ngs-navigation-item-icon-color: var(--ngs-nav-item-icon-color);--ngs-navigation-item-icon-width: var(--ngs-nav-item-icon-width);--ngs-navigation-item-hover-icon-color: var(--ngs-nav-item-hover-icon-color);--ngs-navigation-item-active-icon-color: var(--ngs-nav-item-active-icon-color);--ngs-navigation-item-icon-size: var(--ngs-nav-item-icon-size);--ngs-navigation-item-gap: var(--ngs-nav-item-gap);--ngs-navigation-item-has-icon-padding-start: var(--ngs-nav-item-gap);--ngs-navigation-heading-color: var(--ngs-color-on-surface-variant);--ngs-navigation-heading-font-size: var(--ngs-nav-heading-font-size);--ngs-navigation-heading-font-weight: var(--ngs-nav-heading-font-weight);--ngs-navigation-heading-padding: var(--ngs-nav-heading-padding);--ngs-navigation-heading-margin-bottom: var(--ngs-nav-heading-margin-bottom);--ngs-navigation-heading-after-margin: var(--ngs-nav-heading-after-margin);--ngs-navigation-heading-text-transform: var(--ngs-nav-heading-text-transform);--ngs-navigation-divider-height: var(--ngs-nav-divider-height);--ngs-navigation-divider-bg: var(--ngs-color-subtle);--ngs-navigation-divider-margin: var(--ngs-nav-divider-margin);--ngs-navigation-group-toggle-has-icon-padding-end: var(--ngs-nav-group-toggle-padding-end);--ngs-navigation-group-toggle-icon-color: var(--ngs-color-on-surface-variant);--ngs-navigation-group-toggle-icon-position-end: var(--ngs-nav-group-toggle-icon-position-end);--ngs-navigation-group-toggle-icon-size: var(--ngs-nav-group-toggle-icon-size);--ngs-navigation-group-menu-padding-start: 0;--ngs-navigation-group-toggle-bg: transparent;--ngs-navigation-group-toggle-active-bg: var(--ngs-nav-item-active-bg);--ngs-navigation-group-toggle-active-color: var(--ngs-nav-item-active-color);--ngs-navigation-nested-item-bg: transparent;--ngs-navigation-nested-item-height: var(--ngs-nav-nested-item-height);--ngs-navigation-nested-item-padding: var(--ngs-nav-nested-item-padding);--ngs-navigation-nested-item-margin: var(--ngs-nav-nested-item-margin);--ngs-navigation-nested-item-border-radius: var(--ngs-nav-nested-item-border-radius);--ngs-navigation-nested-item-color: var(--ngs-nav-item-color);--ngs-navigation-nested-item-hover-bg: var(--ngs-nav-item-hover-bg);--ngs-navigation-nested-item-active-bg: var(--ngs-nav-item-active-bg);--ngs-navigation-nested-item-hover-color: var(--ngs-nav-item-hover-color);--ngs-navigation-nested-item-active-color: var(--ngs-nav-item-active-color);--ngs-navigation-nested-item-indicator-width: var(--ngs-nav-nested-item-indicator-width);--ngs-navigation-nested-item-indicator-height: var(--ngs-nav-nested-item-indicator-height);--ngs-navigation-nested-item-indicator-bg: var(--ngs-color-outline);--ngs-navigation-nested-item-indicator-position-start: var(--ngs-nav-nested-item-indicator-position-start);--ngs-navigation-group-active-bg: transparent;--ngs-navigation-group-border-radius: 0;--ngs-navigation-group-tree-lines-color: var(--ngs-color-subtle);--ngs-navigation-heading-text-align: var(--ngs-nav-heading-text-align);display:flex;flex-direction:column;gap:var(--ngs-navigation-items-gap);background:var(--ngs-navigation-bg)}:host ::ng-deep .ngs-navigation-group-toggle-icon{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host ::ng-deep>*+.ngs-navigation-heading{margin-top:var(--ngs-navigation-heading-after-margin)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Navigation, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-navigation', exportAs: 'ngsNavigation', imports: [
                        NgTemplateOutlet
                    ], providers: [
                        NavigationStore,
                        {
                            provide: NAVIGATION,
                            useExisting: forwardRef(() => Navigation),
                        }
                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                        'class': 'ngs-navigation'
                    }, template: "@if (dataSource(); as data) {\n  @for (item of data; track item) {\n    <ng-container *ngTemplateOutlet=\"getTemplate(item); context: { $implicit: item }\" />\n  }\n} @else {\n  <ng-content/>\n}\n", styles: [":host{--ngs-navigation-bg: inherit;--ngs-navigation-items-gap: var(--ngs-nav-items-gap);--ngs-navigation-item-width: var(--ngs-nav-item-width);--ngs-navigation-item-bg: transparent;--ngs-navigation-item-height: var(--ngs-nav-item-height);--ngs-navigation-item-padding: var(--ngs-nav-item-padding);--ngs-navigation-item-font-size: var(--ngs-nav-item-font-size);--ngs-navigation-item-border-radius: var(--ngs-nav-item-radius);--ngs-navigation-item-border-width: var(--ngs-nav-item-border-width);--ngs-navigation-item-border-color: var(--ngs-nav-item-border-color);--ngs-navigation-item-font-weight: var(--ngs-nav-item-font-weight);--ngs-navigation-item-color: var(--ngs-nav-item-color);--ngs-navigation-item-hover-bg: var(--ngs-nav-item-hover-bg);--ngs-navigation-item-active-bg: var(--ngs-nav-item-active-bg);--ngs-navigation-item-hover-color: var(--ngs-nav-item-hover-color);--ngs-navigation-item-active-color: var(--ngs-nav-item-active-color);--ngs-navigation-item-icon-color: var(--ngs-nav-item-icon-color);--ngs-navigation-item-icon-width: var(--ngs-nav-item-icon-width);--ngs-navigation-item-hover-icon-color: var(--ngs-nav-item-hover-icon-color);--ngs-navigation-item-active-icon-color: var(--ngs-nav-item-active-icon-color);--ngs-navigation-item-icon-size: var(--ngs-nav-item-icon-size);--ngs-navigation-item-gap: var(--ngs-nav-item-gap);--ngs-navigation-item-has-icon-padding-start: var(--ngs-nav-item-gap);--ngs-navigation-heading-color: var(--ngs-color-on-surface-variant);--ngs-navigation-heading-font-size: var(--ngs-nav-heading-font-size);--ngs-navigation-heading-font-weight: var(--ngs-nav-heading-font-weight);--ngs-navigation-heading-padding: var(--ngs-nav-heading-padding);--ngs-navigation-heading-margin-bottom: var(--ngs-nav-heading-margin-bottom);--ngs-navigation-heading-after-margin: var(--ngs-nav-heading-after-margin);--ngs-navigation-heading-text-transform: var(--ngs-nav-heading-text-transform);--ngs-navigation-divider-height: var(--ngs-nav-divider-height);--ngs-navigation-divider-bg: var(--ngs-color-subtle);--ngs-navigation-divider-margin: var(--ngs-nav-divider-margin);--ngs-navigation-group-toggle-has-icon-padding-end: var(--ngs-nav-group-toggle-padding-end);--ngs-navigation-group-toggle-icon-color: var(--ngs-color-on-surface-variant);--ngs-navigation-group-toggle-icon-position-end: var(--ngs-nav-group-toggle-icon-position-end);--ngs-navigation-group-toggle-icon-size: var(--ngs-nav-group-toggle-icon-size);--ngs-navigation-group-menu-padding-start: 0;--ngs-navigation-group-toggle-bg: transparent;--ngs-navigation-group-toggle-active-bg: var(--ngs-nav-item-active-bg);--ngs-navigation-group-toggle-active-color: var(--ngs-nav-item-active-color);--ngs-navigation-nested-item-bg: transparent;--ngs-navigation-nested-item-height: var(--ngs-nav-nested-item-height);--ngs-navigation-nested-item-padding: var(--ngs-nav-nested-item-padding);--ngs-navigation-nested-item-margin: var(--ngs-nav-nested-item-margin);--ngs-navigation-nested-item-border-radius: var(--ngs-nav-nested-item-border-radius);--ngs-navigation-nested-item-color: var(--ngs-nav-item-color);--ngs-navigation-nested-item-hover-bg: var(--ngs-nav-item-hover-bg);--ngs-navigation-nested-item-active-bg: var(--ngs-nav-item-active-bg);--ngs-navigation-nested-item-hover-color: var(--ngs-nav-item-hover-color);--ngs-navigation-nested-item-active-color: var(--ngs-nav-item-active-color);--ngs-navigation-nested-item-indicator-width: var(--ngs-nav-nested-item-indicator-width);--ngs-navigation-nested-item-indicator-height: var(--ngs-nav-nested-item-indicator-height);--ngs-navigation-nested-item-indicator-bg: var(--ngs-color-outline);--ngs-navigation-nested-item-indicator-position-start: var(--ngs-nav-nested-item-indicator-position-start);--ngs-navigation-group-active-bg: transparent;--ngs-navigation-group-border-radius: 0;--ngs-navigation-group-tree-lines-color: var(--ngs-color-subtle);--ngs-navigation-heading-text-align: var(--ngs-nav-heading-text-align);display:flex;flex-direction:column;gap:var(--ngs-navigation-items-gap);background:var(--ngs-navigation-bg)}:host ::ng-deep .ngs-navigation-group-toggle-icon{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host ::ng-deep>*+.ngs-navigation-heading{margin-top:var(--ngs-navigation-heading-after-margin)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { _items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NavigationItem), { ...{ descendants: true }, isSignal: true }] }], _defs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NavigationItemDefDirective), { isSignal: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], itemTypeProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTypeProperty", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], activateByRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "activateByRoute", required: false }] }], autoScrollToActiveItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollToActiveItem", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });

class NavigationHeading {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationHeading, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NavigationHeading, isStandalone: true, selector: "ngs-navigation-heading", host: { classAttribute: "ngs-navigation-heading" }, exportAs: ["ngsNavigationHeading"], ngImport: i0, template: "<div class=\"content\"><ng-content/></div>\n", styles: [":host{display:block;text-transform:var(--ngs-navigation-heading-text-transform);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;color:var(--ngs-navigation-heading-color);font-size:var(--ngs-navigation-heading-font-size);font-weight:var(--ngs-navigation-heading-font-weight);padding:var(--ngs-navigation-heading-padding);margin-bottom:var(--ngs-navigation-heading-margin-bottom);text-align:var(--ngs-navigation-heading-text-align);height:var(--ngs-nav-heading-height);align-items:center}:host:first-child{margin-top:0}:host .content{overflow:hidden;text-overflow:ellipsis}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationHeading, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-navigation-heading', exportAs: 'ngsNavigationHeading', host: {
                        'class': 'ngs-navigation-heading'
                    }, template: "<div class=\"content\"><ng-content/></div>\n", styles: [":host{display:block;text-transform:var(--ngs-navigation-heading-text-transform);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;color:var(--ngs-navigation-heading-color);font-size:var(--ngs-navigation-heading-font-size);font-weight:var(--ngs-navigation-heading-font-weight);padding:var(--ngs-navigation-heading-padding);margin-bottom:var(--ngs-navigation-heading-margin-bottom);text-align:var(--ngs-navigation-heading-text-align);height:var(--ngs-nav-heading-height);align-items:center}:host:first-child{margin-top:0}:host .content{overflow:hidden;text-overflow:ellipsis}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class NavigationDivider {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NavigationDivider, isStandalone: true, selector: "ngs-navigation-divider", host: { classAttribute: "ngs-navigation-divider" }, exportAs: ["ngsNavigationDivider"], ngImport: i0, template: '', isInline: true, styles: [":host{display:block;height:var(--ngs-navigation-divider-height);background:var(--ngs-navigation-divider-bg);margin:var(--ngs-navigation-divider-margin)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationDivider, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-navigation-divider', exportAs: 'ngsNavigationDivider', template: '', host: {
                        'class': 'ngs-navigation-divider'
                    }, styles: [":host{display:block;height:var(--ngs-navigation-divider-height);background:var(--ngs-navigation-divider-bg);margin:var(--ngs-navigation-divider-margin)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

let nextId = 0;
class NavigationGroup {
    key = signal(`ngs-navigation-group-${nextId++}`, ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NavigationGroup, isStandalone: true, selector: "ngs-navigation-group", host: { classAttribute: "ngs-navigation-group" }, providers: [
            {
                provide: NAVIGATION_GROUP,
                useExisting: forwardRef(() => NavigationGroup)
            }
        ], exportAs: ["ngsNavigationGroup"], ngImport: i0, template: "<ng-content select=\"ngs-navigation-group-toggle\"/>\n<ng-content select=\"ngs-navigation-group-menu\"/>\n", styles: [":host{display:block;border-radius:var(--ngs-navigation-group-border-radius)}:host:has(.ngs-navigation-group-toggle.is-active){background:var(--ngs-navigation-group-active-bg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationGroup, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-navigation-group', exportAs: 'ngsNavigationGroup', providers: [
                        {
                            provide: NAVIGATION_GROUP,
                            useExisting: forwardRef(() => NavigationGroup)
                        }
                    ], host: {
                        'class': 'ngs-navigation-group'
                    }, template: "<ng-content select=\"ngs-navigation-group-toggle\"/>\n<ng-content select=\"ngs-navigation-group-menu\"/>\n", styles: [":host{display:block;border-radius:var(--ngs-navigation-group-border-radius)}:host:has(.ngs-navigation-group-toggle.is-active){background:var(--ngs-navigation-group-active-bg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class NavigationGroupMenu {
    store = inject(NavigationStore);
    _group = inject(NAVIGATION_GROUP);
    active = computed(() => {
        return this.store.activeGroupKey() === this._group.key();
    }, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
    _items = contentChildren(NavigationItem, { ...(ngDevMode ? { debugName: "_items" } : /* istanbul ignore next */ {}), descendants: true });
    _defs = contentChildren(NavigationItemDefDirective, ...(ngDevMode ? [{ debugName: "_defs" }] : /* istanbul ignore next */ []));
    dataSource = input(...(ngDevMode ? [undefined, { debugName: "dataSource" }] : /* istanbul ignore next */ []));
    itemTypeProperty = input('type', ...(ngDevMode ? [{ debugName: "itemTypeProperty" }] : /* istanbul ignore next */ []));
    hasActiveItemInGroup = computed(() => {
        const fromItems = this._items().some(item => this.store.activeKey() === item.key());
        if (fromItems) {
            return true;
        }
        const data = this.dataSource();
        if (data) {
            return data.some(item => this._isActive(item, this.store.activeKey()));
        }
        return false;
    }, ...(ngDevMode ? [{ debugName: "hasActiveItemInGroup" }] : /* istanbul ignore next */ []));
    ngAfterContentInit() {
        this._detectGroupIsActive();
    }
    getTemplate(item) {
        const def = this._defs().find(d => {
            const whenValue = d.when();
            if (whenValue) {
                if (typeof whenValue === 'function') {
                    return whenValue(item);
                }
                return item[this.itemTypeProperty()] === whenValue;
            }
            return false;
        }) || this._defs().find(d => !d.when());
        return def?.template || null;
    }
    _detectGroupIsActive() {
        if (this.hasActiveItemInGroup() && !this.active()) {
            this.store.setActiveGroupKey(this._group.key());
        }
        else {
            if (this.store.activeGroupKey() === this._group.key()) {
                this.store.setActiveGroupKey(null);
            }
            else {
                this.store.setActiveGroupKey(this._group.key());
            }
        }
    }
    _isActive(item, activeKey) {
        if (item.key === activeKey) {
            return true;
        }
        if (item.children && Array.isArray(item.children)) {
            return item.children.some((child) => this._isActive(child, activeKey));
        }
        return false;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationGroupMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: NavigationGroupMenu, isStandalone: true, selector: "ngs-navigation-group-menu", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, itemTypeProperty: { classPropertyName: "itemTypeProperty", publicName: "itemTypeProperty", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-active": "active()" }, classAttribute: "ngs-navigation-group-menu" }, queries: [{ propertyName: "_items", predicate: NavigationItem, descendants: true, isSignal: true }, { propertyName: "_defs", predicate: NavigationItemDefDirective, isSignal: true }], exportAs: ["ngsNavigationGroupMenu"], ngImport: i0, template: "@if (dataSource(); as data) {\n  <div class=\"inner\">\n    @for (item of data; track item) {\n      <ng-container *ngTemplateOutlet=\"getTemplate(item); context: { $implicit: item }\" />\n    }\n  </div>\n} @else {\n  <div class=\"inner\">\n    <ng-content/>\n  </div>\n}\n", styles: [":host{position:relative;padding-inline-start:var(--ngs-navigation-group-menu-padding-start);transition:grid-template-rows .2s ease;grid-template-rows:0fr;display:grid}:host .inner{display:flex;flex-direction:column;gap:var(--ngs-navigation-items-gap);overflow:hidden}:host(.is-active){grid-template-rows:1fr;margin-top:var(--ngs-navigation-item-space-y)}:host(.is-active) .inner{padding:calc(var(--ngs-navigation-items-gap) * 2) 0 var(--ngs-navigation-items-gap) 0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationGroupMenu, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-navigation-group-menu', exportAs: 'ngsNavigationGroupMenu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        NgTemplateOutlet
                    ], standalone: true, host: {
                        'class': 'ngs-navigation-group-menu',
                        '[class.is-active]': 'active()'
                    }, template: "@if (dataSource(); as data) {\n  <div class=\"inner\">\n    @for (item of data; track item) {\n      <ng-container *ngTemplateOutlet=\"getTemplate(item); context: { $implicit: item }\" />\n    }\n  </div>\n} @else {\n  <div class=\"inner\">\n    <ng-content/>\n  </div>\n}\n", styles: [":host{position:relative;padding-inline-start:var(--ngs-navigation-group-menu-padding-start);transition:grid-template-rows .2s ease;grid-template-rows:0fr;display:grid}:host .inner{display:flex;flex-direction:column;gap:var(--ngs-navigation-items-gap);overflow:hidden}:host(.is-active){grid-template-rows:1fr;margin-top:var(--ngs-navigation-item-space-y)}:host(.is-active) .inner{padding:calc(var(--ngs-navigation-items-gap) * 2) 0 var(--ngs-navigation-items-gap) 0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { _items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NavigationItem), { ...{ descendants: true }, isSignal: true }] }], _defs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NavigationItemDefDirective), { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], itemTypeProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTypeProperty", required: false }] }] } });

class NavigationGroupToggleIconDirective {
    templateRef = inject(TemplateRef, { optional: true });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationGroupToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: NavigationGroupToggleIconDirective, isStandalone: true, selector: "[ngsNavigationGroupToggleIcon]", host: { classAttribute: "ngs-navigation-group-toggle-icon" }, exportAs: ["ngsNavigationGroupToggleIcon"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationGroupToggleIconDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsNavigationGroupToggleIcon]',
                    exportAs: 'ngsNavigationGroupToggleIcon',
                    host: {
                        'class': 'ngs-navigation-group-toggle-icon'
                    }
                }]
        }] });

class NavigationGroupToggle {
    store = inject(NavigationStore);
    _group = inject(NAVIGATION_GROUP);
    iconRef = contentChild(NavigationGroupToggleIconDirective, ...(ngDevMode ? [{ debugName: "iconRef" }] : /* istanbul ignore next */ []));
    active = computed(() => {
        return this.store.activeGroupKey() === this._group.key();
    }, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
    badgeTextOnly = input(false, { ...(ngDevMode ? { debugName: "badgeTextOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    toggle(event) {
        event.preventDefault();
        event.stopPropagation();
        if (this.active()) {
            this.store.setActiveGroupKey(null);
        }
        else {
            this.store.setActiveGroupKey(this._group.key());
        }
    }
    get iconRefTemplate() {
        return this.iconRef()?.templateRef;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationGroupToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: NavigationGroupToggle, isStandalone: true, selector: "ngs-navigation-group-toggle", inputs: { badgeTextOnly: { classPropertyName: "badgeTextOnly", publicName: "badgeTextOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggle($event)" }, properties: { "class.is-active": "active()", "class.is-badge-text-only": "badgeTextOnly()" }, classAttribute: "ngs-navigation-group-toggle" }, queries: [{ propertyName: "iconRef", first: true, predicate: NavigationGroupToggleIconDirective, descendants: true, isSignal: true }], exportAs: ["ngsNavigationGroupToggle"], hostDirectives: [{ directive: i1.Ripple }], ngImport: i0, template: "<div class=\"icon\"><ng-content select=\"[ngsNavigationItemIcon]\"/></div>\n<span class=\"text grow\"><ng-content/></span>\n<div class=\"flex items-center gap-0.5\">\n  <div class=\"badge\">\n    <ng-content select=\"[ngsNavigationItemBadge]\"/>\n  </div>\n  <div class=\"arrow\">\n    <ng-content select=\"[ngsNavigationGroupToggleIcon]\"/>\n    @if (iconRef()) {\n      <ng-container [ngTemplateOutlet]=\"iconRefTemplate\"/>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;min-width:0;white-space:nowrap;position:relative;flex:none;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--ngs-navigation-group-toggle-bg);min-height:var(--ngs-navigation-item-height);padding:var(--ngs-navigation-item-padding);font-size:var(--ngs-navigation-item-font-size);border-radius:var(--ngs-navigation-item-border-radius);font-weight:var(--ngs-navigation-item-font-weight);color:var(--ngs-navigation-item-color);gap:var(--ngs-navigation-item-gap);width:var(--ngs-navigation-item-width)}:host .text{overflow:hidden;text-overflow:ellipsis}:host .badge:empty{display:none}:host .badge{display:inline-flex;flex:none;border-radius:calc(infinity * 1px);height:var(--ngs-nav-badge-size);min-width:var(--ngs-nav-badge-size);align-items:center;justify-content:center;font-size:var(--ngs-font-size-xs);padding:var(--ngs-nav-badge-padding);font-weight:700}:host:not(.is-badge-text-only) .badge{font-weight:600;font-size:var(--ngs-font-size-xs);background:var(--ngs-color-primary);color:var(--ngs-color-on-primary)}:host .icon{display:inline-flex;align-items:center;justify-content:center;width:var(--ngs-navigation-item-icon-width);color:var(--ngs-navigation-item-icon-color);flex:none}:host .icon:empty{display:none}:host .arrow{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease;flex:none;width:var(--ngs-nav-arrow-size);height:var(--ngs-nav-arrow-size)}:host .arrow:empty{display:none}:host:hover{background:var(--ngs-navigation-item-hover-bg);color:var(--ngs-navigation-item-hover-color);transition:background-color .2s}:host.is-active,:host.is-active:hover{background:var(--ngs-navigation-group-toggle-active-bg);color:var(--ngs-navigation-group-toggle-active-color)}:host:not(.is-active):hover .icon{color:var(--ngs-navigation-item-hover-icon-color)}:host.is-active .icon{color:var(--ngs-navigation-group-toggle-active-color)}:host.is-active .arrow{transform:rotate(-180deg)}:host:has(.arrow:not(:empty)){padding-inline-end:var(--ngs-navigation-group-toggle-has-icon-padding-end)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationGroupToggle, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-navigation-group-toggle', exportAs: 'ngsNavigationGroupToggle', imports: [
                        NgTemplateOutlet
                    ], hostDirectives: [
                        Ripple
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-navigation-group-toggle',
                        '[class.is-active]': 'active()',
                        '[class.is-badge-text-only]': 'badgeTextOnly()',
                        '(click)': 'toggle($event)'
                    }, template: "<div class=\"icon\"><ng-content select=\"[ngsNavigationItemIcon]\"/></div>\n<span class=\"text grow\"><ng-content/></span>\n<div class=\"flex items-center gap-0.5\">\n  <div class=\"badge\">\n    <ng-content select=\"[ngsNavigationItemBadge]\"/>\n  </div>\n  <div class=\"arrow\">\n    <ng-content select=\"[ngsNavigationGroupToggleIcon]\"/>\n    @if (iconRef()) {\n      <ng-container [ngTemplateOutlet]=\"iconRefTemplate\"/>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;min-width:0;white-space:nowrap;position:relative;flex:none;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--ngs-navigation-group-toggle-bg);min-height:var(--ngs-navigation-item-height);padding:var(--ngs-navigation-item-padding);font-size:var(--ngs-navigation-item-font-size);border-radius:var(--ngs-navigation-item-border-radius);font-weight:var(--ngs-navigation-item-font-weight);color:var(--ngs-navigation-item-color);gap:var(--ngs-navigation-item-gap);width:var(--ngs-navigation-item-width)}:host .text{overflow:hidden;text-overflow:ellipsis}:host .badge:empty{display:none}:host .badge{display:inline-flex;flex:none;border-radius:calc(infinity * 1px);height:var(--ngs-nav-badge-size);min-width:var(--ngs-nav-badge-size);align-items:center;justify-content:center;font-size:var(--ngs-font-size-xs);padding:var(--ngs-nav-badge-padding);font-weight:700}:host:not(.is-badge-text-only) .badge{font-weight:600;font-size:var(--ngs-font-size-xs);background:var(--ngs-color-primary);color:var(--ngs-color-on-primary)}:host .icon{display:inline-flex;align-items:center;justify-content:center;width:var(--ngs-navigation-item-icon-width);color:var(--ngs-navigation-item-icon-color);flex:none}:host .icon:empty{display:none}:host .arrow{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease;flex:none;width:var(--ngs-nav-arrow-size);height:var(--ngs-nav-arrow-size)}:host .arrow:empty{display:none}:host:hover{background:var(--ngs-navigation-item-hover-bg);color:var(--ngs-navigation-item-hover-color);transition:background-color .2s}:host.is-active,:host.is-active:hover{background:var(--ngs-navigation-group-toggle-active-bg);color:var(--ngs-navigation-group-toggle-active-color)}:host:not(.is-active):hover .icon{color:var(--ngs-navigation-item-hover-icon-color)}:host.is-active .icon{color:var(--ngs-navigation-group-toggle-active-color)}:host.is-active .arrow{transform:rotate(-180deg)}:host:has(.arrow:not(:empty)){padding-inline-end:var(--ngs-navigation-group-toggle-has-icon-padding-end)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { iconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationGroupToggleIconDirective), { isSignal: true }] }], badgeTextOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeTextOnly", required: false }] }] } });

class NavigationItemBadgeDirective {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationItemBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: NavigationItemBadgeDirective, isStandalone: true, selector: "[ngsNavigationItemBadge]", host: { classAttribute: "ngs-navigation-item-badge" }, exportAs: ["ngsNavigationItemBadge"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigationItemBadgeDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsNavigationItemBadge]',
                    exportAs: 'ngsNavigationItemBadge',
                    standalone: true,
                    host: {
                        'class': 'ngs-navigation-item-badge',
                    }
                }]
        }] });

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

export { NAVIGATION, NAVIGATION_GROUP, Navigation, NavigationDivider, NavigationGroup, NavigationGroupMenu, NavigationGroupToggle, NavigationGroupToggleIconDirective, NavigationHeading, NavigationItem, NavigationItemBadgeDirective, NavigationItemDefDirective, NavigationItemIconDirective };
//# sourceMappingURL=ngstarter-ui-components-navigation.mjs.map
