@coveo/atomic 3.37.1 → 3.37.2

package/dist/atomic/components/components/search/atomic-result-list/atomic-result-list.js

@@ -0,0 +1,434 @@
+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 { ArrayValue, Schema, StringValue } from '@coveo/bueno';
+import { buildInteractiveResult, buildResultList, buildResultsPerPage, buildTabManager, } from '@coveo/headless';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { map } from 'lit/directives/map.js';
+import { ref } from 'lit/directives/ref.js';
+import { when } from 'lit/directives/when.js';
+import { renderItemPlaceholders } from "../../common/atomic-result-placeholder/item-placeholders";
+import { createAppLoadedListener } from "../../common/interface/store";
+import { renderDisplayWrapper } from "../../common/item-list/display-wrapper";
+import { renderGridLayout } from "../../common/item-list/grid-layout";
+import { renderItemList } from "../../common/item-list/item-list";
+import { ItemListCommon, } from "../../common/item-list/item-list-common";
+import { ResultTemplateProvider } from "../../common/item-list/result-template-provider";
+import gridDisplayStyles from "../../common/item-list/styles/grid-display.tw.css";
+import listDisplayStyles from "../../common/item-list/styles/list-display.tw.css";
+import placeholderStyles from "../../common/item-list/styles/placeholders.tw.css";
+import tableDisplayStyles from "../../common/item-list/styles/table-display.tw.css";
+import { renderTableData, renderTableLayout, renderTableRow, } from "../../common/item-list/table-layout";
+import { renderTabWrapper } from "../../common/tabs/tab-wrapper";
+import { arrayConverter } from "../../../converters/array-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 { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
+import { FocusTargetController } from "../../../utils/accessibility-utils";
+import { randomID } from "../../../utils/utils";
+import '../atomic-result/atomic-result';
+import { getItemListDisplayClasses, } from "../../common/layout/item-layout-utils";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
+/**
+ * The `atomic-result-list` component is responsible for displaying query results by applying one or more result templates.
+ *
+ * @slot default - The default slot where the result templates are inserted.
+ * @part result-list - The element containing every result of a result list
+ * @part outline - The element displaying an outline or a divider around a result
+ * @part result-list-grid-clickable-container - The parent of the result & the clickable link encompassing it, when results are displayed as a grid
+ * @part result-list-grid-clickable - The clickable link encompassing the result when results are displayed as a grid
+ * @part result-table - The element of the result table containing a heading and a body
+ * @part result-table-heading - The element containing the row of cells in the result table's heading
+ * @part result-table-heading-row - The element containing cells of the result table's heading
+ * @part result-table-heading-cell - The element representing a cell of the result table's heading
+ * @part result-table-body - The element containing the rows of the result table's body
+ * @part result-table-row - The element containing the cells of a row in the result table's body
+ * @part result-table-row-odd - The element containing the cells of an odd row in the result table's body
+ * @part result-table-row-even - The element containing the cells of an even row in the result table's body
+ * @part result-table-cell - The element representing a cell of the result table's body
+ */
+let AtomicResultList = class AtomicResultList extends ChildrenUpdateCompleteMixin(LitElement) {
+    constructor() {
+        super();
+        this.loadingFlag = randomID('firstResultLoaded-');
+        this.isAppLoaded = false;
+        this.isEveryResultReady = false;
+        this.resultTemplateRegistered = false;
+        this.templateHasError = false;
+        /**
+         * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
+         */
+        this.density = 'normal';
+        /**
+         * The desired layout to use when displaying results. Layouts affect how many results to display per row and how visually distinct they are from each other.
+         */
+        this.display = 'list';
+        /**
+         * The expected size of the image displayed in the results.
+         */
+        this.imageSize = 'icon';
+        /**
+         * The tabs on which the result list can be displayed. This property should not be used at the same time as `tabs-excluded`.
+         *
+         * Set this property as a stringified JSON array, e.g.,
+         * ```html
+         *  <atomic-result-list tabs-included='["tabIDA", "tabIDB"]'></atomic-result-list snippet>
+         * ```
+         * If you don't set this property, the result list can be displayed on any tab. Otherwise, the result list can only be displayed on the specified tabs.
+         */
+        this.tabsIncluded = [];
+        /**
+         * The tabs on which this result list must not be displayed. This property should not be used at the same time as `tabs-included`.
+         *
+         * Set this property as a stringified JSON array, e.g.,
+         * ```html
+         *  <atomic-result-list tabs-excluded='["tabIDA", "tabIDB"]'></atomic-result-list>
+         * ```
+         * If you don't set this property, the result list can be displayed on any tab. Otherwise, the result list won't be displayed on any of the specified tabs.
+         */
+        this.tabsExcluded = [];
+        new ValidatePropsController(this, () => ({
+            density: this.density,
+            display: this.display,
+            imageSize: this.imageSize,
+            tabsIncluded: this.tabsIncluded,
+            tabsExcluded: this.tabsExcluded,
+        }), new Schema({
+            density: new StringValue({
+                constrainTo: ['normal', 'comfortable', 'compact'],
+            }),
+            display: new StringValue({ constrainTo: ['grid', 'list', 'table'] }),
+            imageSize: new StringValue({
+                constrainTo: ['small', 'large', 'icon', 'none'],
+            }),
+            tabsIncluded: new ArrayValue({
+                each: new StringValue({}),
+                required: false,
+            }),
+            tabsExcluded: new ArrayValue({
+                each: new StringValue({}),
+                required: false,
+            }),
+        }));
+    }
+    /**
+     * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.
+     * You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.
+     *
+     * Do not use this method if you integrate Atomic in a plain HTML deployment.
+     *
+     * @param resultRenderingFunction
+     */
+    async setRenderFunction(resultRenderingFunction) {
+        this.itemRenderingFunction = resultRenderingFunction;
+    }
+    initialize() {
+        if (this.innerHTML.includes('<atomic-result-children')) {
+            console.warn('Folded results will not render any children for the "atomic-result-list". Please use "atomic-folded-result-list" instead.');
+        }
+        this.resultList = buildResultList(this.bindings.engine);
+        this.resultsPerPage = buildResultsPerPage(this.bindings.engine);
+        this.tabManager = buildTabManager(this.bindings.engine);
+        this.initResultTemplateProvider();
+        this.initResultListCommon();
+        createAppLoadedListener(this.bindings.store, (isAppLoaded) => {
+            this.isAppLoaded = isAppLoaded;
+        });
+    }
+    async willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('tabManagerState')) {
+            const oldValue = changedProperties.get('tabManagerState');
+            if (this.tabManagerState?.activeTab !== oldValue?.activeTab &&
+                oldValue !== undefined) {
+                this.bindings.store.unsetLoadingFlag(this.loadingFlag);
+            }
+        }
+        if (changedProperties.has('resultListState')) {
+            const oldState = changedProperties.get('resultListState');
+            if (this.resultListState.firstSearchExecuted) {
+                this.bindings.store.unsetLoadingFlag(this.loadingFlag);
+            }
+            if (!oldState?.isLoading && this.resultListState.isLoading) {
+                this.isEveryResultReady = false;
+            }
+        }
+        await this.updateResultReadyState();
+    }
+    async updateResultReadyState() {
+        if (this.isAppLoaded &&
+            !this.isEveryResultReady &&
+            this.resultListState?.firstSearchExecuted &&
+            this.resultListState?.results?.length > 0) {
+            await this.getUpdateComplete();
+            this.isEveryResultReady = true;
+        }
+    }
+    render() {
+        return html `${renderTabWrapper({
+            props: {
+                tabsIncluded: this.tabsIncluded,
+                tabsExcluded: this.tabsExcluded,
+                activeTab: this.tabManagerState?.activeTab,
+            },
+        })(renderItemList({
+            props: {
+                hasError: this.resultListState.hasError,
+                hasItems: this.resultListState.hasResults,
+                hasTemplate: this.resultTemplateRegistered,
+                firstRequestExecuted: this.resultListState.firstSearchExecuted,
+                templateHasError: this.templateHasError,
+            },
+        })(html `${when(this.templateHasError, () => html `<slot></slot>`, () => {
+            const listClasses = this.computeListDisplayClasses();
+            const resultClasses = `${listClasses} ${!this.isEveryResultReady && 'hidden'}`;
+            // Results must be rendered immediately (though hidden) to start their initialization and loading processes.
+            // If we wait to render results until placeholders are removed, the components won't begin loading until then,
+            // causing a longer delay. The `isEveryResultReady` flag hides results while preserving placeholders,
+            // then removes placeholders once results are fully loaded to prevent content flash.
+            return html `
+              ${when(this.isAppLoaded, () => renderDisplayWrapper({
+                props: {
+                    listClasses: resultClasses,
+                    display: this.display,
+                },
+            })(html `${when(this.display === 'grid', () => this.renderGrid(), () => html `${when(this.display === 'list', () => this.renderList(), () => this.renderTable())}`)}`))}
+              ${when(!this.isEveryResultReady, () => renderDisplayWrapper({
+                props: { listClasses, display: this.display },
+            })(renderItemPlaceholders({
+                props: {
+                    density: this.density,
+                    display: this.display,
+                    imageSize: this.imageSize,
+                    numberOfPlaceholders: this.resultsPerPageState.numberOfResults || 10,
+                },
+            })))}
+            `;
+        })}`))}`;
+    }
+    initResultTemplateProvider() {
+        this.resultTemplateProvider = new ResultTemplateProvider({
+            includeDefaultTemplate: true,
+            templateElements: Array.from(this.querySelectorAll('atomic-result-template')),
+            getResultTemplateRegistered: () => this.resultTemplateRegistered,
+            getTemplateHasError: () => this.templateHasError,
+            setResultTemplateRegistered: (value) => {
+                this.resultTemplateRegistered = value;
+            },
+            setTemplateHasError: (value) => {
+                this.templateHasError = value;
+            },
+            bindings: this.bindings,
+        });
+    }
+    initResultListCommon() {
+        this.resultListCommon = new ItemListCommon({
+            engineSubscribe: this.bindings.engine.subscribe,
+            getCurrentNumberOfItems: () => this.resultListState.results.length,
+            getIsLoading: () => this.resultListState.isLoading,
+            host: this,
+            loadingFlag: this.loadingFlag,
+            nextNewItemTarget: this.focusTarget,
+            store: this.bindings.store,
+        });
+    }
+    computeListDisplayClasses() {
+        const displayPlaceholders = !(this.isAppLoaded && this.isEveryResultReady);
+        return getItemListDisplayClasses(this.display, this.density, this.imageSize, this.resultListState?.isLoading, displayPlaceholders);
+    }
+    renderGrid() {
+        return html `${map(this.resultListState.results, (result, index) => {
+            return renderGridLayout({
+                props: {
+                    item: {
+                        ...result,
+                        title: result.title ?? '',
+                    },
+                    selectorForItem: 'atomic-result',
+                    setRef: (element) => {
+                        element instanceof HTMLElement &&
+                            this.resultListCommon.setNewResultRef(element, index);
+                    },
+                },
+            })(html `${keyed(this.getResultId(result), html `<atomic-result
+            .content=${this.getContent(result)}
+            .density=${this.density}
+            .display=${this.display}
+            .imageSize=${this.imageSize}
+            .interactiveResult=${this.getInteractiveResult(result)}
+            .linkContent=${this.getLinkContent(result)}
+            .loadingFlag=${this.loadingFlag}
+            .result=${result}
+            .renderingFunction=${this.itemRenderingFunction}
+            .store=${this.bindings.store}
+          ></atomic-result>`)}`);
+        })}`;
+    }
+    renderList() {
+        return html `${map(this.resultListState.results, (result, index) => {
+            return html `${keyed(this.getResultId(result), html `<atomic-result
+        part="outline"
+         ${ref((element) => element instanceof HTMLElement &&
+                this.resultListCommon.setNewResultRef(element, index))}
+            .content=${this.getContent(result)}
+            .density=${this.density}
+            .display=${this.display}
+            .imageSize=${this.imageSize}
+            .interactiveResult=${this.getInteractiveResult(result)}
+            .linkContent=${this.getLinkContent(result)}
+            .loadingFlag=${this.loadingFlag}
+            .result=${result}
+            .renderingFunction=${this.itemRenderingFunction}
+            .store=${this.bindings.store}
+          ></atomic-result>`)}`;
+        })}`;
+    }
+    renderTable() {
+        return html `${when(this.resultListState.hasResults, () => {
+            const firstItem = this.resultListState.results[0];
+            const listClasses = this.computeListDisplayClasses();
+            const templateContentForFirstItem = this.resultTemplateProvider.getTemplateContent(firstItem);
+            return renderTableLayout({
+                props: {
+                    firstItem,
+                    host: this,
+                    itemRenderingFunction: this.itemRenderingFunction,
+                    listClasses,
+                    logger: this.bindings.engine.logger,
+                    templateContentForFirstItem,
+                },
+            })(html `${map(this.resultListState.results, (result, index) => {
+                return renderTableRow({
+                    props: {
+                        key: this.getResultId(result),
+                        rowIndex: index,
+                        setRef: (element) => {
+                            element instanceof HTMLElement &&
+                                this.resultListCommon.setNewResultRef(element, index);
+                        },
+                    },
+                })(renderTableData({
+                    props: {
+                        firstItem,
+                        templateContentForFirstItem,
+                        itemRenderingFunction: this.itemRenderingFunction,
+                        key: this.getResultId(result),
+                        renderItem: (content) => {
+                            return html `<atomic-result
+                      .content=${content}
+                      .density=${this.density}
+                      .display=${this.display}
+                      .imageSize=${this.imageSize}
+                      .interactiveResult=${this.getInteractiveResult(result)}
+                       .linkContent=${this.getLinkContent(result)}
+                      .loadingFlag=${this.loadingFlag}
+                      .result=${result}
+                      .renderingFunction=${this.itemRenderingFunction}
+                      .store=${this.bindings.store}
+                    ></atomic-result>`;
+                        },
+                    },
+                }));
+            })}`);
+        }, () => nothing)}`;
+    }
+    get focusTarget() {
+        if (!this.nextNewResultTarget) {
+            this.nextNewResultTarget = new FocusTargetController(this, this.bindings);
+        }
+        return this.nextNewResultTarget;
+    }
+    getLinkContent(result) {
+        return this.display === 'grid'
+            ? this.resultTemplateProvider.getLinkTemplateContent(result)
+            : this.resultTemplateProvider.getEmptyLinkTemplateContent();
+    }
+    getContent(result) {
+        return this.resultTemplateProvider.getTemplateContent(result);
+    }
+    getInteractiveResult(result) {
+        return buildInteractiveResult(this.bindings.engine, {
+            options: { result },
+        });
+    }
+    getResultId(result) {
+        return this.resultListCommon.getResultId(result.uniqueId, this.resultListState.searchResponseId, this.density, this.imageSize);
+    }
+};
+AtomicResultList.styles = [
+    placeholderStyles,
+    tableDisplayStyles,
+    listDisplayStyles,
+    gridDisplayStyles,
+];
+__decorate([
+    state()
+], AtomicResultList.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicResultList.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicResultList.prototype, "isAppLoaded", void 0);
+__decorate([
+    state()
+], AtomicResultList.prototype, "isEveryResultReady", void 0);
+__decorate([
+    state()
+], AtomicResultList.prototype, "resultTemplateRegistered", void 0);
+__decorate([
+    state()
+], AtomicResultList.prototype, "templateHasError", void 0);
+__decorate([
+    bindStateToController('resultList'),
+    state()
+], AtomicResultList.prototype, "resultListState", void 0);
+__decorate([
+    bindStateToController('resultsPerPage'),
+    state()
+], AtomicResultList.prototype, "resultsPerPageState", void 0);
+__decorate([
+    bindStateToController('tabManager'),
+    state()
+], AtomicResultList.prototype, "tabManagerState", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicResultList.prototype, "density", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicResultList.prototype, "display", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'image-size', type: String })
+], AtomicResultList.prototype, "imageSize", void 0);
+__decorate([
+    property({
+        attribute: 'tabs-included',
+        converter: arrayConverter,
+        type: Array,
+    })
+], AtomicResultList.prototype, "tabsIncluded", void 0);
+__decorate([
+    property({
+        attribute: 'tabs-excluded',
+        converter: arrayConverter,
+        type: Array,
+    })
+], AtomicResultList.prototype, "tabsExcluded", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicResultList.prototype, "render", null);
+AtomicResultList = __decorate([
+    customElement('atomic-result-list'),
+    bindings(),
+    withTailwindStyles
+], AtomicResultList);
+export { AtomicResultList };

