@tailng-ui/primitives 0.1.0

package/src/lib/form/button-toggle/tng-button-toggle.js

@@ -0,0 +1,1097 @@
+import { __decorate } from "tslib";
+import { Directive, ElementRef, HostBinding, HostListener, booleanAttribute, inject, input, output, } from '@angular/core';
+import { createTngIdFactory } from '@tailng-ui/cdk';
+const createToggleId = createTngIdFactory('tng-button-toggle-item');
+let nextRegistrationOrder = 0;
+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 normalizeTypeInput(value) {
+    return value === 'multiple' ? 'multiple' : 'single';
+}
+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 normalizeValueArrayInput(value) {
+    if (value === null || value === undefined) {
+        return [];
+    }
+    if (Array.isArray(value)) {
+        return value
+            .map((item) => normalizeOptionalValueInput(item))
+            .filter((item) => item !== null && item !== undefined);
+    }
+    if (value instanceof Set) {
+        return Array.from(value)
+            .map((item) => normalizeOptionalValueInput(item))
+            .filter((item) => item !== null && item !== undefined);
+    }
+    const normalized = normalizeOptionalValueInput(value);
+    if (normalized === null || normalized === undefined) {
+        return [];
+    }
+    return [normalized];
+}
+function normalizeOptionalValueArrayInput(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    return normalizeValueArrayInput(value);
+}
+function uniqueValues(values) {
+    const unique = new Set();
+    for (const value of values) {
+        unique.add(value);
+    }
+    return Array.from(unique);
+}
+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"]'));
+}
+function setsEqual(a, b) {
+    if (a.size !== b.size) {
+        return false;
+    }
+    for (const value of a) {
+        if (!b.has(value)) {
+            return false;
+        }
+    }
+    return true;
+}
+export function resolveTngButtonToggleAriaPressed(pressed) {
+    return pressed ? 'true' : 'false';
+}
+export function resolveTngButtonToggleDataState(pressed) {
+    return pressed ? 'on' : 'off';
+}
+let TngButtonToggleGroup = class TngButtonToggleGroup {
+    hostRef = inject(ElementRef);
+    toggles = new Set();
+    initializedType = null;
+    uncontrolledSingleValue = null;
+    uncontrolledMultipleValues = new Set();
+    focusedValue = null;
+    hasSingleUserSelection = false;
+    hasMultipleUserSelection = false;
+    type = input('single', {
+        transform: normalizeTypeInput,
+    });
+    controlledValueInput = input(undefined, {
+        alias: 'tngButtonToggleValue',
+        transform: normalizeOptionalValueInput,
+    });
+    controlledValuesInput = input(undefined, {
+        alias: 'tngButtonToggleValues',
+        transform: normalizeOptionalValueArrayInput,
+    });
+    defaultValueInput = input(undefined, {
+        alias: 'tngButtonToggleDefaultValue',
+        transform: normalizeOptionalValueInput,
+    });
+    defaultValuesInput = input(undefined, {
+        alias: 'tngButtonToggleDefaultValues',
+        transform: normalizeOptionalValueArrayInput,
+    });
+    value = input(undefined, {
+        transform: normalizeOptionalValueInput,
+    });
+    values = input(undefined, {
+        transform: normalizeOptionalValueArrayInput,
+    });
+    defaultValue = input(undefined, {
+        transform: normalizeOptionalValueInput,
+    });
+    defaultValues = input([], {
+        transform: normalizeValueArrayInput,
+    });
+    allowEmpty = input(false, {
+        transform: booleanAttribute,
+    });
+    disabled = input(false, {
+        transform: booleanAttribute,
+    });
+    orientation = input('horizontal', {
+        transform: normalizeOrientationInput,
+    });
+    loop = input(true, {
+        transform: booleanAttribute,
+    });
+    activation = input('auto', {
+        transform: normalizeActivationInput,
+    });
+    dir = input('auto', {
+        transform: normalizeDirectionInput,
+    });
+    valueChange = output();
+    valuesChange = output();
+    toggleChange = output();
+    focusChange = output();
+    dataSlot = 'button-toggle-group';
+    get dataType() {
+        return this.type();
+    }
+    get dataOrientation() {
+        return this.orientation();
+    }
+    get dataDisabled() {
+        return this.disabled() ? 'true' : 'false';
+    }
+    get roleAttr() {
+        return this.type() === 'single' ? 'radiogroup' : 'group';
+    }
+    get ariaDisabled() {
+        return this.disabled() ? 'true' : null;
+    }
+    get ariaOrientation() {
+        return this.orientation();
+    }
+    ngDoCheck() {
+        this.syncStateFromRegistry();
+    }
+    registerToggle(toggle) {
+        this.toggles.add(toggle);
+    }
+    unregisterToggle(toggle) {
+        const orderedToggles = this.getOrderedToggles();
+        const removedIndex = orderedToggles.indexOf(toggle);
+        const removedValue = toggle.getValue();
+        const selectedSingleValue = this.getEffectiveSingleSelectedValue();
+        const focusedValue = this.resolveCurrentTabStopValue();
+        this.toggles.delete(toggle);
+        if (this.type() === 'single' &&
+            !this.isSingleControlled() &&
+            selectedSingleValue !== null &&
+            valuesEqual(selectedSingleValue, removedValue)) {
+            this.uncontrolledSingleValue = this.allowEmpty()
+                ? null
+                : this.resolveNeighborValueOnRemoval(orderedToggles, removedIndex);
+        }
+        if (this.type() === 'multiple' && !this.isMultipleControlled()) {
+            this.uncontrolledMultipleValues.delete(removedValue);
+        }
+        if (focusedValue !== null && valuesEqual(focusedValue, removedValue)) {
+            this.focusedValue = this.resolveNeighborValueOnRemoval(orderedToggles, removedIndex);
+        }
+        this.syncStateFromRegistry();
+    }
+    notifyToggleMutated(toggle) {
+        void toggle;
+        this.syncStateFromRegistry();
+    }
+    isDisabled() {
+        return this.disabled();
+    }
+    getToggleRole() {
+        return this.type() === 'single' ? 'radio' : null;
+    }
+    getToggleTabIndex(toggle) {
+        if (this.disabled() || toggle.isDisabledInContext()) {
+            return '-1';
+        }
+        const tabStop = this.resolveCurrentTabStopValue();
+        if (tabStop === null) {
+            return '-1';
+        }
+        return valuesEqual(tabStop, toggle.getValue()) ? '0' : '-1';
+    }
+    getToggleAriaChecked(toggle) {
+        if (this.type() !== 'single') {
+            return null;
+        }
+        return this.isToggleSelected(toggle) ? 'true' : 'false';
+    }
+    getToggleAriaPressed(toggle) {
+        if (this.type() !== 'multiple') {
+            return null;
+        }
+        return resolveTngButtonToggleAriaPressed(this.isToggleSelected(toggle));
+    }
+    isToggleSelected(toggle) {
+        if (this.type() === 'single') {
+            const selectedValue = this.getEffectiveSingleSelectedValue();
+            if (selectedValue === null) {
+                return false;
+            }
+            return valuesEqual(selectedValue, toggle.getValue());
+        }
+        const selectedValues = this.getEffectiveMultipleSelectedValues();
+        return selectedValues.has(toggle.getValue());
+    }
+    isToggleFocused(toggle) {
+        const tabStop = this.resolveCurrentTabStopValue();
+        if (tabStop === null) {
+            return false;
+        }
+        return valuesEqual(tabStop, toggle.getValue());
+    }
+    onToggleFocused(toggle, trigger) {
+        if (this.disabled() || toggle.isDisabledInContext()) {
+            return;
+        }
+        this.setFocusedValue(toggle.getValue(), trigger);
+    }
+    activateToggle(toggle, trigger) {
+        if (this.disabled() || toggle.isDisabledInContext()) {
+            return;
+        }
+        this.setFocusedValue(toggle.getValue(), trigger === 'programmatic' ? 'programmatic' : 'pointer');
+        if (this.type() === 'single') {
+            this.requestSingleToggle(toggle.getValue(), trigger);
+            return;
+        }
+        this.requestMultipleToggle(toggle.getValue(), trigger);
+    }
+    handleToggleKeydown(toggle, event) {
+        if (this.disabled() || toggle.isDisabledInContext()) {
+            return;
+        }
+        const focusMove = this.resolveFocusMove(event.key);
+        if (focusMove !== null) {
+            event.preventDefault();
+            this.moveFocusByAction(toggle, focusMove, 'keyboard');
+            return;
+        }
+        if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'Spacebar') {
+            return;
+        }
+        event.preventDefault();
+        this.activateToggle(toggle, 'keyboard');
+    }
+    select(value) {
+        const targetToggle = this.findEnabledToggleByValue(value);
+        if (targetToggle === null) {
+            return;
+        }
+        if (this.type() === 'single') {
+            this.requestSingleSelection(value, 'programmatic');
+            return;
+        }
+        this.requestMultipleSelection(value, true, 'programmatic');
+    }
+    deselect(value) {
+        if (this.type() === 'single') {
+            const selectedValue = this.getEffectiveSingleSelectedValue();
+            if (selectedValue === null ||
+                !valuesEqual(selectedValue, value) ||
+                (!this.allowEmpty() && this.findEnabledToggleByValue(value) !== null)) {
+                return;
+            }
+            this.applySingleSelection(null, value, false, 'programmatic');
+            return;
+        }
+        this.requestMultipleSelection(value, false, 'programmatic');
+    }
+    toggle(value) {
+        if (this.type() === 'single') {
+            const selectedValue = this.getEffectiveSingleSelectedValue();
+            if (selectedValue !== null && valuesEqual(selectedValue, value) && this.allowEmpty()) {
+                this.applySingleSelection(null, value, false, 'programmatic');
+                return;
+            }
+            this.requestSingleSelection(value, 'programmatic');
+            return;
+        }
+        this.requestMultipleToggle(value, 'programmatic');
+    }
+    focus(value) {
+        const targetToggle = this.findEnabledToggleByValue(value);
+        if (targetToggle === null) {
+            return;
+        }
+        this.moveFocusToToggle(targetToggle, 'programmatic');
+    }
+    next() {
+        this.moveFocusFromCurrentToggle('next', 'programmatic');
+    }
+    prev() {
+        this.moveFocusFromCurrentToggle('prev', 'programmatic');
+    }
+    requestSingleSelection(nextValue, trigger) {
+        const targetToggle = this.findEnabledToggleByValue(nextValue);
+        if (targetToggle === null) {
+            return;
+        }
+        const selectedValue = this.getEffectiveSingleSelectedValue();
+        if (selectedValue !== null && valuesEqual(selectedValue, nextValue)) {
+            return;
+        }
+        this.applySingleSelection(nextValue, nextValue, true, trigger);
+    }
+    requestSingleToggle(nextValue, trigger) {
+        const targetToggle = this.findEnabledToggleByValue(nextValue);
+        if (targetToggle === null) {
+            return;
+        }
+        const selectedValue = this.getEffectiveSingleSelectedValue();
+        if (selectedValue !== null && valuesEqual(selectedValue, nextValue)) {
+            if (!this.allowEmpty()) {
+                return;
+            }
+            this.applySingleSelection(null, nextValue, false, trigger);
+            return;
+        }
+        this.applySingleSelection(nextValue, nextValue, true, trigger);
+    }
+    applySingleSelection(nextValue, toggledValue, selected, trigger) {
+        const previousValue = this.getEffectiveSingleSelectedValue();
+        if (valuesEqual(previousValue, nextValue)) {
+            return;
+        }
+        if (!this.isSingleControlled()) {
+            this.uncontrolledSingleValue = nextValue;
+            this.hasSingleUserSelection = true;
+        }
+        this.valueChange.emit(nextValue);
+        this.toggleChange.emit({
+            value: toggledValue,
+            selected,
+            previousValue,
+            previousValues: previousValue === null ? [] : [previousValue],
+            values: nextValue === null ? [] : [nextValue],
+            trigger,
+        });
+        this.syncStateFromRegistry();
+    }
+    requestMultipleSelection(value, shouldSelect, trigger) {
+        const targetToggle = this.findEnabledToggleByValue(value);
+        if (targetToggle === null) {
+            return;
+        }
+        const previousSelection = this.getEffectiveMultipleSelectedValues();
+        const nextSelection = new Set(previousSelection);
+        if (shouldSelect) {
+            nextSelection.add(value);
+        }
+        else {
+            nextSelection.delete(value);
+        }
+        if (setsEqual(previousSelection, nextSelection)) {
+            return;
+        }
+        this.applyMultipleSelection(nextSelection, value, shouldSelect, trigger);
+    }
+    requestMultipleToggle(value, trigger) {
+        const targetToggle = this.findEnabledToggleByValue(value);
+        if (targetToggle === null) {
+            return;
+        }
+        const previousSelection = this.getEffectiveMultipleSelectedValues();
+        const nextSelection = new Set(previousSelection);
+        const selected = !nextSelection.has(value);
+        if (selected) {
+            nextSelection.add(value);
+        }
+        else {
+            nextSelection.delete(value);
+        }
+        this.applyMultipleSelection(nextSelection, value, selected, trigger);
+    }
+    applyMultipleSelection(nextSelection, toggledValue, selected, trigger) {
+        const previousSelection = this.getEffectiveMultipleSelectedValues();
+        if (setsEqual(previousSelection, nextSelection)) {
+            return;
+        }
+        if (!this.isMultipleControlled()) {
+            this.uncontrolledMultipleValues = new Set(nextSelection);
+            this.hasMultipleUserSelection = true;
+        }
+        const previousValues = this.getSelectedValuesInDomOrder(previousSelection);
+        const values = this.getSelectedValuesInDomOrder(nextSelection);
+        this.valuesChange.emit(values);
+        this.toggleChange.emit({
+            value: toggledValue,
+            selected,
+            previousValue: null,
+            previousValues,
+            values,
+            trigger,
+        });
+        this.syncStateFromRegistry();
+    }
+    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(sourceToggle, action, trigger) {
+        const enabledToggles = this.getEnabledToggles();
+        if (enabledToggles.length === 0) {
+            return;
+        }
+        const currentIndex = enabledToggles.indexOf(sourceToggle);
+        if (currentIndex < 0) {
+            return;
+        }
+        const nextToggle = this.resolveFocusTarget(enabledToggles, currentIndex, action);
+        if (nextToggle === null) {
+            return;
+        }
+        this.moveFocusToToggle(nextToggle, trigger);
+        if (this.activation() === 'auto' && this.type() === 'single') {
+            this.requestSingleSelection(nextToggle.getValue(), trigger === 'programmatic' ? 'programmatic' : 'keyboard');
+        }
+    }
+    moveFocusToToggle(toggle, trigger) {
+        if (this.disabled() || toggle.isDisabledInContext()) {
+            return;
+        }
+        this.setFocusedValue(toggle.getValue(), trigger);
+        toggle.focusSelf();
+    }
+    moveFocusFromCurrentToggle(direction, trigger) {
+        const enabledToggles = this.getEnabledToggles();
+        if (enabledToggles.length === 0) {
+            return;
+        }
+        const activeElement = this.hostRef.nativeElement.ownerDocument?.activeElement ?? null;
+        const activeToggle = this.findToggleContainingElement(activeElement);
+        const currentToggle = activeToggle ?? this.findEnabledToggleByValue(this.resolveCurrentTabStopValue(), enabledToggles);
+        if (currentToggle === null) {
+            return;
+        }
+        const currentIndex = enabledToggles.indexOf(currentToggle);
+        if (currentIndex < 0) {
+            return;
+        }
+        const nextToggle = this.resolveFocusTarget(enabledToggles, currentIndex, direction);
+        if (nextToggle === null) {
+            return;
+        }
+        this.moveFocusToToggle(nextToggle, trigger);
+        if (this.activation() === 'auto' && this.type() === 'single') {
+            this.requestSingleSelection(nextToggle.getValue(), trigger === 'programmatic' ? 'programmatic' : 'keyboard');
+        }
+    }
+    resolveFocusTarget(enabledToggles, currentIndex, action) {
+        if (enabledToggles.length === 0 || currentIndex < 0) {
+            return null;
+        }
+        if (action === 'first') {
+            return enabledToggles[0] ?? null;
+        }
+        if (action === 'last') {
+            return enabledToggles[enabledToggles.length - 1] ?? null;
+        }
+        if (action === 'next') {
+            if (currentIndex + 1 < enabledToggles.length) {
+                return enabledToggles[currentIndex + 1] ?? null;
+            }
+            return this.loop()
+                ? (enabledToggles[0] ?? null)
+                : (enabledToggles[currentIndex] ?? null);
+        }
+        if (currentIndex - 1 >= 0) {
+            return enabledToggles[currentIndex - 1] ?? null;
+        }
+        return this.loop()
+            ? (enabledToggles[enabledToggles.length - 1] ?? null)
+            : (enabledToggles[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,
+        });
+    }
+    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';
+    }
+    syncStateFromRegistry() {
+        const currentType = this.type();
+        const enabledToggles = this.getEnabledToggles();
+        if (this.initializedType !== currentType) {
+            this.initializedType = currentType;
+            this.focusedValue = null;
+            this.hasSingleUserSelection = false;
+            this.hasMultipleUserSelection = false;
+            if (currentType === 'single') {
+                this.uncontrolledMultipleValues.clear();
+                if (!this.isSingleControlled()) {
+                    this.uncontrolledSingleValue = this.resolveInitialSingleValue(enabledToggles);
+                }
+            }
+            else {
+                this.uncontrolledSingleValue = null;
+                if (!this.isMultipleControlled()) {
+                    this.uncontrolledMultipleValues = new Set(this.resolveInitialMultipleValues(enabledToggles));
+                }
+            }
+        }
+        if (enabledToggles.length === 0) {
+            if (currentType === 'single' && !this.isSingleControlled()) {
+                this.uncontrolledSingleValue = null;
+            }
+            if (currentType === 'multiple' && !this.isMultipleControlled()) {
+                this.uncontrolledMultipleValues.clear();
+            }
+            this.focusedValue = null;
+            return;
+        }
+        if (currentType === 'single') {
+            this.syncSingleState(enabledToggles);
+        }
+        else {
+            this.syncMultipleState(enabledToggles);
+        }
+        this.focusedValue = this.resolveCurrentTabStopValue(enabledToggles);
+    }
+    syncSingleState(enabledToggles) {
+        if (this.isSingleControlled()) {
+            return;
+        }
+        const currentValue = this.uncontrolledSingleValue;
+        const hasEnabledCurrentValue = currentValue !== null && this.findEnabledToggleByValue(currentValue, enabledToggles) !== null;
+        if (hasEnabledCurrentValue) {
+            return;
+        }
+        this.uncontrolledSingleValue = this.allowEmpty()
+            ? null
+            : (enabledToggles[0]?.getValue() ?? null);
+    }
+    syncMultipleState(enabledToggles) {
+        if (this.isMultipleControlled()) {
+            return;
+        }
+        const enabledSet = new Set(enabledToggles.map((toggle) => toggle.getValue()));
+        const nextValues = new Set();
+        for (const value of this.uncontrolledMultipleValues) {
+            if (enabledSet.has(value)) {
+                nextValues.add(value);
+            }
+        }
+        this.uncontrolledMultipleValues = nextValues;
+    }
+    resolveInitialSingleValue(enabledToggles) {
+        if (enabledToggles.length === 0) {
+            return null;
+        }
+        const defaultValue = this.getDefaultSingleValueInput();
+        if (defaultValue !== undefined &&
+            defaultValue !== null &&
+            this.findEnabledToggleByValue(defaultValue, enabledToggles) !== null) {
+            return defaultValue;
+        }
+        if (this.allowEmpty()) {
+            return null;
+        }
+        return enabledToggles[0]?.getValue() ?? null;
+    }
+    resolveInitialMultipleValues(enabledToggles) {
+        if (enabledToggles.length === 0) {
+            return [];
+        }
+        const defaultValues = new Set(uniqueValues(this.getDefaultMultipleValuesInput()));
+        if (defaultValues.size === 0) {
+            return [];
+        }
+        const selectedValues = [];
+        for (const toggle of enabledToggles) {
+            const value = toggle.getValue();
+            if (defaultValues.has(value)) {
+                selectedValues.push(value);
+            }
+        }
+        return selectedValues;
+    }
+    resolveNeighborValueOnRemoval(orderedToggles, removedIndex) {
+        if (removedIndex < 0) {
+            return this.getEnabledToggles()[0]?.getValue() ?? null;
+        }
+        for (let index = removedIndex + 1; index < orderedToggles.length; index += 1) {
+            const candidate = orderedToggles[index];
+            if (candidate !== undefined && !candidate.isSelfDisabled()) {
+                return candidate.getValue();
+            }
+        }
+        for (let index = removedIndex - 1; index >= 0; index -= 1) {
+            const candidate = orderedToggles[index];
+            if (candidate !== undefined && !candidate.isSelfDisabled()) {
+                return candidate.getValue();
+            }
+        }
+        return null;
+    }
+    resolveNeighborForUnavailableToggle(toggle) {
+        const orderedToggles = this.getOrderedToggles();
+        const currentIndex = orderedToggles.indexOf(toggle);
+        if (currentIndex < 0) {
+            return this.getEnabledToggles()[0]?.getValue() ?? null;
+        }
+        for (let index = currentIndex + 1; index < orderedToggles.length; index += 1) {
+            const candidate = orderedToggles[index];
+            if (candidate !== undefined && !candidate.isSelfDisabled()) {
+                return candidate.getValue();
+            }
+        }
+        for (let index = currentIndex - 1; index >= 0; index -= 1) {
+            const candidate = orderedToggles[index];
+            if (candidate !== undefined && !candidate.isSelfDisabled()) {
+                return candidate.getValue();
+            }
+        }
+        return null;
+    }
+    isSingleControlled() {
+        if (this.type() !== 'single') {
+            return false;
+        }
+        return this.getControlledSingleValueInput() !== undefined;
+    }
+    isMultipleControlled() {
+        if (this.type() !== 'multiple') {
+            return false;
+        }
+        return this.getControlledMultipleValuesInput() !== undefined;
+    }
+    getEffectiveSingleSelectedValue(enabledToggles = this.getEnabledToggles()) {
+        if (this.type() !== 'single' || enabledToggles.length === 0) {
+            return null;
+        }
+        let selectedValue = this.isSingleControlled()
+            ? (this.getControlledSingleValueInput() ?? null)
+            : this.uncontrolledSingleValue;
+        if (!this.isSingleControlled() && !this.hasSingleUserSelection) {
+            const defaultValue = this.getDefaultSingleValueInput();
+            if (defaultValue !== undefined &&
+                defaultValue !== null &&
+                this.findEnabledToggleByValue(defaultValue, enabledToggles) !== null) {
+                selectedValue = defaultValue;
+            }
+            else if (defaultValue === null) {
+                selectedValue = null;
+            }
+        }
+        if (selectedValue !== null &&
+            this.findEnabledToggleByValue(selectedValue, enabledToggles) !== null) {
+            return selectedValue;
+        }
+        if (this.allowEmpty()) {
+            return null;
+        }
+        return enabledToggles[0]?.getValue() ?? null;
+    }
+    getEffectiveMultipleSelectedValues(enabledToggles = this.getEnabledToggles()) {
+        if (this.type() !== 'multiple' || enabledToggles.length === 0) {
+            return new Set();
+        }
+        const sourceValues = this.isMultipleControlled()
+            ? uniqueValues(this.getControlledMultipleValuesInput() ?? [])
+            : (!this.hasMultipleUserSelection
+                ? uniqueValues(this.getDefaultMultipleValuesInput())
+                : Array.from(this.uncontrolledMultipleValues));
+        const sourceSet = new Set(sourceValues);
+        const selectedSet = new Set();
+        for (const toggle of enabledToggles) {
+            const value = toggle.getValue();
+            if (sourceSet.has(value)) {
+                selectedSet.add(value);
+            }
+        }
+        return selectedSet;
+    }
+    resolveCurrentTabStopValue(enabledToggles = this.getEnabledToggles()) {
+        if (enabledToggles.length === 0) {
+            return null;
+        }
+        if (this.focusedValue !== null &&
+            this.findEnabledToggleByValue(this.focusedValue, enabledToggles) !== null) {
+            return this.focusedValue;
+        }
+        if (this.type() === 'single') {
+            const selectedValue = this.getEffectiveSingleSelectedValue(enabledToggles);
+            if (selectedValue !== null) {
+                return selectedValue;
+            }
+            return enabledToggles[0]?.getValue() ?? null;
+        }
+        const selectedValues = this.getEffectiveMultipleSelectedValues(enabledToggles);
+        for (const toggle of enabledToggles) {
+            const value = toggle.getValue();
+            if (selectedValues.has(value)) {
+                return value;
+            }
+        }
+        return enabledToggles[0]?.getValue() ?? null;
+    }
+    getSelectedValuesInDomOrder(selectedValues, orderedToggles = this.getOrderedToggles()) {
+        if (selectedValues.size === 0) {
+            return [];
+        }
+        const values = [];
+        for (const toggle of orderedToggles) {
+            const value = toggle.getValue();
+            if (selectedValues.has(value) && !toggle.isSelfDisabled()) {
+                values.push(value);
+            }
+        }
+        return values;
+    }
+    getOrderedToggles() {
+        const toggles = Array.from(this.toggles);
+        toggles.sort((a, b) => compareByDomPosition(a.getHostElement(), b.getHostElement(), a.getRegistrationOrder(), b.getRegistrationOrder()));
+        return toggles;
+    }
+    getEnabledToggles() {
+        return this.getOrderedToggles().filter((toggle) => !toggle.isSelfDisabled());
+    }
+    findEnabledToggleByValue(value, enabledToggles = this.getEnabledToggles()) {
+        if (value === null) {
+            return null;
+        }
+        return enabledToggles.find((toggle) => valuesEqual(toggle.getValue(), value)) ?? null;
+    }
+    findToggleContainingElement(element) {
+        if (element === null) {
+            return null;
+        }
+        const toggles = this.getOrderedToggles();
+        return (toggles.find((toggle) => {
+            const host = toggle.getHostElement();
+            return host === element || host.contains(element);
+        }) ?? null);
+    }
+    getControlledSingleValueInput() {
+        const explicit = this.controlledValueInput();
+        if (explicit !== undefined) {
+            return explicit;
+        }
+        return this.value();
+    }
+    getControlledMultipleValuesInput() {
+        const explicit = this.controlledValuesInput();
+        if (explicit !== undefined) {
+            return explicit;
+        }
+        return this.values();
+    }
+    getDefaultSingleValueInput() {
+        const explicit = this.defaultValueInput();
+        if (explicit !== undefined) {
+            return explicit;
+        }
+        return this.defaultValue();
+    }
+    getDefaultMultipleValuesInput() {
+        const explicit = this.defaultValuesInput();
+        if (explicit !== undefined) {
+            return explicit;
+        }
+        return this.defaultValues();
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngButtonToggleGroup.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-type')
+], TngButtonToggleGroup.prototype, "dataType", null);
+__decorate([
+    HostBinding('attr.data-orientation')
+], TngButtonToggleGroup.prototype, "dataOrientation", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngButtonToggleGroup.prototype, "dataDisabled", null);
+__decorate([
+    HostBinding('attr.role')
+], TngButtonToggleGroup.prototype, "roleAttr", null);
+__decorate([
+    HostBinding('attr.aria-disabled')
+], TngButtonToggleGroup.prototype, "ariaDisabled", null);
+__decorate([
+    HostBinding('attr.aria-orientation')
+], TngButtonToggleGroup.prototype, "ariaOrientation", null);
+TngButtonToggleGroup = __decorate([
+    Directive({
+        selector: '[tngButtonToggleGroup]',
+        exportAs: 'tngButtonToggleGroup',
+        standalone: true,
+    })
+], TngButtonToggleGroup);
+export { TngButtonToggleGroup };
+let TngButtonToggle = class TngButtonToggle {
+    hostRef = inject(ElementRef);
+    group = inject(TngButtonToggleGroup, { optional: true });
+    resolvedId = createToggleId();
+    registrationOrder = nextRegistrationOrder++;
+    lastKnownValue = null;
+    lastKnownDisabled = false;
+    toggleValueInput = input(undefined, {
+        alias: 'tngButtonToggleValue',
+        transform: normalizeOptionalValueInput,
+    });
+    valueInput = input(undefined, {
+        alias: 'value',
+        transform: normalizeOptionalValueInput,
+    });
+    disabledInput = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    pressedInput = input(false, {
+        alias: 'pressed',
+        transform: booleanAttribute,
+    });
+    dataSlot = 'button-toggle';
+    get id() {
+        return this.resolvedId;
+    }
+    typeAttr = 'button';
+    get roleAttr() {
+        return this.group?.getToggleRole() ?? null;
+    }
+    get tabIndexAttr() {
+        if (this.group === null) {
+            return null;
+        }
+        return this.group.getToggleTabIndex(this);
+    }
+    get ariaCheckedAttr() {
+        if (this.group === null) {
+            return null;
+        }
+        return this.group.getToggleAriaChecked(this);
+    }
+    get ariaPressedAttr() {
+        if (this.group !== null) {
+            return this.group.getToggleAriaPressed(this);
+        }
+        return resolveTngButtonToggleAriaPressed(this.pressedInput());
+    }
+    get ariaDisabledAttr() {
+        return this.isDisabledInContext() ? 'true' : null;
+    }
+    get dataDisabledAttr() {
+        return this.isDisabledInContext() ? 'true' : 'false';
+    }
+    get dataFocusedAttr() {
+        if (this.group === null) {
+            return 'false';
+        }
+        return this.group.isToggleFocused(this) ? 'true' : 'false';
+    }
+    get dataSelectedAttr() {
+        if (this.group === null) {
+            return this.pressedInput() ? 'true' : 'false';
+        }
+        return this.group.isToggleSelected(this) ? 'true' : 'false';
+    }
+    get dataStateAttr() {
+        return resolveTngButtonToggleDataState(this.dataSelectedAttr === 'true');
+    }
+    get disabledAttr() {
+        return this.isDisabledInContext() ? '' : null;
+    }
+    constructor() {
+        this.group?.registerToggle(this);
+    }
+    ngOnInit() {
+        this.syncResolvedIdFromHost();
+        this.lastKnownValue = this.getValue();
+        this.lastKnownDisabled = this.isDisabledInContext();
+        this.group?.notifyToggleMutated(this);
+    }
+    ngDoCheck() {
+        this.syncResolvedIdFromHost();
+        this.lastKnownValue = this.getValue();
+        this.lastKnownDisabled = this.isDisabledInContext();
+    }
+    ngOnDestroy() {
+        this.group?.unregisterToggle(this);
+    }
+    onClick(event) {
+        if (this.isDisabledInContext()) {
+            event.preventDefault();
+            return;
+        }
+        if (this.group === null) {
+            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.group.activateToggle(this, 'pointer');
+    }
+    onFocus() {
+        if (this.group === null || this.isDisabledInContext()) {
+            return;
+        }
+        this.group.onToggleFocused(this, 'pointer');
+    }
+    onKeydown(event) {
+        this.group?.handleToggleKeydown(this, event);
+    }
+    getRegistrationOrder() {
+        return this.registrationOrder;
+    }
+    getHostElement() {
+        return this.hostRef.nativeElement;
+    }
+    getValue() {
+        const explicitValue = this.toggleValueInput() ?? this.valueInput();
+        if (explicitValue !== undefined && explicitValue !== null) {
+            return explicitValue;
+        }
+        const hostPropertyValue = this.hostRef.nativeElement.value;
+        if (typeof hostPropertyValue === 'string' && hostPropertyValue.length > 0) {
+            return hostPropertyValue;
+        }
+        const hostValue = this.hostRef.nativeElement.getAttribute('value');
+        if (hostValue !== null && hostValue.length > 0) {
+            return hostValue;
+        }
+        return this.resolvedId;
+    }
+    isDisabledInContext() {
+        if (this.group?.isDisabled()) {
+            return true;
+        }
+        return this.disabledInput();
+    }
+    isSelfDisabled() {
+        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')
+], TngButtonToggle.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.id')
+], TngButtonToggle.prototype, "id", null);
+__decorate([
+    HostBinding('attr.type')
+], TngButtonToggle.prototype, "typeAttr", void 0);
+__decorate([
+    HostBinding('attr.role')
+], TngButtonToggle.prototype, "roleAttr", null);
+__decorate([
+    HostBinding('attr.tabindex')
+], TngButtonToggle.prototype, "tabIndexAttr", null);
+__decorate([
+    HostBinding('attr.aria-checked')
+], TngButtonToggle.prototype, "ariaCheckedAttr", null);
+__decorate([
+    HostBinding('attr.aria-pressed')
+], TngButtonToggle.prototype, "ariaPressedAttr", null);
+__decorate([
+    HostBinding('attr.aria-disabled')
+], TngButtonToggle.prototype, "ariaDisabledAttr", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngButtonToggle.prototype, "dataDisabledAttr", null);
+__decorate([
+    HostBinding('attr.data-focused')
+], TngButtonToggle.prototype, "dataFocusedAttr", null);
+__decorate([
+    HostBinding('attr.data-selected')
+], TngButtonToggle.prototype, "dataSelectedAttr", null);
+__decorate([
+    HostBinding('attr.data-state')
+], TngButtonToggle.prototype, "dataStateAttr", null);
+__decorate([
+    HostBinding('attr.disabled')
+], TngButtonToggle.prototype, "disabledAttr", null);
+__decorate([
+    HostListener('click', ['$event'])
+], TngButtonToggle.prototype, "onClick", null);
+__decorate([
+    HostListener('focus')
+], TngButtonToggle.prototype, "onFocus", null);
+__decorate([
+    HostListener('keydown', ['$event'])
+], TngButtonToggle.prototype, "onKeydown", null);
+TngButtonToggle = __decorate([
+    Directive({
+        selector: 'button[tngButtonToggle]',
+        exportAs: 'tngButtonToggle',
+        standalone: true,
+    })
+], TngButtonToggle);
+export { TngButtonToggle };
+//# sourceMappingURL=tng-button-toggle.js.map