@coveo/atomic 3.53.3 → 3.55.1

package/dist/atomic/components/components/insight/atomic-insight-numeric-facet/atomic-insight-numeric-facet.js

@@ -1,474 +0,0 @@
-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 AtomicInsightNumericFacet_1;
-import { Schema, StringValue } from '@coveo/bueno';
-import { buildFacetConditionsManager, buildNumericFacet, buildNumericFilter, buildNumericRange, buildSearchStatus, loadNumericFacetSetActions, } from '@coveo/headless/insight';
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
-import { parseDependsOn } from "../../common/facets/depends-on";
-import { shouldDisplayInputForFacetRange } from "../../common/facets/facet-common";
-import { renderFacetContainer } from "../../common/facets/facet-container/facet-container";
-import { renderFacetHeader } from "../../common/facets/facet-header/facet-header";
-import { renderFacetPlaceholder } from "../../common/facets/facet-placeholder/facet-placeholder";
-import { formatHumanReadable } from "../../common/facets/numeric-facet/formatter";
-import { renderNumericFacetValue } from "../../common/facets/numeric-facet/value-link";
-import { renderNumericFacetValuesGroup } from "../../common/facets/numeric-facet/values-container";
-import numericFacetCommonStyles from "../../common/facets/numeric-facet-common.tw.css";
-import { initializePopover } from "../../common/facets/popover/popover-type";
-import { defaultNumberFormatter, } from "../../common/formats/format-common";
-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 { FocusTargetController } from "../../../utils/accessibility-utils";
-import { mapProperty } from "../../../utils/props-utils";
-import { randomID } from "../../../utils/utils";
-import "../../common/atomic-facet-number-input/atomic-facet-number-input";
-import "../../common/atomic-numeric-range/atomic-numeric-range";
-/**
- * The `atomic-insight-numeric-facet` component displays a facet of the results for the current query as numeric ranges.
- * A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria.
- *
- * @part facet - The wrapper for the entire facet.
- * @part placeholder - The placeholder shown before the first search is executed.
- * @part label-button - The button that displays the label and allows to expand/collapse the facet.
- * @part label-button-icon - The label button icon.
- * @part clear-button - The button that resets the actively selected facet values.
- * @part clear-button-icon - The clear button icon.
- * @part values - The facet values container.
- * @part value-label - The facet value label, common for all displays.
- * @part value-count - The facet value count, common for all displays.
- * @part value-checkbox - The facet value checkbox, available when display is 'checkbox'.
- * @part value-checkbox-checked - The checked facet value checkbox, available when display is 'checkbox'.
- * @part value-checkbox-label - The facet value checkbox clickable label, available when display is 'checkbox'.
- * @part value-checkbox-icon - The facet value checkbox icon, available when display is 'checkbox'.
- * @part value-link - The facet value when display is 'link'.
- * @part value-link-selected - The selected facet value when display is 'link'.
- * @part input-form - The form that comprises the labels, inputs, and 'apply' button for the custom numeric range.
- * @part label-start - The label for the starting value of the custom numeric range.
- * @part label-end - The label for the ending value of the custom numeric range.
- * @part input-start - The input for the starting value of the custom numeric range.
- * @part input-end - The input for the ending value of the custom numeric range.
- * @part input-apply-button - The apply button for the custom range.
- */
-let AtomicInsightNumericFacet = AtomicInsightNumericFacet_1 = class AtomicInsightNumericFacet extends LitElement {
-    constructor() {
-        super();
-        /**
-         * The non-localized label for the facet.
-         * Used in the `atomic-breadbox` component through the bindings store.
-         */
-        this.label = 'no-label';
-        /**
-         * The number of values to request for this facet, when there are no manual ranges.
-         * If the number of values is 0, no ranges will be displayed.
-         */
-        this.numberOfValues = 8;
-        /**
-         * The sort criterion to apply to the returned facet values.
-         * Possible values are 'ascending' and 'descending'.
-         */
-        this.sortCriteria = 'ascending';
-        /**
-         * The algorithm that's used for generating the ranges of this facet when they aren't manually defined.
-         * The default value of `"equiprobable"` generates facet ranges which vary in size but have a more balanced number of results within each range.
-         * The value of `"even"` generates equally sized facet ranges across all of the results.
-         */
-        this.rangeAlgorithm = 'equiprobable';
-        /**
-         * Whether to display the facet values as checkboxes (multiple selection) or links (single selection).
-         * Possible values are 'checkbox' and 'link'.
-         */
-        this.displayValuesAs = 'checkbox';
-        /**
-         * Specifies whether the facet is collapsed.
-         */
-        this.isCollapsed = false;
-        /**
-         * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading over the facet, from 1 to 6.
-         */
-        this.headingLevel = 0;
-        /**
-         * Whether to exclude the parents of folded results when estimating the result count for each facet value.
-         *
-         * Note: Resulting count is only an estimation, in some cases this value could be incorrect.
-         */
-        this.filterFacetCount = true;
-        /**
-         * The maximum number of results to scan in the index to ensure that the facet lists all potential facet values.
-         * Note: A high injectionDepth may negatively impact the facet request performance.
-         * Minimum: `0`
-         * Default: `1000`
-         */
-        this.injectionDepth = 1000;
-        this.manualRanges = [];
-        this.formatter = defaultNumberFormatter;
-        new ValidatePropsController(this, () => ({
-            displayValuesAs: this.displayValuesAs,
-            withInput: this.withInput,
-        }), AtomicInsightNumericFacet_1.propsSchema);
-    }
-    initialize() {
-        this.computeFacetId();
-        this.initializeFacetForInput();
-        this.initializeFacetForRange();
-        this.initializeFilter();
-        this.initializeSearchStatus();
-        this.registerFacetToStore();
-        this.registerNumberInputApplyListener();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.registerNumberFormatListener();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (!this.isConnected) {
-            this.dependenciesManager?.stopWatching();
-            this.filterDependenciesManager?.stopWatching();
-            this.removeNumberFormatListener?.();
-            this.removeNumberInputApplyListener?.();
-            this.unsubscribeFacetForRange?.();
-            this.unsubscribeFacetForInput?.();
-            this.unsubscribeFilter?.();
-        }
-    }
-    get focusTarget() {
-        if (!this.headerFocus) {
-            this.headerFocus = new FocusTargetController(this, this.bindings);
-        }
-        return this.headerFocus;
-    }
-    get numberOfSelectedValues() {
-        if (this.filter?.state.range) {
-            return 1;
-        }
-        return (this.facetForRange?.state.values.filter(({ state }) => state === 'selected')
-            .length || 0);
-    }
-    get shouldRenderValues() {
-        return (!this.hasInputRange &&
-            this.numberOfValues > 0 &&
-            !!this.valuesToRender.length);
-    }
-    get hasInputRange() {
-        return !!this.filter?.state.range;
-    }
-    get valuesToRender() {
-        return (this.facetForRange?.state.values.filter((value) => value.numberOfResults || value.state !== 'idle') || []);
-    }
-    get shouldRenderInput() {
-        return shouldDisplayInputForFacetRange({
-            hasInputRange: this.hasInputRange,
-            searchStatusState: this.searchStatusState,
-            facetValues: this.facetForInput?.state.values || [],
-            hasInput: !!this.withInput,
-        });
-    }
-    get shouldRenderFacet() {
-        return this.shouldRenderInput || this.shouldRenderValues;
-    }
-    get enabled() {
-        return this.facetState?.enabled ?? this.filter?.state.enabled ?? true;
-    }
-    get isHidden() {
-        return !this.shouldRenderFacet || !this.enabled;
-    }
-    get hasValues() {
-        if (this.facetForInput?.state.values.length) {
-            return true;
-        }
-        return !!this.valuesToRender.length;
-    }
-    initializeSearchStatus() {
-        this.searchStatus = buildSearchStatus(this.bindings.engine);
-    }
-    initializeFacetForInput() {
-        if (!this.withInput) {
-            return;
-        }
-        this.facetForInput = buildNumericFacet(this.bindings.engine, {
-            options: {
-                facetId: `${this.facetId}_input_range`,
-                numberOfValues: 1,
-                generateAutomaticRanges: true,
-                field: this.field,
-                sortCriteria: this.sortCriteria,
-                rangeAlgorithm: this.rangeAlgorithm,
-                filterFacetCount: this.filterFacetCount,
-                injectionDepth: this.injectionDepth,
-            },
-        });
-        this.facetForInputState = this.facetForInput.state;
-        this.unsubscribeFacetForInput = this.facetForInput.subscribe(() => {
-            this.facetForInputState = this.facetForInput.state;
-        });
-        return this.facetForInput;
-    }
-    initializeFacetForRange() {
-        if (this.numberOfValues <= 0) {
-            return;
-        }
-        this.manualRanges = Array.from(this.querySelectorAll('atomic-numeric-range')).map((range) => {
-            const { start, end, endInclusive, label } = range;
-            return {
-                ...buildNumericRange({ start, end, endInclusive }),
-                label,
-            };
-        });
-        this.facetForRange = buildNumericFacet(this.bindings.engine, {
-            options: {
-                facetId: this.facetId,
-                field: this.field,
-                numberOfValues: this.numberOfValues,
-                sortCriteria: this.sortCriteria,
-                rangeAlgorithm: this.rangeAlgorithm,
-                currentValues: this.manualRanges,
-                generateAutomaticRanges: !this.manualRanges.length,
-                filterFacetCount: this.filterFacetCount,
-                injectionDepth: this.injectionDepth,
-            },
-        });
-        this.dependenciesManager = this.initializeDependenciesManager(this.facetForRange.state.facetId);
-        this.facetState = this.facetForRange.state;
-        this.unsubscribeFacetForRange = this.facetForRange.subscribe(() => {
-            this.facetState = this.facetForRange.state;
-        });
-        return this.facetForRange;
-    }
-    initializeFilter() {
-        if (!this.withInput) {
-            return;
-        }
-        this.filter = buildNumericFilter(this.bindings.engine, {
-            options: {
-                facetId: `${this.facetId}_input`,
-                field: this.field,
-            },
-        });
-        this.filterDependenciesManager = this.initializeDependenciesManager(this.filter.state.facetId);
-        this.filterState = this.filter.state;
-        this.unsubscribeFilter = this.filter.subscribe(() => {
-            this.filterState = this.filter.state;
-        });
-    }
-    initializeDependenciesManager(facetId) {
-        return buildFacetConditionsManager(this.bindings.engine, {
-            facetId,
-            conditions: parseDependsOn(this.dependsOn || {}),
-        });
-    }
-    registerFacetToStore() {
-        const facetInfo = {
-            label: () => this.bindings.i18n.t(this.label),
-            facetId: this.facetId,
-            element: this,
-            isHidden: () => this.isHidden,
-        };
-        this.bindings.store.registerFacet('numericFacets', {
-            ...facetInfo,
-            format: (value) => formatHumanReadable({
-                facetValue: value,
-                logger: this.bindings.engine.logger,
-                i18n: this.bindings.i18n,
-                field: this.field,
-                manualRanges: this.manualRanges,
-                formatter: this.formatter,
-            }),
-        });
-        initializePopover(this, {
-            ...facetInfo,
-            hasValues: () => this.hasValues,
-            numberOfActiveValues: () => this.numberOfSelectedValues,
-        });
-        if (this.filter) {
-            this.bindings.store.state.numericFacets[this.filter.state.facetId] =
-                this.bindings.store.state.numericFacets[this.facetId];
-        }
-    }
-    registerNumberFormatListener() {
-        const handleNumberFormat = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.formatter = event.detail;
-        };
-        this.addEventListener('atomic/numberFormat', handleNumberFormat);
-        this.removeNumberFormatListener = () => {
-            this.removeEventListener('atomic/numberFormat', handleNumberFormat);
-        };
-    }
-    registerNumberInputApplyListener() {
-        const handleNumberInputApply = () => {
-            if (this.facetId) {
-                this.bindings.engine.dispatch(loadNumericFacetSetActions(this.bindings.engine).deselectAllNumericFacetValues(this.facetId));
-            }
-        };
-        this.addEventListener('atomic/numberInputApply', handleNumberInputApply);
-        this.removeNumberInputApplyListener = () => {
-            this.removeEventListener('atomic/numberInputApply', handleNumberInputApply);
-        };
-    }
-    computeFacetId() {
-        if (this.facetId) {
-            return;
-        }
-        if (this.bindings.store.state.numericFacets[this.field]) {
-            this.facetId = randomID(`${this.field}_`);
-            return;
-        }
-        this.facetId = this.field;
-    }
-    handleClearFilters() {
-        this.focusTarget.focusAfterSearch();
-        if (this.filterState?.range) {
-            this.filter?.clear();
-            return;
-        }
-        this.facetForRange?.deselectAll();
-    }
-    handleToggleCollapse() {
-        this.isCollapsed = !this.isCollapsed;
-    }
-    handleValueClick(value) {
-        if (this.displayValuesAs === 'link') {
-            this.facetForRange.toggleSingleSelect(value);
-        }
-        else {
-            this.facetForRange.toggleSelect(value);
-        }
-    }
-    renderValues() {
-        const { displayValuesAs, field, manualRanges, label, bindings: { i18n, engine: { logger }, }, formatter, } = this;
-        return renderNumericFacetValuesGroup({
-            props: { i18n, label },
-        })(html `${this.valuesToRender.map((value) => renderNumericFacetValue({
-            props: {
-                formatter,
-                displayValuesAs,
-                facetValue: value,
-                field,
-                i18n,
-                logger,
-                manualRanges,
-                onClick: () => this.handleValueClick(value),
-            },
-        }))}`);
-    }
-    renderInput() {
-        return html `<atomic-facet-number-input
-      .type=${this.withInput}
-      .bindings=${this.bindings}
-      .label=${this.label}
-      .filter=${this.filter}
-      .filterState=${this.filter.state}
-    ></atomic-facet-number-input>`;
-    }
-    render() {
-        const { searchStatusState: { firstSearchExecuted, hasError }, } = this;
-        if (hasError || !this.enabled) {
-            return html ``;
-        }
-        if (!firstSearchExecuted) {
-            return html `${renderFacetPlaceholder({
-                props: {
-                    numberOfValues: this.numberOfValues,
-                    isCollapsed: this.isCollapsed,
-                },
-            })}`;
-        }
-        return html `${when(this.shouldRenderFacet, () => renderFacetContainer()(html `${renderFacetHeader({
-            props: {
-                i18n: this.bindings.i18n,
-                label: this.label,
-                onClearFilters: () => this.handleClearFilters(),
-                numberOfActiveValues: this.numberOfSelectedValues,
-                isCollapsed: this.isCollapsed,
-                headingLevel: this.headingLevel,
-                onToggleCollapse: () => this.handleToggleCollapse(),
-                headerRef: (el) => this.focusTarget.setTarget(el),
-            },
-        })}
-        ${when(!this.isCollapsed, () => html `${when(this.shouldRenderValues, () => this.renderValues())}
-            ${when(this.shouldRenderInput, () => this.renderInput())}`)}`))}`;
-    }
-};
-AtomicInsightNumericFacet.propsSchema = new Schema({
-    displayValuesAs: new StringValue({ constrainTo: ['checkbox', 'link'] }),
-    withInput: new StringValue({ constrainTo: ['integer', 'decimal'] }),
-});
-AtomicInsightNumericFacet.styles = numericFacetCommonStyles;
-__decorate([
-    property({ type: String, reflect: true, attribute: 'facet-id' })
-], AtomicInsightNumericFacet.prototype, "facetId", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], AtomicInsightNumericFacet.prototype, "label", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], AtomicInsightNumericFacet.prototype, "field", void 0);
-__decorate([
-    property({ type: Number, reflect: true, attribute: 'number-of-values' })
-], AtomicInsightNumericFacet.prototype, "numberOfValues", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'with-input' })
-], AtomicInsightNumericFacet.prototype, "withInput", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'sort-criteria' })
-], AtomicInsightNumericFacet.prototype, "sortCriteria", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'range-algorithm' })
-], AtomicInsightNumericFacet.prototype, "rangeAlgorithm", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'display-values-as' })
-], AtomicInsightNumericFacet.prototype, "displayValuesAs", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'is-collapsed' })
-], AtomicInsightNumericFacet.prototype, "isCollapsed", void 0);
-__decorate([
-    property({ type: Number, reflect: true, attribute: 'heading-level' })
-], AtomicInsightNumericFacet.prototype, "headingLevel", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'filter-facet-count' })
-], AtomicInsightNumericFacet.prototype, "filterFacetCount", void 0);
-__decorate([
-    property({ type: Number, reflect: true, attribute: 'injection-depth' })
-], AtomicInsightNumericFacet.prototype, "injectionDepth", void 0);
-__decorate([
-    mapProperty({ attributePrefix: 'depends-on' })
-], AtomicInsightNumericFacet.prototype, "dependsOn", void 0);
-__decorate([
-    state()
-], AtomicInsightNumericFacet.prototype, "bindings", void 0);
-__decorate([
-    state()
-], AtomicInsightNumericFacet.prototype, "facetState", void 0);
-__decorate([
-    state()
-], AtomicInsightNumericFacet.prototype, "filterState", void 0);
-__decorate([
-    bindStateToController('searchStatus'),
-    state()
-], AtomicInsightNumericFacet.prototype, "searchStatusState", void 0);
-__decorate([
-    state()
-], AtomicInsightNumericFacet.prototype, "error", void 0);
-__decorate([
-    state()
-], AtomicInsightNumericFacet.prototype, "facetForInputState", void 0);
-__decorate([
-    bindingGuard(),
-    errorGuard()
-], AtomicInsightNumericFacet.prototype, "render", null);
-AtomicInsightNumericFacet = AtomicInsightNumericFacet_1 = __decorate([
-    customElement('atomic-insight-numeric-facet'),
-    bindings(),
-    withTailwindStyles
-], AtomicInsightNumericFacet);
-export { AtomicInsightNumericFacet };