package/dist/atomic/components/components/search/atomic-result-template/atomic-result-template.js

@@ -14,6 +14,7 @@ import { mapProperty } from "../../../utils/props-utils";
 import "../../common/atomic-component-error/atomic-component-error";
 import { arrayConverter } from "../../../converters/array-converter";
 import { errorGuard } from "../../../decorators/error-guard";
+import '../atomic-result/atomic-result';
 /**
  * A result template determines the format of the query results, depending on the conditions that are defined for each template.
  *

package/dist/atomic/components/components/search/atomic-search-interface/atomic-search-interface.js

@@ -10,9 +10,9 @@ import i18next from 'i18next';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import { bindingsContext } from "../../common/context/bindings-context";
 import { InterfaceController, } from "../../common/interface/interface-controller";
 import { MobileBreakpointController } from "../../common/layout/mobile-breakpoint-controller";
-import { bindingsContext } from "../../context/bindings-context";
 import { errorSelector, firstSearchExecutedSelector, noResultsSelector, } from "../atomic-search-layout/search-layout";
 import { booleanConverter } from "../../../converters/boolean-converter";
 import { errorGuard } from "../../../decorators/error-guard";

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

@@ -7,6 +7,7 @@ export { AtomicQuerySummary } from './atomic-query-summary/atomic-query-summary.
 export { AtomicRelevanceInspector } from './atomic-relevance-inspector/atomic-relevance-inspector.js';
 export { AtomicResult } from './atomic-result/atomic-result.js';
 export { AtomicResultChildrenTemplate } from './atomic-result-children-template/atomic-result-children-template.js';
+export { AtomicResultList } from './atomic-result-list/atomic-result-list.js';
 export { AtomicResultSectionActions } from './atomic-result-section-actions/atomic-result-section-actions.js';
 export { AtomicResultSectionBadges } from './atomic-result-section-badges/atomic-result-section-badges.js';
 export { AtomicResultSectionBottomMetadata } from './atomic-result-section-bottom-metadata/atomic-result-section-bottom-metadata.js';

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

@@ -8,6 +8,7 @@ export default {
     'atomic-relevance-inspector': async () => await import('./atomic-relevance-inspector/atomic-relevance-inspector.js'),
     'atomic-result': async () => await import('./atomic-result/atomic-result.js'),
     'atomic-result-children-template': async () => await import('./atomic-result-children-template/atomic-result-children-template.js'),
+    'atomic-result-list': async () => await import('./atomic-result-list/atomic-result-list.js'),
     'atomic-result-section-actions': async () => await import('./atomic-result-section-actions/atomic-result-section-actions.js'),
     'atomic-result-section-badges': async () => await import('./atomic-result-section-badges/atomic-result-section-badges.js'),
     'atomic-result-section-bottom-metadata': async () => await import('./atomic-result-section-bottom-metadata/atomic-result-section-bottom-metadata.js'),

package/dist/atomic/components/decorators/bindings.js

@@ -1,5 +1,5 @@
 import { ContextConsumer } from '@lit/context';
-import { bindingsContext } from '../components/context/bindings-context';
+import { bindingsContext } from '../components/common/context/bindings-context';
 /**
  * A decorator that will initialize the component with the bindings provided by the bindings context.
  * It ensures that the component is initialized only once and that the language is updated when the language changes.

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

@@ -3,7 +3,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.37.1",
+        version: "3.37.2",
         headlessVersion,
     };
 }

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;;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;;ACVA;;;;;;;;;MASa,iCAAiC,GAAG,CAI/C,KAA+D,EAC/D,OAAoB,EACpB,2BAA0E,iBAAiB;IAE3F,MAAM,gBAAgB,GAAG,OAAO,CAAC,OAAO,EAAE,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACxE,IAAI,CAAC,gBAAgB,EAAE;QACrB,MAAM,IAAI,KAAK,CACb,QAAQ,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,gFAAgF,wBAAwB,CAAC,IAAI,CACjJ,IAAI,CACL,EAAE,CACJ,CAAC;KACH;IACD,KAAK,2CAA2C,CAC9C,gBAAgB,EAChB,OAAO,EACP,KAAK,CACN,CAAC;AACJ,EAAE;AAEF,MAAM,iBAAiB,GAAG;IACxB,mBAAmB;IACnB,2BAA2B;IAC3B,4BAA4B;CACpB,CAAC;AAEX,MAAM,mBAAmB,GAAG,CAAC,SAAkB,KAC7C,gBAAgB,IAAK,SAAwB;IAC5C,SAAwB,CAAC,cAAc,YAAY,OAAO,CAAC;AAE9D,MAAM,2CAA2C,GAAG,OAIlD,gBAAyB,EACzB,OAAoB,EACpB,KAA+D;IAE/D,MAAM,cAAc,CAAC,WAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;IAC1E,IAAI,mBAAmB,CAAC,gBAAgB,CAAC,EAAE;QACzC,MAAM,gBAAgB,CAAC,cAAc,CAAC;KACvC;SAAM,IAAI,kBAAkB,IAAI,gBAAgB,EAAE;QACjD,MAAO,gBAAuC,CAAC,gBAAgB,EAAE,CAAC;KACnE;IACD,OAAO,CAAC,aAAa,CACnB,gBAAgB,CAAC,qCAAqC,EAAE,KAAK,CAAC,CAC/D,CAAC;AACJ,CAAC;;;;","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","src/components/common/suggestions/suggestions-events.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 {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","import type {HTMLStencilElement} from '@stencil/core/internal';\nimport type {LitElement} from 'lit';\nimport {closest} from '../../../utils/dom-utils';\nimport {buildCustomEvent} from '../../../utils/event-utils';\nimport type {AnyBindings} from '../interface/bindings';\nimport type {SearchBoxSuggestionsEvent} from './suggestions-types';\n\n/**\n * Dispatches an event which retrieves the `SearchBoxSuggestionsBindings` on a configured parent search box.\n *\n * @param event Event sent from the registered query suggestions to the parent search box\n * @param element Element on which to dispatch the event, which must be the child of a configured search box\n * @param allowedSearchBoxElements Optional array of allowed search box element selectors\n *\n * @throws Error if the element is not a child of an allowed search box element\n */\nexport const dispatchSearchBoxSuggestionsEvent = <\n  SearchBoxController,\n  Bindings = AnyBindings,\n>(\n  event: SearchBoxSuggestionsEvent<SearchBoxController, Bindings>,\n  element: HTMLElement,\n  allowedSearchBoxElements: readonly (typeof searchBoxElements)[number][] = searchBoxElements\n) => {\n  const interfaceElement = closest(element, searchBoxElements.join(', '));\n  if (!interfaceElement) {\n    throw new Error(\n      `The \"${element.nodeName.toLowerCase()}\" component was not handled, as it is not a child of the following elements: ${allowedSearchBoxElements.join(\n        ', '\n      )}`\n    );\n  }\n  void dispatchSearchBoxSuggestionsEventEventually(\n    interfaceElement,\n    element,\n    event\n  );\n};\n\nconst searchBoxElements = [\n  'atomic-search-box',\n  'atomic-insight-search-box',\n  'atomic-commerce-search-box',\n] as const;\n\nconst isLitElementLoosely = (candidate: unknown): candidate is LitElement =>\n  'updateComplete' in (candidate as LitElement) &&\n  (candidate as LitElement).updateComplete instanceof Promise;\n\nconst dispatchSearchBoxSuggestionsEventEventually = async <\n  SearchBoxController,\n  Bindings = AnyBindings,\n>(\n  interfaceElement: Element,\n  element: HTMLElement,\n  event: SearchBoxSuggestionsEvent<SearchBoxController, Bindings>\n) => {\n  await customElements.whenDefined(interfaceElement.nodeName.toLowerCase());\n  if (isLitElementLoosely(interfaceElement)) {\n    await interfaceElement.updateComplete;\n  } else if ('componentOnReady' in interfaceElement) {\n    await (interfaceElement as HTMLStencilElement).componentOnReady();\n  }\n  element.dispatchEvent(\n    buildCustomEvent('atomic/searchBoxSuggestion/register', event)\n  );\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;;ACVA;;;;;;;;;MASa,iCAAiC,GAAG,CAI/C,KAA+D,EAC/D,OAAoB,EACpB,2BAA0E,iBAAiB;IAE3F,MAAM,gBAAgB,GAAG,OAAO,CAAC,OAAO,EAAE,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACxE,IAAI,CAAC,gBAAgB,EAAE;QACrB,MAAM,IAAI,KAAK,CACb,QAAQ,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,gFAAgF,wBAAwB,CAAC,IAAI,CACjJ,IAAI,CACL,EAAE,CACJ,CAAC;KACH;IACD,KAAK,2CAA2C,CAC9C,gBAAgB,EAChB,OAAO,EACP,KAAK,CACN,CAAC;AACJ,EAAE;AAEF,MAAM,iBAAiB,GAAG;IACxB,mBAAmB;IACnB,2BAA2B;IAC3B,4BAA4B;CACpB,CAAC;AAEX,MAAM,mBAAmB,GAAG,CAAC,SAAkB,KAC7C,gBAAgB,IAAK,SAAwB;IAC5C,SAAwB,CAAC,cAAc,YAAY,OAAO,CAAC;AAE9D,MAAM,2CAA2C,GAAG,OAIlD,gBAAyB,EACzB,OAAoB,EACpB,KAA+D;IAE/D,MAAM,cAAc,CAAC,WAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;IAC1E,IAAI,mBAAmB,CAAC,gBAAgB,CAAC,EAAE;QACzC,MAAM,gBAAgB,CAAC,cAAc,CAAC;KACvC;SAAM,IAAI,kBAAkB,IAAI,gBAAgB,EAAE;QACjD,MAAO,gBAAuC,CAAC,gBAAgB,EAAE,CAAC;KACnE;IACD,OAAO,CAAC,aAAa,CACnB,gBAAgB,CAAC,qCAAqC,EAAE,KAAK,CAAC,CAC/D,CAAC;AACJ,CAAC;;;;","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","src/components/common/suggestions/suggestions-events.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 {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","import type {HTMLStencilElement} from '@stencil/core/internal';\nimport type {LitElement} from 'lit';\nimport {closest} from '../../../utils/dom-utils';\nimport {buildCustomEvent} from '../../../utils/event-utils';\nimport type {AnyBindings} from '../interface/bindings';\nimport type {SearchBoxSuggestionsEvent} from './suggestions-types';\n\n/**\n * Dispatches an event which retrieves the `SearchBoxSuggestionsBindings` on a configured parent search box.\n *\n * @param event Event sent from the registered query suggestions to the parent search box\n * @param element Element on which to dispatch the event, which must be the child of a configured search box\n * @param allowedSearchBoxElements Optional array of allowed search box element selectors\n *\n * @throws Error if the element is not a child of an allowed search box element\n */\nexport const dispatchSearchBoxSuggestionsEvent = <\n  SearchBoxController,\n  Bindings = AnyBindings,\n>(\n  event: SearchBoxSuggestionsEvent<SearchBoxController, Bindings>,\n  element: HTMLElement,\n  allowedSearchBoxElements: readonly (typeof searchBoxElements)[number][] = searchBoxElements\n) => {\n  const interfaceElement = closest(element, searchBoxElements.join(', '));\n  if (!interfaceElement) {\n    throw new Error(\n      `The \"${element.nodeName.toLowerCase()}\" component was not handled, as it is not a child of the following elements: ${allowedSearchBoxElements.join(\n        ', '\n      )}`\n    );\n  }\n  void dispatchSearchBoxSuggestionsEventEventually(\n    interfaceElement,\n    element,\n    event\n  );\n};\n\nconst searchBoxElements = [\n  'atomic-search-box',\n  'atomic-insight-search-box',\n  'atomic-commerce-search-box',\n] as const;\n\nconst isLitElementLoosely = (candidate: unknown): candidate is LitElement =>\n  'updateComplete' in (candidate as LitElement) &&\n  (candidate as LitElement).updateComplete instanceof Promise;\n\nconst dispatchSearchBoxSuggestionsEventEventually = async <\n  SearchBoxController,\n  Bindings = AnyBindings,\n>(\n  interfaceElement: Element,\n  element: HTMLElement,\n  event: SearchBoxSuggestionsEvent<SearchBoxController, Bindings>\n) => {\n  await customElements.whenDefined(interfaceElement.nodeName.toLowerCase());\n  if (isLitElementLoosely(interfaceElement)) {\n    await interfaceElement.updateComplete;\n  } else if ('componentOnReady' in interfaceElement) {\n    await (interfaceElement as HTMLStencilElement).componentOnReady();\n  }\n  element.dispatchEvent(\n    buildCustomEvent('atomic/searchBoxSuggestion/register', event)\n  );\n};\n"],"version":3}

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

@@ -2,6 +2,21 @@ import { h, Fragment } from '@stencil/core/internal/client';
 import { A as ArrowRight } from './arrow-right.js';
 import { B as Button } from './stencil-button.js';
 
+// The Lit equivalent of this file is grid-layout.ts
+/**
+ * @deprecated should only be used for Stencil components.
+ */
+const DisplayGrid = ({ setRef, selectorForItem }, children) => {
+    let ref;
+    return (h("div", { part: "result-list-grid-clickable-container outline", ref: (element) => {
+            ref = element;
+            setRef(element);
+        }, onClick: (event) => {
+            event.preventDefault();
+            ref?.querySelector(selectorForItem)?.click();
+        } }, ...children));
+};
+
 /**
  * @deprecated should only be used for Stencil components.
  */
@@ -30,6 +45,6 @@ const Carousel = (props, children) => {
         renderIndicators()));
 };
 
