@coveo/atomic 3.31.2-pre.da74c43571 → 3.31.2-pre.dbdab38fe6

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

@@ -9,15 +9,13 @@ import { provide } from '@lit/context';
 import i18next from 'i18next';
 import { html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { booleanConverter } from "../../../converters/boolean-converter";
-import { errorGuard } from "../../../decorators/error-guard";
 import { watch } from "../../../decorators/watch";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { markParentAsReady } from "../../../utils/init-queue";
 import { SafeStorage, StorageItems, } from "../../../utils/local-storage-utils";
 import { ChildrenUpdateCompleteMixin } from '../../../mixins/children-update-complete-mixin';
 import { augmentAnalyticsConfigWithAtomicVersion } from '../../common/interface/analytics-config';
-import { InterfaceController, } from '../../common/interface/interface-controller';
+import { CommonAtomicInterfaceHelper, } from '../../common/interface/interface-common';
 import { bindingsContext } from '../../context/bindings-context';
 import { createCommerceStore, } from '../atomic-commerce-interface/store';
 import { errorSelector, firstSearchExecutedSelector, noProductsSelector, } from '../atomic-commerce-layout/commerce-layout';
@@ -37,7 +35,6 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
     constructor() {
         super();
         this.initialized = false;
-        this.interfaceController = new InterfaceController(this, 'CoveoAtomic');
         /**
          * The type of the interface.
          * - 'search': Indicates that the interface is used for Search.
@@ -71,12 +68,13 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
          */
         this.iconAssetsPath = './assets';
         this.handleInitialization = (event) => {
-            this.interfaceController.onComponentInitializing(event);
+            this.commonInterfaceHelper.onComponentInitializing(event);
         };
         this.bindings = {};
         this.onHashChange = () => {
             this.urlManager.synchronize(this.fragment);
         };
+        this.commonInterfaceHelper = new CommonAtomicInterfaceHelper(this, 'CoveoAtomic');
         this.store = createCommerceStore(this.type);
         const { promise, resolve } = Promise.withResolvers();
         this.i18Initialized = promise;
@@ -90,16 +88,16 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
         this.addEventListener('atomic/scrollToTop', this.scrollToTop);
     }
     toggleAnalytics() {
-        this.interfaceController.onAnalyticsChange();
+        this.commonInterfaceHelper.onAnalyticsChange();
     }
     updateLanguage() {
-        if (!this.interfaceController.engineIsCreated(this.engine) ||
+        if (!this.commonInterfaceHelper.engineIsCreated(this.engine) ||
             !this.language ||
             !this.context) {
             return;
         }
         this.context.setLanguage(this.language);
-        return this.interfaceController.onLanguageChange();
+        return this.commonInterfaceHelper.onLanguageChange();
     }
     updateIconAssetsPath() {
         this.store.state.iconAssetsPath = this.iconAssetsPath;
@@ -117,6 +115,10 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
         window.removeEventListener('hashchange', this.onHashChange);
         this.removeEventListener('atomic/initializeComponent', this.handleInitialization);
         this.removeEventListener('atomic/scrollToTop', this.scrollToTop);
+        const ariaLive = this.querySelector('atomic-aria-live');
+        if (ariaLive) {
+            ariaLive.remove();
+        }
     }
     updateMobileBreakpoint() {
         const breakpoint = this.querySelector('atomic-commerce-layout')?.mobileBreakpoint;
@@ -156,7 +158,7 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
      * Executes the first request after initializing connection to the headless commerce engine.
      */
     async executeFirstRequest() {
-        if (!this.interfaceController.engineIsCreated(this.engine)) {
+        if (!this.commonInterfaceHelper.engineIsCreated(this.engine)) {
             return;
         }
         if (!this.initialized) {
@@ -181,9 +183,10 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
     }
     async internalInitialization(initEngine) {
         await Promise.all([
-            this.interfaceController.onInitialization(initEngine),
+            this.commonInterfaceHelper.onInitialization(initEngine),
             this.i18Initialized,
         ]);
+        this.initAriaLive();
         this.initContext();
         this.updateLanguage();
         this.bindings = this.getBindings();
@@ -224,6 +227,13 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
     get fragment() {
         return window.location.hash.slice(1);
     }
+    initAriaLive() {
+        if (Array.from(this.children).some((element) => element.tagName === 'ATOMIC-ARIA-LIVE')) {
+            return;
+        }
+        const ariaLive = document.createElement('atomic-aria-live');
+        this.prepend(ariaLive);
+    }
     initUrlManager() {
         if (!this.reflectStateInUrl) {
             return;
@@ -287,7 +297,9 @@ __decorate([
 __decorate([
     property({
         type: Boolean,
-        converter: booleanConverter,
+        converter: {
+            fromAttribute: (value) => value !== 'false',
+        },
         reflect: true,
     })
 ], AtomicCommerceInterface.prototype, "analytics", void 0);
@@ -308,7 +320,9 @@ __decorate([
         type: Boolean,
         attribute: 'reflect-state-in-url',
         reflect: true,
-        converter: booleanConverter,
+        converter: {
+            fromAttribute: (value) => value !== 'false',
+        },
     })
 ], AtomicCommerceInterface.prototype, "reflectStateInUrl", void 0);
 __decorate([
@@ -333,9 +347,6 @@ __decorate([
     state(),
     provide({ context: bindingsContext })
 ], AtomicCommerceInterface.prototype, "bindings", void 0);
-__decorate([
-    errorGuard()
-], AtomicCommerceInterface.prototype, "render", null);
 AtomicCommerceInterface = __decorate([
     customElement('atomic-commerce-interface'),
     withTailwindStyles

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

@@ -9,14 +9,12 @@ import { provide } from '@lit/context';
 import i18next from 'i18next';
 import { html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { booleanConverter } from "../../../converters/boolean-converter.js";
-import { errorGuard } from "../../../decorators/error-guard.js";
 import { watch } from "../../../decorators/watch";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin.js";
 import { markParentAsReady } from "../../../utils/init-queue";
 import { augmentAnalyticsConfigWithAtomicVersion } from '../../common/interface/analytics-config.js';
-import { InterfaceController, } from '../../common/interface/interface-controller.js';
+import { CommonAtomicInterfaceHelper, } from '../../common/interface/interface-common.js';
 import { bindingsContext } from '../../context/bindings-context.js';
 import styles from './atomic-commerce-recommendation-interface.tw.css';
 import { createCommerceRecommendationStore, } from './store.js';
@@ -30,7 +28,6 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
     constructor() {
         super();
         this.bindings = {};
-        this.interfaceController = new InterfaceController(this, 'CoveoAtomic');
         /**
          * The CSS selector for the container the interface will scroll back to.
          */
@@ -54,8 +51,9 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
          */
         this.analytics = true;
         this.handleInitialization = (event) => {
-            this.interfaceController.onComponentInitializing(event);
+            this.commonInterfaceHelper.onComponentInitializing(event);
         };
+        this.commonInterfaceHelper = new CommonAtomicInterfaceHelper(this, 'CoveoAtomic');
         this.store = createCommerceRecommendationStore();
         const { promise, resolve } = Promise.withResolvers();
         this.i18Initialized = promise;
@@ -98,11 +96,11 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
      * ```
      */
     updateLocale(language, country, currency) {
-        if (!this.interfaceController.engineIsCreated(this.engine) ||
+        if (!this.commonInterfaceHelper.engineIsCreated(this.engine) ||
             !this.context) {
             return;
         }
-        language && this.interfaceController.onLanguageChange(language);
+        language && this.commonInterfaceHelper.onLanguageChange(language);
         const { setContext } = loadContextActions(this.engine);
         this.engine.dispatch(setContext({
             ...this.context.state,
@@ -112,25 +110,29 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
         }));
     }
     toggleAnalytics() {
-        this.interfaceController.onAnalyticsChange();
+        this.commonInterfaceHelper.onAnalyticsChange();
     }
     updateIconAssetsPath() {
         this.store.state.iconAssetsPath = this.iconAssetsPath;
     }
     async updateLanguage() {
-        if (!this.interfaceController.engineIsCreated(this.engine) ||
+        if (!this.commonInterfaceHelper.engineIsCreated(this.engine) ||
             !this.language ||
             !this.context) {
             return;
         }
         this.engine.logger.warn('The `language` property will be removed in the next major version of Atomic (v4). Rather than using this property, set the initial language through the engine configuration when calling `initializeWithEngine`, and update the language as needed using the `updateLocale` method.');
         this.context.setLanguage(this.language);
-        return this.interfaceController.onLanguageChange();
+        return this.commonInterfaceHelper.onLanguageChange();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('atomic/initializeComponent', this.handleInitialization);
         this.removeEventListener('atomic/scrollToTop', this.scrollToTop);
+        const ariaLive = this.querySelector('atomic-aria-live');
+        if (ariaLive) {
+            ariaLive.remove();
+        }
     }
     render() {
         return html `<slot></slot>`;
@@ -145,15 +147,23 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
     }
     async internalInitialization(initEngine) {
         await Promise.all([
-            this.interfaceController.onInitialization(initEngine),
+            this.commonInterfaceHelper.onInitialization(initEngine),
             this.i18Initialized,
         ]);
+        this.initAriaLive();
         this.initContext();
         this.language && this.updateLanguage();
         this.bindings = this.getBindings();
         markParentAsReady(this);
         this.initLanguage();
     }
+    initAriaLive() {
+        if (Array.from(this.children).some((element) => element.tagName === 'ATOMIC-ARIA-LIVE')) {
+            return;
+        }
+        const ariaLive = document.createElement('atomic-aria-live');
+        this.prepend(ariaLive);
+    }
     initContext() {
         this.context = buildContext(this.engine);
     }
@@ -163,11 +173,21 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
             i18n: this.i18n,
             store: this.store,
             interfaceElement: this,
+            addAdoptedStyleSheets: (stylesheet) => {
+                const parent = this.getRootNode();
+                const styleSheet = stylesheet;
+                const isDocumentOrShadowRoot = parent instanceof Document || parent instanceof ShadowRoot;
+                if (styleSheet &&
+                    isDocumentOrShadowRoot &&
+                    !parent.adoptedStyleSheets.includes(styleSheet)) {
+                    parent.adoptedStyleSheets.push(styleSheet);
+                }
+            },
         };
     }
     initLanguage() {
         if (!this.language) {
-            this.interfaceController.onLanguageChange(this.context.state.language);
+            this.commonInterfaceHelper.onLanguageChange(this.context.state.language);
         }
     }
 };
@@ -200,7 +220,9 @@ __decorate([
 __decorate([
     property({
         type: Boolean,
-        converter: booleanConverter,
+        converter: {
+            fromAttribute: (value) => value !== 'false',
+        },
         reflect: true,
     })
 ], AtomicCommerceRecommendationInterface.prototype, "analytics", void 0);
@@ -213,9 +235,6 @@ __decorate([
 __decorate([
     watch('language')
 ], AtomicCommerceRecommendationInterface.prototype, "updateLanguage", null);
-__decorate([
-    errorGuard()
-], AtomicCommerceRecommendationInterface.prototype, "render", null);
 AtomicCommerceRecommendationInterface = __decorate([
     customElement('atomic-commerce-recommendation-interface'),
     withTailwindStyles

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

@@ -27,9 +27,6 @@ import { renderSubmitButton } from '../../common/search-box/submit-button';
 import { SuggestionManager } from '../../common/suggestions/suggestion-manager';
 import { elementHasQuery, } from '../../common/suggestions/suggestions-common';
 import styles from './atomic-commerce-search-box.tw.css';
-import '../atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products';
-import '../atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions';
-import '../atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries';
 /**
  * The `atomic-commerce-search-box` component enables users to perform product searches with built-in query suggestions and optional redirection to a search results page.
  *

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

@@ -0,0 +1,95 @@
+import "../atomic-component-error/atomic-component-error.js";
+import Backend from 'i18next-http-backend';
+import { html } from 'lit';
+import { i18nBackendOptions, i18nTranslationNamespace, init18n, } from "./i18n.js";
+import { setCoveoGlobal } from "../../../global/environment.js";
+import { loadDayjsLocale } from "../../../utils/dayjs-locales.js";
+export const mismatchedInterfaceAndEnginePropError = (interfaceKind, configurationName) => `A ${configurationName} is configured on the ${interfaceKind} interface element, but the ${interfaceKind} interface was initialized with an engine. You should only configure the ${configurationName} in the target engine.`;
+export class CommonAtomicInterfaceHelper {
+    constructor(atomicInterface, globalVariableName) {
+        this.atomicInterface = atomicInterface;
+        this.hangingComponentsInitialization = [];
+        setCoveoGlobal(globalVariableName);
+        if ('connectedCallback' in atomicInterface && 'render' in atomicInterface) {
+            const { connectedCallback: originalConnectedCallback, render: originalRender, } = atomicInterface;
+            atomicInterface.connectedCallback = () => {
+                this.i18nPromise = init18n(atomicInterface);
+                if (typeof originalConnectedCallback === 'function') {
+                    return originalConnectedCallback.call(atomicInterface);
+                }
+                return;
+            };
+            atomicInterface.render = () => {
+                if (atomicInterface.error) {
+                    return html `<atomic-component-error
+            .element=${atomicInterface}
+            .error=${atomicInterface.error}
+          ></atomic-component-error>`;
+                }
+                return typeof originalRender === 'function'
+                    ? originalRender.call(atomicInterface)
+                    : null;
+            };
+        }
+        else {
+            this.i18nPromise = init18n(atomicInterface);
+        }
+    }
+    onComponentInitializing(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.atomicInterface.engine) {
+            event.detail(this.atomicInterface.bindings);
+            return;
+        }
+        this.hangingComponentsInitialization.push(event);
+    }
+    async onInitialization(initEngine) {
+        if (this.atomicInterface.engine) {
+            this.atomicInterface.engine.logger.warn(`The ${this.interfaceTagname} component "initialize" has already been called.`, this.atomicInterface);
+            return;
+        }
+        this.atomicInterface.updateIconAssetsPath();
+        initEngine();
+        if (this.atomicInterface.registerFieldsToInclude) {
+            this.atomicInterface.registerFieldsToInclude();
+        }
+        loadDayjsLocale(this.atomicInterface.language || 'en');
+        await this.i18nPromise;
+        this.initComponents();
+    }
+    onAnalyticsChange() {
+        const { engine, analytics } = this.atomicInterface;
+        if (!this.engineIsCreated(engine)) {
+            return;
+        }
+        if (!analytics) {
+            engine.disableAnalytics();
+            return;
+        }
+        engine.enableAnalytics();
+    }
+    onLanguageChange(newLanguage) {
+        const language = newLanguage ?? this.atomicInterface.language;
+        const languageWithFallback = language ?? 'en';
+        const { i18n } = this.atomicInterface;
+        loadDayjsLocale(languageWithFallback);
+        new Backend(i18n.services, i18nBackendOptions(this.atomicInterface)).read(languageWithFallback.split('-')[0], i18nTranslationNamespace, (_, data) => {
+            i18n.addResourceBundle(languageWithFallback.split('-')[0], i18nTranslationNamespace, data, true, false);
+            i18n.changeLanguage(language);
+        });
+    }
+    engineIsCreated(engine) {
+        if (!engine) {
+            console.error(`You have to call "initialize" on the ${this.interfaceTagname} component before modifying the props or calling other public methods.`, this.atomicInterface);
+            return false;
+        }
+        return true;
+    }
+    get interfaceTagname() {
+        return this.atomicInterface.tagName.toLowerCase();
+    }
+    initComponents() {
+        this.hangingComponentsInitialization.forEach((event) => event.detail(this.atomicInterface.bindings));
+    }
+}

package/dist/atomic/components/global/environment.js

@@ -4,7 +4,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment() {
     return {
-        version: "3.31.2-pre.da74c43571",
+        version: "3.31.2-pre.dbdab38fe6",
         headlessVersion: VERSION,
     };
 }