@coveo/atomic 3.45.1 → 3.46.1

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

@@ -0,0 +1,363 @@
+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 AtomicInsightFacet_1;
+import { NumberValue, Schema, StringValue } from '@coveo/bueno';
+import { buildFacet as buildInsightFacet, buildFacetConditionsManager as buildInsightFacetConditionsManager, buildSearchStatus as buildInsightSearchStatus, } from '@coveo/headless/insight';
+import { html, LitElement, nothing } 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 { renderFacetContainer } from "../../common/facets/facet-container/facet-container";
+import { renderFacetHeader } from "../../common/facets/facet-header/facet-header";
+import { announceFacetSearchResultsWithAriaLive } from "../../common/facets/facet-search/facet-search-aria-live";
+import { renderFacetShowMoreLess } from "../../common/facets/facet-show-more-less/facet-show-more-less";
+import { renderFacetValue, } from "../../common/facets/facet-value/facet-value";
+import { renderFacetValuesGroup } from "../../common/facets/facet-values-group/facet-values-group";
+import { initializePopover } from "../../common/facets/popover/popover-type";
+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 "../../common/atomic-facet-placeholder/atomic-facet-placeholder";
+import facetCommonStyles from "../../common/facets/facet-common.tw.css";
+import facetValueBoxStyles from "../../common/facets/facet-value-box/facet-value-box.tw.css";
+import facetValueCheckboxStyles from "../../common/facets/facet-value-checkbox/facet-value-checkbox.tw.css";
+import facetValueExcludeStyles from "../../common/facets/facet-value-exclude/facet-value-exclude.tw.css";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
+/**
+ * The `atomic-insight-facet` component displays a facet of the results for the current query in an Insight interface.
+ * A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences).
+ *
+ * @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 value-box - The facet value when display is 'box'.
+ * @part value-box-selected - The selected facet value when display is 'box'.
+ * @part value-exclude-button - The button to exclude a facet value, available when display is 'checkbox'.
+ */
+let AtomicInsightFacet = AtomicInsightFacet_1 = class AtomicInsightFacet extends LitElement {
+    constructor() {
+        super();
+        /**
+         * The non-localized label for the facet.
+         */
+        this.label = 'no-label';
+        /**
+         * The number of values to request for this facet.
+         * Also determines the number of additional values to request each time more values are shown.
+         */
+        this.numberOfValues = 8;
+        /**
+         * The sort criterion to apply to the returned facet values.
+         * Possible values are 'score', 'alphanumeric', 'alphanumericDescending', 'occurrences', 'alphanumericNatural', 'alphanumericNaturalDescending' and 'automatic'.
+         */
+        this.sortCriteria = 'automatic';
+        /**
+         * Whether to display the facet values as checkboxes (multiple selection), links (single selection) or boxes (multiple selection).
+         * Possible values are 'checkbox', 'link', and 'box'.
+         */
+        this.displayValuesAs = 'checkbox';
+        /**
+         * Specifies if 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;
+        /**
+         * Whether to allow excluding values from the facet.
+         */
+        this.enableExclusion = false;
+        this.dependsOn = {};
+        new ValidatePropsController(this, () => ({
+            field: this.field,
+            numberOfValues: this.numberOfValues,
+            injectionDepth: this.injectionDepth,
+        }), AtomicInsightFacet_1.propsSchema, false);
+    }
+    initialize() {
+        const options = {
+            facetId: this.facetId,
+            field: this.field,
+            numberOfValues: this.numberOfValues,
+            sortCriteria: this.sortCriteria,
+            facetSearch: { numberOfValues: this.numberOfValues },
+            filterFacetCount: this.filterFacetCount,
+            injectionDepth: this.injectionDepth,
+        };
+        this.facet = buildInsightFacet(this.bindings.engine, { options });
+        this.facetId = this.facet.state.facetId;
+        this.searchStatus = buildInsightSearchStatus(this.bindings.engine);
+        this.initAriaLive();
+        this.initConditionManager();
+        this.initPopover();
+        this.registerFacet();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.facetConditionsManager?.stopWatching();
+    }
+    get focusTargets() {
+        if (!this.showLessFocus) {
+            this.showLessFocus = new FocusTargetController(this, this.bindings);
+        }
+        if (!this.showMoreFocus) {
+            this.showMoreFocus = new FocusTargetController(this, this.bindings);
+        }
+        if (!this.headerFocus) {
+            this.headerFocus = new FocusTargetController(this, this.bindings);
+        }
+        return {
+            showLess: this.showLessFocus,
+            showMore: this.showMoreFocus,
+            header: this.headerFocus,
+        };
+    }
+    shouldRenderFacet() {
+        return (this.facetState.enabled &&
+            !this.searchStatusState.hasError &&
+            (!this.searchStatusState.firstSearchExecuted ||
+                this.facetState.values.length > 0));
+    }
+    render() {
+        return html `${when(this.shouldRenderFacet(), () => this.searchStatusState.firstSearchExecuted
+            ? renderFacetContainer()(html `
+                ${this.renderFacetHeader()} ${this.renderBody()}
+              `)
+            : html `<atomic-facet-placeholder
+              value-count="${this.numberOfValues}"
+              ?is-collapsed="${this.isCollapsed}"
+            ></atomic-facet-placeholder>`)}`;
+    }
+    renderFacetHeader() {
+        return renderFacetHeader({
+            props: {
+                i18n: this.bindings.i18n,
+                label: this.label,
+                onClearFilters: () => {
+                    this.focusTargets.header.focusAfterSearch();
+                    this.facet.deselectAll();
+                },
+                numberOfActiveValues: this.activeValues.length,
+                isCollapsed: this.isCollapsed,
+                headingLevel: this.headingLevel,
+                onToggleCollapse: () => {
+                    this.isCollapsed = !this.isCollapsed;
+                },
+                headerRef: (el) => this.focusTargets.header.setTarget(el),
+            },
+        });
+    }
+    renderBody() {
+        if (this.isCollapsed) {
+            return nothing;
+        }
+        return html `${this.renderValues()} ${this.renderShowMoreLess()}`;
+    }
+    renderValuesContainer(children) {
+        return renderFacetValuesGroup({
+            props: {
+                i18n: this.bindings.i18n,
+                label: this.label,
+            },
+        })(html `<ul
+      class="mt-3 ${this.displayValuesAs === 'box' ? 'box-container' : ''}"
+      part="values"
+    >
+      ${children}
+    </ul>`);
+    }
+    renderValues() {
+        const values = this.facet.state.values.map((value, i) => {
+            const shouldFocusOnShowLessAfterInteraction = i === 0;
+            const shouldFocusOnShowMoreAfterInteraction = i ===
+                (this.sortCriteria === 'automatic'
+                    ? 0
+                    : this.facetState.values.length - 1);
+            return renderFacetValue({
+                props: {
+                    ...this.facetValueProps,
+                    facetCount: value.numberOfResults,
+                    onExclude: () => this.facet.toggleExclude(value),
+                    onSelect: () => this.displayValuesAs === 'link'
+                        ? this.facet.toggleSingleSelect(value)
+                        : this.facet.toggleSelect(value),
+                    facetValue: value.value,
+                    facetState: value.state,
+                    setRef: (btn) => {
+                        if (shouldFocusOnShowLessAfterInteraction) {
+                            this.showLessFocus?.setTarget(btn);
+                        }
+                        if (shouldFocusOnShowMoreAfterInteraction) {
+                            this.showMoreFocus?.setTarget(btn);
+                        }
+                    },
+                },
+            });
+        });
+        return this.renderValuesContainer(values);
+    }
+    renderShowMoreLess() {
+        return renderFacetShowMoreLess({
+            props: {
+                label: this.label,
+                i18n: this.bindings.i18n,
+                onShowMore: () => {
+                    this.focusTargets.showMore.focusAfterSearch();
+                    this.facet.showMoreValues();
+                },
+                onShowLess: () => {
+                    this.focusTargets.showLess.focusAfterSearch();
+                    this.facet.showLessValues();
+                },
+                canShowMoreValues: this.facet.state.canShowMoreValues,
+                canShowLessValues: this.facet.state.canShowLessValues,
+            },
+        });
+    }
+    get activeValues() {
+        return this.facet.state.values.filter(({ state }) => state !== 'idle');
+    }
+    get facetValueProps() {
+        return {
+            facetSearchQuery: this.facetState.facetSearch.query,
+            displayValuesAs: this.displayValuesAs,
+            enableExclusion: this.enableExclusion,
+            field: this.field,
+            i18n: this.bindings.i18n,
+        };
+    }
+    initAriaLive() {
+        this.facetSearchAriaLiveController = new AriaLiveRegionController(this, 'facet-search');
+        announceFacetSearchResultsWithAriaLive(this.facet, this.label, (msg) => {
+            this.facetSearchAriaLiveController.message = msg;
+        }, this.bindings.i18n);
+    }
+    initConditionManager() {
+        this.facetConditionsManager = buildInsightFacetConditionsManager(this.bindings.engine, {
+            facetId: this.facetId,
+            conditions: parseDependsOn(this.dependsOn),
+        });
+    }
+    initPopover() {
+        initializePopover(this, {
+            ...this.facetInfo,
+            hasValues: () => !!this.facet.state.values.length,
+            numberOfActiveValues: () => this.activeValues.length,
+        });
+    }
+    get isHidden() {
+        return !this.facet.state.enabled || !this.facet.state.values.length;
+    }
+    get facetInfo() {
+        return {
+            label: () => this.bindings.i18n.t(this.label),
+            facetId: this.facetId,
+            element: this,
+            isHidden: () => this.isHidden,
+        };
+    }
+    registerFacet() {
+        this.bindings.store.registerFacet('facets', this.facetInfo);
+    }
+};
+AtomicInsightFacet.propsSchema = new Schema({
+    field: new StringValue({ required: true, emptyAllowed: false }),
+    numberOfValues: new NumberValue({ min: 1 }),
+    injectionDepth: new NumberValue({ min: 0 }),
+});
+AtomicInsightFacet.styles = [
+    facetCommonStyles,
+    facetValueBoxStyles,
+    facetValueCheckboxStyles,
+    facetValueExcludeStyles,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicInsightFacet.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicInsightFacet.prototype, "field", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'number-of-values' })
+], AtomicInsightFacet.prototype, "numberOfValues", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'sort-criteria' })
+], AtomicInsightFacet.prototype, "sortCriteria", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'display-values-as' })
+], AtomicInsightFacet.prototype, "displayValuesAs", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'is-collapsed' })
+], AtomicInsightFacet.prototype, "isCollapsed", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'heading-level' })
+], AtomicInsightFacet.prototype, "headingLevel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'filter-facet-count' })
+], AtomicInsightFacet.prototype, "filterFacetCount", void 0);
+__decorate([
+    property({ type: Number, attribute: 'injection-depth' })
+], AtomicInsightFacet.prototype, "injectionDepth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'enable-exclusion' })
+], AtomicInsightFacet.prototype, "enableExclusion", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'facet-id' })
+], AtomicInsightFacet.prototype, "facetId", void 0);
+__decorate([
+    state()
+], AtomicInsightFacet.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightFacet.prototype, "error", void 0);
+__decorate([
+    bindStateToController('facet'),
+    state()
+], AtomicInsightFacet.prototype, "facetState", void 0);
+__decorate([
+    bindStateToController('searchStatus'),
+    state()
+], AtomicInsightFacet.prototype, "searchStatusState", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicInsightFacet.prototype, "render", null);
+AtomicInsightFacet = AtomicInsightFacet_1 = __decorate([
+    customElement('atomic-insight-facet'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightFacet);
+export { AtomicInsightFacet };