@coveo/atomic 3.35.0-pre.5aaf044fa9 → 3.35.0-pre.5bebe1af22

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/item-list/item-template-provider.js

@@ -0,0 +1,28 @@
+import { buildResultTemplatesManager, } from '@coveo/headless';
+import { TemplateProvider, } from '../template-provider/template-provider';
+export class ItemTemplateProvider extends TemplateProvider {
+    constructor(props, gridCellLinkTarget) {
+        super(props, () => buildResultTemplatesManager(props.bindings.engine));
+        this.gridCellLinkTarget = gridCellLinkTarget;
+    }
+    // TODO: Add JSX support for default template
+    makeDefaultTemplate() {
+        const content = document.createDocumentFragment();
+        const linkEl = document.createElement('atomic-result-link');
+        content.appendChild(linkEl);
+        const linkContent = document.createDocumentFragment();
+        const linkMarkup = `
+      <atomic-result-link>
+      ${this.gridCellLinkTarget ? `<a slot="attributes" target="${this.gridCellLinkTarget}"></a>` : ''}
+      </atomic-result-link>
+    `;
+        const linkTemplate = document.createElement('template');
+        linkTemplate.innerHTML = linkMarkup.trim();
+        linkContent.appendChild(linkTemplate.content);
+        return {
+            content,
+            linkContent,
+            conditions: [],
+        };
+    }
+}

package/dist/atomic/components/{atomic-search-box-instant-results.js → components/search/atomic-search-box-instant-results/atomic-search-box-instant-results.js}

