@coveo/atomic 3.29.1 → 3.29.2-pre.16192e6f2e

package/dist/atomic/components/components/commerce/atomic-commerce-refine-modal/atomic-commerce-refine-modal.js

@@ -0,0 +1,202 @@
+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 { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
+import { html, LitElement, nothing, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { booleanConverter } from "../../../converters/boolean-converter";
+import { bindStateToController } from "../../../decorators/bind-state";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { watch } from "../../../decorators/watch";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { renderRefineModalBody } from '../../common/refine-modal/body';
+import { renderRefineModalFiltersClearButton, renderRefineModalFiltersSection, } from '../../common/refine-modal/filters';
+import { renderRefineModal } from '../../common/refine-modal/modal';
+import { renderRefineModalSortSection } from '../../common/refine-modal/sort';
+import { getSortByLabel, renderCommerceSortOption } from '../sort/option';
+import styles from './atomic-commerce-refine-modal.tw.css';
+/**
+ * The `atomic-commerce-refine-modal` is automatically created as a child of the `atomic-commerce-search-interface` when the `atomic-commerce-refine-toggle` is initialized.
+ *
+ * When the modal is opened, the class `atomic-modal-opened` is added to the interface element and the body, allowing further customization.
+ *
+ * @part title - The title of the modal.
+ * @part close-button - The button in the header that closes the modal.
+ * @part close-icon - The icon of the close button.
+ * @part footer-content - The wrapper around the content inside the footer of the modal, containing the button to view results.
+ * @part footer-button - The button in the footer that closes the modal.
+ * @part footer-button-text - The text inside the button in the footer that closes the modal.
+ * @part footer-button-count - The count inside the button in the footer that closes the modal.
+ * @part content - The wrapper around the content inside the body of the modal.
+ * @part select - The `<select>` element of the dropdown list.
+ * @part section-sort-title - The title for the sort section.
+ * @part select-wrapper - The wrapper around the select element, used to position the icon.
+ * @part select-icon-wrapper - The wrapper around the sort icon that's used to align it.
+ * @part select-icon - The select dropdown's sort icon.
+ * @part filter-section - The section containing facets and the "filters" title.
+ * @part section-filters-title - The title for the filters section.
+ * @part filter-clear-all - The button that resets all actively selected facet values.
+ * @part section-title - The title for each section.
+ */
+let AtomicCommerceRefineModal = class AtomicCommerceRefineModal extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the modal is open.
+         */
+        this.isOpen = false;
+        /**
+         * The number of expanded facets inside the refine modal.
+         * Remaining facets are automatically collapsed.
+         *
+         * Using the value `0` collapses all facets.
+         */
+        this.collapseFacetsAfter = 0;
+        this.onSelectSortOption = (e) => {
+            const select = e.composedPath()[0];
+            this.sort.sortBy(getSortByLabel(select.value, this.sortState.availableSorts));
+        };
+    }
+    initialize() {
+        const searchOrListing = this.bindings.interfaceElement.type === 'search'
+            ? buildSearch(this.bindings.engine)
+            : buildProductListing(this.bindings.engine);
+        this.summary = searchOrListing.summary();
+        this.sort = searchOrListing.sort();
+        this.facetGenerator = searchOrListing.facetGenerator();
+        this.breadcrumbManager = searchOrListing.breadcrumbManager();
+        this.watchEnabled();
+    }
+    watchEnabled() {
+        if (this.isOpen) {
+            if (this.querySelector('div[slot="facets"]')) {
+                return;
+            }
+            this.appendChild(this.createFacetSlot());
+        }
+    }
+    /**
+     * This method is necessary to ensure
+     * that the facets slot is rendered outside of the component's shadow DOM, preserving
+     * correct CSS inheritance and slot behavior. If this logic were placed in the render
+     * function, the slot would be rendered inside the shadow DOM, which would break
+     * expected CSS styling and slot distribution.
+     */
+    createFacetSlot() {
+        const divSlot = document.createElement('div');
+        divSlot.setAttribute('slot', 'facets');
+        const facets = document.createElement('atomic-commerce-facets');
+        facets.style.display = 'flex';
+        facets.style.flexDirection = 'column';
+        facets.style.gap = 'var(--atomic-refine-modal-facet-margin, 20px)';
+        facets.collapseFacetsAfter = this.collapseFacetsAfter;
+        divSlot.append(facets);
+        return divSlot;
+    }
+    renderSort() {
+        return renderRefineModalSortSection({
+            props: {
+                i18n: this.bindings.i18n,
+                onSelect: this.onSelectSortOption,
+            },
+        })(html `${this.sortState.availableSorts.map((sort) => renderCommerceSortOption({
+            props: {
+                i18n: this.bindings.i18n,
+                selected: this.sort.isSortedBy(sort),
+                sort,
+            },
+        }))}`);
+    }
+    renderFilters() {
+        if (this.facetGeneratorState.length === 0) {
+            return;
+        }
+        const { i18n } = this.bindings;
+        return renderRefineModalFiltersSection({
+            props: {
+                i18n,
+                withFacets: true,
+                withAutomaticFacets: false,
+            },
+        })(this.breadcrumbManagerState.hasBreadcrumbs
+            ? renderRefineModalFiltersClearButton({
+                props: {
+                    i18n,
+                    onClick: () => this.breadcrumbManager.deselectAll(),
+                },
+            })
+            : nothing);
+    }
+    render() {
+        return html `${renderRefineModal({
+            props: {
+                i18n: this.bindings.i18n,
+                host: this,
+                isOpen: this.isOpen,
+                onClose: () => {
+                    this.isOpen = false;
+                },
+                title: this.bindings.i18n.t('sort-and-filter'),
+                numberOfItems: this.summaryState.totalNumberOfProducts,
+                openButton: this.openButton,
+            },
+        })(renderRefineModalBody()(html `
+        ${this.renderSort()} ${this.renderFilters()}
+      `))}`;
+    }
+};
+AtomicCommerceRefineModal.styles = [unsafeCSS(styles)];
+__decorate([
+    state()
+], AtomicCommerceRefineModal.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicCommerceRefineModal.prototype, "error", void 0);
+__decorate([
+    property({ attribute: 'open-button', type: Object })
+], AtomicCommerceRefineModal.prototype, "openButton", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        converter: booleanConverter,
+        reflect: true,
+        attribute: 'is-open',
+    })
+], AtomicCommerceRefineModal.prototype, "isOpen", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'collapse-facets-after' })
+], AtomicCommerceRefineModal.prototype, "collapseFacetsAfter", void 0);
+__decorate([
+    bindStateToController('summary'),
+    state()
+], AtomicCommerceRefineModal.prototype, "summaryState", void 0);
+__decorate([
+    bindStateToController('sort'),
+    state()
+], AtomicCommerceRefineModal.prototype, "sortState", void 0);
+__decorate([
+    bindStateToController('facetGenerator'),
+    state()
+], AtomicCommerceRefineModal.prototype, "facetGeneratorState", void 0);
+__decorate([
+    bindStateToController('breadcrumbManager'),
+    state()
+], AtomicCommerceRefineModal.prototype, "breadcrumbManagerState", void 0);
+__decorate([
+    watch('isOpen')
+], AtomicCommerceRefineModal.prototype, "watchEnabled", null);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicCommerceRefineModal.prototype, "render", null);
+AtomicCommerceRefineModal = __decorate([
+    customElement('atomic-commerce-refine-modal'),
+    bindings(),
+    withTailwindStyles
+], AtomicCommerceRefineModal);
+export { AtomicCommerceRefineModal };

