@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/utils/focus_gate.js

@@ -0,0 +1,237 @@
+import { VISUALLY_HIDDEN_STYLE } from "../components/helpers/VisuallyHidden.js";
+
+
+const ANCHOR_SELECTOR = "[data-q-widget-anchor]";
+/**
+ * Manages keyboard focus relay between the host page and a shadow-root widget.
+ *
+ * Four sentinels mark the widget boundary. The entry and exit gates live inside
+ * a single `q-focus-sentinel` wrapper (display:contents) in the page DOM. Guards
+ * are appended to the host's light DOM with slot attributes and slotted into the
+ * shadow root via AppLayout.
+ *
+ *   [page] … sentinel[entry … exit] … [host] startGuard … content … endGuard [/host] … [page]
+ *
+ * Gates and guards only talk to each other. Natural browser tab order handles
+ * all movement within the widget.
+ *
+ * Relay mode (default):
+ *   - Tab into entry   → focus startGuard → Tab → first content (natural)
+ *   - Tab past endGuard   → focus exit     → Tab → next page element (natural)
+ *   - Shift+Tab to exit   → focus endGuard   → Shift+Tab → last content (natural)
+ *   - Shift+Tab to startGuard → focus entry → Shift+Tab → prev page element (natural)
+ *
+ * Dialog mode (isDialogActive = true):
+ *   - Tab past endGuard   → focus startGuard → Tab → first content (wrap)
+ *   - Shift+Tab to startGuard → focus endGuard → Shift+Tab → last content (wrap)
+ *   - body.inert = true so page is unreachable
+ */ class FocusGate {
+    init(param) {
+        let { host, selector, position, isDialogActive, labels } = param;
+        registerSentinel();
+        this.host = host;
+        this.selector = selector;
+        this.position = position != null ? position : "after";
+        this.sentinel = this.createSentinel(labels);
+        this.startGuard = this.createHiddenFocusable(labels.startGuard.value, "start-guard");
+        this.endGuard = this.createHiddenFocusable(labels.endGuard.value, "end-guard");
+        this.sentinel.onGateDisconnected = this.insertSentinel;
+        this.insertSentinel();
+        this.host.appendChild(this.startGuard);
+        this.host.appendChild(this.endGuard);
+        this.sentinel.entry.addEventListener("focusin", this.onEntryGateFocus);
+        this.sentinel.exit.addEventListener("focusin", this.onExitGateFocus);
+        this.startGuard.addEventListener("focusin", this.onStartGuardFocus);
+        this.endGuard.addEventListener("focusin", this.onEndGuardFocus);
+        const disposeDialog = isDialogActive.subscribe((active)=>this.setDialogActive(active));
+        const disposeLabels = [
+            [
+                labels.entryGate,
+                this.sentinel.entry
+            ],
+            [
+                labels.exitGate,
+                this.sentinel.exit
+            ],
+            [
+                labels.startGuard,
+                this.startGuard
+            ],
+            [
+                labels.endGuard,
+                this.endGuard
+            ]
+        ].map((param)=>{
+            let [sig, el] = param;
+            return sig.subscribe((l)=>el.setAttribute("aria-label", l));
+        });
+        this.disposeEffect = ()=>{
+            disposeDialog();
+            disposeLabels.forEach((d)=>d());
+        };
+    }
+    dispose() {
+        var _this_sentinel, _this_sentinel1, _this_startGuard, _this_endGuard, _this_sentinel2, _this_startGuard1, _this_endGuard1;
+        this.disposeEffect == null ? void 0 : this.disposeEffect.call(this);
+        this.disposeEffect = null;
+        if (this.sentinel) this.sentinel.onGateDisconnected = undefined;
+        (_this_sentinel = this.sentinel) == null ? void 0 : _this_sentinel.entry.removeEventListener("focusin", this.onEntryGateFocus);
+        (_this_sentinel1 = this.sentinel) == null ? void 0 : _this_sentinel1.exit.removeEventListener("focusin", this.onExitGateFocus);
+        (_this_startGuard = this.startGuard) == null ? void 0 : _this_startGuard.removeEventListener("focusin", this.onStartGuardFocus);
+        (_this_endGuard = this.endGuard) == null ? void 0 : _this_endGuard.removeEventListener("focusin", this.onEndGuardFocus);
+        (_this_sentinel2 = this.sentinel) == null ? void 0 : _this_sentinel2.remove();
+        (_this_startGuard1 = this.startGuard) == null ? void 0 : _this_startGuard1.remove();
+        (_this_endGuard1 = this.endGuard) == null ? void 0 : _this_endGuard1.remove();
+        // Only restore inert if we set it (i.e., dialog was still active at dispose time).
+        if (this.dialogActive) document.body.inert = this.priorBodyInert;
+        if (this.host) this.host.tabIndex = -1;
+        this.host = null;
+        this.sentinel = null;
+        this.startGuard = null;
+        this.endGuard = null;
+        this.focusOrigin = null;
+    }
+    createSentinel(labels) {
+        const el = document.createElement("q-focus-sentinel");
+        // display:contents makes the wrapper box-less — entry and exit participate
+        // in page tab order as if they were direct children of the parent.
+        el.style.cssText = "display:contents;";
+        el.entry = this.createHiddenFocusable(labels.entryGate.value);
+        el.exit = this.createHiddenFocusable(labels.exitGate.value);
+        el.appendChild(el.entry);
+        el.appendChild(el.exit);
+        return el;
+    }
+    createHiddenFocusable(label, slotName) {
+        const el = document.createElement("div");
+        el.tabIndex = 0;
+        // A bare <div> has the implicit role "generic", and aria-label is prohibited
+        // on generic-role elements. role="note" gives the sentinel a non-generic role
+        // so the aria-label is exposed to assistive technologies as intended.
+        el.setAttribute("role", "note");
+        el.setAttribute("aria-label", label);
+        el.style.cssText = VISUALLY_HIDDEN_STYLE;
+        if (slotName) el.setAttribute("slot", slotName);
+        return el;
+    }
+    setDialogActive(active) {
+        this.dialogActive = active;
+        if (active) {
+            var _this_host;
+            // Capture the trigger element BEFORE setting body.inert — real browsers defocus the
+            // active element synchronously when inert is applied, so we must read it first.
+            this.focusOrigin = document.activeElement;
+            this.priorBodyInert = document.body.inert;
+            document.body.inert = true;
+            if (this.host) this.host.tabIndex = 0;
+            (_this_host = this.host) == null ? void 0 : _this_host.focus();
+        } else {
+            document.body.inert = this.priorBodyInert;
+            if (this.host) this.host.tabIndex = -1;
+            if (this.focusOrigin instanceof HTMLElement) {
+                this.focusOrigin.focus();
+                this.focusOrigin = null;
+            }
+        }
+    }
+    constructor(){
+        this.host = null;
+        this.sentinel = null;
+        this.startGuard = null;
+        this.endGuard = null;
+        this.disposeEffect = null;
+        this.selector = undefined;
+        this.position = "after";
+        this.dialogActive = false;
+        this.focusOrigin = null;
+        this.priorBodyInert = false;
+        this.insertSentinel = ()=>{
+            if (!this.sentinel || this.sentinel.isConnected) return;
+            const dataAnchor = document.querySelector(ANCHOR_SELECTOR);
+            if (dataAnchor) {
+                const attrValue = dataAnchor.getAttribute("data-q-widget-anchor");
+                const placement = attrValue === "before" ? "beforebegin" : "afterend";
+                dataAnchor.insertAdjacentElement(placement, this.sentinel);
+                return;
+            }
+            const selectorAnchor = this.selector ? document.querySelector(this.selector) : null;
+            if (selectorAnchor) {
+                const placement = this.position === "before" ? "beforebegin" : "afterend";
+                selectorAnchor.insertAdjacentElement(placement, this.sentinel);
+                return;
+            }
+            document.body.appendChild(this.sentinel);
+        };
+        this.onEntryGateFocus = (e)=>{
+            var _this_startGuard;
+            // Skip when start guard relayed back here (prevents loop).
+            const from = e.relatedTarget;
+            if (from === this.startGuard) return;
+            (_this_startGuard = this.startGuard) == null ? void 0 : _this_startGuard.focus();
+        };
+        this.onExitGateFocus = (e)=>{
+            var _this_endGuard;
+            // Skip when end guard relayed back here (prevents loop).
+            const from = e.relatedTarget;
+            if (from === this.endGuard) return;
+            (_this_endGuard = this.endGuard) == null ? void 0 : _this_endGuard.focus();
+        };
+        this.onStartGuardFocus = (e)=>{
+            var _this_sentinel;
+            const from = e.relatedTarget;
+            // entry tabbed forward into us — do nothing, let Tab move to first content naturally.
+            if (from === ((_this_sentinel = this.sentinel) == null ? void 0 : _this_sentinel.entry)) return;
+            if (this.dialogActive) {
+                var _this_endGuard;
+                // Shift+Tab from first content — wrap to end guard.
+                // Skip if endGuard just focused us (loop prevention).
+                if (from === this.endGuard) return;
+                (_this_endGuard = this.endGuard) == null ? void 0 : _this_endGuard.focus();
+            } else {
+                var _this_sentinel1;
+                (_this_sentinel1 = this.sentinel) == null ? void 0 : _this_sentinel1.entry.focus();
+            }
+        };
+        this.onEndGuardFocus = (e)=>{
+            var _this_sentinel;
+            const from = e.relatedTarget;
+            // exit shift-tabbed backward into us — do nothing, let Shift+Tab move to last content naturally.
+            if (from === ((_this_sentinel = this.sentinel) == null ? void 0 : _this_sentinel.exit)) return;
+            if (this.dialogActive) {
+                var _this_startGuard;
+                // Tab from last content — wrap to start guard.
+                // Skip if startGuard just focused us (loop prevention).
+                if (from === this.startGuard) return;
+                (_this_startGuard = this.startGuard) == null ? void 0 : _this_startGuard.focus();
+            } else {
+                var _this_sentinel1;
+                (_this_sentinel1 = this.sentinel) == null ? void 0 : _this_sentinel1.exit.focus();
+            }
+        };
+    }
+}
+/**
+ * Wrapper sentinel placed in the page DOM to house the entry and exit gates.
+ * Using display:contents makes the wrapper itself box-less, so `entry` and `exit`
+ * participate in tab order as if they were direct siblings of the sentinel's parent.
+ *
+ * Exposes `entry` and `exit` as public properties so callers can attach event
+ * listeners and aria-labels without querying the DOM.
+ *
+ * Uses disconnectedCallback + queueMicrotask to notify FocusGate when it is removed
+ * so it can be reinserted. queueMicrotask defers the check so that a move
+ * (remove + re-add in the same task) doesn't trigger a spurious reinsertion.
+ */ class FocusGateSentinel extends HTMLElement {
+    disconnectedCallback() {
+        queueMicrotask(()=>{
+            if (!this.isConnected) this.onGateDisconnected == null ? void 0 : this.onGateDisconnected.call(this);
+        });
+    }
+}
+function registerSentinel() {
+    if (!customElements.get("q-focus-sentinel")) {
+        customElements.define("q-focus-sentinel", FocusGateSentinel);
+    }
+}
+
+export { FocusGate };

