@coveo/atomic 3.33.8-pre.e5ad619274 → 3.33.8-pre.ea3635cf59

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { buildCommerceEngine, buildContext, buildProductListing, buildSearch, VERSION as HEADLESS_VERSION, loadConfigurationActions, loadQueryActions, } from '@coveo/headless/commerce';
+import { buildCommerceEngine, buildContext, buildProductListing, buildSearch, VERSION as HEADLESS_VERSION, loadConfigurationActions, loadContextActions, loadQueryActions, } from '@coveo/headless/commerce';
 import { provide } from '@lit/context';
 import i18next from 'i18next';
 import { css, html, LitElement } from 'lit';
@@ -144,6 +144,41 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             this.searchOrListing.executeFirstRequest();
         }
     }
+    /**
+     * Updates the locale settings for the commerce 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
+     * interface.updateLocale('fr', 'CA', 'CAD');
+     * ```
+     */
+    updateLocale(language, country, currency) {
+        if (!this.interfaceController.engineIsCreated(this.engine) ||
+            !this.context) {
+            return;
+        }
+        language && this.interfaceController.onLanguageChange(language);
+        if (this.isNewLocale(language, country, currency)) {
+            const { setContext } = loadContextActions(this.engine);
+            this.engine.dispatch(setContext({
+                ...this.context.state,
+                ...(language && { language }),
+                ...(country && { country }),
+                ...(currency && { currency }),
+            }));
+        }
+    }
     toggleAnalytics() {
         this.interfaceController.onAnalyticsChange();
     }
@@ -157,11 +192,10 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             !this.context) {
             return;
         }
-        // TODO - KIT-4993: Add temporary deprecation warning.
+        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 `initialize` or `initializeWithEngine`, and update the language as needed using the `updateLocale` method.');
         this.context.setLanguage(this.language);
         return this.interfaceController.onLanguageChange();
     }
-    // TODO - KIT-4993: Add updateLocale public method.
     disconnectedCallback() {
         super.disconnectedCallback();
         if (typeof this.unsubscribeUrlManager === 'function') {
@@ -211,11 +245,11 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             throw error;
         }
     }
-    // TODO - KIT-4993: Adjust.
     initLanguage() {
-        if (!this.language) {
-            this.language = this.context.state.language;
+        if (!this.context || this.language) {
+            return;
         }
+        this.interfaceController.onLanguageChange(this.context.state.language);
     }
     initRequestStatus() {
         this.searchOrListing =
@@ -257,7 +291,7 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             this.i18Initialized,
         ]);
         this.initContext();
-        this.updateLanguage();
+        this.updateLanguage(); // TODO - (v4) KIT-4365: Remove.
         this.bindings = this.getBindings();
         markParentAsReady(this);
         this.initRequestStatus();
@@ -267,6 +301,14 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
         this.initUrlManager();
         this.initialized = true;
     }
+    isNewLocale(language, country, currency) {
+        if (!this.context) {
+            return false;
+        }
+        return ((language && language !== this.context.state.language) ||
+            (country && country !== this.context.state.country) ||
+            (currency && currency !== this.context.state.currency));
+    }
     // TODO - (v4) KIT-4991: Make private.
     scrollToTop() {
         const scrollContainerElement = document.querySelector(this.scrollContainer);

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

@@ -50,6 +50,9 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
          *
          */
         this.iconAssetsPath = './assets';
+        // TODO - KIT-4994: Add disableAnalytics property that defaults to false.
+        // TODO - KIT-4994: Deprecate in favor of disableAnalytics property.
+        // TODO - (v4) KIT-4990: Remove.
         /**
          * Whether to enable analytics.
          */
@@ -104,13 +107,15 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
             return;
         }
         language && this.interfaceController.onLanguageChange(language);