package/dist/atomic/components/components/commerce/atomic-commerce-refine-modal/atomic-commerce-refine-modal.tw.css.js

@@ -0,0 +1,7 @@
+import dep0 from '../../common/refine-modal/refine-modal-common.tw.css.js';
+const css = `/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+:host{position:absolute}select:hover+div,select:focus-visible+div{color:var(--atomic-primary-light)}`;
+
+    const allCss = [...dep0, css];
+    export default allCss;
+    

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

@@ -11,6 +11,7 @@ export { AtomicCommerceProductsPerPage } from './atomic-commerce-products-per-pa
 export { AtomicCommerceQuerySummary } from './atomic-commerce-query-summary/atomic-commerce-query-summary.js';
 export { AtomicCommerceRecommendationInterface } from './atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.js';
 export { AtomicCommerceRecommendationList } from './atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.js';
+export { AtomicCommerceRefineModal } from './atomic-commerce-refine-modal/atomic-commerce-refine-modal.js';
 export { AtomicCommerceRefineToggle } from './atomic-commerce-refine-toggle/atomic-commerce-refine-toggle.js';
 export { AtomicCommerceSearchBox } from './atomic-commerce-search-box/atomic-commerce-search-box.js';
 export { AtomicCommerceSearchBoxInstantProducts } from './atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.js';

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