package/widget/multimodal_v2/utils/locale.js

@@ -0,0 +1,16 @@
+import "../stores/translation_store.js";
+
+
+/**
+ * Convert our locale codes (e.g., "en_GB", "zh_CN") to Intl-compatible BCP 47 language
+ * tags (e.g., "en-GB", "zh-CN").
+ *
+ * Our locale identifiers use underscores (they mirror the locale filenames), which the
+ * Intl constructors reject with `RangeError: Invalid language tag`. Anything handed to
+ * `Intl.*` or a `toLocale*String` call must go through this first.
+ */ function toIntlLocale(locale) {
+    if (!locale) return (/* inlined export .DEFAULT_LOCALE */"en");
+    return locale.replace(/_/g, "-");
+}
+
+export { toIntlLocale };

package/widget/multimodal_v2/utils/media_queries.js

@@ -0,0 +1,30 @@
+import { signals_core_module_d } from "../../../js/multimodal_v2.js";
+import { originalOf } from "../../../src/proxy.js";
+
+
+
+// Make sure it's synced with panda.config.ts!!!
+const queries = {
+    mobile: "(max-width: 767px)",
+    touchDevice: "(pointer: coarse)",
+    narrowLandscape: "(max-height: 500px) and (orientation: landscape) and (pointer: coarse)"
+};
+const isMobile = createMediaQuerySignal(queries.mobile);
+const isTouchDevice = createMediaQuerySignal(queries.touchDevice);
+const isLandscapeNarrow = createMediaQuerySignal(queries.narrowLandscape);
+function createMediaQuerySignal(query) {
+    // Docking points `window.matchMedia` at the shrunk content area, but the
+    // widget lives outside it (in the docked panel), so it needs the real
+    // viewport — read through the pre-patch view. `matchMedia` is unbound there,
+    // hence the explicit receiver.
+    const { matchMedia } = originalOf(window);
+    const mql = matchMedia.call(window, query);
+    const matches = signals_core_module_d(mql.matches);
+    const handler = (e)=>{
+        matches.value = e.matches;
+    };
+    mql.addEventListener("change", handler);
+    return matches;
+}
+
+export { isLandscapeNarrow, isMobile, isTouchDevice };

