@coveo/atomic 3.42.0 → 3.42.1

package/dist/atomic/components/components/search/atomic-category-facet/atomic-category-facet.js

@@ -0,0 +1,650 @@
+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 AtomicCategoryFacet_1;
+import { NumberValue, Schema, StringValue } from '@coveo/bueno';
+import { buildCategoryFacet, buildFacetConditionsManager, buildSearchStatus, buildTabManager, } from '@coveo/headless';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { when } from 'lit/directives/when.js';
+import { renderCategoryFacetAllCategoryButton } from "../../common/facets/category-facet/all-categories-button";
+import { renderCategoryFacetChildrenAsTreeContainer } from "../../common/facets/category-facet/children-as-tree-container";
+import { renderCategoryFacetParentAsTreeContainer } from "../../common/facets/category-facet/parent-as-tree-container";
+import { renderCategoryFacetParentButton } from "../../common/facets/category-facet/parent-button";
+import { renderCategoryFacetParentValueLink } from "../../common/facets/category-facet/parent-value-link";
+import { renderCategoryFacetSearchResultsContainer } from "../../common/facets/category-facet/search-results-container";
+import { renderCategoryFacetSearchValue } from "../../common/facets/category-facet/search-value";
+import { renderCategoryFacetTreeValueContainer } from "../../common/facets/category-facet/value-as-tree-container";
+import { renderCategoryFacetValueLink } from "../../common/facets/category-facet/value-link";
+import { parseDependsOn } from "../../common/facets/depends-on";
+import facetCommonStyles from "../../common/facets/facet-common.tw.css";
+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 facetSearchStyles from "../../common/facets/facet-search/facet-search.tw.css";
+import { announceFacetSearchResultsWithAriaLive } from "../../common/facets/facet-search/facet-search-aria-live";
+import { renderFacetSearchInput } from "../../common/facets/facet-search/facet-search-input";
+import { renderFacetSearchMatches } from "../../common/facets/facet-search/facet-search-matches";
+import { shouldDisplaySearchResults, shouldUpdateFacetSearchComponent, } from "../../common/facets/facet-search/facet-search-utils";
+import { renderFacetShowMoreLess } from "../../common/facets/facet-show-more-less/facet-show-more-less";
+import { renderFacetValuesGroup } from "../../common/facets/facet-values-group/facet-values-group";
+import { initializePopover } from "../../common/facets/popover/popover-type";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
+import { arrayConverter } from "../../../converters/array-converter";
+import { booleanConverter } from "../../../converters/boolean-converter";
+import { bindStateToController } from "../../../decorators/bind-state";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import { AriaLiveRegionController, FocusTargetController, } from "../../../utils/accessibility-utils";
+import { getFieldCaptions, getFieldValueCaption } from "../../../utils/field-utils";
+import { mapProperty } from "../../../utils/props-utils";
+/**
+ * The `atomic-category-facet` component displays a facet of values in a browsable, hierarchical fashion.
+ *
+ * @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 search-wrapper - The search box wrapper.
+ * @part search-input - The search box input.
+ * @part search-icon - The search box submit button.
+ * @part search-clear-button - The button to clear the search box of input.
+ * @part more-matches - The label indicating there are more matches for the current facet search query.
+ * @part no-matches - The label indicating there are no matches for the current facet search query.
+ * @part matches-query - The highlighted query inside the matches labels.
+ * @part search-results - The search results container.
+ * @part search-result - The search result value.
+ * @part search-result-path - The search result path.
+ * @part search-highlight - The highlighted query inside the facet values.
+ *
+ * @part parents - The container surrounding the whole hierarchy of values.
+ * @part sub-parents - The container surrounding a sub-hierarchy of values.
+ * @part values - The container surrounding either the children of the active value or the values at the base.
+ * @part all-categories-button - The "View all" button displayed first within the parents.
+ * @part parent-button - The clickable parent button displayed first within sub-parents.
+ * @part active-parent - The clickable active parent displayed first within the last sub-parents.
+ * @part value-link - The clickable value displayed first within values.
+ * @part back-arrow - The back arrow displayed before the clickable parents.
+ * @part value-label - The facet value label within a value button.
+ * @part value-count - The facet value count within a value button.
+ * @part leaf-value - A facet value with no child value.
+ * @part node-value - A facet value with child values.
+ *
+ * @part show-more - The show more results button.
+ * @part show-less - The show less results button.
+ * @part show-more-less-icon - The icons of the show more and show less buttons.
+ */
+let AtomicCategoryFacet = AtomicCategoryFacet_1 = class AtomicCategoryFacet extends LitElement {
+    constructor() {
+        super();
+        this.resultIndexToFocusOnShowMore = 0;
+        /**
+         * The non-localized label for the facet.
+         * Used in the `atomic-breadbox` component through the bindings store.
+         */
+        this.label = 'no-label';
+        /**
+         * The tabs on which the facet can be displayed. This property should not be used at the same time as `tabs-excluded`.
+         *
+         * Set this property as a stringified JSON array, for example:
+         * ```html
+         *  <atomic-category-facet tabs-included='["tabIDA", "tabIDB"]'></atomic-category-facet>
+         * ```
+         * If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet can only be displayed on the specified tabs.
+         */
+        this.tabsIncluded = [];
+        /**
+         * The tabs on which this facet must not be displayed. This property should not be used at the same time as `tabs-included`.
+         *
+         * Set this property as a stringified JSON array, for example:
+         * ```html
+         *  <atomic-category-facet tabs-excluded='["tabIDA", "tabIDB"]'></atomic-category-facet>
+         * ```
+         * If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet won't be displayed on any of the specified tabs.
+         */
+        this.tabsExcluded = [];
+        /**
+         * 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;
+        /**
+         * Whether this facet should contain a search box.
+         */
+        this.withSearch = false;
+        /**
+         * The sort criterion to apply to the returned facet values.
+         * Possible values are 'alphanumeric' and 'occurrences'.
+         */
+        this.sortCriteria = 'occurrences';
+        /**
+         * The character that separates values of a multi-value field.
+         */
+        this.delimitingCharacter = ';';
+        /**
+         * The base path shared by all values for the facet.
+         *
+         * Specify the property as an array using a JSON string representation:
+         * ```html
+         *  <atomic-category-facet base-path='["first value", "second value"]' ></atomic-category-facet>
+         * ```
+         */
+        this.basePath = [];
+        /**
+         * Whether to use basePath as a filter for the results.
+         *
+         * TODO: KIT-4412 - Deprecate this property and replace with one that defaults to false.
+         */
+        this.filterByBasePath = true;
+        /**
+         * Specifies whether the facet is collapsed.
+         */
+        this.isCollapsed = false;
+        /**
+         * The heading level 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.
+         *
+         * TODO: KIT-4412 - Deprecate this property and replace with one that defaults to false.
+         */
+        this.filterFacetCount = true;
+        /**
+         * The maximum number of results to scan in the index to ensure that the facet lists all potential facet values.
+         */
+        this.injectionDepth = 1000;
+        this.facetSearchAriaMessage = new AriaLiveRegionController(this, 'facet-search');
+        new ValidatePropsController(this, () => ({
+            field: this.field,
+            numberOfValues: this.numberOfValues,
+            sortCriteria: this.sortCriteria,
+            headingLevel: this.headingLevel,
+            injectionDepth: this.injectionDepth,
+            delimitingCharacter: this.delimitingCharacter,
+        }), AtomicCategoryFacet_1.propsSchema, false);
+    }
+    initialize() {
+        if (this.tabsIncluded.length > 0 && this.tabsExcluded.length > 0) {
+            console.warn('Values for both "tabs-included" and "tabs-excluded" have been provided. This could lead to unexpected behaviors.');
+        }
+        this.searchStatus = buildSearchStatus(this.bindings.engine);
+        this.tabManager = buildTabManager(this.bindings.engine);
+        const options = {
+            facetId: this.facetId,
+            field: this.field,
+            numberOfValues: this.numberOfValues,
+            sortCriteria: this.sortCriteria,
+            facetSearch: { numberOfValues: this.numberOfValues },
+            basePath: this.basePath,
+            delimitingCharacter: this.delimitingCharacter,
+            filterByBasePath: this.filterByBasePath,
+            injectionDepth: this.injectionDepth,
+            filterFacetCount: this.filterFacetCount,
+            tabs: {
+                included: this.tabsIncluded,
+                excluded: this.tabsExcluded,
+            },
+        };
+        this.facet = buildCategoryFacet(this.bindings.engine, { options });
+        this.facetId = this.facet.state.facetId;
+        announceFacetSearchResultsWithAriaLive(this.facet, this.label, (msg) => {
+            this.facetSearchAriaMessage.message = msg;
+        }, this.bindings.i18n);
+        const facetInfo = {
+            label: () => this.bindings.i18n.t(this.label),
+            facetId: this.facetId,
+            element: this,
+            isHidden: () => this.isHidden,
+        };
+        this.bindings.store.registerFacet('categoryFacets', facetInfo);
+        initializePopover(this, {
+            ...facetInfo,
+            hasValues: () => !!this.facet.state.valuesAsTrees.length,
+            numberOfActiveValues: () => (this.facetState.hasActiveValues ? 1 : 0),
+        });
+        this.initializeDependenciesManager();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.dependenciesManager?.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);
+        }
+        if (!this.activeValueFocus) {
+            this.activeValueFocus = new FocusTargetController(this, this.bindings);
+        }
+        return {
+            showLessFocus: this.showLessFocus,
+            showMoreFocus: this.showMoreFocus,
+            headerFocus: this.headerFocus,
+            activeValueFocus: this.activeValueFocus,
+        };
+    }
+    get isHidden() {
+        return (this.searchStatusState.hasError ||
+            !this.facet.state.enabled ||
+            (!this.facet.state.selectedValueAncestry.length &&
+                !this.facet.state.valuesAsTrees.length));
+    }
+    get hasParents() {
+        return !!this.facetState.selectedValueAncestry.length;
+    }
+    shouldUpdate(changedProperties) {
+        if (changedProperties.has('facetState')) {
+            const newState = this.facetState;
+            const oldState = changedProperties.get('facetState');
+            if (newState && oldState) {
+                return shouldUpdateFacetSearchComponent(newState.facetSearch, oldState.facetSearch);
+            }
+        }
+        return super.shouldUpdate(changedProperties);
+    }
+    initializeDependenciesManager() {
+        if (!this.dependsOn || Object.keys(this.dependsOn).length === 0) {
+            return;
+        }
+        this.dependenciesManager = buildFacetConditionsManager(this.bindings.engine, {
+            facetId: this.facetId,
+            conditions: parseDependsOn(this.dependsOn),
+        });
+    }
+    renderHeader() {
+        return renderFacetHeader({
+            props: {
+                i18n: this.bindings.i18n,
+                label: this.label,
+                numberOfActiveValues: this.facetState.hasActiveValues && this.isCollapsed ? 1 : 0,
+                isCollapsed: this.isCollapsed,
+                headingLevel: this.headingLevel,
+                onToggleCollapse: () => {
+                    this.isCollapsed = !this.isCollapsed;
+                },
+                onClearFilters: () => {
+                    this.focusTargets.headerFocus.focusAfterSearch();
+                    this.facet.deselectAll();
+                },
+                headerRef: (header) => {
+                    this.focusTargets.headerFocus.setTarget(header);
+                    if (!this.hasParents) {
+                        this.focusTargets.activeValueFocus.setTarget(header);
+                    }
+                },
+            },
+        });
+    }
+    renderSearchInput() {
+        if (!this.withSearch) {
+            return nothing;
+        }
+        return renderFacetSearchInput({
+            props: {
+                i18n: this.bindings.i18n,
+                label: this.label,
+                query: this.facetState.facetSearch.query,
+                onChange: (value) => {
+                    if (value === '') {
+                        this.facet.facetSearch.clear();
+                        return;
+                    }
+                    this.facet.facetSearch.updateCaptions(getFieldCaptions(this.field, this.bindings.i18n));
+                    this.facet.facetSearch.updateText(value);
+                    this.facet.facetSearch.search();
+                },
+                onClear: () => this.facet.facetSearch.clear(),
+            },
+        });
+    }
+    renderValuesTree(valuesAsTrees, isRoot) {
+        if (!this.hasParents) {
+            return this.renderChildren();
+        }
+        if (isRoot) {
+            return renderCategoryFacetTreeValueContainer()(html `
+        ${renderCategoryFacetAllCategoryButton({
+                props: {
+                    i18n: this.bindings.i18n,
+                    facetId: this.facet.state.facetId,
+                    field: this.field,
+                    onClick: () => {
+                        this.focusTargets.activeValueFocus.focusAfterSearch();
+                        this.facet.deselectAll();
+                    },
+                },
+            })}
+        ${renderCategoryFacetParentAsTreeContainer({
+                props: {
+                    isTopLevel: false,
+                },
+            })(this.renderValuesTree(valuesAsTrees, false))}
+      `);
+        }
+        if (valuesAsTrees.length > 1) {
+            const parentValue = valuesAsTrees[0];
+            return renderCategoryFacetTreeValueContainer()(html `
+        ${renderCategoryFacetParentButton({
+                props: {
+                    facetValue: parentValue,
+                    field: this.field,
+                    i18n: this.bindings.i18n,
+                    onClick: () => {
+                        this.focusTargets.activeValueFocus.focusAfterSearch();
+                        this.facet.toggleSelect(parentValue);
+                    },
+                },
+            })}
+        ${renderCategoryFacetParentAsTreeContainer({
+                props: {
+                    isTopLevel: false,
+                },
+            })(this.renderValuesTree(valuesAsTrees.slice(1), false))}
+      `);
+        }
+        const activeParent = valuesAsTrees[0];
+        const activeParentDisplayValue = getFieldValueCaption(this.field, activeParent.value, this.bindings.i18n);
+        return html `
+      ${renderCategoryFacetParentValueLink({
+            props: {
+                displayValue: activeParentDisplayValue,
+                numberOfResults: activeParent.numberOfResults,
+                i18n: this.bindings.i18n,
+                isLeafValue: activeParent.isLeafValue,
+                onClick: () => {
+                    this.focusTargets.activeValueFocus.focusAfterSearch();
+                    this.facet.deselectAll();
+                },
+                searchQuery: this.facetState.facetSearch.query,
+                setRef: (el) => {
+                    this.focusTargets.activeValueFocus.setTarget(el);
+                },
+            },
+        })(html `
+        ${renderCategoryFacetChildrenAsTreeContainer({ props: {} })(this.renderChildren())}
+      `)}
+    `;
+    }
+    renderChild(facetValue, isShowLessFocusTarget, isShowMoreFocusTarget) {
+        const displayValue = getFieldValueCaption(this.field, facetValue.value, this.bindings.i18n);
+        const isSelected = facetValue.state === 'selected';
+        return html `${renderCategoryFacetValueLink({
+            props: {
+                displayValue,
+                numberOfResults: facetValue.numberOfResults,
+                i18n: this.bindings.i18n,
+                onClick: () => {
+                    this.focusTargets.activeValueFocus.focusAfterSearch();
+                    this.facet.toggleSelect(facetValue);
+                },
+                isParent: false,
+                isSelected,
+                searchQuery: this.facetState.facetSearch.query,
+                isLeafValue: facetValue.isLeafValue,
+                setRef: (el) => {
+                    isShowLessFocusTarget &&
+                        this.focusTargets.showLessFocus.setTarget(el);
+                    isShowMoreFocusTarget &&
+                        this.focusTargets.showMoreFocus.setTarget(el);
+                },
+            },
+        })()}`;
+    }
+    renderChildren() {
+        if (!this.facetState.valuesAsTrees.length) {
+            return html ``;
+        }
+        if (this.facetState.selectedValueAncestry.length > 0) {
+            const selectedValue = this.facetState.selectedValueAncestry.find((value) => value.state === 'selected');
+            if (selectedValue) {
+                return html `${map(selectedValue.children, (value, i) => this.renderChild(value, i === 0, i === this.resultIndexToFocusOnShowMore))}`;
+            }
+        }
+        return html `${map(this.facetState.valuesAsTrees, (value, i) => this.renderChild(value, i === 0, i === this.resultIndexToFocusOnShowMore))}`;
+    }
+    renderSearchResults() {
+        return renderCategoryFacetSearchResultsContainer()(html `${map(this.facetState.facetSearch.values, (value) => renderCategoryFacetSearchValue({
+            props: {
+                value,
+                field: this.field,
+                facetId: this.facetId,
+                searchQuery: this.facetState.facetSearch.query,
+                i18n: this.bindings.i18n,
+                onClick: () => {
+                    this.focusTargets.activeValueFocus.focusAfterSearch();
+                    this.facet.facetSearch.select(value);
+                },
+            },
+        }))}`);
+    }
+    renderMatches() {
+        return renderFacetSearchMatches({
+            props: {
+                i18n: this.bindings.i18n,
+                query: this.facetState.facetSearch.query,
+                numberOfMatches: this.facetState.facetSearch.values.length,
+                hasMoreMatches: this.facetState.facetSearch.moreValuesAvailable,
+                showMoreMatches: () => this.facet.facetSearch.showMoreResults(),
+            },
+        });
+    }
+    renderShowMoreLess() {
+        return html `
+      <div class=${this.hasParents ? 'pl-9' : ''}>
+        ${renderFacetShowMoreLess({
+            props: {
+                label: this.label,
+                i18n: this.bindings.i18n,
+                onShowMore: () => {
+                    const selectedValue = this.facetState.selectedValueAncestry.find((value) => value.state === 'selected');
+                    this.resultIndexToFocusOnShowMore =
+                        selectedValue?.children.length ??
+                            this.facetState.valuesAsTrees.length;
+                    this.focusTargets.showMoreFocus.focusAfterSearch();
+                    this.facet.showMoreValues();
+                },
+                onShowLess: () => {
+                    this.focusTargets.showLessFocus.focusAfterSearch();
+                    this.facet.showLessValues();
+                },
+                canShowLessValues: this.facetState.canShowLessValues,
+                canShowMoreValues: this.facetState.canShowMoreValues,
+            },
+        })}
+      </div>
+    `;
+    }
+    render() {
+        if (!this.facetState || !this.searchStatusState) {
+            return html `${nothing}`;
+        }
+        const { bindings: { i18n }, label, facetState: { facetSearch, enabled, valuesAsTrees, selectedValueAncestry }, searchStatusState: { hasError, firstSearchExecuted }, } = this;
+        if (hasError ||
+            !enabled ||
+            (firstSearchExecuted && !valuesAsTrees.length)) {
+            return html `${nothing}`;
+        }
+        if (!firstSearchExecuted) {
+            return html `${renderFacetPlaceholder({
+                props: {
+                    numberOfValues: this.numberOfValues,
+                    isCollapsed: this.isCollapsed,
+                },
+            })}`;
+        }
+        return renderFacetContainer()(html `
+      ${this.renderHeader()}
+      ${when(!this.isCollapsed, () => html `
+          ${this.renderSearchInput()}
+          ${when(shouldDisplaySearchResults(facetSearch), () => html `
+              ${when(facetSearch.values.length > 0, () => renderFacetValuesGroup({
+            props: {
+                i18n,
+                label,
+                query: facetSearch.query,
+            },
+        })(this.renderSearchResults()), () => html `<div class="mt-3"></div>`)}
+              ${this.renderMatches()}
+            `, () => html `
+              ${renderFacetValuesGroup({
+            props: {
+                i18n,
+                label,
+            },
+        })(when(this.hasParents, () => html `
+                    ${renderCategoryFacetParentAsTreeContainer({
+            props: { isTopLevel: true, className: 'mt-3' },
+        })(this.renderValuesTree(selectedValueAncestry, true))}
+                  `, () => html `
+                    ${renderCategoryFacetChildrenAsTreeContainer({
+            props: {
+                className: 'mt-3',
+            },
+        })(this.renderChildren())}
+                  `))}
+              ${this.renderShowMoreLess()}
+            `)}
+        `)}
+    `);
+    }
+};
+AtomicCategoryFacet.propsSchema = new Schema({
+    field: new StringValue({ required: true, emptyAllowed: false }),
+    numberOfValues: new NumberValue({ min: 1 }),
+    sortCriteria: new StringValue({
+        constrainTo: ['alphanumeric', 'occurrences'],
+    }),
+    headingLevel: new NumberValue({ min: 0, max: 6 }),
+    injectionDepth: new NumberValue({ min: 0 }),
+    delimitingCharacter: new StringValue(),
+});
+AtomicCategoryFacet.styles = [
+    facetCommonStyles,
+    facetSearchStyles,
+    css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */[part~=active-parent],[part~=parents] [part~=values]{padding-left:calc(var(--spacing, .25rem)*9)}[part~=all-categories-button],[part~=parent-button]{align-items:center;display:flex;padding-block:calc(var(--spacing, .25rem)*2.5);padding-left:calc(var(--spacing, .25rem)*7);padding-right:calc(var(--spacing, .25rem)*2);position:relative;text-align:left;width:100%}[part~=back-arrow]{height:calc(var(--spacing, .25rem)*5);left:calc(var(--spacing, .25rem)*1);position:absolute;width:calc(var(--spacing, .25rem)*5)}`,
+];
+__decorate([
+    state()
+], AtomicCategoryFacet.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicCategoryFacet.prototype, "error", void 0);
+__decorate([
+    bindStateToController('facet'),
+    state()
+], AtomicCategoryFacet.prototype, "facetState", void 0);
+__decorate([
+    bindStateToController('searchStatus'),
+    state()
+], AtomicCategoryFacet.prototype, "searchStatusState", void 0);
+__decorate([
+    bindStateToController('tabManager'),
+    state()
+], AtomicCategoryFacet.prototype, "tabManagerState", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'facet-id' })
+], AtomicCategoryFacet.prototype, "facetId", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicCategoryFacet.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicCategoryFacet.prototype, "field", void 0);
+__decorate([
+    property({
+        type: Array,
+        reflect: true,
+        attribute: 'tabs-included',
+        converter: arrayConverter,
+    })
+], AtomicCategoryFacet.prototype, "tabsIncluded", void 0);
+__decorate([
+    property({
+        type: Array,
+        reflect: true,
+        attribute: 'tabs-excluded',
+        converter: arrayConverter,
+    })
+], AtomicCategoryFacet.prototype, "tabsExcluded", void 0);
+__decorate([
+    property({ reflect: true, type: Number, attribute: 'number-of-values' })
+], AtomicCategoryFacet.prototype, "numberOfValues", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'with-search',
+        converter: booleanConverter,
+    })
+], AtomicCategoryFacet.prototype, "withSearch", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'sort-criteria' })
+], AtomicCategoryFacet.prototype, "sortCriteria", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'delimiting-character' })
+], AtomicCategoryFacet.prototype, "delimitingCharacter", void 0);
+__decorate([
+    property({
+        type: Array,
+        reflect: true,
+        attribute: 'base-path',
+        converter: arrayConverter,
+    })
+], AtomicCategoryFacet.prototype, "basePath", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'filter-by-base-path',
+        converter: booleanConverter,
+    })
+], AtomicCategoryFacet.prototype, "filterByBasePath", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'is-collapsed',
+        converter: booleanConverter,
+    })
+], AtomicCategoryFacet.prototype, "isCollapsed", void 0);
+__decorate([
+    property({ reflect: true, type: Number, attribute: 'heading-level' })
+], AtomicCategoryFacet.prototype, "headingLevel", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'filter-facet-count',
+        converter: booleanConverter,
+    })
+], AtomicCategoryFacet.prototype, "filterFacetCount", void 0);
+__decorate([
+    property({ reflect: true, type: Number, attribute: 'injection-depth' })
+], AtomicCategoryFacet.prototype, "injectionDepth", void 0);
+__decorate([
+    mapProperty({ attributePrefix: 'depends-on' })
+], AtomicCategoryFacet.prototype, "dependsOn", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicCategoryFacet.prototype, "render", null);
+AtomicCategoryFacet = AtomicCategoryFacet_1 = __decorate([
+    customElement('atomic-category-facet'),
+    bindings(),
+    withTailwindStyles
+], AtomicCategoryFacet);
+export { AtomicCategoryFacet };