@@ -12,6 +12,7 @@ export default {
     'atomic-commerce-query-summary': async () => await import('./atomic-commerce-query-summary/atomic-commerce-query-summary.js'),
     'atomic-commerce-recommendation-interface': async () => await import('./atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.js'),
     'atomic-commerce-recommendation-list': async () => await import('./atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.js'),
+    'atomic-commerce-refine-modal': async () => await import('./atomic-commerce-refine-modal/atomic-commerce-refine-modal.js'),
     'atomic-commerce-refine-toggle': async () => await import('./atomic-commerce-refine-toggle/atomic-commerce-refine-toggle.js'),
     'atomic-commerce-search-box': async () => await import('./atomic-commerce-search-box/atomic-commerce-search-box.js'),
     'atomic-commerce-search-box-instant-products': async () => await import('./atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.js'),

package/dist/atomic/components/components/common/atomic-modal/export-parts.js

@@ -0,0 +1 @@
+export const ATOMIC_MODAL_EXPORT_PARTS = 'backdrop,container,header-wrapper,header,header-ruler,body-wrapper,body,footer-wrapper,footer';

package/dist/atomic/components/components/common/refine-modal/body.js

@@ -0,0 +1,12 @@
+import { html } from 'lit';
+export const renderRefineModalBody = () => (children) => {
+    return html `
+      <aside
+        part="content"
+        slot="body"
+        class="adjust-for-scroll-bar flex w-full flex-col"
+      >
+        ${children}
+      </aside>
+    `;
+};

package/dist/atomic/components/components/common/refine-modal/filters.js

@@ -0,0 +1,29 @@
+import { html, nothing } from 'lit';
+import { when } from 'lit/directives/when.js';
+import { renderButton } from '../button';
+export const renderRefineModalFiltersSection = ({ props }) => (children) => {
+    return html `
+      <div part="filter-section" class="mt-8 mb-3 flex w-full justify-between">
+        <h1
+          part="section-title section-filters-title"
+          class="truncate text-2xl font-bold"
+        >
+          ${props.i18n.t('filters')}
+        </h1>
+        ${children}
+      </div>
+      ${when(props.withFacets, () => html `<slot name="facets"></slot>`)}
+      ${when(props.withAutomaticFacets, () => html `<slot name="automatic-facets"></slot>`)}
+    `;
+};
+export const renderRefineModalFiltersClearButton = ({ props }) => {
+    return html `${renderButton({
+        props: {
+            onClick: props.onClick,
+            style: 'text-primary',
+            text: props.i18n.t('clear'),
+            class: 'px-2 py-1',
+            part: 'filter-clear-all',
+        },
+    })(nothing)}`;
+};

package/dist/atomic/components/components/common/refine-modal/modal.js

@@ -0,0 +1,76 @@
+import { html } from 'lit';
+import { localizedString } from "../../../directives/localized-string";
+const CloseIcon = "<svg viewBox=\"0 0 22 22\"><g transform=\"matrix(.7071 -.7071 .7071 .7071 -3.142 11)\"><path d=\"m9-3.4h2v26.9h-2z\"/><path d=\"m-3.4 9h26.9v2h-26.9z\"/></g></svg>";
+import { ATOMIC_MODAL_EXPORT_PARTS } from '../atomic-modal/export-parts';
+import { renderButton } from '../button';
+export const renderRefineModal = ({ props }) => (children) => {
+    const flushFacetElements = () => {
+        props.host.querySelector('div[slot="facets"]')?.remove();
+    };
+    const renderHeader = () => {
+        return html `
+        <div slot="header" class="contents">
+          <h1 part="title" class="truncate">${props.title}</h1>
+          ${renderButton({
+            props: {
+                style: 'text-transparent',
+                class: 'grid place-items-center',
+                part: 'close-button',
+                onClick: props.onClose,
+                ariaLabel: props.i18n.t('close'),
+            },
+        })(html `<atomic-icon
+              part="close-icon"
+              class="h-5 w-5"
+              icon=${CloseIcon}
+            ></atomic-icon>`)}
+        </div>
+      `;
+    };
+    const renderFooter = () => {
+        return html `
+        <div part="footer-content" slot="footer">
+          ${renderButton({
+            props: {
+                style: 'primary',
+                part: 'footer-button',
+                class: 'flex w-full justify-center p-3 text-lg',
+                onClick: props.onClose,
+            },
+        })(html `
+            <span part="footer-button-text" class="mr-1 truncate">
+              ${props.i18n.t('view-results')}
+            </span>
+            <span part="footer-button-count">
+              ${localizedString({
+            i18n: props.i18n,
+            key: 'between-parentheses',
+            params: {
+                text: props.numberOfItems.toLocaleString(props.i18n.language),
+            },
+        })}
+            </span>
+          `)}
+        </div>
+      `;
+    };
+    return html `
+      <atomic-modal
+        .fullscreen=${true}
+        .isOpen=${props.isOpen}
+        .source=${props.openButton}
+        .container=${props.host}
+        .close=${props.onClose}
+        .onAnimationEnded=${() => {
+        if (!props.isOpen) {
+            flushFacetElements();
+        }
+    }}
+        exportparts=${ATOMIC_MODAL_EXPORT_PARTS}
+        .boundary=${props.boundary}
+        .scope=${props.scope}
+      >
+        ${renderHeader()} ${children} ${renderFooter()}
+      </atomic-modal>
+    `;
+};

package/dist/atomic/components/components/common/refine-modal/refine-modal-common.tw.css.js

@@ -0,0 +1,2 @@
+const css = `.adjust-for-scroll-bar{margin-right:calc(-100vw + 3rem + 100%)}`;
+export default [css];

package/dist/atomic/components/components/common/refine-modal/sort.js

@@ -0,0 +1,32 @@
+import { html } from 'lit';
+const SortIcon = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M7.5 6L7.5 17\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M11 14L7.5 18L4 14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M16.5 18L16.5 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M13 10L16.5 6L20 10\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>";
+export const renderRefineModalSortSection = ({ props }) => (children) => {
+    return html `
+      <h1
+        part="section-title section-sort-title"
+        class="mb-3 truncate text-2xl font-bold"
+      >
+        ${props.i18n.t('sort')}
+      </h1>
+      <div part="select-wrapper" class="relative">
+        <select
+          class="btn-outline-neutral w-full grow cursor-pointer appearance-none rounded-lg px-6 py-5 text-lg font-bold"
+          part="select"
+          aria-label=${props.i18n.t('sort-by')}
+          @change=${props.onSelect}
+        >
+          ${children}
+        </select>
+        <div
+          part="select-icon-wrapper"
+          class="pointer-events-none absolute top-0 right-0 bottom-0 flex items-center justify-center pr-6"
+        >
+          <atomic-icon
+            part="select-icon"
+            icon=${SortIcon}
+            class="h-6 w-6"
+          ></atomic-icon>
+        </div>
+      </div>
+    `;
+};

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: 'e2fa89f6162073d29eac48402c61c8639f7db8fa', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
+        return (h("form", { key: '66210360124b901bc06f4b580fc0dcfdc26d052a', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: '4b27b2c56a50e1ba03cbe984f0f144dd09b65a24', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: 'a28f6f86eff1a0d6e9e7366d74d6292c1e400c67', 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: 'd21bf8eb905967b1d7aa30642704c267740101db', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: '72fb4b93759acce7f4d83f43a01030fd3e8e5367', 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: '18152b1a37aeaa700e10b35577c45041c15b5259', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: 'ded55e597f62ef7f6c61ac6e2dfe4c0cd6cff1b6', 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: 'a9265bb688842a5c0f4cb5b95133f4c3a7784556', 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: '2ab0bf19bb295a5c3feeb526146b0287f7c86512', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: '817f74aab19560d083cd31c77b33d0605b8fd2a0', 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: '1bb5742a33b0e92011d2dff6289a8450e6a0f197', 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: '88e2f97c8063421d3db1b888ff0bcb3c724c47f4', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
+        return (h("form", { key: '77291ac09dc1118f757f3d32c38aa6bc613edddf', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: '1150309df6de7de6ab435bc2ba26cdaf41505758', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: '65b0514f64b2d058f1b4b857a7cf660184d6ddf6', 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: '17f31559758e0c41cda84206efab8982ac8769a5', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: '6bcd6327151f5b442564887b2fce9c0ea4f2c49c', 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: '85141773c0640ab06511f22147ba63ce99821006', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            } }, h("label", { key: '5309a15ea4d3a9bc2fed7f3596866d2b3117ac12', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: '92a11cb7cb7bbf039c93b1ba90baa1843eb83192', 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: '21243a1753114f5c7b0b1cdd97ae889f0aff554d', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: 'ebb84cfaebfe765fa9d092b69352867e1d8a9806', 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: 'b9f81396588324884c582045b7f784b170ca0863', 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.29.1".VERSION,
+        version: "3.29.2-pre.16192e6f2e".VERSION,
         headlessVersion: VERSION,
     };
 }

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

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

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

@@ -25,7 +25,7 @@ const AtomicTabButton = /*@__PURE__*/ proxyCustomElement(class AtomicTabButton e
         return this.active ? '' : 'text-neutral-dark hover:text-primary-light';
     }
     render() {
-        return (h(Host, { key: 'b8a391fea7b7da702817ff91a9c88783111df0fe', role: "listitem", class: `${this.activeTabClass}`, "aria-current": this.active ? 'true' : 'false', "aria-label": 'tab for ' + this.label, part: 'button-container' + (this.active ? '-active' : '') }, h(Button, { key: 'e15b356a9749b61597726b60e64e5d190b57d654', class: `w-full truncate px-2 pb-1 text-xl sm:px-6 ${this.activeTabTextClass}`, part: 'tab-button' + (this.active ? '-active' : ''), onClick: this.select, style: "text-transparent" }, this.label)));
+        return (h(Host, { key: 'a3ed52da09ee8b35c46fe653616bc42457aca248', role: "listitem", class: `${this.activeTabClass}`, "aria-current": this.active ? 'true' : 'false', "aria-label": 'tab for ' + this.label, part: 'button-container' + (this.active ? '-active' : '') }, h(Button, { key: 'fba0fd168a52d49452cb92c5e64a718af0c80e47', class: `w-full truncate px-2 pb-1 text-xl sm:px-6 ${this.activeTabTextClass}`, part: 'tab-button' + (this.active ? '-active' : ''), onClick: this.select, style: "text-transparent" }, this.label)));
     }
     static get style() { return AtomicTabButtonStyle0; }
 }, [0, "atomic-tab-button", {

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

@@ -144,7 +144,7 @@ const TabPopover = /*@__PURE__*/ proxyCustomElement(class TabPopover extends HTM
         this.popperInstance?.forceUpdate();
     }
     render() {
-        return (h(Host, { key: '05a3acf39d94c16a39b97abb419c7248b4083e80', onFocusout: (event) => this.closePopoverOnFocusOut(event), class: this.show ? '' : 'visibility-hidden', "aria-hidden": !this.show }, this.renderPopover(), this.isOpen && this.renderBackdrop()));
+        return (h(Host, { key: 'a0e245ffb27db607039f6d4ac420b5ab67d39aac', onFocusout: (event) => this.closePopoverOnFocusOut(event), class: this.show ? '' : 'visibility-hidden', "aria-hidden": !this.show }, this.renderPopover(), this.isOpen && this.renderBackdrop()));
     }
     get host() { return this; }
     static get style() { return AtomicTabPopoverStyle0; }