import * as i0 from '@angular/core';
import { inject, ElementRef, model, viewChild, Component, NgZone, PLATFORM_ID, Injector, contentChildren, signal, effect, input } from '@angular/core';
import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
import { Dialog } from '@ngstarter-ui/components/dialog';
import { Icon } from '@ngstarter-ui/components/icon';
import { Button } from '@ngstarter-ui/components/button';

class ToolbarItem {
    elementRef = inject(ElementRef);
    hidden = model(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
    template = viewChild.required('itemTemplate');
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ToolbarItem, isStandalone: true, selector: "ngs-toolbar-item", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hidden: "hiddenChange" }, host: { properties: { "class.ngs-toolbar-item-hidden": "hidden()" } }, viewQueries: [{ propertyName: "template", first: true, predicate: ["itemTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #itemTemplate>\n  <ng-content/>\n</ng-template>\n\n<ng-container [ngTemplateOutlet]=\"itemTemplate\" />\n", styles: [":host{flex-shrink:0}:host.ngs-toolbar-item-hidden{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToolbarItem, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-toolbar-item', imports: [NgTemplateOutlet], host: {
                        '[class.ngs-toolbar-item-hidden]': 'hidden()',
                    }, template: "<ng-template #itemTemplate>\n  <ng-content/>\n</ng-template>\n\n<ng-container [ngTemplateOutlet]=\"itemTemplate\" />\n", styles: [":host{flex-shrink:0}:host.ngs-toolbar-item-hidden{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }], template: [{ type: i0.ViewChild, args: ['itemTemplate', { isSignal: true }] }] } });

class ToolbarNav {
    elementRef = inject(ElementRef);
    hidden = model(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
    template = viewChild.required('itemTemplate');
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToolbarNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ToolbarNav, isStandalone: true, selector: "ngs-toolbar-nav", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hidden: "hiddenChange" }, host: { properties: { "class.ngs-toolbar-item-hidden": "hidden()" }, classAttribute: "ngs-toolbar-nav" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["itemTemplate"], descendants: true, isSignal: true }], exportAs: ["ngsToolbarNav"], ngImport: i0, template: "<ng-template #itemTemplate>\n  <div class=\"ngs-toolbar-nav-container\">\n    <ng-content />\n  </div>\n</ng-template>\n\n<ng-container [ngTemplateOutlet]=\"itemTemplate\" />\n", styles: [":host{display:flex;align-items:center;height:100%}:host .ngs-toolbar-nav-container{display:flex;align-items:center;height:100%;gap:calc(var(--spacing, .25rem) * 1)}:host-context(.ngs-toolbar-overflow-dialog-content){width:100%}:host-context(.ngs-toolbar-overflow-dialog-content) .ngs-toolbar-nav-container{flex-direction:column;align-items:flex-start;width:100%;gap:calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToolbarNav, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-toolbar-nav', exportAs: 'ngsToolbarNav', standalone: true, imports: [NgTemplateOutlet], host: {
                        'class': 'ngs-toolbar-nav',
                        '[class.ngs-toolbar-item-hidden]': 'hidden()',
                    }, template: "<ng-template #itemTemplate>\n  <div class=\"ngs-toolbar-nav-container\">\n    <ng-content />\n  </div>\n</ng-template>\n\n<ng-container [ngTemplateOutlet]=\"itemTemplate\" />\n", styles: [":host{display:flex;align-items:center;height:100%}:host .ngs-toolbar-nav-container{display:flex;align-items:center;height:100%;gap:calc(var(--spacing, .25rem) * 1)}:host-context(.ngs-toolbar-overflow-dialog-content){width:100%}:host-context(.ngs-toolbar-overflow-dialog-content) .ngs-toolbar-nav-container{flex-direction:column;align-items:flex-start;width:100%;gap:calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }], template: [{ type: i0.ViewChild, args: ['itemTemplate', { isSignal: true }] }] } });

class ToolbarSpacer {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToolbarSpacer, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ToolbarSpacer, isStandalone: true, selector: "ngs-toolbar-spacer", ngImport: i0, template: "", styles: [":host{flex:1}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToolbarSpacer, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-toolbar-spacer', imports: [], template: "", styles: [":host{flex:1}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class ToolbarRow {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToolbarRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ToolbarRow, isStandalone: true, selector: "ngs-toolbar-row", ngImport: i0, template: "<ngs-toolbar>\n  <ng-content/>\n</ngs-toolbar>\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);width:100%;flex:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToolbarRow, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-toolbar-row', imports: [
                        Toolbar
                    ], template: "<ngs-toolbar>\n  <ng-content/>\n</ngs-toolbar>\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);width:100%;flex:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class Toolbar {
    _elementRef = inject(ElementRef);
    _zone = inject(NgZone);
    _platformId = inject(PLATFORM_ID);
    _injector = inject(Injector);
    _dialog = inject(Dialog);
    toolbarItems = contentChildren(ToolbarItem, { ...(ngDevMode ? { debugName: "toolbarItems" } : /* istanbul ignore next */ {}), descendants: true });
    navItems = contentChildren(ToolbarNav, { ...(ngDevMode ? { debugName: "navItems" } : /* istanbul ignore next */ {}), descendants: true });
    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
    spacers = contentChildren(ToolbarSpacer, { ...(ngDevMode ? { debugName: "spacers" } : /* istanbul ignore next */ {}), descendants: true });
    _rows = contentChildren(ToolbarRow, { ...(ngDevMode ? { debugName: "_rows" } : /* istanbul ignore next */ {}), descendants: true });
    _overflowItems = signal([], ...(ngDevMode ? [{ debugName: "_overflowItems" }] : /* istanbul ignore next */ []));
    _dialogRef = null;
    _resizeObserver;
    _itemWidths = new Map();
    constructor() {
        effect(() => {
            this.items.set([...this.toolbarItems(), ...this.navItems()]);
        });
    }
    ngAfterViewInit() {
        if (!isPlatformBrowser(this._platformId)) {
            return;
        }
        this._zone.runOutsideAngular(() => {
            this._resizeObserver = new ResizeObserver(() => {
                this._updateOverflow();
            });
            this._resizeObserver.observe(this._elementRef.nativeElement);
            // Also observe each item to update cached widths if they change
            this.items().forEach(item => {
                const el = item.elementRef.nativeElement;
                if (el instanceof HTMLElement) {
                    this._resizeObserver?.observe(el);
                }
            });
        });
        // Handle items changes
        effect(() => {
            const currentItems = this.items();
            this._zone.runOutsideAngular(() => {
                // Clear widths for items that are gone
                for (const item of this._itemWidths.keys()) {
                    if (!currentItems.includes(item)) {
                        this._itemWidths.delete(item);
                    }
                }
                currentItems.forEach(item => {
                    const el = item.elementRef.nativeElement;
                    if (el instanceof HTMLElement) {
                        this._resizeObserver?.observe(el);
                    }
                });
                this._updateOverflow();
            });
        }, { injector: this._injector });
        // Initial check
        setTimeout(() => {
            this._updateOverflow();
        }, 100);
    }
    ngOnDestroy() {
        this._resizeObserver?.disconnect();
    }
    _openOverflowDialog(template) {
        this._dialogRef = this._dialog.open(template, {
            width: '100%',
            height: '100%',
            maxWidth: '100vw',
            panelClass: 'ngs-toolbar-overflow-dialog-panel'
        });
        this._dialogRef.afterClosed().subscribe(() => {
            this._dialogRef = null;
        });
    }
    _closeOverflowDialog() {
        this._dialogRef?.close();
    }
    _updateOverflow() {
        this._zone.runOutsideAngular(() => {
            requestAnimationFrame(() => {
                const container = this._elementRef.nativeElement;
                const containerWidth = container.clientWidth;
                const items = this.items();
                if (containerWidth === 0) {
                    return;
                }
                if (items.length === 0) {
                    if (this._overflowItems().length > 0) {
                        this._zone.run(() => this._overflowItems.set([]));
                    }
                    return;
                }
                // Identify other elements taking up space (title, spacer, etc.)
                const children = Array.from(container.children);
                let staticWidth = 0;
                const gap = 16;
                let staticCount = 0;
                children.forEach(child => {
                    const tagName = child.tagName.toLowerCase();
                    const isItem = tagName === 'ngs-toolbar-item' || tagName === 'ngs-toolbar-nav';
                    const isOverflowButton = (tagName === 'button' || tagName === 'ngs-menu' || child.hasAttribute('ngs-menu-trigger') || child.hasAttribute('ngs-menu-trigger-for') || child.hasAttribute('ngsmenutriggerfor')) && (child.hasAttribute('ngs-icon-button') ||
                        child.hasAttribute('ngsiconbutton') ||
                        child.getAttribute('ngs-icon-button') !== null ||
                        child.querySelector('ngs-icon[name*="more-vertical"]') ||
                        child.querySelector('ngs-icon[name*="more"]') ||
                        child.querySelector('button[ngs-icon-button]') ||
                        child.querySelector('button[ngsiconbutton]'));
                    const isMenu = tagName === 'ngs-menu' || child.hasAttribute('ngs-menu') || child.querySelector('ngs-menu');
                    const isSpacer = tagName === 'ngs-toolbar-spacer' || child.hasAttribute('ngs-toolbar-spacer');
                    // Check if this child contains any of the ToolbarItems we're tracking
                    const containsManagedItem = items.some(item => child.contains(item.elementRef.nativeElement));
                    const isVisible = child.offsetParent !== null || child.offsetWidth > 0;
                    if (!isItem && !containsManagedItem && !isOverflowButton && !isMenu && isVisible) {
                        if (!isSpacer) {
                            staticWidth += child.offsetWidth;
                        }
                        staticCount++;
                    }
                });
                // 1. Update widths of items that are NOT hidden
                let allWidthsKnown = true;
                items.forEach(item => {
                    if (!item.hidden()) {
                        const width = item.elementRef.nativeElement.offsetWidth;
                        if (width > 0) {
                            this._itemWidths.set(item, width);
                        }
                    }
                    if (!this._itemWidths.has(item)) {
                        allWidthsKnown = false;
                    }
                });
                // 2. If some widths are unknown (e.g., hidden since start), we MUST show them briefly to measure
                if (!allWidthsKnown) {
                    this._zone.run(() => {
                        items.forEach(item => {
                            if (!this._itemWidths.has(item)) {
                                item.hidden.set(false);
                            }
                        });
                    });
                    return;
                }
                // 3. Calculate how many items fit
                const overflowItems = [];
                const overflowButtonWidth = 48; // A bit more room for the overflow button
                // Total width if ALL items fit
                const totalItemsWidth = items.reduce((acc, item) => acc + (this._itemWidths.get(item) || 0), 0);
                const totalVisibleCountAll = staticCount + items.length;
                const totalGapsWidthAll = totalVisibleCountAll > 1 ? (totalVisibleCountAll - 1) * gap : 0;
                const totalWidthAllItems = staticWidth + totalItemsWidth + totalGapsWidthAll;
                if (totalWidthAllItems <= containerWidth) {
                    this._zone.run(() => {
                        items.forEach(item => item.hidden.set(false));
                        if (this._overflowItems().length > 0) {
                            this._overflowItems.set([]);
                        }
                    });
                    return;
                }
                // Not all items fit, we need overflow button
                let currentItemsWidth = 0;
                let fitCount = 0;
                for (let i = 0; i < items.length; i++) {
                    const item = items[i];
                    const width = this._itemWidths.get(item) || 0;
                    // If we add this item, we'll have:
                    // staticCount + fitCount + 1 (this item) + 1 (overflow button)
                    const potentialVisibleCount = staticCount + fitCount + 2;
                    const potentialGapsWidth = (potentialVisibleCount - 1) * gap;
                    const totalWidthWithThisItemAndOverflow = staticWidth + currentItemsWidth + width + potentialGapsWidth + overflowButtonWidth;
                    if (totalWidthWithThisItemAndOverflow > containerWidth) {
                        break;
                    }
                    currentItemsWidth += width;
                    fitCount++;
                }
                for (let i = fitCount; i < items.length; i++) {
                    overflowItems.push(items[i]);
                }
                // 4. Update visibility
                this._zone.run(() => {
                    items.forEach((item, index) => {
                        const shouldBeHidden = index >= fitCount;
                        if (item.hidden() !== shouldBeHidden) {
                            item.hidden.set(shouldBeHidden);
                        }
                    });
                    const currentOverflow = this._overflowItems();
                    const isSame = currentOverflow.length === overflowItems.length &&
                        currentOverflow.every((item, index) => item === overflowItems[index]);
                    if (!isSame) {
                        this._overflowItems.set(overflowItems);
                    }
                });
            });
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Toolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Toolbar, isStandalone: true, selector: "ngs-toolbar", host: { properties: { "class.ngs-toolbar-stacked": "!!_rows().length" }, classAttribute: "ngs-toolbar" }, queries: [{ propertyName: "toolbarItems", predicate: ToolbarItem, descendants: true, isSignal: true }, { propertyName: "navItems", predicate: ToolbarNav, descendants: true, isSignal: true }, { propertyName: "spacers", predicate: ToolbarSpacer, descendants: true, isSignal: true }, { propertyName: "_rows", predicate: ToolbarRow, descendants: true, isSignal: true }], exportAs: ["ngsToolbar"], ngImport: i0, template: "<ng-content/>\n\n@if (_overflowItems().length > 0) {\n  <button ngsIconButton (click)=\"_openOverflowDialog(overflowDialog)\">\n    <ngs-icon name=\"fluent:more-vertical-24-regular\" />\n  </button>\n\n  <ng-template #overflowDialog>\n    <div class=\"ngs-toolbar-overflow-dialog\">\n      <div class=\"ngs-toolbar-overflow-dialog-header\">\n        <button ngsIconButton (click)=\"_closeOverflowDialog()\">\n          <ngs-icon name=\"fluent:dismiss-24-regular\" />\n        </button>\n      </div>\n\n      <div class=\"ngs-toolbar-overflow-dialog-content flex flex-col gap-6\">\n        @for (item of _overflowItems(); track $index) {\n          <div class=\"flex items-center gap-4\">\n            <ng-template [ngTemplateOutlet]=\"item.template()\" />\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n}\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 4);overflow:hidden;flex-wrap:nowrap;width:100%}:host:has(>ngs-toolbar-row){flex-direction:column}:host>ngs-toolbar-item{flex-shrink:0}.ngs-toolbar-overflow-dialog{display:flex;flex-direction:column;height:100%}.ngs-toolbar-overflow-dialog-header{display:flex;justify-content:flex-end;padding:calc(var(--spacing, .25rem) * 2)}.ngs-toolbar-overflow-dialog-content{display:flex;flex-direction:column;padding:calc(var(--spacing, .25rem) * 4);gap:calc(var(--spacing, .25rem) * 2);flex:1;overflow-y:auto}.ngs-toolbar-overflow-item{display:flex;align-items:center;width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Toolbar, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-toolbar', exportAs: 'ngsToolbar', imports: [
                        Icon,
                        Button,
                        NgTemplateOutlet
                    ], host: {
                        'class': 'ngs-toolbar',
                        '[class.ngs-toolbar-stacked]': '!!_rows().length'
                    }, template: "<ng-content/>\n\n@if (_overflowItems().length > 0) {\n  <button ngsIconButton (click)=\"_openOverflowDialog(overflowDialog)\">\n    <ngs-icon name=\"fluent:more-vertical-24-regular\" />\n  </button>\n\n  <ng-template #overflowDialog>\n    <div class=\"ngs-toolbar-overflow-dialog\">\n      <div class=\"ngs-toolbar-overflow-dialog-header\">\n        <button ngsIconButton (click)=\"_closeOverflowDialog()\">\n          <ngs-icon name=\"fluent:dismiss-24-regular\" />\n        </button>\n      </div>\n\n      <div class=\"ngs-toolbar-overflow-dialog-content flex flex-col gap-6\">\n        @for (item of _overflowItems(); track $index) {\n          <div class=\"flex items-center gap-4\">\n            <ng-template [ngTemplateOutlet]=\"item.template()\" />\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n}\n", styles: [":host{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 4);overflow:hidden;flex-wrap:nowrap;width:100%}:host:has(>ngs-toolbar-row){flex-direction:column}:host>ngs-toolbar-item{flex-shrink:0}.ngs-toolbar-overflow-dialog{display:flex;flex-direction:column;height:100%}.ngs-toolbar-overflow-dialog-header{display:flex;justify-content:flex-end;padding:calc(var(--spacing, .25rem) * 2)}.ngs-toolbar-overflow-dialog-content{display:flex;flex-direction:column;padding:calc(var(--spacing, .25rem) * 4);gap:calc(var(--spacing, .25rem) * 2);flex:1;overflow-y:auto}.ngs-toolbar-overflow-item{display:flex;align-items:center;width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { toolbarItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ToolbarItem), { ...{ descendants: true }, isSignal: true }] }], navItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ToolbarNav), { ...{ descendants: true }, isSignal: true }] }], spacers: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ToolbarSpacer), { ...{ descendants: true }, isSignal: true }] }], _rows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ToolbarRow), { ...{ descendants: true }, isSignal: true }] }] } });

class ToolbarNavLink {
    /** The active state of the link. */
    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToolbarNavLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: ToolbarNavLink, isStandalone: true, selector: "ngs-toolbar-nav-link,a[ngs-toolbar-nav-link]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngs-toolbar-nav-link-active": "active()" }, classAttribute: "ngs-toolbar-nav-link" }, exportAs: ["ngsToolbarNavLink"], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{--ngs-toolbar-nav-link-padding: var(--ngs-nav-item-padding);--ngs-toolbar-nav-link-font-size: var(--ngs-nav-item-font-size);--ngs-toolbar-nav-link-radius: var(--ngs-nav-item-radius);--ngs-toolbar-nav-link-color: var(--ngs-nav-item-color);--ngs-toolbar-nav-link-hover-color: var(--ngs-nav-item-hover-color);--ngs-toolbar-nav-link-active-color: var(--ngs-nav-item-active-color);--ngs-toolbar-nav-link-overflow-height: var(--ngs-nav-item-height);display:inline-flex;align-items:center;padding:var(--ngs-toolbar-nav-link-padding);height:100%;cursor:pointer;color:var(--ngs-toolbar-nav-link-color);font-size:var(--ngs-toolbar-nav-link-font-size);border-radius:var(--ngs-toolbar-nav-link-radius);transition:color .2s;text-decoration:none;white-space:nowrap}:host:hover{color:var(--ngs-toolbar-nav-link-hover-color);text-decoration:underline}:host.ngs-toolbar-nav-link-active{color:var(--ngs-toolbar-nav-link-active-color);font-weight:500}:host-context(.ngs-toolbar-overflow-dialog-content){width:100%;height:var(--ngs-toolbar-nav-link-overflow-height)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToolbarNavLink, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-toolbar-nav-link,a[ngs-toolbar-nav-link]', exportAs: 'ngsToolbarNavLink', standalone: true, template: '<ng-content />', imports: [], host: {
                        'class': 'ngs-toolbar-nav-link',
                        '[class.ngs-toolbar-nav-link-active]': 'active()',
                    }, styles: [":host{--ngs-toolbar-nav-link-padding: var(--ngs-nav-item-padding);--ngs-toolbar-nav-link-font-size: var(--ngs-nav-item-font-size);--ngs-toolbar-nav-link-radius: var(--ngs-nav-item-radius);--ngs-toolbar-nav-link-color: var(--ngs-nav-item-color);--ngs-toolbar-nav-link-hover-color: var(--ngs-nav-item-hover-color);--ngs-toolbar-nav-link-active-color: var(--ngs-nav-item-active-color);--ngs-toolbar-nav-link-overflow-height: var(--ngs-nav-item-height);display:inline-flex;align-items:center;padding:var(--ngs-toolbar-nav-link-padding);height:100%;cursor:pointer;color:var(--ngs-toolbar-nav-link-color);font-size:var(--ngs-toolbar-nav-link-font-size);border-radius:var(--ngs-toolbar-nav-link-radius);transition:color .2s;text-decoration:none;white-space:nowrap}:host:hover{color:var(--ngs-toolbar-nav-link-hover-color);text-decoration:underline}:host.ngs-toolbar-nav-link-active{color:var(--ngs-toolbar-nav-link-active-color);font-weight:500}:host-context(.ngs-toolbar-overflow-dialog-content){width:100%;height:var(--ngs-toolbar-nav-link-overflow-height)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });

class ToolbarTitle {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToolbarTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ToolbarTitle, isStandalone: true, selector: "ngs-toolbar-title", ngImport: i0, template: "<ng-content/>\n", styles: [":host{font-size:var(--ngs-font-size-lg);font-weight:700;white-space:nowrap}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToolbarTitle, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-toolbar-title', imports: [], template: "<ng-content/>\n", styles: [":host{font-size:var(--ngs-font-size-lg);font-weight:700;white-space:nowrap}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

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

export { Toolbar, ToolbarItem, ToolbarNav, ToolbarNavLink, ToolbarRow, ToolbarSpacer, ToolbarTitle };
//# sourceMappingURL=ngstarter-ui-components-toolbar.mjs.map
