@tailng-ui/primitives 0.1.0 → 0.11.0

package/src/lib/overlay/dialog/tng-dialog.js

@@ -0,0 +1,854 @@
+import { __decorate } from "tslib";
+import { Directive, ElementRef, HostBinding, HostListener, afterNextRender, booleanAttribute, effect, inject, Injector, input, output, signal, } from '@angular/core';
+import { createOverlayFocusHandoffController, createModalIsolationManager, createOverlayScrollLockManager, resolveFirstFocusableElement, resolveFocusableElements, createTngIdFactory, } from '@tailng-ui/cdk';
+import { tngPrimitiveOverlayRuntime } from '../tng-overlay-runtime';
+const createDialogId = createTngIdFactory('tng-dialog');
+const createDialogPanelId = createTngIdFactory('tng-dialog-panel');
+const createDialogTitleId = createTngIdFactory('tng-dialog-title');
+const createDialogDescriptionId = createTngIdFactory('tng-dialog-description');
+const createDialogFocusableId = createTngIdFactory('tng-dialog-focusable');
+function normalizeOptionalBooleanInput(value) {
+    if (value === null || value === undefined) {
+        return undefined;
+    }
+    return booleanAttribute(value);
+}
+function toScrollLockDocument(documentRef) {
+    if (!(documentRef instanceof Document)) {
+        return null;
+    }
+    return documentRef;
+}
+function toModalIsolationDocument(documentRef) {
+    if (!(documentRef instanceof Document)) {
+        return null;
+    }
+    return documentRef;
+}
+function toModalIsolationElement(elementRef) {
+    if (!(elementRef instanceof HTMLElement)) {
+        return null;
+    }
+    return elementRef;
+}
+function mapOverlayDismissReason(reason) {
+    if (reason === 'escape-key') {
+        return 'escape';
+    }
+    if (reason === 'outside-pointer') {
+        return 'backdrop';
+    }
+    return 'programmatic';
+}
+const dialogGlobalDocument = typeof document === 'undefined' ? null : document;
+const dialogModalIsolation = createModalIsolationManager({
+    documentRef: toModalIsolationDocument(dialogGlobalDocument),
+});
+const dialogFocusHandoff = createOverlayFocusHandoffController();
+export function resolveTngDialogActiveElement(documentRef) {
+    if (!(documentRef instanceof Document)) {
+        return null;
+    }
+    const activeElement = documentRef.activeElement;
+    return activeElement instanceof HTMLElement ? activeElement : null;
+}
+export function resolveTngDialogFocusableElements(container) {
+    return resolveFocusableElements(container);
+}
+export function resolveTngDialogMarkedInitialElement(container) {
+    if (!(container instanceof HTMLElement)) {
+        return null;
+    }
+    const markedInitial = container.querySelector('[data-tng-dialog-initial-focus]');
+    if (markedInitial === null) {
+        return null;
+    }
+    if (resolveTngDialogFocusableElements(container).includes(markedInitial)) {
+        return markedInitial;
+    }
+    return resolveTngDialogFocusableElements(markedInitial)[0] ?? null;
+}
+function readKeyboardEvent(event) {
+    return event instanceof KeyboardEvent ? event : null;
+}
+function resolveFirstFocusableWithin(container) {
+    return resolveFirstFocusableElement(container);
+}
+function isDialogCloseReason(value) {
+    return value === 'backdrop' || value === 'close-button' || value === 'escape' || value === 'programmatic';
+}
+let TngDialog = class TngDialog {
+    openInput = input(undefined, {
+        alias: 'open',
+        transform: normalizeOptionalBooleanInput,
+    });
+    defaultOpen = input(false, {
+        transform: booleanAttribute,
+    });
+    disabled = input(false, {
+        transform: booleanAttribute,
+    });
+    dismissible = input(true, {
+        transform: booleanAttribute,
+    });
+    closeOnBackdropClick = input(true, {
+        transform: booleanAttribute,
+    });
+    closeOnEscape = input(true, {
+        transform: booleanAttribute,
+    });
+    restoreFocus = input(true, {
+        transform: booleanAttribute,
+    });
+    autoFocus = input('first-focusable', {
+        transform: (value) => {
+            return value === 'none' || value === 'dialog' || value === 'first-focusable'
+                ? value
+                : 'first-focusable';
+        },
+    });
+    trapFocus = input(true, {
+        transform: booleanAttribute,
+    });
+    lockScroll = input(true, {
+        transform: booleanAttribute,
+    });
+    ariaLabel = input(null);
+    ariaLabelledby = input(null);
+    ariaDescribedby = input(null);
+    size = input('md');
+    openChange = output();
+    closed = output();
+    hostRef = inject(ElementRef);
+    documentRef = dialogGlobalDocument;
+    injector = inject(Injector);
+    instanceId = createDialogId();
+    scrollLock = createOverlayScrollLockManager({
+        documentRef: toScrollLockDocument(this.documentRef),
+    });
+    uncontrolledOpen = signal(false);
+    openStateEffect = effect(() => {
+        if (!this.initialized) {
+            return;
+        }
+        if (this.isOpen()) {
+            this.activateDialog();
+            return;
+        }
+        this.deactivateDialog();
+    });
+    initialized = false;
+    isActive = false;
+    isFocusLayerRegistered = false;
+    isOverlayLayerRegistered = false;
+    panelElement = null;
+    panelElementId = null;
+    registeredTitleId = null;
+    registeredDescriptionId = null;
+    dataSlot = 'dialog';
+    get dataOpenAttr() {
+        return this.isOpen() ? 'true' : 'false';
+    }
+    get dataStateAttr() {
+        return this.isOpen() ? 'open' : 'closed';
+    }
+    get dataDisabledAttr() {
+        return this.disabled() ? '' : null;
+    }
+    get dataSizeAttr() {
+        return this.size();
+    }
+    ngOnInit() {
+        if (!this.isControlled()) {
+            this.uncontrolledOpen.set(this.defaultOpen());
+        }
+        this.initialized = true;
+        if (this.isOpen()) {
+            this.activateDialog();
+        }
+    }
+    ngOnDestroy() {
+        this.openStateEffect.destroy();
+        this.deactivateDialog();
+        this.unregisterFocusLayer();
+    }
+    isOpen() {
+        return this.openInput() ?? this.uncontrolledOpen();
+    }
+    openDialog() {
+        if (this.disabled()) {
+            return;
+        }
+        this.setOpenState(true);
+    }
+    closeDialog(reason = 'programmatic') {
+        this.requestClose(reason);
+    }
+    toggleDialog(force) {
+        if (force !== undefined) {
+            if (force) {
+                this.openDialog();
+                return;
+            }
+            this.closeDialog('programmatic');
+            return;
+        }
+        if (this.isOpen()) {
+            this.closeDialog('programmatic');
+            return;
+        }
+        this.openDialog();
+    }
+    requestClose(reason) {
+        if (!this.isOpen()) {
+            return;
+        }
+        this.closed.emit(reason);
+        this.setOpenState(false);
+    }
+    registerPanel(panel, id) {
+        this.panelElement = panel;
+        this.panelElementId = id;
+    }
+    unregisterPanel(panel) {
+        if (this.panelElement === panel) {
+            this.panelElement = null;
+            this.panelElementId = null;
+        }
+    }
+    registerTitle(id) {
+        this.registeredTitleId = id;
+    }
+    unregisterTitle(id) {
+        if (this.registeredTitleId === id) {
+            this.registeredTitleId = null;
+        }
+    }
+    registerDescription(id) {
+        this.registeredDescriptionId = id;
+    }
+    unregisterDescription(id) {
+        if (this.registeredDescriptionId === id) {
+            this.registeredDescriptionId = null;
+        }
+    }
+    getPanelId() {
+        return this.panelElementId;
+    }
+    resolveAriaLabelledby() {
+        const explicit = this.ariaLabelledby()?.trim() ?? '';
+        if (explicit.length > 0) {
+            return explicit;
+        }
+        return this.registeredTitleId;
+    }
+    resolveAriaDescribedby() {
+        const explicit = this.ariaDescribedby()?.trim() ?? '';
+        if (explicit.length > 0) {
+            return explicit;
+        }
+        return this.registeredDescriptionId;
+    }
+    onBackdropPointerDown(event) {
+        if (!this.shouldCloseFromBackdrop()) {
+            return;
+        }
+        if (!(event.currentTarget instanceof HTMLElement)) {
+            return;
+        }
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        event.preventDefault();
+        this.requestClose('backdrop');
+    }
+    trapTabNavigation(event) {
+        if (!this.trapFocus()) {
+            return;
+        }
+        const keyboardEvent = readKeyboardEvent(event);
+        if (keyboardEvent === null || keyboardEvent.key !== 'Tab') {
+            return;
+        }
+        const panel = this.panelElement;
+        if (panel === null) {
+            return;
+        }
+        if (!dialogFocusHandoff.isTrapActive(this.instanceId)) {
+            return;
+        }
+        const focusableMemberIds = this.resolveFocusableMemberIds(panel);
+        const firstMemberId = focusableMemberIds[0];
+        if (firstMemberId === undefined) {
+            return;
+        }
+        const lastMemberId = focusableMemberIds[focusableMemberIds.length - 1] ?? firstMemberId;
+        const activeElement = resolveTngDialogActiveElement(this.documentRef);
+        const activeElementId = activeElement === null ? null : this.ensureElementId(activeElement);
+        let candidateId = null;
+        if (activeElement === null || !panel.contains(activeElement)) {
+            candidateId = keyboardEvent.shiftKey ? lastMemberId : firstMemberId;
+        }
+        else if (activeElementId === firstMemberId && keyboardEvent.shiftKey) {
+            candidateId = lastMemberId;
+        }
+        else if (activeElementId === lastMemberId && !keyboardEvent.shiftKey) {
+            candidateId = firstMemberId;
+        }
+        else {
+            if (activeElementId !== null) {
+                dialogFocusHandoff.recordFocus(this.instanceId, activeElementId);
+            }
+            return;
+        }
+        const resolvedId = dialogFocusHandoff.resolveFocusCandidate(this.instanceId, candidateId);
+        if (resolvedId === null) {
+            return;
+        }
+        const nextFocusTarget = this.resolveElementById(resolvedId);
+        if (nextFocusTarget === null) {
+            return;
+        }
+        keyboardEvent.preventDefault();
+        nextFocusTarget.focus();
+        dialogFocusHandoff.recordFocus(this.instanceId, resolvedId);
+    }
+    recordFocusedElement(target) {
+        if (!(target instanceof HTMLElement) || !this.isOpen()) {
+            return;
+        }
+        const panel = this.panelElement;
+        if (panel === null || !panel.contains(target)) {
+            return;
+        }
+        const targetId = this.ensureElementId(target);
+        dialogFocusHandoff.recordFocus(this.instanceId, targetId);
+    }
+    activateDialog() {
+        if (this.isActive) {
+            return;
+        }
+        this.isActive = true;
+        if (this.lockScroll()) {
+            this.scrollLock.acquire(this.instanceId);
+        }
+        this.registerFocusLayer();
+        this.activateFocusLayer();
+        this.registerOverlayLayer();
+        this.activateModalIsolation();
+        afterNextRender(() => {
+            this.focusInitialElement();
+        }, { injector: this.injector });
+    }
+    deactivateDialog() {
+        if (!this.isActive) {
+            return;
+        }
+        this.isActive = false;
+        if (this.lockScroll()) {
+            this.scrollLock.release(this.instanceId);
+        }
+        this.deactivateFocusLayer();
+        this.unregisterFocusLayer();
+        this.unregisterOverlayLayer();
+        this.deactivateModalIsolation();
+    }
+    focusInitialElement() {
+        if (!this.isOpen()) {
+            return;
+        }
+        const panel = this.panelElement;
+        if (panel === null) {
+            return;
+        }
+        if (this.autoFocus() === 'none') {
+            return;
+        }
+        if (this.autoFocus() === 'dialog') {
+            panel.focus();
+            return;
+        }
+        const markedInitial = resolveTngDialogMarkedInitialElement(panel);
+        if (markedInitial !== null) {
+            markedInitial.focus();
+            return;
+        }
+        const firstFocusable = resolveFirstFocusableWithin(panel);
+        if (firstFocusable !== null) {
+            firstFocusable.focus();
+            return;
+        }
+        panel.focus();
+    }
+    isControlled() {
+        return this.openInput() !== undefined;
+    }
+    setOpenState(nextOpen) {
+        if (nextOpen && this.disabled()) {
+            return;
+        }
+        if (this.isOpen() === nextOpen) {
+            return;
+        }
+        if (!this.isControlled()) {
+            this.uncontrolledOpen.set(nextOpen);
+        }
+        this.openChange.emit(nextOpen);
+    }
+    shouldCloseFromBackdrop() {
+        return this.isOpen() && this.dismissible() && this.closeOnBackdropClick();
+    }
+    shouldCloseFromEscape() {
+        return this.isOpen() && this.dismissible() && this.closeOnEscape();
+    }
+    activateModalIsolation() {
+        const hostElement = toModalIsolationElement(this.hostRef.nativeElement);
+        if (hostElement === null) {
+            return;
+        }
+        dialogModalIsolation.activate(this.instanceId, hostElement);
+    }
+    deactivateModalIsolation() {
+        dialogModalIsolation.deactivate(this.instanceId);
+    }
+    registerOverlayLayer() {
+        const hostElement = this.hostRef.nativeElement;
+        tngPrimitiveOverlayRuntime.registerLayer({
+            containsTarget: (target, path) => {
+                if (target instanceof Node && hostElement.contains(target)) {
+                    return true;
+                }
+                return path.includes(hostElement);
+            },
+            dismissOnEscape: this.shouldCloseFromEscape(),
+            dismissOnOutsidePointer: false,
+            id: this.instanceId,
+            modal: true,
+            onDismiss: (reason) => {
+                if (reason === 'escape-key' && !this.shouldCloseFromEscape()) {
+                    return;
+                }
+                if (reason === 'outside-pointer' && !this.shouldCloseFromBackdrop()) {
+                    return;
+                }
+                this.requestClose(mapOverlayDismissReason(reason));
+            },
+        });
+        this.isOverlayLayerRegistered = true;
+    }
+    unregisterOverlayLayer() {
+        if (!this.isOverlayLayerRegistered) {
+            return;
+        }
+        tngPrimitiveOverlayRuntime.unregisterLayer(this.instanceId);
+        this.isOverlayLayerRegistered = false;
+    }
+    activateFocusLayer() {
+        const activeElement = resolveTngDialogActiveElement(this.documentRef);
+        const restoreFocusTargetId = activeElement === null ? null : this.ensureElementId(activeElement);
+        dialogFocusHandoff.activateLayer(this.instanceId, restoreFocusTargetId);
+    }
+    deactivateFocusLayer() {
+        const restoreFocusTargetId = dialogFocusHandoff.deactivateLayer(this.instanceId);
+        if (!this.restoreFocus() || restoreFocusTargetId === null) {
+            return;
+        }
+        const restoreFocusTarget = this.resolveElementById(restoreFocusTargetId);
+        restoreFocusTarget?.focus();
+    }
+    registerFocusLayer() {
+        if (this.isFocusLayerRegistered) {
+            return;
+        }
+        dialogFocusHandoff.registerLayer({
+            layerId: this.instanceId,
+            members: () => {
+                const panel = this.panelElement;
+                if (panel === null) {
+                    return [];
+                }
+                return this.resolveFocusableMemberIds(panel);
+            },
+            restoreFocus: this.restoreFocus(),
+            trapFocus: this.trapFocus(),
+        });
+        this.isFocusLayerRegistered = true;
+    }
+    unregisterFocusLayer() {
+        if (!this.isFocusLayerRegistered) {
+            return;
+        }
+        dialogFocusHandoff.unregisterLayer(this.instanceId);
+        this.isFocusLayerRegistered = false;
+    }
+    resolveFocusableMemberIds(panel) {
+        const focusableElements = resolveTngDialogFocusableElements(panel);
+        if (focusableElements.length === 0) {
+            return [];
+        }
+        return focusableElements.map((element) => this.ensureElementId(element));
+    }
+    ensureElementId(element) {
+        const existingId = element.id.trim();
+        if (existingId.length > 0) {
+            return existingId;
+        }
+        const generatedId = createDialogFocusableId();
+        element.id = generatedId;
+        return generatedId;
+    }
+    resolveElementById(id) {
+        if (this.documentRef === null) {
+            return null;
+        }
+        const element = this.documentRef.getElementById(id);
+        return element instanceof HTMLElement ? element : null;
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngDialog.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-open')
+], TngDialog.prototype, "dataOpenAttr", null);
+__decorate([
+    HostBinding('attr.data-state')
+], TngDialog.prototype, "dataStateAttr", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngDialog.prototype, "dataDisabledAttr", null);
+__decorate([
+    HostBinding('attr.data-size')
+], TngDialog.prototype, "dataSizeAttr", null);
+TngDialog = __decorate([
+    Directive({
+        selector: '[tngDialog]',
+        exportAs: 'tngDialog',
+        standalone: true,
+    })
+], TngDialog);
+export { TngDialog };
+let TngDialogPanel = class TngDialogPanel {
+    dialog = inject(TngDialog);
+    hostRef = inject(ElementRef);
+    resolvedId = this.hostRef.nativeElement.id.trim().length > 0
+        ? this.hostRef.nativeElement.id
+        : createDialogPanelId();
+    dataSlot = 'dialog-panel';
+    get dataOpenAttr() {
+        return this.dialog.isOpen() ? 'true' : 'false';
+    }
+    get dataSizeAttr() {
+        return this.dialog.size();
+    }
+    get dataStateAttr() {
+        return this.dialog.isOpen() ? 'open' : 'closed';
+    }
+    get hiddenAttr() {
+        return this.dialog.isOpen() ? null : '';
+    }
+    get idAttr() {
+        return this.resolvedId;
+    }
+    roleAttr = 'dialog';
+    tabindexAttr = '-1';
+    get ariaDescribedByAttr() {
+        return this.dialog.resolveAriaDescribedby();
+    }
+    get ariaLabelAttr() {
+        const label = this.dialog.ariaLabel()?.trim() ?? '';
+        return label.length > 0 ? label : null;
+    }
+    get ariaLabelledByAttr() {
+        return this.dialog.resolveAriaLabelledby();
+    }
+    get ariaModalAttr() {
+        return this.dialog.isOpen() ? 'true' : null;
+    }
+    ngOnInit() {
+        this.dialog.registerPanel(this.hostRef.nativeElement, this.resolvedId);
+    }
+    ngOnDestroy() {
+        this.dialog.unregisterPanel(this.hostRef.nativeElement);
+    }
+    onKeydown(event) {
+        if (event.key === 'Tab') {
+            this.dialog.trapTabNavigation(event);
+        }
+    }
+    onFocusIn(target) {
+        this.dialog.recordFocusedElement(target);
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngDialogPanel.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-open')
+], TngDialogPanel.prototype, "dataOpenAttr", null);
+__decorate([
+    HostBinding('attr.data-size')
+], TngDialogPanel.prototype, "dataSizeAttr", null);
+__decorate([
+    HostBinding('attr.data-state')
+], TngDialogPanel.prototype, "dataStateAttr", null);
+__decorate([
+    HostBinding('attr.hidden')
+], TngDialogPanel.prototype, "hiddenAttr", null);
+__decorate([
+    HostBinding('attr.id')
+], TngDialogPanel.prototype, "idAttr", null);
+__decorate([
+    HostBinding('attr.role')
+], TngDialogPanel.prototype, "roleAttr", void 0);
+__decorate([
+    HostBinding('attr.tabindex')
+], TngDialogPanel.prototype, "tabindexAttr", void 0);
+__decorate([
+    HostBinding('attr.aria-describedby')
+], TngDialogPanel.prototype, "ariaDescribedByAttr", null);
+__decorate([
+    HostBinding('attr.aria-label')
+], TngDialogPanel.prototype, "ariaLabelAttr", null);
+__decorate([
+    HostBinding('attr.aria-labelledby')
+], TngDialogPanel.prototype, "ariaLabelledByAttr", null);
+__decorate([
+    HostBinding('attr.aria-modal')
+], TngDialogPanel.prototype, "ariaModalAttr", null);
+__decorate([
+    HostListener('keydown', ['$event'])
+], TngDialogPanel.prototype, "onKeydown", null);
+__decorate([
+    HostListener('focusin', ['$event.target'])
+], TngDialogPanel.prototype, "onFocusIn", null);
+TngDialogPanel = __decorate([
+    Directive({
+        selector: '[tngDialogPanel]',
+        exportAs: 'tngDialogPanel',
+        standalone: true,
+    })
+], TngDialogPanel);
+export { TngDialogPanel };
+let TngDialogBackdrop = class TngDialogBackdrop {
+    dialog = inject(TngDialog);
+    dataSlot = 'dialog-backdrop';
+    get dataOpenAttr() {
+        return this.dialog.isOpen() ? 'true' : 'false';
+    }
+    get dataStateAttr() {
+        return this.dialog.isOpen() ? 'open' : 'closed';
+    }
+    get hiddenAttr() {
+        return this.dialog.isOpen() ? null : '';
+    }
+    onPointerDown(event) {
+        this.dialog.onBackdropPointerDown(event);
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngDialogBackdrop.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-open')
+], TngDialogBackdrop.prototype, "dataOpenAttr", null);
+__decorate([
+    HostBinding('attr.data-state')
+], TngDialogBackdrop.prototype, "dataStateAttr", null);
+__decorate([
+    HostBinding('attr.hidden')
+], TngDialogBackdrop.prototype, "hiddenAttr", null);
+__decorate([
+    HostListener('pointerdown', ['$event'])
+], TngDialogBackdrop.prototype, "onPointerDown", null);
+TngDialogBackdrop = __decorate([
+    Directive({
+        selector: '[tngDialogBackdrop]',
+        exportAs: 'tngDialogBackdrop',
+        standalone: true,
+    })
+], TngDialogBackdrop);
+export { TngDialogBackdrop };
+let TngDialogTrigger = class TngDialogTrigger {
+    parentDialog = inject(TngDialog, { optional: true });
+    dialogFor = input(null, {
+        alias: 'tngDialogTrigger',
+    });
+    ariaHasPopupAttr = 'dialog';
+    get ariaControlsAttr() {
+        return this.resolveDialog()?.getPanelId() ?? null;
+    }
+    get ariaExpandedAttr() {
+        return this.resolveDialog()?.isOpen() ? 'true' : 'false';
+    }
+    dataSlot = 'dialog-trigger';
+    get dataOpenAttr() {
+        return this.resolveDialog()?.isOpen() ? 'true' : 'false';
+    }
+    get dataStateAttr() {
+        return this.resolveDialog()?.isOpen() ? 'open' : 'closed';
+    }
+    get dataDisabledAttr() {
+        return this.resolveDialog()?.disabled() ? '' : null;
+    }
+    onClick() {
+        this.resolveDialog()?.openDialog();
+    }
+    resolveDialog() {
+        return this.dialogFor() ?? this.parentDialog;
+    }
+};
+__decorate([
+    HostBinding('attr.aria-haspopup')
+], TngDialogTrigger.prototype, "ariaHasPopupAttr", void 0);
+__decorate([
+    HostBinding('attr.aria-controls')
+], TngDialogTrigger.prototype, "ariaControlsAttr", null);
+__decorate([
+    HostBinding('attr.aria-expanded')
+], TngDialogTrigger.prototype, "ariaExpandedAttr", null);
+__decorate([
+    HostBinding('attr.data-slot')
+], TngDialogTrigger.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-open')
+], TngDialogTrigger.prototype, "dataOpenAttr", null);
+__decorate([
+    HostBinding('attr.data-state')
+], TngDialogTrigger.prototype, "dataStateAttr", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngDialogTrigger.prototype, "dataDisabledAttr", null);
+__decorate([
+    HostListener('click')
+], TngDialogTrigger.prototype, "onClick", null);
+TngDialogTrigger = __decorate([
+    Directive({
+        selector: '[tngDialogTrigger]',
+        exportAs: 'tngDialogTrigger',
+        standalone: true,
+    })
+], TngDialogTrigger);
+export { TngDialogTrigger };
+let TngDialogTitle = class TngDialogTitle {
+    dialog = inject(TngDialog);
+    hostRef = inject(ElementRef);
+    resolvedId = this.hostRef.nativeElement.id.trim().length > 0
+        ? this.hostRef.nativeElement.id
+        : createDialogTitleId();
+    dataSlot = 'dialog-title';
+    get idAttr() {
+        return this.resolvedId;
+    }
+    ngOnInit() {
+        this.dialog.registerTitle(this.resolvedId);
+    }
+    ngOnDestroy() {
+        this.dialog.unregisterTitle(this.resolvedId);
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngDialogTitle.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.id')
+], TngDialogTitle.prototype, "idAttr", null);
+TngDialogTitle = __decorate([
+    Directive({
+        selector: '[tngDialogTitle]',
+        exportAs: 'tngDialogTitle',
+        standalone: true,
+    })
+], TngDialogTitle);
+export { TngDialogTitle };
+let TngDialogDescription = class TngDialogDescription {
+    dialog = inject(TngDialog);
+    hostRef = inject(ElementRef);
+    resolvedId = this.hostRef.nativeElement.id.trim().length > 0
+        ? this.hostRef.nativeElement.id
+        : createDialogDescriptionId();
+    dataSlot = 'dialog-description';
+    get idAttr() {
+        return this.resolvedId;
+    }
+    ngOnInit() {
+        this.dialog.registerDescription(this.resolvedId);
+    }
+    ngOnDestroy() {
+        this.dialog.unregisterDescription(this.resolvedId);
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngDialogDescription.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.id')
+], TngDialogDescription.prototype, "idAttr", null);
+TngDialogDescription = __decorate([
+    Directive({
+        selector: '[tngDialogDescription]',
+        exportAs: 'tngDialogDescription',
+        standalone: true,
+    })
+], TngDialogDescription);
+export { TngDialogDescription };
+let TngDialogContent = class TngDialogContent {
+    dataSlot = 'dialog-content';
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngDialogContent.prototype, "dataSlot", void 0);
+TngDialogContent = __decorate([
+    Directive({
+        selector: '[tngDialogContent]',
+        exportAs: 'tngDialogContent',
+        standalone: true,
+    })
+], TngDialogContent);
+export { TngDialogContent };
+let TngDialogActions = class TngDialogActions {
+    dataSlot = 'dialog-actions';
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngDialogActions.prototype, "dataSlot", void 0);
+TngDialogActions = __decorate([
+    Directive({
+        selector: '[tngDialogActions]',
+        exportAs: 'tngDialogActions',
+        standalone: true,
+    })
+], TngDialogActions);
+export { TngDialogActions };
+let TngDialogClose = class TngDialogClose {
+    dialog = inject(TngDialog);
+    closeReason = input(null, {
+        alias: 'tngDialogClose',
+    });
+    dataSlot = 'dialog-close';
+    onClick() {
+        this.dialog.requestClose(this.resolveCloseReason());
+    }
+    resolveCloseReason() {
+        const raw = this.closeReason()?.trim();
+        if (raw === undefined || raw.length === 0) {
+            return 'close-button';
+        }
+        return isDialogCloseReason(raw) ? raw : 'close-button';
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngDialogClose.prototype, "dataSlot", void 0);
+__decorate([
+    HostListener('click')
+], TngDialogClose.prototype, "onClick", null);
+TngDialogClose = __decorate([
+    Directive({
+        selector: '[tngDialogClose]',
+        exportAs: 'tngDialogClose',
+        standalone: true,
+    })
+], TngDialogClose);
+export { TngDialogClose };
+//# sourceMappingURL=tng-dialog.js.map