@salesforcedevs/dx-components 1.3.289 → 1.3.296

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.289",
+    "version": "1.3.296",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -46,5 +46,5 @@
     "volta": {
         "node": "16.19.1"
     },
-    "gitHead": "eaa53ea697b1919745a737563dcdf79bbe9e06a4"
+    "gitHead": "7a3e47bb11802dbded4c5bd3814b408cbeedecd7"
 }

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -126,7 +126,7 @@ export default class FeaturedContentHeader extends LightningElement {
 
         if (slotElements.length) {
             const slotContentElement = slotElements[0];
-            const playerElement = slotContentElement.shadowRoot.querySelector(
+            const playerElement = slotContentElement?.shadowRoot?.querySelector(
                 "audio"
             ) as HTMLAudioElement;
             if (playerElement) {
@@ -178,7 +178,7 @@ export default class FeaturedContentHeader extends LightningElement {
         // Setting the svgs with innerHTML prevents their IDs from being rewritten
         // which is necessary to preserve the svg masking and other effects
         if (this.backgroundImgId && this.backgroundImgId in svgs) {
-            const bgSvg = this.template.querySelector(".bg-image-container");
+            const bgSvg = this.template?.querySelector(".bg-image-container");
             if (bgSvg) {
                 // eslint-disable-next-line @lwc/lwc/no-inner-html
                 bgSvg.innerHTML = `

package/src/modules/dxUtils/coveo/coveo.ts

@@ -1,7 +1,8 @@
 import {
     buildSearchEngine as _buildSearchEngine,
     SearchAppState,
-    SearchEngineOptions
+    SearchEngineOptions,
+    getOrganizationEndpoints
 } from "@coveo/headless";
 
 export const buildSearchEngine = ({
@@ -24,7 +25,8 @@ export const buildSearchEngine = ({
     const configuration = {
         accessToken: publicAccessToken,
         organizationId,
-        search
+        search,
+        organizationEndpoints: getOrganizationEndpoints(organizationId)
     };
 
     const engineConfiguration: SearchEngineOptions = preloadedState

package/src/modules/dx/headerSearch/headerSearch.css

@@ -1,62 +0,0 @@
-@import "dxHelpers/reset";
-
-/* DESKTOP */
-
-:host {
-    --toggle-width: var(--dx-g-spacing-5xl);
-}
-
-.desktop_search-container {
-    position: relative;
-    display: flex;
-    height: var(--dx-g-spacing-xl);
-    font-size: var(--dx-g-text-sm);
-    font-family: var(--dx-g-font-sans);
-    color: var(--dx-g-gray-50);
-}
-
-.desktop_search-container dx-input {
-    --dx-c-input-width: calc(
-        var(--dx-c-header-search-width) - var(--toggle-width)
-    );
-}
-
-/* MOBILE */
-
-.mobile_search-button {
-    position: relative;
-    z-index: 3;
-}
-
-.mobile_search-dropdown {
-    --dx-c-popover-border-radius: 0;
-    --dx-c-popover-border: none;
-}
-
-.mobile_search-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    transition: var(--dx-g-transition-hue-1x);
-    opacity: 0;
-    pointer-events: none;
-
-    --dx-c-input-border: none;
-    --dx-c-input-border-radius: 0;
-    --dx-c-input-border-active: none;
-    --dx-c-input-icon-color: var(--dx-g-blue-vibrant-20);
-    --dx-c-input-padding: 0 var(--dx-g-spacing-4xl) 0 var(--dx-g-spacing-md);
-    --dx-c-input-background: var(--dx-g-brand-current-color-background-2);
-    --dx-c-input-background-active: var(
-        --dx-g-brand-current-color-background-2
-    );
-    --dx-c-input-height: 100% !important;
-    --dx-c-input-width: 100%;
-}
-
-.mobile_search-input.state-open {
-    opacity: 1;
-    pointer-events: auto;
-}

package/src/modules/dx/headerSearch/headerSearch.html

@@ -1,59 +0,0 @@
-<template>
-    <div class={className} role="search" aria-label="Records Search">
-        <!-- MOBILE -->
-        <template if:true={mobile}>
-            <dx-dropdown
-                class="mobile_search-dropdown"
-                open={isDropdownOpen}
-                options={suggestions}
-                onrequestclose={onDropdownRequestClose}
-                full-width
-                page-padding="0"
-            >
-                <dx-input
-                    class={mobileSearchInputClassName}
-                    icon-size="large"
-                    icon-symbol="search"
-                    onchange={onInputChange}
-                    onclear={onInputEscape}
-                    onsubmit={onInputSubmit}
-                    onfocus={openDropdown}
-                    placeholder="Search"
-                    size="override"
-                    type="search"
-                ></dx-input>
-            </dx-dropdown>
-            <dx-button
-                class="mobile_search-button"
-                aria-label={mobileSearchButtonAriaLabel}
-                icon-size="large"
-                icon-symbol={mobileSearchButtonIcon}
-                onclick={onMobileSearchButtonClick}
-                variant="tertiary"
-            ></dx-button>
-        </template>
-
-        <!-- DESKTOP -->
-        <template if:false={mobile}>
-            <dx-dropdown
-                options={suggestions}
-                open={isDropdownOpen}
-                onrequestclose={onDropdownRequestClose}
-                offset="small"
-                full-width
-            >
-                <dx-input
-                    icon-symbol="search"
-                    onchange={onInputChange}
-                    onclear={onInputEscape}
-                    onsubmit={onInputSubmit}
-                    onfocus={openDropdown}
-                    placeholder="Search"
-                    shortcut-key="k"
-                    size="small"
-                    type="search"
-                ></dx-input>
-            </dx-dropdown>
-        </template>
-    </div>
-</template>

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -1,159 +0,0 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import { PopoverRequestCloseType, OptionWithLink } from "typings/custom";
-import { buildSearchEngine } from "dxUtils/coveo";
-import {
-    StandaloneSearchBox as StandaloneSearchBoxType,
-    StandaloneSearchBoxState,
-    buildStandaloneSearchBox,
-    StandaloneSearchBoxOptions
-} from "@coveo/headless";
-
-const baseSearchHref = `/search`;
-
-export default class HeaderSearch extends LightningElement {
-    @api mobile!: boolean;
-    @api coveoOrganizationId!: string;
-    @api coveoPublicAccessToken!: string;
-    @api coveoSearchPipeline!: string;
-    @api coveoSearchHub!: string;
-
-    private input: HTMLElement | null = null;
-    private isDropdownOpen: boolean = false;
-    private isMobileSearchOpen: boolean = false;
-    private searchBox: StandaloneSearchBoxType | null = null;
-    private searchState: StandaloneSearchBoxState | null = null;
-
-    private get className() {
-        return this.mobile ? null : "desktop_search-container";
-    }
-
-    private get suggestions(): OptionWithLink[] {
-        if (this.searchState) {
-            return this.searchState.suggestions.map(
-                ({ highlightedValue }: { highlightedValue: string }) => ({
-                    id: highlightedValue,
-                    label: highlightedValue,
-                    link: {
-                        href: this.createSearchHref(highlightedValue),
-                        target: null
-                    }
-                })
-            );
-        }
-        return [];
-    }
-
-    private get mobileSearchInputClassName() {
-        return cx(
-            "mobile_search-input",
-            this.isMobileSearchOpen && "state-open"
-        );
-    }
-
-    private get mobileSearchButtonIcon() {
-        return this.isMobileSearchOpen ? "close" : "search";
-    }
-
-    private get mobileSearchButtonAriaLabel() {
-        return this.isMobileSearchOpen
-            ? "Hide mobile search"
-            : "Show mobile search";
-    }
-
-    connectedCallback() {
-        this.instantiateSearchbox();
-    }
-
-    private onDropdownRequestClose(e: CustomEvent) {
-        switch (e.detail as PopoverRequestCloseType) {
-            case "interact-outside":
-            case "keypress-escape":
-                this.closeDropdown();
-                break;
-            default:
-                break;
-        }
-    }
-
-    private instantiateSearchbox() {
-        try {
-            const options: StandaloneSearchBoxOptions = {
-                numberOfSuggestions: 3,
-                redirectionUrl: "https://developer.salesforce.com"
-            };
-
-            const engine = buildSearchEngine({
-                organizationId: this.coveoOrganizationId,
-                publicAccessToken: this.coveoPublicAccessToken,
-                searchPipeline: this.coveoSearchPipeline,
-                searchHub: this.coveoSearchHub
-            });
-
-            this.searchBox = buildStandaloneSearchBox(engine, { options });
-
-            this.searchBox?.subscribe(() => {
-                if (this.searchBox) {
-                    this.searchState = this.searchBox.state;
-                }
-            });
-        } catch (e) {
-            console.error(`Coveo searchbox failed to initialize (${e})`);
-        }
-    }
-
-    private createSearchHref = (value: string | null = "") => {
-        return `${baseSearchHref}#q=${value}`;
-    };
-
-    private onInputChange(e: CustomEvent) {
-        if (this.searchBox) {
-            this.searchBox.updateText(e.detail);
-        }
-    }
-
-    private onInputSubmit(e: CustomEvent) {
-        const href = this.createSearchHref(e.detail || "");
-        window.location.assign(href);
-    }
-
-    private onMobileSearchButtonClick() {
-        this.isMobileSearchOpen = !this.isMobileSearchOpen;
-        const input = this.template.querySelector("dx-input");
-        if (this.isMobileSearchOpen && input) {
-            input.focus();
-            this.openDropdown();
-        } else {
-            this.closeDropdown();
-        }
-        if (!this.isMobileSearchOpen && this.searchBox) {
-            this.searchBox.updateText("");
-        }
-    }
-
-    private openDropdown() {
-        this.isDropdownOpen = true;
-        this.isMobileSearchOpen = true;
-        this.reportState<boolean>(true);
-    }
-
-    private closeDropdown() {
-        this.isDropdownOpen = false;
-        this.isMobileSearchOpen = false;
-        this.reportState<boolean>(false);
-    }
-
-    private onInputEscape() {
-        this.closeDropdown();
-    }
-
-    private reportState<T>(state: T) {
-        this.dispatchEvent(
-            new CustomEvent("statechange", {
-                detail: state,
-                bubbles: true,
-                composed: true
-            })
-        );
-    }
-}