-export { Carousel as C };
+export { Carousel as C, DisplayGrid as D };
 
 //# sourceMappingURL=stencil-carousel.js.map

package/dist/atomic/components/stencil-carousel.js.map

@@ -1 +1 @@
-{"file":"stencil-carousel.js","mappings":";;;;AAcA;;;MAGa,QAAQ,GAEjB,CAAC,KAAK,EAAE,QAAQ;IAClB,MAAM,uBAAuB,GAC3B,kGAAkG,CAAC;IACrG,MAAM,kBAAkB,GACtB,+FAA+F,CAAC;IAElG,SAAS,oBAAoB;QAC3B,QACE,EAAC,MAAM,IACL,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,EAC5C,OAAO,EAAE,MAAM,KAAK,CAAC,YAAY,EAAE,EACnC,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,GAAG,uBAAuB,mBAAmB;YAEpD,mBACE,IAAI,EAAE,UAAU,EAChB,KAAK,EAAE,GAAG,kBAAkB,aAAa,GAC5B,CACR,EACT;KACH;IAED,SAAS,gBAAgB;QACvB,QACE,EAAC,MAAM,IACL,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EACxC,OAAO,EAAE,MAAM,KAAK,CAAC,QAAQ,EAAE,EAC/B,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,GAAG,uBAAuB,0BAA0B;YAE3D,mBAAa,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,kBAAkB,GAAgB,CACjE,EACT;KACH;IAED,SAAS,gBAAgB;QACvB,QACE,UAAI,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gCAAgC,IACzD,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,KAAK,CAAC,aAAa,EAAC,EAAE,CAAC,CAAC,EAAE,KAAK;YAClD,MAAM,QAAQ,GAAG,KAAK,KAAK,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC;YACnE,QACE,UACE,IAAI,EAAE,aAAa,QAAQ,GAAG,kBAAkB,GAAG,EAAE,EAAE,EACvD,KAAK,EAAE,uBACL,QAAQ,GAAG,YAAY,GAAG,YAC5B,GAAG,GACC,EACN;SACH,CAAC,CACC,EACL;KACH;IAED,QACE,EAAC,QAAQ;QACP,WAAK,KAAK,EAAC,UAAU;YAClB,oBAAoB,EAAE;YACtB,QAAQ;YACR,gBAAgB,EAAE,CACf;QACL,gBAAgB,EAAE,CACV,EACX;AACJ;;;;","names":[],"sources":["src/components/common/stencil-carousel.tsx"],"sourcesContent":["import {h, FunctionalComponent, Fragment} from '@stencil/core';\nimport {JSXBase} from '@stencil/core/internal';\nimport ArrowRight from '../../images/arrow-right.svg';\nimport {AnyBindings} from './interface/bindings.js';\nimport {Button} from './stencil-button.js';\n\ninterface CarouselProps {\n  bindings: AnyBindings;\n  previousPage(): void;\n  nextPage(): void;\n  numberOfPages: number;\n  currentPage: number;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const Carousel: FunctionalComponent<\n  CarouselProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\n> = (props, children) => {\n  const commonPaginationClasses =\n    'w-10 h-10 grid justify-center items-center absolute top-1/2 -translate-y-1/2 z-1 shadow-lg group';\n  const commonArrowClasses =\n    'w-3.5 align-middle text-on-background group-hover:text-primary group-focus:text-primary-light';\n\n  function renderPreviousButton() {\n    return (\n      <Button\n        style=\"outline-primary\"\n        ariaLabel={props.bindings.i18n.t('previous')}\n        onClick={() => props.previousPage()}\n        part=\"previous-button\"\n        class={`${commonPaginationClasses} -translate-x-1/2`}\n      >\n        <atomic-icon\n          icon={ArrowRight}\n          class={`${commonArrowClasses} rotate-180`}\n        ></atomic-icon>\n      </Button>\n    );\n  }\n\n  function renderNextButton() {\n    return (\n      <Button\n        style=\"outline-primary\"\n        ariaLabel={props.bindings.i18n.t('next')}\n        onClick={() => props.nextPage()}\n        part=\"next-button\"\n        class={`${commonPaginationClasses} right-0 translate-x-1/2`}\n      >\n        <atomic-icon icon={ArrowRight} class={commonArrowClasses}></atomic-icon>\n      </Button>\n    );\n  }\n\n  function renderIndicators() {\n    return (\n      <ul part=\"indicators\" class=\"mt-6 flex justify-center gap-2\">\n        {Array.from({length: props.numberOfPages}, (_, index) => {\n          const isActive = index === props.currentPage % props.numberOfPages;\n          return (\n            <li\n              part={`indicator ${isActive ? 'active-indicator' : ''}`}\n              class={`h-1 w-12 rounded-md ${\n                isActive ? 'bg-primary' : 'bg-neutral'\n              } `}\n            ></li>\n          );\n        })}\n      </ul>\n    );\n  }\n\n  return (\n    <Fragment>\n      <div class=\"relative\">\n        {renderPreviousButton()}\n        {children}\n        {renderNextButton()}\n      </div>\n      {renderIndicators()}\n    </Fragment>\n  );\n};\n"],"version":3}
+{"file":"stencil-carousel.js","mappings":";;;;AAAA;AAYA;;;MAGa,WAAW,GAA0C,CAChE,EAAC,MAAM,EAAE,eAAe,EAAC,EACzB,QAAQ;IAER,IAAI,GAA4B,CAAC;IACjC,QACE,WACE,IAAI,EAAC,8CAA8C,EACnD,GAAG,EAAE,CAAC,OAAO;YACX,GAAG,GAAG,OAAO,CAAC;YACd,MAAM,CAAC,OAAO,CAAC,CAAC;SACjB,EACD,OAAO,EAAE,CAAC,KAAK;YACb,KAAK,CAAC,cAAc,EAAE,CAAC;YACtB,GAAG,EAAE,aAAa,CAAC,eAAe,CAAiB,EAAE,KAAK,EAAE,CAAC;SAC/D,OAEG,QAAQ,CACR,EACN;AACJ;;ACrBA;;;MAGa,QAAQ,GAEjB,CAAC,KAAK,EAAE,QAAQ;IAClB,MAAM,uBAAuB,GAC3B,kGAAkG,CAAC;IACrG,MAAM,kBAAkB,GACtB,+FAA+F,CAAC;IAElG,SAAS,oBAAoB;QAC3B,QACE,EAAC,MAAM,IACL,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,EAC5C,OAAO,EAAE,MAAM,KAAK,CAAC,YAAY,EAAE,EACnC,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,GAAG,uBAAuB,mBAAmB;YAEpD,mBACE,IAAI,EAAE,UAAU,EAChB,KAAK,EAAE,GAAG,kBAAkB,aAAa,GAC5B,CACR,EACT;KACH;IAED,SAAS,gBAAgB;QACvB,QACE,EAAC,MAAM,IACL,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EACxC,OAAO,EAAE,MAAM,KAAK,CAAC,QAAQ,EAAE,EAC/B,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,GAAG,uBAAuB,0BAA0B;YAE3D,mBAAa,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,kBAAkB,GAAgB,CACjE,EACT;KACH;IAED,SAAS,gBAAgB;QACvB,QACE,UAAI,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gCAAgC,IACzD,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,KAAK,CAAC,aAAa,EAAC,EAAE,CAAC,CAAC,EAAE,KAAK;YAClD,MAAM,QAAQ,GAAG,KAAK,KAAK,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC;YACnE,QACE,UACE,IAAI,EAAE,aAAa,QAAQ,GAAG,kBAAkB,GAAG,EAAE,EAAE,EACvD,KAAK,EAAE,uBACL,QAAQ,GAAG,YAAY,GAAG,YAC5B,GAAG,GACC,EACN;SACH,CAAC,CACC,EACL;KACH;IAED,QACE,EAAC,QAAQ;QACP,WAAK,KAAK,EAAC,UAAU;YAClB,oBAAoB,EAAE;YACtB,QAAQ;YACR,gBAAgB,EAAE,CACf;QACL,gBAAgB,EAAE,CACV,EACX;AACJ;;;;","names":[],"sources":["src/components/common/item-list/stencil-display-grid.tsx","src/components/common/stencil-carousel.tsx"],"sourcesContent":["// The Lit equivalent of this file is grid-layout.ts\nimport {FunctionalComponent, h} from '@stencil/core';\n\ninterface DisplayGridProps {\n  selectorForItem: string;\n  item: {clickUri: string; title: string};\n  setRef: (element?: HTMLElement) => void;\n  select: () => void;\n  beginDelayedSelect: () => void;\n  cancelPendingSelect: () => void;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const DisplayGrid: FunctionalComponent<DisplayGridProps> = (\n  {setRef, selectorForItem},\n  children\n) => {\n  let ref: HTMLElement | undefined;\n  return (\n    <div\n      part=\"result-list-grid-clickable-container outline\"\n      ref={(element) => {\n        ref = element;\n        setRef(element);\n      }}\n      onClick={(event) => {\n        event.preventDefault();\n        (ref?.querySelector(selectorForItem) as HTMLElement)?.click();\n      }}\n    >\n      {...children}\n    </div>\n  );\n};\n","import {h, FunctionalComponent, Fragment} from '@stencil/core';\nimport {JSXBase} from '@stencil/core/internal';\nimport ArrowRight from '../../images/arrow-right.svg';\nimport {AnyBindings} from './interface/bindings.js';\nimport {Button} from './stencil-button.js';\n\ninterface CarouselProps {\n  bindings: AnyBindings;\n  previousPage(): void;\n  nextPage(): void;\n  numberOfPages: number;\n  currentPage: number;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const Carousel: FunctionalComponent<\n  CarouselProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\n> = (props, children) => {\n  const commonPaginationClasses =\n    'w-10 h-10 grid justify-center items-center absolute top-1/2 -translate-y-1/2 z-1 shadow-lg group';\n  const commonArrowClasses =\n    'w-3.5 align-middle text-on-background group-hover:text-primary group-focus:text-primary-light';\n\n  function renderPreviousButton() {\n    return (\n      <Button\n        style=\"outline-primary\"\n        ariaLabel={props.bindings.i18n.t('previous')}\n        onClick={() => props.previousPage()}\n        part=\"previous-button\"\n        class={`${commonPaginationClasses} -translate-x-1/2`}\n      >\n        <atomic-icon\n          icon={ArrowRight}\n          class={`${commonArrowClasses} rotate-180`}\n        ></atomic-icon>\n      </Button>\n    );\n  }\n\n  function renderNextButton() {\n    return (\n      <Button\n        style=\"outline-primary\"\n        ariaLabel={props.bindings.i18n.t('next')}\n        onClick={() => props.nextPage()}\n        part=\"next-button\"\n        class={`${commonPaginationClasses} right-0 translate-x-1/2`}\n      >\n        <atomic-icon icon={ArrowRight} class={commonArrowClasses}></atomic-icon>\n      </Button>\n    );\n  }\n\n  function renderIndicators() {\n    return (\n      <ul part=\"indicators\" class=\"mt-6 flex justify-center gap-2\">\n        {Array.from({length: props.numberOfPages}, (_, index) => {\n          const isActive = index === props.currentPage % props.numberOfPages;\n          return (\n            <li\n              part={`indicator ${isActive ? 'active-indicator' : ''}`}\n              class={`h-1 w-12 rounded-md ${\n                isActive ? 'bg-primary' : 'bg-neutral'\n              } `}\n            ></li>\n          );\n        })}\n      </ul>\n    );\n  }\n\n  return (\n    <Fragment>\n      <div class=\"relative\">\n        {renderPreviousButton()}\n        {children}\n        {renderNextButton()}\n      </div>\n      {renderIndicators()}\n    </Fragment>\n  );\n};\n"],"version":3}