-        const { setContext } = loadContextActions(this.engine);
-        this.engine.dispatch(setContext({
-            ...this.context.state,
-            ...(language && { language }),
-            ...(country && { country }),
-            ...(currency && { currency }),
-        }));
+        if (this.isNewLocale(language, country, currency)) {
+            const { setContext } = loadContextActions(this.engine);
+            this.engine.dispatch(setContext({
+                ...this.context.state,
+                ...(language && { language }),
+                ...(country && { country }),
+                ...(currency && { currency }),
+            }));
+        }
     }
     toggleAnalytics() {
         this.interfaceController.onAnalyticsChange();
@@ -118,6 +123,7 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
     updateIconAssetsPath() {
         this.store.state.iconAssetsPath = this.iconAssetsPath;
     }
+    // TODO - (v4) KIT-4365: Remove.
     async updateLanguage() {
         if (!this.interfaceController.engineIsCreated(this.engine) ||
             !this.language ||
@@ -150,7 +156,7 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
             this.i18Initialized,
         ]);
         this.initContext();
-        this.language && this.updateLanguage();
+        this.updateLanguage();
         this.bindings = this.getBindings();
         markParentAsReady(this);
         this.initLanguage();
@@ -167,9 +173,18 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
         };
     }
     initLanguage() {
-        if (!this.language) {
-            this.interfaceController.onLanguageChange(this.context.state.language);
+        if (!this.context || this.language) {
+            return;
+        }
+        this.interfaceController.onLanguageChange(this.context.state.language);
+    }
+    isNewLocale(language, country, currency) {
+        if (!this.context) {
+            return false;
         }
+        return ((language && language !== this.context.state.language) ||
+            (country && country !== this.context.state.country) ||
+            (currency && currency !== this.context.state.currency));
     }
 };
 AtomicCommerceRecommendationInterface.styles = [

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

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

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

@@ -1,5 +1,4 @@
 // 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 { AtomicSearchLayout } from './atomic-search-layout/atomic-search-layout.js';

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

@@ -1,6 +1,5 @@
 // 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-layout': async () => await import('./atomic-search-layout/atomic-search-layout.js'),

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

@@ -3,7 +3,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.33.8-pre.e5ad619274",
+        version: "3.33.8-pre.ea3635cf59",
         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/stencil-pager-navigation.js

@@ -0,0 +1,42 @@
+import { h } from '@stencil/core/internal/client';
+import { B as Button } from './stencil-button.js';
+import { R as RadioButton } from './stencil-radio-button.js';
+
+/**
+ * @deprecated use the lit equivalent
+ */
+const PagerPreviousButton = (props) => {
+    return (h(Button, { ...props, ariaLabel: props.i18n.t('previous'), style: "outline-primary", part: "previous-button", class: "flex min-h-10 min-w-10 items-center justify-center p-1" },
+        h("atomic-icon", { icon: props.icon, part: "previous-button-icon", class: "w-5 align-middle" })));
+};
+/**
+ * @deprecated use the lit equivalent
+ */
+const PagerNextButton = (props) => {
+    return (h(Button, { ...props, ariaLabel: props.i18n.t('next'), style: "outline-primary", part: "next-button", class: "flex min-h-10 min-w-10 items-center justify-center p-1" },
+        h("atomic-icon", { icon: props.icon, part: "next-button-icon", class: "w-5 align-middle" })));
+};
+/**
+ * @deprecated use the lit equivalent
+ */
+const PagerPageButton = (props) => {
+    return (h(RadioButton, { ...props, selectWhenFocused: false, key: props.page, style: "outline-neutral", checked: props.isSelected, ariaCurrent: props.isSelected ? 'page' : 'false', class: "btn-page focus-visible:bg-neutral-light min-h-10 min-w-10 p-1", part: `page-button${props.isSelected ? ' active-page-button' : ''}` }));
+};
+/**
+ * @deprecated use the lit equivalent
+ */
+const PagerPageButtons = (props, children) => {
+    return (h("div", { part: "page-buttons", role: "radiogroup", "aria-label": props.i18n.t('pagination'), class: "contents" }, ...children));
+};
+
+/**
+ * @deprecated use the lit equivalent
+ */
+const PagerNavigation = (props, children) => {
+    return (h("nav", { "aria-label": props.i18n.t('pagination') },
+        h("div", { part: "buttons", role: "toolbar", class: "flex flex-wrap gap-2" }, ...children)));
+};
+
+export { PagerNavigation as P, PagerPreviousButton as a, PagerPageButtons as b, PagerPageButton as c, PagerNextButton as d };
+
+//# sourceMappingURL=stencil-pager-navigation.js.map

package/dist/atomic/components/stencil-pager-navigation.js.map

@@ -0,0 +1 @@
+{"file":"stencil-pager-navigation.js","mappings":";;;;AAkCA;;;MAGa,mBAAmB,GAE5B,CAAC,KAAK;IACR,QACE,EAAC,MAAM,OACD,KAAK,EACT,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,EACnC,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAC,wDAAwD;QAE9D,mBACE,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAC,sBAAsB,EAC3B,KAAK,EAAC,kBAAkB,GACX,CACR,EACT;AACJ,EAAE;AAEF;;;MAGa,eAAe,GAExB,CAAC,KAAK;IACR,QACE,EAAC,MAAM,OACD,KAAK,EACT,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EAC/B,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,wDAAwD;QAE9D,mBACE,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAC,kBAAkB,GACX,CACR,EACT;AACJ,EAAE;AAEF;;;MAGa,eAAe,GAA8C,CACxE,KAAK;IAEL,QACE,EAAC,WAAW,OACN,KAAK,EACT,iBAAiB,EAAE,KAAK,EACxB,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,KAAK,CAAC,UAAU,EACzB,WAAW,EAAE,KAAK,CAAC,UAAU,GAAG,MAAM,GAAG,OAAO,EAChD,KAAK,EAAC,+DAA+D,EACrE,IAAI,EAAE,cAAc,KAAK,CAAC,UAAU,GAAG,qBAAqB,GAAG,EAAE,EAAE,GACtD,EACf;AACJ,EAAE;AAEF;;;MAGa,gBAAgB,GAA+C,CAC1E,KAAK,EACL,QAAQ;IAER,QACE,WACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,YAAY,gBACL,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,EACtC,KAAK,EAAC,UAAU,OAEZ,QAAQ,CACR,EACN;AACJ;;AC3GA;;;MAGa,eAAe,GAA8C,CACxE,KAAK,EACL,QAAQ;IAER,QACE,yBAAiB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC;QACzC,WAAK,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,sBAAsB,OACzD,QAAQ,CACR,CACF,EACN;AACJ;;;;","names":[],"sources":["src/components/common/pager/stencil-pager-buttons.tsx","src/components/common/pager/stencil-pager-navigation.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {Button, StencilButtonProps} from '../stencil-button';\nimport {RadioButton, StencilRadioButtonProps} from '../stencil-radio-button';\n\n/**\n * @deprecated use the lit equivalent\n */\nexport interface PagerNavigationButtonProps\n  extends Omit<StencilButtonProps, 'style' | 'part' | 'class'> {\n  icon: string;\n  i18n: i18n;\n}\n\n/**\n * @deprecated use the lit equivalent\n */\nexport interface PagerPageButtonProps\n  extends Omit<\n    StencilRadioButtonProps,\n    'part' | 'style' | 'checked' | 'ariaCurrent' | 'key' | 'class' | 'ref'\n  > {\n  page: number;\n  isSelected: boolean;\n  text: string;\n}\n\n/**\n * @deprecated use the lit equivalent\n */\nexport interface PagerPageButtonsProps {\n  i18n: i18n;\n}\n\n/**\n * @deprecated use the lit equivalent\n */\nexport const PagerPreviousButton: FunctionalComponent<\n  PagerNavigationButtonProps\n> = (props) => {\n  return (\n    <Button\n      {...props}\n      ariaLabel={props.i18n.t('previous')}\n      style=\"outline-primary\"\n      part=\"previous-button\"\n      class=\"flex min-h-10 min-w-10 items-center justify-center p-1\"\n    >\n      <atomic-icon\n        icon={props.icon}\n        part=\"previous-button-icon\"\n        class=\"w-5 align-middle\"\n      ></atomic-icon>\n    </Button>\n  );\n};\n\n/**\n * @deprecated use the lit equivalent\n */\nexport const PagerNextButton: FunctionalComponent<\n  PagerNavigationButtonProps\n> = (props) => {\n  return (\n    <Button\n      {...props}\n      ariaLabel={props.i18n.t('next')}\n      style=\"outline-primary\"\n      part=\"next-button\"\n      class=\"flex min-h-10 min-w-10 items-center justify-center p-1\"\n    >\n      <atomic-icon\n        icon={props.icon}\n        part=\"next-button-icon\"\n        class=\"w-5 align-middle\"\n      ></atomic-icon>\n    </Button>\n  );\n};\n\n/**\n * @deprecated use the lit equivalent\n */\nexport const PagerPageButton: FunctionalComponent<PagerPageButtonProps> = (\n  props\n) => {\n  return (\n    <RadioButton\n      {...props}\n      selectWhenFocused={false}\n      key={props.page}\n      style=\"outline-neutral\"\n      checked={props.isSelected}\n      ariaCurrent={props.isSelected ? 'page' : 'false'}\n      class=\"btn-page focus-visible:bg-neutral-light min-h-10 min-w-10 p-1\"\n      part={`page-button${props.isSelected ? ' active-page-button' : ''}`}\n    ></RadioButton>\n  );\n};\n\n/**\n * @deprecated use the lit equivalent\n */\nexport const PagerPageButtons: FunctionalComponent<PagerPageButtonsProps> = (\n  props,\n  children\n) => {\n  return (\n    <div\n      part=\"page-buttons\"\n      role=\"radiogroup\"\n      aria-label={props.i18n.t('pagination')}\n      class=\"contents\"\n    >\n      {...children}\n    </div>\n  );\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\n\n/**\n * @deprecated use the lit equivalent\n */\nexport interface PagerNavigationProps {\n  i18n: i18n;\n}\n\n/**\n * @deprecated use the lit equivalent\n */\nexport const PagerNavigation: FunctionalComponent<PagerNavigationProps> = (\n  props,\n  children\n) => {\n  return (\n    <nav aria-label={props.i18n.t('pagination')}>\n      <div part=\"buttons\" role=\"toolbar\" class=\"flex flex-wrap gap-2\">\n        {...children}\n      </div>\n    </nav>\n  );\n};\n"],"version":3}