@salesforcedevs/dx-components 1.32.0-alpha.8 → 1.32.1-alpha.0

package/lwc.config.json

@@ -6,6 +6,7 @@
     ],
     "expose": [
         "dx/agenda",
+        "dx/agentMiawUi",
         "dx/alert",
         "dx/audio",
         "dx/banner",
@@ -128,7 +129,6 @@
         "dxUtils/analytics",
         "dxUtils/async",
         "dxUtils/constants",
-        "dxUtils/data360Search",
         "dxUtils/contentTypes",
         "dxUtils/coveo",
         "dxUtils/dates",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.32.0-alpha.8",
+    "version": "1.32.1-alpha.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "b97e92aa3483e9eefdba3d60962f20cd68291df2"
+    "gitHead": "6ce1be58809077071ba1466ed17deb4a9315bf1e"
 }

package/src/modules/dx/agentMiawUi/agentMiawUi.html

@@ -0,0 +1,3 @@
+<template>
+    <div lwc:dom="manual" class="miaw-host"></div>
+</template>

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

@@ -0,0 +1,139 @@
+/* eslint-disable @lwc/lwc/no-document-query */
+import { LightningElement, api } from "lwc";
+
+const PAGE_BUILDER_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);
+        })
+    ]);
+}
+
+function loadMiawUi(): Promise<void> {
+    if (loadPromise) {
+        return loadPromise;
+    }
+
+    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;
+        }
+
+        if (script) {
+            await awaitDefinition();
+            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!);
+        });
+
+        await awaitDefinition();
+    })();
+
+    loadPromise = loadPromise.catch((e) => {
+        loadPromise = null;
+        throw e;
+    });
+
+    return loadPromise;
+}
+
+export default class AgentMiawUi extends LightningElement {
+    /** Salesforce org id (15- or 18-character Id). */
+    @api orgId!: string;
+    /** Messaging endpoint host URL (e.g. https://org62.my.salesforce-scrt.com). */
+    @api messagingUrl!: string;
+    @api deploymentDevName = "page_builder_miaw_ui";
+    @api richComponentVersion = "v1-stable";
+
+    private ensureMountedPromise: Promise<void> | null = null;
+
+    renderedCallback(): void {
+        if (!this.orgId || !this.messagingUrl) {
+            return;
+        }
+        if (
+            this.template
+                .querySelector(".miaw-host")
+                ?.querySelector(PAGE_BUILDER_TAG)
+        ) {
+            return;
+        }
+
+        this.ensureMiawUiMounted();
+    }
+
+    private ensureMiawUiMounted(): Promise<void> {
+        if (this.ensureMountedPromise) {
+            return this.ensureMountedPromise;
+        }
+
+        this.ensureMountedPromise = (async () => {
+            try {
+                await loadMiawUi();
+                const container = this.template.querySelector(".miaw-host");
+                if (!container || container.querySelector(PAGE_BUILDER_TAG)) {
+                    return;
+                }
+
+                const el = document.createElement(PAGE_BUILDER_TAG);
+                el.setAttribute("org-id", this.orgId);
+                el.setAttribute("messaging-url", this.messagingUrl);
+                el.setAttribute("deployment-dev-name", this.deploymentDevName);
+                el.setAttribute(
+                    "rich-component-version",
+                    this.richComponentVersion
+                );
+                container.appendChild(el);
+            } catch (e) {
+                console.error(e);
+            } finally {
+                this.ensureMountedPromise = null;
+            }
+        })();
+
+        return this.ensureMountedPromise;
+    }
+}

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -31,7 +31,14 @@
     transition: var(--dx-g-transition-hue-1x);
     align-items: center;
     outline: none !important;
-    background: white;
+}
+
+.option:focus {
+    box-shadow: inset 0 0 0 1px var(--dx-g-blue-vibrant-50);
+}
+
+.option:active {
+    background: var(--dx-g-cloud-blue-vibrant-95) !important;
 }
 
 .option:not(.option-active):hover {
@@ -44,18 +51,6 @@
     background: var(--dx-g-cloud-blue-vibrant-95);
 }
 
