@coveo/atomic 3.34.0-pre.3832d9ea2f → 3.34.0-pre.519676740b

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

@@ -24,6 +24,7 @@ import { renderBreadcrumbShowLess } from '../../common/breadbox/breadcrumb-show-
 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 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,18 @@ let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
                 }
             }
         };
+        new ValidatePropsController(this, {
+            getProps: () => ({ pathLimit: this.pathLimit }),
+            schema: 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 +125,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-commerce-pager/atomic-commerce-pager.js

@@ -4,10 +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;
 };
+var AtomicCommercePager_1;
 import { NumberValue, Schema } from '@coveo/bueno';
 import { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
 import { when } from 'lit/directives/when.js';
 import { bindStateToController } from "../../../decorators/bind-state";
 import { bindingGuard } from "../../../decorators/binding-guard";
@@ -35,9 +37,10 @@ import { getCurrentPagesRange } from './commerce-pager-utils';
  *
  * @event atomic/scrollToTop - Emitted when the user clicks the next or previous button, or a page button.
  */
-let AtomicCommercePager = class AtomicCommercePager extends LitElement {
+let AtomicCommercePager = AtomicCommercePager_1 = class AtomicCommercePager extends LitElement {
     constructor() {
         super(...arguments);
+        this.radioGroupName = randomID('atomic-commerce-pager-');
         this.isAppLoaded = false;
         /**
          * The maximum number of page buttons to display.
@@ -59,7 +62,6 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
          * - Use a stringified SVG to display it directly.
          */
         this.nextButtonIcon = ArrowRightIcon;
-        this.radioGroupName = randomID('atomic-commerce-pager-');
     }
     initialize() {
         this.validateProps();
@@ -74,12 +76,10 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
             this.isAppLoaded = isAppLoaded;
         });
     }
-    validateProps() {
-        new Schema({
-            numberOfPages: new NumberValue({ min: 0 }),
-        }).validate({
-            numberOfPages: this.numberOfPages,
-        });
+    willUpdate(changedProperties) {
+        if (changedProperties.has('numberOfPages')) {
+            this.validateProps();
+        }
     }
     render() {
         const pagesRange = getCurrentPagesRange(this.pagerState.page, this.numberOfPages, this.pagerState.totalPages - 1);
@@ -103,7 +103,7 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
             props: {
                 i18n: this.bindings.i18n,
             },
-        })(html `${pagesRange.map((pageNumber) => renderPagerPageButton({
+        })(html `${pagesRange.map((pageNumber, index) => keyed(`page-${pageNumber}-${index}`, renderPagerPageButton({
             props: {
                 isSelected: pageNumber === this.pagerState.page,
                 ariaLabel: this.bindings.i18n.t('page-number', {
@@ -117,7 +117,7 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
                 groupName: this.radioGroupName,
                 text: (pageNumber + 1).toLocaleString(this.bindings.i18n.language),
             },
-        }))}`)}
+        })))}`)}
         ${renderPagerNextButton({
             props: {
                 icon: this.nextButtonIcon,
@@ -131,11 +131,25 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
         })}
       `)}`)}`;
     }
+    validateProps() {
+        try {
+            AtomicCommercePager_1.propsSchema.validate({
+                numberOfPages: this.numberOfPages,
+            });
+        }
+        catch (error) {
+            this.error = error;
+            return;
+        }
+    }
     async focusOnFirstResultAndScrollToTop() {
         await this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch();
         this.dispatchEvent(new CustomEvent('atomic/scrollToTop'));
     }
 };
+AtomicCommercePager.propsSchema = new Schema({
+    numberOfPages: new NumberValue({ min: 0 }),
+});
 __decorate([
     state()
 ], AtomicCommercePager.prototype, "bindings", void 0);
@@ -162,7 +176,7 @@ __decorate([
     bindingGuard(),
     errorGuard()
 ], AtomicCommercePager.prototype, "render", null);
-AtomicCommercePager = __decorate([
+AtomicCommercePager = AtomicCommercePager_1 = __decorate([
     customElement('atomic-commerce-pager'),
     bindings(),
     withTailwindStyles

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

@@ -6,3 +6,4 @@ export { AtomicFacetPlaceholder } from './atomic-facet-placeholder/atomic-facet-
 export { AtomicIcon } from './atomic-icon/atomic-icon.js';
 export { AtomicLayoutSection } from './atomic-layout-section/atomic-layout-section.js';
 export { AtomicModal } from './atomic-modal/atomic-modal.js';
+export { ValidatePropsController } from './validate-props-controller/validate-props-controller.js';

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

@@ -7,4 +7,5 @@ export default {
     'atomic-icon': async () => await import('./atomic-icon/atomic-icon.js'),
     'atomic-layout-section': async () => await import('./atomic-layout-section/atomic-layout-section.js'),
     'atomic-modal': async () => await import('./atomic-modal/atomic-modal.js'),
+    'validate-props-controller': async () => await import('./validate-props-controller/validate-props-controller.js'),
 };

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

@@ -0,0 +1,33 @@
+import { deepEqual } from "../../../utils/compare-utils";
+export class ValidatePropsController {
+    constructor(host, options) {
+        this.host = host;
+        this.getProps = options.getProps;
+        this.schema = options.schema;
+        this.previousProps = {};
+        host.addController(this);
+    }
+    hostConnected() {
+        this._validateProps(this.getProps());
+    }
+    hostUpdate() {
+        const props = this.getProps();
+        if (this._propsHaveChanged(props)) {
+            // @ts-expect-error: we need to clear the error.
+            this.host.error = undefined;
+            this._validateProps(props);
+        }
+    }
+    _validateProps(props) {
+        try {
+            this.schema.validate(props);
+        }
+        catch (error) {
+            this.host.error = error;
+        }
+        this.previousProps = props;
+    }
+    _propsHaveChanged(newProps) {
+        return !deepEqual(newProps, this.previousProps);
+    }
+}

package/dist/atomic/components/components/search/atomic-pager/atomic-pager.js

@@ -0,0 +1,188 @@
+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;
+};
+var AtomicPager_1;
+import { NumberValue, Schema } from '@coveo/bueno';
+import { buildPager, buildSearchStatus, } from '@coveo/headless';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { when } from 'lit/directives/when.js';
+import { createAppLoadedListener } from "../../common/interface/store";
+import { renderPagerNavigation } from "../../common/pager/pager-navigation";
+import { bindStateToController } from "../../../decorators/bind-state";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
+import { randomID } from "../../../utils/utils";
+const ArrowLeftIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.5 4.8-4.3 4.5c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0s.3-.9 0-1.3l-3.7-4 3.7-3.9c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z\"/></svg>";
+const ArrowRightIcon = "<svg viewBox=\"0 0 20 20\"><path d=\"m8.5 15.2 4.3-4.6c.3-.4.3-.9 0-1.3l-4.4-4.5c-.3-.4-.9-.4-1.2 0s-.3.9 0 1.3l3.7 4-3.7 3.9c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z\"/></svg>";
+import { renderPageButtons, renderPagerNextButton, renderPagerPageButton, renderPagerPreviousButton, } from '../../common/pager/pager-buttons';
+/**
+ * The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.
+ *
+ * @part buttons - The list of the next/previous buttons and page-buttons.
+ * @part page-buttons - The list of page buttons.
+ * @part page-button - The individual page buttons.
+ * @part active-page-button - The active page button.
+ * @part previous-button - The previous page button.
+ * @part next-button - The next page button.
+ * @part previous-button-icon - The icon displayed on the "previous page" button.
+ * @part next-button-icon - The icon displayed on the "next page" button.
+ *
+ * @event atomic/scrollToTop - Emitted when the user clicks any of the buttons rendered by the component.
+ */
+let AtomicPager = AtomicPager_1 = class AtomicPager extends InitializeBindingsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.isAppLoaded = false;
+        /**
+         * The maximum number of page buttons to display in the pager.
+         */
+        this.numberOfPages = 5;
+        /**
+         * The SVG icon to render on the "previous page" button.
+         *
+         * - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.
+         * - Use a value that starts with `assets://`, to display an icon from the Atomic package.
+         * - Use a stringified SVG to display it directly.
+         */
+        this.previousButtonIcon = ArrowLeftIcon;
+        /**
+         * The SVG icon to render on the "next page" button.
+         *
+         * - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.
+         * - Use a value that starts with `assets://`, to display an icon from the Atomic package.
+         * - Use a stringified SVG to display it directly.
+         */
+        this.nextButtonIcon = ArrowRightIcon;
+        this.radioGroupName = randomID('atomic-pager-');
+    }
+    initialize() {
+        this.validateProps();
+        this.searchStatus = buildSearchStatus(this.bindings.engine);
+        this.pager = buildPager(this.bindings.engine, {
+            options: { numberOfPages: this.numberOfPages },
+        });
+        createAppLoadedListener(this.bindings.store, (isAppLoaded) => {
+            this.isAppLoaded = isAppLoaded;
+        });
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('numberOfPages')) {
+            this.validateProps();
+        }
+    }
+    render() {
+        const currentGroupName = `${this.radioGroupName}-${this.pagerState.currentPages.join('-')}`;
+        return html `${when(!this.searchStatusState.hasError &&
+            this.searchStatusState.hasResults &&
+            this.isAppLoaded, () => html `
+      ${renderPagerNavigation({
+            props: {
+                i18n: this.bindings.i18n,
+            },
+        })(html `
+          ${renderPagerPreviousButton({
+            props: {
+                icon: this.previousButtonIcon,
+                disabled: !this.pagerState.hasPreviousPage,
+                i18n: this.bindings.i18n,
+                onClick: () => {
+                    this.pager.previousPage();
+                    this.focusOnFirstResultAndScrollToTop();
+                },
+            },
+        })}
+          ${renderPageButtons({
+            props: {
+                i18n: this.bindings.i18n,
+            },
+        })(html `${this.pagerState.currentPages.map((pageNumber, index) => keyed(`page-${pageNumber}-${index}`, renderPagerPageButton({
+            props: {
+                isSelected: this.pager.isCurrentPage(pageNumber),
+                ariaLabel: this.bindings.i18n.t('page-number', {
+                    pageNumber,
+                }),
+                onChecked: () => {
+                    this.pager.selectPage(pageNumber);
+                    this.focusOnFirstResultAndScrollToTop();
+                },
+                page: pageNumber,
+                groupName: currentGroupName,
+                text: pageNumber.toLocaleString(this.bindings.i18n.language),
+            },
+        })))}`)}
+          ${renderPagerNextButton({
+            props: {
+                icon: this.nextButtonIcon,
+                disabled: !this.pagerState.hasNextPage,
+                i18n: this.bindings.i18n,
+                onClick: () => {
+                    this.pager.nextPage();
+                    this.focusOnFirstResultAndScrollToTop();
+                },
+            },
+        })}
+        `)}`)}`;
+    }
+    validateProps() {
+        try {
+            AtomicPager_1.propsSchema.validate({
+                numberOfPages: this.numberOfPages,
+            });
+        }
+        catch (error) {
+            this.error = error;
+            return;
+        }
+    }
+    async focusOnFirstResultAndScrollToTop() {
+        await this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch();
+        this.dispatchEvent(new CustomEvent('atomic/scrollToTop'));
+    }
+};
+AtomicPager.propsSchema = new Schema({
+    numberOfPages: new NumberValue({ min: 0 }),
+});
+__decorate([
+    state()
+], AtomicPager.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicPager.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicPager.prototype, "isAppLoaded", void 0);
+__decorate([
+    bindStateToController('pager'),
+    state()
+], AtomicPager.prototype, "pagerState", void 0);
+__decorate([
+    bindStateToController('searchStatus'),
+    state()
+], AtomicPager.prototype, "searchStatusState", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'number-of-pages', type: Number })
+], AtomicPager.prototype, "numberOfPages", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'previous-button-icon', type: String })
+], AtomicPager.prototype, "previousButtonIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'next-button-icon', type: String })
+], AtomicPager.prototype, "nextButtonIcon", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicPager.prototype, "render", null);
+AtomicPager = AtomicPager_1 = __decorate([
+    customElement('atomic-pager'),
+    bindings(),
+    withTailwindStyles
+], AtomicPager);
+export { AtomicPager };

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

