@coveo/atomic 3.28.0-pre.df6c8a3eb3 → 3.28.0-pre.f769419eb8

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

@@ -0,0 +1,235 @@
+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 { 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 { buildContext, loadContextActions, } from '@coveo/headless/commerce';
+import { provide } from '@lit/context';
+import i18next from 'i18next';
+import { html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.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';
+/**
+ * The `atomic-commerce-recommendation-interface` component is meant to be used
+ * as the parent of one or more `atomic-commerce-recommendation-list`
+ * components. It handles the headless search engine and localization
+ * configurations.
+ */
+let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationInterface extends ChildrenUpdateCompleteMixin(LitElement) {
+    constructor() {
+        super();
+        this.bindings = {};
+        /**
+         * The CSS selector for the container the interface will scroll back to.
+         */
+        this.scrollContainer = 'atomic-commerce-recommendation-interface';
+        /**
+         * The language assets path. By default, this will be a relative URL pointing to `./lang`.
+         *
+         * Example: "/mypublicpath/languages"
+         *
+         */
+        this.languageAssetsPath = './lang';
+        /**
+         * The icon assets path. By default, this will be a relative URL pointing to `./assets`.
+         *
+         * Example: "/mypublicpath/icons"
+         *
+         */
+        this.iconAssetsPath = './assets';
+        /**
+         * Whether to enable analytics.
+         */
+        this.analytics = true;
+        this.handleInitialization = (event) => {
+            this.commonInterfaceHelper.onComponentInitializing(event);
+        };
+        this.commonInterfaceHelper = new CommonAtomicInterfaceHelper(this, 'CoveoAtomic');
+        this.store = createCommerceRecommendationStore();
+        const { promise, resolve } = Promise.withResolvers();
+        this.i18Initialized = promise;
+        this.i18n = i18next.createInstance(undefined, resolve);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('atomic/initializeComponent', this.handleInitialization);
+        this.addEventListener('atomic/scrollToTop', this.scrollToTop);
+    }
+    /**
+     * Initializes the connection with an already preconfigured [headless commerce engine](https://docs.coveo.com/en/headless/latest/reference/commerce/).
+     */
+    initializeWithEngine(engine) {
+        return this.internalInitialization(() => (this.engine = engine));
+    }
+    /**
+     * Updates the locale settings for the commerce recommendation interface and
+     * headless commerce engine. Only the provided parameters will be updated.
+     *
+     * Calling this method affects the localization of the interface as well as
+     * the catalog configuration being used by the Commerce API. If the resulting
+     * language-country-currency combination matches no existing catalog
+     * configuration in your Coveo organization, requests made through the
+     * commerce engine will start failing.
+     *
+     * @param language - (Optional) The IETF language code tag (e.g., `en`).
+     * @param country - (Optional) The ISO-3166-1 country tag (e.g., `US`).
+     * @param currency - (Optional) The ISO-4217 currency code (e.g., `USD`).
+     *
+     * @example
+     * ```typescript
+     * recommendationInterface.updateLocale('fr', 'CA', 'CAD');
+     * ```
+     */
+    updateLocale(language, country, currency) {
+        if (!this.commonInterfaceHelper.engineIsCreated(this.engine) ||
+            !this.context) {
+            return;
+        }
+        language && this.commonInterfaceHelper.onLanguageChange(language);
+        const { setContext } = loadContextActions(this.engine);
+        this.engine.dispatch(setContext({
+            ...this.context.state,
+            ...(language && { language }),
+            ...(country && { country }),
+            ...(currency && { currency }),
+        }));
+    }
+    toggleAnalytics() {
+        this.commonInterfaceHelper.onAnalyticsChange();
+    }
+    updateIconAssetsPath() {
+        this.store.state.iconAssetsPath = this.iconAssetsPath;
+    }
+    async updateLanguage() {
+        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.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>`;
+    }
+    scrollToTop() {
+        const scrollContainerElement = document.querySelector(this.scrollContainer);
+        if (!scrollContainerElement) {
+            this.bindings.engine.logger.warn(`Could not find the scroll container with the selector "${this.scrollContainer}". This will prevent UX interactions that require a scroll from working correctly. Please review the CSS selector in the scrollContainer option`);
+            return;
+        }
+        scrollContainerElement.scrollIntoView({ behavior: 'smooth' });
+    }
+    async internalInitialization(initEngine) {
+        await Promise.all([
+            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);
+    }
+    getBindings() {
+        return {
+            engine: this.engine,
+            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.commonInterfaceHelper.onLanguageChange(this.context.state.language);
+        }
+    }
+};
+AtomicCommerceRecommendationInterface.styles = [unsafeCSS(styles)];
+__decorate([
+    state(),
+    provide({ context: bindingsContext })
+], AtomicCommerceRecommendationInterface.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicCommerceRecommendationInterface.prototype, "error", void 0);
+__decorate([
+    property({ type: Object })
+], AtomicCommerceRecommendationInterface.prototype, "i18n", void 0);
+__decorate([
+    property({ type: Object })
+], AtomicCommerceRecommendationInterface.prototype, "engine", void 0);
+__decorate([
+    property({ type: String, attribute: 'scroll-container', reflect: true })
+], AtomicCommerceRecommendationInterface.prototype, "scrollContainer", void 0);
+__decorate([
+    property({ type: String, attribute: 'language-assets-path', reflect: true })
+], AtomicCommerceRecommendationInterface.prototype, "languageAssetsPath", void 0);
+__decorate([
+    property({ type: String, attribute: 'icon-assets-path', reflect: true })
+], AtomicCommerceRecommendationInterface.prototype, "iconAssetsPath", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicCommerceRecommendationInterface.prototype, "language", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        converter: {
+            fromAttribute: (value) => value !== 'false',
+        },
+        reflect: true,
+    })
+], AtomicCommerceRecommendationInterface.prototype, "analytics", void 0);
+__decorate([
+    watch('analytics')
+], AtomicCommerceRecommendationInterface.prototype, "toggleAnalytics", null);
+__decorate([
+    watch('iconAssetsPath')
+], AtomicCommerceRecommendationInterface.prototype, "updateIconAssetsPath", null);
+__decorate([
+    watch('language')
+], AtomicCommerceRecommendationInterface.prototype, "updateLanguage", null);
+AtomicCommerceRecommendationInterface = __decorate([
+    customElement('atomic-commerce-recommendation-interface'),
+    withTailwindStyles
+], AtomicCommerceRecommendationInterface);
+export { AtomicCommerceRecommendationInterface };

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

@@ -0,0 +1,2 @@
+const css = `:host{height:inherit;width:inherit;display:block;&>slot{height:inherit}}`;
+export default [css];

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

@@ -476,7 +476,6 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
                 return;
             }
             this.isExpanded = false;
-            this.triggerTextAreaChange(item.query ?? '');
         }}
         .onMouseOver=${() => {
             this.suggestionManager.onSuggestionMouseOver(item, side, id);

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

@@ -0,0 +1,54 @@
+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 { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+/**
+ * @alpha
+ * The `atomic-commerce-text` component leverages the I18n translation module through the atomic-commerce-interface.
+ */
+let AtomicCommerceText = class AtomicCommerceText extends InitializeBindingsMixin(LitElement) {
+    get strings() {
+        return {
+            value: () => this.bindings.i18n.t(this.value, {
+                count: this.count,
+            }),
+        };
+    }
+    initialize() {
+        if (!this.value) {
+            this.error = new Error('The "value" attribute must be defined.');
+        }
+    }
+    render() {
+        return html `${this.strings.value()}`;
+    }
+};
+__decorate([
+    state()
+], AtomicCommerceText.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicCommerceText.prototype, "error", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicCommerceText.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], AtomicCommerceText.prototype, "count", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicCommerceText.prototype, "render", null);
+AtomicCommerceText = __decorate([
+    customElement('atomic-commerce-text'),
+    bindings()
+], AtomicCommerceText);
+export { AtomicCommerceText };

package/dist/atomic/components/components/commerce/atomic-product-template/atomic-product-template.js

@@ -10,9 +10,10 @@ import { html, LitElement, nothing } from 'lit';
 import { property, customElement, state } from 'lit/decorators.js';
 import { makeMatchConditions } from '../../common/product-template/product-template-common';
 import { ProductTemplateController } from '../../common/product-template/product-template-controller';
+import '../atomic-commerce-text/atomic-commerce-text';
+import '../atomic-product-text/atomic-product-text';
 import '../atomic-product/atomic-product';
 /**
- * @alpha
  * * A product template determines the format of the query results, depending on the conditions that are defined for each template.
  *
  * A `template` element must be the child of an `atomic-product-template`. Furthermore, an `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-commerce-search-box-instant-products` must be the parent of each `atomic-product-template`.
@@ -22,6 +23,8 @@ import '../atomic-product/atomic-product';
  * @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that must not be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
  * @slot default - The default slot where to insert the template element.
  * @slot link - A `template` element that contains a single `atomic-product-link` component.
+ *
+ * @alpha
  */
 let AtomicProductTemplate = class AtomicProductTemplate extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-product-text/atomic-product-text.js

@@ -0,0 +1,135 @@
+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 { booleanConverter } from "../../../converters/boolean-converter";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
+import { errorGuard } from "../../../decorators/error-guard";
+import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
+import { ProductTemplatesHelpers, HighlightUtils, } from '@coveo/headless/commerce';
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { getFieldValueCaption } from '../../../utils/field-utils';
+import { renderItemTextFallback } from '../../common/item-text/item-text-fallback.js';
+import { renderItemTextHighlighted } from '../../common/item-text/item-text-highlighted.js';
+import '../atomic-commerce-text/atomic-commerce-text';
+import { getStringValueFromProductOrNull } from '../product-template-component-utils/product-utils.js';
+/**
+ * The `atomic-product-text` component renders the value of a string field for a given product.
+ */
+let AtomicProductText = class AtomicProductText extends InitializeBindingsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether to highlight the string field value.
+         *
+         * Only works if the `field` property is set to `excerpt` or `ec_name`.
+         */
+        this.shouldHighlight = true;
+        this.productController = createProductContextController(this);
+    }
+    initialize() {
+        if (!this.product && this.productController.item) {
+            this.product = this.productController.item;
+        }
+    }
+    get shouldRenderHighlights() {
+        return this.shouldHighlight && this.isFieldSupportedForHighlighting();
+    }
+    isFieldSupportedForHighlighting() {
+        return ['ec_name', 'excerpt'].includes(this.field);
+    }
+    get highlightKeywords() {
+        if (!this.shouldRenderHighlights) {
+            return null;
+        }
+        return ProductTemplatesHelpers.getProductProperty(this.product, this.field === 'ec_name' ? 'nameHighlights' : 'excerptHighlights');
+    }
+    renderFallback() {
+        if (!this.default) {
+            return nothing;
+        }
+        return renderItemTextFallback({
+            props: {
+                field: this.field,
+                host: this,
+                logger: this.bindings.engine.logger,
+                defaultValue: this.default,
+                item: this.product,
+                getProperty: (result, property) => ProductTemplatesHelpers.getProductProperty(result, property),
+            },
+        })(html `
+      <atomic-commerce-text
+        .value=${getFieldValueCaption(this.field, this.default, this.bindings.i18n)}
+      ></atomic-commerce-text>
+    `);
+    }
+    renderProductText(textValue) {
+        const highlightKeywords = this.highlightKeywords;
+        return this.shouldRenderHighlights &&
+            highlightKeywords &&
+            highlightKeywords.length > 0
+            ? renderItemTextHighlighted({
+                props: {
+                    textValue,
+                    highlightKeywords,
+                    highlightString: HighlightUtils.highlightString,
+                    onError: (error) => (this.error = error),
+                },
+            })
+            : html `
+          <atomic-commerce-text
+            .value=${getFieldValueCaption(this.field, textValue, this.bindings.i18n)}
+          ></atomic-commerce-text>
+        `;
+    }
+    renderProductTextValue() {
+        const productValueAsString = getStringValueFromProductOrNull(this.product, this.field);
+        if (productValueAsString === null) {
+            return this.renderFallback();
+        }
+        return this.renderProductText(`${productValueAsString}`);
+    }
+    render() {
+        return html `
+      ${when(this.product && this.field, () => this.renderProductTextValue(), () => nothing)}
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicProductText.prototype, "field", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'should-highlight',
+        reflect: true,
+        converter: booleanConverter,
+    })
+], AtomicProductText.prototype, "shouldHighlight", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicProductText.prototype, "default", void 0);
+__decorate([
+    state()
+], AtomicProductText.prototype, "product", void 0);
+__decorate([
+    state()
+], AtomicProductText.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicProductText.prototype, "error", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicProductText.prototype, "render", null);
+AtomicProductText = __decorate([
+    bindings(),
+    customElement('atomic-product-text')
+], AtomicProductText);
+export { AtomicProductText };

