import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
import { SymbolRegistry, SymbolComponent, withSymbols } from '@agorapulse/ui-symbol';
import * as i0 from '@angular/core';
import { inject, input, signal, ChangeDetectionStrategy, Component, contentChildren, viewChild, output, linkedSignal, effect } from '@angular/core';
import { CounterComponent } from '@agorapulse/ui-components/counter';
import { apFeatureLock } from '@agorapulse/ui-symbol/icons';

class TabComponent {
    symbolRegistry = inject(SymbolRegistry);
    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
    counter = input(...(ngDevMode ? [undefined, { debugName: "counter" }] : /* istanbul ignore next */ []));
    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
    featureLocked = input(false, ...(ngDevMode ? [{ debugName: "featureLocked" }] : /* istanbul ignore next */ []));
    symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : /* istanbul ignore next */ []));
    isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
    tabIndex = signal(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
    constructor() {
        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TabComponent, isStandalone: true, selector: "ap-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, featureLocked: { classPropertyName: "featureLocked", publicName: "featureLocked", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isActive()) {\n    <div\n        role=\"tabpanel\"\n        class=\"ap-tab__panel\"\n        [attr.id]=\"'ap-tab-panel-' + tabIndex()\"\n        [attr.aria-labelledby]=\"'ap-tab-' + tabIndex()\">\n        <ng-content />\n    </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TabComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tab', template: "@if (isActive()) {\n    <div\n        role=\"tabpanel\"\n        class=\"ap-tab__panel\"\n        [attr.id]=\"'ap-tab-panel-' + tabIndex()\"\n        [attr.aria-labelledby]=\"'ap-tab-' + tabIndex()\">\n        <ng-content />\n    </div>\n}\n" }]
        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], counter: [{ type: i0.Input, args: [{ isSignal: true, alias: "counter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], featureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureLocked", required: false }] }], symbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolId", required: false }] }] } });

