@coveo/atomic 3.33.8-pre.f62f2d7753 → 3.33.8-pre.f660526fae

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/commerce/atomic-product-children/atomic-product-children.js

@@ -7,8 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { ProductTemplatesHelpers } from '@coveo/headless/commerce';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { createProductContextController } from "../product-template-component-utils/product-template-controllers";
 import { bindings } from "../../../decorators/bindings";
-import { createProductContextController } from "../../../decorators/commerce/product-template-decorators";
 import { errorGuard } from "../../../decorators/error-guard";
 import { filterProtocol } from '../../../utils/xss-utils';
 import { renderButton } from '../../common/button';

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

@@ -8,10 +8,10 @@ import { Schema, StringValue } from '@coveo/bueno';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { createRef } from 'lit/directives/ref.js';
+import { createProductContextController } from "../product-template-component-utils/product-template-controllers.js";
 import { booleanConverter } from "../../../converters/boolean-converter.js";
 import { bindingGuard } from "../../../decorators/binding-guard.js";
 import { bindings } from "../../../decorators/bindings.js";
-import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
 import { errorGuard } from "../../../decorators/error-guard.js";
 import { renderExpandableText, } from '../../common/expandable-text/expandable-text.js';
 import '../atomic-product-text/atomic-product-text.js';

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

@@ -8,10 +8,10 @@ import { Schema, StringValue } from '@coveo/bueno';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { createRef } from 'lit/directives/ref.js';
+import { createProductContextController } from "../product-template-component-utils/product-template-controllers";
 import { booleanConverter } from "../../../converters/boolean-converter";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
-import { createProductContextController } from "../../../decorators/commerce/product-template-decorators";
 import { errorGuard } from "../../../decorators/error-guard";
 import { renderExpandableText, } from '../../common/expandable-text/expandable-text';
 import '../atomic-product-text/atomic-product-text.js';

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

@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { createProductContextController } from "../product-template-component-utils/product-template-controllers";
 import { bindings } from "../../../decorators/bindings";
-import { createProductContextController } from "../../../decorators/commerce/product-template-decorators";
 import { errorGuard } from "../../../decorators/error-guard";
 import { LightDomMixin } from "../../../mixins/light-dom";
 import { mapProperty } from "../../../utils/props-utils";

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

@@ -9,10 +9,10 @@ import { ProductTemplatesHelpers } from '@coveo/headless/commerce';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import { createProductContextController } from "../product-template-component-utils/product-template-controllers";
 import { renderImageCarousel } from "../../common/image-carousel/image-carousel";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
-import { createProductContextController } from "../../../decorators/commerce/product-template-decorators";
 import { errorGuard } from "../../../decorators/error-guard";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { filterProtocol } from "../../../utils/xss-utils";

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

@@ -8,11 +8,11 @@ import { isUndefined } from '@coveo/bueno';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import { createInteractiveProductContextController, createProductContextController, } from "../product-template-component-utils/product-template-controllers.js";
 import { getAttributesFromLinkSlot } from "../../common/item-link/attributes-slot";
 import { renderLinkWithItemAnalytics } from "../../common/item-link/item-link";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
-import { createInteractiveProductContextController, createProductContextController, } from "../../../decorators/commerce/product-template-decorators.js";
 import { errorGuard } from "../../../decorators/error-guard";
 import { buildCustomEvent } from "../../../utils/event-utils";
 import { buildStringTemplateFromProduct } from '../product-template-component-utils/product-utils';

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

@@ -7,9 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { buildProductListing, buildSearch, ProductTemplatesHelpers, } from '@coveo/headless/commerce';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { createProductContextController } from "../product-template-component-utils/product-template-controllers";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
-import { createProductContextController } from "../../../decorators/commerce/product-template-decorators";
 import { errorGuard } from "../../../decorators/error-guard";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
 import { getFieldValueCaption } from '../../../utils/field-utils';

package/dist/atomic/components/components/commerce/atomic-product-numeric-field-value/atomic-product-numeric-field-value.js

