@coveo/atomic 3.27.4-pre.fba84e863c → 3.27.4

package/dist/atomic/components/components/common/breadbox/breadcrumb-content.js

@@ -0,0 +1,42 @@
+import { multiClassMap, tw } from "../../../directives/multi-class-map";
+import { html } from 'lit';
+const CloseIcon = "<svg viewBox=\"0 0 22 22\"><g transform=\"matrix(.7071 -.7071 .7071 .7071 -3.142 11)\"><path d=\"m9-3.4h2v26.9h-2z\"/><path d=\"m-3.4 9h26.9v2h-26.9z\"/></g></svg>";
+import { getFirstBreadcrumbValue } from './breadcrumb-utils';
+/*
+ * breadcrumb.content is currently of type VNode from stencil.
+ * When migrating atomic-breadbox, we will first have to change what atomic-rating-facet sends as 'content' to an HtmlElement.
+ * (By doing something similar to recent-queries.ts)
+ */
+export const renderBreadcrumbContent = ({ props }) => {
+    const value = getFirstBreadcrumbValue(props.breadcrumb, props.pathLimit);
+    const isExclusion = props.breadcrumb.state === 'excluded';
+    const isSelected = props.breadcrumb.state === 'selected';
+    const isIdle = props.breadcrumb.state === 'idle';
+    const labelClass = tw({
+        'max-w-[30ch] truncate': true,
+        'group-hover:text-error group-focus-visible:text-error': isExclusion,
+        'group-hover:text-primary group-focus-visible:text-primary': !isExclusion,
+        idle: isIdle,
+        selected: isSelected,
+        excluded: isExclusion,
+    });
+    const valueClass = tw({
+        'ml-1': true,
+        'max-w-[30ch] truncate': !props.breadcrumb.content,
+        idle: isIdle && !props.breadcrumb.content,
+        selected: isSelected && !props.breadcrumb.content,
+        excluded: isExclusion && !props.breadcrumb.content,
+    });
+    return html `<span part="breadcrumb-label" class=${multiClassMap(labelClass)}>
+      ${props.i18n.t('with-colon', { text: props.breadcrumb.label })}
+    </span>
+    <span part="breadcrumb-value" class=${multiClassMap(valueClass)}>
+      ${props.breadcrumb.content ?? value}
+    </span>
+    <atomic-icon
+      part="breadcrumb-clear"
+      class="mt-px ml-2 h-2.5 w-2.5"
+      icon=${CloseIcon}
+    >
+    </atomic-icon>`;
+};

package/dist/atomic/components/components/common/breadbox/breadcrumb-show-less.js

@@ -0,0 +1,21 @@
+import { html, nothing } from 'lit';
+import { keyed } from 'lit/directives/keyed.js';
+import { renderButton } from '../button';
+export const renderBreadcrumbShowLess = ({ props }) => {
+    if (props.isCollapsed) {
+        return nothing;
+    }
+    return html `${keyed('show-less', html `
+      <li>
+        ${renderButton({
+        props: {
+            part: 'show-less',
+            style: 'outline-primary',
+            text: props.i18n.t('show-less'),
+            class: 'rounded-xl p-2',
+            onClick: props.onShowLess,
+        },
+    })(nothing)}
+      </li>
+    `)}`;
+};

package/dist/atomic/components/components/common/breadbox/breadcrumb-show-more.js

@@ -0,0 +1,23 @@
+import { html, nothing } from 'lit';
+import { keyed } from 'lit/directives/keyed.js';
+import { renderButton } from '../button';
+export const renderBreadcrumbShowMore = ({ props }) => {
+    if (!props.isCollapsed) {
+        return nothing;
+    }
+    return html `${keyed('show-more', html `
+      <li>
+        ${renderButton({
+        props: {
+            ref: (el) => props.refCallback(el),
+            part: 'show-more',
+            style: 'outline-primary',
+            text: props.value,
+            ariaLabel: props.ariaLabel,
+            class: 'rounded-xl p-2',
+            onClick: props.onShowMore,
+        },
+    })(nothing)}
+      </li>
+    `)}`;
+};

package/dist/atomic/components/components/common/breadbox/breadcrumb-types.js

@@ -0,0 +1 @@
+export {};

package/dist/atomic/components/components/common/breadbox/breadcrumb-utils.js

@@ -0,0 +1,22 @@
+const ELLIPSIS = '...';
+const SEPARATOR = ' / ';
+function limitPath(path, pathLimit) {
+    if (path.length <= pathLimit) {
+        return path.join(SEPARATOR);
+    }
+    if (pathLimit === 1 && path.length > 1) {
+        return [ELLIPSIS, path[path.length - 1]].join(SEPARATOR);
+    }
+    const ellipsedPath = [path[0], ELLIPSIS, ...path.slice(-(pathLimit - 1))];
+    return ellipsedPath.join(SEPARATOR);
+}
+export function joinBreadcrumbValues(breadcrumb) {
+    return Array.isArray(breadcrumb.formattedValue)
+        ? breadcrumb.formattedValue.join(SEPARATOR)
+        : breadcrumb.formattedValue;
+}
+export function getFirstBreadcrumbValue(breadcrumb, pathLimit) {
+    return Array.isArray(breadcrumb.formattedValue)
+        ? limitPath(breadcrumb.formattedValue, pathLimit)
+        : breadcrumb.formattedValue;
+}