package/dist/atomic/components/components/insight/atomic-insight-pager/atomic-insight-pager.js

@@ -1,183 +0,0 @@
-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 { NumberValue, Schema } from '@coveo/bueno';
-import { buildPager as buildInsightPager, buildSearchStatus as buildInsightSearchStatus, } from '@coveo/headless/insight';
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { keyed } from 'lit/directives/keyed.js';
-import { when } from 'lit/directives/when.js';
-import { renderPageButtons, renderPagerNextButton, renderPagerPageButton, renderPagerPreviousButton, } from "../../common/pager/pager-buttons";
-import { renderPagerNavigation } from "../../common/pager/pager-navigation";
-import { getCurrentPagesRange } from "../../common/pager/pager-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 { AriaLiveRegionController, FocusTargetController, } from "../../../utils/accessibility-utils";
-import { buildCustomEvent } from "../../../utils/event-utils";
-import { randomID } from "../../../utils/utils";
-const ArrowLeftIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.5 4.8-4.3 4.5c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0s.3-.9 0-1.3l-3.7-4 3.7-3.9c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z\"/></svg>";
-const ArrowRightIcon = "<svg viewBox=\"0 0 20 20\"><path d=\"m8.5 15.2 4.3-4.6c.3-.4.3-.9 0-1.3l-4.4-4.5c-.3-.4-.9-.4-1.2 0s-.3.9 0 1.3l3.7 4-3.7 3.9c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z\"/></svg>";
-/**
- * The `atomic-insight-pager` provides buttons that allow the end user to navigate through the different result pages.
- *
- * @part buttons - The list of the next/previous buttons and page-buttons.
- * @part page-buttons - The list of page buttons.
- * @part page-button - The individual page buttons.
- * @part active-page-button - The active page button.
- * @part previous-button - The previous page button.
- * @part next-button - The next page button.
- * @part previous-button-icon - The icon displayed on the "previous page" button.
- * @part next-button-icon - The icon displayed on the "next page" button.
- *
- * @event atomic/scrollToTop - Emitted when the user clicks any of the buttons rendered by the component.
- */
-let AtomicInsightPager = class AtomicInsightPager extends LitElement {
-    constructor() {
-        super();
-        /**
-         * The maximum number of page buttons to display in the pager.
-         */
-        this.numberOfPages = 5;
-        this.ariaMessage = new AriaLiveRegionController(this, 'atomic-insight-pager');
-        this.radioGroupName = randomID('atomic-insight-pager-');
-        this.handleFocus = async (elements, currentFocus, newFocus) => {
-            const currentIndex = elements.indexOf(currentFocus);
-            const newIndex = elements.indexOf(newFocus);
-            if (currentIndex === elements.length - 1 && newIndex === 0) {
-                await this.nextButton.focus();
-            }
-            else if (currentIndex === 0 && newIndex === elements.length - 1) {
-                await this.previousButton.focus();
-            }
-            else {
-                newFocus.focus();
-            }
-        };
-        new ValidatePropsController(this, () => ({
-            numberOfPages: this.numberOfPages,
-        }), new Schema({
-            numberOfPages: new NumberValue({ min: 0 }),
-        }));
-    }
-    initialize() {
-        this.initFocusTargets();
-        this.searchStatus = buildInsightSearchStatus(this.bindings.engine);
-        this.pager = buildInsightPager(this.bindings.engine, {
-            options: { numberOfPages: this.numberOfPages },
-        });
-    }
-    render() {
-        const pagesRange = getCurrentPagesRange(this.pagerState.currentPage - 1, this.numberOfPages, this.pagerState.maxPage);
-        return html `${when(this.pagerState.maxPage > 1, () => html `
-        ${renderPagerNavigation({
-            props: {
-                i18n: this.bindings.i18n,
-            },
-        })(html `
-          ${renderPagerPreviousButton({
-            props: {
-                icon: ArrowLeftIcon,
-                disabled: !this.pagerState.hasPreviousPage,
-                i18n: this.bindings.i18n,
-                onClick: async () => {
-                    this.pager.previousPage();
-                    await this.focusOnFirstResultAndScrollToTop();
-                },
-                ref: (el) => this.previousButton.setTarget(el),
-            },
-        })}
-          ${renderPageButtons({
-            props: {
-                i18n: this.bindings.i18n,
-            },
-        })(html `
-            ${pagesRange.map((pageNumber, index) => keyed(`page-${pageNumber}-${index}`, renderPagerPageButton({
-            props: {
-                isSelected: pageNumber === this.pager.state.currentPage - 1,
-                ariaLabel: this.bindings.i18n.t('page-number', {
-                    pageNumber: pageNumber + 1,
-                }),
-                onChecked: async () => {
-                    this.pager.selectPage(pageNumber + 1);
-                    await this.focusOnFirstResultAndScrollToTop();
-                },
-                page: pageNumber,
-                groupName: this.radioGroupName,
-                text: (pageNumber + 1).toLocaleString(this.bindings.i18n.language),
-                onFocusCallback: this.handleFocus,
-            },
-        })))}
-          `)}
-          ${renderPagerNextButton({
-            props: {
-                icon: ArrowRightIcon,
-                disabled: !this.pagerState.hasNextPage,
-                i18n: this.bindings.i18n,
-                onClick: async () => {
-                    this.pager.nextPage();
-                    await this.focusOnFirstResultAndScrollToTop();
-                },
-                ref: (el) => this.nextButton.setTarget(el),
-            },
-        })}
-        `)}
-      `)}`;
-    }
-    initFocusTargets() {
-        if (!this.previousButton) {
-            this.previousButton = new FocusTargetController(this, this.bindings);
-        }
-        if (!this.nextButton) {
-            this.nextButton = new FocusTargetController(this, this.bindings);
-        }
-    }
-    async focusOnFirstResultAndScrollToTop() {
-        await this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch();
-        this.dispatchEvent(buildCustomEvent('atomic/scrollToTop'));
-        this.announcePageLoaded();
-    }
-    announcePageLoaded() {
-        this.ariaMessage.message = this.bindings.i18n.t('pager-page-loaded', {
-            pageNumber: this.pagerState.currentPage,
-        });
-    }
-};
-AtomicInsightPager.styles = css`/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */[part=page-button]{background-color:transparent}:host{align-items:center;background-color:var(--atomic-neutral-light);box-sizing:content-box;display:flex;height:100%;justify-content:center;padding-block:calc(var(--spacing, .25rem)*4);padding-inline:calc(var(--spacing, .25rem)*6)}`;
-__decorate([
-    state()
-], AtomicInsightPager.prototype, "bindings", void 0);
-__decorate([
-    state()
-], AtomicInsightPager.prototype, "error", void 0);
-__decorate([
-    bindStateToController('pager'),
-    state()
-], AtomicInsightPager.prototype, "pagerState", void 0);
-__decorate([
-    bindStateToController('searchStatus'),
-    state()
-], AtomicInsightPager.prototype, "searchStatusState", void 0);
-__decorate([
-    property({
-        reflect: true,
-        attribute: 'number-of-pages',
-        type: Number,
-    })
-], AtomicInsightPager.prototype, "numberOfPages", void 0);
-__decorate([
-    bindingGuard(),
-    errorGuard()
-], AtomicInsightPager.prototype, "render", null);
-AtomicInsightPager = __decorate([
-    customElement('atomic-insight-pager'),
-    bindings(),
-    withTailwindStyles
-], AtomicInsightPager);
-export { AtomicInsightPager };