class TabsComponent {
    symbolRegistry = inject(SymbolRegistry);
    tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
    indicator = viewChild('indicator', ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
    tabNav = viewChild('tabNav', ...(ngDevMode ? [{ debugName: "tabNav" }] : /* istanbul ignore next */ []));
    selectedIndex = input(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
    tabChange = output();
    // Unique ID per component instance to prevent DOM ID conflicts
    static nextId = 0;
    componentId = signal(`ap-tabs-${TabsComponent.nextId++}`, ...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
    activeTabIndex = linkedSignal(() => this.selectedIndex(), ...(ngDevMode ? [{ debugName: "activeTabIndex" }] : /* istanbul ignore next */ []));
    updateIndicatorPositionEffect = effect(() => {
        const activeIndex = this.activeTabIndex();
        const tabs = this.tabs();
        tabs.forEach((tab, index) => {
            try {
                tab.label();
            }
            catch {
                /* required input not yet bound */
            }
            tab.isActive.set(index === activeIndex);
            tab.tabIndex.set(index);
        });
        this.updateIndicatorPosition(activeIndex);
    }, ...(ngDevMode ? [{ debugName: "updateIndicatorPositionEffect" }] : /* istanbul ignore next */ []));
    constructor() {
        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
    }
    selectTab(index) {
        if (this.disabled() || index < 0 || index >= this.tabs().length) {
            return;
        }
        const tab = this.tabs()[index];
        if (tab?.disabled()) {
            return;
        }
        this.activeTabIndex.set(index);
        this.tabChange.emit({ index, tab });
    }
    onKeyDown(event, index) {
        switch (event.key) {
            case 'Enter':
            case ' ':
                event.preventDefault();
                this.selectTab(index);
                break;
        }
    }
    focusTab(index) {
        const tabButton = document.querySelector(`[data-tab-index="${index}"]`);
        tabButton?.focus();
    }
    updateIndicatorPosition(activeIndex) {
        const indicatorEl = this.indicator()?.nativeElement;
        const tabNavEl = this.tabNav()?.nativeElement;
        if (!indicatorEl || !tabNavEl) {
            // If elements aren't ready, try again in the next tick
            setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);
            return;
        }
        const activeTab = tabNavEl.querySelector(`[data-tab-index="${activeIndex}"]`);
        if (!activeTab) {
            // If tab button isn't ready, try again in the next tick
            setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);
            return;
        }
        const tabRect = activeTab.getBoundingClientRect();
        const navRect = tabNavEl.getBoundingClientRect();
        const left = tabRect.left - navRect.left;
        const width = tabRect.width;
        // Check if active tab is feature locked to change indicator color
        const isFeatureLocked = this.tabs()[activeIndex]?.featureLocked();
        const color = isFeatureLocked
            ? 'var(--comp-tabs-tab-feature-locked-indicator-color)'
            : 'var(--comp-tabs-tab-active-indicator-color)';
        indicatorEl.style.transform = `translateX(${left}px)`;
        indicatorEl.style.width = `${width}px`;
        indicatorEl.style.backgroundColor = color;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TabsComponent, isStandalone: true, selector: "ap-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, providers: [withSymbols(apFeatureLock)], queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }, { propertyName: "tabNav", first: true, predicate: ["tabNav"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ap-tabs\">\n    <!-- Tab Navigation -->\n    <div\n        #tabNav\n        class=\"ap-tabs__nav\"\n        role=\"tablist\">\n        @for (tab of tabs(); track $index) {\n            <button\n                type=\"button\"\n                role=\"tab\"\n                class=\"ap-tabs__tab\"\n                [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n                [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n                [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n                [attr.aria-selected]=\"activeTabIndex() === $index\"\n                [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n                [attr.id]=\"componentId() + '-tab-' + $index\"\n                [attr.data-tab-index]=\"$index\"\n                [disabled]=\"disabled() || tab.disabled()\"\n                [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n                (click)=\"selectTab($index)\"\n                (keydown)=\"onKeyDown($event, $index)\">\n                <div class=\"ap-tabs__tab-content\">\n                    <div class=\"ap-tabs__tab-header\">\n                        @if (tab.symbolId()) {\n                            <ap-symbol\n                                class=\"ap-tabs__tab-icon\"\n                                size=\"sm\"\n                                [symbolId]=\"tab.symbolId()\"\n                                [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n                        }\n                        <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n                        @if (tab.featureLocked()) {\n                            <ap-symbol\n                                symbolId=\"feature-lock\"\n                                class=\"ap-tabs__tab-feature-lock\" />\n                        }\n                        @if (tab.counter() && !tab.featureLocked()) {\n                            <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n                                {{ tab.counter() }}\n                            </ap-counter>\n                        }\n                    </div>\n                </div>\n            </button>\n        }\n        <!-- Sliding indicator -->\n        <div\n            #indicator\n            class=\"ap-tabs__indicator\"></div>\n    </div>\n\n    <!-- Tab Panels -->\n    <div class=\"ap-tabs__content\">\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:block;width:100%}.ap-tabs{display:flex;flex-direction:column;width:100%}.ap-tabs .ap-tabs__nav{display:flex;align-items:center;border-bottom:1px solid var(--comp-tabs-border-color);position:relative}.ap-tabs .ap-tabs__tab{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-family:var(--comp-tabs-text-font-family);text-align:center;position:relative;white-space:nowrap;padding:var(--comp-tabs-tab-padding);font-size:var(--comp-tabs-tab-font-size);line-height:var(--comp-tabs-tab-line-height);min-height:var(--comp-tabs-tab-min-height);color:var(--comp-tabs-tab-text-color-default)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-content{display:flex;flex-direction:column;align-items:center;gap:var(--comp-tabs-tab-content-gap)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-header{display:flex;align-items:center;gap:var(--comp-tabs-tab-header-gap)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-label{font-weight:inherit;font-size:inherit;line-height:inherit}.ap-tabs .ap-tabs__tab .ap-tabs__tab-feature-lock{width:16px;height:16px;color:var(--comp-tabs-tab-feature-lock-color)}.ap-tabs .ap-tabs__tab:hover:not(:disabled):not(.ap-tabs .ap-tabs__tab.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-hover-background-color)}.ap-tabs .ap-tabs__tab:focus{outline:none}.ap-tabs .ap-tabs__tab:focus-visible:not(.ap-tabs .ap-tabs__tab.ap-tabs__tab--active){outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius);background-color:var(--comp-tabs-tab-focus-background-color)}.ap-tabs .ap-tabs__tab:active:not(:disabled):not(.ap-tabs .ap-tabs__tab.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-active-background-color)}.ap-tabs .ap-tabs__tab:disabled{cursor:not-allowed;opacity:.5}.ap-tabs .ap-tabs__tab.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-active);text-shadow:.5px 0 0 currentColor}.ap-tabs .ap-tabs__tab.ap-tabs__tab--active:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--disabled{color:var(--comp-tabs-tab-text-color-disabled);cursor:not-allowed}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked:hover:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-hover-background-color)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked:focus-visible:not(.ap-tabs__tab--active){color:var(--comp-tabs-tab-text-color-feature-locked-focus);background-color:var(--comp-tabs-tab-feature-locked-focus-background-color)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked:active:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-active-background-color)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-feature-locked-active);text-shadow:.5px 0 0 currentColor}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked.ap-tabs__tab--active:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs .ap-tabs__indicator{position:absolute;bottom:-1px;height:4px;background-color:var(--comp-tabs-tab-active-indicator-color);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1);transform-origin:left}.ap-tabs .ap-tabs__content{flex:1;width:100%}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TabsComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tabs', imports: [CounterComponent, SymbolComponent], providers: [withSymbols(apFeatureLock)], template: "<div class=\"ap-tabs\">\n    <!-- Tab Navigation -->\n    <div\n        #tabNav\n        class=\"ap-tabs__nav\"\n        role=\"tablist\">\n        @for (tab of tabs(); track $index) {\n            <button\n                type=\"button\"\n                role=\"tab\"\n                class=\"ap-tabs__tab\"\n                [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n                [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n                [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n                [attr.aria-selected]=\"activeTabIndex() === $index\"\n                [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n                [attr.id]=\"componentId() + '-tab-' + $index\"\n                [attr.data-tab-index]=\"$index\"\n                [disabled]=\"disabled() || tab.disabled()\"\n                [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n                (click)=\"selectTab($index)\"\n                (keydown)=\"onKeyDown($event, $index)\">\n                <div class=\"ap-tabs__tab-content\">\n                    <div class=\"ap-tabs__tab-header\">\n                        @if (tab.symbolId()) {\n                            <ap-symbol\n                                class=\"ap-tabs__tab-icon\"\n                                size=\"sm\"\n                                [symbolId]=\"tab.symbolId()\"\n                                [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n                        }\n                        <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n                        @if (tab.featureLocked()) {\n                            <ap-symbol\n                                symbolId=\"feature-lock\"\n                                class=\"ap-tabs__tab-feature-lock\" />\n                        }\n                        @if (tab.counter() && !tab.featureLocked()) {\n                            <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n                                {{ tab.counter() }}\n                            </ap-counter>\n                        }\n                    </div>\n                </div>\n            </button>\n        }\n        <!-- Sliding indicator -->\n        <div\n            #indicator\n            class=\"ap-tabs__indicator\"></div>\n    </div>\n\n    <!-- Tab Panels -->\n    <div class=\"ap-tabs__content\">\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:block;width:100%}.ap-tabs{display:flex;flex-direction:column;width:100%}.ap-tabs .ap-tabs__nav{display:flex;align-items:center;border-bottom:1px solid var(--comp-tabs-border-color);position:relative}.ap-tabs .ap-tabs__tab{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-family:var(--comp-tabs-text-font-family);text-align:center;position:relative;white-space:nowrap;padding:var(--comp-tabs-tab-padding);font-size:var(--comp-tabs-tab-font-size);line-height:var(--comp-tabs-tab-line-height);min-height:var(--comp-tabs-tab-min-height);color:var(--comp-tabs-tab-text-color-default)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-content{display:flex;flex-direction:column;align-items:center;gap:var(--comp-tabs-tab-content-gap)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-header{display:flex;align-items:center;gap:var(--comp-tabs-tab-header-gap)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-label{font-weight:inherit;font-size:inherit;line-height:inherit}.ap-tabs .ap-tabs__tab .ap-tabs__tab-feature-lock{width:16px;height:16px;color:var(--comp-tabs-tab-feature-lock-color)}.ap-tabs .ap-tabs__tab:hover:not(:disabled):not(.ap-tabs .ap-tabs__tab.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-hover-background-color)}.ap-tabs .ap-tabs__tab:focus{outline:none}.ap-tabs .ap-tabs__tab:focus-visible:not(.ap-tabs .ap-tabs__tab.ap-tabs__tab--active){outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius);background-color:var(--comp-tabs-tab-focus-background-color)}.ap-tabs .ap-tabs__tab:active:not(:disabled):not(.ap-tabs .ap-tabs__tab.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-active-background-color)}.ap-tabs .ap-tabs__tab:disabled{cursor:not-allowed;opacity:.5}.ap-tabs .ap-tabs__tab.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-active);text-shadow:.5px 0 0 currentColor}.ap-tabs .ap-tabs__tab.ap-tabs__tab--active:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--disabled{color:var(--comp-tabs-tab-text-color-disabled);cursor:not-allowed}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked:hover:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-hover-background-color)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked:focus-visible:not(.ap-tabs__tab--active){color:var(--comp-tabs-tab-text-color-feature-locked-focus);background-color:var(--comp-tabs-tab-feature-locked-focus-background-color)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked:active:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-active-background-color)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-feature-locked-active);text-shadow:.5px 0 0 currentColor}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked.ap-tabs__tab--active:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs .ap-tabs__indicator{position:absolute;bottom:-1px;height:4px;background-color:var(--comp-tabs-tab-active-indicator-color);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1);transform-origin:left}.ap-tabs .ap-tabs__content{flex:1;width:100%}\n"] }]
        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], indicator: [{ type: i0.ViewChild, args: ['indicator', { isSignal: true }] }], tabNav: [{ type: i0.ViewChild, args: ['tabNav', { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });

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

export { TabComponent, TabsComponent };
//# sourceMappingURL=agorapulse-ui-components-tabs.mjs.map