package/widget/multimodal_v2/utils/multimodal_cache.js

@@ -0,0 +1,19 @@
+class MultimodalCache {
+    static get(key, factory) {
+        let value = this.cache.get(key);
+        if (!value) {
+            value = factory();
+            this.cache.set(key, value);
+        }
+        return value;
+    }
+    static clear() {
+        this.cache.clear();
+    }
+}
+MultimodalCache.cache = new Map();
+function getCache(key, factory) {
+    return MultimodalCache.get(key, factory);
+}
+
+export { MultimodalCache, getCache };

package/widget/multimodal_v2/utils/mutation_effect.js

@@ -0,0 +1,14 @@
+/**
+ * Runs `callback` once on setup and then every time a matching mutation fires on
+ * `target`. Think of it as an `effect()` keyed off DOM mutations instead of
+ * signals — handy for reacting to attributes the widget doesn't own (e.g. flags
+ * another script stamps on `<html>`). Returns a disposer that disconnects the
+ * observer; wire it into your teardown (e.g. push onto `uiDisposers`).
+ */ function mutationEffect(callback, target, options) {
+    const observer = new MutationObserver((mutations)=>callback(mutations));
+    observer.observe(target, options);
+    callback([]);
+    return ()=>observer.disconnect();
+}
+
+export { mutationEffect };