@@ -7,9 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import { createProductContextController } from "../product-template-component-utils/product-template-controllers.js";
 import { bindingGuard } from "../../../decorators/binding-guard.js";
 import { bindings } from "../../../decorators/bindings.js";
-import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
 import { errorGuard } from "../../../decorators/error-guard.js";
 import { LightDomMixin } from "../../../mixins/light-dom.js";
 import { defaultNumberFormatter, } from '../../common/formats/format-common.js';

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

@@ -7,10 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { buildContext, } from '@coveo/headless/commerce';
 import { css, html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
+import { createProductContextController } from "../product-template-component-utils/product-template-controllers.js";
 import { bindStateToController } from "../../../decorators/bind-state.js";
 import { bindingGuard } from "../../../decorators/binding-guard.js";
 import { bindings } from "../../../decorators/bindings.js";
-import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
 import { errorGuard } from "../../../decorators/error-guard.js";
 import { multiClassMap, tw } from "../../../directives/multi-class-map.js";
 import { LightDomMixin } from "../../../mixins/light-dom.js";

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

@@ -8,11 +8,11 @@ import { ProductTemplatesHelpers } from '@coveo/headless/commerce';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import { createProductContextController } from "../product-template-component-utils/product-template-controllers.js";
 import ratingStyles from "../../common/atomic-rating/atomic-rating.tw.css.js";
 import { computeNumberOfStars } from "../../common/atomic-rating/rating-utils.js";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings.js";
-import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
 import { errorGuard } from "../../../decorators/error-guard";
 import { LightDomMixin } from "../../../mixins/light-dom";
 const Star = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\">\n  <path\n    d=\"m 2.6226137,7.5483827 -1.73646599,-1.67659 c -0.58287,-0.56277 -0.2895686,-1.54878 0.50612799,-1.70148 l 2.630348,-0.50477 c 0.31897,-0.06121 0.58834,-0.27352 0.72239,-0.56935 l 0.84414,-1.86293 c 0.35481,-0.78302702 1.46689,-0.78302802 1.8217,0 l 0.84414,1.86293 c 0.13405,0.29583 0.40342,0.50814 0.72239,0.56935 l 2.6303203,0.50477 c 0.7957,0.1527 1.089,1.13871 0.5062,1.70148 l -1.73651,1.67659 c -0.23632,0.22817 -0.34551,0.55786 -0.2921,0.88198 l 0.45461,2.7587403 c 0.1357,0.824 -0.7386003,1.4416 -1.4698203,1.0382 l -2.087,-1.1515 c -0.30069,-0.1659 -0.66547,-0.1659 -0.96616,0 l -2.087,1.1515 c -0.73122,0.4034 -1.60555,-0.2142 -1.46978,-1.0382 l 0.45457,-2.7587403 c 0.05341,-0.32412 -0.05578,-0.65381 -0.2921,-0.88198 z\"\n    stroke-width=\"0.8125\"\n  />\n</svg>";

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

@@ -8,10 +8,10 @@ import { HighlightUtils, ProductTemplatesHelpers, } from '@coveo/headless/commer
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import { createProductContextController } from "../product-template-component-utils/product-template-controllers.js";
 import { booleanConverter } from "../../../converters/boolean-converter";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
-import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
 import { errorGuard } from "../../../decorators/error-guard";
 import { getFieldValueCaption } from '../../../utils/field-utils';
 import { renderItemTextFallback } from '../../common/item-text/item-text-fallback.js';

package/dist/atomic/components/{decorators/commerce/product-template-decorators.js → components/commerce/product-template-component-utils/product-template-controllers.js}

@@ -1,6 +1,6 @@
-import { InteractiveItemContextController, } from "../../components/common/item-list/context/interactive-item-context-controller";
-import { ItemContextController, } from "../../components/common/item-list/context/item-context-controller";
-import { fetchItemContext } from "../../components/common/item-list/fetch-item-context";
+import { InteractiveItemContextController, } from "../../common/item-list/context/interactive-item-context-controller";
+import { ItemContextController, } from "../../common/item-list/context/item-context-controller";
+import { fetchItemContext } from "../../common/item-list/fetch-item-context";
 /**
  * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.
  *

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/common/layout/layout-styles-controller.js

@@ -0,0 +1,40 @@
+import { randomID } from "../../../utils/utils";
+/**
+ * A reactive controller that manages dynamic layout styles.
+ */
+export class LayoutStylesController {
+    constructor(host, stylesBuilder, componentPrefix) {
+        this.dynamicStyleSheet = null;
+        this.host = host;
+        this.stylesBuilder = stylesBuilder;
+        this.componentPrefix = componentPrefix;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        if (!this.host.id) {
+            this.host.id = randomID(this.componentPrefix);
+        }
+        this.host.updateComplete.then(() => this.updateStyles());
+    }
+    /**
+     * Updates the dynamic styles based on the current mobile breakpoint
+     */
+    updateStyles() {
+        const parent = this.host.getRootNode();
+        const isDocumentOrShadowRoot = parent instanceof Document || parent instanceof ShadowRoot;
+        if (!isDocumentOrShadowRoot) {
+            return;
+        }
+        const newStylesCSS = this.stylesBuilder(this.host, this.host.mobileBreakpoint);
+        if (!this.dynamicStyleSheet) {
+            this.dynamicStyleSheet = new CSSStyleSheet();
+            this.dynamicStyleSheet.replaceSync(newStylesCSS);
+            parent.adoptedStyleSheets = [
+                ...parent.adoptedStyleSheets,
+                this.dynamicStyleSheet,
+            ];
+            return;
+        }
+        this.dynamicStyleSheet.replaceSync(newStylesCSS);
+    }
+}

package/dist/atomic/components/components/common/layout/mobile-breakpoint-controller.js

@@ -0,0 +1,26 @@
+/**
+ * A reactive controller that manages mobile breakpoint changes through event communication.
+ * This controller listens for 'atomic-layout-breakpoint-change' events and updates a store
+ * with the new breakpoint value.
+ */
+export class MobileBreakpointController {
+    constructor(host, store) {
+        this.host = host;
+        this.store = store;
+        this.eventListener = this.handleBreakpointChange.bind(this);
+        this.host.addController(this);
+    }
+    hostConnected() {
+        this.host.addEventListener('atomic-layout-breakpoint-change', this.eventListener);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('atomic-layout-breakpoint-change', this.eventListener);
+    }
+    handleBreakpointChange(e) {
+        const customEvent = e;
+        const newBreakpoint = customEvent.detail?.breakpoint;
+        if (newBreakpoint && this.store.state.mobileBreakpoint !== newBreakpoint) {
+            this.store.state.mobileBreakpoint = newBreakpoint;
+        }
+    }
+}

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

@@ -1,5 +1,4 @@
 // Auto-generated file
 export { AtomicQuerySummary } from './atomic-query-summary/atomic-query-summary.js';
 export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';
-export { AtomicSearchBoxQuerySuggestions } from './atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.js';
 export { AtomicSearchLayout } from './atomic-search-layout/atomic-search-layout.js';

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

@@ -2,6 +2,5 @@
 export default {
     '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-box-query-suggestions': async () => await import('./atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.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.f62f2d7753",
+        version: "3.33.8-pre.f660526fae",
         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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAca,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;;ACrFA;;;;;;;;;;;;SAYgB,cAAc,CAAoB,OAAgB;IAChE,OAAO,WAAW,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACnD;;;;","names":[],"sources":["src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/components/commerce/product-template-component-utils/product-template-controllers.ts","src/components/commerce/product-template-component-utils/stencil-product-template-decorators.tsx"],"sourcesContent":["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","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/components/commerce/product-template-component-utils/product-template-controllers.ts\n */\nexport function productContext<T extends Product>(element: Element) {\n  return itemContext<T>(element, 'atomic-product');\n}\n"],"version":3}

package/dist/atomic/components/stencil-query-suggestions.js

@@ -0,0 +1,33 @@
+import { h } from '@stencil/core/internal/client';
+import { e as encodeForDomAttribute } from './string-utils.js';
+
+const getPartialSearchBoxSuggestionElement = (suggestion, i18n) => {
+    return {
+        part: 'query-suggestion-item',
+        key: `qs-${encodeForDomAttribute(suggestion.rawValue)}`,
+        query: suggestion.rawValue,
+        ariaLabel: i18n.t('query-suggestion-label', {
+            query: suggestion.rawValue,
+            interpolation: { escapeValue: false },
+        }),
+    };
+};
+const QuerySuggestionContainer = (_, children) => {
+    return (h("div", { part: "query-suggestion-content", class: "flex items-center" }, children));
+};
+const QuerySuggestionIcon = ({ icon, hasSuggestion }) => {
+    if (!hasSuggestion) {
+        return;
+    }
+    return (h("atomic-icon", { part: "query-suggestion-icon", icon: icon, class: "mr-2 h-4 w-4 shrink-0" }));
+};
+const QuerySuggestionText = ({ suggestion, hasQuery }) => {
+    if (hasQuery) {
+        return (h("span", { part: "query-suggestion-text", class: "line-clamp-2 break-all", innerHTML: suggestion.highlightedValue }));
+    }
+    return (h("span", { part: "query-suggestion-text", class: "line-clamp-2 break-all" }, suggestion.rawValue));
+};
+
+export { QuerySuggestionContainer as Q, QuerySuggestionIcon as a, QuerySuggestionText as b, getPartialSearchBoxSuggestionElement as g };
+
+//# sourceMappingURL=stencil-query-suggestions.js.map

package/dist/atomic/components/stencil-query-suggestions.js.map

@@ -0,0 +1 @@
+{"file":"stencil-query-suggestions.js","mappings":";;;MAUa,oCAAoC,GAAG,CAClD,UAAsB,EACtB,IAAU;IAEV,OAAO;QACL,IAAI,EAAE,uBAAuB;QAC7B,GAAG,EAAE,MAAM,qBAAqB,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;QACvD,KAAK,EAAE,UAAU,CAAC,QAAQ;QAC1B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,wBAAwB,EAAE;YAC1C,KAAK,EAAE,UAAU,CAAC,QAAQ;YAC1B,aAAa,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC;SACpC,CAAC;KACH,CAAC;AACJ,EAAE;MAEW,wBAAwB,GAAwB,CAAC,CAAC,EAAE,QAAQ;IACvE,QACE,WAAK,IAAI,EAAC,0BAA0B,EAAC,KAAK,EAAC,mBAAmB,IAC3D,QAAQ,CACL,EACN;AACJ,EAAE;MAOW,mBAAmB,GAE5B,CAAC,EAAC,IAAI,EAAE,aAAa,EAAC;IACxB,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO;KACR;IAED,QACE,mBACE,IAAI,EAAC,uBAAuB,EAC5B,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,uBAAuB,GAChB,EACf;AACJ,EAAE;MAOW,mBAAmB,GAE5B,CAAC,EAAC,UAAU,EAAE,QAAQ,EAAC;IACzB,IAAI,QAAQ,EAAE;QACZ,QACE,YACE,IAAI,EAAC,uBAAuB,EAC5B,KAAK,EAAC,wBAAwB,EAC9B,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAChC,EACR;KACH;IAED,QACE,YAAM,IAAI,EAAC,uBAAuB,EAAC,KAAK,EAAC,wBAAwB,IAC9D,UAAU,CAAC,QAAQ,CACf,EACP;AACJ;;;;","names":[],"sources":["src/components/common/suggestions/stencil-query-suggestions.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {encodeForDomAttribute} from '../../../utils/string-utils.js';\nimport {SearchBoxSuggestionElement} from './suggestions-types.js';\n\ninterface Suggestion {\n  highlightedValue: string;\n  rawValue: string;\n}\n\nexport const getPartialSearchBoxSuggestionElement = (\n  suggestion: Suggestion,\n  i18n: i18n\n): Pick<SearchBoxSuggestionElement, 'ariaLabel' | 'key' | 'query' | 'part'> => {\n  return {\n    part: 'query-suggestion-item',\n    key: `qs-${encodeForDomAttribute(suggestion.rawValue)}`,\n    query: suggestion.rawValue,\n    ariaLabel: i18n.t('query-suggestion-label', {\n      query: suggestion.rawValue,\n      interpolation: {escapeValue: false},\n    }),\n  };\n};\n\nexport const QuerySuggestionContainer: FunctionalComponent = (_, children) => {\n  return (\n    <div part=\"query-suggestion-content\" class=\"flex items-center\">\n      {children}\n    </div>\n  );\n};\n\ninterface QuerySuggestionIconProps {\n  icon: string;\n  hasSuggestion: boolean;\n}\n\nexport const QuerySuggestionIcon: FunctionalComponent<\n  QuerySuggestionIconProps\n> = ({icon, hasSuggestion}) => {\n  if (!hasSuggestion) {\n    return;\n  }\n\n  return (\n    <atomic-icon\n      part=\"query-suggestion-icon\"\n      icon={icon}\n      class=\"mr-2 h-4 w-4 shrink-0\"\n    ></atomic-icon>\n  );\n};\n\ninterface QuerySuggestionTextProps {\n  suggestion: Suggestion;\n  hasQuery: boolean;\n}\n\nexport const QuerySuggestionText: FunctionalComponent<\n  QuerySuggestionTextProps\n> = ({suggestion, hasQuery}) => {\n  if (hasQuery) {\n    return (\n      <span\n        part=\"query-suggestion-text\"\n        class=\"line-clamp-2 break-all\"\n        innerHTML={suggestion.highlightedValue}\n      ></span>\n    );\n  }\n\n  return (\n    <span part=\"query-suggestion-text\" class=\"line-clamp-2 break-all\">\n      {suggestion.rawValue}\n    </span>\n  );\n};\n"],"version":3}

package/dist/atomic/components/{result-template-decorators.js → stencil-result-template-decorators.js}

@@ -8,6 +8,8 @@ import { I as ItemContext, a as InteractiveItemContext, i as itemContext } from
  * @ResultContext() private result!: Result;
  *
  * For more information and examples, view the "Utilities" section of the readme.
+ *
+ * @deprecated should only be used for Stencil components. For Lit components, use `createResultContextController` from \@/src/components/search/result-template-component-utils/result-template-controllers.ts
  */
 function ResultContext(opts = { folded: false }) {
     return ItemContext({ parentName: 'atomic-result', folded: opts.folded });
@@ -22,8 +24,10 @@ function InteractiveResultContext() {
  *
  * 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).
  *
- * @param element The element that the event is dispatched to, which must be the child of a rendered "atomic-result".
+ * @param element The element that the event is dispatched to, which must be the child of a rendered "atomic-result" element.
  * @returns A promise that resolves on initialization of the parent "atomic-result" element, or rejects when there is no parent "atomic-result" element.
+ *
+ * @deprecated should only be used for Stencil components. For Lit components, use `fetchResultContext` from \@/src/components/search/result-template-component-utils/result-template-controllers.ts
  */
 function resultContext(element) {
     return itemContext(element, 'atomic-result');
@@ -31,4 +35,4 @@ function resultContext(element) {
 
 export { InteractiveResultContext as I, ResultContext as R, resultContext as r };
 
-//# sourceMappingURL=result-template-decorators.js.map
+//# sourceMappingURL=stencil-result-template-decorators.js.map

package/dist/atomic/components/stencil-result-template-decorators.js.map

@@ -0,0 +1 @@
+{"file":"stencil-result-template-decorators.js","mappings":";;AASA;;;;;;;;;;;SAWgB,aAAa,CAAC,OAA0B,EAAC,MAAM,EAAE,KAAK,EAAC;IACrE,OAAO,WAAW,CAAC,EAAC,UAAU,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC,CAAC,CAAC;AACzE,CAAC;SAEe,wBAAwB;IACtC,OAAO,sBAAsB,EAAE,CAAC;AAClC,CAAC;AAKD;;;;;;;;;;;;SAYgB,aAAa,CAC3B,OAAgB;IAEhB,OAAO,WAAW,CAAI,OAAO,EAAE,eAAe,CAAC,CAAC;AAClD;;;;","names":[],"sources":["src/components/search/result-template-component-utils/stencil-result-template-decorators.tsx"],"sourcesContent":["import {FoldedResult, Result} from '@coveo/headless';\nimport {\n  InteractiveItemContext,\n  InteractiveItemContextEvent,\n  ItemContext,\n  ItemContextEvent,\n  itemContext,\n} from '../../common/item-list/stencil-item-decorators';\n\n/**\n * A [StencilJS property decorator](https://stenciljs.com/) to be used for result template components.\n * This allows the Stencil component to fetch the current result from its rendered parent, the `atomic-result` component.\n *\n * Example:\n * @ResultContext() private result!: Result;\n *\n * For more information and examples, view the \"Utilities\" section of the readme.\n * \n * @deprecated should only be used for Stencil components. For Lit components, use `createResultContextController` from \\@/src/components/search/result-template-component-utils/result-template-controllers.ts\n */\nexport function ResultContext(opts: {folded: boolean} = {folded: false}) {\n  return ItemContext({parentName: 'atomic-result', folded: opts.folded});\n}\n\nexport function InteractiveResultContext() {\n  return InteractiveItemContext();\n}\n\nexport type ResultContextEvent<T = Result> = ItemContextEvent<T>;\nexport type InteractiveResultContextEvent = InteractiveItemContextEvent;\n\n/**\n * Retrieves `Result` on a rendered `atomic-result`.\n *\n * This method is useful for building custom result template elements, see [Create a Result List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-result-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-result\" element.\n * @returns A promise that resolves on initialization of the parent \"atomic-result\" element, or rejects when there is no parent \"atomic-result\" element.\n * \n * @deprecated should only be used for Stencil components. For Lit components, use `fetchResultContext` from \\@/src/components/search/result-template-component-utils/result-template-controllers.ts\n */\nexport function resultContext<T extends Result | FoldedResult = Result>(\n  element: Element\n) {\n  return itemContext<T>(element, 'atomic-result');\n}\n"],"version":3}

package/dist/atomic/index.esm.js

@@ -1,2 +1,2 @@
-import{i as o}from"./p-3dc06261.js";export{d as dispatchSearchBoxSuggestionsEvent}from"./p-4b7a19db.js";export{e as elementHasNoQuery,a as elementHasQuery}from"./p-0a051b8d.js";export{r as resultContext}from"./p-18684d4c.js";import{c as t}from"./p-c9074946.js";import{b as s}from"./p-1580513b.js";export{i as initializeBindings}from"./p-ff2d324d.js";export{b as bindLogDocumentOpenOnResult}from"./p-c3cb3e0c.js";export{M as MissingInterfaceParentError}from"./p-cae02339.js";import"./p-dc3df5ce.js";import"./p-05de7ca3.js";import"@coveo/headless";function n(e){return o(e,"atomic-product")}class c extends Error{constructor(e,r){super(`The "${e}" element must be the child of an "${r}" element.`)}}const p="atomic/resolveResult";function m(e,r){return new Promise(((o,n)=>{const a=s(p,(e=>o(e)));e.dispatchEvent(a);if(!t(e,r)){n(new c(e.nodeName.toLowerCase(),r))}}))}function f(e){return m(e,"atomic-product")}export{f as fetchProductContext,n as productContext};
+import{c as o}from"./p-c9074946.js";import{b as t}from"./p-1580513b.js";import{i as s}from"./p-3dc06261.js";export{d as dispatchSearchBoxSuggestionsEvent}from"./p-4b7a19db.js";export{e as elementHasNoQuery,a as elementHasQuery}from"./p-0a051b8d.js";export{r as resultContext}from"./p-38f38674.js";export{i as initializeBindings}from"./p-ff2d324d.js";export{b as bindLogDocumentOpenOnResult}from"./p-c3cb3e0c.js";export{M as MissingInterfaceParentError}from"./p-cae02339.js";import"./p-dc3df5ce.js";import"./p-05de7ca3.js";import"@coveo/headless";class n extends Error{constructor(e,r){super(`The "${e}" element must be the child of an "${r}" element.`)}}const c="atomic/resolveResult";function p(e,r){return new Promise(((s,p)=>{const a=t(c,(e=>s(e)));e.dispatchEvent(a);if(!o(e,r)){p(new n(e.nodeName.toLowerCase(),r))}}))}function m(e){return p(e,"atomic-product")}function f(e){return s(e,"atomic-product")}export{m as fetchProductContext,f as productContext};
 //# sourceMappingURL=index.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["productContext","element","itemContext","MissingParentError","Error","constructor","elementName","parentName","super","itemContextEventName","fetchItemContext","Promise","resolve","reject","event","buildCustomEvent","item","dispatchEvent","closest","nodeName","toLowerCase","fetchProductContext"],"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"],"mappings":"2iBAegBA,EAAkCC,GAChD,OAAOC,EAAeD,EAAS,iBACjC,C,MCHaE,UAA2BC,MACtC,WAAAC,CAAYC,EAAqBC,GAC/BC,MACE,QAAQF,uCAAiDC,c,ECb/D,MAAME,EAAuB,uB,SAIbC,EAAoBT,EAAkBM,GACpD,OAAO,IAAII,SAAW,CAACC,EAASC,KAC9B,MAAMC,EAAQC,EACZN,GACCO,GACQJ,EAAQI,KAGnBf,EAAQgB,cAAcH,GAEtB,IAAKI,EAAQjB,EAASM,GAAa,CACjCM,EACE,IAAIV,EAAmBF,EAAQkB,SAASC,cAAeb,G,IAI/D,C,SC8DgBc,EAAuCpB,GACrD,OAAOS,EAAoBT,EAAS,iBACtC,Q","ignoreList":[]}
+{"version":3,"names":["MissingParentError","Error","constructor","elementName","parentName","super","itemContextEventName","fetchItemContext","element","Promise","resolve","reject","event","buildCustomEvent","item","dispatchEvent","closest","nodeName","toLowerCase","fetchProductContext","productContext","itemContext"],"sources":["src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/components/commerce/product-template-component-utils/product-template-controllers.ts","src/components/commerce/product-template-component-utils/stencil-product-template-decorators.tsx"],"sourcesContent":["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","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/components/commerce/product-template-component-utils/product-template-controllers.ts\n */\nexport function productContext<T extends Product>(element: Element) {\n  return itemContext<T>(element, 'atomic-product');\n}\n"],"mappings":"wiBAcaA,UAA2BC,MACtC,WAAAC,CAAYC,EAAqBC,GAC/BC,MACE,QAAQF,uCAAiDC,c,ECb/D,MAAME,EAAuB,uB,SAIbC,EAAoBC,EAAkBJ,GACpD,OAAO,IAAIK,SAAW,CAACC,EAASC,KAC9B,MAAMC,EAAQC,EACZP,GACCQ,GACQJ,EAAQI,KAGnBN,EAAQO,cAAcH,GAEtB,IAAKI,EAAQR,EAASJ,GAAa,CACjCO,EACE,IAAIX,EAAmBQ,EAAQS,SAASC,cAAed,G,IAI/D,C,SC8DgBe,EAAuCX,GACrD,OAAOD,EAAoBC,EAAS,iBACtC,C,SCzEgBY,EAAkCZ,GAChD,OAAOa,EAAeb,EAAS,iBACjC,Q","ignoreList":[]}