package/dist/atomic/components/components/commerce/index.js

@@ -3,15 +3,19 @@ export { AtomicCommerceBreadbox } from './atomic-commerce-breadbox/atomic-commer
 export { AtomicCommerceDidYouMean } from './atomic-commerce-did-you-mean/atomic-commerce-did-you-mean.js';
 export { AtomicCommerceInterface } from './atomic-commerce-interface/atomic-commerce-interface.js';
 export { AtomicCommerceLayout } from './atomic-commerce-layout/atomic-commerce-layout.js';
+export { AtomicCommerceNoProducts } from './atomic-commerce-no-products/atomic-commerce-no-products.js';
 export { AtomicCommercePager } from './atomic-commerce-pager/atomic-commerce-pager.js';
 export { AtomicCommerceProductList } from './atomic-commerce-product-list/atomic-commerce-product-list.js';
 export { AtomicCommerceProductsPerPage } from './atomic-commerce-products-per-page/atomic-commerce-products-per-page.js';
 export { AtomicCommerceQuerySummary } from './atomic-commerce-query-summary/atomic-commerce-query-summary.js';
+export { AtomicCommerceRecommendationInterface } from './atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.js';
 export { AtomicCommerceRecommendationList } from './atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.js';
 export { AtomicCommerceSearchBox } from './atomic-commerce-search-box/atomic-commerce-search-box.js';
 export { AtomicCommerceSearchBoxInstantProducts } from './atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.js';
 export { AtomicCommerceSearchBoxQuerySuggestions } from './atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.js';
 export { AtomicCommerceSearchBoxRecentQueries } from './atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.js';
 export { AtomicCommerceSortDropdown } from './atomic-commerce-sort-dropdown/atomic-commerce-sort-dropdown.js';
