@coveo/atomic 3.45.0 → 3.46.0

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

@@ -0,0 +1,475 @@
+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();
+        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) {
+        if (!this.dependsOn || Object.keys(this.dependsOn).length === 0) {
+            return;
+        }
+        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-refine-toggle/atomic-insight-refine-toggle.js

@@ -0,0 +1,108 @@
+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, buildSearchStatus, } from '@coveo/headless/insight';
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { renderIconButton } from "../../common/icon-button";
+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.js";
+const FilterIcon = "<svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.87501 6.12835C8.86388 6.13837 8.8532 6.14889 8.84301 6.15987C8.62114 6.399 8.5 6.71441 8.5 7.03922L8.5 12.2222C8.5 12.3929 8.37108 12.4999 8.25 12.4999L5.74999 12.4999C5.62891 12.4999 5.49999 12.3929 5.5 12.2222V7.03921C5.5 6.7144 5.37885 6.39899 5.15698 6.15986C5.14679 6.14888 5.13612 6.13836 5.12499 6.12834L0.56512 2.02315C0.524585 1.9736 0.499999 1.9077 0.5 1.83654L0.500008 0.777776C0.500009 0.607068 0.628921 0.5 0.750007 0.5L13.25 0.500025C13.3711 0.500025 13.5 0.607095 13.5 0.777806L13.5 1.83656C13.5 1.90773 13.4754 1.97362 13.4349 2.02317L8.87501 6.12835Z\" stroke=\"currentColor\" stroke-linejoin=\"round\"/>\n</svg>\n";
+import { refineToggleGuard } from '../../common/refine-modal/guard';
+/**
+ * The `atomic-insight-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.
+ *
+ * When this component is added to the `atomic-insight-interface`, an `atomic-insight-refine-modal` component is automatically created.
+ *
+ * @part insight-refine-toggle-container - The container for the refine toggle button.
+ * @part insight-refine-toggle-button - The refine toggle button.
+ * @part insight-refine-toggle-icon - The filter icon.
+ * @part insight-refine-toggle-badge - The badge showing the number of active filters.
+ * @part placeholder - The placeholder shown while the first request is being executed.
+ */
+let AtomicInsightRefineToggle = class AtomicInsightRefineToggle extends LitElement {
+    get numberOfBreadcrumbs() {
+        return [
+            ...this.breadcrumbManagerState.facetBreadcrumbs,
+            ...this.breadcrumbManagerState.categoryFacetBreadcrumbs,
+            ...this.breadcrumbManagerState.numericFacetBreadcrumbs,
+            ...this.breadcrumbManagerState.dateFacetBreadcrumbs,
+            ...this.breadcrumbManagerState.staticFilterBreadcrumbs,
+        ].length;
+    }
+    initialize() {
+        this.searchStatus = buildSearchStatus(this.bindings.engine);
+        this.breadcrumbManager = buildBreadcrumbManager(this.bindings.engine);
+    }
+    loadModal() {
+        if (this.modalRef) {
+            return;
+        }
+        this.modalRef = document.createElement('atomic-insight-refine-modal');
+        this.insertAdjacentElement('beforebegin', this.modalRef);
+        this.modalRef.openButton = this.buttonRef;
+    }
+    enableModal() {
+        if (this.modalRef) {
+            this.modalRef.isOpen = true;
+        }
+    }
+    render() {
+        return html `${refineToggleGuard({
+            firstRequestExecuted: this.searchStatusState.firstSearchExecuted,
+            hasError: this.searchStatusState.hasError,
+            hasItems: this.searchStatusState.hasResults || this.numberOfBreadcrumbs > 0,
+        }, () => html `${renderIconButton({
+            props: {
+                partPrefix: 'insight-refine-toggle',
+                style: 'outline-neutral',
+                icon: FilterIcon,
+                ariaLabel: this.bindings.i18n.t('filters'),
+                title: this.bindings.i18n.t('filters'),
+                disabled: !this.searchStatusState.hasResults &&
+                    this.numberOfBreadcrumbs === 0,
+                onClick: () => this.enableModal(),
+                buttonRef: (button) => {
+                    if (!button) {
+                        return;
+                    }
+                    this.buttonRef = button;
+                    this.loadModal();
+                },
+                badge: this.breadcrumbManagerState.hasBreadcrumbs
+                    ? html `${this.numberOfBreadcrumbs}`
+                    : undefined,
+            },
+        })}`)}`;
+    }
+};
+__decorate([
+    state()
+], AtomicInsightRefineToggle.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightRefineToggle.prototype, "error", void 0);
+__decorate([
+    bindStateToController('searchStatus'),
+    state()
+], AtomicInsightRefineToggle.prototype, "searchStatusState", void 0);
+__decorate([
+    bindStateToController('breadcrumbManager'),
+    state()
+], AtomicInsightRefineToggle.prototype, "breadcrumbManagerState", void 0);
+__decorate([
+    errorGuard(),
+    bindingGuard()
+], AtomicInsightRefineToggle.prototype, "render", null);
+AtomicInsightRefineToggle = __decorate([
+    customElement('atomic-insight-refine-toggle'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightRefineToggle);
+export { AtomicInsightRefineToggle };