@coveo/atomic 3.33.8-pre.bcd9d55cdd → 3.33.8-pre.c1b9c82ffa

package/dist/atomic/components/components/commerce/atomic-commerce-interface/atomic-commerce-interface.js

@@ -9,6 +9,7 @@ import { provide } from '@lit/context';
 import i18next from 'i18next';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { MobileBreakpointController } from "../../common/layout/mobile-breakpoint-controller";
 import { booleanConverter } from "../../../converters/boolean-converter";
 import { errorGuard } from "../../../decorators/error-guard";
 import { watch } from "../../../decorators/watch";
@@ -57,7 +58,7 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
          */
         this.reflectStateInUrl = true;
         /**
-         * Disable state reflection in the URL parameters.
+         * Whether to disable state reflection in the URL parameters.
          */
         this.disableStateReflectionInUrl = false;
         /**
@@ -85,6 +86,7 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             this.urlManager.synchronize(this.fragment);
         };
         this.store = createCommerceStore(this.type);
+        new MobileBreakpointController(this, this.store);
         const { promise, resolve } = Promise.withResolvers();
         this.i18Initialized = promise;
         this.i18n = i18next.createInstance(undefined, resolve);
@@ -92,7 +94,6 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
     connectedCallback() {
         super.connectedCallback();
         this.store.setLoadingFlag(FirstRequestExecutedFlag);
-        this.updateMobileBreakpoint();
         this.addEventListener('atomic/initializeComponent', this.handleInitialization);
         this.addEventListener('atomic/scrollToTop', this.scrollToTop);
     }
@@ -285,12 +286,6 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
         history.pushState(null, document.title, `#${newFragment}`);
         this.bindings.engine.logger.info(`History pushState #${newFragment}`);
     }
-    updateMobileBreakpoint() {
-        const breakpoint = this.querySelector('atomic-commerce-layout')?.mobileBreakpoint;
-        if (breakpoint) {
-            this.store.state.mobileBreakpoint = breakpoint;
-        }
-    }
 };
 AtomicCommerceInterface.styles = [
     css`:host{display:block;height:inherit;width:inherit;&>slot{height:inherit}}`,

package/dist/atomic/components/components/commerce/atomic-commerce-layout/atomic-commerce-layout.js

@@ -4,11 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, unsafeCSS } from 'lit';
+import { LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { LayoutStylesController } from "../../common/layout/layout-styles-controller";
+import { watch } from "../../../decorators/watch";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
 import { LightDomMixin } from "../../../mixins/light-dom";
-import { randomID } from "../../../utils/utils";
 import { DEFAULT_MOBILE_BREAKPOINT } from '../../../utils/replace-breakpoint-utils';
 import styles from './atomic-commerce-layout.tw.css';
 import { buildCommerceLayout } from './commerce-layout';
@@ -18,8 +19,6 @@ import { buildCommerceLayout } from './commerce-layout';
  * @cssprop --atomic-layout-max-search-box-input-width: The maximum width that the search box input will take.
  * @cssprop --atomic-layout-max-search-box-double-suggestions-width: The maximum width that the search box suggestions will take when displaying a double list.
  * @cssprop --atomic-layout-search-box-left-suggestions-width: The width of the left list when displaying a double list.
- *
- * @slot default - The default slot for the layout content.
  */
 let AtomicCommerceLayout = class AtomicCommerceLayout extends LightDomMixin(ChildrenUpdateCompleteMixin(LitElement)) {
     constructor() {
@@ -29,15 +28,22 @@ let AtomicCommerceLayout = class AtomicCommerceLayout extends LightDomMixin(Chil
          * E.g., 800px, 65rem.
          */
         this.mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;
-    }
-    async addStyles() {
-        await this.getUpdateComplete();
-        this.injectStyles(unsafeCSS(buildCommerceLayout(this, this.mobileBreakpoint)));
+        this.layoutStylesController = new LayoutStylesController(this, buildCommerceLayout, 'atomic-commerce-layout-');
     }
     connectedCallback() {
         super.connectedCallback();
-        this.id = randomID('atomic-commerce-layout-');
-        this.addStyles();
+        this.emitBreakpointChangeEvent();
+    }
+    emitBreakpointChangeEvent() {
+        this.dispatchEvent(new CustomEvent('atomic-layout-breakpoint-change', {
+            detail: { breakpoint: this.mobileBreakpoint },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    onMobileBreakpointChange() {
+        this.layoutStylesController.updateStyles();
+        this.emitBreakpointChangeEvent();
     }
 };
 AtomicCommerceLayout.styles = [styles];
@@ -47,6 +53,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true, attribute: 'mobile-breakpoint' })
 ], AtomicCommerceLayout.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    watch('mobileBreakpoint')
+], AtomicCommerceLayout.prototype, "onMobileBreakpointChange", null);
 AtomicCommerceLayout = __decorate([
     customElement('atomic-commerce-layout')
 ], AtomicCommerceLayout);

