@coveo/atomic 3.45.1 → 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 };