@coveo/atomic 3.34.0-pre.616c4e348b → 3.34.0-pre.61b8e221e3

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

@@ -8,6 +8,15 @@ import { NumberValue, Schema } from '@coveo/bueno';
 import { buildContext, buildProductListing, buildSearch, } from '@coveo/headless/commerce';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { renderBreadcrumbButton } from "../../common/breadbox/breadcrumb-button";
+import { renderBreadcrumbClearAll } from "../../common/breadbox/breadcrumb-clear-all";
+import { renderBreadcrumbContainer } from "../../common/breadbox/breadcrumb-container";
+import { renderBreadcrumbContent } from "../../common/breadbox/breadcrumb-content";
+import { renderBreadcrumbShowLess } from "../../common/breadbox/breadcrumb-show-less";
+import { renderBreadcrumbShowMore } from "../../common/breadbox/breadcrumb-show-more";
+import { formatHumanReadable } from "../../common/facets/numeric-facet/formatter";
+import { defaultCurrencyFormatter, defaultNumberFormatter, } from "../../common/formats/format-common";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
 import { bindStateToController } from "../../../decorators/bind-state";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
@@ -16,14 +25,6 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js"
 import { FocusTargetController } from "../../../utils/accessibility-utils";
 import { parseDate } from "../../../utils/date-utils";
 import { getFieldValueCaption } from "../../../utils/field-utils";
-import { renderBreadcrumbButton } from '../../common/breadbox/breadcrumb-button';
-import { renderBreadcrumbClearAll } from '../../common/breadbox/breadcrumb-clear-all';
-import { renderBreadcrumbContainer } from '../../common/breadbox/breadcrumb-container';
-import { renderBreadcrumbContent } from '../../common/breadbox/breadcrumb-content';
-import { renderBreadcrumbShowLess } from '../../common/breadbox/breadcrumb-show-less';
-import { renderBreadcrumbShowMore } from '../../common/breadbox/breadcrumb-show-more';
-import { formatHumanReadable } from '../../common/facets/numeric-facet/formatter';
-import { defaultCurrencyFormatter, defaultNumberFormatter, } from '../../common/formats/format-common';
 import styles from './atomic-commerce-breadbox.tw.css';
 /**
  * The `atomic-commerce-breadbox` component creates breadcrumbs that display a summary of the currently active facet values.
@@ -42,7 +43,7 @@ import styles from './atomic-commerce-breadbox.tw.css';
  */
 let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.lastRemovedBreadcrumbIndex = 0;
         this.numberOfBreadcrumbs = 0;
         this.numberOfCollapsedBreadcrumbs = 0;
@@ -96,9 +97,15 @@ let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
                 }
             }
         };
+        new ValidatePropsController(this, () => ({ pathLimit: this.pathLimit }), new Schema({
+            pathLimit: new NumberValue({
+                default: 3,
+                min: 1,
+                required: false,
+            }),
+        }));
     }
     initialize() {
-        this.validateProps();
         if (this.bindings.interfaceElement.type === 'product-listing') {
             this.searchOrListing = buildProductListing(this.bindings.engine);
         }
@@ -115,31 +122,9 @@ let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
         this.breadcrumbShowMoreFocus = new FocusTargetController(this, this.bindings);
         this.breadcrumbShowLessFocus = new FocusTargetController(this, this.bindings);
     }
-    willUpdate(changedProperties) {
-        if (changedProperties.has('pathLimit')) {
-            this.validateProps();
-        }
-    }
     updated() {
         this.adaptBreadcrumbs();
     }
-    validateProps() {
-        try {
-            new Schema({
-                pathLimit: new NumberValue({
-                    default: 3,
-                    min: 1,
-                    required: false,
-                }),
-            }).validate({
-                pathLimit: this.pathLimit,
-            });
-        }
-        catch (error) {
-            this.error = error;
-            return;
-        }
-    }
     disconnectedCallback() {
         this.resizeObserver?.disconnect();
     }

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

@@ -8,7 +8,8 @@ import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 import { resultComponentClass, } from "../../common/item-list/item-list-common";
-import { ItemLayout, } from "../../common/layout/display-options";
+import { CustomRenderController } from "../../common/layout/custom-render-controller";
+import { ItemLayoutController } from "../../common/layout/item-layout-controller";
 import { booleanConverter } from "../../../converters/boolean-converter";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
