@tailng-ui/primitives 0.1.0 → 0.12.0

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

@@ -0,0 +1,614 @@
+import { __decorate } from "tslib";
+import { Directive, ElementRef, HostBinding, HostListener, afterNextRender, booleanAttribute, effect, inject, Injector, input, output, signal, } from '@angular/core';
+import { createOverlayFocusHandoffController, resolveFocusableElements, createTngIdFactory, } from '@tailng-ui/cdk';
+import { tngPrimitiveOverlayRuntime } from '../tng-overlay-runtime';
+const createPopoverId = createTngIdFactory('tng-popover');
+const createPopoverPanelId = createTngIdFactory('tng-popover-panel');
+const createPopoverFocusableId = createTngIdFactory('tng-popover-focusable');
+function normalizeOptionalBooleanInput(value) {
+    if (value === null || value === undefined) {
+        return undefined;
+    }
+    return booleanAttribute(value);
+}
+function isPopoverCloseReason(value) {
+    return value === 'escape' || value === 'outside-pointer' || value === 'programmatic' || value === 'trigger-toggle';
+}
+function mapOverlayDismissReason(reason) {
+    if (reason === 'escape-key') {
+        return 'escape';
+    }
+    if (reason === 'outside-pointer') {
+        return 'outside-pointer';
+    }
+    return 'programmatic';
+}
+const popoverGlobalDocument = typeof document === 'undefined' ? null : document;
+const popoverFocusHandoff = createOverlayFocusHandoffController();
+export function resolvePopoverActiveElement(documentRef) {
+    if (!(documentRef instanceof Document)) {
+        return null;
+    }
+    const active = documentRef.activeElement;
+    return active instanceof HTMLElement ? active : null;
+}
+export function resolvePopoverFocusableElements(container) {
+    return resolveFocusableElements(container);
+}
+export function resolvePopoverMarkedInitialElement(container) {
+    if (!(container instanceof HTMLElement)) {
+        return null;
+    }
+    const markedInitial = container.querySelector('[data-tng-popover-initial-focus]');
+    if (markedInitial === null) {
+        return null;
+    }
+    if (resolvePopoverFocusableElements(container).includes(markedInitial)) {
+        return markedInitial;
+    }
+    return resolvePopoverFocusableElements(markedInitial)[0] ?? null;
+}
+let TngPopover = class TngPopover {
+    openInput = input(undefined, {
+        alias: 'open',
+        transform: normalizeOptionalBooleanInput,
+    });
+    defaultOpen = input(false, {
+        transform: booleanAttribute,
+    });
+    disabled = input(false, {
+        transform: booleanAttribute,
+    });
+    closeOnEscape = input(true, {
+        transform: booleanAttribute,
+    });
+    closeOnOutsidePointer = input(true, {
+        transform: booleanAttribute,
+    });
+    restoreFocus = input(true, {
+        transform: booleanAttribute,
+    });
+    autoFocus = input('first-focusable', {
+        transform: (value) => {
+            return value === 'none' || value === 'panel' || value === 'first-focusable' ? value : 'first-focusable';
+        },
+    });
+    side = input('bottom', {
+        transform: (value) => {
+            return value === 'top' || value === 'right' || value === 'bottom' || value === 'left' ? value : 'bottom';
+        },
+    });
+    align = input('start', {
+        transform: (value) => {
+            return value === 'start' || value === 'center' || value === 'end' ? value : 'start';
+        },
+    });
+    panelRole = input('dialog', {
+        transform: (value) => {
+            return value === 'dialog' || value === 'menu' || value === 'listbox' || value === 'region' || value === 'none'
+                ? value
+                : 'dialog';
+        },
+    });
+    ariaHasPopup = input('dialog', {
+        transform: (value) => {
+            return value === 'dialog'
+                || value === 'menu'
+                || value === 'listbox'
+                || value === 'tree'
+                || value === 'grid'
+                || value === 'true'
+                ? value
+                : 'dialog';
+        },
+    });
+    ariaLabel = input(null);
+    openChange = output();
+    closed = output();
+    hostRef = inject(ElementRef);
+    injector = inject(Injector);
+    documentRef = popoverGlobalDocument;
+    instanceId = createPopoverId();
+    uncontrolledOpen = signal(false);
+    openStateEffect = effect(() => {
+        if (!this.initialized) {
+            return;
+        }
+        if (this.isOpen()) {
+            this.activatePopover();
+            return;
+        }
+        this.deactivatePopover();
+    });
+    initialized = false;
+    isActive = false;
+    isFocusLayerRegistered = false;
+    isOverlayLayerRegistered = false;
+    panelElement = null;
+    panelElementId = null;
+    triggerElement = null;
+    dataSlot = 'popover';
+    get dataOpenAttr() {
+        return this.isOpen() ? 'true' : 'false';
+    }
+    get dataStateAttr() {
+        return this.isOpen() ? 'open' : 'closed';
+    }
+    get dataDisabledAttr() {
+        return this.disabled() ? '' : null;
+    }
+    get dataSideAttr() {
+        return this.side();
+    }
+    get dataAlignAttr() {
+        return this.align();
+    }
+    ngOnInit() {
+        if (!this.isControlled()) {
+            this.uncontrolledOpen.set(this.defaultOpen());
+        }
+        this.initialized = true;
+        if (this.isOpen()) {
+            this.activatePopover();
+        }
+    }
+    ngOnDestroy() {
+        this.openStateEffect.destroy();
+        this.deactivatePopover();
+    }
+    isOpen() {
+        return this.openInput() ?? this.uncontrolledOpen();
+    }
+    openPopover() {
+        if (this.disabled() || this.isOpen()) {
+            return;
+        }
+        this.setOpenState(true);
+    }
+    closePopover(reason = 'programmatic') {
+        this.requestClose(reason);
+    }
+    togglePopover(force) {
+        if (force === true) {
+            this.openPopover();
+            return;
+        }
+        if (force === false) {
+            this.closePopover('programmatic');
+            return;
+        }
+        if (this.isOpen()) {
+            this.requestClose('trigger-toggle');
+            return;
+        }
+        this.openPopover();
+    }
+    requestClose(reason) {
+        if (!this.isOpen()) {
+            return;
+        }
+        this.closed.emit(reason);
+        this.setOpenState(false);
+    }
+    registerTrigger(trigger) {
+        this.triggerElement = trigger;
+    }
+    unregisterTrigger(trigger) {
+        if (this.triggerElement === trigger) {
+            this.triggerElement = null;
+        }
+    }
+    registerPanel(panel, id) {
+        this.panelElement = panel;
+        this.panelElementId = id;
+    }
+    unregisterPanel(panel) {
+        if (this.panelElement === panel) {
+            this.panelElement = null;
+            this.panelElementId = null;
+        }
+    }
+    getPanelId() {
+        return this.panelElementId;
+    }
+    resolvePanelRole() {
+        const role = this.panelRole();
+        return role === 'none' ? null : role;
+    }
+    activatePopover() {
+        if (this.isActive) {
+            return;
+        }
+        this.isActive = true;
+        this.registerFocusLayer();
+        this.activateFocusLayer();
+        this.registerOverlayLayer();
+        this.focusInitialElement();
+    }
+    deactivatePopover() {
+        if (!this.isActive) {
+            return;
+        }
+        this.isActive = false;
+        this.deactivateFocusLayer();
+        this.unregisterFocusLayer();
+        this.unregisterOverlayLayer();
+    }
+    focusInitialElement() {
+        if (this.autoFocus() === 'none') {
+            return;
+        }
+        afterNextRender(() => {
+            if (!this.isOpen()) {
+                return;
+            }
+            const panel = this.panelElement;
+            if (panel === null) {
+                return;
+            }
+            if (this.autoFocus() === 'panel') {
+                this.focusElement(panel);
+                return;
+            }
+            const focusTarget = resolvePopoverMarkedInitialElement(panel) ?? resolvePopoverFocusableElements(panel)[0] ?? panel;
+            this.focusElement(focusTarget);
+        }, { injector: this.injector });
+    }
+    recordFocusedElement(target) {
+        if (!(target instanceof HTMLElement) || !this.isOpen()) {
+            return;
+        }
+        const panel = this.panelElement;
+        if (!panel?.contains(target)) {
+            return;
+        }
+        const targetId = this.ensureElementId(target);
+        popoverFocusHandoff.recordFocus(this.instanceId, targetId);
+    }
+    setOpenState(next) {
+        if (this.isOpen() === next) {
+            return;
+        }
+        if (!this.isControlled()) {
+            this.uncontrolledOpen.set(next);
+        }
+        this.openChange.emit(next);
+    }
+    isControlled() {
+        return this.openInput() !== undefined;
+    }
+    shouldCloseFromEscape() {
+        return this.isOpen() && this.closeOnEscape();
+    }
+    shouldCloseFromOutsidePointer() {
+        return this.isOpen() && this.closeOnOutsidePointer();
+    }
+    activateFocusLayer() {
+        const activeElement = resolvePopoverActiveElement(this.documentRef);
+        const restoreFocusTargetId = activeElement === null ? null : this.ensureElementId(activeElement);
+        popoverFocusHandoff.activateLayer(this.instanceId, restoreFocusTargetId);
+    }
+    deactivateFocusLayer() {
+        const restoreFocusTargetId = popoverFocusHandoff.deactivateLayer(this.instanceId);
+        if (!this.restoreFocus() || restoreFocusTargetId === null) {
+            return;
+        }
+        const restoreFocusTarget = this.resolveElementById(restoreFocusTargetId) ?? this.triggerElement;
+        restoreFocusTarget?.focus();
+    }
+    registerFocusLayer() {
+        if (this.isFocusLayerRegistered) {
+            return;
+        }
+        popoverFocusHandoff.registerLayer({
+            layerId: this.instanceId,
+            members: () => {
+                const panel = this.panelElement;
+                if (panel === null) {
+                    return [];
+                }
+                return this.resolveFocusableMemberIds(panel);
+            },
+            restoreFocus: this.restoreFocus(),
+            trapFocus: false,
+        });
+        this.isFocusLayerRegistered = true;
+    }
+    unregisterFocusLayer() {
+        if (!this.isFocusLayerRegistered) {
+            return;
+        }
+        popoverFocusHandoff.unregisterLayer(this.instanceId);
+        this.isFocusLayerRegistered = false;
+    }
+    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: this.shouldCloseFromOutsidePointer(),
+            id: this.instanceId,
+            onDismiss: (reason) => {
+                if (reason === 'escape-key' && !this.shouldCloseFromEscape()) {
+                    return;
+                }
+                if (reason === 'outside-pointer' && !this.shouldCloseFromOutsidePointer()) {
+                    return;
+                }
+                this.requestClose(mapOverlayDismissReason(reason));
+            },
+        });
+        this.isOverlayLayerRegistered = true;
+    }
+    unregisterOverlayLayer() {
+        if (!this.isOverlayLayerRegistered) {
+            return;
+        }
+        tngPrimitiveOverlayRuntime.unregisterLayer(this.instanceId);
+        this.isOverlayLayerRegistered = false;
+    }
+    focusElement(target) {
+        const targetId = this.ensureElementId(target);
+        const resolvedTargetId = popoverFocusHandoff.resolveFocusCandidate(this.instanceId, targetId);
+        if (resolvedTargetId === null) {
+            return;
+        }
+        const resolvedTarget = this.resolveElementById(resolvedTargetId);
+        if (resolvedTarget === null) {
+            return;
+        }
+        resolvedTarget.focus();
+        popoverFocusHandoff.recordFocus(this.instanceId, resolvedTargetId);
+    }
+    resolveFocusableMemberIds(panel) {
+        const focusableElements = resolvePopoverFocusableElements(panel);
+        const memberIds = [];
+        const seenIds = new Set();
+        const registerMember = (element) => {
+            const id = this.ensureElementId(element);
+            if (seenIds.has(id)) {
+                return;
+            }
+            seenIds.add(id);
+            memberIds.push(id);
+        };
+        registerMember(panel);
+        for (const element of focusableElements) {
+            registerMember(element);
+        }
+        return memberIds;
+    }
+    ensureElementId(element) {
+        const existingId = element.id.trim();
+        if (existingId.length > 0) {
+            return existingId;
+        }
+        const generatedId = createPopoverFocusableId();
+        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')
+], TngPopover.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-open')
+], TngPopover.prototype, "dataOpenAttr", null);
+__decorate([
+    HostBinding('attr.data-state')
+], TngPopover.prototype, "dataStateAttr", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngPopover.prototype, "dataDisabledAttr", null);
+__decorate([
+    HostBinding('attr.data-side')
+], TngPopover.prototype, "dataSideAttr", null);
+__decorate([
+    HostBinding('attr.data-align')
+], TngPopover.prototype, "dataAlignAttr", null);
+TngPopover = __decorate([
+    Directive({
+        selector: '[tngPopover]',
+        exportAs: 'tngPopover',
+        standalone: true,
+    })
+], TngPopover);
+export { TngPopover };
+let TngPopoverTrigger = class TngPopoverTrigger {
+    hostRef = inject(ElementRef);
+    parentPopover = inject(TngPopover, { optional: true });
+    popoverFor = input(null, {
+        alias: 'tngPopoverTrigger',
+    });
+    get ariaHasPopupAttr() {
+        return this.resolvePopover()?.ariaHasPopup() ?? 'dialog';
+    }
+    get ariaControlsAttr() {
+        return this.resolvePopover()?.getPanelId() ?? null;
+    }
+    get ariaExpandedAttr() {
+        return this.resolvePopover()?.isOpen() ? 'true' : 'false';
+    }
+    dataSlot = 'popover-trigger';
+    get dataOpenAttr() {
+        return this.resolvePopover()?.isOpen() ? 'true' : 'false';
+    }
+    get dataStateAttr() {
+        return this.resolvePopover()?.isOpen() ? 'open' : 'closed';
+    }
+    get dataDisabledAttr() {
+        return this.resolvePopover()?.disabled() ? '' : null;
+    }
+    ngOnInit() {
+        this.resolvePopover()?.registerTrigger(this.hostRef.nativeElement);
+    }
+    ngOnDestroy() {
+        this.resolvePopover()?.unregisterTrigger(this.hostRef.nativeElement);
+    }
+    onClick() {
+        this.resolvePopover()?.togglePopover();
+    }
+    resolvePopover() {
+        return this.popoverFor() ?? this.parentPopover;
+    }
+};
+__decorate([
+    HostBinding('attr.aria-haspopup')
+], TngPopoverTrigger.prototype, "ariaHasPopupAttr", null);
+__decorate([
+    HostBinding('attr.aria-controls')
+], TngPopoverTrigger.prototype, "ariaControlsAttr", null);
+__decorate([
+    HostBinding('attr.aria-expanded')
+], TngPopoverTrigger.prototype, "ariaExpandedAttr", null);
+__decorate([
+    HostBinding('attr.data-slot')
+], TngPopoverTrigger.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-open')
+], TngPopoverTrigger.prototype, "dataOpenAttr", null);
+__decorate([
+    HostBinding('attr.data-state')
+], TngPopoverTrigger.prototype, "dataStateAttr", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngPopoverTrigger.prototype, "dataDisabledAttr", null);
+__decorate([
+    HostListener('click')
+], TngPopoverTrigger.prototype, "onClick", null);
+TngPopoverTrigger = __decorate([
+    Directive({
+        selector: '[tngPopoverTrigger]',
+        exportAs: 'tngPopoverTrigger',
+        standalone: true,
+    })
+], TngPopoverTrigger);
+export { TngPopoverTrigger };
+let TngPopoverPanel = class TngPopoverPanel {
+    popover = inject(TngPopover);
+    hostRef = inject(ElementRef);
+    generatedId = createPopoverPanelId();
+    resolvedId = '';
+    dataSlot = 'popover-panel';
+    get dataOpenAttr() {
+        return this.popover.isOpen() ? 'true' : 'false';
+    }
+    get dataStateAttr() {
+        return this.popover.isOpen() ? 'open' : 'closed';
+    }
+    get dataSideAttr() {
+        return this.popover.side();
+    }
+    get dataAlignAttr() {
+        return this.popover.align();
+    }
+    get hiddenAttr() {
+        return this.popover.isOpen() ? null : '';
+    }
+    get idAttr() {
+        return this.resolvedId;
+    }
+    get roleAttr() {
+        return this.popover.resolvePanelRole();
+    }
+    get ariaLabelAttr() {
+        return this.popover.ariaLabel();
+    }
+    tabIndexAttr = '-1';
+    ngOnInit() {
+        const hostId = this.hostRef.nativeElement.id.trim();
+        this.resolvedId = hostId.length > 0 ? hostId : this.generatedId;
+        this.popover.registerPanel(this.hostRef.nativeElement, this.resolvedId);
+    }
+    ngOnDestroy() {
+        this.popover.unregisterPanel(this.hostRef.nativeElement);
+    }
+    onFocusIn(target) {
+        this.popover.recordFocusedElement(target);
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngPopoverPanel.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-open')
+], TngPopoverPanel.prototype, "dataOpenAttr", null);
+__decorate([
+    HostBinding('attr.data-state')
+], TngPopoverPanel.prototype, "dataStateAttr", null);
+__decorate([
+    HostBinding('attr.data-side')
+], TngPopoverPanel.prototype, "dataSideAttr", null);
+__decorate([
+    HostBinding('attr.data-align')
+], TngPopoverPanel.prototype, "dataAlignAttr", null);
+__decorate([
+    HostBinding('attr.hidden')
+], TngPopoverPanel.prototype, "hiddenAttr", null);
+__decorate([
+    HostBinding('attr.id')
+], TngPopoverPanel.prototype, "idAttr", null);
+__decorate([
+    HostBinding('attr.role')
+], TngPopoverPanel.prototype, "roleAttr", null);
+__decorate([
+    HostBinding('attr.aria-label')
+], TngPopoverPanel.prototype, "ariaLabelAttr", null);
+__decorate([
+    HostBinding('attr.tabindex')
+], TngPopoverPanel.prototype, "tabIndexAttr", void 0);
+__decorate([
+    HostListener('focusin', ['$event.target'])
+], TngPopoverPanel.prototype, "onFocusIn", null);
+TngPopoverPanel = __decorate([
+    Directive({
+        selector: '[tngPopoverPanel], [tngPopoverContent]',
+        exportAs: 'tngPopoverPanel',
+        standalone: true,
+    })
+], TngPopoverPanel);
+export { TngPopoverPanel };
+let TngPopoverClose = class TngPopoverClose {
+    popover = inject(TngPopover);
+    closeReason = input(null, {
+        alias: 'tngPopoverClose',
+    });
+    dataSlot = 'popover-close';
+    onClick() {
+        this.popover.requestClose(this.resolveCloseReason());
+    }
+    resolveCloseReason() {
+        const raw = this.closeReason()?.trim();
+        if (raw === undefined || raw.length === 0) {
+            return 'programmatic';
+        }
+        return isPopoverCloseReason(raw) ? raw : 'programmatic';
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngPopoverClose.prototype, "dataSlot", void 0);
+__decorate([
+    HostListener('click')
+], TngPopoverClose.prototype, "onClick", null);
+TngPopoverClose = __decorate([
+    Directive({
+        selector: '[tngPopoverClose]',
+        exportAs: 'tngPopoverClose',
+        standalone: true,
+    })
+], TngPopoverClose);
+export { TngPopoverClose };
+//# sourceMappingURL=tng-popover.js.map