@tailng-ui/primitives 0.1.0

package/src/lib/layout/accordion/tng-accordion.js

@@ -0,0 +1,852 @@
+import { __decorate } from "tslib";
+import { Directive, ElementRef, HostBinding, HostListener, inject, input, output, } from '@angular/core';
+import { createTngIdFactory } from '@tailng-ui/cdk';
+const createAccordionItemValue = createTngIdFactory('tng-accordion-item');
+const createAccordionTriggerId = createTngIdFactory('tng-accordion-trigger');
+const createAccordionPanelId = createTngIdFactory('tng-accordion-panel');
+let nextAccordionItemRegistrationOrder = 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 normalizeAccordionType(value) {
+    return value === 'multiple' ? 'multiple' : 'single';
+}
+function normalizeAccordionValue(value) {
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    return String(value);
+}
+function normalizeOptionalAccordionValue(value) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    return normalizeAccordionValue(value);
+}
+function normalizeAccordionValueInput(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (value === null) {
+        return null;
+    }
+    if (Array.isArray(value)) {
+        return value.map((entry) => normalizeAccordionValue(entry));
+    }
+    return normalizeAccordionValue(value);
+}
+function compareAccordionItemsByDomPosition(a, b) {
+    const aElement = a.getHostElement();
+    const bElement = b.getHostElement();
+    if (aElement === bElement) {
+        return a.getRegistrationOrder() - b.getRegistrationOrder();
+    }
+    const relativePosition = aElement.compareDocumentPosition(bElement);
+    if (relativePosition & Node.DOCUMENT_POSITION_FOLLOWING) {
+        return -1;
+    }
+    if (relativePosition & Node.DOCUMENT_POSITION_PRECEDING) {
+        return 1;
+    }
+    return a.getRegistrationOrder() - b.getRegistrationOrder();
+}
+function toSet(values) {
+    return new Set(values);
+}
+function setsEqual(a, b) {
+    if (a.size !== b.size) {
+        return false;
+    }
+    for (const value of a) {
+        if (!b.has(value)) {
+            return false;
+        }
+    }
+    return true;
+}
+let TngAccordion = class TngAccordion {
+    hostRef = inject(ElementRef);
+    items = new Set();
+    uncontrolledValues = new Set();
+    focusedValue = null;
+    initialized = false;
+    lastType = 'single';
+    defaultValuesSnapshot = [];
+    hasUserInteraction = false;
+    type = input('single', {
+        transform: normalizeAccordionType,
+    });
+    value = input(undefined, {
+        transform: normalizeAccordionValueInput,
+    });
+    defaultValue = input(undefined, {
+        transform: normalizeAccordionValueInput,
+    });
+    collapsible = input(true, {
+        transform: normalizeBooleanInput,
+    });
+    disabled = input(false, {
+        transform: normalizeBooleanInput,
+    });
+    loop = input(true, {
+        transform: normalizeBooleanInput,
+    });
+    lazy = input(false, {
+        transform: normalizeBooleanInput,
+    });
+    keepAlive = input(true, {
+        transform: normalizeBooleanInput,
+    });
+    valueChange = output();
+    valuesChange = output();
+    expandedChange = output();
+    openStart = output();
+    opened = output();
+    closeStart = output();
+    closed = output();
+    dataSlot = 'accordion';
+    get dataType() {
+        return this.type();
+    }
+    get dataDisabled() {
+        return this.disabled() ? 'true' : 'false';
+    }
+    ngDoCheck() {
+        this.syncStateFromInputs('check');
+    }
+    ngOnDestroy() {
+        this.items.clear();
+    }
+    registerItem(item) {
+        this.items.add(item);
+        this.syncStateFromInputs('registration');
+    }
+    unregisterItem(item) {
+        const wasExpanded = this.getEffectiveValueSet().has(item.getValue());
+        const removedValue = item.getValue();
+        this.items.delete(item);
+        if (wasExpanded && !this.isControlled()) {
+            const next = new Set(this.uncontrolledValues);
+            next.delete(removedValue);
+            this.uncontrolledValues = next;
+        }
+        if (this.focusedValue !== null && this.focusedValue === removedValue) {
+            this.focusedValue = null;
+        }
+        this.syncStateFromInputs('check');
+    }
+    notifyItemMutated() {
+        this.syncStateFromInputs('check');
+    }
+    isItemExpanded(item) {
+        return this.getEffectiveValueSet().has(item.getValue());
+    }
+    isItemDisabled(item) {
+        return this.disabled() || item.disabled();
+    }
+    getTriggerTabIndex(item) {
+        if (this.isItemDisabled(item)) {
+            return '-1';
+        }
+        const focusableItem = this.resolveCurrentFocusableItem();
+        if (focusableItem === null) {
+            return '-1';
+        }
+        return focusableItem === item ? '0' : '-1';
+    }
+    onTriggerFocused(item) {
+        if (this.isItemDisabled(item)) {
+            return;
+        }
+        this.focusedValue = item.getValue();
+    }
+    onTriggerClicked(item) {
+        this.requestToggle(item, 'pointer');
+    }
+    onTriggerKeydown(item, event) {
+        if (this.isItemDisabled(item) || event.altKey || event.ctrlKey || event.metaKey) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            this.requestToggle(item, 'keyboard');
+            return;
+        }
+        const action = this.resolveNavigationAction(event.key);
+        if (action === null) {
+            return;
+        }
+        if (this.moveFocus(item, action)) {
+            event.preventDefault();
+        }
+    }
+    isPanelMounted(item) {
+        if (this.isItemExpanded(item)) {
+            item.markExpandedOnce();
+            return true;
+        }
+        if (!this.keepAlive()) {
+            return false;
+        }
+        if (!this.lazy()) {
+            return true;
+        }
+        return item.hasExpandedOnce();
+    }
+    open(value) {
+        this.requestSetExpanded(value, true, 'programmatic');
+    }
+    close(value) {
+        this.requestSetExpanded(value, false, 'programmatic');
+    }
+    toggle(value) {
+        const expanded = this.getEffectiveValueSet().has(value);
+        this.requestSetExpanded(value, !expanded, 'programmatic');
+    }
+    getExpandedValues() {
+        const effectiveSet = this.getEffectiveValueSet();
+        return this.getOrderedItems()
+            .map((item) => item.getValue())
+            .filter((value) => effectiveSet.has(value));
+    }
+    requestSetExpanded(value, nextExpanded, trigger) {
+        const item = this.getOrderedItems().find((candidate) => candidate.getValue() === value) ?? null;
+        if (item === null) {
+            return;
+        }
+        if (this.isItemExpanded(item) === nextExpanded) {
+            return;
+        }
+        this.requestToggle(item, trigger, nextExpanded);
+    }
+    requestToggle(item, trigger, forcedExpanded) {
+        if (this.isItemDisabled(item)) {
+            return;
+        }
+        const previous = this.getEffectiveValueSet();
+        const next = new Set(previous);
+        const itemValue = item.getValue();
+        const currentlyExpanded = previous.has(itemValue);
+        const shouldExpand = forcedExpanded ?? !currentlyExpanded;
+        if (this.type() === 'single') {
+            if (!shouldExpand && !this.collapsible()) {
+                return;
+            }
+            next.clear();
+            if (shouldExpand) {
+                next.add(itemValue);
+            }
+        }
+        else {
+            if (shouldExpand) {
+                next.add(itemValue);
+            }
+            else {
+                next.delete(itemValue);
+            }
+        }
+        if (setsEqual(previous, next)) {
+            return;
+        }
+        if (!this.isControlled()) {
+            this.uncontrolledValues = next;
+        }
+        this.hasUserInteraction = true;
+        this.focusedValue = itemValue;
+        const previousValues = this.mapSetToOrderedValues(previous);
+        const nextValues = this.mapSetToOrderedValues(next);
+        const expanded = next.has(itemValue);
+        this.emitSelectionOutputs(itemValue, expanded, previousValues, nextValues, trigger);
+        this.syncStateFromInputs('check');
+    }
+    emitSelectionOutputs(value, expanded, previousValues, values, trigger) {
+        if (expanded) {
+            this.openStart.emit(value);
+        }
+        else {
+            this.closeStart.emit(value);
+        }
+        if (this.type() === 'single') {
+            const nextSingle = values[0] ?? null;
+            this.valueChange.emit(nextSingle);
+        }
+        else {
+            this.valueChange.emit(values);
+            this.valuesChange.emit(values);
+        }
+        this.expandedChange.emit({
+            value,
+            expanded,
+            previousValues,
+            values,
+            trigger,
+        });
+        if (expanded) {
+            this.opened.emit(value);
+        }
+        else {
+            this.closed.emit(value);
+        }
+    }
+    resolveNavigationAction(key) {
+        if (key === 'ArrowDown') {
+            return 'next';
+        }
+        if (key === 'ArrowUp') {
+            return 'prev';
+        }
+        if (key === 'Home') {
+            return 'first';
+        }
+        if (key === 'End') {
+            return 'last';
+        }
+        return null;
+    }
+    moveFocus(item, action) {
+        const enabledItems = this.getEnabledItems();
+        if (enabledItems.length === 0) {
+            return false;
+        }
+        const currentIndex = enabledItems.indexOf(item);
+        if (currentIndex < 0) {
+            return false;
+        }
+        let nextIndex = currentIndex;
+        if (action === 'first') {
+            nextIndex = 0;
+        }
+        else if (action === 'last') {
+            nextIndex = enabledItems.length - 1;
+        }
+        else if (action === 'next') {
+            if (currentIndex + 1 < enabledItems.length) {
+                nextIndex = currentIndex + 1;
+            }
+            else if (this.loop()) {
+                nextIndex = 0;
+            }
+            else {
+                return false;
+            }
+        }
+        else if (action === 'prev') {
+            if (currentIndex - 1 >= 0) {
+                nextIndex = currentIndex - 1;
+            }
+            else if (this.loop()) {
+                nextIndex = enabledItems.length - 1;
+            }
+            else {
+                return false;
+            }
+        }
+        const target = enabledItems[nextIndex] ?? null;
+        if (target === null || target === item) {
+            return false;
+        }
+        target.focusTrigger();
+        this.focusedValue = target.getValue();
+        return true;
+    }
+    syncStateFromInputs(source) {
+        if (!this.initialized) {
+            this.initialized = this.initializeUncontrolledState(source);
+            if (!this.initialized) {
+                return;
+            }
+        }
+        const nextType = this.type();
+        if (nextType !== this.lastType) {
+            this.lastType = nextType;
+            if (!this.isControlled() && nextType === 'single' && this.uncontrolledValues.size > 1) {
+                const first = this.mapSetToOrderedValues(this.uncontrolledValues)[0];
+                this.uncontrolledValues = first === undefined ? new Set() : new Set([first]);
+            }
+        }
+        if (!this.isControlled()) {
+            this.uncontrolledValues = this.normalizeSetForCurrentItems(this.uncontrolledValues);
+            if (!this.hasUserInteraction && this.defaultValuesSnapshot.length > 0) {
+                const normalizedDefaultValues = this.normalizeSetForCurrentItems(toSet(this.defaultValuesSnapshot));
+                if (!setsEqual(this.uncontrolledValues, normalizedDefaultValues)) {
+                    this.uncontrolledValues = normalizedDefaultValues;
+                }
+            }
+        }
+        this.ensureSingleModeNonCollapsibleSelection();
+        this.ensureFocusedValueStillValid();
+    }
+    initializeUncontrolledState(source) {
+        if (this.isControlled()) {
+            this.uncontrolledValues = new Set();
+            return true;
+        }
+        if (this.items.size === 0) {
+            this.uncontrolledValues = new Set();
+            return false;
+        }
+        const defaultInput = this.defaultValue();
+        const initialValues = this.normalizeValueInputToArray(defaultInput);
+        this.defaultValuesSnapshot = initialValues;
+        this.uncontrolledValues = this.normalizeSetForCurrentItems(toSet(initialValues));
+        if (initialValues.length === 0) {
+            return this.items.size > 0 || source === 'check';
+        }
+        const requiredValuesCount = new Set(initialValues).size;
+        if (this.uncontrolledValues.size >= requiredValuesCount) {
+            return true;
+        }
+        return source === 'check';
+    }
+    ensureSingleModeNonCollapsibleSelection() {
+        if (this.type() !== 'single' || this.collapsible()) {
+            return;
+        }
+        const effectiveValues = this.getEffectiveValueSet();
+        if (effectiveValues.size > 0) {
+            return;
+        }
+        const firstEnabled = this.getEnabledItems()[0];
+        if (firstEnabled === undefined) {
+            return;
+        }
+        if (this.isControlled()) {
+            return;
+        }
+        this.uncontrolledValues = new Set([firstEnabled.getValue()]);
+    }
+    ensureFocusedValueStillValid() {
+        const enabledItems = this.getEnabledItems();
+        if (enabledItems.length === 0) {
+            this.focusedValue = null;
+            return;
+        }
+        if (this.focusedValue !== null && enabledItems.some((item) => item.getValue() === this.focusedValue)) {
+            return;
+        }
+        const expandedSet = this.getEffectiveValueSet();
+        const expandedItem = enabledItems.find((item) => expandedSet.has(item.getValue())) ??
+            null;
+        this.focusedValue = expandedItem?.getValue() ?? enabledItems[0]?.getValue() ?? null;
+    }
+    isControlled() {
+        return this.value() !== undefined;
+    }
+    getEffectiveValueSet() {
+        if (!this.isControlled()) {
+            return this.uncontrolledValues;
+        }
+        const controlledValues = toSet(this.normalizeValueInputToArray(this.value()));
+        return this.normalizeSetForCurrentItems(controlledValues);
+    }
+    normalizeSetForCurrentItems(values) {
+        const availableValues = new Set(this.getOrderedItems().map((item) => item.getValue()));
+        const normalized = new Set();
+        for (const value of values) {
+            if (availableValues.has(value)) {
+                normalized.add(value);
+            }
+        }
+        if (this.type() === 'single') {
+            const first = this.mapSetToOrderedValues(normalized)[0];
+            return first === undefined ? new Set() : new Set([first]);
+        }
+        return normalized;
+    }
+    normalizeValueInputToArray(value) {
+        if (value === undefined || value === null) {
+            return [];
+        }
+        if (Array.isArray(value)) {
+            return [...value];
+        }
+        return [value];
+    }
+    mapSetToOrderedValues(values) {
+        return this.getOrderedItems()
+            .map((item) => item.getValue())
+            .filter((value) => values.has(value));
+    }
+    getOrderedItems() {
+        return Array.from(this.items).sort(compareAccordionItemsByDomPosition);
+    }
+    getEnabledItems() {
+        return this.getOrderedItems().filter((item) => !this.isItemDisabled(item));
+    }
+    resolveCurrentFocusableItem() {
+        const enabledItems = this.getEnabledItems();
+        if (enabledItems.length === 0) {
+            return null;
+        }
+        if (this.focusedValue !== null) {
+            const focusedItem = enabledItems.find((item) => item.getValue() === this.focusedValue) ?? null;
+            if (focusedItem !== null) {
+                return focusedItem;
+            }
+        }
+        const expandedValues = this.getEffectiveValueSet();
+        const expandedItem = enabledItems.find((item) => expandedValues.has(item.getValue())) ?? null;
+        if (expandedItem !== null) {
+            return expandedItem;
+        }
+        return enabledItems[0] ?? null;
+    }
+    getHostElement() {
+        return this.hostRef.nativeElement;
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngAccordion.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-type')
+], TngAccordion.prototype, "dataType", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngAccordion.prototype, "dataDisabled", null);
+TngAccordion = __decorate([
+    Directive({
+        selector: '[tngAccordion]',
+        exportAs: 'tngAccordion',
+        standalone: true,
+    })
+], TngAccordion);
+export { TngAccordion };
+let TngAccordionItem = class TngAccordionItem {
+    root = inject(TngAccordion, { optional: true, host: true });
+    hostRef = inject(ElementRef);
+    fallbackValue = createAccordionItemValue();
+    registrationOrder = nextAccordionItemRegistrationOrder++;
+    trigger = null;
+    panel = null;
+    expandedOnce = false;
+    value = input(undefined, {
+        transform: normalizeOptionalAccordionValue,
+    });
+    disabled = input(false, {
+        transform: normalizeBooleanInput,
+    });
+    dataSlot = 'accordion-item';
+    get dataState() {
+        return this.root?.isItemExpanded(this) ? 'open' : 'closed';
+    }
+    get dataDisabled() {
+        return this.disabled() ? 'true' : 'false';
+    }
+    ngOnInit() {
+        this.root?.registerItem(this);
+    }
+    ngDoCheck() {
+        this.root?.notifyItemMutated();
+    }
+    ngOnDestroy() {
+        this.root?.unregisterItem(this);
+    }
+    getHostElement() {
+        return this.hostRef.nativeElement;
+    }
+    getRegistrationOrder() {
+        return this.registrationOrder;
+    }
+    getValue() {
+        return this.value() ?? this.fallbackValue;
+    }
+    getAccordion() {
+        return this.root ?? null;
+    }
+    registerTrigger(trigger) {
+        this.trigger = trigger;
+    }
+    unregisterTrigger(trigger) {
+        if (this.trigger === trigger) {
+            this.trigger = null;
+        }
+    }
+    registerPanel(panel) {
+        this.panel = panel;
+    }
+    unregisterPanel(panel) {
+        if (this.panel === panel) {
+            this.panel = null;
+        }
+    }
+    focusTrigger() {
+        this.trigger?.focusSelf();
+    }
+    getTriggerId() {
+        return this.trigger?.getTriggerId() ?? null;
+    }
+    getPanelId() {
+        return this.panel?.getPanelId() ?? null;
+    }
+    markExpandedOnce() {
+        this.expandedOnce = true;
+    }
+    hasExpandedOnce() {
+        return this.expandedOnce;
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngAccordionItem.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-state')
+], TngAccordionItem.prototype, "dataState", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngAccordionItem.prototype, "dataDisabled", null);
+TngAccordionItem = __decorate([
+    Directive({
+        selector: '[tngAccordionItem]',
+        exportAs: 'tngAccordionItem',
+        standalone: true,
+    })
+], TngAccordionItem);
+export { TngAccordionItem };
+let TngAccordionTrigger = class TngAccordionTrigger {
+    item = inject(TngAccordionItem, { optional: true, host: true });
+    hostRef = inject(ElementRef);
+    fallbackTriggerId = this.hostRef.nativeElement.getAttribute('id') ?? createAccordionTriggerId();
+    dataSlot = 'accordion-trigger';
+    get idAttr() {
+        return this.resolveTriggerId();
+    }
+    role = 'button';
+    get typeAttr() {
+        return this.hostRef.nativeElement instanceof HTMLButtonElement ? 'button' : null;
+    }
+    get tabIndexAttr() {
+        if (this.item === null) {
+            return this.hostRef.nativeElement.getAttribute('tabindex') ?? '0';
+        }
+        const root = this.item.getAccordion();
+        return root?.getTriggerTabIndex(this.item) ?? '0';
+    }
+    get ariaExpanded() {
+        if (this.item === null) {
+            return 'false';
+        }
+        return this.item.getAccordion()?.isItemExpanded(this.item) ? 'true' : 'false';
+    }
+    get ariaControls() {
+        return this.item?.getPanelId() ?? null;
+    }
+    get ariaDisabled() {
+        if (this.item === null) {
+            return null;
+        }
+        return this.item.getAccordion()?.isItemDisabled(this.item) ? 'true' : null;
+    }
+    get disabledAttr() {
+        if (!(this.hostRef.nativeElement instanceof HTMLButtonElement) || this.item === null) {
+            return null;
+        }
+        return this.item.getAccordion()?.isItemDisabled(this.item) ? '' : null;
+    }
+    get dataState() {
+        if (this.item === null) {
+            return 'closed';
+        }
+        return this.item.getAccordion()?.isItemExpanded(this.item) ? 'open' : 'closed';
+    }
+    get dataDisabled() {
+        if (this.item === null) {
+            return 'false';
+        }
+        return this.item.getAccordion()?.isItemDisabled(this.item) ? 'true' : 'false';
+    }
+    ngOnInit() {
+        this.item?.registerTrigger(this);
+    }
+    ngOnDestroy() {
+        this.item?.unregisterTrigger(this);
+    }
+    getTriggerId() {
+        return this.resolveTriggerId();
+    }
+    focusSelf() {
+        this.hostRef.nativeElement.focus();
+    }
+    resolveTriggerId() {
+        const explicitId = this.hostRef.nativeElement.getAttribute('id');
+        if (explicitId !== null && explicitId.length > 0) {
+            return explicitId;
+        }
+        return this.fallbackTriggerId;
+    }
+    onFocus() {
+        if (this.item === null) {
+            return;
+        }
+        this.item.getAccordion()?.onTriggerFocused(this.item);
+    }
+    onClick(event) {
+        if (this.item === null) {
+            return;
+        }
+        const accordion = this.item.getAccordion();
+        if (accordion?.isItemDisabled(this.item)) {
+            event.preventDefault();
+            return;
+        }
+        accordion?.onTriggerClicked(this.item);
+    }
+    onKeydown(event) {
+        if (this.item === null) {
+            return;
+        }
+        this.item.getAccordion()?.onTriggerKeydown(this.item, event);
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngAccordionTrigger.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.id')
+], TngAccordionTrigger.prototype, "idAttr", null);
+__decorate([
+    HostBinding('attr.role')
+], TngAccordionTrigger.prototype, "role", void 0);
+__decorate([
+    HostBinding('attr.type')
+], TngAccordionTrigger.prototype, "typeAttr", null);
+__decorate([
+    HostBinding('attr.tabindex')
+], TngAccordionTrigger.prototype, "tabIndexAttr", null);
+__decorate([
+    HostBinding('attr.aria-expanded')
+], TngAccordionTrigger.prototype, "ariaExpanded", null);
+__decorate([
+    HostBinding('attr.aria-controls')
+], TngAccordionTrigger.prototype, "ariaControls", null);
+__decorate([
+    HostBinding('attr.aria-disabled')
+], TngAccordionTrigger.prototype, "ariaDisabled", null);
+__decorate([
+    HostBinding('attr.disabled')
+], TngAccordionTrigger.prototype, "disabledAttr", null);
+__decorate([
+    HostBinding('attr.data-state')
+], TngAccordionTrigger.prototype, "dataState", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngAccordionTrigger.prototype, "dataDisabled", null);
+__decorate([
+    HostListener('focus')
+], TngAccordionTrigger.prototype, "onFocus", null);
+__decorate([
+    HostListener('click', ['$event'])
+], TngAccordionTrigger.prototype, "onClick", null);
+__decorate([
+    HostListener('keydown', ['$event'])
+], TngAccordionTrigger.prototype, "onKeydown", null);
+TngAccordionTrigger = __decorate([
+    Directive({
+        selector: '[tngAccordionTrigger]',
+        exportAs: 'tngAccordionTrigger',
+        standalone: true,
+    })
+], TngAccordionTrigger);
+export { TngAccordionTrigger };
+let TngAccordionPanel = class TngAccordionPanel {
+    item = inject(TngAccordionItem, { optional: true, host: true });
+    hostRef = inject(ElementRef);
+    fallbackPanelId = this.hostRef.nativeElement.getAttribute('id') ?? createAccordionPanelId();
+    dataSlot = 'accordion-panel';
+    get idAttr() {
+        return this.resolvePanelId();
+    }
+    role = 'region';
+    get ariaLabelledBy() {
+        return this.item?.getTriggerId() ?? null;
+    }
+    get hiddenAttr() {
+        if (this.item === null) {
+            return '';
+        }
+        const accordion = this.item.getAccordion();
+        if (accordion === null) {
+            return '';
+        }
+        const isVisible = accordion.isItemExpanded(this.item) && accordion.isPanelMounted(this.item);
+        return isVisible ? null : '';
+    }
+    get dataState() {
+        if (this.item === null) {
+            return 'closed';
+        }
+        return this.item.getAccordion()?.isItemExpanded(this.item) ? 'open' : 'closed';
+    }
+    get dataMounted() {
+        if (this.item === null) {
+            return 'false';
+        }
+        return this.item.getAccordion()?.isPanelMounted(this.item) ? 'true' : 'false';
+    }
+    ngOnInit() {
+        this.item?.registerPanel(this);
+    }
+    ngDoCheck() {
+        if (this.item?.getAccordion()?.isItemExpanded(this.item)) {
+            this.item.markExpandedOnce();
+        }
+    }
+    ngOnDestroy() {
+        this.item?.unregisterPanel(this);
+    }
+    getPanelId() {
+        return this.resolvePanelId();
+    }
+    resolvePanelId() {
+        const explicitId = this.hostRef.nativeElement.getAttribute('id');
+        if (explicitId !== null && explicitId.length > 0) {
+            return explicitId;
+        }
+        return this.fallbackPanelId;
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngAccordionPanel.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.id')
+], TngAccordionPanel.prototype, "idAttr", null);
+__decorate([
+    HostBinding('attr.role')
+], TngAccordionPanel.prototype, "role", void 0);
+__decorate([
+    HostBinding('attr.aria-labelledby')
+], TngAccordionPanel.prototype, "ariaLabelledBy", null);
+__decorate([
+    HostBinding('attr.hidden')
+], TngAccordionPanel.prototype, "hiddenAttr", null);
+__decorate([
+    HostBinding('attr.data-state')
+], TngAccordionPanel.prototype, "dataState", null);
+__decorate([
+    HostBinding('attr.data-mounted')
+], TngAccordionPanel.prototype, "dataMounted", null);
+TngAccordionPanel = __decorate([
+    Directive({
+        selector: '[tngAccordionPanel]',
+        exportAs: 'tngAccordionPanel',
+        standalone: true,
+    })
+], TngAccordionPanel);
+export { TngAccordionPanel };
+//# sourceMappingURL=tng-accordion.js.map