@@ -1,4 +1,5 @@
 // Auto-generated file
+export { AtomicPager } from './atomic-pager/atomic-pager.js';
 export { AtomicQuerySummary } from './atomic-query-summary/atomic-query-summary.js';
 export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';
 export { AtomicSearchInterface } from './atomic-search-interface/atomic-search-interface.js';

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

@@ -1,5 +1,6 @@
 // Auto-generated file
 export default {
+    'atomic-pager': async () => await import('./atomic-pager/atomic-pager.js'),
     'atomic-query-summary': async () => await import('./atomic-query-summary/atomic-query-summary.js'),
     'atomic-results-per-page': async () => await import('./atomic-results-per-page/atomic-results-per-page.js'),
     'atomic-search-interface': async () => await import('./atomic-search-interface/atomic-search-interface.js'),

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

@@ -3,7 +3,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.34.0-pre.3832d9ea2f",
+        version: "3.34.0-pre.519676740b",
         headlessVersion,
     };
 }

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

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;;;;;;;;;;;;SAYgB,cAAc,CAAoB,OAAgB;IAChE,OAAO,WAAW,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACnD;;MCHa,kBAAmB,SAAQ,KAAK;IAC3C,YAAY,WAAmB,EAAE,UAAkB;QACjD,KAAK,CACH,QAAQ,WAAW,sCAAsC,UAAU,YAAY,CAChF,CAAC;KACH;;;ACfH,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;SAIpC,gBAAgB,CAAI,OAAgB,EAAE,UAAkB;IACtE,OAAO,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,MAAM;QACpC,MAAM,KAAK,GAAG,gBAAgB,CAC5B,oBAAoB,EACpB,CAAC,IAAO;YACN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;SACtB,CACF,CAAC;QACF,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACjC,MAAM,CACJ,IAAI,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,CACnE,CAAC;SACH;KACF,CAAC,CAAC;AACL;;ACoDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/commerce/product-template-component-utils/stencil-product-template-decorators.tsx","src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/decorators/commerce/product-template-decorators.ts"],"sourcesContent":["import {Product} from '@coveo/headless/commerce';\nimport {itemContext} from '../../common/item-list/stencil-item-decorators';\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This method is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the method in the [connectedCallback lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered \"atomic-product\".\n * @returns A promise that resolves on initialization of the parent \"atomic-product\" element, or rejects when there is no parent \"atomic-product\" element.\n *\n * @deprecated should only be used for Stencil components. For Lit components, use `fetchProductContext` from \\@/src/decorators/commerce/product-template-decorators.ts\n */\nexport function productContext<T extends Product>(element: Element) {\n  return itemContext<T>(element, 'atomic-product');\n}\n","import type {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\nimport type {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\n\ntype LitElementWithError = Omit<\n  Pick<InitializableComponent, 'error'>,\n  'error'\n> &\n  LitElement & {\n    error: Error | null;\n  };\n\nconst itemContextEventName = 'atomic/resolveResult';\n\nexport class MissingParentError extends Error {\n  constructor(elementName: string, parentName: string) {\n    super(\n      `The \"${elementName}\" element must be the child of an \"${parentName}\" element.`\n    );\n  }\n}\n\nfunction extractFolded<T = Record<string, unknown>>(\n  item: Record<string, unknown>,\n  returnFolded: boolean\n): T {\n  if (returnFolded) {\n    if ('children' in item) {\n      return item as T;\n    } else {\n      return {children: [], result: item} as T;\n    }\n  }\n\n  if ('children' in item && 'result' in item) {\n    return item.result as T;\n  }\n  return item as T;\n}\n\n/**\n * A reactive controller that manages item context data from parent components.\n * Handles fetching item data via custom events and manages error states.\n */\nexport class ItemContextController<T = Record<string, unknown>>\n  implements ReactiveController\n{\n  private host: ReactiveControllerHost & LitElementWithError;\n  private parentName: string;\n  private folded: boolean;\n  private _item: T | null = null;\n  private _error: MissingParentError | null = null;\n\n  constructor(\n    host: ReactiveControllerHost & LitElementWithError,\n    options: {parentName?: string; folded?: boolean} = {}\n  ) {\n    this.host = host;\n    this.parentName = options.parentName ?? 'atomic-result';\n    this.folded = options.folded ?? false;\n    host.addController(this);\n  }\n\n  get item(): T | null {\n    return this._error ? null : this._item;\n  }\n\n  get error(): MissingParentError | null {\n    return this._error;\n  }\n\n  get hasError(): boolean {\n    return this._error !== null;\n  }\n\n  hostConnected(): void {\n    this._resolveItemContext();\n  }\n\n  private _resolveItemContext(): void {\n    const event = buildCustomEvent(\n      itemContextEventName,\n      (item: Record<string, unknown>) => {\n        this._item = extractFolded<T>(item, this.folded);\n        this._error = null;\n        this.host.error = null;\n        this.host.requestUpdate();\n      }\n    );\n\n    const canceled = this.host.dispatchEvent(event);\n    if (canceled) {\n      const elementName = (this.host as Element).nodeName.toLowerCase();\n      this._error = new MissingParentError(elementName, this.parentName);\n      this._item = null;\n      this.host.error = this._error;\n      this.host.requestUpdate();\n    }\n  }\n}\n\ntype ItemContextEventHandler<T> = (item: T) => void;\nexport type ItemContextEvent<T> = CustomEvent<ItemContextEventHandler<T>>;\n","import {closest} from '../../../utils/dom-utils.js';\nimport {buildCustomEvent} from '../../../utils/event-utils.js';\nimport {MissingParentError} from './context/item-context-controller.js';\n\nconst itemContextEventName = 'atomic/resolveResult';\n\ntype ItemContextEventHandler<T> = (item: T) => void;\n\nexport function fetchItemContext<T>(element: Element, parentName: string) {\n  return new Promise<T>((resolve, reject) => {\n    const event = buildCustomEvent<ItemContextEventHandler<T>>(\n      itemContextEventName,\n      (item: T) => {\n        return resolve(item);\n      }\n    );\n    element.dispatchEvent(event);\n\n    if (!closest(element, parentName)) {\n      reject(\n        new MissingParentError(element.nodeName.toLowerCase(), parentName)\n      );\n    }\n  });\n}\n","import type {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport type {LitElement} from 'lit';\nimport {\n  InteractiveItemContextController,\n  type InteractiveItemContextEvent,\n} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  type ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.\n *\n * @param host - The Lit component instance\n * @param options - Configuration options\n * @returns ItemContextController instance configured for atomic-product\n *\n * @example\n * ```typescript\n * @customElement('my-product-component')\n * export class MyProductComponent extends LitElement {\n *   private productController = createProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.productController.item;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createProductContextController(\n  host: LitElement & {error: Error | null},\n  options: {folded?: boolean} = {}\n): ItemContextController<Product> {\n  return new ItemContextController<Product>(host, {\n    parentName: 'atomic-product',\n    folded: options.folded ?? false,\n  });\n}\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.\n *\n * @param host - The Lit component instance\n * @returns InteractiveItemContextController instance\n *\n * @example\n * ```typescript\n * @customElement('my-interactive-product-component')\n * export class MyInteractiveProductComponent extends LitElement {\n *   private interactiveProductController = createInteractiveProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.interactiveProductController.interactiveItem;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createInteractiveProductContextController(\n  host: LitElement & {error: Error}\n): InteractiveItemContextController<InteractiveProduct> {\n  return new InteractiveItemContextController<InteractiveProduct>(host);\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent<\n  T extends InteractiveProduct = InteractiveProduct,\n> = InteractiveItemContextEvent<T>;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This utility function is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the utility function in the [`connectedCallback` lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered `atomic-product`.\n * @returns A promise that resolves on initialization of the parent `atomic-product` element, or rejects when there is no parent `atomic-product` element.\n */\nexport function fetchProductContext<T extends Product>(element: Element) {\n  return fetchItemContext<T>(element, 'atomic-product');\n}\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;;;;;;;;;;;;SAYgB,cAAc,CAAoB,OAAgB;IAChE,OAAO,WAAW,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACnD;;MCHa,kBAAmB,SAAQ,KAAK;IAC3C,YAAY,WAAmB,EAAE,UAAkB;QACjD,KAAK,CACH,QAAQ,WAAW,sCAAsC,UAAU,YAAY,CAChF,CAAC;KACH;;;ACfH,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;SAIpC,gBAAgB,CAAI,OAAgB,EAAE,UAAkB;IACtE,OAAO,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,MAAM;QACpC,MAAM,KAAK,GAAG,gBAAgB,CAC5B,oBAAoB,EACpB,CAAC,IAAO;YACN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;SACtB,CACF,CAAC;QACF,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACjC,MAAM,CACJ,IAAI,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,CACnE,CAAC;SACH;KACF,CAAC,CAAC;AACL;;ACoDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/commerce/product-template-component-utils/stencil-product-template-decorators.tsx","src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/decorators/commerce/product-template-decorators.ts"],"sourcesContent":["import {Product} from '@coveo/headless/commerce';\nimport {itemContext} from '../../common/item-list/stencil-item-decorators';\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This method is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the method in the [connectedCallback lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered \"atomic-product\".\n * @returns A promise that resolves on initialization of the parent \"atomic-product\" element, or rejects when there is no parent \"atomic-product\" element.\n *\n * @deprecated should only be used for Stencil components. For Lit components, use `fetchProductContext` from \\@/src/decorators/commerce/product-template-decorators.ts\n */\nexport function productContext<T extends Product>(element: Element) {\n  return itemContext<T>(element, 'atomic-product');\n}\n","import type {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\nimport type {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\n\ntype LitElementWithError = Omit<\n  Pick<InitializableComponent, 'error'>,\n  'error'\n> &\n  LitElement & {\n    error: Error | null;\n  };\n\nconst itemContextEventName = 'atomic/resolveResult';\n\nexport class MissingParentError extends Error {\n  constructor(elementName: string, parentName: string) {\n    super(\n      `The \"${elementName}\" element must be the child of an \"${parentName}\" element.`\n    );\n  }\n}\n\nfunction extractFolded<T = Record<string, unknown>>(\n  item: Record<string, unknown>,\n  returnFolded: boolean\n): T {\n  if (returnFolded) {\n    if ('children' in item) {\n      return item as T;\n    } else {\n      return {children: [], result: item} as T;\n    }\n  }\n\n  if ('children' in item && 'result' in item) {\n    return item.result as T;\n  }\n  return item as T;\n}\n\n/**\n * A reactive controller that manages item context data from parent components.\n * Handles fetching item data via custom events and manages error states.\n */\nexport class ItemContextController<T = Record<string, unknown>>\n  implements ReactiveController\n{\n  private host: ReactiveControllerHost & LitElementWithError;\n  private parentName: string;\n  private folded: boolean;\n  private _item: T | null = null;\n  private _error: MissingParentError | null = null;\n\n  constructor(\n    host: ReactiveControllerHost & LitElementWithError,\n    options: {parentName?: string; folded?: boolean} = {}\n  ) {\n    this.host = host;\n    this.parentName = options.parentName ?? 'atomic-result';\n    this.folded = options.folded ?? false;\n    host.addController(this);\n  }\n\n  get item(): T | null {\n    return this._error ? null : this._item;\n  }\n\n  get error(): MissingParentError | null {\n    return this._error;\n  }\n\n  get hasError(): boolean {\n    return this._error !== null;\n  }\n\n  hostConnected(): void {\n    this._resolveItemContext();\n  }\n\n  private _resolveItemContext(): void {\n    const event = buildCustomEvent(\n      itemContextEventName,\n      (item: Record<string, unknown>) => {\n        this._item = extractFolded<T>(item, this.folded);\n        this._error = null;\n        this.host.error = null;\n        this.host.requestUpdate();\n      }\n    );\n\n    const canceled = this.host.dispatchEvent(event);\n    if (canceled) {\n      const elementName = (this.host as Element).nodeName.toLowerCase();\n      this._error = new MissingParentError(elementName, this.parentName);\n      this._item = null;\n      this.host.error = this._error;\n      this.host.requestUpdate();\n    }\n  }\n}\n\ntype ItemContextEventHandler<T> = (item: T) => void;\nexport type ItemContextEvent<T> = CustomEvent<ItemContextEventHandler<T>>;\n","import {closest} from '../../../utils/dom-utils.js';\nimport {buildCustomEvent} from '../../../utils/event-utils.js';\nimport {MissingParentError} from './context/item-context-controller.js';\n\nconst itemContextEventName = 'atomic/resolveResult';\n\ntype ItemContextEventHandler<T> = (item: T) => void;\n\nexport function fetchItemContext<T>(element: Element, parentName: string) {\n  return new Promise<T>((resolve, reject) => {\n    const event = buildCustomEvent<ItemContextEventHandler<T>>(\n      itemContextEventName,\n      (item: T) => {\n        return resolve(item);\n      }\n    );\n    element.dispatchEvent(event);\n\n    if (!closest(element, parentName)) {\n      reject(\n        new MissingParentError(element.nodeName.toLowerCase(), parentName)\n      );\n    }\n  });\n}\n","import type {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport type {LitElement} from 'lit';\nimport {\n  InteractiveItemContextController,\n  type InteractiveItemContextEvent,\n} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  type ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.\n *\n * @param host - The Lit component instance\n * @param options - Configuration options\n * @returns ItemContextController instance configured for atomic-product\n *\n * @example\n * ```typescript\n * @customElement('my-product-component')\n * export class MyProductComponent extends LitElement {\n *   private productController = createProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.productController.item;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createProductContextController(\n  host: LitElement & {error: Error | null},\n  options: {folded?: boolean} = {}\n): ItemContextController<Product> {\n  return new ItemContextController<Product>(host, {\n    parentName: 'atomic-product',\n    folded: options.folded ?? false,\n  });\n}\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.\n *\n * @param host - The Lit component instance\n * @returns InteractiveItemContextController instance\n *\n * @example\n * ```typescript\n * @customElement('my-interactive-product-component')\n * export class MyInteractiveProductComponent extends LitElement {\n *   private interactiveProductController = createInteractiveProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.interactiveProductController.interactiveItem;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createInteractiveProductContextController(\n  host: LitElement & {error: Error}\n): InteractiveItemContextController<InteractiveProduct> {\n  return new InteractiveItemContextController<InteractiveProduct>(host);\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent<\n  T extends InteractiveProduct = InteractiveProduct,\n> = InteractiveItemContextEvent<T>;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This utility function is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the utility function in the [`connectedCallback` lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered `atomic-product`.\n * @returns A promise that resolves on initialization of the parent `atomic-product` element, or rejects when there is no parent `atomic-product` element.\n */\nexport function fetchProductContext<T extends Product>(element: Element) {\n  return fetchItemContext<T>(element, 'atomic-product');\n}\n"],"version":3}

package/dist/atomic/components/utils/compare-utils.js

@@ -0,0 +1,49 @@
+/**
+ * Performs a deep equality comparison between two values.
+ * Handles primitives, null/undefined, arrays, and objects.
+ *
+ * @param a - First value to compare
+ * @param b - Second value to compare
+ * @returns true if values are deeply equal, false otherwise
+ */
+export function deepEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (a == null || b == null) {
+        return false;
+    }
+    const typeA = typeof a;
+    const typeB = typeof b;
+    if (typeA !== typeB) {
+        return false;
+    }
+    if (Array.isArray(a)) {
+        if (!Array.isArray(b) || a.length !== b.length) {
+            return false;
+        }
+        for (let i = 0; i < a.length; i++) {
+            if (!deepEqual(a[i], b[i])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    if (typeA === 'object') {
+        const aObj = a;
+        const bObj = b;
+        const aKeys = Object.keys(aObj);
+        const bKeys = Object.keys(bObj);
+        if (aKeys.length !== bKeys.length) {
+            return false;
+        }
+        for (let i = 0; i < aKeys.length; i++) {
+            const key = aKeys[i];
+            if (!deepEqual(aObj[key], bObj[key])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+}