@coveo/atomic 3.34.0-pre.cf62afc8af → 3.34.0-pre.d29cb64477

package/dist/atomic/components/atomic-smart-snippet-source2.js.map

@@ -1 +1 @@
-{"file":"atomic-smart-snippet-source2.js","mappings":";;;;;;;;;;;;;;;;MA4Ba,wBAAwB;;;;;;;;;;;IAc5B,aAAa,CAAC,KAAiC;QACpD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,EAAC,qBAAqB,qDACpB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC3B,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC1B,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAC,YAAY,EACjB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EACjC,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,EACxC,oBAAoB,EAAE,MAAM,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,EAChE,qBAAqB,EAAE,MAAM,IAAI,CAAC,yBAAyB,CAAC,IAAI,EAAE,IAEjE,IAAI,CAAC,MAAM,CAAC,QAAQ,CACC,EACxB,EAAC,qBAAqB,qDACpB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EACxB,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC1B,UAAU,EAAE,IAAI,CAAC,gBAAgB,EACjC,SAAS,EAAC,OAAO,EACjB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,EACxC,oBAAoB,EAAE,MAAM,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,EAChE,qBAAqB,EAAE,MAAM,IAAI,CAAC,yBAAyB,CAAC,IAAI,EAAE,IAElE,0BACE,KAAK,EAAC,OAAO,EACb,OAAO,EAAC,UAAU,EAClB,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,GACL,CACA,CACnB,EACP;KACH;;;;;;AApD4B;IAA5B,kBAAkB,EAAE;0DAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/common/smart-snippets/atomic-smart-snippet-source.tsx"],"sourcesContent":["import {Result} from '@coveo/headless';\nimport {\n  Component,\n  Prop,\n  h,\n  Listen,\n  State,\n  EventEmitter,\n  Event,\n  Host,\n} from '@stencil/core';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {ResultContextEvent} from '../../search/result-template-components/result-template-decorators';\nimport {AnyBindings} from '../interface/bindings';\nimport {LinkWithItemAnalytics} from '../item-link/stencil-item-link';\n\n/**\n * @part source-url\n * @part source-title\n * @internal\n */\n@Component({\n  tag: 'atomic-smart-snippet-source',\n  shadow: false,\n})\nexport class AtomicSmartSnippetSource\n  implements InitializableComponent<AnyBindings>\n{\n  @InitializeBindings() public bindings!: AnyBindings;\n  @Prop({reflect: true, mutable: true}) source!: Result;\n  @Prop() anchorAttributes?: Attr[];\n\n  @Event() selectSource!: EventEmitter;\n  @Event() beginDelayedSelectSource!: EventEmitter;\n  @Event() cancelPendingSelectSource!: EventEmitter;\n\n  @State() public error!: Error;\n\n  @Listen('atomic/resolveResult')\n  public resolveResult(event: ResultContextEvent<Result>) {\n    event.preventDefault();\n    event.stopPropagation();\n    if (this.source) {\n      event.detail(this.source);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <LinkWithItemAnalytics\n          title={this.source.clickUri}\n          href={this.source.clickUri}\n          className=\"block truncate\"\n          part=\"source-url\"\n          attributes={this.anchorAttributes}\n          onSelect={() => this.selectSource.emit()}\n          onBeginDelayedSelect={() => this.beginDelayedSelectSource.emit()}\n          onCancelPendingSelect={() => this.cancelPendingSelectSource.emit()}\n        >\n          {this.source.clickUri}\n        </LinkWithItemAnalytics>\n        <LinkWithItemAnalytics\n          title={this.source.title}\n          href={this.source.clickUri}\n          attributes={this.anchorAttributes}\n          className=\"block\"\n          part=\"source-title\"\n          onSelect={() => this.selectSource.emit()}\n          onBeginDelayedSelect={() => this.beginDelayedSelectSource.emit()}\n          onCancelPendingSelect={() => this.cancelPendingSelectSource.emit()}\n        >\n          <atomic-result-text\n            field=\"title\"\n            default=\"no-title\"\n            key={this.source.uniqueId}\n          ></atomic-result-text>\n        </LinkWithItemAnalytics>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-smart-snippet-source2.js","mappings":";;;;;;;;;;;;;;;;MA4Ba,wBAAwB;;;;;;;;;;;IAc5B,aAAa,CAAC,KAAiC;QACpD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,EAAC,qBAAqB,qDACpB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC3B,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC1B,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAC,YAAY,EACjB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EACjC,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,EACxC,oBAAoB,EAAE,MAAM,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,EAChE,qBAAqB,EAAE,MAAM,IAAI,CAAC,yBAAyB,CAAC,IAAI,EAAE,IAEjE,IAAI,CAAC,MAAM,CAAC,QAAQ,CACC,EACxB,EAAC,qBAAqB,qDACpB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EACxB,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC1B,UAAU,EAAE,IAAI,CAAC,gBAAgB,EACjC,SAAS,EAAC,OAAO,EACjB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,EACxC,oBAAoB,EAAE,MAAM,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,EAChE,qBAAqB,EAAE,MAAM,IAAI,CAAC,yBAAyB,CAAC,IAAI,EAAE,IAElE,0BACE,KAAK,EAAC,OAAO,EACb,OAAO,EAAC,UAAU,EAClB,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,GACL,CACA,CACnB,EACP;KACH;;;;;;AApD4B;IAA5B,kBAAkB,EAAE;0DAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/common/smart-snippets/atomic-smart-snippet-source.tsx"],"sourcesContent":["import {Result} from '@coveo/headless';\nimport {\n  Component,\n  Prop,\n  h,\n  Listen,\n  State,\n  EventEmitter,\n  Event,\n  Host,\n} from '@stencil/core';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {AnyBindings} from '../interface/bindings';\nimport {LinkWithItemAnalytics} from '../item-link/stencil-item-link';\nimport {ResultContextEvent} from '@/src/components/search/result-template-component-utils/context/stencil-result-template-decorators';\n\n/**\n * @part source-url\n * @part source-title\n * @internal\n */\n@Component({\n  tag: 'atomic-smart-snippet-source',\n  shadow: false,\n})\nexport class AtomicSmartSnippetSource\n  implements InitializableComponent<AnyBindings>\n{\n  @InitializeBindings() public bindings!: AnyBindings;\n  @Prop({reflect: true, mutable: true}) source!: Result;\n  @Prop() anchorAttributes?: Attr[];\n\n  @Event() selectSource!: EventEmitter;\n  @Event() beginDelayedSelectSource!: EventEmitter;\n  @Event() cancelPendingSelectSource!: EventEmitter;\n\n  @State() public error!: Error;\n\n  @Listen('atomic/resolveResult')\n  public resolveResult(event: ResultContextEvent<Result>) {\n    event.preventDefault();\n    event.stopPropagation();\n    if (this.source) {\n      event.detail(this.source);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <LinkWithItemAnalytics\n          title={this.source.clickUri}\n          href={this.source.clickUri}\n          className=\"block truncate\"\n          part=\"source-url\"\n          attributes={this.anchorAttributes}\n          onSelect={() => this.selectSource.emit()}\n          onBeginDelayedSelect={() => this.beginDelayedSelectSource.emit()}\n          onCancelPendingSelect={() => this.cancelPendingSelectSource.emit()}\n        >\n          {this.source.clickUri}\n        </LinkWithItemAnalytics>\n        <LinkWithItemAnalytics\n          title={this.source.title}\n          href={this.source.clickUri}\n          attributes={this.anchorAttributes}\n          className=\"block\"\n          part=\"source-title\"\n          onSelect={() => this.selectSource.emit()}\n          onBeginDelayedSelect={() => this.beginDelayedSelectSource.emit()}\n          onCancelPendingSelect={() => this.cancelPendingSelectSource.emit()}\n        >\n          <atomic-result-text\n            field=\"title\"\n            default=\"no-title\"\n            key={this.source.uniqueId}\n          ></atomic-result-text>\n        </LinkWithItemAnalytics>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/atomic/components/components/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/context/product-context-controller";
 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

@@ -11,10 +11,10 @@ import { createRef } from 'lit/directives/ref.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';
+import { createProductContextController } from "../product-template-component-utils/context/product-context-controller.js";
 import { LightDomMixin } from "../../../mixins/light-dom.js";
 /**
  * The `atomic-product-description` component renders the description of a product.

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/context/product-context-controller";
 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/context/product-context-controller";
 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/context/product-context-controller";
 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,15 +8,16 @@ 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 } from "../product-template-component-utils/context/interactive-product-context-controller.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';
 import '../atomic-product-text/atomic-product-text';
+import { createProductContextController } from "../product-template-component-utils/context/product-context-controller";
 import { LightDomMixin } from "../../../mixins/light-dom";
 import { SlotsForNoShadowDOMMixin, } from "../../../mixins/slots-for-no-shadow-dom-mixin";
 import styles from './atomic-product-link.tw.css';

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/context/product-context-controller";
 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/context/product-context-controller.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/context/product-context-controller.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/context/product-context-controller.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/context/product-context-controller.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/components/commerce/product-template-component-utils/context/interactive-product-context-controller.js

@@ -0,0 +1,25 @@
+import { InteractiveItemContextController } from "../../../common/item-list/context/interactive-item-context-controller";
+/**
+ * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.
+ *
+ * @param host - The Lit component instance
+ * @returns InteractiveItemContextController instance
+ *
+ * @example
+ * ```typescript
+ * @customElement('my-interactive-product-component')
+ * export class MyInteractiveProductComponent extends LitElement {
+ *   private interactiveProductController = createInteractiveProductContextController(this);
+ *
+ *   @state() product!: Product;
+ *
+ *   render() {
+ *     this.product = this.interactiveProductController.interactiveItem;
+ *     return html`<div>${this.product?.ec_name}</div>`;
+ *   }
+ * }
+ * ```
+ */
+export function createInteractiveProductContextController(host) {
+    return new InteractiveItemContextController(host);
+}

package/dist/atomic/components/components/commerce/product-template-component-utils/context/product-context-controller.js

@@ -0,0 +1,29 @@
+import { ItemContextController, } from "../../../common/item-list/context/item-context-controller";
+/**
+ * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.
+ *
+ * @param host - The Lit component instance
+ * @param options - Configuration options
+ * @returns ItemContextController instance configured for atomic-product
+ *
+ * @example
+ * ```typescript
+ * @customElement('my-product-component')
+ * export class MyProductComponent extends LitElement {
+ *   private productController = createProductContextController(this);
+ *
+ *   @state() product!: Product;
+ *
+ *   render() {
+ *     this.product = this.productController.item;
+ *     return html`<div>${this.product?.ec_name}</div>`;
+ *   }
+ * }
+ * ```
+ */
+export function createProductContextController(host, options = {}) {
+    return new ItemContextController(host, {
+        parentName: 'atomic-product',
+        folded: options.folded ?? false,
+    });
+}

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

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

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

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

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

@@ -3,7 +3,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.34.0-pre.cf62afc8af",
+        version: "3.34.0-pre.d29cb64477",
         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;;ACrBA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;ACZA;;;;;;;;;;;;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/context/fetch-product-context.ts","src/components/commerce/product-template-component-utils/context/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 {Product} from '@coveo/headless/commerce';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\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 '@/src/components/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/context/fetch-product-context.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/{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/context/result-context-controller.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/context/fetch-result-context.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/context/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 '@/src/components/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/context/result-context-controller.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/context/fetch-result-context.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-4080f740.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