package/dist/atomic/components/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.js

@@ -20,6 +20,7 @@ import { AriaLiveRegionController } from "../../../utils/accessibility-utils";
 import { hasKeyboard, isMacOS } from "../../../utils/device-utils";
 import { SafeStorage, StorageItems, } from "../../../utils/local-storage-utils";
 import { updateBreakpoints } from "../../../utils/replace-breakpoint-utils";
+import { getDefaultSlotFromHost } from "../../../utils/slot-utils";
 import { isFocusingOut, once, randomID, spreadProperties, } from '../../../utils/utils';
 import { renderSearchBoxWrapper } from '../../common/search-box/search-box-wrapper';
 import { renderSearchBoxTextArea } from '../../common/search-box/search-text-area';
@@ -123,9 +124,6 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        if (this.children.length === 0) {
-            this.replaceChildren(document.createElement('atomic-commerce-search-box-recent-queries'), document.createElement('atomic-commerce-search-box-query-suggestions'));
-        }
         this.addEventListener('atomic/searchBoxSuggestion/register', (event) => {
             const customEvent = event;
             this.searchBoxSuggestionEventsQueue.push(customEvent);
@@ -492,6 +490,14 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
       ></atomic-suggestion-renderer>
     `;
     }
+    renderSlotContent() {
+        const hasDefaultSlot = !!getDefaultSlotFromHost(this);
+        if (hasDefaultSlot) {
+            return html `<slot></slot>`;
+        }
+        return html `<atomic-commerce-search-box-recent-queries></atomic-commerce-search-box-recent-queries>
+      <atomic-commerce-search-box-query-suggestions></atomic-commerce-search-box-query-suggestions>`;
+    }
     render() {
         this.updateBreakpoints();
         if (!this.suggestionManager.suggestions.length) {
@@ -511,7 +517,7 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
                 },
             },
         })(html `${this.renderTextBox()}
-        ${renderSubmitButton({
+      ${renderSubmitButton({
             props: {
                 i18n: this.bindings.i18n,
                 disabled: this.isSearchDisabledForEndUser,
@@ -521,7 +527,8 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
                 },
             },
         })}
-        ${this.renderSuggestions()}`)}
+      ${this.renderSuggestions()}`)}
+      ${this.renderSlotContent()}
     `;
     }
 };

package/dist/atomic/components/components/common/atomic-modal/atomic-modal.js

@@ -9,6 +9,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
 import { booleanConverter } from "../../../converters/boolean-converter.js";
+import { bindings } from "../../../decorators/bindings.js";
 import { errorGuard } from "../../../decorators/error-guard";
 import { watch } from "../../../decorators/watch.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
@@ -296,6 +297,7 @@ __decorate([
 ], AtomicModal.prototype, "watchToggleOpen", null);
 AtomicModal = __decorate([
     customElement('atomic-modal'),
+    bindings(),
     withTailwindStyles
 ], AtomicModal);
 export { AtomicModal };

package/dist/atomic/components/components/common/layout/layout-styles-controller.js

@@ -0,0 +1,40 @@
+import { randomID } from "../../../utils/utils";
+/**
+ * A reactive controller that manages dynamic layout styles.
+ */
+export class LayoutStylesController {
+    constructor(host, stylesBuilder, componentPrefix) {
+        this.dynamicStyleSheet = null;
+        this.host = host;
+        this.stylesBuilder = stylesBuilder;
+        this.componentPrefix = componentPrefix;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        if (!this.host.id) {
+            this.host.id = randomID(this.componentPrefix);
+        }
+        this.host.updateComplete.then(() => this.updateStyles());
+    }
+    /**
+     * Updates the dynamic styles based on the current mobile breakpoint
+     */
+    updateStyles() {
+        const parent = this.host.getRootNode();
+        const isDocumentOrShadowRoot = parent instanceof Document || parent instanceof ShadowRoot;
+        if (!isDocumentOrShadowRoot) {
+            return;
+        }
+        const newStylesCSS = this.stylesBuilder(this.host, this.host.mobileBreakpoint);
+        if (!this.dynamicStyleSheet) {
+            this.dynamicStyleSheet = new CSSStyleSheet();
+            this.dynamicStyleSheet.replaceSync(newStylesCSS);
+            parent.adoptedStyleSheets = [
+                ...parent.adoptedStyleSheets,
+                this.dynamicStyleSheet,
+            ];
+            return;
+        }
+        this.dynamicStyleSheet.replaceSync(newStylesCSS);
+    }
+}

package/dist/atomic/components/components/common/layout/mobile-breakpoint-controller.js

@@ -0,0 +1,26 @@
+/**
+ * A reactive controller that manages mobile breakpoint changes through event communication.
+ * This controller listens for 'atomic-layout-breakpoint-change' events and updates a store
+ * with the new breakpoint value.
+ */
+export class MobileBreakpointController {
+    constructor(host, store) {
+        this.host = host;
+        this.store = store;
+        this.eventListener = this.handleBreakpointChange.bind(this);
+        this.host.addController(this);
+    }
+    hostConnected() {
+        this.host.addEventListener('atomic-layout-breakpoint-change', this.eventListener);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('atomic-layout-breakpoint-change', this.eventListener);
+    }
+    handleBreakpointChange(e) {
+        const customEvent = e;
+        const newBreakpoint = customEvent.detail?.breakpoint;
+        if (newBreakpoint && this.store.state.mobileBreakpoint !== newBreakpoint) {
+            this.store.state.mobileBreakpoint = newBreakpoint;
+        }
+    }
+}

package/dist/atomic/components/components/search/atomic-relevance-inspector/atomic-relevance-inspector.js

@@ -0,0 +1,93 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { getOrganizationEndpoint } from '@coveo/headless';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { renderButton } from "../../common/button";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import "../../common/atomic-modal/atomic-modal";
+import { booleanConverter } from "../../../converters/boolean-converter";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+/**
+ * The `atomic-relevance-inspector` component is used internally to offer insight on search page relevance, as well as information to help troubleshoot issues during development.
+ *
+ * @internal
+ */
+let AtomicRelevanceInspector = class AtomicRelevanceInspector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.initialize = () => { };
+        this.open = false;
+    }
+    closeRelevanceInspector() {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('atomic/relevanceInspector/close', {
+            bubbles: true,
+            composed: true,
+            detail: null,
+        }));
+    }
+    get adminHref() {
+        const { organizationId, environment } = this.bindings.engine.state.configuration;
+        const admin = getOrganizationEndpoint(organizationId, environment, 'admin');
+        const { searchResponseId } = this.bindings.engine.state.search;
+        return `${admin}/admin/#/${organizationId}/search/relevanceInspector/${searchResponseId}`;
+    }
+    render() {
+        return html `
+      <atomic-modal
+        .isOpen=${this.open}
+        @close=${() => this.closeRelevanceInspector()}
+        exportparts="footer"
+      >
+        <p slot="header">Open the relevance inspector</p>
+        <p slot="body">
+          The Relevance Inspector will open in the Coveo Administration Console.
+        </p>
+        <div slot="footer" class="flex w-full items-center justify-end">
+          ${renderButton({
+            props: {
+                style: 'outline-primary',
+                class: 'mr-2 p-2',
+                onClick: () => this.closeRelevanceInspector(),
+                text: 'Ignore',
+            },
+        })(nothing)}
+          ${renderButton({
+            props: {
+                style: 'primary',
+                class: 'p-2',
+                onClick: () => {
+                    window.open(this.adminHref, '_blank');
+                    this.closeRelevanceInspector();
+                },
+                text: 'Open',
+            },
+        })(nothing)}
+        </div>
+      </atomic-modal>
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], AtomicRelevanceInspector.prototype, "bindings", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, converter: booleanConverter })
+], AtomicRelevanceInspector.prototype, "open", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicRelevanceInspector.prototype, "render", null);
+AtomicRelevanceInspector = __decorate([
+    customElement('atomic-relevance-inspector'),
+    bindings(),
+    withTailwindStyles
+], AtomicRelevanceInspector);
+export { AtomicRelevanceInspector };

package/dist/atomic/components/components/search/atomic-search-interface/analytics-config.js

@@ -0,0 +1,57 @@
+import { augmentAnalyticsConfigWithAtomicVersion, augmentAnalyticsConfigWithDocument, augmentAnalyticsWithAtomicVersion, augmentWithExternalMiddleware, getNextAnalyticsConfig, } from '../../common/interface/analytics-config';
+export function getAnalyticsConfig(searchEngineConfig, enabled, store) {
+    switch (searchEngineConfig.analytics?.analyticsMode) {
+        case 'next':
+            return getNextAnalyticsConfig(searchEngineConfig, enabled);
+        default:
+            return getLegacyAnalyticsConfig(searchEngineConfig, enabled, store);
+    }
+}
+function getLegacyAnalyticsConfig(searchEngineConfig, enabled, store) {
+    const analyticsClientMiddleware = (event, payload) => augmentAnalytics(event, payload, store, searchEngineConfig);
+    const defaultConfiguration = {
+        analyticsClientMiddleware,
+        enabled,
+        ...augmentAnalyticsConfigWithDocument(),
+    };
+    const immutableConfiguration = {
+        ...augmentAnalyticsConfigWithAtomicVersion(),
+    };
+    if (searchEngineConfig.analytics) {
+        return {
+            ...defaultConfiguration,
+            ...searchEngineConfig.analytics,
+            analyticsClientMiddleware,
+            ...immutableConfiguration,
+        };
+    }
+    return {
+        ...defaultConfiguration,
+        ...immutableConfiguration,
+    };
+}
+function augmentAnalytics(event, payload, store, config) {
+    let result = augmentWithExternalMiddleware(event, payload, config);
+    result = augmentAnalyticsWithAtomicVersion(result);
+    result = augmentAnalyticsWithFacetTitles(result, store);
+    return result;
+}
+function augmentAnalyticsWithFacetTitles(payload, store) {
+    const allFacets = store.getAllFacets();
+    const getAtomicFacetLabelOrOriginalTitle = (facetId, originalTitle) => (allFacets[facetId] ? allFacets[facetId].label() : originalTitle);
+    if (payload.facetState) {
+        payload.facetState = payload.facetState.map((analyticsFacetState) => {
+            const { id, title: originalTitle } = analyticsFacetState;
+            return {
+                ...analyticsFacetState,
+                title: getAtomicFacetLabelOrOriginalTitle(id, originalTitle),
+            };
+        });
+    }
+    if (payload.customData?.facetTitle &&
+        payload.customData.facetId &&
+        payload.customData.facetTitle) {
+        payload.customData.facetTitle = getAtomicFacetLabelOrOriginalTitle(payload.customData.facetId, payload.customData.facetTitle);
+    }
+    return payload;
+}