+export { AtomicCommerceText } from './atomic-commerce-text/atomic-commerce-text.js';
 export { AtomicProduct } from './atomic-product/atomic-product.js';
 export { AtomicProductTemplate } from './atomic-product-template/atomic-product-template.js';
+export { AtomicProductText } from './atomic-product-text/atomic-product-text.js';

package/dist/atomic/components/components/commerce/lazy-index.js

@@ -4,16 +4,20 @@ export default {
     'atomic-commerce-did-you-mean': async () => await import('./atomic-commerce-did-you-mean/atomic-commerce-did-you-mean.js'),
     'atomic-commerce-interface': async () => await import('./atomic-commerce-interface/atomic-commerce-interface.js'),
     'atomic-commerce-layout': async () => await import('./atomic-commerce-layout/atomic-commerce-layout.js'),
+    'atomic-commerce-no-products': async () => await import('./atomic-commerce-no-products/atomic-commerce-no-products.js'),
     'atomic-commerce-pager': async () => await import('./atomic-commerce-pager/atomic-commerce-pager.js'),
     'atomic-commerce-product-list': async () => await import('./atomic-commerce-product-list/atomic-commerce-product-list.js'),
     'atomic-commerce-products-per-page': async () => await import('./atomic-commerce-products-per-page/atomic-commerce-products-per-page.js'),
     'atomic-commerce-query-summary': async () => await import('./atomic-commerce-query-summary/atomic-commerce-query-summary.js'),
+    'atomic-commerce-recommendation-interface': async () => await import('./atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.js'),
     'atomic-commerce-recommendation-list': async () => await import('./atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.js'),
     'atomic-commerce-search-box': async () => await import('./atomic-commerce-search-box/atomic-commerce-search-box.js'),
     'atomic-commerce-search-box-instant-products': async () => await import('./atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.js'),
     'atomic-commerce-search-box-query-suggestions': async () => await import('./atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.js'),
     'atomic-commerce-search-box-recent-queries': async () => await import('./atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.js'),
     'atomic-commerce-sort-dropdown': async () => await import('./atomic-commerce-sort-dropdown/atomic-commerce-sort-dropdown.js'),
+    'atomic-commerce-text': async () => await import('./atomic-commerce-text/atomic-commerce-text.js'),
     'atomic-product': async () => await import('./atomic-product/atomic-product.js'),
     'atomic-product-template': async () => await import('./atomic-product-template/atomic-product-template.js'),
+    'atomic-product-text': async () => await import('./atomic-product-text/atomic-product-text.js'),
 };