@@ -20,7 +21,6 @@ import styles from './atomic-product.tw.css';
 let AtomicProduct = class AtomicProduct extends ChildrenUpdateCompleteMixin(LitElement) {
     constructor() {
         super(...arguments);
-        this.executedRenderingFunctionOnce = false;
         /**
          * The product link to use when the product is clicked in a grid layout.
          *
@@ -84,11 +84,26 @@ let AtomicProduct = class AtomicProduct extends ChildrenUpdateCompleteMixin(LitE
     }
     async connectedCallback() {
         super.connectedCallback();
-        if (!this.content) {
-            console.warn('AtomicProduct: content property is undefined. Cannot create layout.', this);
-            return;
-        }
-        this.layout = new ItemLayout(this.content.children, this.display, this.density, this.imageSize);
+        new CustomRenderController(this, {
+            renderingFunction: () => this.renderingFunction,
+            itemData: () => this.product,
+            rootElementRef: () => this.productRootRef,
+            linkContainerRef: () => this.linkContainerRef,
+            onRenderComplete: (element, output) => {
+                this.itemLayoutController.applyLayoutClassesToElement(element, output);
+            },
+        });
+        this.itemLayoutController = new ItemLayoutController(this, {
+            elementPrefix: 'atomic-product',
+            renderingFunction: () => this.renderingFunction,
+            content: () => this.content,
+            layoutConfig: () => ({
+                display: this.display,
+                density: this.density,
+                imageSize: this.imageSize,
+            }),
+            itemClasses: () => this.classes,
+        });
         this.addEventListener('atomic/resolveResult', this.resolveProduct);
         this.addEventListener('atomic/resolveInteractiveResult', this.resolveInteractiveProduct);
         this.addEventListener('atomic/resolveStopPropagation', this.resolveStopPropagation);
@@ -105,12 +120,9 @@ let AtomicProduct = class AtomicProduct extends ChildrenUpdateCompleteMixin(LitE
         this.removeEventListener('atomic/resolveResultDisplayConfig', this.resolveProductDisplayConfig);
         this.removeEventListener('click', this.handleClick);
     }
-    get isCustomRenderFunctionMode() {
-        return this.renderingFunction !== undefined;
-    }
     getContentHTML() {
         if (!this.content) {
-            console.warn('AtomicProduct: content property is undefined. Cannot get content HTML.', this);
+            console.warn('atomic-product: content property is undefined. Cannot get content HTML.', this);
             return '';
         }
         return parentNodeToString(this.content);
@@ -118,13 +130,8 @@ let AtomicProduct = class AtomicProduct extends ChildrenUpdateCompleteMixin(LitE
     getLinkHTML() {
         return parentNodeToString(this.linkContent ?? new HTMLElement());
     }
-    shouldExecuteRenderFunction() {
-        return (this.isCustomRenderFunctionMode &&
-            this.productRootRef &&
-            !this.executedRenderingFunctionOnce);
-    }
     render() {
-        if (this.isCustomRenderFunctionMode) {
+        if (this.renderingFunction !== undefined) {
             return html `
         <div class=${resultComponentClass}>
           <div
@@ -143,16 +150,13 @@ let AtomicProduct = class AtomicProduct extends ChildrenUpdateCompleteMixin(LitE
       `;
         }
         // Handle case where content is undefined and layout was not created
-        if (!this.layout) {
+        if (!this.itemLayoutController.getLayout()) {
             return html `<div class=${resultComponentClass}></div>`;
         }
         return html `
       <div class=${resultComponentClass}>
         <div
-          class="result-root ${this.layout
-            .getClasses()
-            .concat(this.classes)
-            .join(' ')}"
+          class="result-root ${this.itemLayoutController.getCombinedClasses().join(' ')}"
           .innerHTML=${this.getContentHTML()}
         ></div>
         <div class="link-container" .innerHTML=${this.getLinkHTML()}></div>
@@ -164,42 +168,6 @@ let AtomicProduct = class AtomicProduct extends ChildrenUpdateCompleteMixin(LitE
             this.store.unsetLoadingFlag(this.loadingFlag);
         }
     }
-    getCombinedClasses(additionalContent) {
-        const layoutClasses = this.layout
-            ? this.layout.getClasses(additionalContent)
-            : [];
-        const extraClasses = this.classes.split(/\s+/).filter((c) => c);
-        return [...layoutClasses, ...extraClasses];
-    }
-    applyClassesToChildren() {
-        if (!this.layout) {
-            return;
-        }
-        const classes = this.getCombinedClasses();
-        const root = this.shadowRoot?.querySelector('.result-root');
-        if (!root) {
-            return;
-        }
-        root.querySelectorAll('*').forEach((el) => {
-            const tag = el.tagName.toLowerCase();
-            if (tag.startsWith('atomic-product-')) {
-                el.classList.add(...classes);
-            }
-        });
-    }
-    updated(_changedProperties) {
-        if (this.shouldExecuteRenderFunction()) {
-            const customRenderOutputAsString = this.renderingFunction(this.product, this.productRootRef, this.linkContainerRef);
-            if (this.layout) {
-                const classes = this.getCombinedClasses(customRenderOutputAsString);
-                this.productRootRef.classList.add(...classes);
-            }
-            this.executedRenderingFunctionOnce = true;
-        }
-        if (!this.isCustomRenderFunctionMode) {
-            this.applyClassesToChildren();
-        }
-    }
 };
 AtomicProduct.styles = styles;
 __decorate([

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

@@ -1,4 +1,4 @@
-import { findSection, sectionSelector } from './sections';
+import { findSection, sectionSelector } from './atomic-layout-section-utils';
 export function makeDesktopQuery(mobileBreakpoint) {
     return `only screen and (min-width: ${mobileBreakpoint})`;
 }

package/dist/atomic/components/components/common/layout/custom-render-controller.js

@@ -0,0 +1,37 @@
+/**
+ * A reactive controller that manages custom rendering function execution for item components.
+ */
+export class CustomRenderController {
+    constructor(host, options) {
+        this.hasExecutedRenderFunction = false;
+        this.options = {
+            linkContainerRef: () => undefined,
+            onRenderComplete: () => { },
+            ...options,
+        };
+        host.addController(this);
+    }
+    hostConnected() {
+        this.resetRenderState();
+    }
+    hostUpdated() {
+        this.executeRenderFunction();
+    }
+    resetRenderState() {
+        this.hasExecutedRenderFunction = false;
+    }
+    executeRenderFunction() {
+        const renderingFunction = this.options.renderingFunction();
+        const itemData = this.options.itemData();
+        const rootElementRef = this.options.rootElementRef();
+        if (!renderingFunction ||
+            !itemData ||
+            !rootElementRef ||
+            this.hasExecutedRenderFunction) {
+            return;
+        }
+        const customRenderOutput = renderingFunction(itemData, rootElementRef, this.options.linkContainerRef());
+        this.options.onRenderComplete(rootElementRef, customRenderOutput);
+        this.hasExecutedRenderFunction = true;
+    }
+}

package/dist/atomic/components/components/common/layout/display-options.js

@@ -1,4 +1,4 @@
-import { containsSections } from './sections';
+import { containsSections, } from './item-layout-sections';
 function getDisplayClass(display) {
     switch (display) {
         case 'grid':

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

@@ -0,0 +1,103 @@
+import { ItemLayout, } from './display-options';
+/**
+ * A reactive controller that manages layout creation and class application for item components.
+ */
+export class ItemLayoutController {
+    constructor(host, options) {
+        this.layoutInstance = null;
+        this.host = host;
+        this.options = {
+            ...options,
+        };
+        host.addController(this);
+    }
+    hostConnected() {
+        this.createLayout();
+    }
+    hostUpdated() {
+        this.applyLayoutClasses();
+    }
+    /**
+     * Gets the current layout instance
+     */
+    getLayout() {
+        return this.layoutInstance;
+    }
+    /**
+     * Gets combined layout and extra classes
+     */
+    getCombinedClasses(additionalContent) {
+        const layout = this.getLayout();
+        const layoutClasses = layout ? layout.getClasses(additionalContent) : [];
+        const itemClasses = this.options
+            .itemClasses()
+            .split(/\s+/)
+            .filter((c) => c);
+        return [...layoutClasses, ...itemClasses];
+    }
+    /**
+     * Applies layout classes to a specific element (useful for custom rendering)
+     */
+    applyLayoutClassesToElement(element, additionalContent) {
+        const layout = this.getLayout();
+        if (!layout) {
+            return;
+        }
+        const classes = this.getCombinedClasses(additionalContent);
+        if (classes.length > 0) {
+            element.classList.add(...classes);
+        }
+    }
+    applyLayoutClasses() {
+        const layout = this.getLayout();
+        if (!layout) {
+            return;
+        }
+        const classes = this.getCombinedClasses();
+        const root = this.host.shadowRoot?.querySelector('.result-root');
+        if (!root || classes.length === 0) {
+            return;
+        }
+        if (this.hasCustomRenderFunction()) {
+            this.observeAndApplyClasses(root, classes);
+        }
+        else {
+            this.addClassesToElements(root, classes);
+        }
+    }
+    createLayout() {
+        const content = this.options.content();
+        if (!content) {
+            console.warn(`${this.options.elementPrefix}: content property is undefined. Cannot create layout.`, this.host);
+            this.layoutInstance = null;
+            return;
+        }
+        const config = this.options.layoutConfig();
+        this.layoutInstance = new ItemLayout(content.children, config.display, config.density, config.imageSize);
+    }
+    hasCustomRenderFunction() {
+        return this.options.renderingFunction() !== undefined;
+    }
+    addClassesToElements(root, classes) {
+        if (classes.length === 0) {
+            return;
+        }
+        const elements = root.querySelectorAll('*');
+        elements.forEach((element) => {
+            const tagName = element.tagName.toLowerCase();
+            if (tagName.startsWith(`${this.options.elementPrefix}-`)) {
+                element.classList.add(...classes);
+            }
+        });
+    }
+    observeAndApplyClasses(root, classes) {
+        const observer = new MutationObserver((mutations) => {
+            const hasNewElements = mutations.some((mutation) => mutation.type === 'childList' && mutation.addedNodes.length > 0);
+            if (hasNewElements) {
+                this.addClassesToElements(root, classes);
+                observer.disconnect();
+            }
+        });
+        observer.observe(root, { childList: true, subtree: true });
+    }
+}

package/dist/atomic/components/components/common/layout/{sections.js → item-layout-sections.js}

@@ -1,4 +1,4 @@
-import { isElementNode } from '../../../utils/utils';
+import { isElementNode } from "../../../utils/utils";
 const resultSectionTags = new Set([
     'atomic-result-section-visual',
     'atomic-result-section-badges',

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

@@ -2,7 +2,7 @@ import { ProductTemplatesHelpers, } from '@coveo/headless/commerce';
 import { intersection } from '../../../utils/set';
 import { isElementNode, isVisualNode } from '../../../utils/utils';
 import { tableElementTagName } from '../../search/atomic-table-result/table-element-utils';
-import { isResultSectionNode } from '../layout/sections';
+import { isResultSectionNode } from '../layout/item-layout-sections';
 export function getTemplateNodeType(node) {
     if (isResultSectionNode(node)) {
         return 'section';

package/dist/atomic/components/components/common/validate-props-controller/validate-props-controller.js

@@ -0,0 +1,50 @@
+import { deepEqual } from "../../../utils/compare-utils";
+/**
+ * A reactive controller that validates the props of a Lit component against a
+ * provided Bueno schema.
+ *
+ * It validates the props when the host is connected to the DOM and whenever
+ * the host updates, revalidating only if the props have changed since the last
+ * validation.
+ *
+ * If validation fails, the controller sets the `error` property on the host.
+ */
+export class ValidatePropsController {
+    /**
+     * Creates a `ValidatePropsController`.
+     *
+     * @param host The host element.
+     * @param getProps A function that returns the current props to validate.
+     * @param schema The Bueno schema to validate the props against.
+     */
+    constructor(host, getProps, schema) {
+        this.host = host;
+        this.getProps = getProps;
+        this.schema = schema;
+        host.addController(this);
+    }
+    hostConnected() {
+        this.currentProps = this.getProps();
+        this._validateProps();
+    }
+    hostUpdate() {
+        this.currentProps = this.getProps();
+        if (deepEqual(this.currentProps, this.previousProps)) {
+            return;
+        }
+        // @ts-expect-error: we need to clear the error.
+        this.host.error = undefined;
+        this._validateProps();
+    }
+    _validateProps() {
+        try {
+            this.schema.validate(this.currentProps);
+        }
+        catch (error) {
+            this.host.error = error;
+        }
+        finally {
+            this.previousProps = this.currentProps;
+        }
+    }
+}

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

@@ -0,0 +1,31 @@
+import { augmentAnalyticsWithAtomicVersion, augmentWithExternalMiddleware, getNextAnalyticsConfig, } from '../../common/interface/analytics-config';
+export function getAnalyticsConfig(searchEngineConfig, enabled) {
+    switch (searchEngineConfig.analytics?.analyticsMode) {
+        case 'next':
+            return getNextAnalyticsConfig(searchEngineConfig, enabled);
+        default:
+            return getLegacyAnalyticsConfig(searchEngineConfig, enabled);
+    }
+}
+function getLegacyAnalyticsConfig(searchEngineConfig, enabled) {
+    const analyticsClientMiddleware = (event, payload) => augmentAnalytics(event, payload, searchEngineConfig);
+    const defaultConfiguration = {
+        analyticsClientMiddleware,
+        enabled,
+        documentLocation: document.location.href,
+        ...(document.referrer && { originLevel3: document.referrer }),
+    };
+    if (searchEngineConfig.analytics) {
+        return {
+            ...defaultConfiguration,
+            ...searchEngineConfig.analytics,
+            analyticsClientMiddleware,
+        };
+    }
+    return defaultConfiguration;
+}
+function augmentAnalytics(event, payload, config) {
+    let result = augmentWithExternalMiddleware(event, payload, config);
+    result = augmentAnalyticsWithAtomicVersion(result);
+    return result;
+}