package/dist/atomic/components/{facet-placeholder.js → stencil-facet-placeholder.js}

@@ -15,4 +15,4 @@ const FacetPlaceholder = ({ numberOfValues, isCollapsed, }) => {
 
 export { FacetPlaceholder as F };
 
-//# sourceMappingURL=facet-placeholder.js.map
+//# sourceMappingURL=stencil-facet-placeholder.js.map

package/dist/atomic/components/stencil-facet-placeholder.js.map

@@ -0,0 +1 @@
+{"file":"stencil-facet-placeholder.js","mappings":";;AAOA;;;MAGa,gBAAgB,GAA+C,CAAC,EAC3E,cAAc,EACd,WAAW,GACZ;IACC,MAAM,WAAW,GAAG,EAAE,CAAC;IACvB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,EAAE;QACvC,WAAW,CAAC,IAAI,CACd,WACE,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAC,GACjC,CACR,CAAC;KACH;IAED,QACE,WACE,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,uEAAuE,iBACjE,MAAM;QAElB,WAAK,KAAK,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,KAAK,EAAC,GAAQ;QAChE,CAAC,WAAW,IAAI,WAAK,KAAK,EAAC,MAAM,IAAE,WAAW,CAAO,CAClD,EACN;AACJ;;;;","names":[],"sources":["src/components/common/facets/facet-placeholder/stencil-facet-placeholder.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\n\ninterface FacetPlaceholderProps {\n  numberOfValues: number;\n  isCollapsed: boolean;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const FacetPlaceholder: FunctionalComponent<FacetPlaceholderProps> = ({\n  numberOfValues,\n  isCollapsed,\n}) => {\n  const facetValues = [];\n  for (let i = 0; i < numberOfValues; i++) {\n    facetValues.push(\n      <div\n        class=\"bg-neutral mt-4 flex h-5\"\n        style={{width: '100%', opacity: '0.5'}}\n      ></div>\n    );\n  }\n\n  return (\n    <div\n      part=\"placeholder\"\n      class=\"bg-background border-neutral mb-4 animate-pulse rounded-lg border p-7\"\n      aria-hidden=\"true\"\n    >\n      <div class=\"bg-neutral h-8 rounded\" style={{width: '75%'}}></div>\n      {!isCollapsed && <div class=\"mt-7\">{facetValues}</div>}\n    </div>\n  );\n};\n"],"version":3}

package/dist/atomic/components/stencil-result-template-common.js

@@ -1,9 +1,10 @@
 import { ResultTemplatesHelpers } from '@coveo/headless';
 import { h } from '@stencil/core/internal/client';
 import { m as aggregate, n as isVisualNode, q as isElementNode } from './utils.js';
-import { t as tableElementTagName } from './table-element-utils.js';
 import { i as isResultSectionNode } from './item-layout-sections.js';
 
+const tableElementTagName = 'atomic-table-element';
+
 function getTemplateNodeType(node) {
     if (isResultSectionNode(node)) {
         return 'section';