@salesforcedevs/dx-components 1.32.1-alpha.1 → 1.32.1-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.32.1-alpha.1",
+    "version": "1.32.1-alpha.2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "6bc5a213b2992c24d0f9ada1cc47dd016a70ca69"
+    "gitHead": "4288b70a2675c017c7107686bace5802189e9d44"
 }

package/src/modules/dx/agentMiawUi/agentMiawUi.css

@@ -0,0 +1,4 @@
+:host {
+    position: relative;
+    z-index: 2147483000;
+}

package/src/modules/dx/agentMiawUi/agentMiawUi.ts

@@ -1,83 +1,85 @@
 /* eslint-disable @lwc/lwc/no-document-query */
 import { LightningElement, api } from "lwc";
 
-const PAGE_BUILDER_TAG = "page-builder-miaw-ui";
+const HOSTED_MIAW_UI_TAG = "page-builder-miaw-ui";
 const SCRIPT_SRC =
     "https://a.sfdcstatic.com/digital/@sfdc-www-emu/page-builder-miaw-ui/v1-stable/page-builder-miaw-ui.js";
-const DEFINE_TIMEOUT_MS = 60_000;
-
-let loadPromise: Promise<void> | null = null;
-
-function withTimeout<T>(
-    promise: Promise<T>,
-    ms: number,
-    message: string
-): Promise<T> {
-    return Promise.race([
-        promise,
-        new Promise<T>((_, reject) => {
-            window.setTimeout(() => reject(new Error(message)), ms);
-        })
-    ]);
+const DEFINE_TIMEOUT_MS = 60000;
+
+let miawInitPromise: Promise<void> | null = null;
+
+function waitUntilHostedMiawUiDefined(): Promise<void> {
+    const message =
+        `MIAW UI embed (${HOSTED_MIAW_UI_TAG}) did not register within ${
+            DEFINE_TIMEOUT_MS / 1000
+        }s. ` +
+        "Confirm the script loads (network tab), your origin is allowed, and CSP permits this script.";
+
+    return new Promise((resolve, reject) => {
+        const timeoutId = window.setTimeout(() => {
+            reject(new Error(message));
+        }, DEFINE_TIMEOUT_MS);
+
+        customElements.whenDefined(HOSTED_MIAW_UI_TAG).then(
+            () => {
+                window.clearTimeout(timeoutId);
+                resolve();
+            },
+            (err: unknown) => {
+                window.clearTimeout(timeoutId);
+                reject(err);
+            }
+        );
+    });
 }
 
-function loadMiawUi(): Promise<void> {
-    if (loadPromise) {
-        return loadPromise;
+async function ensureMiawScriptAndDefinition(): Promise<void> {
+    if (customElements.get(HOSTED_MIAW_UI_TAG)) {
+        return;
     }
 
-    loadPromise = (async () => {
-        let script = document.querySelector(
-            `script[src="${SCRIPT_SRC}"]`
-        ) as HTMLScriptElement | null;
-
-        const awaitDefinition = () =>
-            withTimeout(
-                customElements.whenDefined(PAGE_BUILDER_TAG),
-                DEFINE_TIMEOUT_MS,
-                `${PAGE_BUILDER_TAG} did not register within ${
-                    DEFINE_TIMEOUT_MS / 1000
-                }s. ` +
-                    "Confirm the script loads (network tab), your origin is allowed, and CSP permits this script."
-            ).then(() => undefined);
-
-        if (customElements.get(PAGE_BUILDER_TAG)) {
-            return;
-        }
+    let script = document.querySelector(
+        `script[src="${SCRIPT_SRC}"]`
+    ) as HTMLScriptElement | null;
 
-        if (script) {
-            await awaitDefinition();
-            return;
-        }
+    if (script) {
+        await waitUntilHostedMiawUiDefined();
+        return;
+    }
 
-        script = document.createElement("script");
-        script.type = "module";
-        script.src = SCRIPT_SRC;
-
-        await new Promise<void>((resolve, reject) => {
-            script!.addEventListener("load", () => resolve(), { once: true });
-            script!.addEventListener(
-                "error",
-                () =>
-                    reject(
-                        new Error(
-                            `Failed to load page-builder-miaw-ui script (${SCRIPT_SRC}). Check status code and referrer rules.`
-                        )
-                    ),
-                { once: true }
-            );
-            document.head.appendChild(script!);
-        });
+    script = document.createElement("script");
+    script.type = "module";
+    script.src = SCRIPT_SRC;
+
+    await new Promise<void>((resolve, reject) => {
+        script!.addEventListener("load", () => resolve(), { once: true });
+        script!.addEventListener(
+            "error",
+            () =>
+                reject(
+                    new Error(
+                        `Failed to load MIAW UI embed script (${SCRIPT_SRC}). Check status code and referrer rules.`
+                    )
+                ),
+            { once: true }
+        );
+        document.head.appendChild(script!);
+    });
+
+    await waitUntilHostedMiawUiDefined();
+}
 
-        await awaitDefinition();
-    })();
+function loadMiawUi(): Promise<void> {
+    if (miawInitPromise) {
+        return miawInitPromise;
+    }
 
-    loadPromise = loadPromise.catch((e) => {
-        loadPromise = null;
+    miawInitPromise = ensureMiawScriptAndDefinition().catch((e) => {
+        miawInitPromise = null;
         throw e;
     });
 
-    return loadPromise;
+    return miawInitPromise;
 }
 
 export default class AgentMiawUi extends LightningElement {
@@ -87,38 +89,74 @@ export default class AgentMiawUi extends LightningElement {
     @api messagingUrl!: string;
     @api deploymentDevName = "page_builder_miaw_ui";
     @api richComponentVersion = "v1-stable";
-
-    private ensureMountedPromise: Promise<void> | null = null;
+    @api routingAttributes?: string;
+    /**
+     * When set, bar gradient start (CSS color); sets `--wes-color-af-bar-gradient-from` on the
+     * `.miaw-host` container and on the embed when present (LWC may reset `this.style` on the host).
+     */
+    @api gradientFrom?: string;
+    /**
+     * When set, bar gradient end (CSS color); sets `--wes-color-af-bar-gradient-to` the same way.
+     */
+    @api gradientTo?: string;
 
     renderedCallback(): void {
-        if (!this.orgId || !this.messagingUrl) {
+        this.syncGradientToMiawSubtree();
+    }
+
+    /** Applies gradient custom properties where the embed can see them (not on `this` — LWC can clear host inline styles). */
+    private syncGradientToMiawSubtree(): void {
+        const from = this.gradientFrom?.trim();
+        const to = this.gradientTo?.trim();
+        if (!from && !to) {
             return;
         }
-        if (
-            this.template
-                .querySelector(".miaw-host")
-                ?.querySelector(PAGE_BUILDER_TAG)
-        ) {
+
+        const container = this.template.querySelector(
+            ".miaw-host"
+        ) as HTMLElement | null;
+        if (!container) {
             return;
         }
 
-        this.ensureMiawUiMounted();
-    }
+        const embed = container.querySelector(
+            HOSTED_MIAW_UI_TAG
+        ) as HTMLElement | null;
+        const targets = embed ? [container, embed] : [container];
 
-    private ensureMiawUiMounted(): Promise<void> {
-        if (this.ensureMountedPromise) {
-            return this.ensureMountedPromise;
+        for (const node of targets) {
+            if (from) {
+                node.style.setProperty(
+                    "--wes-color-af-bar-gradient-from",
+                    from
+                );
+            }
+            if (to) {
+                node.style.setProperty("--wes-color-af-bar-gradient-to", to);
+            }
         }
+    }
 
-        this.ensureMountedPromise = (async () => {
+    connectedCallback(): void {
+        // Past the connect flush so `this.template` includes `.miaw-host`; parent supplies `@api` in markup.
+        queueMicrotask(() => {
+            this.mountMiawHost();
+        });
+    }
+
+    private mountMiawHost(): void {
+        if (!this.orgId || !this.messagingUrl) {
+            return;
+        }
+        (async () => {
             try {
                 await loadMiawUi();
                 const container = this.template.querySelector(".miaw-host");
-                if (!container || container.querySelector(PAGE_BUILDER_TAG)) {
+                if (!container || container.querySelector(HOSTED_MIAW_UI_TAG)) {
                     return;
                 }
 
-                const el = document.createElement(PAGE_BUILDER_TAG);
+                const el = document.createElement(HOSTED_MIAW_UI_TAG);
                 el.setAttribute("org-id", this.orgId);
                 el.setAttribute("messaging-url", this.messagingUrl);
                 el.setAttribute("deployment-dev-name", this.deploymentDevName);
@@ -127,14 +165,17 @@ export default class AgentMiawUi extends LightningElement {
                     "rich-component-version",
                     this.richComponentVersion
                 );
+                if (this.routingAttributes) {
+                    el.setAttribute(
+                        "routing-attributes",
+                        this.routingAttributes
+                    );
+                }
                 container.appendChild(el);
+                this.syncGradientToMiawSubtree();
             } catch (e) {
                 console.error(e);
-            } finally {
-                this.ensureMountedPromise = null;
             }
         })();
-
-        return this.ensureMountedPromise;
     }
 }

package/src/modules/dx/globalHeader/globalHeader.html

@@ -1,5 +1,5 @@
-<template>
+<template lwc:render-mode="light">
     <div lwc:ref="globalNavContainer" part="container">
         <dx-skip-nav-link></dx-skip-nav-link>
     </div>
-</template>
+</template>

package/src/modules/dx/globalHeader/globalHeader.ts

@@ -4,20 +4,28 @@ import { LightningElement, api } from "lwc";
 const defaultDomain = "https://developer.salesforce.com";
 const defaultLocale = "en-us";
 const defaultHeaderSettingsBasePath = "/c/public/header-settings";
-const headerSettingsJsonKeys = ['regionSelectorOverride', 'contactLinksOverride'];
+const headerSettingsJsonKeys = [
+    "regionSelectorOverride",
+    "contactLinksOverride"
+];
 
 export default class DevExNavigation extends LightningElement {
+    static renderMode = "light";
+
     @api locale: string = defaultLocale;
     @api path: string = defaultHeaderSettingsBasePath;
     @api domain: string = defaultDomain;
 
     async connectedCallback(): Promise<void> {
         try {
-            const headerSettingsResponse = await fetch(`${this.domain}${this.path}/${this.locale}.json`, {
-                headers: {
-                    "Content-Type": "application/json",
-                },
-            });
+            const headerSettingsResponse = await fetch(
+                `${this.domain}${this.path}/${this.locale}.json`,
+                {
+                    headers: {
+                        "Content-Type": "application/json"
+                    }
+                }
+            );
             if (headerSettingsResponse.ok) {
                 this.createFullNav(await headerSettingsResponse.json());
             } else {
@@ -59,15 +67,15 @@ export default class DevExNavigation extends LightningElement {
     private createBarebonesNav(): void {
         const hgfNav = this.createGlobalNav({
             origin: "",
-            contextNavEnabled: "true",
+            contextNavEnabled: "true"
         });
         const hgfNavContext = this.createContextNav({
             variation: "static",
             propertyTitle: {
                 label: "Developers",
-                url: "/",
+                url: "/"
             },
-            menuGroup: {},
+            menuGroup: {}
         });
         const containerEl = this.refs.globalNavContainer as Element;
         containerEl.appendChild(hgfNav);