@@ -1,37 +1,33 @@
-import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { buildInteractiveInstantResult, buildInstantResults } from '@coveo/headless';
-import { e as encodeForDomAttribute } from './string-utils.js';
-import { I as ItemTemplateProvider } from './item-template-provider.js';
-import { g as getClassNameForButtonStyle } from './stencil-button-style.js';
-import { d as dispatchSearchBoxSuggestionsEvent } from './suggestions-events.js';
-import { d as defineCustomElement$2 } from './atomic-result2.js';
-
-const getPartialInstantItemElement = (i18n, itemTitle, itemUniqueId) => {
-    return {
-        ariaLabel: i18n.t('instant-results-suggestion-label', {
-            title: itemTitle,
-            interpolation: { escapeValue: false },
-        }),
-        key: `instant-result-${encodeForDomAttribute(itemUniqueId)}`,
-        part: 'instant-results-item',
-    };
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const getPartialInstantItemShowAllElement = (i18n) => {
-    return {
-        key: 'instant-results-show-all-button',
-        part: 'instant-results-show-all',
-        ariaLabel: i18n.t('show-all-results'),
-    };
-};
-const InstantItemShowAllButton = ({ i18n }) => {
-    return (h("div", { part: "instant-results-show-all-button", class: getClassNameForButtonStyle('text-primary') }, i18n.t('show-all-results')));
-};
-
-const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSearchBoxInstantResults extends HTMLElement {
+import { buildInstantResults, buildInteractiveInstantResult, } from '@coveo/headless';
+import { html, LitElement, nothing, render } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { ItemTemplateProvider } from "../../common/item-list/item-template-provider";
+import { getPartialInstantItemElement, getPartialInstantItemShowAllElement, renderInstantItemShowAllButton, } from "../../common/suggestions/instant-item";
+import { dispatchSearchBoxSuggestionsEvent } from "../../common/suggestions/suggestions-events";
+import { errorGuard } from "../../../decorators/error-guard";
+import { encodeForDomAttribute } from "../../../utils/string-utils";
+/**
+ * The `atomic-search-box-instant-results` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of instant results behavior.
+ *
+ * This component does not support accessibility out-of-the-box. To do so, see [Instant Results Accessibility](https://docs.coveo.com/en/atomic/latest/usage/accessibility/#instant-results-accessibility).
+ *
+ * This component is not supported on mobile.
+ *
+ * @part instant-results-show-all-button - The 'See all results' button.
+ * @part instant-results-item - The individual instant result items.
+ *
+ * @slot default - The default slot where the instant results are rendered.
+ */
+let AtomicSearchBoxInstantResults = class AtomicSearchBoxInstantResults extends LitElement {
     constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
+        super(...arguments);
         this.results = [];
         this.display = 'list';
         this.templateHasError = false;
@@ -47,12 +43,6 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
          * The expected size of the image displayed in the results.
          */
         this.imageSize = 'icon';
-        this.error = undefined;
-        this.templateHasError = false;
-        this.maxResultsPerQuery = 4;
-        this.density = 'normal';
-        this.imageSize = 'icon';
-        this.ariaLabelGenerator = undefined;
     }
     /**
      * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.
@@ -65,12 +55,13 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
     async setRenderFunction(resultRenderingFunction) {
         this.itemRenderingFunction = resultRenderingFunction;
     }
-    componentWillLoad() {
+    connectedCallback() {
+        super.connectedCallback();
         try {
             dispatchSearchBoxSuggestionsEvent((bindings) => {
                 this.bindings = bindings;
                 return this.initialize();
-            }, this.host, ['atomic-search-box']);
+            }, this, ['atomic-search-box']);
         }
         catch (error) {
             this.error = error;
@@ -86,7 +77,6 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
         hasModifier && setTarget('_blank');
         el.click();
         hasModifier && setTarget(initialTarget || '');
-        return true;
     }
     renderItems() {
         if (!this.bindings.suggestedQuery() || this.bindings.store.isMobile()) {
@@ -96,12 +86,26 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
             ? this.instantResults.state.results
             : this.results;
         const elements = results.map((result) => {
-            const partialItem = getPartialInstantItemElement(this.bindings.i18n, this.ariaLabelGenerator?.(this.bindings, result) || result.title, result.uniqueId);
+            const partialItem = getPartialInstantItemElement(this.bindings.i18n, 'instant-results-suggestion-label', this.ariaLabelGenerator?.(this.bindings, result) || result.title, result.uniqueId);
+            const key = `instant-result-${encodeForDomAttribute(result.uniqueId)}`;
+            const template = html `${keyed(key, html `<atomic-result
+            part="outline"
+            .result=${result}
+            .interactiveResult=${buildInteractiveInstantResult(this.bindings.engine, {
+                options: { result },
+            })}
+            .display=${this.display}
+            .density=${this.density}
+            .imageSize=${this.imageSize}
+            .content=${this.itemTemplateProvider.getTemplateContent(result)}
+            .renderingFunction=${this.itemRenderingFunction}
+          ></atomic-result>`)}`;
+            const container = document.createElement('div');
+            render(template, container);
+            const resultElement = container.firstElementChild;
             return {
                 ...partialItem,
-                content: (h("atomic-result", { key: `instant-result-${encodeForDomAttribute(result.uniqueId)}`, part: "outline", result: result, interactiveResult: buildInteractiveInstantResult(this.bindings.engine, {
-                        options: { result },
-                    }), display: this.display, density: this.density, imageSize: this.imageSize, content: this.itemTemplateProvider.getTemplateContent(result), stopPropagation: false, renderingFunction: this.itemRenderingFunction })),
+                content: resultElement,
                 onSelect: (e) => {
                     const link = this.getLink(e.target);
                     if (!link) {
@@ -112,10 +116,13 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
             };
         });
         if (elements.length) {
-            const partialItem = getPartialInstantItemShowAllElement(this.bindings.i18n);
+            const partialItem = getPartialInstantItemShowAllElement(this.bindings.i18n, 'show-all-results');
             elements.push({
                 ...partialItem,
-                content: h(InstantItemShowAllButton, { i18n: this.bindings.i18n }),
+                content: renderInstantItemShowAllButton({
+                    i18n: this.bindings.i18n,
+                    i18nKey: 'show-all-results',
+                }),
                 onSelect: () => {
                     this.bindings.clearSuggestions();
                     this.bindings.searchBoxController.updateText(this.instantResults.state.q);
@@ -133,7 +140,7 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
         });
         this.itemTemplateProvider = new ItemTemplateProvider({
             includeDefaultTemplate: true,
-            templateElements: Array.from(this.host.querySelectorAll('atomic-result-template')),
+            templateElements: Array.from(this.querySelectorAll('atomic-result-template')),
             getResultTemplateRegistered: () => true,
             setResultTemplateRegistered: () => { },
             getTemplateHasError: () => this.templateHasError,
@@ -143,7 +150,7 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
             bindings: this.bindings,
         });
         return {
-            position: Array.from(this.host.parentNode.children).indexOf(this.host),
+            position: Array.from(this.parentNode.children).indexOf(this),
             panel: 'right',
             onSuggestedQueryChange: (q) => {
                 this.instantResults.updateQuery(q);
@@ -171,42 +178,31 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
         });
     }
     render() {
-        if (this.error) {
-            return (h("atomic-component-error", { key: 'e1471cd50dd5174b2c2e80588b7b2ad076810e15', element: this.host, error: this.error }));
-        }
+        return html `${nothing}`;
     }
-    get host() { return this; }
-}, [1, "atomic-search-box-instant-results", {
-        "maxResultsPerQuery": [514, "max-results-per-query"],
-        "density": [513],
-        "imageSize": [513, "image-size"],
-        "ariaLabelGenerator": [16],
-        "error": [32],
-        "templateHasError": [32],
-        "setRenderFunction": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["atomic-search-box-instant-results", "atomic-result"];
-    components.forEach(tagName => { switch (tagName) {
-        case "atomic-search-box-instant-results":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AtomicSearchBoxInstantResults$1);
-            }
-            break;
-        case "atomic-result":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const AtomicSearchBoxInstantResults = AtomicSearchBoxInstantResults$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { AtomicSearchBoxInstantResults, defineCustomElement };
-
-//# sourceMappingURL=atomic-search-box-instant-results.js.map
+};
+__decorate([
+    state()
+], AtomicSearchBoxInstantResults.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicSearchBoxInstantResults.prototype, "templateHasError", void 0);
+__decorate([
+    property({ attribute: 'max-results-per-query', reflect: true, type: Number })
+], AtomicSearchBoxInstantResults.prototype, "maxResultsPerQuery", void 0);
+__decorate([
+    property({ reflect: true })
+], AtomicSearchBoxInstantResults.prototype, "density", void 0);
+__decorate([
+    property({ attribute: 'image-size', reflect: true })
+], AtomicSearchBoxInstantResults.prototype, "imageSize", void 0);
+__decorate([
+    property({ attribute: 'aria-label-generator' })
+], AtomicSearchBoxInstantResults.prototype, "ariaLabelGenerator", void 0);
+__decorate([
+    errorGuard()
+], AtomicSearchBoxInstantResults.prototype, "render", null);
+AtomicSearchBoxInstantResults = __decorate([
+    customElement('atomic-search-box-instant-results')
+], AtomicSearchBoxInstantResults);
+export { AtomicSearchBoxInstantResults };

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

@@ -3,6 +3,7 @@ export { AtomicPager } from './atomic-pager/atomic-pager.js';
 export { AtomicQuerySummary } from './atomic-query-summary/atomic-query-summary.js';
 export { AtomicRelevanceInspector } from './atomic-relevance-inspector/atomic-relevance-inspector.js';
 export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';
+export { AtomicSearchBoxInstantResults } from './atomic-search-box-instant-results/atomic-search-box-instant-results.js';
 export { AtomicSearchBoxRecentQueries } from './atomic-search-box-recent-queries/atomic-search-box-recent-queries.js';
 export { AtomicSearchInterface } from './atomic-search-interface/atomic-search-interface.js';
 export { AtomicSearchLayout } from './atomic-search-layout/atomic-search-layout.js';

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

@@ -4,6 +4,7 @@ export default {
     'atomic-query-summary': async () => await import('./atomic-query-summary/atomic-query-summary.js'),
     'atomic-relevance-inspector': async () => await import('./atomic-relevance-inspector/atomic-relevance-inspector.js'),
     'atomic-results-per-page': async () => await import('./atomic-results-per-page/atomic-results-per-page.js'),
+    'atomic-search-box-instant-results': async () => await import('./atomic-search-box-instant-results/atomic-search-box-instant-results.js'),
     'atomic-search-box-recent-queries': async () => await import('./atomic-search-box-recent-queries/atomic-search-box-recent-queries.js'),
     'atomic-search-interface': async () => await import('./atomic-search-interface/atomic-search-interface.js'),
     'atomic-search-layout': async () => await import('./atomic-search-layout/atomic-search-layout.js'),

package/dist/atomic/components/facet-number-input.js

@@ -42,11 +42,11 @@ const FacetNumberInput = /*@__PURE__*/ proxyCustomElement(class FacetNumberInput
         const inputClasses = 'p-2.5 input-primary placeholder-neutral-dark min-w-0 mr-1';
         const labelClasses = 'text-neutral-dark text-sm';
         const step = this.type === 'integer' ? '1' : 'any';
-        return (h("form", { key: '50b7dee0d6dc358f1ab54f485605f674f4b4f086', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
+        return (h("form", { key: '846b496f2a6dc75cb09eca13b6a722465dcdcfd4', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: '1e27929ca1ea2ffe616377bba78c0394028ff3a2', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: 'a179aa5b898e60b38d0eb15977f23cdcf9f7c31d', part: "input-start", id: `${this.filterState.facetId}_start`, type: "number", step: step, ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": minAria, required: true, min: Number.MIN_SAFE_INTEGER, max: this.end, value: this.filterState.range?.start, onInput: (e) => (this.start = e.target.valueAsNumber) }), h("label", { key: 'd77ef3eaf1ad74999e5793e072037ffc4d35cd89', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: '147793a1619dcb567febe7ed1583642e68edcf2b', part: "input-end", id: `${this.filterState.facetId}_end`, type: "number", step: step, ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": maxAria, required: true, min: this.start, max: Number.MAX_SAFE_INTEGER, value: this.filterState.range?.end, onInput: (e) => (this.end = e.target.valueAsNumber) }), h(Button, { key: '283c333fd999fb87f0080e45182a1c0e5fd7832d', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            } }, h("label", { key: 'a4bff3622949dd48082d7dcef6e67b40d1c09dae', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: 'd6b5b15dcc33571f796b9b16c40ed794876f108a', part: "input-start", id: `${this.filterState.facetId}_start`, type: "number", step: step, ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": minAria, required: true, min: Number.MIN_SAFE_INTEGER, max: this.end, value: this.filterState.range?.start, onInput: (e) => (this.start = e.target.valueAsNumber) }), h("label", { key: '1ccdb9f95efd270893f55852139775a4def9b704', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: '02fab998b43acc8b2dc05363391133dcd7d5c7e6', part: "input-end", id: `${this.filterState.facetId}_end`, type: "number", step: step, ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": maxAria, required: true, min: this.start, max: Number.MAX_SAFE_INTEGER, value: this.filterState.range?.end, onInput: (e) => (this.end = e.target.valueAsNumber) }), h(Button, { key: '8ce0b7ee77ed9e4df1f2ebc5295b3e1379cdfa0c', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
     }
     static get style() { return AtomicFacetNumberInputStyle0; }
 }, [0, "atomic-facet-number-input", {

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

@@ -3,7 +3,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.35.0-pre.5aaf044fa9",
+        version: "3.35.0-pre.5bebe1af22",
         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/item-template-provider.js

@@ -1,5 +1,25 @@
+import { h } from '@stencil/core/internal/client';
 import { buildResultTemplatesManager } from '@coveo/headless';
 
+// The Lit equivalent of this file is item-placeholders.ts. The Lit version doesn't include the placeholder guard.
+const ResultsPlaceholdersGuard = (props) => {
+    if (!props.displayPlaceholders) {
+        return;
+    }
+    switch (props.display) {
+        case 'table':
+            return h(TableDisplayResultsPlaceholder, { ...props });
+        default:
+            return h(ResultsPlaceholder, { ...props });
+    }
+};
+const ResultsPlaceholder = (props) => {
+    return Array.from({ length: props.numberOfPlaceholders }, (_, i) => (h("atomic-result-placeholder", { key: `placeholder-${i}`, density: props.density, display: props.display || 'list', imageSize: props.imageSize })));
+};
+const TableDisplayResultsPlaceholder = (props) => {
+    return (h("atomic-result-table-placeholder", { density: props.density, imageSize: props.imageSize, rows: props.numberOfPlaceholders }));
+};
+
 class TemplateProvider {
     constructor(props, buildManager) {
         this.props = props;
@@ -68,6 +88,6 @@ class ItemTemplateProvider extends TemplateProvider {
     }
 }
 
-export { ItemTemplateProvider as I };
+export { ItemTemplateProvider as I, ResultsPlaceholdersGuard as R, ResultsPlaceholder as a };
 
 //# sourceMappingURL=item-template-provider.js.map

package/dist/atomic/components/item-template-provider.js.map

@@ -1 +1 @@
-{"file":"item-template-provider.js","mappings":";;MAesB,gBAAgB;IAapC,YACU,KAAsC,EACtC,YAIP;QALO,UAAK,GAAL,KAAK,CAAiC;QACtC,iBAAY,GAAZ,YAAY,CAInB;QAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QAC3C,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;IAEO,MAAM,uBAAuB;QACnC,MAAM,eAAe,GAAG,MAAM,OAAO,CAAC,GAAG,CACvC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,OAAO,qBAAqB;YAC1D,IAAI,EAAE,aAAa,IAAI,qBAAqB,CAAC,EAAE;gBAC7C,MAAM,cAAc,CAAC,WAAW,CAC7B,qBAAqC,CAAC,OAAO,CAAC,WAAW,EAAE,CAC7D,CAAC;aACH;YAED,MAAM,QAAQ,GAAG,MAAM,qBAAqB,CAAC,WAAW,EAAE,CAAC;YAC3D,IAAI,CAAC,QAAQ,EAAE;gBACb,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;aACtC;YACD,OAAO,QAAQ,CAAC;SACjB,CAAC,CACH,CAAC;QAEF,MAAM,SAAS,GAAG,CAChB,CAAC,eAAe,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,sBAAsB;cACxD,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;cAC5B,EAAE,EACN,MAAM,CACN,eAAe,CAAC,MAAM,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAI1C,CACJ,CAAC;QAEF,IAAI,CAAC,eAAe,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC,CAAC;QACrD,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;KAC9C;IAEM,kBAAkB,CAAC,IAAc;QACtC,OAAO,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,IAAI,CAAE,CAAC;KACnD;IAEM,sBAAsB,CAAC,IAAc;QAC1C,OAAO,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,IAAI,CAAE,CAAC;KACvD;IAEM,2BAA2B;QAChC,OAAO,QAAQ,CAAC,sBAAsB,EAAE,CAAC;KAC1C;IAED,IAAW,mBAAmB;QAC5B,OAAO,IAAI,CAAC,KAAK,CAAC,2BAA2B,EAAE,CAAC;KACjD;IAED,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,KAAK,CAAC,mBAAmB,EAAE,CAAC;KACzC;;;MC/EU,oBAAqB,SAAQ,gBAAwB;IAChE,YACE,KAA8D,EACtD,kBAA+B;QAEvC,KAAK,CAAC,KAAK,EAAE,MAAM,2BAA2B,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;QAF/D,uBAAkB,GAAlB,kBAAkB,CAAa;KAGxC;;IAGS,mBAAmB;QAK3B,MAAM,OAAO,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;QAClD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAC5D,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAE5B,MAAM,WAAW,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;QACtD,MAAM,UAAU,GAAG;;QAEf,IAAI,CAAC,kBAAkB,GAAG,gCAAgC,IAAI,CAAC,kBAAkB,QAAQ,GAAG,EAAE;;KAEjG,CAAC;QACF,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACxD,YAAY,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,EAAE,CAAC;QAC3C,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC9C,OAAO;YACL,OAAO;YACP,WAAW;YACX,UAAU,EAAE,EAAE;SACf,CAAC;KACH;;;;;","names":[],"sources":["src/components/common/template-provider/template-provider.ts","src/components/common/item-list/item-template-provider.ts"],"sourcesContent":["import type {Template, TemplatesManager} from '@coveo/headless';\n\nexport interface TemplateElement<ItemType> extends HTMLElement {\n  getTemplate(): Promise<Template<ItemType, DocumentFragment> | null>;\n}\n\nexport interface TemplateProviderProps<ItemType> {\n  getResultTemplateRegistered(): boolean;\n  setResultTemplateRegistered(value: boolean): void;\n  getTemplateHasError(): boolean;\n  setTemplateHasError(value: boolean): void;\n  templateElements: TemplateElement<ItemType>[];\n  includeDefaultTemplate: boolean;\n}\n\nexport abstract class TemplateProvider<ItemType> {\n  private templateManager: TemplatesManager<\n    ItemType,\n    DocumentFragment,\n    DocumentFragment\n  >;\n\n  protected abstract makeDefaultTemplate(): Template<\n    ItemType,\n    DocumentFragment,\n    DocumentFragment\n  >;\n\n  constructor(\n    private props: TemplateProviderProps<ItemType>,\n    private buildManager: () => TemplatesManager<\n      ItemType,\n      DocumentFragment,\n      DocumentFragment\n    >\n  ) {\n    this.templateManager = this.buildManager();\n    this.registerResultTemplates();\n  }\n\n  private async registerResultTemplates() {\n    const customTemplates = await Promise.all(\n      this.props.templateElements.map(async (resultTemplateElement) => {\n        if (!('getTemplate' in resultTemplateElement)) {\n          await customElements.whenDefined(\n            (resultTemplateElement as HTMLElement).tagName.toLowerCase()\n          );\n        }\n\n        const template = await resultTemplateElement.getTemplate();\n        if (!template) {\n          this.props.setTemplateHasError(true);\n        }\n        return template;\n      })\n    );\n\n    const templates = (\n      !customTemplates.length && this.props.includeDefaultTemplate\n        ? [this.makeDefaultTemplate()]\n        : []\n    ).concat(\n      customTemplates.filter((template) => template) as Template<\n        ItemType,\n        DocumentFragment,\n        DocumentFragment\n      >[]\n    );\n\n    this.templateManager.registerTemplates(...templates);\n    this.props.setResultTemplateRegistered(true);\n  }\n\n  public getTemplateContent(item: ItemType) {\n    return this.templateManager.selectTemplate(item)!;\n  }\n\n  public getLinkTemplateContent(item: ItemType) {\n    return this.templateManager.selectLinkTemplate(item)!;\n  }\n\n  public getEmptyLinkTemplateContent() {\n    return document.createDocumentFragment();\n  }\n\n  public get templatesRegistered() {\n    return this.props.getResultTemplateRegistered();\n  }\n\n  public get hasError() {\n    return this.props.getTemplateHasError();\n  }\n}\n","import {\n  buildResultTemplatesManager,\n  type Result,\n  type Template,\n} from '@coveo/headless';\nimport type {AnyBindings} from '../interface/bindings';\nimport type {ItemTarget} from '../layout/display-options';\nimport {\n  TemplateProvider,\n  type TemplateProviderProps,\n} from '../template-provider/template-provider';\n\nexport class ItemTemplateProvider extends TemplateProvider<Result> {\n  constructor(\n    props: TemplateProviderProps<Result> & {bindings: AnyBindings},\n    private gridCellLinkTarget?: ItemTarget\n  ) {\n    super(props, () => buildResultTemplatesManager(props.bindings.engine));\n  }\n\n  // TODO: Add JSX support for default template\n  protected makeDefaultTemplate(): Template<\n    Result,\n    DocumentFragment,\n    DocumentFragment\n  > {\n    const content = document.createDocumentFragment();\n    const linkEl = document.createElement('atomic-result-link');\n    content.appendChild(linkEl);\n\n    const linkContent = document.createDocumentFragment();\n    const linkMarkup = `\n      <atomic-result-link>\n      ${this.gridCellLinkTarget ? `<a slot=\"attributes\" target=\"${this.gridCellLinkTarget}\"></a>` : ''}\n      </atomic-result-link>\n    `;\n    const linkTemplate = document.createElement('template');\n    linkTemplate.innerHTML = linkMarkup.trim();\n    linkContent.appendChild(linkTemplate.content);\n    return {\n      content,\n      linkContent,\n      conditions: [],\n    };\n  }\n}\n"],"version":3}
+{"file":"item-template-provider.js","mappings":"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","names":[],"sources":["src/components/common/atomic-result-placeholder/stencil-placeholders.tsx","src/components/common/template-provider/template-provider.ts","src/components/common/item-list/item-template-provider.ts"],"sourcesContent":["// The Lit equivalent of this file is item-placeholders.ts. The Lit version doesn't include the placeholder guard.\nimport {FunctionalComponent, h} from '@stencil/core';\nimport {\n  ItemDisplayDensity,\n  ItemDisplayImageSize,\n  ItemDisplayLayout,\n} from '../layout/display-options.js';\n\ninterface ResultPlaceholderProps {\n  density: ItemDisplayDensity;\n  imageSize: ItemDisplayImageSize;\n  display: ItemDisplayLayout;\n  numberOfPlaceholders: number;\n}\n\ninterface ResultPlaceholderGuardProps extends ResultPlaceholderProps {\n  displayPlaceholders: boolean;\n}\n\nexport const ResultsPlaceholdersGuard: FunctionalComponent<\n  ResultPlaceholderGuardProps\n> = (props) => {\n  if (!props.displayPlaceholders) {\n    return;\n  }\n  switch (props.display) {\n    case 'table':\n      return <TableDisplayResultsPlaceholder {...props} />;\n    default:\n      return <ResultsPlaceholder {...props} />;\n  }\n};\n\nexport const ResultsPlaceholder: FunctionalComponent<ResultPlaceholderProps> = (\n  props\n) => {\n  return Array.from({length: props.numberOfPlaceholders}, (_, i) => (\n    <atomic-result-placeholder\n      key={`placeholder-${i}`}\n      density={props.density}\n      display={props.display || 'list'}\n      imageSize={props.imageSize}\n    ></atomic-result-placeholder>\n  ));\n};\n\nconst TableDisplayResultsPlaceholder: FunctionalComponent<\n  ResultPlaceholderProps\n> = (props) => {\n  return (\n    <atomic-result-table-placeholder\n      density={props.density}\n      imageSize={props.imageSize}\n      rows={props.numberOfPlaceholders}\n    ></atomic-result-table-placeholder>\n  );\n};\n","import type {Template, TemplatesManager} from '@coveo/headless';\n\nexport interface TemplateElement<ItemType> extends HTMLElement {\n  getTemplate(): Promise<Template<ItemType, DocumentFragment> | null>;\n}\n\nexport interface TemplateProviderProps<ItemType> {\n  getResultTemplateRegistered(): boolean;\n  setResultTemplateRegistered(value: boolean): void;\n  getTemplateHasError(): boolean;\n  setTemplateHasError(value: boolean): void;\n  templateElements: TemplateElement<ItemType>[];\n  includeDefaultTemplate: boolean;\n}\n\nexport abstract class TemplateProvider<ItemType> {\n  private templateManager: TemplatesManager<\n    ItemType,\n    DocumentFragment,\n    DocumentFragment\n  >;\n\n  protected abstract makeDefaultTemplate(): Template<\n    ItemType,\n    DocumentFragment,\n    DocumentFragment\n  >;\n\n  constructor(\n    private props: TemplateProviderProps<ItemType>,\n    private buildManager: () => TemplatesManager<\n      ItemType,\n      DocumentFragment,\n      DocumentFragment\n    >\n  ) {\n    this.templateManager = this.buildManager();\n    this.registerResultTemplates();\n  }\n\n  private async registerResultTemplates() {\n    const customTemplates = await Promise.all(\n      this.props.templateElements.map(async (resultTemplateElement) => {\n        if (!('getTemplate' in resultTemplateElement)) {\n          await customElements.whenDefined(\n            (resultTemplateElement as HTMLElement).tagName.toLowerCase()\n          );\n        }\n\n        const template = await resultTemplateElement.getTemplate();\n        if (!template) {\n          this.props.setTemplateHasError(true);\n        }\n        return template;\n      })\n    );\n\n    const templates = (\n      !customTemplates.length && this.props.includeDefaultTemplate\n        ? [this.makeDefaultTemplate()]\n        : []\n    ).concat(\n      customTemplates.filter((template) => template) as Template<\n        ItemType,\n        DocumentFragment,\n        DocumentFragment\n      >[]\n    );\n\n    this.templateManager.registerTemplates(...templates);\n    this.props.setResultTemplateRegistered(true);\n  }\n\n  public getTemplateContent(item: ItemType) {\n    return this.templateManager.selectTemplate(item)!;\n  }\n\n  public getLinkTemplateContent(item: ItemType) {\n    return this.templateManager.selectLinkTemplate(item)!;\n  }\n\n  public getEmptyLinkTemplateContent() {\n    return document.createDocumentFragment();\n  }\n\n  public get templatesRegistered() {\n    return this.props.getResultTemplateRegistered();\n  }\n\n  public get hasError() {\n    return this.props.getTemplateHasError();\n  }\n}\n","import {\n  buildResultTemplatesManager,\n  type Result,\n  type Template,\n} from '@coveo/headless';\nimport type {AnyBindings} from '../interface/bindings';\nimport type {ItemTarget} from '../layout/display-options';\nimport {\n  TemplateProvider,\n  type TemplateProviderProps,\n} from '../template-provider/template-provider';\n\nexport class ItemTemplateProvider extends TemplateProvider<Result> {\n  constructor(\n    props: TemplateProviderProps<Result> & {bindings: AnyBindings},\n    private gridCellLinkTarget?: ItemTarget\n  ) {\n    super(props, () => buildResultTemplatesManager(props.bindings.engine));\n  }\n\n  // TODO: Add JSX support for default template\n  protected makeDefaultTemplate(): Template<\n    Result,\n    DocumentFragment,\n    DocumentFragment\n  > {\n    const content = document.createDocumentFragment();\n    const linkEl = document.createElement('atomic-result-link');\n    content.appendChild(linkEl);\n\n    const linkContent = document.createDocumentFragment();\n    const linkMarkup = `\n      <atomic-result-link>\n      ${this.gridCellLinkTarget ? `<a slot=\"attributes\" target=\"${this.gridCellLinkTarget}\"></a>` : ''}\n      </atomic-result-link>\n    `;\n    const linkTemplate = document.createElement('template');\n    linkTemplate.innerHTML = linkMarkup.trim();\n    linkContent.appendChild(linkTemplate.content);\n    return {\n      content,\n      linkContent,\n      conditions: [],\n    };\n  }\n}\n"],"version":3}

package/dist/atomic/components/show-hide-button.js

@@ -1,6 +1,6 @@
 import { getElement, h, Fragment } from '@stencil/core/internal/client';
 import { b as buildCustomEvent } from './event-utils.js';
-import { a as ResultsPlaceholder } from './stencil-placeholders.js';
+import { a as ResultsPlaceholder } from './item-template-provider.js';
 import { B as Button } from './stencil-button.js';
 
 const foldedItemListContextEventName = 'atomic/resolveFoldedResultList';

package/dist/atomic/components/stencil-button.js

@@ -1,6 +1,5 @@
 import { h } from '@stencil/core/internal/client';
 import { l as listenOnce } from './event-utils.js';
-import { a as getRippleColorForButtonStyle, g as getClassNameForButtonStyle } from './stencil-button-style.js';
 
 const RIPPLE = 'ripple';
 function getAnimationDurationInMilliseconds(radiusPixels) {
@@ -42,6 +41,49 @@ async function cleanupAnimationOnFinish(ripple, animationDuration) {
     setTimeout(() => ripple?.remove(), animationDuration + animationDuration * 0.1);
 }
 
+/**
+ * @deprecated Should only be used for Stencil components; for Lit components, use the button-style.ts
+ * This file is required to be in a tsx file to be able to use it in Stencil components.
+ */
+function getClassNameForButtonStyle(buttonStyle) {
+    switch (buttonStyle) {
+        case 'primary':
+            return 'btn-primary';
+        case 'outline-primary':
+            return 'btn-outline-primary';
+        case 'outline-neutral':
+            return 'btn-outline-neutral';
+        case 'outline-error':
+            return 'btn-outline-error';
+        case 'outline-bg-neutral':
+            return 'btn-outline-bg-neutral';
+        case 'outline-bg-error':
+            return 'btn-outline-bg-error';
+        case 'text-primary':
+            return 'btn-text-primary';
+        case 'text-neutral':
+            return 'btn-text-neutral';
+        case 'text-transparent':
+            return 'btn-text-transparent';
+        case 'square-neutral':
+            return 'btn-square-neutral';
+    }
+}
+/**
+ * @deprecated Should only be used for Stencil components; for Lit components, use the button-style.ts
+ * This file is required to be in a tsx file to be able to use it in Stencil components.
+ */
+function getRippleColorForButtonStyle(buttonStyle) {
+    switch (buttonStyle) {
+        case 'primary':
+            return 'primary';
+        case 'text-transparent':
+            return 'neutral-light';
+        default:
+            return 'neutral';
+    }
+}
+
 /**
  * @deprecated Should only be used for Stencil components; for Lit components, use the button.ts file instead
  */
@@ -81,6 +123,6 @@ const Button = (props, children) => {
         children));
 };
 
-export { Button as B, createRipple as c };
+export { Button as B, getClassNameForButtonStyle as a, createRipple as c, getRippleColorForButtonStyle as g };
 
 //# sourceMappingURL=stencil-button.js.map