@tailng-ui/primitives 0.1.0

package/src/lib/navigation/tabs/tng-tabs.js

@@ -0,0 +1,1350 @@
+import { __decorate } from "tslib";
+import { Directive, ElementRef, HostBinding, HostListener, inject, input, output, } from '@angular/core';
+import { createTngIdFactory } from '@tailng-ui/cdk';
+const createTabId = createTngIdFactory('tng-tab');
+const createPanelId = createTngIdFactory('tng-tab-panel');
+let nextRegistrationOrder = 0;
+function normalizeBooleanInput(value) {
+    if (typeof value === 'boolean') {
+        return value;
+    }
+    if (typeof value === 'string') {
+        const normalized = value.trim().toLowerCase();
+        if (normalized === '' || normalized === 'true') {
+            return true;
+        }
+        if (normalized === 'false') {
+            return false;
+        }
+    }
+    return false;
+}
+function normalizeOptionalBooleanInput(value) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    return normalizeBooleanInput(value);
+}
+function normalizeDirectionInput(value) {
+    if (value === 'ltr' || value === 'rtl' || value === 'auto') {
+        return value;
+    }
+    return 'auto';
+}
+function normalizeOrientationInput(value) {
+    return value === 'vertical' ? 'vertical' : 'horizontal';
+}
+function normalizeActivationInput(value) {
+    return value === 'manual' ? 'manual' : 'auto';
+}
+function normalizeScrollButtonsInput(value) {
+    if (value === 'auto' || value === 'on' || value === 'off') {
+        return value;
+    }
+    if (value === '' || value === true || value === 'true') {
+        return 'auto';
+    }
+    return 'off';
+}
+function normalizeOptionalValueInput(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (value === null) {
+        return null;
+    }
+    if (typeof value === 'number' || typeof value === 'string') {
+        return value;
+    }
+    return String(value);
+}
+function normalizeOptionalStringInput(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (value === null) {
+        return null;
+    }
+    return String(value);
+}
+function valuesEqual(a, b) {
+    return a === b;
+}
+function compareByDomPosition(aElement, bElement, aOrder, bOrder) {
+    if (aElement === bElement) {
+        return 0;
+    }
+    const relativePosition = aElement.compareDocumentPosition(bElement);
+    if (relativePosition & Node.DOCUMENT_POSITION_FOLLOWING) {
+        return -1;
+    }
+    if (relativePosition & Node.DOCUMENT_POSITION_PRECEDING) {
+        return 1;
+    }
+    return aOrder - bOrder;
+}
+function isFocusableInteractiveElement(element) {
+    return (element.matches('a[href]') ||
+        element.matches('button') ||
+        element.matches('input') ||
+        element.matches('select') ||
+        element.matches('textarea') ||
+        element.matches('[tabindex]') ||
+        element.matches('[contenteditable="true"]'));
+}
+let TngTabs = class TngTabs {
+    hostRef = inject(ElementRef);
+    tabs = new Set();
+    panels = new Set();
+    tabList = null;
+    scrollPrevControl = null;
+    scrollNextControl = null;
+    uncontrolledValue = null;
+    focusedValue = null;
+    hasUserSelection = false;
+    initialized = false;
+    value = input(undefined, {
+        transform: normalizeOptionalValueInput,
+    });
+    defaultValue = input(undefined, {
+        transform: normalizeOptionalValueInput,
+    });
+    activation = input('auto', {
+        transform: normalizeActivationInput,
+    });
+    orientation = input('horizontal', {
+        transform: normalizeOrientationInput,
+    });
+    scrollButtons = input('off', {
+        transform: normalizeScrollButtonsInput,
+    });
+    loop = input(true, {
+        transform: normalizeBooleanInput,
+    });
+    dir = input('auto', {
+        transform: normalizeDirectionInput,
+    });
+    disabled = input(false, {
+        transform: normalizeBooleanInput,
+    });
+    lazy = input(undefined, {
+        transform: normalizeOptionalBooleanInput,
+    });
+    keepAlive = input(undefined, {
+        transform: normalizeOptionalBooleanInput,
+    });
+    valueChange = output();
+    tabChange = output();
+    focusChange = output();
+    dataSlot = 'tabs';
+    get dataOrientation() {
+        return this.orientation();
+    }
+    get dataActivation() {
+        return this.activation();
+    }
+    get dataDisabled() {
+        return this.disabled() ? 'true' : 'false';
+    }
+    ngDoCheck() {
+        this.syncStateFromRegistry();
+    }
+    isDisabled() {
+        return this.disabled();
+    }
+    isKeepAliveEnabled() {
+        return this.keepAlive() ?? true;
+    }
+    isLazyEnabled() {
+        return this.lazy() ?? false;
+    }
+    select(value) {
+        const targetTab = this.findEnabledTabByValue(value);
+        if (targetTab === null) {
+            return;
+        }
+        this.requestSelection(targetTab, 'programmatic');
+    }
+    focus(value) {
+        const targetTab = this.findEnabledTabByValue(value);
+        if (targetTab === null) {
+            return;
+        }
+        this.moveFocusToTab(targetTab, 'programmatic');
+        if (this.activation() === 'auto') {
+            this.requestSelection(targetTab, 'programmatic');
+        }
+    }
+    next() {
+        this.moveFocusFromCurrentTab('next', 'programmatic');
+    }
+    prev() {
+        this.moveFocusFromCurrentTab('prev', 'programmatic');
+    }
+    registerTab(tab) {
+        this.tabs.add(tab);
+    }
+    unregisterTab(tab) {
+        const orderedTabs = this.getOrderedTabs();
+        const removedIndex = orderedTabs.indexOf(tab);
+        const removedValue = tab.getValue();
+        const selectedValue = this.getEffectiveSelectedValue();
+        const focusedValue = this.resolveCurrentTabStopValue();
+        this.tabs.delete(tab);
+        if (selectedValue !== null && valuesEqual(selectedValue, removedValue)) {
+            const nextSelectedValue = this.resolveNeighborValueOnRemoval(orderedTabs, removedIndex);
+            this.applyLifecycleSelection(nextSelectedValue);
+        }
+        if (focusedValue !== null && valuesEqual(focusedValue, removedValue)) {
+            const nextFocusedValue = this.resolveNeighborValueOnRemoval(orderedTabs, removedIndex);
+            this.focusedValue = nextFocusedValue;
+        }
+        this.syncStateFromRegistry();
+    }
+    notifyTabMutated(tab) {
+        const selectedValue = this.getEffectiveSelectedValue();
+        if (selectedValue !== null && valuesEqual(selectedValue, tab.getValue()) && tab.isDisabledInContext()) {
+            const replacement = this.resolveNeighborForDisabledTab(tab);
+            this.applyLifecycleSelection(replacement);
+        }
+        const focusedValue = this.resolveCurrentTabStopValue();
+        if (focusedValue !== null && valuesEqual(focusedValue, tab.getValue()) && tab.isDisabledInContext()) {
+            this.focusedValue = this.resolveNeighborForDisabledTab(tab);
+        }
+        this.syncStateFromRegistry();
+    }
+    registerPanel(panel) {
+        this.panels.add(panel);
+    }
+    unregisterPanel(panel) {
+        this.panels.delete(panel);
+        this.syncStateFromRegistry();
+    }
+    notifyPanelMutated() {
+        this.syncStateFromRegistry();
+    }
+    registerScrollPrevControl(control) {
+        this.scrollPrevControl = control;
+    }
+    unregisterScrollPrevControl(control) {
+        if (this.scrollPrevControl === control) {
+            this.scrollPrevControl = null;
+        }
+    }
+    registerScrollNextControl(control) {
+        this.scrollNextControl = control;
+    }
+    unregisterScrollNextControl(control) {
+        if (this.scrollNextControl === control) {
+            this.scrollNextControl = null;
+        }
+    }
+    registerTabList(tabList) {
+        this.tabList = tabList;
+    }
+    unregisterTabList(tabList) {
+        if (this.tabList !== tabList) {
+            return;
+        }
+        this.tabList = null;
+    }
+    onTabListScrolled() { }
+    onTabListFocused() {
+        if (this.disabled()) {
+            return;
+        }
+        const enabledTabs = this.getEnabledTabs();
+        if (enabledTabs.length === 0) {
+            return;
+        }
+        const currentTabStopValue = this.resolveCurrentTabStopValue(enabledTabs);
+        const currentTab = this.findEnabledTabByValue(currentTabStopValue, enabledTabs) ??
+            enabledTabs[0] ??
+            null;
+        if (currentTab === null) {
+            return;
+        }
+        currentTab.focusSelf();
+    }
+    handleTabListWheel(event) {
+        if (this.orientation() !== 'horizontal') {
+            return;
+        }
+        if (!this.isTabListOverflowing()) {
+            return;
+        }
+        const dominantDelta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+        if (dominantDelta === 0) {
+            return;
+        }
+        event.preventDefault();
+        this.scrollTabListBy(dominantDelta);
+    }
+    isScrollButtonHidden() {
+        return !this.shouldShowScrollButtons();
+    }
+    isScrollButtonDisabled(direction) {
+        if (this.isScrollButtonHidden()) {
+            return true;
+        }
+        const tabListElement = this.getTabListElement();
+        if (tabListElement === null) {
+            return true;
+        }
+        const maxScrollLeft = Math.max(0, tabListElement.scrollWidth - tabListElement.clientWidth);
+        if (direction === 'prev') {
+            return tabListElement.scrollLeft <= 0;
+        }
+        return tabListElement.scrollLeft >= maxScrollLeft;
+    }
+    onScrollButtonClick(direction, event) {
+        if (this.isScrollButtonDisabled(direction)) {
+            event.preventDefault();
+            return;
+        }
+        const delta = direction === 'prev' ? -this.resolveTabListScrollStep() : this.resolveTabListScrollStep();
+        this.scrollTabListBy(delta);
+        event.preventDefault();
+    }
+    getTabIndex(tab) {
+        if (this.disabled() || tab.isDisabledInContext()) {
+            return '-1';
+        }
+        const tabStop = this.resolveCurrentTabStopValue();
+        if (tabStop === null) {
+            return '-1';
+        }
+        return valuesEqual(tabStop, tab.getValue()) ? '0' : '-1';
+    }
+    isTabSelected(tab) {
+        const selectedValue = this.getEffectiveSelectedValue();
+        if (selectedValue === null) {
+            return false;
+        }
+        return valuesEqual(selectedValue, tab.getValue());
+    }
+    isTabFocused(tab) {
+        const tabStop = this.resolveCurrentTabStopValue();
+        return tabStop !== null && valuesEqual(tabStop, tab.getValue());
+    }
+    getPanelIdForTab(tab) {
+        const explicitPanelId = tab.getExplicitPanelId();
+        if (explicitPanelId !== null) {
+            return explicitPanelId;
+        }
+        const matchedPanel = this.findPanelByValue(tab.getValue());
+        if (matchedPanel !== null) {
+            return matchedPanel.getPanelId();
+        }
+        const tabs = this.getOrderedTabs();
+        const panels = this.getOrderedPanels();
+        const tabIndex = tabs.indexOf(tab);
+        if (tabIndex < 0) {
+            return null;
+        }
+        return panels[tabIndex]?.getPanelId() ?? null;
+    }
+    getTabIdForPanel(panel) {
+        const explicitLabelledById = panel.getExplicitLabelledById();
+        if (explicitLabelledById !== null) {
+            return explicitLabelledById;
+        }
+        const matchedTab = this.findTabByValue(panel.getValue());
+        if (matchedTab !== null) {
+            return matchedTab.getItemId();
+        }
+        const tabs = this.getOrderedTabs();
+        const panels = this.getOrderedPanels();
+        const panelIndex = panels.indexOf(panel);
+        if (panelIndex < 0) {
+            return null;
+        }
+        return tabs[panelIndex]?.getItemId() ?? null;
+    }
+    isPanelActive(panel) {
+        const selectedValue = this.getEffectiveSelectedValue();
+        if (selectedValue === null) {
+            return false;
+        }
+        return valuesEqual(selectedValue, panel.getValue());
+    }
+    isPanelMounted(panel) {
+        if (this.isPanelActive(panel)) {
+            panel.markActivated();
+            return true;
+        }
+        const keepAlive = panel.unmountOnExit() ? false : this.isKeepAliveEnabled();
+        if (!keepAlive) {
+            return false;
+        }
+        if (!this.isLazyEnabled()) {
+            return true;
+        }
+        return panel.hasActivated();
+    }
+    onTabFocused(tab, trigger) {
+        if (this.disabled() || tab.isDisabledInContext()) {
+            return;
+        }
+        this.setFocusedValue(tab.getValue(), trigger);
+        this.scrollTabIntoView(tab);
+    }
+    requestSelection(tab, trigger) {
+        if (this.disabled() || tab.isDisabledInContext()) {
+            return;
+        }
+        const nextValue = tab.getValue();
+        const previousValue = this.getEffectiveSelectedValue();
+        if (previousValue !== null && valuesEqual(previousValue, nextValue)) {
+            return;
+        }
+        if (!this.isControlled()) {
+            this.uncontrolledValue = nextValue;
+            this.hasUserSelection = true;
+        }
+        this.focusedValue = nextValue;
+        this.valueChange.emit(nextValue);
+        this.tabChange.emit({
+            value: nextValue,
+            previousValue,
+            trigger,
+        });
+        this.scrollTabIntoView(tab);
+        this.syncStateFromRegistry();
+    }
+    handleTabKeydown(tab, event) {
+        if (this.disabled() || tab.isDisabledInContext()) {
+            return;
+        }
+        const focusMove = this.resolveFocusMove(event.key);
+        if (focusMove !== null) {
+            event.preventDefault();
+            this.moveFocusByAction(tab, focusMove, 'keyboard');
+            return;
+        }
+        if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'Spacebar') {
+            return;
+        }
+        if (this.activation() === 'manual' || this.activation() === 'auto') {
+            event.preventDefault();
+            this.requestSelection(tab, 'keyboard');
+        }
+    }
+    resolveFocusMove(key) {
+        if (key === 'Home') {
+            return 'first';
+        }
+        if (key === 'End') {
+            return 'last';
+        }
+        if (this.orientation() === 'vertical') {
+            if (key === 'ArrowDown') {
+                return 'next';
+            }
+            if (key === 'ArrowUp') {
+                return 'prev';
+            }
+            return null;
+        }
+        if (key !== 'ArrowLeft' && key !== 'ArrowRight') {
+            return null;
+        }
+        const isRtl = this.resolveDirection() === 'rtl';
+        const moveToNext = key === (isRtl ? 'ArrowLeft' : 'ArrowRight');
+        return moveToNext ? 'next' : 'prev';
+    }
+    moveFocusByAction(sourceTab, action, trigger) {
+        const enabledTabs = this.getEnabledTabs();
+        if (enabledTabs.length === 0) {
+            return;
+        }
+        const currentIndex = enabledTabs.indexOf(sourceTab);
+        if (currentIndex < 0) {
+            return;
+        }
+        const nextTab = this.resolveFocusTarget(enabledTabs, currentIndex, action);
+        if (nextTab === null) {
+            return;
+        }
+        this.moveFocusToTab(nextTab, trigger);
+        if (this.activation() === 'auto') {
+            this.requestSelection(nextTab, trigger === 'programmatic' ? 'programmatic' : 'keyboard');
+        }
+    }
+    moveFocusToTab(tab, trigger) {
+        if (this.disabled() || tab.isDisabledInContext()) {
+            return;
+        }
+        this.setFocusedValue(tab.getValue(), trigger);
+        tab.focusSelf();
+    }
+    moveFocusFromCurrentTab(direction, trigger) {
+        const enabledTabs = this.getEnabledTabs();
+        if (enabledTabs.length === 0) {
+            return;
+        }
+        const activeElement = this.hostRef.nativeElement.ownerDocument?.activeElement ?? null;
+        const activeTab = this.findTabContainingElement(activeElement);
+        const currentTab = activeTab ?? this.findEnabledTabByValue(this.resolveCurrentTabStopValue(), enabledTabs);
+        if (currentTab === null) {
+            return;
+        }
+        const currentIndex = enabledTabs.indexOf(currentTab);
+        if (currentIndex < 0) {
+            return;
+        }
+        const nextTab = this.resolveFocusTarget(enabledTabs, currentIndex, direction);
+        if (nextTab === null) {
+            return;
+        }
+        this.moveFocusToTab(nextTab, trigger);
+        if (this.activation() === 'auto') {
+            this.requestSelection(nextTab, trigger === 'programmatic' ? 'programmatic' : 'keyboard');
+        }
+    }
+    resolveFocusTarget(enabledTabs, currentIndex, action) {
+        if (enabledTabs.length === 0 || currentIndex < 0) {
+            return null;
+        }
+        if (action === 'first') {
+            return enabledTabs[0] ?? null;
+        }
+        if (action === 'last') {
+            return enabledTabs[enabledTabs.length - 1] ?? null;
+        }
+        if (action === 'next') {
+            if (currentIndex + 1 < enabledTabs.length) {
+                return enabledTabs[currentIndex + 1] ?? null;
+            }
+            return this.loop() ? (enabledTabs[0] ?? null) : (enabledTabs[currentIndex] ?? null);
+        }
+        if (currentIndex - 1 >= 0) {
+            return enabledTabs[currentIndex - 1] ?? null;
+        }
+        return this.loop()
+            ? (enabledTabs[enabledTabs.length - 1] ?? null)
+            : (enabledTabs[currentIndex] ?? null);
+    }
+    setFocusedValue(value, trigger) {
+        const previousValue = this.focusedValue;
+        if (previousValue !== null && valuesEqual(previousValue, value)) {
+            return;
+        }
+        this.focusedValue = value;
+        this.focusChange.emit({
+            value,
+            previousValue,
+            trigger,
+        });
+    }
+    applyLifecycleSelection(nextValue) {
+        if (this.isControlled()) {
+            return;
+        }
+        this.uncontrolledValue = nextValue;
+        if (nextValue !== null) {
+            this.focusedValue = nextValue;
+        }
+    }
+    resolveDirection() {
+        const configuredDirection = this.dir();
+        if (configuredDirection !== 'auto') {
+            return configuredDirection;
+        }
+        const host = this.hostRef.nativeElement;
+        const nearestDirection = host.closest('[dir]')?.getAttribute('dir') ??
+            host.ownerDocument?.documentElement.getAttribute('dir');
+        return nearestDirection?.toLowerCase() === 'rtl' ? 'rtl' : 'ltr';
+    }
+    getSelectedValue() {
+        if (this.isControlled()) {
+            return this.value();
+        }
+        return this.uncontrolledValue;
+    }
+    getEffectiveSelectedValue(enabledTabs = this.getEnabledTabs()) {
+        if (enabledTabs.length === 0) {
+            return null;
+        }
+        const selectedValue = this.getSelectedValue();
+        if (selectedValue !== null && this.findEnabledTabByValue(selectedValue, enabledTabs) !== null) {
+            return selectedValue;
+        }
+        return enabledTabs[0]?.getValue() ?? null;
+    }
+    resolveCurrentTabStopValue(enabledTabs = this.getEnabledTabs()) {
+        if (enabledTabs.length === 0) {
+            return null;
+        }
+        if (this.focusedValue !== null && this.findEnabledTabByValue(this.focusedValue, enabledTabs) !== null) {
+            return this.focusedValue;
+        }
+        const selectedValue = this.getEffectiveSelectedValue(enabledTabs);
+        if (selectedValue !== null) {
+            return selectedValue;
+        }
+        return enabledTabs[0]?.getValue() ?? null;
+    }
+    syncStateFromRegistry() {
+        const enabledTabs = this.getEnabledTabs();
+        if (!this.initialized) {
+            this.initialized = true;
+            if (!this.isControlled()) {
+                const defaultValue = this.defaultValue();
+                if (defaultValue !== undefined && defaultValue !== null) {
+                    this.uncontrolledValue = this.findEnabledTabByValue(defaultValue, enabledTabs)?.getValue() ?? null;
+                }
+                else {
+                    this.uncontrolledValue = enabledTabs[0]?.getValue() ?? null;
+                }
+            }
+        }
+        if (enabledTabs.length === 0) {
+            if (!this.isControlled()) {
+                this.uncontrolledValue = null;
+            }
+            this.focusedValue = null;
+            return;
+        }
+        if (!this.isControlled()) {
+            const defaultValue = this.defaultValue();
+            if (!this.hasUserSelection && defaultValue !== undefined && defaultValue !== null) {
+                const defaultTab = this.findEnabledTabByValue(defaultValue, enabledTabs);
+                if (defaultTab !== null) {
+                    this.uncontrolledValue = defaultTab.getValue();
+                }
+                else if (this.uncontrolledValue === null) {
+                    this.uncontrolledValue = enabledTabs[0]?.getValue() ?? null;
+                }
+            }
+            else {
+                const current = this.uncontrolledValue;
+                if (current === null || this.findEnabledTabByValue(current, enabledTabs) === null) {
+                    this.uncontrolledValue = enabledTabs[0]?.getValue() ?? null;
+                }
+            }
+        }
+        const selectedValue = this.getEffectiveSelectedValue(enabledTabs);
+        if (selectedValue !== null) {
+            this.findPanelByValue(selectedValue)?.markActivated();
+        }
+        this.focusedValue = this.resolveCurrentTabStopValue(enabledTabs);
+    }
+    resolveNeighborValueOnRemoval(orderedTabs, removedIndex) {
+        if (removedIndex < 0) {
+            return this.getEnabledTabs()[0]?.getValue() ?? null;
+        }
+        for (let index = removedIndex + 1; index < orderedTabs.length; index += 1) {
+            const candidate = orderedTabs[index];
+            if (candidate !== undefined && !candidate.isDisabledInContext()) {
+                return candidate.getValue();
+            }
+        }
+        for (let index = removedIndex - 1; index >= 0; index -= 1) {
+            const candidate = orderedTabs[index];
+            if (candidate !== undefined && !candidate.isDisabledInContext()) {
+                return candidate.getValue();
+            }
+        }
+        return null;
+    }
+    resolveNeighborForDisabledTab(tab) {
+        const orderedTabs = this.getOrderedTabs();
+        const currentIndex = orderedTabs.indexOf(tab);
+        if (currentIndex < 0) {
+            return this.getEnabledTabs()[0]?.getValue() ?? null;
+        }
+        for (let index = currentIndex - 1; index >= 0; index -= 1) {
+            const candidate = orderedTabs[index];
+            if (candidate !== undefined && !candidate.isDisabledInContext()) {
+                return candidate.getValue();
+            }
+        }
+        for (let index = currentIndex + 1; index < orderedTabs.length; index += 1) {
+            const candidate = orderedTabs[index];
+            if (candidate !== undefined && !candidate.isDisabledInContext()) {
+                return candidate.getValue();
+            }
+        }
+        return null;
+    }
+    isControlled() {
+        const value = this.value();
+        return value !== undefined && value !== null;
+    }
+    getOrderedTabs() {
+        const tabs = Array.from(this.tabs);
+        tabs.sort((a, b) => compareByDomPosition(a.getHostElement(), b.getHostElement(), a.getRegistrationOrder(), b.getRegistrationOrder()));
+        return tabs;
+    }
+    getEnabledTabs() {
+        return this.getOrderedTabs().filter((tab) => !tab.isDisabledInContext());
+    }
+    getOrderedPanels() {
+        const panels = Array.from(this.panels);
+        panels.sort((a, b) => compareByDomPosition(a.getHostElement(), b.getHostElement(), a.getRegistrationOrder(), b.getRegistrationOrder()));
+        return panels;
+    }
+    findTabByValue(value) {
+        if (value === null) {
+            return null;
+        }
+        const tabs = this.getOrderedTabs();
+        return tabs.find((tab) => valuesEqual(tab.getValue(), value)) ?? null;
+    }
+    findEnabledTabByValue(value, enabledTabs = this.getEnabledTabs()) {
+        if (value === null) {
+            return null;
+        }
+        return enabledTabs.find((tab) => valuesEqual(tab.getValue(), value)) ?? null;
+    }
+    findPanelByValue(value) {
+        if (value === null) {
+            return null;
+        }
+        const panels = this.getOrderedPanels();
+        return panels.find((panel) => valuesEqual(panel.getValue(), value)) ?? null;
+    }
+    findTabContainingElement(element) {
+        if (element === null) {
+            return null;
+        }
+        const tabs = this.getOrderedTabs();
+        return (tabs.find((tab) => {
+            const host = tab.getHostElement();
+            return host === element || host.contains(element);
+        }) ?? null);
+    }
+    getTabListElement() {
+        return this.tabList?.getHostElement() ?? null;
+    }
+    isTabListOverflowing() {
+        const tabListElement = this.getTabListElement();
+        if (tabListElement === null) {
+            return false;
+        }
+        return tabListElement.scrollWidth > tabListElement.clientWidth;
+    }
+    shouldShowScrollButtons() {
+        if (this.scrollPrevControl === null && this.scrollNextControl === null) {
+            return false;
+        }
+        const mode = this.scrollButtons();
+        if (mode === 'on') {
+            return true;
+        }
+        if (mode !== 'auto') {
+            return false;
+        }
+        return this.isTabListOverflowing();
+    }
+    resolveTabListScrollStep() {
+        const tabListElement = this.getTabListElement();
+        if (tabListElement === null) {
+            return 120;
+        }
+        return Math.max(80, Math.round(tabListElement.clientWidth * 0.7));
+    }
+    scrollTabListBy(delta) {
+        const tabListElement = this.getTabListElement();
+        if (tabListElement === null || delta === 0) {
+            return;
+        }
+        tabListElement.scrollLeft += delta;
+    }
+    scrollTabIntoView(tab) {
+        if (!this.isTabListOverflowing()) {
+            return;
+        }
+        const host = tab.getHostElement();
+        const scrollIntoView = host.scrollIntoView;
+        if (typeof scrollIntoView !== 'function') {
+            return;
+        }
+        scrollIntoView.call(host, {
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngTabs.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-orientation')
+], TngTabs.prototype, "dataOrientation", null);
+__decorate([
+    HostBinding('attr.data-activation')
+], TngTabs.prototype, "dataActivation", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngTabs.prototype, "dataDisabled", null);
+TngTabs = __decorate([
+    Directive({
+        selector: '[tngTabs]',
+        exportAs: 'tngTabs',
+        standalone: true,
+    })
+], TngTabs);
+export { TngTabs };
+let TngTabList = class TngTabList {
+    hostRef = inject(ElementRef);
+    tabs = inject(TngTabs, { host: true });
+    ariaLabel = input(undefined, {
+        alias: 'ariaLabel',
+        transform: normalizeOptionalStringInput,
+    });
+    ariaLabelledby = input(undefined, {
+        alias: 'ariaLabelledby',
+        transform: normalizeOptionalStringInput,
+    });
+    dataSlot = 'tab-list';
+    role = 'tablist';
+    tabIndex = '-1';
+    get ariaOrientation() {
+        return this.tabs.orientation();
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel() ?? null;
+    }
+    get hostAriaLabelledby() {
+        return this.ariaLabelledby() ?? null;
+    }
+    constructor() {
+        this.tabs.registerTabList(this);
+    }
+    ngOnDestroy() {
+        this.tabs.unregisterTabList(this);
+    }
+    onWheel(event) {
+        this.tabs.handleTabListWheel(event);
+    }
+    onScroll() {
+        this.tabs.onTabListScrolled();
+    }
+    onFocus() {
+        this.tabs.onTabListFocused();
+    }
+    getHostElement() {
+        return this.hostRef.nativeElement;
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngTabList.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.role')
+], TngTabList.prototype, "role", void 0);
+__decorate([
+    HostBinding('attr.tabindex')
+], TngTabList.prototype, "tabIndex", void 0);
+__decorate([
+    HostBinding('attr.aria-orientation')
+], TngTabList.prototype, "ariaOrientation", null);
+__decorate([
+    HostBinding('attr.aria-label')
+], TngTabList.prototype, "hostAriaLabel", null);
+__decorate([
+    HostBinding('attr.aria-labelledby')
+], TngTabList.prototype, "hostAriaLabelledby", null);
+__decorate([
+    HostListener('wheel', ['$event'])
+], TngTabList.prototype, "onWheel", null);
+__decorate([
+    HostListener('scroll')
+], TngTabList.prototype, "onScroll", null);
+__decorate([
+    HostListener('focus')
+], TngTabList.prototype, "onFocus", null);
+TngTabList = __decorate([
+    Directive({
+        selector: '[tngTabList]',
+        exportAs: 'tngTabList',
+        standalone: true,
+    })
+], TngTabList);
+export { TngTabList };
+let TngTabsScrollButtonPrev = class TngTabsScrollButtonPrev {
+    tabs = inject(TngTabs, { host: true });
+    dataSlot = 'tabs-scroll-button-prev';
+    get hidden() {
+        return this.tabs.isScrollButtonHidden() ? '' : null;
+    }
+    get disabled() {
+        return this.tabs.isScrollButtonDisabled('prev') ? '' : null;
+    }
+    get ariaDisabled() {
+        return this.tabs.isScrollButtonDisabled('prev') ? 'true' : null;
+    }
+    get dataDisabled() {
+        return this.tabs.isScrollButtonDisabled('prev') ? 'true' : 'false';
+    }
+    constructor() {
+        this.tabs.registerScrollPrevControl(this);
+    }
+    ngOnDestroy() {
+        this.tabs.unregisterScrollPrevControl(this);
+    }
+    onClick(event) {
+        this.tabs.onScrollButtonClick('prev', event);
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngTabsScrollButtonPrev.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.hidden')
+], TngTabsScrollButtonPrev.prototype, "hidden", null);
+__decorate([
+    HostBinding('attr.disabled')
+], TngTabsScrollButtonPrev.prototype, "disabled", null);
+__decorate([
+    HostBinding('attr.aria-disabled')
+], TngTabsScrollButtonPrev.prototype, "ariaDisabled", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngTabsScrollButtonPrev.prototype, "dataDisabled", null);
+__decorate([
+    HostListener('click', ['$event'])
+], TngTabsScrollButtonPrev.prototype, "onClick", null);
+TngTabsScrollButtonPrev = __decorate([
+    Directive({
+        selector: '[tngTabsScrollButtonPrev]',
+        exportAs: 'tngTabsScrollButtonPrev',
+        standalone: true,
+    })
+], TngTabsScrollButtonPrev);
+export { TngTabsScrollButtonPrev };
+let TngTabsScrollButtonNext = class TngTabsScrollButtonNext {
+    tabs = inject(TngTabs, { host: true });
+    dataSlot = 'tabs-scroll-button-next';
+    get hidden() {
+        return this.tabs.isScrollButtonHidden() ? '' : null;
+    }
+    get disabled() {
+        return this.tabs.isScrollButtonDisabled('next') ? '' : null;
+    }
+    get ariaDisabled() {
+        return this.tabs.isScrollButtonDisabled('next') ? 'true' : null;
+    }
+    get dataDisabled() {
+        return this.tabs.isScrollButtonDisabled('next') ? 'true' : 'false';
+    }
+    constructor() {
+        this.tabs.registerScrollNextControl(this);
+    }
+    ngOnDestroy() {
+        this.tabs.unregisterScrollNextControl(this);
+    }
+    onClick(event) {
+        this.tabs.onScrollButtonClick('next', event);
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngTabsScrollButtonNext.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.hidden')
+], TngTabsScrollButtonNext.prototype, "hidden", null);
+__decorate([
+    HostBinding('attr.disabled')
+], TngTabsScrollButtonNext.prototype, "disabled", null);
+__decorate([
+    HostBinding('attr.aria-disabled')
+], TngTabsScrollButtonNext.prototype, "ariaDisabled", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngTabsScrollButtonNext.prototype, "dataDisabled", null);
+__decorate([
+    HostListener('click', ['$event'])
+], TngTabsScrollButtonNext.prototype, "onClick", null);
+TngTabsScrollButtonNext = __decorate([
+    Directive({
+        selector: '[tngTabsScrollButtonNext]',
+        exportAs: 'tngTabsScrollButtonNext',
+        standalone: true,
+    })
+], TngTabsScrollButtonNext);
+export { TngTabsScrollButtonNext };
+let TngTab = class TngTab {
+    hostRef = inject(ElementRef);
+    tabs = inject(TngTabs, { host: true });
+    resolvedId = createTabId();
+    registrationOrder = nextRegistrationOrder++;
+    lastKnownValue = null;
+    lastKnownDisabled = false;
+    valueInput = input(undefined, {
+        alias: 'value',
+        transform: normalizeOptionalValueInput,
+    });
+    disabledInput = input(false, {
+        alias: 'disabled',
+        transform: normalizeBooleanInput,
+    });
+    panelId = input(undefined, {
+        alias: 'panelId',
+        transform: normalizeOptionalStringInput,
+    });
+    dataSlot = 'tab';
+    role = 'tab';
+    get id() {
+        return this.resolvedId;
+    }
+    get tabIndex() {
+        return this.tabs.getTabIndex(this);
+    }
+    get ariaSelected() {
+        return this.tabs.isTabSelected(this) ? 'true' : 'false';
+    }
+    get ariaControls() {
+        return this.tabs.getPanelIdForTab(this);
+    }
+    get ariaDisabled() {
+        return this.isDisabledInContext() ? 'true' : null;
+    }
+    get hostDisabled() {
+        return this.isDisabledInContext() ? '' : null;
+    }
+    get dataSelected() {
+        return this.tabs.isTabSelected(this) ? 'true' : 'false';
+    }
+    get dataFocused() {
+        return this.tabs.isTabFocused(this) ? 'true' : 'false';
+    }
+    get dataDisabled() {
+        return this.isDisabledInContext() ? 'true' : 'false';
+    }
+    constructor() {
+        this.tabs.registerTab(this);
+    }
+    ngOnInit() {
+        this.syncResolvedIdFromHost();
+        this.lastKnownValue = this.getValue();
+        this.lastKnownDisabled = this.isDisabledInContext();
+    }
+    ngDoCheck() {
+        const idChanged = this.syncResolvedIdFromHost();
+        const currentValue = this.getValue();
+        const currentDisabled = this.isDisabledInContext();
+        if (idChanged ||
+            !valuesEqual(this.lastKnownValue, currentValue) ||
+            this.lastKnownDisabled !== currentDisabled) {
+            this.lastKnownValue = currentValue;
+            this.lastKnownDisabled = currentDisabled;
+            this.tabs.notifyTabMutated(this);
+        }
+    }
+    ngOnDestroy() {
+        this.tabs.unregisterTab(this);
+    }
+    onClick(event) {
+        if (this.isDisabledInContext()) {
+            event.preventDefault();
+            return;
+        }
+        const target = event.target;
+        if (target instanceof Element && target !== this.hostRef.nativeElement) {
+            if (isFocusableInteractiveElement(target) && this.hostRef.nativeElement.contains(target)) {
+                return;
+            }
+        }
+        this.focusSelf();
+        this.tabs.requestSelection(this, 'pointer');
+    }
+    onFocus() {
+        if (this.isDisabledInContext()) {
+            return;
+        }
+        this.tabs.onTabFocused(this, 'pointer');
+    }
+    onKeydown(event) {
+        this.tabs.handleTabKeydown(this, event);
+    }
+    getRegistrationOrder() {
+        return this.registrationOrder;
+    }
+    getHostElement() {
+        return this.hostRef.nativeElement;
+    }
+    getItemId() {
+        return this.resolvedId;
+    }
+    getValue() {
+        const explicitValue = this.valueInput();
+        if (explicitValue !== undefined && explicitValue !== null) {
+            return explicitValue;
+        }
+        const hostValue = this.hostRef.nativeElement.getAttribute('value');
+        if (hostValue !== null && hostValue.length > 0) {
+            return hostValue;
+        }
+        return this.resolvedId;
+    }
+    getExplicitPanelId() {
+        return this.panelId() ?? null;
+    }
+    isDisabledInContext() {
+        if (this.tabs.isDisabled()) {
+            return true;
+        }
+        return this.disabledInput();
+    }
+    focusSelf() {
+        this.hostRef.nativeElement.focus();
+    }
+    syncResolvedIdFromHost() {
+        const hostId = this.hostRef.nativeElement.getAttribute('id');
+        if (hostId === null || hostId.length === 0 || hostId === this.resolvedId) {
+            return false;
+        }
+        this.resolvedId = hostId;
+        return true;
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngTab.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.role')
+], TngTab.prototype, "role", void 0);
+__decorate([
+    HostBinding('attr.id')
+], TngTab.prototype, "id", null);
+__decorate([
+    HostBinding('attr.tabindex')
+], TngTab.prototype, "tabIndex", null);
+__decorate([
+    HostBinding('attr.aria-selected')
+], TngTab.prototype, "ariaSelected", null);
+__decorate([
+    HostBinding('attr.aria-controls')
+], TngTab.prototype, "ariaControls", null);
+__decorate([
+    HostBinding('attr.aria-disabled')
+], TngTab.prototype, "ariaDisabled", null);
+__decorate([
+    HostBinding('attr.disabled')
+], TngTab.prototype, "hostDisabled", null);
+__decorate([
+    HostBinding('attr.data-selected')
+], TngTab.prototype, "dataSelected", null);
+__decorate([
+    HostBinding('attr.data-focused')
+], TngTab.prototype, "dataFocused", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngTab.prototype, "dataDisabled", null);
+__decorate([
+    HostListener('click', ['$event'])
+], TngTab.prototype, "onClick", null);
+__decorate([
+    HostListener('focus')
+], TngTab.prototype, "onFocus", null);
+__decorate([
+    HostListener('keydown', ['$event'])
+], TngTab.prototype, "onKeydown", null);
+TngTab = __decorate([
+    Directive({
+        selector: '[tngTab]',
+        exportAs: 'tngTab',
+        standalone: true,
+    })
+], TngTab);
+export { TngTab };
+let TngTabPanel = class TngTabPanel {
+    hostRef = inject(ElementRef);
+    tabs = inject(TngTabs, { host: true });
+    resolvedId = createPanelId();
+    registrationOrder = nextRegistrationOrder++;
+    mounted = true;
+    activated = false;
+    anchor = null;
+    lastKnownValue = null;
+    valueInput = input(undefined, {
+        alias: 'value',
+        transform: normalizeOptionalValueInput,
+    });
+    labelledById = input(undefined, {
+        alias: 'labelledById',
+        transform: normalizeOptionalStringInput,
+    });
+    unmountOnExit = input(false, {
+        alias: 'unmountOnExit',
+        transform: normalizeBooleanInput,
+    });
+    dataSlot = 'tab-panel';
+    role = 'tabpanel';
+    get id() {
+        return this.resolvedId;
+    }
+    get ariaLabelledby() {
+        return this.getExplicitLabelledById() ?? this.tabs.getTabIdForPanel(this);
+    }
+    get hidden() {
+        if (this.tabs.isPanelActive(this)) {
+            this.markActivated();
+            return null;
+        }
+        return '';
+    }
+    get dataActive() {
+        return this.tabs.isPanelActive(this) ? 'true' : 'false';
+    }
+    constructor() {
+        this.tabs.registerPanel(this);
+    }
+    ngOnInit() {
+        this.syncResolvedIdFromHost();
+        this.lastKnownValue = this.getValue();
+        this.syncMountState();
+    }
+    ngDoCheck() {
+        const idChanged = this.syncResolvedIdFromHost();
+        const currentValue = this.getValue();
+        if (idChanged || !valuesEqual(this.lastKnownValue, currentValue)) {
+            this.lastKnownValue = currentValue;
+            this.tabs.notifyPanelMutated();
+        }
+        this.syncMountState();
+    }
+    ngOnDestroy() {
+        this.tabs.unregisterPanel(this);
+        this.removeAnchor();
+    }
+    getRegistrationOrder() {
+        return this.registrationOrder;
+    }
+    getHostElement() {
+        return this.hostRef.nativeElement;
+    }
+    getPanelId() {
+        return this.resolvedId;
+    }
+    getValue() {
+        const explicitValue = this.valueInput();
+        if (explicitValue !== undefined && explicitValue !== null) {
+            return explicitValue;
+        }
+        const hostValue = this.hostRef.nativeElement.getAttribute('value');
+        if (hostValue !== null && hostValue.length > 0) {
+            return hostValue;
+        }
+        return this.resolvedId;
+    }
+    getExplicitLabelledById() {
+        return this.labelledById() ?? null;
+    }
+    hasActivated() {
+        return this.activated;
+    }
+    markActivated() {
+        this.activated = true;
+    }
+    syncMountState() {
+        const shouldMount = this.tabs.isPanelMounted(this);
+        if (shouldMount) {
+            this.mountHost();
+            return;
+        }
+        this.unmountHost();
+    }
+    mountHost() {
+        if (this.mounted) {
+            return;
+        }
+        const anchor = this.ensureAnchor();
+        const parent = anchor.parentNode;
+        if (parent === null) {
+            return;
+        }
+        parent.insertBefore(this.hostRef.nativeElement, anchor);
+        this.mounted = true;
+    }
+    unmountHost() {
+        if (!this.mounted) {
+            return;
+        }
+        const host = this.hostRef.nativeElement;
+        const parent = host.parentNode;
+        if (parent === null) {
+            return;
+        }
+        const anchor = this.ensureAnchor();
+        if (anchor.parentNode !== parent) {
+            parent.insertBefore(anchor, host);
+        }
+        parent.removeChild(host);
+        this.mounted = false;
+        if (!this.tabs.isKeepAliveEnabled() || this.unmountOnExit()) {
+            this.resetTransientFormState();
+        }
+    }
+    ensureAnchor() {
+        if (this.anchor !== null) {
+            return this.anchor;
+        }
+        this.anchor = this.hostRef.nativeElement.ownerDocument.createComment('tng-tab-panel');
+        return this.anchor;
+    }
+    removeAnchor() {
+        if (this.anchor === null) {
+            return;
+        }
+        this.anchor.parentNode?.removeChild(this.anchor);
+        this.anchor = null;
+    }
+    resetTransientFormState() {
+        const controls = this.hostRef.nativeElement.querySelectorAll('input, textarea, select');
+        controls.forEach((control) => {
+            if (control instanceof HTMLInputElement) {
+                if (control.type === 'checkbox' || control.type === 'radio') {
+                    control.checked = control.defaultChecked;
+                }
+                else {
+                    control.value = '';
+                }
+                return;
+            }
+            if (control instanceof HTMLTextAreaElement) {
+                control.value = '';
+                return;
+            }
+            control.selectedIndex = -1;
+        });
+    }
+    syncResolvedIdFromHost() {
+        const hostId = this.hostRef.nativeElement.getAttribute('id');
+        if (hostId === null || hostId.length === 0 || hostId === this.resolvedId) {
+            return false;
+        }
+        this.resolvedId = hostId;
+        return true;
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngTabPanel.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.role')
+], TngTabPanel.prototype, "role", void 0);
+__decorate([
+    HostBinding('attr.id')
+], TngTabPanel.prototype, "id", null);
+__decorate([
+    HostBinding('attr.aria-labelledby')
+], TngTabPanel.prototype, "ariaLabelledby", null);
+__decorate([
+    HostBinding('attr.hidden')
+], TngTabPanel.prototype, "hidden", null);
+__decorate([
+    HostBinding('attr.data-active')
+], TngTabPanel.prototype, "dataActive", null);
+TngTabPanel = __decorate([
+    Directive({
+        selector: '[tngTabPanel]',
+        exportAs: 'tngTabPanel',
+        standalone: true,
+    })
+], TngTabPanel);
+export { TngTabPanel };
+//# sourceMappingURL=tng-tabs.js.map