@radix-ng/primitives 1.0.0-beta.4 → 1.0.1

package/fesm2022/radix-ng-primitives-drawer.mjs

@@ -78,7 +78,8 @@ const context = () => {
         nestedDrawerOpen: root.nestedDrawerOpen,
         nestedDrawerCount: root.nestedDrawerCount,
         frontmostHeight: root.frontmostHeight,
-        reportPopupHeight: (height) => root.popupHeight.set(height)
+        reportPopupHeight: (height) => root.popupHeight.set(height),
+        open: root.open
     };
 };
 /**
@@ -974,6 +975,442 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+const KEYBOARD_RESIZE_THRESHOLD = 60;
+const KEYBOARD_VISIBILITY_MARGIN = 16;
+const KEYBOARD_SCROLL_SLACK = 48;
+const INPUT_TAP_MOVE_THRESHOLD = 10;
+const INPUT_TAP_HIT_SLOP = 16;
+const KEYBOARD_INPUT_TYPES = new Set(['email', 'number', 'password', 'search', 'tel', 'text', 'url']);
+const KEYBOARD_TAP_BLOCKED = Symbol('KeyboardTapBlocked');
+/**
+ * Provides mobile virtual-keyboard handling for bottom-sheet drawers with form fields.
+ *
+ * Put it on the drawer viewport that contains the popup. The directive writes
+ * `--drawer-keyboard-inset` to the host, keeps the focused keyboard input visible when
+ * `visualViewport` shrinks, adds temporary scroll slack to the nearest drawer scroller, and uses
+ * synchronous tap-to-focus on touch devices so iOS opens the software keyboard reliably.
+ */
+class RdxDrawerVirtualKeyboardProvider {
+    constructor() {
+        this.drawerContext = injectRdxDrawerRootContext();
+        this.elementRef = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.element = this.elementRef.nativeElement;
+        this.pendingKeyboardFocusMoved = false;
+        this.keyboardTouchStart = null;
+        this.focusedKeyboardTarget = null;
+        this.keyboardScrollAdjustment = null;
+        this.keyboardFocusFrame = 0;
+        effect((onCleanup) => {
+            const open = this.drawerContext.open();
+            const nestedDrawerOpen = this.drawerContext.nestedDrawerOpen();
+            if (!open || nestedDrawerOpen) {
+                untracked(() => this.clearFocusedKeyboardTarget());
+                return;
+            }
+            const doc = this.element.ownerDocument;
+            const win = doc.defaultView;
+            if (!win) {
+                return;
+            }
+            const handleFocusIn = (event) => {
+                if (this.captureFocusedKeyboardTarget(event.target)) {
+                    this.scheduleKeyboardFocusAlignment();
+                }
+            };
+            const handleFocusOut = (event) => {
+                if (this.captureFocusedKeyboardTarget(event.relatedTarget)) {
+                    this.scheduleKeyboardFocusAlignment();
+                    return;
+                }
+                this.clearFocusedKeyboardTarget();
+            };
+            const handleViewportUpdate = () => {
+                if (this.focusedKeyboardTarget || this.captureFocusedKeyboardTarget(doc.activeElement)) {
+                    this.scheduleKeyboardFocusAlignment();
+                }
+            };
+            const visualViewport = win.visualViewport;
+            doc.addEventListener('focusin', handleFocusIn, true);
+            doc.addEventListener('focusout', handleFocusOut, true);
+            visualViewport?.addEventListener('resize', handleViewportUpdate);
+            visualViewport?.addEventListener('scroll', handleViewportUpdate);
+            if (this.captureFocusedKeyboardTarget(doc.activeElement)) {
+                this.scheduleKeyboardFocusAlignment();
+            }
+            onCleanup(() => {
+                doc.removeEventListener('focusin', handleFocusIn, true);
+                doc.removeEventListener('focusout', handleFocusOut, true);
+                visualViewport?.removeEventListener('resize', handleViewportUpdate);
+                visualViewport?.removeEventListener('scroll', handleViewportUpdate);
+                this.clearFocusedKeyboardTarget();
+                this.element.style.removeProperty('--drawer-keyboard-inset');
+            });
+        });
+        this.destroyRef.onDestroy(() => {
+            this.cancelKeyboardFocusFrame();
+            this.restoreKeyboardScrollAdjustment();
+            this.element.style.removeProperty('--drawer-keyboard-inset');
+        });
+    }
+    onTouchStart(event) {
+        if (!this.drawerContext.open() || this.drawerContext.nestedDrawerOpen()) {
+            this.resetTouchTrackingState();
+            return;
+        }
+        const touch = event.touches[0];
+        if (!touch) {
+            return;
+        }
+        this.pendingKeyboardFocusMoved = false;
+        this.keyboardTouchStart = { x: touch.clientX, y: touch.clientY };
+    }
+    onTouchMove(event) {
+        const touch = event.touches[0];
+        const touchStart = this.keyboardTouchStart;
+        if (!touch || !touchStart || this.pendingKeyboardFocusMoved) {
+            return;
+        }
+        if (Math.abs(touch.clientX - touchStart.x) > INPUT_TAP_MOVE_THRESHOLD ||
+            Math.abs(touch.clientY - touchStart.y) > INPUT_TAP_MOVE_THRESHOLD) {
+            this.pendingKeyboardFocusMoved = true;
+        }
+    }
+    onTouchEnd(event) {
+        if (!this.drawerContext.open() ||
+            this.drawerContext.nestedDrawerOpen() ||
+            !this.keyboardTouchStart ||
+            this.pendingKeyboardFocusMoved) {
+            this.resetTouchTrackingState();
+            return;
+        }
+        const touch = event.changedTouches[0] ?? event.touches[0];
+        const doc = this.element.ownerDocument;
+        const nativeEventTarget = event.target;
+        const pointTarget = touch ? resolveKeyboardTouchTargetFromPoint(doc, touch.clientX, touch.clientY) : null;
+        if (pointTarget === KEYBOARD_TAP_BLOCKED) {
+            this.resetTouchTrackingState();
+            return;
+        }
+        const keyboardTarget = touch && (pointTarget ?? resolveKeyboardTouchTarget(nativeEventTarget));
+        if (keyboardTarget &&
+            (!this.element.contains(keyboardTarget.focusTarget) || !this.element.contains(keyboardTarget.clickTarget))) {
+            this.resetTouchTrackingState();
+            return;
+        }
+        if (!keyboardTarget || !touch) {
+            this.resetTouchTrackingState();
+            return;
+        }
+        const win = keyboardTarget.focusTarget.ownerDocument.defaultView;
+        if (!win || (win.visualViewport && win.visualViewport.scale !== 1)) {
+            this.resetTouchTrackingState();
+            return;
+        }
+        if (doc.activeElement === keyboardTarget.focusTarget && isKeyboardVisualViewportOpen(win)) {
+            this.resetTouchTrackingState();
+            return;
+        }
+        event.preventDefault();
+        focusKeyboardInputWithoutPageScroll(keyboardTarget.focusTarget);
+        dispatchKeyboardClick(keyboardTarget.clickTarget, touch);
+        this.resetTouchTrackingState();
+    }
+    resetTouchTrackingState() {
+        this.pendingKeyboardFocusMoved = false;
+        this.keyboardTouchStart = null;
+    }
+    captureFocusedKeyboardTarget(eventTarget) {
+        if (this.drawerContext.nestedDrawerOpen()) {
+            return false;
+        }
+        const target = resolveKeyboardInputTarget(eventTarget);
+        if (!target || !this.element.contains(target)) {
+            return false;
+        }
+        this.focusedKeyboardTarget = target;
+        return true;
+    }
+    alignFocusedKeyboardTarget() {
+        const target = this.focusedKeyboardTarget;
+        const win = this.element.ownerDocument.defaultView;
+        if (!win || this.drawerContext.nestedDrawerOpen() || !target || !this.element.contains(target)) {
+            this.resetDrawerKeyboardInset();
+            this.restoreKeyboardScrollAdjustment();
+            return;
+        }
+        const keyboardViewport = getKeyboardVisualViewport(win);
+        if (!keyboardViewport) {
+            this.resetDrawerKeyboardInset();
+            this.restoreKeyboardScrollAdjustment();
+            return;
+        }
+        this.setDrawerKeyboardInset(getDrawerKeyboardInset(win, keyboardViewport));
+        const scrollTarget = findKeyboardScrollTarget(target, this.element);
+        if (!scrollTarget || !scrollTarget.isConnected || !this.element.contains(scrollTarget)) {
+            this.restoreKeyboardScrollAdjustment();
+            return;
+        }
+        const scrollTargetRect = scrollTarget.getBoundingClientRect();
+        const clippedBottom = Math.min(scrollTargetRect.bottom, keyboardViewport.bottom);
+        const overlap = Math.max(0, scrollTargetRect.bottom - keyboardViewport.bottom);
+        this.setKeyboardScrollSlack(scrollTarget, overlap > 0 ? overlap + KEYBOARD_SCROLL_SLACK : 0);
+        const maxScrollTop = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
+        if (maxScrollTop <= 0) {
+            return;
+        }
+        const clippedTop = Math.max(scrollTargetRect.top, keyboardViewport.top);
+        const visibleTop = clippedTop + KEYBOARD_VISIBILITY_MARGIN;
+        const visibleBottom = clippedBottom - KEYBOARD_VISIBILITY_MARGIN;
+        if (visibleBottom <= visibleTop) {
+            return;
+        }
+        const targetRect = target.getBoundingClientRect();
+        const targetCenter = (targetRect.top + targetRect.bottom) / 2;
+        const visibleCenter = (visibleTop + visibleBottom) / 2;
+        const nextScrollTop = scrollTarget.scrollTop + targetCenter - visibleCenter;
+        scrollTarget.scrollTo({
+            top: clamp(nextScrollTop, 0, maxScrollTop),
+            behavior: prefersReducedMotion(win) ? 'auto' : 'smooth'
+        });
+    }
+    scheduleKeyboardFocusAlignment() {
+        this.cancelKeyboardFocusFrame();
+        this.keyboardFocusFrame = requestAnimationFrame(() => {
+            this.keyboardFocusFrame = 0;
+            this.alignFocusedKeyboardTarget();
+        });
+    }
+    cancelKeyboardFocusFrame() {
+        if (this.keyboardFocusFrame) {
+            cancelAnimationFrame(this.keyboardFocusFrame);
+            this.keyboardFocusFrame = 0;
+        }
+    }
+    clearFocusedKeyboardTarget() {
+        this.focusedKeyboardTarget = null;
+        this.resetDrawerKeyboardInset();
+        this.restoreKeyboardScrollAdjustment();
+        this.cancelKeyboardFocusFrame();
+    }
+    setDrawerKeyboardInset(inset) {
+        this.element.style.setProperty('--drawer-keyboard-inset', `${Math.max(0, Math.ceil(inset))}px`);
+    }
+    resetDrawerKeyboardInset() {
+        this.setDrawerKeyboardInset(0);
+    }
+    setKeyboardScrollSlack(element, slack) {
+        const roundedSlack = Math.max(0, Math.ceil(slack));
+        let adjustment = this.keyboardScrollAdjustment;
+        if (adjustment && !adjustment.element.isConnected) {
+            this.restoreKeyboardScrollAdjustment();
+            adjustment = null;
+        }
+        if (roundedSlack === 0) {
+            this.restoreKeyboardScrollAdjustment();
+            return;
+        }
+        if (adjustment && adjustment.element !== element) {
+            this.restoreKeyboardScrollAdjustment();
+            adjustment = null;
+        }
+        if (!adjustment) {
+            const styles = getComputedStyle(element);
+            adjustment = {
+                element,
+                overflowAnchor: element.style.overflowAnchor,
+                paddingBottom: element.style.paddingBottom,
+                scrollPaddingBottom: element.style.scrollPaddingBottom,
+                computedPaddingBottom: Number.parseFloat(styles.paddingBottom) || 0,
+                computedScrollPaddingBottom: Number.parseFloat(styles.scrollPaddingBottom) || 0
+            };
+            this.keyboardScrollAdjustment = adjustment;
+        }
+        element.style.overflowAnchor = 'none';
+        element.style.paddingBottom = `${adjustment.computedPaddingBottom + roundedSlack}px`;
+        element.style.scrollPaddingBottom = `${adjustment.computedScrollPaddingBottom + KEYBOARD_VISIBILITY_MARGIN}px`;
+    }
+    restoreKeyboardScrollAdjustment() {
+        const adjustment = this.keyboardScrollAdjustment;
+        if (!adjustment) {
+            return;
+        }
+        adjustment.element.style.overflowAnchor = adjustment.overflowAnchor;
+        adjustment.element.style.paddingBottom = adjustment.paddingBottom;
+        adjustment.element.style.scrollPaddingBottom = adjustment.scrollPaddingBottom;
+        this.keyboardScrollAdjustment = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerVirtualKeyboardProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerVirtualKeyboardProvider, isStandalone: true, selector: "[rdxDrawerVirtualKeyboardProvider]", host: { listeners: { "touchstart": "onTouchStart($event)", "touchmove": "onTouchMove($event)", "touchend": "onTouchEnd($event)", "touchcancel": "resetTouchTrackingState()" } }, exportAs: ["rdxDrawerVirtualKeyboardProvider"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerVirtualKeyboardProvider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDrawerVirtualKeyboardProvider]',
+                    exportAs: 'rdxDrawerVirtualKeyboardProvider',
+                    host: {
+                        '(touchstart)': 'onTouchStart($event)',
+                        '(touchmove)': 'onTouchMove($event)',
+                        '(touchend)': 'onTouchEnd($event)',
+                        '(touchcancel)': 'resetTouchTrackingState()'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+function isHTMLElement(target) {
+    return target instanceof HTMLElement;
+}
+function isKeyboardInputElement(element) {
+    if (element.isContentEditable) {
+        return true;
+    }
+    if (element instanceof HTMLTextAreaElement) {
+        return !element.matches(':disabled');
+    }
+    if (element instanceof HTMLInputElement && KEYBOARD_INPUT_TYPES.has(element.type)) {
+        return !element.matches(':disabled');
+    }
+    return false;
+}
+function resolveKeyboardInputTarget(target) {
+    if (!isHTMLElement(target)) {
+        return null;
+    }
+    if (isKeyboardInputElement(target)) {
+        return target.isContentEditable ? getContentEditableHost(target) : target;
+    }
+    const label = target.closest('label');
+    const control = label?.control ?? null;
+    return isHTMLElement(control) && isKeyboardInputElement(control) ? control : null;
+}
+function resolveKeyboardTouchTarget(target) {
+    const focusTarget = resolveKeyboardInputTarget(target);
+    if (!focusTarget) {
+        return null;
+    }
+    return {
+        focusTarget,
+        clickTarget: isHTMLElement(target) ? target : focusTarget
+    };
+}
+function getContentEditableHost(element) {
+    let host = element;
+    while (host.parentElement?.isContentEditable) {
+        host = host.parentElement;
+    }
+    return host;
+}
+function resolveKeyboardTouchTargetFromPoint(doc, clientX, clientY) {
+    const exactTarget = doc.elementFromPoint(clientX, clientY);
+    const exactKeyboardTarget = resolveKeyboardInputTarget(exactTarget);
+    if (exactKeyboardTarget) {
+        return {
+            focusTarget: exactKeyboardTarget,
+            clickTarget: isHTMLElement(exactTarget) ? exactTarget : exactKeyboardTarget
+        };
+    }
+    if (isInteractiveElement(exactTarget) || exactTarget?.closest('label') != null) {
+        return KEYBOARD_TAP_BLOCKED;
+    }
+    for (const [offsetX, offsetY] of [
+        [0, INPUT_TAP_HIT_SLOP],
+        [0, -INPUT_TAP_HIT_SLOP],
+        [INPUT_TAP_HIT_SLOP, 0],
+        [-INPUT_TAP_HIT_SLOP, 0]
+    ]) {
+        const keyboardTarget = resolveKeyboardInputTarget(doc.elementFromPoint(clientX + offsetX, clientY + offsetY));
+        if (keyboardTarget) {
+            return {
+                focusTarget: keyboardTarget,
+                clickTarget: keyboardTarget
+            };
+        }
+    }
+    return null;
+}
+function isInteractiveElement(element) {
+    if (!(element instanceof HTMLElement)) {
+        return false;
+    }
+    return (element.isContentEditable ||
+        element.matches('a[href],button,input,select,textarea,summary,[role="button"],[role="checkbox"],[role="radio"],[role="switch"],[tabindex]:not([tabindex="-1"])'));
+}
+function dispatchKeyboardClick(target, touch) {
+    const win = target.ownerDocument.defaultView;
+    if (!win) {
+        return;
+    }
+    const ClickEvent = win.PointerEvent ?? win.MouseEvent;
+    target.dispatchEvent(new ClickEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+        detail: 1,
+        view: win
+    }));
+}
+function focusKeyboardInputWithoutPageScroll(target) {
+    const wasFocused = target.ownerDocument.activeElement === target;
+    const previousOpacity = target.style.opacity;
+    const previousTransform = target.style.transform;
+    const previousTransition = target.style.transition;
+    target.style.transition = 'none';
+    target.style.opacity = '0';
+    target.style.transform = 'translateY(-2000px)';
+    try {
+        if (wasFocused) {
+            target.blur();
+        }
+        target.focus({ preventScroll: true });
+    }
+    finally {
+        target.style.opacity = previousOpacity;
+        target.style.transform = previousTransform;
+        target.style.transition = previousTransition;
+    }
+}
+function findKeyboardScrollTarget(target, root) {
+    let node = target.parentNode;
+    while (node) {
+        if (node instanceof HTMLElement && isKeyboardScrollable(node)) {
+            return node;
+        }
+        if (node === root) {
+            break;
+        }
+        node = node.parentNode;
+    }
+    return null;
+}
+function isKeyboardScrollable(element) {
+    const overflowY = getComputedStyle(element).overflowY;
+    return (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') && element.scrollHeight > 0;
+}
+function getKeyboardVisualViewport(win) {
+    const visualViewport = win.visualViewport;
+    if (!visualViewport || visualViewport.scale !== 1) {
+        return null;
+    }
+    const reducedHeight = win.innerHeight - visualViewport.height;
+    if (reducedHeight <= KEYBOARD_RESIZE_THRESHOLD) {
+        return null;
+    }
+    const top = Math.max(0, visualViewport.offsetTop);
+    return {
+        top,
+        bottom: Math.min(win.innerHeight, top + visualViewport.height)
+    };
+}
+function getDrawerKeyboardInset(win, keyboardViewport) {
+    return Math.max(0, win.innerHeight - keyboardViewport.bottom);
+}
+function isKeyboardVisualViewportOpen(win) {
+    return !win.visualViewport || getKeyboardVisualViewport(win) !== null;
+}
+function prefersReducedMotion(win) {
+    return !!win.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
+}
+
 /**
  * Connects a drawer root with trigger elements rendered elsewhere in the DOM.
  *
@@ -993,6 +1430,7 @@ const drawerImports = [
     RdxDrawerPortalMisuseGuard,
     RdxDrawerBackdrop,
     RdxDrawerViewport,
+    RdxDrawerVirtualKeyboardProvider,
     RdxDrawerPopup,
     RdxDrawerContent,
     RdxDrawerTitle,
@@ -1011,6 +1449,7 @@ class RdxDrawerModule {
             RdxDrawerPortalMisuseGuard,
             RdxDrawerBackdrop,
             RdxDrawerViewport,
+            RdxDrawerVirtualKeyboardProvider,
             RdxDrawerPopup,
             RdxDrawerContent,
             RdxDrawerTitle,
@@ -1025,6 +1464,7 @@ class RdxDrawerModule {
             RdxDrawerPortalMisuseGuard,
             RdxDrawerBackdrop,
             RdxDrawerViewport,
+            RdxDrawerVirtualKeyboardProvider,
             RdxDrawerPopup,
             RdxDrawerContent,
             RdxDrawerTitle,
@@ -1046,5 +1486,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxDrawerBackdrop, RdxDrawerClose, RdxDrawerContent, RdxDrawerDescription, RdxDrawerHandle, RdxDrawerIndent, RdxDrawerIndentBackground, RdxDrawerModule, RdxDrawerPopup, RdxDrawerPortal, RdxDrawerPortalMisuseGuard, RdxDrawerProvider, RdxDrawerProviderDirective, RdxDrawerRoot, RdxDrawerSwipeArea, RdxDrawerTitle, RdxDrawerTrigger, RdxDrawerViewport, buildSnapEntries, createRdxDrawerHandle, dismissUnitVector, drawerImports, injectRdxDrawerRootContext, provideRdxDrawerProvider, provideRdxDrawerRootContext, resolveSnapTarget, snapPointReveal, useDrawerSwipe };
+export { RdxDrawerBackdrop, RdxDrawerClose, RdxDrawerContent, RdxDrawerDescription, RdxDrawerHandle, RdxDrawerIndent, RdxDrawerIndentBackground, RdxDrawerModule, RdxDrawerPopup, RdxDrawerPortal, RdxDrawerPortalMisuseGuard, RdxDrawerProvider, RdxDrawerProviderDirective, RdxDrawerRoot, RdxDrawerSwipeArea, RdxDrawerTitle, RdxDrawerTrigger, RdxDrawerViewport, RdxDrawerVirtualKeyboardProvider, buildSnapEntries, createRdxDrawerHandle, dismissUnitVector, drawerImports, injectRdxDrawerRootContext, provideRdxDrawerProvider, provideRdxDrawerRootContext, resolveSnapTarget, snapPointReveal, useDrawerSwipe };
 //# sourceMappingURL=radix-ng-primitives-drawer.mjs.map