import * as i0 from '@angular/core';
import { input, viewChild, Component, computed, contentChildren, signal, output, effect, TemplateRef } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { Icon } from '@ngstarter-ui/components/icon';
import { Tooltip } from '@ngstarter-ui/components/tooltip';
import { Button } from '@ngstarter-ui/components/button';

class SidePanelTab {
    tabId = input.required(...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
    content = viewChild.required('contentTemplate');
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SidePanelTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: SidePanelTab, isStandalone: true, selector: "ngs-side-panel-tab", inputs: { tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-side-panel-tab" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, isSignal: true }], exportAs: ["ngsSidePanelTab"], ngImport: i0, template: "<ng-template #contentTemplate><ng-content/></ng-template>\n", styles: [":host{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SidePanelTab, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-side-panel-tab', exportAs: 'ngsSidePanelTab', standalone: true, host: {
                        'class': 'ngs-side-panel-tab',
                    }, template: "<ng-template #contentTemplate><ng-content/></ng-template>\n", styles: [":host{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], content: [{ type: i0.ViewChild, args: ['contentTemplate', { isSignal: true }] }] } });

class SidePanel {
    position = input('right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
    isPositionRight = computed(() => this.position() === 'right', ...(ngDevMode ? [{ debugName: "isPositionRight" }] : /* istanbul ignore next */ []));
    tooltipPosition = computed(() => {
        return this.position() === 'left' ? 'right' : 'left';
    }, ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
    projectedTabsQuery = contentChildren(SidePanelTab, ...(ngDevMode ? [{ debugName: "projectedTabsQuery" }] : /* istanbul ignore next */ []));
    internalTabs = signal([], ...(ngDevMode ? [{ debugName: "internalTabs" }] : /* istanbul ignore next */ []));
    activeTabId = signal(null, ...(ngDevMode ? [{ debugName: "activeTabId" }] : /* istanbul ignore next */ []));
    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
    opened = output();
    closed = output();
    selectedTabContent = computed(() => {
        if (!this.isOpen() || !this.activeTabId()) {
            return null;
        }
        const activeTab = this.internalTabs().find(tab => tab.tabId === this.activeTabId());
        return activeTab ? activeTab.content : null;
    }, ...(ngDevMode ? [{ debugName: "selectedTabContent" }] : /* istanbul ignore next */ []));
    constructor() {
        effect(() => {
            const projectedTabs = this.projectedTabsQuery();
            this.internalTabs.set(projectedTabs.map(tabComp => ({
                tabId: tabComp.tabId(),
                label: tabComp.label(),
                icon: tabComp.icon(),
                content: tabComp.content(),
            })));
            const currentActiveId = this.activeTabId();
            const tabsArray = this.internalTabs();
            if (tabsArray.length === 0 && this.isOpen()) {
                this.isOpen.set(false);
                this.activeTabId.set(null);
            }
            else if (currentActiveId && !tabsArray.find(t => t.tabId === currentActiveId)) {
                this.activeTabId.set(null);
            }
        });
    }
    toggleTab(tabId) {
        if (!this.isOpen()) {
            this.activeTabId.set(tabId);
            this.isOpen.set(true);
            this.opened.emit();
        }
        else {
            if (this.activeTabId() === tabId) {
                this.close();
            }
            else {
                this.activeTabId.set(tabId);
            }
        }
    }
    close() {
        this.isOpen.set(false);
        this.closed.emit();
    }
    isTemplateRef(value) {
        return value instanceof TemplateRef;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SidePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: SidePanel, isStandalone: true, selector: "ngs-side-panel", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { properties: { "class.panel-open": "isOpen()", "class.position-right": "isPositionRight()" }, classAttribute: "ngs-side-panel" }, queries: [{ propertyName: "projectedTabsQuery", predicate: SidePanelTab, isSignal: true }], exportAs: ["ngsSidePanel"], ngImport: i0, template: "<div class=\"button-strip flex flex-col items-center gap-1 z-10\">\n  @for (tab of internalTabs(); track tab.tabId) {\n    <button\n      ngsIconButton\n      [attr.aria-label]=\"tab.label\"\n      [ngsTooltip]=\"tab.label\"\n      [ngsTooltipPosition]=\"tooltipPosition()\"\n      ngsTooltipShowDelay=\"500\"\n      [class.is-active]=\"activeTabId() === tab.tabId\"\n      (click)=\"toggleTab(tab.tabId)\"\n      class=\"button\"\n    >\n      @if (isTemplateRef(tab.icon)) {\n        <ng-container [ngTemplateOutlet]=\"tab.icon\"/>\n      } @else if (typeof tab.icon === 'string' && tab.icon) {\n        <ngs-icon [name]=\"tab.icon\"/>\n      } @else {\n        <span class=\"text-sm\">{{ tab.label.substring(0, 2) }}</span>\n      }\n    </button>\n  }\n</div>\n\n<div class=\"wrapper\" [class.open]=\"isOpen()\">\n  @if (isOpen() && activeTabId()) {\n    @if (selectedTabContent(); as content) {\n      <ng-container [ngTemplateOutlet]=\"content\"/>\n    } @else if (activeTabId() && !selectedTabContent()) {\n      <p class=\"text-neutral-500\">No content was found for this tab.</p>\n    }\n  }\n</div>\n", styles: [":host{--ngs-side-panel-button-strip-width: calc(var(--spacing, .25rem) * 14);--ngs-side-panel-content-width: 320px;--ngs-side-panel-offset-y: 0;--ngs-side-panel-content-bg: none;--ngs-side-panel-transition-timing: .2s;--ngs-side-panel-button-active-bg: var(--ngs-nav-item-active-bg);--ngs-side-panel-button-active-color: var(--ngs-nav-item-active-color);display:block;position:relative;height:100%;overflow:hidden;width:var(--ngs-side-panel-button-strip-width);transition:width var(--ngs-side-panel-transition-timing) ease-in-out}:host.panel-open{flex:none}:host.panel-open .button.is-active{background:var(--ngs-side-panel-button-active-bg);color:var(--ngs-side-panel-button-active-color)}:host.panel-open{width:calc(var(--ngs-side-panel-button-strip-width) + var(--ngs-side-panel-content-width))}:host .button-strip{position:absolute;top:var(--ngs-side-panel-offset-y);left:0;bottom:var(--ngs-side-panel-offset-y);width:var(--ngs-side-panel-button-strip-width);z-index:10}:host .wrapper{position:absolute;top:var(--ngs-side-panel-offset-y);bottom:var(--ngs-side-panel-offset-y);width:var(--ngs-side-panel-content-width);opacity:0;visibility:hidden;pointer-events:none;left:var(--ngs-side-panel-button-strip-width);transform:translate(-100%);transition:opacity var(--ngs-side-panel-transition-timing) ease-in-out,transform var(--ngs-side-panel-transition-timing) ease-in-out,visibility 0s linear var(--ngs-side-panel-transition-timing);z-index:5;overflow:hidden}:host .wrapper.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0);background:var(--ngs-side-panel-content-bg);transition:opacity var(--ngs-side-panel-transition-timing) ease-in-out,transform var(--ngs-side-panel-transition-timing) ease-in-out,visibility 0s linear 0s}:host.position-right .button-strip{left:auto;right:0}:host.position-right .wrapper{left:auto;right:var(--ngs-side-panel-button-strip-width);transform:translate(100%)}:host.position-right .wrapper.open{transform:translate(0)}:host .inner-content{width:100%;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Tooltip, selector: "[ngsTooltip]", inputs: ["ngsTooltip", "ngsTooltipPosition", "ngsTooltipClass", "ngsTooltipShowDelay", "ngsTooltipHideDelay", "ngsTooltipOffset", "ngsTooltipPositionAtOrigin", "ngsTooltipDisabled"], exportAs: ["ngsTooltip"] }, { 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SidePanel, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-side-panel', exportAs: 'ngsSidePanel', imports: [
                        CommonModule,
                        Tooltip,
                        Icon,
                        Button,
                    ], host: {
                        'class': 'ngs-side-panel',
                        '[class.panel-open]': 'isOpen()',
                        '[class.position-right]': 'isPositionRight()',
                    }, template: "<div class=\"button-strip flex flex-col items-center gap-1 z-10\">\n  @for (tab of internalTabs(); track tab.tabId) {\n    <button\n      ngsIconButton\n      [attr.aria-label]=\"tab.label\"\n      [ngsTooltip]=\"tab.label\"\n      [ngsTooltipPosition]=\"tooltipPosition()\"\n      ngsTooltipShowDelay=\"500\"\n      [class.is-active]=\"activeTabId() === tab.tabId\"\n      (click)=\"toggleTab(tab.tabId)\"\n      class=\"button\"\n    >\n      @if (isTemplateRef(tab.icon)) {\n        <ng-container [ngTemplateOutlet]=\"tab.icon\"/>\n      } @else if (typeof tab.icon === 'string' && tab.icon) {\n        <ngs-icon [name]=\"tab.icon\"/>\n      } @else {\n        <span class=\"text-sm\">{{ tab.label.substring(0, 2) }}</span>\n      }\n    </button>\n  }\n</div>\n\n<div class=\"wrapper\" [class.open]=\"isOpen()\">\n  @if (isOpen() && activeTabId()) {\n    @if (selectedTabContent(); as content) {\n      <ng-container [ngTemplateOutlet]=\"content\"/>\n    } @else if (activeTabId() && !selectedTabContent()) {\n      <p class=\"text-neutral-500\">No content was found for this tab.</p>\n    }\n  }\n</div>\n", styles: [":host{--ngs-side-panel-button-strip-width: calc(var(--spacing, .25rem) * 14);--ngs-side-panel-content-width: 320px;--ngs-side-panel-offset-y: 0;--ngs-side-panel-content-bg: none;--ngs-side-panel-transition-timing: .2s;--ngs-side-panel-button-active-bg: var(--ngs-nav-item-active-bg);--ngs-side-panel-button-active-color: var(--ngs-nav-item-active-color);display:block;position:relative;height:100%;overflow:hidden;width:var(--ngs-side-panel-button-strip-width);transition:width var(--ngs-side-panel-transition-timing) ease-in-out}:host.panel-open{flex:none}:host.panel-open .button.is-active{background:var(--ngs-side-panel-button-active-bg);color:var(--ngs-side-panel-button-active-color)}:host.panel-open{width:calc(var(--ngs-side-panel-button-strip-width) + var(--ngs-side-panel-content-width))}:host .button-strip{position:absolute;top:var(--ngs-side-panel-offset-y);left:0;bottom:var(--ngs-side-panel-offset-y);width:var(--ngs-side-panel-button-strip-width);z-index:10}:host .wrapper{position:absolute;top:var(--ngs-side-panel-offset-y);bottom:var(--ngs-side-panel-offset-y);width:var(--ngs-side-panel-content-width);opacity:0;visibility:hidden;pointer-events:none;left:var(--ngs-side-panel-button-strip-width);transform:translate(-100%);transition:opacity var(--ngs-side-panel-transition-timing) ease-in-out,transform var(--ngs-side-panel-transition-timing) ease-in-out,visibility 0s linear var(--ngs-side-panel-transition-timing);z-index:5;overflow:hidden}:host .wrapper.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0);background:var(--ngs-side-panel-content-bg);transition:opacity var(--ngs-side-panel-transition-timing) ease-in-out,transform var(--ngs-side-panel-transition-timing) ease-in-out,visibility 0s linear 0s}:host.position-right .button-strip{left:auto;right:0}:host.position-right .wrapper{left:auto;right:var(--ngs-side-panel-button-strip-width);transform:translate(100%)}:host.position-right .wrapper.open{transform:translate(0)}:host .inner-content{width:100%;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], projectedTabsQuery: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SidePanelTab), { isSignal: true }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });

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

export { SidePanel, SidePanelTab };
//# sourceMappingURL=ngstarter-ui-components-side-panel.mjs.map
