@coveo/atomic 3.50.0 → 3.52.0

package/dist/atomic/components/components/ipx/atomic-ipx-recs-list/atomic-ipx-recs-list.js

@@ -0,0 +1,483 @@
+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;
+};
+var AtomicIpxRecsList_1;
+import { NumberValue, Schema, StringValue } from '@coveo/bueno';
+import { loadIPXActionsHistoryActions, } from '@coveo/headless';
+import { buildRecommendationList, buildInteractiveResult as buildRecsInteractiveResult, loadConfigurationActions, } from '@coveo/headless/recommendation';
+import { css, 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 { when } from 'lit/directives/when.js';
+import { renderItemPlaceholders } from "../../common/atomic-result-placeholder/item-placeholders";
+import { renderCarousel } from "../../common/carousel";
+import { renderHeading } from "../../common/heading";
+import { createAppLoadedListener } from "../../common/interface/store";
+import { renderDisplayWrapper } from "../../common/item-list/display-wrapper";
+import { renderGridLayout } from "../../common/item-list/grid-layout";
+import { ItemListCommon, } from "../../common/item-list/item-list-common";
+import { ResultTemplateProvider } from "../../common/item-list/result-template-provider";
+import { getItemListDisplayClasses, } from "../../common/layout/item-layout-utils";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
+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 placeholderStyles from '../../common/item-list/styles/placeholders.tw.css';
+import "../../recommendations/atomic-recs-result/atomic-recs-result";
+/**
+ * The `atomic-ipx-recs-list` component displays recommendations by applying one or more result templates.
+ *
+ * @part result-list - The element containing the list of results.
+ * @part result-list-grid-clickable-container - The parent of the result and the clickable link encompassing it.
+ * @part outline - The outline element around a result in the grid layout.
+ * @part label - The label of the result list.
+ * @part previous-button - The previous button.
+ * @part next-button - The next button.
+ * @part previous-icon - The previous button icon.
+ * @part next-icon - The next button icon.
+ * @part carousel - The carousel container.
+ * @part indicators - The list of indicators.
+ * @part indicator - A single indicator.
+ * @part active-indicator - The active indicator.
+ *
+ * @slot default - The default slot where the result templates are defined.
+ *
+ * @cssprop --atomic-recs-number-of-columns - The number of columns in the grid.
+ */
+let AtomicIpxRecsList = AtomicIpxRecsList_1 = class AtomicIpxRecsList extends ChildrenUpdateCompleteMixin(LitElement) {
+    constructor() {
+        super();
+        this.loadingFlag = randomID('firstRecommendationLoaded-');
+        this.currentPage = 0;
+        this.isAppLoaded = false;
+        this.isEveryResultReady = false;
+        this.resultTemplateRegistered = false;
+        this.templateHasError = false;
+        /**
+         * The Recommendation identifier used by the Coveo platform to retrieve recommended documents.
+         * Make sure to set a different value for each atomic-ipx-recs-list in your page.
+         */
+        this.recommendation = 'Recommendation';
+        /**
+         * The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself.
+         * To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.
+         */
+        this.display = 'list';
+        /**
+         * 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 expected size of the image displayed in the results.
+         */
+        this.imageSize = 'small';
+        /**
+         * The total number of recommendations to display.
+         * This does not modify the number of recommendations per column. To do so, modify the --atomic-recs-number-of-columns CSS variable.
+         */
+        this.numberOfRecommendations = 10;
+        /**
+         * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.
+         * When set to 0, a `div` will be used instead of a Heading Element.
+         */
+        this.headingLevel = 0;
+        new ValidatePropsController(this, () => ({
+            density: this.density,
+            display: this.display,
+            imageSize: this.imageSize,
+        }), AtomicIpxRecsList_1.propsSchema, 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 such as 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;
+    }
+    /**
+     * Moves to the previous page, when the carousel is activated.
+     */
+    async previousPage() {
+        this.currentPage =
+            this.currentPage - 1 < 0 ? this.numberOfPages - 1 : this.currentPage - 1;
+    }
+    /**
+     * Moves to the next page, when the carousel is activated.
+     */
+    async nextPage() {
+        this.currentPage = (this.currentPage + 1) % this.numberOfPages;
+    }
+    initialize() {
+        this.validateNumberOfRecommendationsPerPage();
+        this.validateRecommendationIdentifier();
+        this.updateOriginLevel2();
+        this.recommendationList = buildRecommendationList(this.bindings.engine, {
+            options: {
+                id: this.recommendation,
+                numberOfRecommendations: this.numberOfRecommendations,
+            },
+        });
+        this.itemTemplateProvider = new ResultTemplateProvider({
+            includeDefaultTemplate: true,
+            templateElements: Array.from(this.querySelectorAll('atomic-recs-result-template')),
+            getResultTemplateRegistered: () => this.resultTemplateRegistered,
+            getTemplateHasError: () => this.templateHasError,
+            setResultTemplateRegistered: (value) => {
+                this.resultTemplateRegistered = value;
+            },
+            setTemplateHasError: (value) => {
+                this.templateHasError = value;
+            },
+            bindings: this.bindings,
+        });
+        this.itemListCommon = new ItemListCommon({
+            engineSubscribe: this.bindings.engine.subscribe,
+            getCurrentNumberOfItems: () => this.recommendationListState.recommendations.length,
+            getIsLoading: () => this.recommendationListState.isLoading,
+            host: this,
+            loadingFlag: this.loadingFlag,
+            nextNewItemTarget: this.focusTarget,
+            store: this.bindings.store,
+        });
+        this.actionsHistoryActions = loadIPXActionsHistoryActions(this.bindings.engine);
+        createAppLoadedListener(this.bindings.store, (isAppLoaded) => {
+            this.isAppLoaded = isAppLoaded;
+        });
+    }
+    async willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('numberOfRecommendationsPerPage')) {
+            this.currentPage = 0;
+        }
+        if (changedProperties.has('recommendationListState')) {
+            const oldState = changedProperties.get('recommendationListState');
+            if (this.recommendationListState.searchResponseId !== '') {
+                this.bindings.store.unsetLoadingFlag(this.loadingFlag);
+            }
+            if (!oldState?.isLoading && this.recommendationListState.isLoading) {
+                this.isEveryResultReady = false;
+            }
+        }
+        await this.updateResultsReadyState();
+    }
+    async updateResultsReadyState() {
+        if (this.isAppLoaded &&
+            !this.isEveryResultReady &&
+            this.recommendationListState?.searchResponseId !== '' &&
+            this.recommendationListState?.recommendations?.length > 0) {
+            await this.getUpdateComplete();
+            this.isEveryResultReady = true;
+        }
+    }
+    get focusTarget() {
+        if (!this.nextNewResultTarget) {
+            this.nextNewResultTarget = new FocusTargetController(this, this.bindings);
+        }
+        return this.nextNewResultTarget;
+    }
+    get recommendationListStateWithAugment() {
+        return {
+            ...this.recommendationListState,
+            firstRequestExecuted: this.recommendationListState.searchResponseId !== '',
+            hasError: this.recommendationListState.error !== null,
+            hasItems: this.recommendationListState.recommendations.length !== 0,
+            results: this.subsetRecommendations,
+        };
+    }
+    validateNumberOfRecommendationsPerPage() {
+        if (this.numberOfRecommendationsPerPage === undefined) {
+            return;
+        }
+        const msg = new NumberValue({
+            min: 1,
+            max: this.numberOfRecommendations - 1,
+        }).validate(this.numberOfRecommendationsPerPage);
+        if (msg) {
+            this.error = new Error(`The "numberOfRecommendationsPerPage" is invalid: ${msg}`);
+        }
+    }
+    validateRecommendationIdentifier() {
+        const recListWithRecommendation = document.querySelectorAll(`atomic-ipx-recs-list[recommendation="${this.recommendation}"]`);
+        if (recListWithRecommendation.length > 1) {
+            this.bindings.engine.logger.warn(`There are multiple atomic-ipx-recs-list in this page with the same recommendation property "${this.recommendation}". Make sure to set a different recommendation property for each.`);
+        }
+    }
+    updateOriginLevel2() {
+        if (this.label) {
+            const action = loadConfigurationActions(this.bindings.engine).setOriginLevel2({
+                originLevel2: this.label,
+            });
+            this.bindings.engine.dispatch(action);
+        }
+    }
+    get currentIndex() {
+        if (!this.recommendationListState.recommendations.length) {
+            return 0;
+        }
+        return Math.abs((this.currentPage * this.numberOfRecommendationsPerPage) %
+            this.recommendationListState.recommendations.length);
+    }
+    get subsetRecommendations() {
+        if (!this.numberOfRecommendationsPerPage) {
+            return this.recommendationListState.recommendations;
+        }
+        return this.recommendationListState.recommendations.slice(this.currentIndex, this.currentIndex + this.numberOfRecommendationsPerPage);
+    }
+    get numberOfPages() {
+        if (!this.numberOfRecommendationsPerPage) {
+            return 1;
+        }
+        return Math.ceil(this.recommendationListState.recommendations.length /
+            this.numberOfRecommendationsPerPage);
+    }
+    get hasPagination() {
+        return !!this.numberOfRecommendationsPerPage && this.numberOfPages > 1;
+    }
+    get shouldRenderPagination() {
+        return (this.hasPagination && this.recommendationListStateWithAugment.hasItems);
+    }
+    get hasNoResults() {
+        return (!this.recommendationListState.isLoading &&
+            this.recommendationListStateWithAugment.results.length === 0);
+    }
+    onSelect(recommendation, originalSelect) {
+        if (recommendation.raw.permanentid && this.actionsHistoryActions) {
+            const action = this.actionsHistoryActions.addPageViewEntryInActionsHistory(recommendation.raw.permanentid);
+            this.bindings.engine.dispatch(action);
+        }
+        originalSelect();
+    }
+    getPropsForAtomicRecsResult(recommendation) {
+        const interactiveResult = buildRecsInteractiveResult(this.bindings.engine, {
+            options: { result: recommendation },
+        });
+        const originalSelect = interactiveResult.select;
+        interactiveResult.select = () => {
+            this.onSelect(recommendation, originalSelect);
+        };
+        const linkContent = this.itemTemplateProvider.getLinkTemplateContent(recommendation);
+        return {
+            interactiveResult,
+            result: recommendation,
+            renderingFunction: this.itemRenderingFunction,
+            loadingFlag: this.loadingFlag,
+            key: this.itemListCommon.getResultId(recommendation.uniqueId, this.recommendationListState.searchResponseId, this.density, this.imageSize),
+            content: this.itemTemplateProvider.getTemplateContent(recommendation),
+            linkContent,
+            stopPropagation: !!linkContent,
+            store: this.bindings.store,
+            density: this.density,
+            display: this.display,
+            imageSize: this.imageSize,
+        };
+    }
+    computeListDisplayClasses() {
+        const displayPlaceholders = !(this.isAppLoaded && this.isEveryResultReady);
+        return getItemListDisplayClasses('grid', this.density, this.imageSize, this.recommendationListState.isLoading, displayPlaceholders);
+    }
+    renderHeading() {
+        if (!this.label) {
+            return nothing;
+        }
+        if (this.recommendationListStateWithAugment.hasError) {
+            return nothing;
+        }
+        if (!this.isEveryResultReady && this.isAppLoaded) {
+            return html `
+        <div
+          aria-hidden="true"
+          class="bg-neutral my-2 h-8 w-60 animate-pulse rounded"
+        ></div>
+      `;
+        }
+        if (this.recommendationListStateWithAugment.firstRequestExecuted &&
+            !this.recommendationListStateWithAugment.hasItems) {
+            return nothing;
+        }
+        return html `${renderHeading({
+            props: {
+                level: this.headingLevel,
+                part: 'label',
+                class: 'm-0 mb-2',
+            },
+        })(html `${this.bindings.i18n.t(this.label)}`)}`;
+    }
+    renderAsGrid() {
+        return html `${map(this.subsetRecommendations, (recommendation, index) => {
+            const props = this.getPropsForAtomicRecsResult(recommendation);
+            return renderGridLayout({
+                props: {
+                    selectorForItem: 'atomic-recs-result',
+                    item: {
+                        ...recommendation,
+                        clickUri: recommendation.clickUri,
+                        title: recommendation.title ?? '',
+                    },
+                    ...props.interactiveResult,
+                    setRef: (element) => {
+                        element &&
+                            this.itemListCommon.setNewResultRef(element, index);
+                    },
+                },
+            })(html `${keyed(props.key, html `<atomic-recs-result
+            .content=${props.content}
+            .density=${props.density}
+            .display=${props.display}
+            .imageSize=${props.imageSize}
+            .linkContent=${props.linkContent}
+            .loadingFlag=${props.loadingFlag}
+            .interactiveResult=${props.interactiveResult}
+            .result=${props.result}
+            .renderingFunction=${props.renderingFunction}
+            .store=${props.store}
+          ></atomic-recs-result>`)}`);
+        })}`;
+    }
+    renderRecommendationList() {
+        this.itemListCommon.updateBreakpoints();
+        const listClasses = this.computeListDisplayClasses();
+        if (!this.resultTemplateRegistered || this.error) {
+            return nothing;
+        }
+        const resultClasses = [listClasses, !this.isEveryResultReady && 'hidden']
+            .filter(Boolean)
+            .join(' ');
+        return html `
+      ${when(this.isAppLoaded, () => renderDisplayWrapper({
+            props: { listClasses: resultClasses, display: 'grid' },
+        })(html `${this.renderAsGrid()}`))}
+      ${when(!this.isEveryResultReady, () => renderDisplayWrapper({
+            props: { listClasses, display: 'grid' },
+        })(renderItemPlaceholders({
+            props: {
+                density: this.density,
+                display: this.display,
+                imageSize: this.imageSize,
+                numberOfPlaceholders: this.numberOfRecommendationsPerPage ??
+                    this.numberOfRecommendations,
+            },
+        })))}
+    `;
+    }
+    get shouldRender() {
+        if (!this.resultTemplateRegistered || this.error) {
+            return false;
+        }
+        if (this.hasNoResults) {
+            return false;
+        }
+        return true;
+    }
+    render() {
+        if (!this.shouldRender) {
+            if (this.hasNoResults) {
+                this.bindings.store.unsetLoadingFlag(this.loadingFlag);
+            }
+            return nothing;
+        }
+        return html `${when(this.templateHasError, () => html `<slot></slot>`, () => html `${this.renderHeading()}
+        ${when(this.shouldRenderPagination, () => renderCarousel({
+            props: {
+                bindings: this.bindings,
+                previousPage: () => this.previousPage(),
+                nextPage: () => this.nextPage(),
+                numberOfPages: this.numberOfPages,
+                currentPage: this.currentPage,
+                ariaLabel: this.bindings.i18n.t(this.label ?? 'recommendations'),
+            },
+        })(html `<div class="px-3">${this.renderRecommendationList()}</div>`), () => this.renderRecommendationList())}`)}`;
+    }
+};
+AtomicIpxRecsList.styles = [
+    placeholderStyles,
+    css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer properties;.list-wrapper.placeholder{.result-component,table.list-root{display:none}}.list-wrapper:not(.placeholder){atomic-result-placeholder,atomic-result-table-placeholder{display:none}}.list-root.loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}:host{display:block;[part~=outline][part~=result-list-grid-clickable-container]{border:1px solid transparent;border-radius:1rem;padding:1rem;position:relative;transition:all .12s ease-out;&:hover{border-color:var(--atomic-neutral);border-style:var(--tw-border-style);border-width:1px;box-shadow:0 10px 25px var(--atomic-neutral);cursor:pointer}}[part=result-list-grid-clickable]:focus-visible{border-color:var(--atomic-primary);border-radius:2px;border-style:var(--tw-border-style);border-width:2px;color:var(--atomic-primary);cursor:pointer;display:inline-block;position:absolute;text-align:center;text-decoration:underline}[part=result-list-grid-clickable]:not(:focus){clip:rect(1px,1px,1px,1px);overflow:hidden;padding:0;position:absolute}.list-wrapper{word-break:break-word}.list-root.display-grid{display:grid;justify-content:space-evenly;.result-component{box-sizing:border-box;height:100%}}.list-root{grid-column-gap:.5rem;grid-row-gap:.5rem;grid-template-columns:repeat(var(--atomic-recs-number-of-columns,1),minmax(0,1fr));[part~=outline]{border-color:var(--atomic-neutral);border-radius:1rem;border-style:var(--tw-border-style);border-width:1px;padding:1rem}atomic-result-placeholder{border-color:transparent}}[part=label]{font-family:var(--atomic-font-family);font-size:var(--atomic-text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height,1.33333));--tw-font-weight:var(--atomic-font-bold);font-weight:var(--atomic-font-bold)}atomic-result:not(.hydrated){visibility:hidden}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid;--tw-font-weight:initial}}}`,
+];
+AtomicIpxRecsList.propsSchema = new Schema({
+    density: new StringValue({
+        constrainTo: ['normal', 'comfortable', 'compact'],
+    }),
+    display: new StringValue({ constrainTo: ['grid', 'list'] }),
+    imageSize: new StringValue({
+        constrainTo: ['small', 'large', 'icon', 'none'],
+    }),
+});
+__decorate([
+    state()
+], AtomicIpxRecsList.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicIpxRecsList.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicIpxRecsList.prototype, "currentPage", void 0);
+__decorate([
+    state()
+], AtomicIpxRecsList.prototype, "isAppLoaded", void 0);
+__decorate([
+    state()
+], AtomicIpxRecsList.prototype, "isEveryResultReady", void 0);
+__decorate([
+    state()
+], AtomicIpxRecsList.prototype, "resultTemplateRegistered", void 0);
+__decorate([
+    state()
+], AtomicIpxRecsList.prototype, "templateHasError", void 0);
+__decorate([
+    bindStateToController('recommendationList'),
+    state()
+], AtomicIpxRecsList.prototype, "recommendationListState", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicIpxRecsList.prototype, "recommendation", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicIpxRecsList.prototype, "display", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicIpxRecsList.prototype, "density", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'image-size', type: String })
+], AtomicIpxRecsList.prototype, "imageSize", void 0);
+__decorate([
+    property({
+        reflect: true,
+        attribute: 'number-of-recommendations',
+        type: Number,
+    })
+], AtomicIpxRecsList.prototype, "numberOfRecommendations", void 0);
+__decorate([
+    property({
+        reflect: true,
+        attribute: 'number-of-recommendations-per-page',
+        type: Number,
+    })
+], AtomicIpxRecsList.prototype, "numberOfRecommendationsPerPage", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicIpxRecsList.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'heading-level', type: Number })
+], AtomicIpxRecsList.prototype, "headingLevel", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicIpxRecsList.prototype, "render", null);
+AtomicIpxRecsList = AtomicIpxRecsList_1 = __decorate([
+    customElement('atomic-ipx-recs-list'),
+    bindings(),
+    withTailwindStyles
+], AtomicIpxRecsList);
+export { AtomicIpxRecsList };

package/dist/atomic/components/components/ipx/atomic-ipx-refine-modal/atomic-ipx-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 { buildBreadcrumbManager, buildQuerySummary, } from '@coveo/headless';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { collapseFacetsAfter, } from "../../common/facets/facet-common";
+import { popoverClass } from "../../common/facets/popover/popover-type";
+import { isRefineModalFacet } from "../../common/interface/store";
+import { renderRefineModalBody } from "../../common/refine-modal/body";
+import { renderRefineModalFiltersClearButton, renderRefineModalFiltersSection, } from "../../common/refine-modal/filters";
+import { renderRefineModal } from "../../common/refine-modal/modal";
+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 { sortByDocumentPosition } from "../../../utils/utils";
+/**
+ * The `atomic-ipx-refine-modal` component is automatically created as a child of the `atomic-search-interface` when the `atomic-ipx-refine-toggle` is initialized.
+ *
+ * When the modal is opened, the class `atomic-modal-opened` is added to the interface element and the body.
+ *
+ * @slot facets - Slot for facet elements to be displayed in the modal. This slot is managed internally by the component and should not be used directly.
+ *
+ * @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 content - The wrapper around the content inside the body of the modal.
+ * @part section-title - The title for each section.
+ * @part section-filters-title - The title for the filters section.
+ * @part filter-section - The section containing facets and the "filters" title.
+ * @part filter-clear-all - The button that resets all actively selected facet values.
+ * @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 footer-wrapper - The wrapper with a shadow or background color around the footer.
+ * @part footer - The footer of the modal.
+ * @part header-ruler - The horizontal ruler underneath the header.
+ * @part body-wrapper - The wrapper around the body.
+ * @part body - The body of the modal, between the header and the footer.
+ * @part header-wrapper - The wrapper around the header.
+ * @part header - The header of the modal, containing the title.
+ * @part container - The modal's outermost container.
+ * @part backdrop - The transparent backdrop hiding the content behind the modal.
+ *
+ * @cssprop --atomic-refine-modal-facet-margin - The margin between facets in the refine modal. Default is `20px`.
+ */
+let AtomicIpxRefineModal = class AtomicIpxRefineModal 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;
+    }
+    initialize() {
+        this.breadcrumbManager = buildBreadcrumbManager(this.bindings.engine);
+        this.querySummary = buildQuerySummary(this.bindings.engine);
+        this.watchEnabled();
+    }
+    watchEnabled() {
+        if (this.isOpen) {
+            this.createFacetSlotIfAbsent();
+        }
+    }
+    createFacetSlotIfAbsent() {
+        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');
+        this.addFacetColumnStyling(divSlot);
+        const facets = this.bindings.store.getFacetElements().sort(sortByDocumentPosition);
+        const clonedFacets = this.cloneFacets(facets);
+        collapseFacetsAfter(clonedFacets, this.collapseFacetsAfter);
+        divSlot.append(...clonedFacets);
+        return divSlot;
+    }
+    cloneFacets(facets) {
+        return facets.map((facet, i) => {
+            const clone = facet.cloneNode(true);
+            clone.classList.remove(popoverClass);
+            clone.setAttribute(isRefineModalFacet, '');
+            clone.isCollapsed =
+                this.collapseFacetsAfter === -1
+                    ? false
+                    : i + 1 > this.collapseFacetsAfter;
+            return clone;
+        });
+    }
+    addFacetColumnStyling(el) {
+        el.style.display = 'flex';
+        el.style.flexDirection = 'column';
+        el.style.gap = 'var(--atomic-refine-modal-facet-margin, 20px)';
+    }
+    renderFilters() {
+        const hasFacetElements = this.bindings.store.getFacetElements().length > 0;
+        if (!hasFacetElements) {
+            return nothing;
+        }
+        const { i18n } = this.bindings;
+        return renderRefineModalFiltersSection({
+            props: {
+                i18n,
+                withFacets: hasFacetElements,
+                withAutomaticFacets: false,
+            },
+        })(this.breadcrumbManagerState.hasBreadcrumbs
+            ? renderRefineModalFiltersClearButton({
+                props: {
+                    i18n,
+                    onClick: () => this.breadcrumbManager.deselectAll(),
+                },
+            })
+            : nothing);
+    }
+    render() {
+        return html `${renderRefineModal({
+            props: {
+                i18n: this.bindings.i18n,
+                i18nFooterButtonTextKey: 'view-results',
+                host: this,
+                isOpen: this.isOpen,
+                onClose: () => {
+                    this.isOpen = false;
+                },
+                title: this.bindings.i18n.t('filters'),
+                numberOfItems: this.querySummaryState.total,
+                openButton: this.openButton,
+                boundary: 'element',
+                scope: this.bindings.interfaceElement,
+            },
+        })(renderRefineModalBody(this.bindings.i18n)(html `${this.renderFilters()}`))}`;
+    }
+};
+AtomicIpxRefineModal.styles = [
+    css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */:host::part(container){border-radius:.25rem;max-height:calc(100vh - 4.25rem)}`,
+];
+__decorate([
+    state()
+], AtomicIpxRefineModal.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicIpxRefineModal.prototype, "error", void 0);
+__decorate([
+    property({ attribute: 'open-button', type: Object })
+], AtomicIpxRefineModal.prototype, "openButton", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        converter: booleanConverter,
+        reflect: true,
+        attribute: 'is-open',
+    })
+], AtomicIpxRefineModal.prototype, "isOpen", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'collapse-facets-after' })
+], AtomicIpxRefineModal.prototype, "collapseFacetsAfter", void 0);
+__decorate([
+    bindStateToController('breadcrumbManager'),
+    state()
+], AtomicIpxRefineModal.prototype, "breadcrumbManagerState", void 0);
+__decorate([
+    bindStateToController('querySummary'),
+    state()
+], AtomicIpxRefineModal.prototype, "querySummaryState", void 0);
+__decorate([
+    watch('isOpen')
+], AtomicIpxRefineModal.prototype, "watchEnabled", null);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicIpxRefineModal.prototype, "render", null);
+AtomicIpxRefineModal = __decorate([
+    customElement('atomic-ipx-refine-modal'),
+    bindings(),
+    withTailwindStyles
+], AtomicIpxRefineModal);
+export { AtomicIpxRefineModal };