-.option:focus {
-    box-shadow: 0 0 0 2px var(--dx-g-blue-vibrant-50);
-}
-
-.option-active:focus {
-    box-shadow: 0 0 0 2px var(--dx-g-blue-vibrant-50);
-}
-
-.option:active {
-    background: var(--dx-g-cloud-blue-vibrant-95) !important;
-}
-
 .option_details {
     display: flex;
     flex-direction: column;

package/src/modules/dx/searchResults/searchResults.css

@@ -248,7 +248,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 .coveo-pager-list-item {
     border: none;
-    border-radius: var(--dx-g-spacing-xs);
+    border-radius: 16px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -282,62 +282,13 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     border-right: none;
 }
 
-/* List item states: same padding in all states so text never moves. Ring 8px from text on sides, more on top/bottom. */
 .dx-result {
-    --dx-result-inner-gap-x: var(
-        --dx-g-spacing-sm
-    ); /* 8px between text and ring on sides */
-
-    --dx-result-inner-gap-y: var(
-        --dx-g-spacing-xs
-    ); /* ring closer to card edge so more padding inside box top/bottom */
-
-    position: relative;
     background: white;
-    border-radius: var(--dx-g-spacing-md);
+    border-radius: 16px;
     border: 1px solid rgb(24 24 24 / 4%);
     box-shadow: 0 0 2px 0 rgb(24 24 24 / 8%), 0 2px 4px 1px rgb(24 24 24 / 16%);
-    padding: var(--dx-g-spacing-md);
-    margin-bottom: var(--dx-g-spacing-md);
-    transition: background-color 0.1s ease;
-}
-
-/* Hover: same shape as focus box, more padding top/bottom inside box; space between results unchanged */
-.dx-result:hover::after {
-    content: "";
-    position: absolute;
-    top: var(--dx-result-inner-gap-y);
-    bottom: var(--dx-result-inner-gap-y);
-    left: var(--dx-result-inner-gap-x);
-    right: var(--dx-result-inner-gap-x);
-    background: var(--dx-g-gray-95);
-    border-radius: var(--dx-g-spacing-xs);
-    pointer-events: none;
-    z-index: 0;
-}
-
-.dx-result > * {
-    position: relative;
-    z-index: 1;
-}
-
-/* Focus: ring 8px from text via pseudo-element; no padding/layout change */
-.dx-result:focus-within {
-    outline: none;
-}
-
-/* Pseudo: 8px from text on sides, more padding top/bottom inside ring (smaller inset y) */
-.dx-result:focus-within::before {
-    content: "";
-    position: absolute;
-    top: var(--dx-result-inner-gap-y);
-    bottom: var(--dx-result-inner-gap-y);
-    left: var(--dx-result-inner-gap-x);
-    right: var(--dx-result-inner-gap-x);
-    border: 2px solid var(--dx-g-blue-vibrant-50);
-    border-radius: var(--dx-g-spacing-xs);
-    pointer-events: none;
-    z-index: 2;
+    padding: 20px;
+    margin-bottom: var(--dx-g-spacing-lg);
 }
 
 .dx-result-title {
@@ -371,59 +322,10 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     color: white;
 }
 
-.dx-search-header + .dx-search-main {
+.dx-search-header + .coveo-main-section {
     margin-top: var(--dx-g-spacing-2xl);
 }
 
-.dx-search-results {
-    font-family: var(--dx-g-font-sans);
-    background-color: #fafaf9;
-}
-
-.dx-search-main {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 var(--dx-g-spacing-xl);
-}
-
-.dx-search-box-row {
-    margin-bottom: var(--dx-g-spacing-lg);
-}
-
-.dx-search-box-row .dx-search-box {
-    max-width: 400px;
-}
-
-.dx-search-loading {
-    padding: var(--dx-g-spacing-2xl);
-    text-align: center;
-}
-
-.dx-search-loading-image {
-    max-width: 200px;
-}
-
-.dx-search-no-results {
-    display: flex;
-    justify-content: center;
-    gap: 90px;
-    margin: 50px 34px 90px;
-}
-
-.dx-search-no-results-info {
-    text-align: left;
-}
-
-.dx-search-no-results-info > ul {
-    list-style-type: disc;
-    list-style-position: inside;
-    font-size: var(--dx-g-text-xs);
-}
-
-.dx-search-result-list {
-    padding-bottom: var(--dx-g-spacing-2xl);
-}
-
 .dx-search-header-container {
     margin: 0 auto;
     max-width: 1200px;
@@ -596,8 +498,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 }
 
 @media screen and (max-width: 768px) {
-    .no-results > img,
-    .dx-search-no-results > img {
+    .no-results > img {
         display: none;
     }
 }

package/src/modules/dx/searchResults/searchResults.html

@@ -1,102 +1,106 @@
 <template>
-    <div id="search" class="dx-search-results">
-        <div lwc:if={hasQuery} class="dx-search-header">
+    <div
+        id="search"
+        class="CoveoSearchInterface"
+        data-enable-history="true"
+        data-pipeline={coveoSearchPipeline}
+    >
+        <div
+            class="CoveoAnalytics"
+            data-search-hub="salesforcedevdoc"
+            data-endpoint={coveoAnalyticsEndpoint}
+        ></div>
+        <div if:true={hasQuery} class="dx-search-header">
             <div class="dx-search-header-container">
                 <p class="dx-search-header-title">
-                    <span class="dx-search-header-title-results">
-                        {resultCountLabel}
-                    </span>
+                    <span class="dx-search-header-title-results">{header}</span>
                     &nbsp;results for
                 </p>
                 <p class="dx-search-header-query">&ldquo;{query}&rdquo;</p>
             </div>
         </div>
-        <div class="dx-search-main">
-            <div class="dx-search-results-column">
-                <div class="dx-search-box-row">
-                    <dx-input
-                        class="dx-search-box"
-                        type="search"
-                        placeholder="Search"
-                        role="search"
-                        aria-label="Search"
-                        icon-symbol="search"
-                        size="small"
-                        value={query}
-                        onchange={onSearchInputChange}
-                        clearable
-                    ></dx-input>
+        <div class="coveo-main-section">
+            <div class="coveo-facet-column">
+                <div class="dx-facet-column-header">
+                    <span class="dx-facet-column-header-title">Filters</span>
+                    <template if:true={hasFilters}>
+                        <dx-button onclick={clearFilters} variant="inline">
+                            Clear
+                        </dx-button>
+                    </template>
                 </div>
-                <div lwc:if={isLoading} class="dx-search-loading">
-                    <img
-                        class="dx-search-loading-image"
-                        src="https://a.sfdcstatic.com/developer-website/prod/images/sidebar-loading.svg"
-                        alt="Loading"
-                    />
+                <div
+                    class="CoveoDynamicFacetManager"
+                    data-enable-reorder="false"
+                >
+                    <div
+                        class="CoveoDynamicFacet"
+                        data-title="Content Type"
+                        data-field="@commonsource"
+                        data-tab="All"
+                        data-enable-facet-search="false"
+                    ></div>
+                    <div
+                        class="CoveoDynamicFacet"
+                        data-title="Language"
+                        data-field="@language"
+                        data-tab="All"
+                        data-enable-facet-search="false"
+                    ></div>
                 </div>
-                <template lwc:if={showNoResults}>
-                    <div class="dx-search-no-results">
-                        <img
-                            src="https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-circle-small.svg"
-                            alt=""
-                        />
-                        <div class="dx-search-no-results-info">
-                            <p class="dx-text-display-8">
-                                Sorry, no results were found for your search
-                                &ldquo;{query}&rdquo;
-                            </p>
-                            <p class="dx-text-display-8 tip">Search Tips:</p>
-                            <ul class="tip-list">
-                                <li>Please consider misspellings</li>
-                                <li>Try different search keywords</li>
-                            </ul>
-                            <p class="dx-text-display-8 tip tbc-container">
-                                Still not finding what you're looking for?
-                                Consider asking in the&nbsp;
-                                <a
-                                    class="link"
-                                    href="https://trailhead.salesforce.com/trailblazer-community/feed"
-                                >
-                                    Trailblazer Community
-                                </a>
-                                !
-                            </p>
-                        </div>
+                <div class="dx-facet-column-footer">
+                    <dx-button onclick={dismissFiltersOverlay}>
+                        View {header} results
+                    </dx-button>
+                </div>
+            </div>
+            <div class="coveo-results-column">
+                <div class="CoveoShareQuery"></div>
+                <div class="CoveoExportToExcel"></div>
+                <div class="CoveoPreferencesPanel">
+                    <div class="CoveoResultsPreferences"></div>
+                    <div class="CoveoResultsFiltersPreferences"></div>
+                </div>
+                <div class="CoveoDidYouMean"></div>
+                <div class="coveo-results-header">
+                    <div class="coveo-summary-section"></div>
+                    <div class="coveo-sort-section" role="radiogroup">
+                        <span
+                            class="CoveoSort"
+                            data-sort-criteria="relevancy"
+                            data-caption="Sorted by Relevance"
+                        ></span>
                     </div>
-                </template>
-                <template lwc:if={hasResults}>
-                    <div class="dx-search-result-list">
-                        <template
-                            for:each={results}
-                            for:item="result"
-                            for:index="index"
-                        >
-                            <div
-                                key={result.uniqueId}
-                                class="dx-result"
-                                data-result-id={result.uniqueId}
-                            >
-                                <a
-                                    href={result.href}
-                                    class="dx-result-title"
-                                    target={result.openInNewTab}
-                                    rel={result.rel}
-                                    data-index={result.resultIndex}
-                                    data-title={result.title}
-                                    onclick={onSearchResultClick}
-                                >
-                                    {result.title}
-                                </a>
-                                <p
-                                    lwc:if={result.matchedText}
-                                    class="dx-result-excerpt"
-                                >
-                                    {result.matchedText}
-                                </p>
-                            </div>
-                        </template>
+                    <div>
+                        <div
+                            class="CoveoSearchbox"
+                            data-enable-omnibox="false"
+                            data-add-search-button="false"
+                            aria-hidden="true"
+                        ></div>
                     </div>
-                </template>
+                </div>
+                <div class="CoveoBreadcrumb"></div>
+                <div class="CoveoHiddenQuery"></div>
+                <div class="CoveoErrorReport"></div>
+                <div
+                    class="CoveoResultList"
+                    data-layout="list"
+                    data-wait-animation="fade"
+                    data-auto-select-fields-to-include="true"
+                    lwc:dom="manual"
+                ></div>
+                <div class="coveo-results-footer" aria-hidden="true">
+                    <div class="CoveoPager"></div>
+                </div>
+                <div class="pagination-container">
+                    <dx-pagination
+                        current-page={currentPage}
+                        total-pages={totalPages}
+                        onpagechange={goToPage}
+                        pages-to-show="5"
+                    ></dx-pagination>
+                </div>
             </div>
         </div>
     </div>