@tailng-ui/primitives 0.1.0

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

@@ -0,0 +1,1147 @@
+import { __decorate } from "tslib";
+import { DOCUMENT } from '@angular/common';
+import { Directive, ElementRef, HostBinding, HostListener, forwardRef, inject, input, output, } from '@angular/core';
+import { createScrollLockManager, createTngIdFactory } from '@tailng-ui/cdk';
+const createDrawerContainerId = createTngIdFactory('tng-drawer-container');
+const createDrawerId = createTngIdFactory('tng-drawer');
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]',
+].join(',');
+let TngDrawerContainer = class TngDrawerContainer {
+    documentRef = inject(DOCUMENT, { optional: true });
+    hostRef = inject(ElementRef);
+    resolvedId = this.hostRef.nativeElement.getAttribute('id') ?? createDrawerContainerId();
+    drawers = new Set();
+    contentElements = new Set();
+    scrollLockManager = createScrollLockManager({
+        documentRef: this.documentRef ?? undefined,
+        getScrollbarWidth: () => {
+            if (this.documentRef === null) {
+                return 0;
+            }
+            const windowRef = this.documentRef.defaultView;
+            if (windowRef === null) {
+                return 0;
+            }
+            const rootWidth = this.documentRef.documentElement?.clientWidth ?? 0;
+            return Math.max(0, windowRef.innerWidth - rootWidth);
+        },
+    });
+    hasBackdrop = input('auto', { transform: normalizeAutoBooleanInput });
+    closeOthersOnOpen = input(true, {
+        transform: normalizeBooleanInput,
+    });
+    animate = input(true, {
+        transform: normalizeBooleanInput,
+    });
+    lockScroll = input('auto', { transform: normalizeAutoBooleanInput });
+    dir = input('auto', {
+        transform: normalizeDirectionInput,
+    });
+    dataSlot = 'drawer-container';
+    id = this.resolvedId;
+    get dataContentCount() {
+        return String(this.contentElements.size);
+    }
+    get dataContentConflict() {
+        return this.contentElements.size > 1 ? 'true' : null;
+    }
+    get dataDirection() {
+        return this.resolveDirection();
+    }
+    ngDoCheck() {
+        this.syncDerivedState();
+    }
+    ngOnDestroy() {
+        this.scrollLockManager.clear();
+    }
+    registerDrawer(drawer) {
+        this.drawers.add(drawer);
+        this.syncDerivedState();
+    }
+    unregisterDrawer(drawer) {
+        this.drawers.delete(drawer);
+        this.syncDerivedState();
+    }
+    registerContent(content) {
+        this.contentElements.add(content);
+        this.syncDerivedState();
+    }
+    unregisterContent(content) {
+        this.contentElements.delete(content);
+        this.syncDerivedState();
+    }
+    getHostElement() {
+        return this.hostRef.nativeElement;
+    }
+    containsTarget(target) {
+        if (target === null) {
+            return false;
+        }
+        return this.hostRef.nativeElement.contains(target);
+    }
+    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';
+    }
+    resolveSide(position) {
+        return resolveSideFromDirection(position, this.resolveDirection());
+    }
+    shouldRenderBackdrop(drawer) {
+        const drawerBackdrop = drawer.backdrop();
+        if (drawerBackdrop !== 'auto') {
+            return drawerBackdrop;
+        }
+        const containerBackdrop = this.hasBackdrop();
+        if (containerBackdrop !== 'auto') {
+            return containerBackdrop;
+        }
+        return drawer.mode() === 'overlay';
+    }
+    shouldLockScroll(drawer) {
+        const lockPolicy = this.lockScroll();
+        if (lockPolicy !== 'auto') {
+            return lockPolicy;
+        }
+        return drawer.mode() === 'overlay' && !drawer.resolveAllowBodyScroll();
+    }
+    onDrawerOpenRequest(drawer) {
+        if (!this.closeOthersOnOpen()) {
+            return;
+        }
+        for (const registeredDrawer of this.drawers) {
+            if (registeredDrawer === drawer || !registeredDrawer.isOpen()) {
+                continue;
+            }
+            registeredDrawer.closeFromContainer();
+        }
+    }
+    onDrawerStateChanged() {
+        this.syncDerivedState();
+    }
+    syncDerivedState() {
+        this.syncContentOffsets();
+        this.syncContentInertState();
+        this.syncBodyScrollLock();
+    }
+    getOpenDrawers() {
+        return Array.from(this.drawers).filter((drawer) => drawer.isOpen());
+    }
+    syncBodyScrollLock() {
+        const shouldLock = this.getOpenDrawers().some((drawer) => this.shouldLockScroll(drawer));
+        if (shouldLock) {
+            this.scrollLockManager.acquire(this.id);
+            return;
+        }
+        this.scrollLockManager.release(this.id);
+    }
+    syncContentInertState() {
+        const shouldInert = this.getOpenDrawers().some((drawer) => drawer.shouldInertContent());
+        for (const content of this.contentElements) {
+            content.setInert(shouldInert);
+        }
+    }
+    syncContentOffsets() {
+        let leftOffset = 0;
+        let rightOffset = 0;
+        for (const drawer of this.getOpenDrawers()) {
+            if (!drawer.participatesInContentOffset()) {
+                continue;
+            }
+            const side = this.resolveSide(drawer.position());
+            const width = drawer.getMeasuredWidth();
+            if (side === 'left') {
+                leftOffset += width;
+            }
+            else {
+                rightOffset += width;
+            }
+        }
+        for (const content of this.contentElements) {
+            content.applyOffsets(leftOffset, rightOffset);
+        }
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngDrawerContainer.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.id')
+], TngDrawerContainer.prototype, "id", void 0);
+__decorate([
+    HostBinding('attr.data-content-count')
+], TngDrawerContainer.prototype, "dataContentCount", null);
+__decorate([
+    HostBinding('attr.data-content-conflict')
+], TngDrawerContainer.prototype, "dataContentConflict", null);
+__decorate([
+    HostBinding('attr.data-direction')
+], TngDrawerContainer.prototype, "dataDirection", null);
+TngDrawerContainer = __decorate([
+    Directive({
+        selector: '[tngDrawerContainer]',
+        exportAs: 'tngDrawerContainer',
+        standalone: true,
+    })
+], TngDrawerContainer);
+export { TngDrawerContainer };
+let TngDrawer = class TngDrawer {
+    documentRef = inject(DOCUMENT, { optional: true });
+    hostRef = inject(ElementRef);
+    container = inject(TngDrawerContainer, { optional: true, host: true });
+    resolvedId = this.hostRef.nativeElement.getAttribute('id') ?? createDrawerId();
+    backdropElement = null;
+    backdropPointerdownListener = null;
+    globalPointerdownListener = null;
+    globalKeydownListener = null;
+    lifecycleFallbackHandle = null;
+    pendingLifecycle = null;
+    openState = false;
+    lastKnownPosition = 'start';
+    lastKnownMode = 'overlay';
+    restoreFocusTarget = null;
+    restoreFocusFallback = null;
+    swipeStartX = null;
+    swipeLastX = null;
+    swipeStartY = null;
+    swipeLastY = null;
+    openedInput = input(undefined, {
+        alias: 'opened',
+        transform: normalizeOptionalBooleanInput,
+    });
+    defaultOpened = input(false, {
+        transform: normalizeBooleanInput,
+    });
+    mode = input('overlay', {
+        transform: normalizeModeInput,
+    });
+    position = input('start', {
+        transform: normalizePositionInput,
+    });
+    disabled = input(false, {
+        transform: normalizeBooleanInput,
+    });
+    backdrop = input('auto', { transform: normalizeAutoBooleanInput });
+    closeOnOutsideClickInput = input(undefined, {
+        alias: 'closeOnOutsideClick',
+        transform: normalizeOptionalBooleanInput,
+    });
+    closeOnEscape = input(true, {
+        transform: normalizeBooleanInput,
+    });
+    restoreFocus = input(true, {
+        transform: normalizeBooleanInput,
+    });
+    autoFocus = input('drawer', { transform: normalizeAutoFocusInput });
+    trapFocus = input('auto', { transform: normalizeAutoBooleanInput });
+    inertContent = input('auto', { transform: normalizeAutoBooleanInput });
+    allowBodyScrollInput = input(undefined, {
+        alias: 'allowBodyScroll',
+        transform: normalizeOptionalBooleanInput,
+    });
+    closeOnTab = input(false, {
+        transform: normalizeBooleanInput,
+    });
+    role = input('navigation', {
+        transform: normalizeRoleInput,
+    });
+    fixedInViewport = input(false, {
+        transform: normalizeBooleanInput,
+    });
+    fixedTopGap = input(0, {
+        transform: normalizeNumberInput,
+    });
+    fixedBottomGap = input(0, {
+        transform: normalizeNumberInput,
+    });
+    swipeToClose = input(false, {
+        transform: normalizeBooleanInput,
+    });
+    openedChange = output();
+    tngDrawerOpened = output();
+    tngDrawerClosed = output();
+    openStart = output();
+    closeStart = output();
+    backdropClick = output();
+    positionChange = output();
+    ngOnInit() {
+        this.container?.registerDrawer(this);
+        this.lastKnownPosition = this.position();
+        this.lastKnownMode = this.mode();
+        const controlledValue = this.openedInput();
+        this.openState = controlledValue ?? this.defaultOpened();
+        if (this.openState) {
+            this.attachGlobalListeners();
+            this.renderBackdropIfNeeded();
+            this.container?.onDrawerStateChanged();
+            this.queueLifecycleEnd('opening', false);
+        }
+    }
+    ngAfterViewInit() {
+        if (this.openState) {
+            this.applyAutoFocus();
+        }
+    }
+    ngDoCheck() {
+        this.syncControlledState();
+        this.syncPositionChange();
+        this.syncModeChange();
+        if (this.openState) {
+            this.renderBackdropIfNeeded();
+            this.container?.onDrawerStateChanged();
+        }
+    }
+    ngOnDestroy() {
+        if (this.openState) {
+            this.performClose({
+                emitOpenedChange: false,
+                emitLifecycle: true,
+                restoreFocus: false,
+                reason: 'destroy',
+            });
+        }
+        this.teardownInteractions();
+        this.container?.unregisterDrawer(this);
+    }
+    isOpen() {
+        return this.openState;
+    }
+    participatesInContentOffset() {
+        const mode = this.mode();
+        return mode === 'push' || mode === 'side';
+    }
+    shouldInertContent() {
+        if (!this.openState) {
+            return false;
+        }
+        return resolveAutoBoolean(this.inertContent(), this.mode() === 'overlay');
+    }
+    resolveAllowBodyScroll() {
+        const configured = this.allowBodyScrollInput();
+        if (configured !== undefined) {
+            return configured;
+        }
+        return this.mode() !== 'overlay';
+    }
+    getMeasuredWidth() {
+        const host = this.hostRef.nativeElement;
+        const widthAttr = Number.parseFloat(host.getAttribute('data-width') ?? '');
+        if (Number.isFinite(widthAttr) && widthAttr > 0) {
+            return widthAttr;
+        }
+        const rectWidth = host.getBoundingClientRect().width;
+        if (rectWidth > 0) {
+            return rectWidth;
+        }
+        const inlineWidth = Number.parseFloat(host.style.width);
+        if (Number.isFinite(inlineWidth) && inlineWidth > 0) {
+            return inlineWidth;
+        }
+        return 0;
+    }
+    closeFromContainer() {
+        this.requestOpenState(false, 'interaction', 'outside');
+    }
+    setRestoreFocusFallback(target) {
+        this.restoreFocusFallback = target;
+    }
+    setRestoreFocusTarget(target) {
+        this.restoreFocusTarget = target;
+    }
+    open() {
+        this.requestOpenState(true, 'imperative', 'imperative');
+    }
+    close() {
+        this.requestOpenState(false, 'imperative', 'imperative');
+    }
+    toggle(force) {
+        if (force === undefined) {
+            this.requestOpenState(!this.openState, 'imperative', 'imperative');
+            return;
+        }
+        this.requestOpenState(force, 'imperative', 'imperative');
+    }
+    onTransitionEnd(event) {
+        if (event.target !== this.hostRef.nativeElement) {
+            return;
+        }
+        this.flushPendingLifecycle();
+    }
+    onHostPointerDown(event) {
+        if (!this.openState || !this.swipeToClose() || this.mode() !== 'overlay') {
+            return;
+        }
+        this.swipeStartX = event.clientX;
+        this.swipeLastX = event.clientX;
+        this.swipeStartY = event.clientY;
+        this.swipeLastY = event.clientY;
+    }
+    onHostPointerMove(event) {
+        if (this.swipeStartX === null) {
+            return;
+        }
+        this.swipeLastX = event.clientX;
+        this.swipeLastY = event.clientY;
+    }
+    onHostPointerUp() {
+        if (this.swipeStartX === null ||
+            this.swipeLastX === null ||
+            this.swipeStartY === null ||
+            this.swipeLastY === null) {
+            this.resetSwipeState();
+            return;
+        }
+        const deltaX = this.swipeLastX - this.swipeStartX;
+        const deltaY = this.swipeLastY - this.swipeStartY;
+        const side = this.resolveEffectiveSide();
+        const isHorizontalGesture = Math.abs(deltaX) >= Math.abs(deltaY);
+        const shouldClose = isHorizontalGesture && ((side === 'left' && deltaX <= -40) || (side === 'right' && deltaX >= 40));
+        this.resetSwipeState();
+        if (shouldClose) {
+            this.requestOpenState(false, 'interaction', 'outside');
+        }
+    }
+    dataSlot = 'drawer';
+    id = this.resolvedId;
+    get roleAttr() {
+        return this.role();
+    }
+    get tabIndexAttr() {
+        return this.hostRef.nativeElement.getAttribute('tabindex') ?? '-1';
+    }
+    get dataMode() {
+        return this.mode();
+    }
+    get dataState() {
+        return this.openState ? 'open' : 'closed';
+    }
+    get dataOpen() {
+        return this.openState ? 'true' : 'false';
+    }
+    get dataPosition() {
+        return this.position();
+    }
+    get dataEffectivePosition() {
+        return this.resolveEffectiveSide();
+    }
+    get dataDisabled() {
+        return this.disabled() ? 'true' : 'false';
+    }
+    get ariaDisabled() {
+        return this.disabled() ? 'true' : null;
+    }
+    get dataContainerId() {
+        return this.container?.id ?? null;
+    }
+    get dataContainerMissing() {
+        return this.container === null ? 'true' : null;
+    }
+    get hiddenAttr() {
+        return this.openState ? null : '';
+    }
+    get ariaModal() {
+        if (this.role() !== 'dialog' || this.mode() !== 'overlay' || !this.openState) {
+            return null;
+        }
+        return 'true';
+    }
+    get positionStyle() {
+        return this.fixedInViewport() ? 'fixed' : null;
+    }
+    get topStyle() {
+        if (!this.fixedInViewport()) {
+            return null;
+        }
+        return `${Math.max(0, this.fixedTopGap())}px`;
+    }
+    get bottomStyle() {
+        if (!this.fixedInViewport()) {
+            return null;
+        }
+        return `${Math.max(0, this.fixedBottomGap())}px`;
+    }
+    get leftStyle() {
+        if (!this.fixedInViewport() || this.resolveEffectiveSide() !== 'left') {
+            return null;
+        }
+        return '0px';
+    }
+    get rightStyle() {
+        if (!this.fixedInViewport() || this.resolveEffectiveSide() !== 'right') {
+            return null;
+        }
+        return '0px';
+    }
+    syncControlledState() {
+        const controlledValue = this.openedInput();
+        if (controlledValue === undefined || controlledValue === this.openState) {
+            return;
+        }
+        if (controlledValue) {
+            this.performOpen({
+                emitOpenedChange: false,
+                emitLifecycle: true,
+                source: 'external',
+            });
+            return;
+        }
+        this.performClose({
+            emitOpenedChange: false,
+            emitLifecycle: true,
+            restoreFocus: false,
+            reason: 'external',
+        });
+    }
+    syncPositionChange() {
+        const currentPosition = this.position();
+        if (currentPosition === this.lastKnownPosition) {
+            return;
+        }
+        this.lastKnownPosition = currentPosition;
+        this.positionChange.emit(currentPosition);
+        this.container?.onDrawerStateChanged();
+    }
+    syncModeChange() {
+        const currentMode = this.mode();
+        if (currentMode === this.lastKnownMode) {
+            return;
+        }
+        this.lastKnownMode = currentMode;
+        if (this.openState) {
+            this.renderBackdropIfNeeded();
+        }
+        this.container?.onDrawerStateChanged();
+    }
+    requestOpenState(nextOpen, source, reason) {
+        if (nextOpen && this.disabled()) {
+            return;
+        }
+        if (this.openedInput() !== undefined) {
+            const currentControlledValue = this.openedInput() ?? false;
+            if (source !== 'external' && currentControlledValue !== nextOpen) {
+                this.openedChange.emit(nextOpen);
+            }
+            return;
+        }
+        if (nextOpen === this.openState) {
+            return;
+        }
+        if (nextOpen) {
+            this.performOpen({
+                emitOpenedChange: source !== 'initial' && source !== 'external',
+                emitLifecycle: source !== 'initial',
+                source,
+            });
+            return;
+        }
+        this.performClose({
+            emitOpenedChange: source !== 'initial' && source !== 'external',
+            emitLifecycle: source !== 'initial',
+            restoreFocus: reason !== 'tab',
+            reason,
+        });
+    }
+    performOpen(options) {
+        if (this.openState) {
+            return;
+        }
+        this.container?.onDrawerOpenRequest(this);
+        this.captureRestoreFocusTarget();
+        this.openState = true;
+        this.attachGlobalListeners();
+        this.renderBackdropIfNeeded();
+        this.container?.onDrawerStateChanged();
+        if (options.emitOpenedChange) {
+            this.openedChange.emit(true);
+        }
+        if (options.emitLifecycle) {
+            this.startLifecycle('opening');
+        }
+        if (options.source !== 'external') {
+            this.applyAutoFocus();
+        }
+    }
+    performClose(options) {
+        if (!this.openState) {
+            return;
+        }
+        this.openState = false;
+        this.teardownInteractions();
+        this.container?.onDrawerStateChanged();
+        if (options.emitOpenedChange) {
+            this.openedChange.emit(false);
+        }
+        if (options.emitLifecycle) {
+            this.startLifecycle('closing');
+        }
+        if (options.restoreFocus && this.restoreFocus()) {
+            this.restoreFocusToTarget();
+        }
+    }
+    captureRestoreFocusTarget() {
+        const activeElement = this.documentRef?.activeElement;
+        this.restoreFocusTarget = activeElement instanceof HTMLElement ? activeElement : null;
+    }
+    restoreFocusToTarget() {
+        if (this.restoreFocusTarget?.isConnected) {
+            this.restoreFocusTarget.focus();
+            return;
+        }
+        if (this.restoreFocusFallback?.isConnected) {
+            this.restoreFocusFallback.focus();
+            return;
+        }
+        this.documentRef?.body?.focus?.();
+    }
+    applyAutoFocus() {
+        const strategy = this.autoFocus();
+        if (strategy === 'none') {
+            return;
+        }
+        if (strategy === 'first-focusable') {
+            const firstFocusable = this.getFocusableElements()[0];
+            if (firstFocusable !== undefined) {
+                firstFocusable.focus();
+                return;
+            }
+        }
+        this.hostRef.nativeElement.focus();
+    }
+    getFocusableElements() {
+        const host = this.hostRef.nativeElement;
+        const candidates = Array.from(host.querySelectorAll(FOCUSABLE_SELECTOR));
+        return candidates.filter((element) => !element.hasAttribute('disabled') && element.tabIndex >= 0);
+    }
+    resolveEffectiveSide() {
+        return this.container?.resolveSide(this.position()) ?? resolveSideFromDirection(this.position(), 'ltr');
+    }
+    startLifecycle(transition) {
+        this.clearPendingLifecycle();
+        if (transition === 'opening') {
+            this.openStart.emit();
+        }
+        else {
+            this.closeStart.emit();
+        }
+        if (!this.container?.animate()) {
+            if (transition === 'opening') {
+                this.tngDrawerOpened.emit();
+            }
+            else {
+                this.tngDrawerClosed.emit();
+            }
+            return;
+        }
+        this.queueLifecycleEnd(transition, true);
+    }
+    queueLifecycleEnd(transition, withFallback) {
+        this.pendingLifecycle = transition;
+        if (!withFallback) {
+            return;
+        }
+        this.lifecycleFallbackHandle = setTimeout(() => {
+            this.flushPendingLifecycle();
+        }, 60);
+    }
+    flushPendingLifecycle() {
+        if (this.pendingLifecycle === null) {
+            return;
+        }
+        const transition = this.pendingLifecycle;
+        this.clearPendingLifecycle();
+        if (transition === 'opening') {
+            this.tngDrawerOpened.emit();
+            return;
+        }
+        this.tngDrawerClosed.emit();
+    }
+    clearPendingLifecycle() {
+        this.pendingLifecycle = null;
+        if (this.lifecycleFallbackHandle !== null) {
+            clearTimeout(this.lifecycleFallbackHandle);
+            this.lifecycleFallbackHandle = null;
+        }
+    }
+    attachGlobalListeners() {
+        if (this.documentRef === null) {
+            return;
+        }
+        if (this.globalPointerdownListener === null) {
+            this.globalPointerdownListener = (event) => this.handleDocumentPointerDown(event);
+            this.documentRef.addEventListener('pointerdown', this.globalPointerdownListener, true);
+        }
+        if (this.globalKeydownListener === null) {
+            this.globalKeydownListener = (event) => this.handleDocumentKeydown(event);
+            this.documentRef.addEventListener('keydown', this.globalKeydownListener, true);
+        }
+    }
+    teardownInteractions() {
+        this.detachGlobalListeners();
+        this.destroyBackdrop();
+        this.clearPendingLifecycle();
+        this.resetSwipeState();
+    }
+    detachGlobalListeners() {
+        if (this.documentRef === null) {
+            return;
+        }
+        if (this.globalPointerdownListener !== null) {
+            this.documentRef.removeEventListener('pointerdown', this.globalPointerdownListener, true);
+            this.globalPointerdownListener = null;
+        }
+        if (this.globalKeydownListener !== null) {
+            this.documentRef.removeEventListener('keydown', this.globalKeydownListener, true);
+            this.globalKeydownListener = null;
+        }
+    }
+    renderBackdropIfNeeded() {
+        if (!this.openState || !this.resolveBackdropEnabled()) {
+            this.destroyBackdrop();
+            return;
+        }
+        if (this.backdropElement !== null) {
+            return;
+        }
+        const targetHost = this.container?.getHostElement() ?? this.hostRef.nativeElement.parentElement;
+        if (targetHost === null) {
+            return;
+        }
+        const backdrop = this.documentRef?.createElement('div');
+        if (backdrop === undefined || backdrop === null) {
+            return;
+        }
+        backdrop.setAttribute('data-slot', 'drawer-backdrop');
+        backdrop.setAttribute('data-owner', this.id);
+        backdrop.setAttribute('role', 'presentation');
+        backdrop.setAttribute('tabindex', '-1');
+        backdrop.setAttribute('aria-hidden', 'true');
+        backdrop.setAttribute('data-open', 'true');
+        this.backdropPointerdownListener = (event) => {
+            this.backdropClick.emit();
+            if (this.resolveCloseOnOutsideClick()) {
+                this.requestOpenState(false, 'interaction', 'outside');
+            }
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        backdrop.addEventListener('pointerdown', this.backdropPointerdownListener);
+        targetHost.insertBefore(backdrop, this.hostRef.nativeElement);
+        this.backdropElement = backdrop;
+    }
+    destroyBackdrop() {
+        if (this.backdropElement === null) {
+            return;
+        }
+        if (this.backdropPointerdownListener !== null) {
+            this.backdropElement.removeEventListener('pointerdown', this.backdropPointerdownListener);
+            this.backdropPointerdownListener = null;
+        }
+        this.backdropElement.remove();
+        this.backdropElement = null;
+    }
+    resolveBackdropEnabled() {
+        if (this.container !== null) {
+            return this.container.shouldRenderBackdrop(this);
+        }
+        return resolveAutoBoolean(this.backdrop(), this.mode() === 'overlay');
+    }
+    resolveCloseOnOutsideClick() {
+        const configured = this.closeOnOutsideClickInput();
+        if (configured !== undefined) {
+            return configured;
+        }
+        return this.mode() === 'overlay';
+    }
+    resolveTrapFocus() {
+        return resolveAutoBoolean(this.trapFocus(), this.mode() === 'overlay');
+    }
+    handleDocumentPointerDown(event) {
+        if (!this.openState || !this.resolveCloseOnOutsideClick()) {
+            return;
+        }
+        const target = event.target;
+        if (!(target instanceof Node)) {
+            return;
+        }
+        if (this.hostRef.nativeElement.contains(target)) {
+            return;
+        }
+        if (this.backdropElement?.contains(target) === true) {
+            return;
+        }
+        if (this.container?.containsTarget(target) === true) {
+            return;
+        }
+        if (this.isScrollbarPointerDown(event, target)) {
+            return;
+        }
+        this.requestOpenState(false, 'interaction', 'outside');
+    }
+    handleDocumentKeydown(event) {
+        if (!this.openState) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            if (!this.closeOnEscape()) {
+                return;
+            }
+            event.preventDefault();
+            this.requestOpenState(false, 'interaction', 'escape');
+            return;
+        }
+        if (event.key !== 'Tab') {
+            return;
+        }
+        if (this.resolveTrapFocus()) {
+            this.handleTrappedTab(event);
+            return;
+        }
+        if (this.closeOnTab()) {
+            this.requestOpenState(false, 'interaction', 'tab');
+        }
+    }
+    handleTrappedTab(event) {
+        const focusable = this.getFocusableElements();
+        const host = this.hostRef.nativeElement;
+        if (focusable.length === 0) {
+            event.preventDefault();
+            host.focus();
+            return;
+        }
+        const currentActive = this.documentRef?.activeElement;
+        const currentIndex = currentActive instanceof HTMLElement ? focusable.indexOf(currentActive) : -1;
+        const nextIndex = event.shiftKey
+            ? currentIndex <= 0
+                ? focusable.length - 1
+                : currentIndex - 1
+            : currentIndex < 0 || currentIndex >= focusable.length - 1
+                ? 0
+                : currentIndex + 1;
+        event.preventDefault();
+        focusable[nextIndex]?.focus();
+    }
+    resetSwipeState() {
+        this.swipeStartX = null;
+        this.swipeLastX = null;
+        this.swipeStartY = null;
+        this.swipeLastY = null;
+    }
+    isScrollbarPointerDown(event, target) {
+        if (this.documentRef === null) {
+            return false;
+        }
+        const root = this.documentRef.documentElement;
+        if (target !== root && target !== this.documentRef.body) {
+            return false;
+        }
+        const viewportWidth = root.clientWidth;
+        const viewportHeight = root.clientHeight;
+        const onVerticalScrollbar = event.clientX >= viewportWidth && event.clientX > 0;
+        const onHorizontalScrollbar = event.clientY >= viewportHeight && event.clientY > 0;
+        return onVerticalScrollbar || onHorizontalScrollbar;
+    }
+};
+__decorate([
+    HostListener('transitionend', ['$event'])
+], TngDrawer.prototype, "onTransitionEnd", null);
+__decorate([
+    HostListener('pointerdown', ['$event'])
+], TngDrawer.prototype, "onHostPointerDown", null);
+__decorate([
+    HostListener('pointermove', ['$event'])
+], TngDrawer.prototype, "onHostPointerMove", null);
+__decorate([
+    HostListener('pointerup')
+], TngDrawer.prototype, "onHostPointerUp", null);
+__decorate([
+    HostBinding('attr.data-slot')
+], TngDrawer.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.id')
+], TngDrawer.prototype, "id", void 0);
+__decorate([
+    HostBinding('attr.role')
+], TngDrawer.prototype, "roleAttr", null);
+__decorate([
+    HostBinding('attr.tabindex')
+], TngDrawer.prototype, "tabIndexAttr", null);
+__decorate([
+    HostBinding('attr.data-mode')
+], TngDrawer.prototype, "dataMode", null);
+__decorate([
+    HostBinding('attr.data-state')
+], TngDrawer.prototype, "dataState", null);
+__decorate([
+    HostBinding('attr.data-open')
+], TngDrawer.prototype, "dataOpen", null);
+__decorate([
+    HostBinding('attr.data-position')
+], TngDrawer.prototype, "dataPosition", null);
+__decorate([
+    HostBinding('attr.data-effective-position')
+], TngDrawer.prototype, "dataEffectivePosition", null);
+__decorate([
+    HostBinding('attr.data-disabled')
+], TngDrawer.prototype, "dataDisabled", null);
+__decorate([
+    HostBinding('attr.aria-disabled')
+], TngDrawer.prototype, "ariaDisabled", null);
+__decorate([
+    HostBinding('attr.data-container-id')
+], TngDrawer.prototype, "dataContainerId", null);
+__decorate([
+    HostBinding('attr.data-container-missing')
+], TngDrawer.prototype, "dataContainerMissing", null);
+__decorate([
+    HostBinding('attr.hidden')
+], TngDrawer.prototype, "hiddenAttr", null);
+__decorate([
+    HostBinding('attr.aria-modal')
+], TngDrawer.prototype, "ariaModal", null);
+__decorate([
+    HostBinding('style.position')
+], TngDrawer.prototype, "positionStyle", null);
+__decorate([
+    HostBinding('style.top')
+], TngDrawer.prototype, "topStyle", null);
+__decorate([
+    HostBinding('style.bottom')
+], TngDrawer.prototype, "bottomStyle", null);
+__decorate([
+    HostBinding('style.left')
+], TngDrawer.prototype, "leftStyle", null);
+__decorate([
+    HostBinding('style.right')
+], TngDrawer.prototype, "rightStyle", null);
+TngDrawer = __decorate([
+    Directive({
+        selector: '[tngDrawer]',
+        exportAs: 'tngDrawer',
+        standalone: true,
+    })
+], TngDrawer);
+export { TngDrawer };
+let TngDrawerContent = class TngDrawerContent {
+    hostRef = inject(ElementRef);
+    container = inject(TngDrawerContainer, { optional: true, host: true });
+    ngOnInit() {
+        this.container?.registerContent(this);
+    }
+    ngOnDestroy() {
+        this.container?.unregisterContent(this);
+    }
+    dataSlot = 'drawer-content';
+    get dataContainerId() {
+        return this.container?.id ?? null;
+    }
+    get dataContainerMissing() {
+        return this.container === null ? 'true' : null;
+    }
+    applyOffsets(leftOffset, rightOffset) {
+        const host = this.hostRef.nativeElement;
+        host.style.marginLeft = leftOffset > 0 ? `${leftOffset}px` : '';
+        host.style.marginRight = rightOffset > 0 ? `${rightOffset}px` : '';
+        host.setAttribute('data-offset-left', String(leftOffset));
+        host.setAttribute('data-offset-right', String(rightOffset));
+        host.setAttribute('data-shifted', leftOffset > 0 || rightOffset > 0 ? 'true' : 'false');
+    }
+    setInert(nextInert) {
+        const host = this.hostRef.nativeElement;
+        if (nextInert) {
+            host.setAttribute('inert', '');
+            host.setAttribute('aria-hidden', 'true');
+            try {
+                host.inert = true;
+            }
+            catch {
+                // noop: inert is not writable in some environments.
+            }
+            return;
+        }
+        host.removeAttribute('inert');
+        host.removeAttribute('aria-hidden');
+        try {
+            host.inert = false;
+        }
+        catch {
+            // noop: inert is not writable in some environments.
+        }
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngDrawerContent.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-container-id')
+], TngDrawerContent.prototype, "dataContainerId", null);
+__decorate([
+    HostBinding('attr.data-container-missing')
+], TngDrawerContent.prototype, "dataContainerMissing", null);
+TngDrawerContent = __decorate([
+    Directive({
+        selector: '[tngDrawerContent]',
+        exportAs: 'tngDrawerContent',
+        standalone: true,
+    })
+], TngDrawerContent);
+export { TngDrawerContent };
+let TngSidenavContainer = class TngSidenavContainer extends TngDrawerContainer {
+};
+TngSidenavContainer = __decorate([
+    Directive({
+        selector: '[tngSidenavContainer]',
+        exportAs: 'tngSidenavContainer',
+        standalone: true,
+        providers: [
+            {
+                provide: TngDrawerContainer,
+                useExisting: forwardRef(() => TngSidenavContainer),
+            },
+        ],
+    })
+], TngSidenavContainer);
+export { TngSidenavContainer };
+let TngSidenav = class TngSidenav extends TngDrawer {
+};
+TngSidenav = __decorate([
+    Directive({
+        selector: '[tngSidenav]',
+        exportAs: 'tngSidenav',
+        standalone: true,
+        providers: [
+            {
+                provide: TngDrawer,
+                useExisting: forwardRef(() => TngSidenav),
+            },
+        ],
+    })
+], TngSidenav);
+export { TngSidenav };
+let TngSidenavContent = class TngSidenavContent extends TngDrawerContent {
+};
+TngSidenavContent = __decorate([
+    Directive({
+        selector: '[tngSidenavContent]',
+        exportAs: 'tngSidenavContent',
+        standalone: true,
+        providers: [
+            {
+                provide: TngDrawerContent,
+                useExisting: forwardRef(() => TngSidenavContent),
+            },
+        ],
+    })
+], TngSidenavContent);
+export { TngSidenavContent };
+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 Boolean(value);
+}
+function normalizeOptionalBooleanInput(value) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    return normalizeBooleanInput(value);
+}
+function normalizeAutoBooleanInput(value) {
+    if (typeof value === 'string' && value.trim().toLowerCase() === 'auto') {
+        return 'auto';
+    }
+    if (value === undefined || value === null) {
+        return 'auto';
+    }
+    return normalizeBooleanInput(value);
+}
+function resolveAutoBoolean(value, fallbackWhenAuto) {
+    return value === 'auto' ? fallbackWhenAuto : value;
+}
+function normalizeModeInput(value) {
+    if (typeof value === 'string') {
+        const normalized = value.trim().toLowerCase();
+        if (normalized === 'push' || normalized === 'side' || normalized === 'overlay') {
+            return normalized;
+        }
+    }
+    return 'overlay';
+}
+function normalizePositionInput(value) {
+    if (typeof value === 'string' && value.trim().toLowerCase() === 'end') {
+        return 'end';
+    }
+    return 'start';
+}
+function normalizeDirectionInput(value) {
+    if (typeof value === 'string') {
+        const normalized = value.trim().toLowerCase();
+        if (normalized === 'rtl' || normalized === 'ltr' || normalized === 'auto') {
+            return normalized;
+        }
+    }
+    return 'auto';
+}
+function normalizeRoleInput(value) {
+    if (typeof value === 'string') {
+        const normalized = value.trim().toLowerCase();
+        if (normalized === 'dialog' ||
+            normalized === 'complementary' ||
+            normalized === 'navigation' ||
+            normalized === 'region') {
+            return normalized;
+        }
+    }
+    return 'navigation';
+}
+function normalizeAutoFocusInput(value) {
+    if (typeof value === 'string') {
+        const normalized = value.trim().toLowerCase();
+        if (normalized === 'first-focusable') {
+            return 'first-focusable';
+        }
+        if (normalized === 'none') {
+            return 'none';
+        }
+    }
+    return 'drawer';
+}
+function normalizeNumberInput(value) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+    }
+    if (typeof value === 'string') {
+        const parsed = Number.parseFloat(value);
+        if (Number.isFinite(parsed)) {
+            return parsed;
+        }
+    }
+    return 0;
+}
+function resolveSideFromDirection(position, direction) {
+    if (position === 'start') {
+        return direction === 'rtl' ? 'right' : 'left';
+    }
+    return direction === 'rtl' ? 'left' : 'right';
+}
+//# sourceMappingURL=tng-drawer.js.map