package/widget/multimodal_v2/utils/navigation_interceptor.js

@@ -0,0 +1,205 @@
+import { __webpack_require__ } from "../../../js/runtime.js";
+import "../../utils/native_globals.js";
+
+/* provided dependency */ var __nativeDocumentAddEventListener = __webpack_require__(68034).Qj;
+/* provided dependency */ var __nativeWindowAddEventListener = __webpack_require__(68034).zh;
+/* provided dependency */ var __nativeDocumentRemoveEventListener = __webpack_require__(68034).LA;
+/* provided dependency */ var __nativeWindowRemoveEventListener = __webpack_require__(68034).kZ;
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+/**
+ * NavigationInterceptor intercepts user-initiated link clicks and routes them
+ * through soft navigation instead of hard page reloads.
+ *
+ * Uses the Navigation API on Chromium browsers, falls back to click capture
+ * on Firefox/Safari until they implement the Navigation API.
+ */ // Check if the Navigation API is available (Chromium browsers)
+const hasNavigationApi = !!(window.navigation && typeof window.navigation.navigate === "function");
+class NavigationInterceptor {
+    get initialized() {
+        return this._initialized;
+    }
+    /**
+  * Initialize navigation interception to handle user-initiated link clicks.
+  * Should be called when entering voice/video mode.
+  */ init() {
+        if (this._initialized) return;
+        if (hasNavigationApi) {
+            // Primary: Navigation API (Chromium)
+            window.navigation.addEventListener("navigate", this.onNavigate);
+        } else {
+            // Fallback to capturing same-origin <a> clicks + History API until:
+            // - Firefox: scheduled for 2025-10 https://bugzilla.mozilla.org/show_bug.cgi?id=1777171
+            // - Safari: expected 2025/2026 based on https://webkit.org/blog/16458/announcing-interop-2025/
+            __nativeDocumentAddEventListener("click", this.onDocumentClickCapture, {
+                capture: true
+            });
+            __nativeWindowAddEventListener("popstate", this.onPopState, {
+                passive: true
+            });
+        }
+        this._initialized = true;
+    }
+    /**
+  * Remove navigation intercepts and clean up event listeners.
+  * Should be called when leaving voice/video mode.
+  */ dispose() {
+        if (!this._initialized) return;
+        if (hasNavigationApi) {
+            window.navigation.removeEventListener("navigate", this.onNavigate);
+        } else {
+            __nativeDocumentRemoveEventListener("click", this.onDocumentClickCapture, {
+                capture: true
+            });
+            __nativeWindowRemoveEventListener("popstate", this.onPopState);
+        }
+        this._initialized = false;
+    }
+    /**
+  * Determines if a link element should be handled for soft navigation.
+  * Returns false for links that should open in new tabs, external links, or downloads.
+  */ shouldHandleForElement(element) {
+        const t = (element.getAttribute("target") || "").toLowerCase();
+        if (t && t !== "_self") return false;
+        if ((element.getAttribute("rel") || "").split(/\s+/).includes("external")) return false;
+        if (element.hasAttribute("download")) return false;
+        return true;
+    }
+    /**
+  * Determines if a Navigation API event should be intercepted for soft navigation.
+  */ shouldInterceptNavigateEvent(event) {
+        if (!event.canIntercept) return false; // e.g., cross-document traversals
+        const dest = new URL(event.destination.url);
+        if (dest.origin !== window.location.origin) return false; // Leave external links alone
+        if (event.hashChange) return false; // let the browser scroll to fragments
+        if (event.downloadRequest) return false; // let downloads proceed
+        if (event.formData) return false; // form submissions out of scope for now
+        // If the click had target=_blank or rel=external, let it through.
+        const src = event.sourceElement;
+        if (src && src instanceof HTMLAnchorElement) {
+            return this.shouldHandleForElement(src);
+        }
+        return true;
+    }
+    /**
+  * Creates a new NavigationInterceptor.
+  * @param navigateSoftly - Callback function to perform soft navigation
+  */ // eslint-disable-next-line no-useless-constructor
+    constructor(navigateSoftly){
+        this.navigateSoftly = navigateSoftly;
+        this._initialized = false;
+        this.isHandlingNavigate = false;
+        /**
+    * Handle click events on anchor elements (fallback for browsers without Navigation API).
+    * Arrow function to preserve `this` binding when used as event handler.
+    */ this.onDocumentClickCapture = (event)=>{
+            if (event.button !== 0) return; // left click only
+            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+            // Find nearest <a href>
+            const a = event.target && (event.target instanceof Element ? event.target.closest("a[href]") : null);
+            if (!a) return;
+            // Respect <a> tag target/download/external attributes
+            if (!this.shouldHandleForElement(a)) return;
+            const url = new URL(a.href, window.location.href);
+            if (url.origin !== window.location.origin) return; // only same-origin
+            // Hash-only navigation -> let browser scroll
+            if (url.hash && url.pathname === window.location.pathname && url.search === window.location.search) {
+                return;
+            }
+            // Prevent the browser's default link behavior
+            event.preventDefault();
+            // Stop propagation to prevent other handlers from triggering hard navigations programmatically
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+            // Persist scroll position into current history entry
+            const cur = window.history.state || {};
+            const withScroll = _extends({}, cur, {
+                scroll: {
+                    x: window.scrollX,
+                    y: window.scrollY
+                }
+            });
+            window.history.replaceState(withScroll, "", window.location.href);
+            // Perform soft navigation
+            this.navigateSoftly(url.href, {
+                history: "push",
+                scroll: "top"
+            }).catch(()=>{});
+        };
+        /**
+    * Handle popstate events for back/forward navigation (fallback mode).
+    * Arrow function to preserve `this` binding when used as event handler.
+    */ this.onPopState = async ()=>{
+            var _window_history_state;
+            const restore = (_window_history_state = window.history.state) == null ? void 0 : _window_history_state.scroll;
+            await this.navigateSoftly(window.location.href, {
+                history: "none",
+                scroll: "manual"
+            });
+            if (restore) {
+                window.scrollTo(restore.x || 0, restore.y || 0);
+            }
+        };
+        /**
+    * Handle Navigation API events (Chromium browsers).
+    * Arrow function to preserve `this` binding when used as event handler.
+    */ this.onNavigate = (event)=>{
+            if (!this.shouldInterceptNavigateEvent(event)) return;
+            const navType = event.navigationType;
+            // Handle back/forward navigation
+            if (navType === "traverse") {
+                event.intercept({
+                    handler: async ()=>{
+                        await this.navigateSoftly(event.destination.url, {
+                            history: "none",
+                            scroll: "manual"
+                        });
+                    }
+                });
+                return;
+            }
+            // Intercept new navigations (link clicks, programmatic navigation)
+            if (navType === "push" && !this.isHandlingNavigate) {
+                event.intercept({
+                    handler: async ()=>{
+                        this.isHandlingNavigate = true;
+                        try {
+                            var _navigation_currentEntry;
+                            // Update current entry's state with scroll position via Navigation API
+                            const { navigation } = window;
+                            const existingState = (_navigation_currentEntry = navigation.currentEntry) == null ? void 0 : _navigation_currentEntry.getState();
+                            navigation.updateCurrentEntry({
+                                state: _extends({}, existingState, {
+                                    scroll: {
+                                        x: window.scrollX,
+                                        y: window.scrollY
+                                    }
+                                })
+                            });
+                            await this.navigateSoftly(event.destination.url, {
+                                history: "none",
+                                scroll: "top"
+                            });
+                        } finally{
+                            this.isHandlingNavigate = false;
+                        }
+                    }
+                });
+            }
+        };
+    }
+}
+
+export { NavigationInterceptor };