package/dist/atomic/components/components/commerce/product-template-component-utils/error.js

@@ -0,0 +1,6 @@
+export class FieldValueIsNaNError extends Error {
+    constructor(field, value) {
+        super(`Could not parse "${value}" from field "${field}" as a number.`);
+        this.name = 'FieldValueIsNaNError';
+    }
+}

package/dist/atomic/components/components/commerce/product-template-component-utils/product-utils.js

@@ -0,0 +1,35 @@
+import { readFromObject } from "../../../utils/object-utils";
+import { ProductTemplatesHelpers } from '@coveo/headless/commerce';
+import { FieldValueIsNaNError } from './error';
+export function parseValue(product, field) {
+    const value = ProductTemplatesHelpers.getProductProperty(product, field);
+    if (value === null) {
+        return null;
+    }
+    const valueAsNumber = parseFloat(`${value}`);
+    if (Number.isNaN(valueAsNumber)) {
+        throw new FieldValueIsNaNError(field, value);
+    }
+    return valueAsNumber;
+}
+export function getStringValueFromProductOrNull(product, field) {
+    const value = ProductTemplatesHelpers.getProductProperty(product, field);
+    if (typeof value !== 'string' || value.trim() === '') {
+        return null;
+    }
+    return value;
+}
+export function buildStringTemplateFromProduct(template, product, bindings) {
+    return template.replace(/\${(.*?)}/g, (value) => {
+        const key = value.substring(2, value.length - 1);
+        let newValue = readFromObject(product, key);
+        if (!newValue && typeof window !== 'undefined') {
+            newValue = readFromObject(window, key);
+        }
+        if (!newValue) {
+            bindings.engine.logger.warn(`${key} used in the href template is undefined for this product: ${product.permanentid} and could not be found in the window object.`);
+            return '';
+        }
+        return newValue;
+    });
+}