package/dist/atomic/components/{formatter.js → components/common/facets/numeric-facet/formatter.js}

@@ -1,6 +1,5 @@
-import { g as getFieldValueCaption } from './field-utils.js';
-
-const formatHumanReadable = ({ manualRanges, field, i18n, facetValue, logger, formatter, }) => {
+import { getFieldValueCaption } from '../../../../utils/field-utils';
+export const formatHumanReadable = ({ manualRanges, field, i18n, facetValue, logger, formatter, }) => {
     const manualRangeLabel = manualRanges.find((range) => areRangesEqual(range, facetValue))?.label;
     return manualRangeLabel
         ? getFieldValueCaption(field, manualRangeLabel, i18n)
@@ -9,7 +8,7 @@ const formatHumanReadable = ({ manualRanges, field, i18n, facetValue, logger, fo
             end: formatNumberLocalized(facetValue.end, i18n, logger, formatter),
         });
 };
-const formatNumberLocalized = (value, i18n, logger, formatter) => {
+export const formatNumberLocalized = (value, i18n, logger, formatter) => {
     try {
         return formatter(value, i18n.languages);
     }
@@ -23,7 +22,3 @@ const areRangesEqual = (firstRange, secondRange) => {
         firstRange.end === secondRange.end &&
         firstRange.endInclusive === secondRange.endInclusive);
 };
-
-export { formatHumanReadable as f };
-
-//# sourceMappingURL=formatter.js.map

package/dist/atomic/components/components/common/formats/format-common.js

@@ -0,0 +1,15 @@
+import { buildCustomEvent } from '../../../utils/event-utils';
+export const dispatchNumberFormatEvent = (formatter, element) => {
+    const event = buildCustomEvent('atomic/numberFormat', formatter);
+    const canceled = element.dispatchEvent(event);
+    if (canceled) {
+        throw new Error('The Atomic number format component was not handled, as it is not a child of a compatible component');
+    }
+};
+export const defaultNumberFormatter = (value, languages) => value.toLocaleString(languages);
+export const defaultCurrencyFormatter = (currency) => (value, languages) => {
+    return value.toLocaleString(languages, {
+        style: 'currency',
+        currency,
+    });
+};

package/dist/atomic/components/components/common/item-list/item-list-common.js

@@ -8,6 +8,9 @@ export class ItemListCommon {
         this.props.store.setLoadingFlag(this.props.loadingFlag);
         this.props.store.state.resultList = this;
         this.updateBreakpointsOnce = once(() => updateBreakpoints(this.props.host));
+        this.props.nextNewItemTarget.registerFocusCallback(() => {
+            this.indexOfResultToFocus = undefined;
+        });
     }
     updateBreakpoints() {
         this.updateBreakpointsOnce();

package/dist/atomic/components/components/common/query-correction/auto-correction.js

@@ -0,0 +1,24 @@
+import { localizedString } from "../../../directives/localized-string";
+import { html } from 'lit';
+export const renderAutoCorrection = ({ props, }) => {
+    return html `
+    <p class="text-on-background mb-1" part="no-results">
+      ${localizedString({
+        i18n: props.i18n,
+        key: 'no-results-for-did-you-mean',
+        params: {
+            query: html `<b part="highlight">${props.originalQuery}</b>`,
+        },
+    })}
+    </p>
+    <p class="text-on-background" part="auto-corrected">
+      ${localizedString({
+        i18n: props.i18n,
+        key: 'query-auto-corrected-to',
+        params: {
+            query: html `<b part="highlight">${props.correctedTo}</b>`,
+        },
+    })}
+    </p>
+  `;
+};

package/dist/atomic/components/components/common/query-correction/correction.js

@@ -0,0 +1,21 @@
+import { localizedString } from "../../../directives/localized-string";
+import { html } from 'lit';
+export const renderCorrection = ({ props, }) => {
+    return html `
+    <p class="text-on-background" part="did-you-mean">
+      ${localizedString({
+        i18n: props.i18n,
+        key: 'did-you-mean',
+        params: {
+            query: html `<button
+            class="text-primary hover:text-primary-light focus-visible:text-primary-light py-1 hover:underline focus-visible:underline"
+            part="correction-btn"
+            @click=${props.onClick}
+          >
+            ${props.correctedQuery}
+          </button>`,
+        },
+    })}
+    </p>
+  `;
+};

package/dist/atomic/components/components/common/query-correction/trigger-correction.js

@@ -0,0 +1,28 @@
+import { localizedString } from "../../../directives/localized-string";
+import { html } from 'lit';
+export const renderTriggerCorrection = ({ props, }) => {
+    return html `
+    <p class="text-on-background text-lg leading-6" part="showing-results-for">
+      ${localizedString({
+        i18n: props.i18n,
+        key: 'showing-results-for',
+        params: { query: html `<b part="highlight">${props.correctedQuery}</b>` },
+    })}
+    </p>
+    <p class="text-on-background text-base leading-5" part="search-instead-for">
+      ${localizedString({
+        i18n: props.i18n,
+        key: 'search-instead-for',
+        params: {
+            query: html `<button
+            class="text-primary hover:text-primary-light focus-visible:text-primary-light py-1 hover:underline focus-visible:underline"
+            part="undo-btn"
+            @click=${props.onClick}
+          >
+            ${props.originalQuery}
+          </button>`,
+        },
+    })}
+    </p>
+  `;
+};

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

@@ -1,6 +1,6 @@
-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';
+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";
 /**
  * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.
  *

package/dist/atomic/components/decorators/light-dom.js

@@ -1,3 +1,19 @@
+/**
+ * Decorator to inject styles into components that do not use Shadow DOM.
+ *
+ * This decorator is intended for LitElement-based components that render in the light DOM (i.e., without a shadow root).
+ * It ensures that the component's styles (provided as static `styles` property) are injected into the document or shadow root using `adoptedStyleSheets`.
+ *
+ * Usage:
+ *   @injectStylesForNoShadowDOM
+ *   class MyComponent extends LitElement { ... }
+ *
+ * - Ensures styles are applied even when Shadow DOM is not used.
+ * - Prevents duplicate style injection by checking for existing style sheets.
+ * - Calls the original `connectedCallback` and `createRenderRoot` methods.
+ *
+ * @template T - A LitElement constructor with a static `styles` property.
+ */
 export const injectStylesForNoShadowDOM = (Base) => {
     return class extends Base {
         createRenderRoot() {

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

@@ -1 +1 @@
-{"file":"error.js","mappings":"MAAa,oBAAqB,SAAQ,KAAK;IAC7C,YAAY,KAAa,EAAE,KAAU;QACnC,KAAK,CAAC,oBAAoB,KAAK,iBAAiB,KAAK,gBAAgB,CAAC,CAAC;QACvE,IAAI,CAAC,IAAI,GAAG,sBAAsB,CAAC;KACpC;;;;;","names":[],"sources":["src/components/commerce/product-template-components/error.ts"],"sourcesContent":["export class FieldValueIsNaNError extends Error {\n  constructor(field: string, value?: {}) {\n    super(`Could not parse \"${value}\" from field \"${field}\" as a number.`);\n    this.name = 'FieldValueIsNaNError';\n  }\n}\n"],"version":3}
+{"file":"error.js","mappings":"MAAa,oBAAqB,SAAQ,KAAK;IAC7C,YAAY,KAAa,EAAE,KAAU;QACnC,KAAK,CAAC,oBAAoB,KAAK,iBAAiB,KAAK,gBAAgB,CAAC,CAAC;QACvE,IAAI,CAAC,IAAI,GAAG,sBAAsB,CAAC;KACpC;;;;;","names":[],"sources":["src/components/commerce/product-template-component-utils/error.ts"],"sourcesContent":["export class FieldValueIsNaNError extends Error {\n  constructor(field: string, value?: {}) {\n    super(`Could not parse \"${value}\" from field \"${field}\" as a number.`);\n    this.name = 'FieldValueIsNaNError';\n  }\n}\n"],"version":3}

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

@@ -15,6 +15,6 @@ const defaultCurrencyFormatter = (currency) => (value, languages) => {
     });
 };
 
-export { defaultNumberFormatter as a, dispatchNumberFormatEvent as b, defaultCurrencyFormatter as d };
+export { dispatchNumberFormatEvent as a, defaultNumberFormatter as b, defaultCurrencyFormatter as d };
 
 //# sourceMappingURL=format-common.js.map

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

@@ -4,7 +4,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment() {
     return {
-        version: "3.27.4-pre.fba84e863c".VERSION,
+        version: "3.27.4".VERSION,
         headlessVersion: VERSION,
     };
 }

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

@@ -1 +1 @@
-{"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;;;;","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-components/product-template-decorators.ts"],"sourcesContent":["import {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\nimport {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\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 {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport {LitElement} from 'lit';\nimport {\n  InteractiveItemContextController,\n  InteractiveItemContextEvent,\n} from '../../common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  ItemContextEvent,\n} from '../../common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '../../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;;ACkDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["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 {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\nimport {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\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 {InteractiveItemContextController} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {InteractiveItemContextEvent} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\nimport {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport {LitElement} from 'lit';\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/interface-common-stencil.js

@@ -2220,7 +2220,7 @@ function getWindow() {
 }
 function getAtomicEnvironment() {
     return {
-        version: "3.27.4-pre.fba84e863c",
+        version: "3.27.4",
         headlessVersion: VERSION,
     };
 }