@coveo/atomic 3.27.4 → 3.27.5-pre.1ef71f18a4

package/dist/atomic/components/atomic-suggestion-renderer2.js

@@ -73,7 +73,7 @@ const AtomicSuggestionRenderer = /*@__PURE__*/ proxyCustomElement(class AtomicSu
     }
     render() {
         const isButton = !!(this.suggestion.onSelect || this.suggestion.query);
-        return (h(Host, { key: '5b363c3939533119d07eb3c336d206f2f0068a43', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
+        return (h(Host, { key: '65b5d84340d508712073522ae4ff19d4274fafeb', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
                 if (!el) {
                     return;
                 }

package/dist/atomic/components/atomic-tab-manager.js

@@ -59,7 +59,7 @@ const AtomicTabManager$1 = /*@__PURE__*/ proxyCustomElement(class AtomicTabManag
         });
     }
     render() {
-        return (h(Host, { key: 'ad5e013c87f9fd1dd8bfd8efbedb9839ee478f0d' }, h("atomic-tab-bar", { key: '96587847ed557b91cfa21ed0c2967407bfce8b22' }, h("div", { key: '33674b56e04584e78199da5b8edb10c82dc3c168', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
+        return (h(Host, { key: '99cf133406539520a02364ea9a04ec5df9c35332' }, h("atomic-tab-bar", { key: '7f63a5f0a65e8f30bfdbb9cf19943de4e6ccb0d5' }, h("div", { key: 'a1a69340dc6111bb64d18d0b2de01f9c4ef042f1', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
                 defaultValue: tab.label,
             }), select: () => {
                 if (!tab.tabController.state.isActive) {

package/dist/atomic/components/components/commerce/atomic-commerce-did-you-mean/atomic-commerce-did-you-mean.js

@@ -55,8 +55,7 @@ let AtomicCommerceDidYouMean = class AtomicCommerceDidYouMean extends LitElement
                 props: {
                     correctedQuery: this.didYouMeanState.queryCorrection.correctedQuery,
                     i18n: this.bindings.i18n,
-                    //TODO - https://coveord.atlassian.net/browse/KIT-3691 - implement applyCorrection here.
-                    onClick: () => { },
+                    onClick: () => this.didYouMean.applyCorrection(),
                 },
             });
         }

package/dist/atomic/components/components/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.js

@@ -0,0 +1,126 @@
+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;
+};
+import { renderFieldsetGroup } from "../../common/fieldset-group.js";
+import { createAppLoadedListener } from "../../common/interface/store.js";
+import { renderChoices } from "../../common/items-per-page/choices.js";
+import { renderLabel } from "../../common/items-per-page/label.js";
+import { convertChoicesToNumbers, validateInitialChoice, } from "../../common/items-per-page/validate.js";
+import { renderPagerGuard } from "../../common/pager/pager-guard.js";
+import { bindStateToController } from "../../../decorators/bind-state.js";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings.js";
+import { errorGuard } from "../../../decorators/error-guard";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { randomID } from "../../../utils/utils.js";
+import { buildSearch, buildProductListing, } from '@coveo/headless/commerce';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+/**
+ * The `atomic-commerce-products-per-page` component lets the end user select how many products to display per page.
+ *
+ * @part label - The "Products per page" label.
+ * @part buttons - The list of buttons.
+ * @part button - The individual products per page buttons.
+ * @part active-button - The active products per page button.
+ *
+ * @alpha
+ */
+let AtomicCommerceProductsPerPage = class AtomicCommerceProductsPerPage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isAppLoaded = false;
+        this.radioGroupName = randomID('atomic-commerce-products-per-page-');
+        /**
+         * A list of choices for the number of products to display per page, separated by commas.
+         */
+        this.choicesDisplayed = '10,25,50,100';
+    }
+    initialize() {
+        this.choices = convertChoicesToNumbers(this.choicesDisplayed);
+        this.initialChoice = this.initialChoice ?? this.choices[0];
+        validateInitialChoice(this.initialChoice, this.choices);
+        const controller = this.bindings.interfaceElement.type === 'search'
+            ? buildSearch(this.bindings.engine)
+            : buildProductListing(this.bindings.engine);
+        this.summary = controller.summary();
+        this.pagination = controller.pagination(this.initialChoice ? { options: { pageSize: this.initialChoice } } : {});
+        createAppLoadedListener(this.bindings.store, (isAppLoaded) => {
+            this.isAppLoaded = isAppLoaded;
+        });
+    }
+    scrollToTopEvent() {
+        this.dispatchEvent(new CustomEvent('atomic/scrollToTop', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    get label() {
+        return this.bindings.i18n.t('products-per-page');
+    }
+    render() {
+        return html `
+      ${renderPagerGuard({
+            props: {
+                hasError: this.summaryState.hasError,
+                hasItems: this.summaryState.hasProducts,
+                isAppLoaded: this.isAppLoaded,
+            },
+        })(html `
+        <div class="flex items-center">
+          ${renderLabel({ props: {} })(html `${this.label}`)}
+          ${renderFieldsetGroup({
+            props: {
+                label: this.label,
+            },
+        })(renderChoices({
+            props: {
+                label: this.label,
+                groupName: this.radioGroupName,
+                pageSize: this.paginationState.pageSize,
+                choices: this.choices,
+                lang: this.bindings.i18n.language,
+                scrollToTopEvent: () => this.scrollToTopEvent(),
+                setItemSize: (size) => this.pagination.setPageSize(size),
+                focusOnFirstResultAfterNextSearch: () => this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch(),
+                focusOnNextNewResult: () => this.bindings.store.state.resultList?.focusOnNextNewResult(),
+            },
+        }))}
+        </div>
+      `)}
+    `;
+    }
+};
+__decorate([
+    bindStateToController('pagination'),
+    state()
+], AtomicCommerceProductsPerPage.prototype, "paginationState", void 0);
+__decorate([
+    bindStateToController('summary'),
+    state()
+], AtomicCommerceProductsPerPage.prototype, "summaryState", void 0);
+__decorate([
+    state()
+], AtomicCommerceProductsPerPage.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicCommerceProductsPerPage.prototype, "isAppLoaded", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'choices-displayed' })
+], AtomicCommerceProductsPerPage.prototype, "choicesDisplayed", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'initial-choice' })
+], AtomicCommerceProductsPerPage.prototype, "initialChoice", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicCommerceProductsPerPage.prototype, "render", null);
+AtomicCommerceProductsPerPage = __decorate([
+    customElement('atomic-commerce-products-per-page'),
+    bindings(),
+    withTailwindStyles
+], AtomicCommerceProductsPerPage);
+export { AtomicCommerceProductsPerPage };

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

@@ -5,6 +5,7 @@ export { AtomicCommerceInterface } from './atomic-commerce-interface/atomic-comm
 export { AtomicCommerceLayout } from './atomic-commerce-layout/atomic-commerce-layout.js';
 export { AtomicCommercePager } from './atomic-commerce-pager/atomic-commerce-pager.js';
 export { AtomicCommerceProductList } from './atomic-commerce-product-list/atomic-commerce-product-list.js';
+export { AtomicCommerceProductsPerPage } from './atomic-commerce-products-per-page/atomic-commerce-products-per-page.js';
 export { AtomicCommerceQuerySummary } from './atomic-commerce-query-summary/atomic-commerce-query-summary.js';
 export { AtomicCommerceRecommendationList } from './atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.js';
 export { AtomicCommerceSearchBox } from './atomic-commerce-search-box/atomic-commerce-search-box.js';

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

@@ -6,6 +6,7 @@ export default {
     'atomic-commerce-layout': async () => await import('./atomic-commerce-layout/atomic-commerce-layout.js'),
     'atomic-commerce-pager': async () => await import('./atomic-commerce-pager/atomic-commerce-pager.js'),
     'atomic-commerce-product-list': async () => await import('./atomic-commerce-product-list/atomic-commerce-product-list.js'),
+    'atomic-commerce-products-per-page': async () => await import('./atomic-commerce-products-per-page/atomic-commerce-products-per-page.js'),
     'atomic-commerce-query-summary': async () => await import('./atomic-commerce-query-summary/atomic-commerce-query-summary.js'),
     'atomic-commerce-recommendation-list': async () => await import('./atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.js'),
     'atomic-commerce-search-box': async () => await import('./atomic-commerce-search-box/atomic-commerce-search-box.js'),

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

@@ -28,7 +28,10 @@ export const renderBreadcrumbContent = ({ props }) => {
         excluded: isExclusion && !props.breadcrumb.content,
     });
     return html `<span part="breadcrumb-label" class=${multiClassMap(labelClass)}>
-      ${props.i18n.t('with-colon', { text: props.breadcrumb.label })}
+      ${props.i18n.t('with-colon', {
+        text: props.breadcrumb.label,
+        interpolation: { escapeValue: false },
+    })}
     </span>
     <span part="breadcrumb-value" class=${multiClassMap(valueClass)}>
       ${props.breadcrumb.content ?? value}

package/dist/atomic/components/components/common/fieldset-group.js

@@ -0,0 +1,5 @@
+import { html } from 'lit';
+export const renderFieldsetGroup = ({ props: { label } }) => (children) => html `<fieldset class="contents">
+      <legend class="sr-only">${label}</legend>
+      ${children}
+    </fieldset>`;

package/dist/atomic/components/components/common/items-per-page/choices.js

@@ -0,0 +1,47 @@
+import { html } from 'lit';
+import { renderRadioButton } from '../radio-button';
+export const renderChoices = ({ props }) => {
+    const { label, groupName, pageSize, choices, lang, scrollToTopEvent, setItemSize, focusOnFirstResultAfterNextSearch, focusOnNextNewResult, } = props;
+    const focusOnProperResultDependingOnChoice = (choice) => {
+        if (choice < pageSize) {
+            focusOnFirstResultAfterNextSearch()?.then(() => scrollToTopEvent());
+        }
+        else if (choice > pageSize) {
+            focusOnNextNewResult();
+        }
+    };
+    return html `
+    <div
+      part="buttons"
+      role="radiogroup"
+      aria-label=${label}
+      class="flex flex-wrap gap-2"
+    >
+      ${choices.map((choice) => {
+        const isSelected = pageSize === choice;
+        const parts = ['button'];
+        if (isSelected) {
+            parts.push('active-button');
+        }
+        const text = choice.toLocaleString(lang);
+        return renderRadioButton({
+            props: {
+                key: 'choice',
+                groupName,
+                style: 'outline-neutral',
+                checked: isSelected,
+                ariaLabel: text,
+                onChecked: () => {
+                    focusOnProperResultDependingOnChoice(choice);
+                    setItemSize(choice);
+                },
+                class: 'btn-page focus-visible:bg-neutral-light',
+                part: parts.join(' '),
+                text,
+                selectWhenFocused: false,
+            },
+        });
+    })}
+    </div>
+  `;
+};

package/dist/atomic/components/components/common/items-per-page/error.js

@@ -0,0 +1,18 @@
+export class ChoiceIsNaNError extends Error {
+    constructor(choice) {
+        super(`The choice value "${choice}" from the "choicesDisplayed" option is not a number.`);
+        this.name = 'ChoiceIsNaNError';
+    }
+}
+export class InitialChoiceNotInChoicesError extends Error {
+    constructor(initialChoice, choices) {
+        super(`The initial choice value "${initialChoice}" is not included in the choices ${choices}.`);
+        this.name = 'InitialChoiceNotInChoicesError';
+    }
+}
+export class ChoiceIsNonPositiveError extends Error {
+    constructor(choice) {
+        super(`The choice value "${choice}" from the "choicesDisplayed" option is not positive (<= 0).`);
+        this.name = 'ChoiceIsNonPositiveError';
+    }
+}

package/dist/atomic/components/components/common/items-per-page/label.js

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+export const renderLabel = () => (children) => html `
+    <span
+      part="label"
+      class="text-on-background mr-3 self-start text-lg leading-10"
+      aria-hidden="true"
+    >
+      ${children}
+    </span>
+  `;

package/dist/atomic/components/components/common/items-per-page/validate.js

@@ -0,0 +1,19 @@
+import { ChoiceIsNaNError, ChoiceIsNonPositiveError, InitialChoiceNotInChoicesError, } from './error';
+export function convertChoicesToNumbers(choices) {
+    return choices.split(',').map((choice) => {
+        const parsedChoice = parseInt(choice);
+        if (isNaN(parsedChoice)) {
+            throw new ChoiceIsNaNError(choice);
+        }
+        if (parsedChoice <= 0) {
+            throw new ChoiceIsNonPositiveError(parsedChoice);
+        }
+        return parsedChoice;
+    });
+}
+export function validateInitialChoice(initialChoice, choices) {
+    if (!choices.includes(initialChoice)) {
+        throw new InitialChoiceNotInChoicesError(initialChoice, choices);
+    }
+    return initialChoice;
+}

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

@@ -65,13 +65,13 @@ const FacetDateInput = /*@__PURE__*/ proxyCustomElement(class FacetDateInput ext
         // Fallback for Safari < 14.1, date with format yyyy-mm-dd over 1400 (API limit)
         const pattern = '^(1[4-9]\\d{2}|2\\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$';
         const range = this.rangeGetter();
-        return (h("form", { key: 'd8db4385e4295f182fc9b9db2ade10ff62b59615', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
+        return (h("form", { key: '5b9dcc787bc6df5e367c5f42399870887c47d1ac', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: 'bef5b47105d800c423b61c42cc50b6329cc624c1', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: '6dc2ddab55046089ceb8d57883420e6a1935b866', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
+            } }, h("label", { key: '402453cff10dc0145067c4915c37f4664062b483', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: '9b29df3dc13bfa9f8a75c7bc4528ed81c75b26a4', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
             // API/Index minimum supported date
-            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: '10aaa6a1477be4f377c05b81025c8f5bcf042e96', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: '3fccac3931ef503413bb9e830f8cc7ec2f31a52d', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: '8bb6165a256975cd26cdb92c2af1b8489b890c72', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: 'be0174d19a814f5119ef504f56a60f1d00e690ed', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: '1786cc6d87fe13282dc0c7a4e56c5a979ad10d39', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: '4d15da7ba14e0349e0caa0b576c392ad331c29f9', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
     }
 }, [0, "atomic-facet-date-input", {
         "bindings": [16],

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: '805e001012201b280e5820a7674a41f7f20b79ed', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
+        return (h("form", { key: 'aeec1e4f98899d1653df921fc0a9c53ca3fcbf3b', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: '6285713ae74850a682225a3805d4b0dfb4312351', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: '234b78c7576407d5a976e2f1dae6fba679539593', 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: '70161503018f6216d48de99f47671edee1fce28b', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: '1a1311e051daf2bac1771cb500a79859aaa0a795', 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: '267ee8fa7e6bb2dc8dc248a1c49b0ac757b4efe3', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            } }, h("label", { key: 'edfa0efd988534f6c8228215489220f79504e166', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: 'c032ead904ce549843de5ca3f124d8502a3e4d14', 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: '5e6950b85237aaf46b09d00487f882044402eec1', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: 'c07d8787a0bcdc8f267f3d753752feb14c1e14f2', 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: '97b81fcf3f99a3a250b1f4e538dd720893be20fe', 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

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

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

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAca,kBAAmB,SAAQ,KAAK;IAC3C,YAAY,WAAmB,EAAE,UAAkB;QACjD,KAAK,CACH,QAAQ,WAAW,sCAAsC,UAAU,YAAY,CAChF,CAAC;KACH;;;ACfH,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;SAIpC,gBAAgB,CAAI,OAAgB,EAAE,UAAkB;IACtE,OAAO,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,MAAM;QACpC,MAAM,KAAK,GAAG,gBAAgB,CAC5B,oBAAoB,EACpB,CAAC,IAAO;YACN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;SACtB,CACF,CAAC;QACF,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACjC,MAAM,CACJ,IAAI,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,CACnE,CAAC;SACH;KACF,CAAC,CAAC;AACL;;ACkDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/decorators/commerce/product-template-decorators.ts"],"sourcesContent":["import {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\nimport {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\n\ntype LitElementWithError = Omit<\n  Pick<InitializableComponent, 'error'>,\n  'error'\n> &\n  LitElement & {\n    error: Error | null;\n  };\n\nconst itemContextEventName = 'atomic/resolveResult';\n\nexport class MissingParentError extends Error {\n  constructor(elementName: string, parentName: string) {\n    super(\n      `The \"${elementName}\" element must be the child of an \"${parentName}\" element.`\n    );\n  }\n}\n\nfunction extractFolded<T = Record<string, unknown>>(\n  item: Record<string, unknown>,\n  returnFolded: boolean\n): T {\n  if (returnFolded) {\n    if ('children' in item) {\n      return item as T;\n    } else {\n      return {children: [], result: item} as T;\n    }\n  }\n\n  if ('children' in item && 'result' in item) {\n    return item.result as T;\n  }\n  return item as T;\n}\n\n/**\n * A reactive controller that manages item context data from parent components.\n * Handles fetching item data via custom events and manages error states.\n */\nexport class ItemContextController<T = Record<string, unknown>>\n  implements ReactiveController\n{\n  private host: ReactiveControllerHost & LitElementWithError;\n  private parentName: string;\n  private folded: boolean;\n  private _item: T | null = null;\n  private _error: MissingParentError | null = null;\n\n  constructor(\n    host: ReactiveControllerHost & LitElementWithError,\n    options: {parentName?: string; folded?: boolean} = {}\n  ) {\n    this.host = host;\n    this.parentName = options.parentName ?? 'atomic-result';\n    this.folded = options.folded ?? false;\n    host.addController(this);\n  }\n\n  get item(): T | null {\n    return this._error ? null : this._item;\n  }\n\n  get error(): MissingParentError | null {\n    return this._error;\n  }\n\n  get hasError(): boolean {\n    return this._error !== null;\n  }\n\n  hostConnected(): void {\n    this._resolveItemContext();\n  }\n\n  private _resolveItemContext(): void {\n    const event = buildCustomEvent(\n      itemContextEventName,\n      (item: Record<string, unknown>) => {\n        this._item = extractFolded<T>(item, this.folded);\n        this._error = null;\n        this.host.error = null;\n        this.host.requestUpdate();\n      }\n    );\n\n    const canceled = this.host.dispatchEvent(event);\n    if (canceled) {\n      const elementName = (this.host as Element).nodeName.toLowerCase();\n      this._error = new MissingParentError(elementName, this.parentName);\n      this._item = null;\n      this.host.error = this._error;\n      this.host.requestUpdate();\n    }\n  }\n}\n\ntype ItemContextEventHandler<T> = (item: T) => void;\nexport type ItemContextEvent<T> = CustomEvent<ItemContextEventHandler<T>>;\n","import {closest} from '../../../utils/dom-utils.js';\nimport {buildCustomEvent} from '../../../utils/event-utils.js';\nimport {MissingParentError} from './context/item-context-controller.js';\n\nconst itemContextEventName = 'atomic/resolveResult';\n\ntype ItemContextEventHandler<T> = (item: T) => void;\n\nexport function fetchItemContext<T>(element: Element, parentName: string) {\n  return new Promise<T>((resolve, reject) => {\n    const event = buildCustomEvent<ItemContextEventHandler<T>>(\n      itemContextEventName,\n      (item: T) => {\n        return resolve(item);\n      }\n    );\n    element.dispatchEvent(event);\n\n    if (!closest(element, parentName)) {\n      reject(\n        new MissingParentError(element.nodeName.toLowerCase(), parentName)\n      );\n    }\n  });\n}\n","import {InteractiveItemContextController} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {InteractiveItemContextEvent} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\nimport {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport {LitElement} from 'lit';\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.\n *\n * @param host - The Lit component instance\n * @param options - Configuration options\n * @returns ItemContextController instance configured for atomic-product\n *\n * @example\n * ```typescript\n * @customElement('my-product-component')\n * export class MyProductComponent extends LitElement {\n *   private productController = createProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.productController.item;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createProductContextController(\n  host: LitElement & {error: Error | null},\n  options: {folded?: boolean} = {}\n): ItemContextController<Product> {\n  return new ItemContextController<Product>(host, {\n    parentName: 'atomic-product',\n    folded: options.folded ?? false,\n  });\n}\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.\n *\n * @param host - The Lit component instance\n * @returns InteractiveItemContextController instance\n *\n * @example\n * ```typescript\n * @customElement('my-interactive-product-component')\n * export class MyInteractiveProductComponent extends LitElement {\n *   private interactiveProductController = createInteractiveProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.interactiveProductController.interactiveItem;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createInteractiveProductContextController(\n  host: LitElement & {error: Error}\n): InteractiveItemContextController<InteractiveProduct> {\n  return new InteractiveItemContextController<InteractiveProduct>(host);\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent<\n  T extends InteractiveProduct = InteractiveProduct,\n> = InteractiveItemContextEvent<T>;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This utility function is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the utility function in the [`connectedCallback` lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered `atomic-product`.\n * @returns A promise that resolves on initialization of the parent `atomic-product` element, or rejects when there is no parent `atomic-product` element.\n */\nexport function fetchProductContext<T extends Product>(element: Element) {\n  return fetchItemContext<T>(element, 'atomic-product');\n}\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAca,kBAAmB,SAAQ,KAAK;IAC3C,YAAY,WAAmB,EAAE,UAAkB;QACjD,KAAK,CACH,QAAQ,WAAW,sCAAsC,UAAU,YAAY,CAChF,CAAC;KACH;;;ACfH,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;SAIpC,gBAAgB,CAAI,OAAgB,EAAE,UAAkB;IACtE,OAAO,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,MAAM;QACpC,MAAM,KAAK,GAAG,gBAAgB,CAC5B,oBAAoB,EACpB,CAAC,IAAO;YACN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;SACtB,CACF,CAAC;QACF,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACjC,MAAM,CACJ,IAAI,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,CACnE,CAAC;SACH;KACF,CAAC,CAAC;AACL;;ACkDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/decorators/commerce/product-template-decorators.ts"],"sourcesContent":["import {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\nimport {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\n\ntype LitElementWithError = Omit<\n  Pick<InitializableComponent, 'error'>,\n  'error'\n> &\n  LitElement & {\n    error: Error | null;\n  };\n\nconst itemContextEventName = 'atomic/resolveResult';\n\nexport class MissingParentError extends Error {\n  constructor(elementName: string, parentName: string) {\n    super(\n      `The \"${elementName}\" element must be the child of an \"${parentName}\" element.`\n    );\n  }\n}\n\nfunction extractFolded<T = Record<string, unknown>>(\n  item: Record<string, unknown>,\n  returnFolded: boolean\n): T {\n  if (returnFolded) {\n    if ('children' in item) {\n      return item as T;\n    } else {\n      return {children: [], result: item} as T;\n    }\n  }\n\n  if ('children' in item && 'result' in item) {\n    return item.result as T;\n  }\n  return item as T;\n}\n\n/**\n * A reactive controller that manages item context data from parent components.\n * Handles fetching item data via custom events and manages error states.\n */\nexport class ItemContextController<T = Record<string, unknown>>\n  implements ReactiveController\n{\n  private host: ReactiveControllerHost & LitElementWithError;\n  private parentName: string;\n  private folded: boolean;\n  private _item: T | null = null;\n  private _error: MissingParentError | null = null;\n\n  constructor(\n    host: ReactiveControllerHost & LitElementWithError,\n    options: {parentName?: string; folded?: boolean} = {}\n  ) {\n    this.host = host;\n    this.parentName = options.parentName ?? 'atomic-result';\n    this.folded = options.folded ?? false;\n    host.addController(this);\n  }\n\n  get item(): T | null {\n    return this._error ? null : this._item;\n  }\n\n  get error(): MissingParentError | null {\n    return this._error;\n  }\n\n  get hasError(): boolean {\n    return this._error !== null;\n  }\n\n  hostConnected(): void {\n    this._resolveItemContext();\n  }\n\n  private _resolveItemContext(): void {\n    const event = buildCustomEvent(\n      itemContextEventName,\n      (item: Record<string, unknown>) => {\n        this._item = extractFolded<T>(item, this.folded);\n        this._error = null;\n        this.host.error = null;\n        this.host.requestUpdate();\n      }\n    );\n\n    const canceled = this.host.dispatchEvent(event);\n    if (canceled) {\n      const elementName = (this.host as Element).nodeName.toLowerCase();\n      this._error = new MissingParentError(elementName, this.parentName);\n      this._item = null;\n      this.host.error = this._error;\n      this.host.requestUpdate();\n    }\n  }\n}\n\ntype ItemContextEventHandler<T> = (item: T) => void;\nexport type ItemContextEvent<T> = CustomEvent<ItemContextEventHandler<T>>;\n","import {closest} from '../../../utils/dom-utils.js';\nimport {buildCustomEvent} from '../../../utils/event-utils.js';\nimport {MissingParentError} from './context/item-context-controller.js';\n\nconst itemContextEventName = 'atomic/resolveResult';\n\ntype ItemContextEventHandler<T> = (item: T) => void;\n\nexport function fetchItemContext<T>(element: Element, parentName: string) {\n  return new Promise<T>((resolve, reject) => {\n    const event = buildCustomEvent<ItemContextEventHandler<T>>(\n      itemContextEventName,\n      (item: T) => {\n        return resolve(item);\n      }\n    );\n    element.dispatchEvent(event);\n\n    if (!closest(element, parentName)) {\n      reject(\n        new MissingParentError(element.nodeName.toLowerCase(), parentName)\n      );\n    }\n  });\n}\n","import {InteractiveItemContextController} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {InteractiveItemContextEvent} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\nimport {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport {LitElement} from 'lit';\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.\n *\n * @param host - The Lit component instance\n * @param options - Configuration options\n * @returns ItemContextController instance configured for atomic-product\n *\n * @example\n * ```typescript\n * @customElement('my-product-component')\n * export class MyProductComponent extends LitElement {\n *   private productController = createProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.productController.item;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createProductContextController(\n  host: LitElement & {error: Error | null},\n  options: {folded?: boolean} = {}\n): ItemContextController<Product> {\n  return new ItemContextController<Product>(host, {\n    parentName: 'atomic-product',\n    folded: options.folded ?? false,\n  });\n}\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.\n *\n * @param host - The Lit component instance\n * @returns InteractiveItemContextController instance\n *\n * @example\n * ```typescript\n * @customElement('my-interactive-product-component')\n * export class MyInteractiveProductComponent extends LitElement {\n *   private interactiveProductController = createInteractiveProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.interactiveProductController.interactiveItem;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createInteractiveProductContextController(\n  host: LitElement & {error: Error}\n): InteractiveItemContextController<InteractiveProduct> {\n  return new InteractiveItemContextController<InteractiveProduct>(host);\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent<\n  T extends InteractiveProduct = InteractiveProduct,\n> = InteractiveItemContextEvent<T>;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This utility function is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the utility function in the [`connectedCallback` lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered `atomic-product`.\n * @returns A promise that resolves on initialization of the parent `atomic-product` element, or rejects when there is no parent `atomic-product` element.\n */\nexport function fetchProductContext<T extends Product>(element: Element) {\n  return fetchItemContext<T>(element, 'atomic-product');\n}\n"],"version":3}

package/dist/atomic/components/interface-common-stencil.js

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