package/dist/atomic/components/components/common/atomic-layout-section/atomic-layout-section.js

@@ -0,0 +1,31 @@
+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 { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * The `atomic-layout-section` lets you identify various sections for the related `atomic-search-layout` or `atomic-commerce-layout` component.
+ *
+ * @slot default - The default slot where you can add child components to the section.
+ */
+let AtomicLayoutSection = class AtomicLayoutSection extends LitElement {
+    createRenderRoot() {
+        return this;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicLayoutSection.prototype, "section", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'min-width' })
+], AtomicLayoutSection.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'max-width' })
+], AtomicLayoutSection.prototype, "maxWidth", void 0);
+AtomicLayoutSection = __decorate([
+    customElement('atomic-layout-section')
+], AtomicLayoutSection);
+export { AtomicLayoutSection };

package/dist/atomic/components/components/common/index.js

@@ -1,3 +1,4 @@
 // Auto-generated file
 export { AtomicComponentError } from './atomic-component-error/atomic-component-error.js';
 export { AtomicIcon } from './atomic-icon/atomic-icon.js';
+export { AtomicLayoutSection } from './atomic-layout-section/atomic-layout-section.js';

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

@@ -54,7 +54,7 @@ export class CommonAtomicInterfaceHelper {
         if (this.atomicInterface.registerFieldsToInclude) {
             this.atomicInterface.registerFieldsToInclude();
         }
-        loadDayjsLocale(this.language);
+        loadDayjsLocale(this.atomicInterface.language || 'en');
         await this.i18nPromise;
         this.initComponents();
     }
@@ -69,11 +69,13 @@ export class CommonAtomicInterfaceHelper {
         }
         engine.enableAnalytics();
     }
-    onLanguageChange() {
-        const { i18n, language } = this.atomicInterface;
-        loadDayjsLocale(this.language);
-        new Backend(i18n.services, i18nBackendOptions(this.atomicInterface)).read(this.language.split('-')[0], i18nTranslationNamespace, (_, data) => {
-            i18n.addResourceBundle(this.language.split('-')[0], i18nTranslationNamespace, data, true, false);
+    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);
         });
     }
@@ -90,7 +92,4 @@ export class CommonAtomicInterfaceHelper {
     initComponents() {
         this.hangingComponentsInitialization.forEach((event) => event.detail(this.atomicInterface.bindings));
     }
-    get language() {
-        return this.atomicInterface.language || 'en';
-    }
 }

package/dist/atomic/components/components/common/item-text/field-warning.js

@@ -0,0 +1,6 @@
+import { isArray } from '@coveo/bueno';
+export function possiblyWarnOnBadFieldType(field, itemValueRaw, host, logger) {
+    if (isArray(itemValueRaw)) {
+        logger.error(`${host.nodeName.toLowerCase()} cannot be used with multi value field "${field}" with values "${itemValueRaw}".`, host);
+    }
+}

package/dist/atomic/components/components/common/item-text/item-text-fallback.js

@@ -0,0 +1,15 @@
+import { isUndefined } from '@coveo/bueno';
+import { html, nothing } from 'lit';
+import { possiblyWarnOnBadFieldType } from './field-warning.js';
+export const renderItemTextFallback = ({ props }) => (children) => {
+    const { getProperty, item, field, host, logger, defaultValue } = props;
+    const raw = getProperty(item, field);
+    possiblyWarnOnBadFieldType(field, raw, host, logger);
+    if (isUndefined(defaultValue)) {
+        host.remove();
+        return nothing;
+    }
+    else {
+        return html `${children}`;
+    }
+};