@coveo/atomic 3.33.8-pre.fbe332fd49 → 3.33.9-pre.158cee9fec

package/dist/atomic/components/components/search/atomic-search-interface/atomic-search-interface.js

@@ -0,0 +1,496 @@
+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 { buildSearchEngine, buildSearchStatus, buildUrlManager, EcommerceDefaultFieldsToInclude, VERSION as HEADLESS_VERSION, loadFieldActions, loadQueryActions, loadSearchConfigurationActions, } from '@coveo/headless';
+import { provide } from '@lit/context';
+import i18next from 'i18next';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { InterfaceController, } from "../../common/interface/interface-controller";
+import { MobileBreakpointController } from "../../common/layout/mobile-breakpoint-controller";
+import { bindingsContext } from "../../context/bindings-context";
+import { errorSelector, firstSearchExecutedSelector, noResultsSelector, } from "../atomic-search-layout/search-layout";
+import { booleanConverter } from "../../../converters/boolean-converter";
+import { errorGuard } from "../../../decorators/error-guard";
+import { watch } from "../../../decorators/watch";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
+import { markParentAsReady } from "../../../utils/init-queue";
+import { SafeStorage, StorageItems, } from "../../../utils/local-storage-utils";
+import { getAnalyticsConfig } from './analytics-config';
+import { createSearchStore } from './store';
+// TODO - Remove once all components that use atomic-modal have been migrated.
+import "../../common/atomic-modal/atomic-modal";
+const FirstSearchExecutedFlag = 'firstSearchExecuted';
+/**
+ * The `atomic-search-interface` component is the parent to all other atomic components in a search page. It handles the headless search engine and localization configurations.
+ *
+ * @slot default - The default slot where you can add child components to the interface.
+ */
+let AtomicSearchInterface = class AtomicSearchInterface extends ChildrenUpdateCompleteMixin(LitElement) {
+    constructor() {
+        super();
+        this.bindings = {};
+        this.relevanceInspectorIsOpen = false;
+        this.unsubscribeUrlManager = () => { };
+        this.unsubscribeSearchStatus = () => { };
+        this.initialized = false;
+        this.interfaceController = new InterfaceController(this, 'CoveoAtomic', HEADLESS_VERSION);
+        /**
+         * A list of non-default fields to include in the query results.
+         *
+         * Specify the property as an array using a JSON string representation:
+         * ```html
+         * <atomic-search-interface fields-to-include='["fieldA", "fieldB"]'></atomic-search-interface>
+         * ```
+         */
+        this.fieldsToInclude = [];
+        // TODO - KIT-4994: Add disableAnalytics property that defaults to false.
+        // TODO - KIT-4994: Deprecate in favor of disableAnalytics property.
+        // TODO - (v4) KIT-4990: Remove.
+        /**
+         * Whether analytics should be enabled.
+         */
+        this.analytics = true;
+        /**
+         * The search interface language.
+         */
+        this.language = 'en';
+        // TODO - (v4) KIT-4823: Remove.
+        /**
+         * Whether the state should be reflected in the URL parameters.
+         * @deprecated - replaced by `disable-state-reflection-in-url` (this defaults to `true`, while the replacement defaults to `false`).
+         */
+        this.reflectStateInUrl = true;
+        /**
+         * Whether to disable state reflection in the URL parameters.
+         */
+        this.disableStateReflectionInUrl = false;
+        /**
+         * The CSS selector for the container where the interface will scroll back to.
+         */
+        this.scrollContainer = 'atomic-search-interface';
+        /**
+         * The language assets path. By default, this will be a relative URL pointing to `./lang`.
+         *
+         * Example: "/mypublicpath/languages"
+         *
+         */
+        this.languageAssetsPath = './lang';
+        /**
+         * The icon assets path. By default, this will be a relative URL pointing to `./assets`.
+         *
+         * Example: "/mypublicpath/icons"
+         *
+         */
+        this.iconAssetsPath = './assets';
+        // TODO - (v4) KIT-5004: Remove.
+        /**
+         * Whether the relevance inspector shortcut should be enabled for this interface.
+         *
+         * The relevance inspector can be opened by holding the Alt key (Option on Mac) while over the interface, and performing a double click.
+         *
+         * The relevance inspector allows to troubleshoot and debug queries.
+         * @deprecated - replaced by `disable-relevance-inspector` (this defaults to `true`, while the replacement defaults to `false`).
+         */
+        this.enableRelevanceInspector = true;
+        /**
+         * Whether to disable the relevance inspector shortcut for this interface.
+         */
+        this.disableRelevanceInspector = false;
+        this.handleInitialization = (event) => {
+            this.interfaceController.onComponentInitializing(event);
+        };
+        this.handleRelevanceInspectorDoubleClick = (e) => {
+            if (e.altKey) {
+                this.relevanceInspectorIsOpen = !this.relevanceInspectorIsOpen;
+            }
+        };
+        this.onHashChange = () => {
+            this.urlManager.synchronize(this.fragment);
+        };
+        this.store = createSearchStore();
+        new MobileBreakpointController(this, this.store);
+        const { promise, resolve } = Promise.withResolvers();
+        this.i18Initialized = promise;
+        this.i18n = i18next.createInstance(undefined, resolve);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.store.setLoadingFlag(FirstSearchExecutedFlag);
+        this.initRelevanceInspector();
+        this.addEventListener('atomic/initializeComponent', this.handleInitialization);
+        this.addEventListener('atomic/scrollToTop', this.scrollToTop);
+        this.addEventListener('atomic/relevanceInspector/close', this.closeRelevanceInspector);
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('fieldsToInclude')) {
+            this.initFieldsToInclude();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (typeof this.unsubscribeUrlManager === 'function') {
+            this.unsubscribeUrlManager();
+        }
+        if (typeof this.unsubscribeSearchStatus === 'function') {
+            this.unsubscribeSearchStatus();
+        }
+        window.removeEventListener('hashchange', this.onHashChange);
+        this.removeEventListener('atomic/initializeComponent', this.handleInitialization);
+        this.removeEventListener('atomic/scrollToTop', this.scrollToTop);
+        this.removeEventListener('atomic/relevanceInspector/close', this.closeRelevanceInspector);
+        this.removeEventListener('dblclick', this.handleRelevanceInspectorDoubleClick);
+    }
+    // TODO - (v4) KIT-4991: Make private.
+    scrollToTop() {
+        const scrollContainerElement = document.querySelector(this.scrollContainer);
+        if (!scrollContainerElement) {
+            this.bindings.engine.logger.warn(`Could not find the scroll container with the selector "${this.scrollContainer}". This will prevent UX interactions that require a scroll from working correctly. Please review the CSS selector in the scrollContainer option`);
+            return;
+        }
+        scrollContainerElement.scrollIntoView({ behavior: 'smooth' });
+    }
+    closeRelevanceInspector() {
+        this.relevanceInspectorIsOpen = false;
+    }
+    /**
+     * Initializes the connection with the headless search engine using options for `accessToken` (required), `organizationId` (required), `environment` (defaults to `prod`), and `renewAccessToken`.
+     */
+    initialize(options) {
+        return this.internalInitialization(() => this.initEngine(options));
+    }
+    /**
+     * Initializes the interface using the provided [headless search engine](https://docs.coveo.com/en/headless/latest/reference/modules/Search.html, as opposed to the `initialize` method which internally builds a search engine instance.
+     * This bypasses the properties set on the component, such as analytics, searchHub, pipeline, language, timezone & logLevel.
+     */
+    initializeWithSearchEngine(engine) {
+        if (this.pipeline && this.pipeline !== engine.state.pipeline) {
+            console.warn('Mismatch between search interface pipeline and engine pipeline. The engine pipeline will be used.');
+        }
+        if (this.searchHub && this.searchHub !== engine.state.searchHub) {
+            console.warn('Mismatch between search interface search hub and engine search hub. The engine search hub will be used.');
+        }
+        return this.internalInitialization(() => {
+            this.engine = engine;
+        });
+    }
+    /**
+     *
+     * Executes the first search and logs the interface load event to analytics, after initializing connection to the headless search engine.
+     */
+    async executeFirstSearch() {
+        if (!this.interfaceController.engineIsCreated(this.engine)) {
+            return;
+        }
+        if (!this.initialized) {
+            console.error('You have to wait until the "initialize" promise is fulfilled before executing a search.', this);
+            return;
+        }
+        const safeStorage = new SafeStorage();
+        const standaloneSearchBoxData = safeStorage.getParsedJSON(StorageItems.STANDALONE_SEARCH_BOX_DATA, null);
+        if (!standaloneSearchBoxData) {
+            this.engine.executeFirstSearch();
+            return;
+        }
+        safeStorage.removeItem(StorageItems.STANDALONE_SEARCH_BOX_DATA);
+        const { updateQuery } = loadQueryActions(this.engine);
+        const { value, enableQuerySyntax, analytics } = standaloneSearchBoxData;
+        this.engine.dispatch(updateQuery({ q: value, enableQuerySyntax }));
+        this.engine.executeFirstSearchAfterStandaloneSearchBoxRedirect(analytics);
+    }
+    updateSearchConfiguration(updatedProp, newValue) {
+        if (!this.interfaceController.engineIsCreated(this.engine)) {
+            return;
+        }
+        if (this.engine.state[updatedProp] === newValue) {
+            return;
+        }
+        const { updateSearchConfiguration } = loadSearchConfigurationActions(this.engine);
+        this.engine.dispatch(updateSearchConfiguration({
+            [updatedProp]: newValue,
+        }));
+    }
+    updateSearchHub() {
+        this.updateSearchConfiguration('searchHub', this.searchHub ?? 'default');
+    }
+    updatePipeline() {
+        this.updateSearchConfiguration('pipeline', this.pipeline);
+    }
+    toggleAnalytics() {
+        this.interfaceController.onAnalyticsChange();
+    }
+    updateLanguage() {
+        if (!this.interfaceController.engineIsCreated(this.engine) ||
+            !this.language) {
+            return;
+        }
+        const { updateSearchConfiguration } = loadSearchConfigurationActions(this.engine);
+        this.engine.dispatch(updateSearchConfiguration({
+            locale: this.language,
+        }));
+        return this.interfaceController.onLanguageChange();
+    }
+    updateIconAssetsPath() {
+        this.store.state.iconAssetsPath = this.iconAssetsPath;
+    }
+    getBindings() {
+        return {
+            engine: this.engine,
+            i18n: this.i18n,
+            store: this.store,
+            interfaceElement: this,
+            createStyleElement: () => {
+                const styleTag = document.createElement('style');
+                return styleTag;
+            },
+            // TODO - KIT-4893: Remove once atomic-quickview-modal migration is complete.
+            createScriptElement: () => {
+                const scriptTag = document.createElement('script');
+                return scriptTag;
+            },
+        };
+    }
+    initFieldsToInclude() {
+        const fields = EcommerceDefaultFieldsToInclude.concat(this.fieldsToInclude);
+        this.store.addFieldsToInclude(fields);
+    }
+    registerFieldsToInclude() {
+        this.engine?.dispatch(loadFieldActions(this.engine).registerFieldsToInclude(this.store.state.fieldsToInclude));
+    }
+    initEngine(options) {
+        const searchConfig = this.getSearchConfiguration(options);
+        const analyticsConfig = getAnalyticsConfig(options, this.analytics, this.store);
+        try {
+            this.engine = buildSearchEngine({
+                configuration: {
+                    ...options,
+                    search: searchConfig,
+                    analytics: analyticsConfig,
+                },
+                loggerOptions: {
+                    level: this.logLevel,
+                },
+            });
+        }
+        catch (error) {
+            this.error = error;
+            throw error;
+        }
+    }
+    getSearchConfiguration(options) {
+        const searchConfigFromProps = {
+            searchHub: this.searchHub ?? 'default',
+            pipeline: this.pipeline,
+            locale: this.language,
+            timezone: this.timezone,
+        };
+        if (options.search) {
+            return {
+                ...searchConfigFromProps,
+                ...options.search,
+            };
+        }
+        return searchConfigFromProps;
+    }
+    get fragment() {
+        return window.location.hash.slice(1);
+    }
+    initUrlManager() {
+        if (this.disableStateReflectionInUrl) {
+            return;
+        }
+        if (!this.reflectStateInUrl) {
+            return;
+        }
+        this.urlManager = buildUrlManager(this.engine, {
+            initialState: { fragment: this.fragment },
+        });
+        this.unsubscribeUrlManager = this.urlManager.subscribe(() => this.updateHash());
+        window.addEventListener('hashchange', this.onHashChange);
+    }
+    initRelevanceInspector() {
+        if (this.enableRelevanceInspector && !this.disableRelevanceInspector) {
+            this.addEventListener('dblclick', this.handleRelevanceInspectorDoubleClick);
+        }
+    }
+    initSearchStatus() {
+        this.searchStatus = buildSearchStatus(this.engine);
+        this.unsubscribeSearchStatus = this.searchStatus.subscribe(() => {
+            const hasNoResultsAfterInitialSearch = !this.searchStatus.state.hasResults &&
+                this.searchStatus.state.firstSearchExecuted &&
+                !this.searchStatus.state.hasError;
+            this.classList.toggle(noResultsSelector, hasNoResultsAfterInitialSearch);
+            this.classList.toggle(errorSelector, this.searchStatus.state.hasError);
+            this.classList.toggle(firstSearchExecutedSelector, this.searchStatus.state.firstSearchExecuted);
+            if (this.searchStatus.state.firstSearchExecuted &&
+                this.store.hasLoadingFlag(FirstSearchExecutedFlag)) {
+                this.store.unsetLoadingFlag(FirstSearchExecutedFlag);
+            }
+        });
+    }
+    updateHash() {
+        const newFragment = this.urlManager.state.fragment;
+        if (!this.searchStatus.state.firstSearchExecuted) {
+            history.replaceState(null, document.title, `#${newFragment}`);
+            this.bindings.engine.logger.info(`History replaceState #${newFragment}`);
+            return;
+        }
+        history.pushState(null, document.title, `#${newFragment}`);
+        this.bindings.engine.logger.info(`History pushState #${newFragment}`);
+    }
+    async internalInitialization(initEngine) {
+        await Promise.all([
+            this.interfaceController.onInitialization(initEngine),
+            this.i18Initialized,
+        ]);
+        this.updateLanguage();
+        this.bindings = this.getBindings();
+        markParentAsReady(this);
+        this.pipeline = this.engine.state.pipeline;
+        this.searchHub = this.engine.state.searchHub;
+        this.initSearchStatus();
+        await this.getUpdateComplete();
+        this.initUrlManager();
+        this.initialized = true;
+    }
+    render() {
+        return html `
+      ${when(this.bindings?.engine &&
+            this.enableRelevanceInspector &&
+            !this.disableRelevanceInspector, () => html `<atomic-relevance-inspector
+          ?open=${this.relevanceInspectorIsOpen}
+          .bindings=${this.bindings}
+        ></atomic-relevance-inspector>`)}
+      <slot></slot>
+    `;
+    }
+};
+AtomicSearchInterface.styles = [
+    css`:host{height:inherit;width:inherit;&>slot{height:inherit}}`,
+];
+__decorate([
+    state(),
+    provide({ context: bindingsContext })
+], AtomicSearchInterface.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicSearchInterface.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicSearchInterface.prototype, "relevanceInspectorIsOpen", void 0);
+__decorate([
+    property({
+        type: Array,
+        attribute: 'fields-to-include',
+        converter: {
+            fromAttribute: (value) => {
+                if (!value)
+                    return [];
+                try {
+                    const parsed = JSON.parse(value);
+                    return Array.isArray(parsed) ? parsed : [];
+                }
+                catch {
+                    return [];
+                }
+            },
+            toAttribute: (value) => JSON.stringify(value),
+        },
+    })
+], AtomicSearchInterface.prototype, "fieldsToInclude", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicSearchInterface.prototype, "pipeline", void 0);
+__decorate([
+    property({ type: String, attribute: 'search-hub', reflect: true })
+], AtomicSearchInterface.prototype, "searchHub", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        converter: booleanConverter,
+        reflect: true,
+    })
+], AtomicSearchInterface.prototype, "analytics", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicSearchInterface.prototype, "timezone", void 0);
+__decorate([
+    property({ type: String, attribute: 'log-level', reflect: true })
+], AtomicSearchInterface.prototype, "logLevel", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], AtomicSearchInterface.prototype, "i18n", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicSearchInterface.prototype, "language", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], AtomicSearchInterface.prototype, "engine", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'reflect-state-in-url',
+        reflect: true,
+        converter: booleanConverter,
+    })
+], AtomicSearchInterface.prototype, "reflectStateInUrl", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'disable-state-reflection-in-url',
+        reflect: true,
+    })
+], AtomicSearchInterface.prototype, "disableStateReflectionInUrl", void 0);
+__decorate([
+    property({ type: String, attribute: 'scroll-container', reflect: true })
+], AtomicSearchInterface.prototype, "scrollContainer", void 0);
+__decorate([
+    property({ type: String, attribute: 'language-assets-path', reflect: true })
+], AtomicSearchInterface.prototype, "languageAssetsPath", void 0);
+__decorate([
+    property({ type: String, attribute: 'icon-assets-path', reflect: true })
+], AtomicSearchInterface.prototype, "iconAssetsPath", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'enable-relevance-inspector',
+        reflect: true,
+        converter: booleanConverter,
+    })
+], AtomicSearchInterface.prototype, "enableRelevanceInspector", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'disable-relevance-inspector',
+        reflect: true,
+    })
+], AtomicSearchInterface.prototype, "disableRelevanceInspector", void 0);
+__decorate([
+    watch('searchHub')
+], AtomicSearchInterface.prototype, "updateSearchHub", null);
+__decorate([
+    watch('pipeline')
+], AtomicSearchInterface.prototype, "updatePipeline", null);
+__decorate([
+    watch('analytics')
+], AtomicSearchInterface.prototype, "toggleAnalytics", null);
+__decorate([
+    watch('language')
+], AtomicSearchInterface.prototype, "updateLanguage", null);
+__decorate([
+    watch('iconAssetsPath')
+], AtomicSearchInterface.prototype, "updateIconAssetsPath", null);
+__decorate([
+    errorGuard()
+], AtomicSearchInterface.prototype, "render", null);
+AtomicSearchInterface = __decorate([
+    customElement('atomic-search-interface'),
+    withTailwindStyles
+], AtomicSearchInterface);
+export { AtomicSearchInterface };

package/dist/atomic/components/components/search/atomic-search-layout/atomic-search-layout.js

@@ -4,12 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { LitElement, unsafeCSS } from 'lit';
+import { LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { LayoutStylesController } from "../../common/layout/layout-styles-controller";
+import { watch } from "../../../decorators/watch";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
 import { LightDomMixin } from "../../../mixins/light-dom";
-import { randomID } from "../../../utils/utils";
-import { DEFAULT_MOBILE_BREAKPOINT } from '../../../utils/replace-breakpoint-utils';
+import { DEFAULT_MOBILE_BREAKPOINT } from "../../../utils/replace-breakpoint-utils";
 import styles from './atomic-search-layout.tw.css';
 import { buildSearchLayout } from './search-layout';
 /**
@@ -27,15 +28,22 @@ let AtomicSearchLayout = class AtomicSearchLayout extends LightDomMixin(Children
          * E.g., 800px, 65rem.
          */
         this.mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;
-    }
-    async addStyles() {
-        await this.getUpdateComplete();
-        this.injectStyles(unsafeCSS(buildSearchLayout(this, this.mobileBreakpoint)));
+        this.layoutStylesController = new LayoutStylesController(this, buildSearchLayout, 'atomic-search-layout-');
     }
     connectedCallback() {
         super.connectedCallback();
-        this.id = randomID('atomic-search-layout-');
-        this.addStyles();
+        this.emitBreakpointChangeEvent();
+    }
+    emitBreakpointChangeEvent() {
+        this.dispatchEvent(new CustomEvent('atomic-layout-breakpoint-change', {
+            detail: { breakpoint: this.mobileBreakpoint },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    onMobileBreakpointChange() {
+        this.layoutStylesController.updateStyles();
+        this.emitBreakpointChangeEvent();
     }
 };
 AtomicSearchLayout.styles = [styles];
@@ -45,6 +53,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true, attribute: 'mobile-breakpoint' })
 ], AtomicSearchLayout.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    watch('mobileBreakpoint')
+], AtomicSearchLayout.prototype, "onMobileBreakpointChange", null);
 AtomicSearchLayout = __decorate([
     customElement('atomic-search-layout')
 ], AtomicSearchLayout);

package/dist/atomic/components/components/search/index.js

@@ -1,5 +1,5 @@
 // Auto-generated file
-export { AtomicPager } from './atomic-pager/atomic-pager.js';
 export { AtomicQuerySummary } from './atomic-query-summary/atomic-query-summary.js';
 export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';
+export { AtomicSearchInterface } from './atomic-search-interface/atomic-search-interface.js';
 export { AtomicSearchLayout } from './atomic-search-layout/atomic-search-layout.js';

package/dist/atomic/components/components/search/lazy-index.js

@@ -1,7 +1,7 @@
 // Auto-generated file
 export default {
-    'atomic-pager': async () => await import('./atomic-pager/atomic-pager.js'),
     'atomic-query-summary': async () => await import('./atomic-query-summary/atomic-query-summary.js'),
     'atomic-results-per-page': async () => await import('./atomic-results-per-page/atomic-results-per-page.js'),
+    'atomic-search-interface': async () => await import('./atomic-search-interface/atomic-search-interface.js'),
     'atomic-search-layout': async () => await import('./atomic-search-layout/atomic-search-layout.js'),
 };

package/dist/atomic/components/depends-on.js

@@ -2,36 +2,36 @@ function parseDependsOn(dependsOn) {
     if (Object.keys(dependsOn).length > 1) {
         throw "Depending on multiple facets isn't supported";
     }
-    return Object.entries(dependsOn).map(([parentFacetId, expectedValue]) => {
-        return {
-            parentFacetId,
-            condition: (values) => {
-                return values.some((value) => {
-                    if (isCategoryFacetValue(value)) {
-                        const selectedValue = getSelectedCategoryFacetValueRequest(value);
-                        if (!selectedValue) {
-                            return false;
-                        }
-                        if (!expectedValue) {
-                            return true;
-                        }
-                        return selectedValue.value === expectedValue;
-                    }
-                    if (isSimpleFacetValue(value)) {
-                        if (value.state !== 'selected') {
-                            return false;
-                        }
-                        if (!expectedValue) {
-                            return true;
-                        }
-                        return value.value === expectedValue;
-                    }
-                    return false;
-                });
-            },
-        };
+    const entries = Object.entries(dependsOn);
+    return entries.map(([parentFacetId, expectedValue]) => ({
+        parentFacetId,
+        condition: buildDependsOnCondition(expectedValue),
+    }));
+}
+function buildDependsOnCondition(expectedValue) {
+    return (values) => values.some((value) => {
+        if (isCategoryFacetValue(value)) {
+            return matchesCategoryFacetValue(value, expectedValue);
+        }
+        if (isSimpleFacetValue(value)) {
+            return matchesSimpleFacetValue(value, expectedValue);
+        }
+        return false;
     });
 }
+function matchesCategoryFacetValue(value, expectedValue) {
+    const selectedValue = getSelectedCategoryFacetValueRequest(value);
+    if (!selectedValue) {
+        return false;
+    }
+    return !expectedValue || selectedValue.value === expectedValue;
+}
+function matchesSimpleFacetValue(value, expectedValue) {
+    if (value.state !== 'selected') {
+        return false;
+    }
+    return !expectedValue || value.value === expectedValue;
+}
 function isCategoryFacetValue(request) {
     const requestAsRecord = request;
     return ((requestAsRecord?.children &&

package/dist/atomic/components/depends-on.js.map

@@ -1 +1 @@
-{"file":"depends-on.js","mappings":"SAcgB,cAAc,CAE5B,SAAiC;IACjC,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;QACrC,MAAM,8CAA8C,CAAC;KACtD;IAED,OAAO,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,aAAa,EAAE,aAAa,CAAC;QAClE,OAAO;YACL,aAAa;YACb,SAAS,EAAE,CAAC,MAAM;gBAChB,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK;oBACvB,IAAI,oBAAoB,CAAC,KAAK,CAAC,EAAE;wBAC/B,MAAM,aAAa,GAAG,oCAAoC,CAAC,KAAK,CAAC,CAAC;wBAClE,IAAI,CAAC,aAAa,EAAE;4BAClB,OAAO,KAAK,CAAC;yBACd;wBACD,IAAI,CAAC,aAAa,EAAE;4BAClB,OAAO,IAAI,CAAC;yBACb;wBACD,OAAO,aAAa,CAAC,KAAK,KAAK,aAAa,CAAC;qBAC9C;oBACD,IAAI,kBAAkB,CAAC,KAAK,CAAC,EAAE;wBAC7B,IAAI,KAAK,CAAC,KAAK,KAAK,UAAU,EAAE;4BAC9B,OAAO,KAAK,CAAC;yBACd;wBACD,IAAI,CAAC,aAAa,EAAE;4BAClB,OAAO,IAAI,CAAC;yBACb;wBACD,OAAO,KAAK,CAAC,KAAK,KAAK,aAAa,CAAC;qBACtC;oBACD,OAAO,KAAK,CAAC;iBACd,CAAC,CAAC;aACJ;SACF,CAAC;KACH,CAAC,CAAC;AACL,CAAC;AAED,SAAS,oBAAoB,CAAC,OAAgB;IAC5C,MAAM,eAAe,GAAG,OAAkC,CAAC;IAC3D,QACE,CAAC,eAAe,EAAE,QAAQ;QACxB,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,QAAQ,CAAC;QACvC,eAAe,EAAE,KAAK;QACtB,OAAO,eAAe,CAAC,KAAK,KAAK,QAAQ,MAAM,IAAI,EACrD;AACJ,CAAC;AAED,SAAS,oCAAoC,CAC3C,KAAc;IAEd,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IACD,IAAI,KAAK,CAAC,KAAK,KAAK,UAAU,EAAE;QAC9B,OAAO,KAAK,CAAC;KACd;IACD,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE;QAClC,MAAM,aAAa,GAAG,oCAAoC,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,aAAa,KAAK,IAAI,EAAE;YAC1B,OAAO,aAAa,CAAC;SACtB;KACF;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAc;IACxC,MAAM,QAAQ,GAAG,KAAgC,CAAC;IAClD,QACE,OAAO,IAAI,QAAQ;QACnB,OAAO,QAAQ,CAAC,KAAK,KAAK,QAAQ;QAClC,EAAE,UAAU,IAAI,QAAQ,CAAC,EACzB;AACJ;;;;","names":[],"sources":["src/components/common/facets/depends-on.ts"],"sourcesContent":["type GenericCondition<AnyFacetValueRequest> = {\n  parentFacetId: string;\n  condition(parentValues: AnyFacetValueRequest[]): boolean;\n};\n\ninterface SimpleFacetValue {\n  value: string;\n  state: string;\n}\n\ninterface CategoryFacetValue extends SimpleFacetValue {\n  children: SimpleFacetValue[];\n}\n\nexport function parseDependsOn<\n  FacetValue extends SimpleFacetValue | CategoryFacetValue,\n>(dependsOn: Record<string, string>): GenericCondition<FacetValue>[] {\n  if (Object.keys(dependsOn).length > 1) {\n    throw \"Depending on multiple facets isn't supported\";\n  }\n\n  return Object.entries(dependsOn).map(([parentFacetId, expectedValue]) => {\n    return {\n      parentFacetId,\n      condition: (values) => {\n        return values.some((value) => {\n          if (isCategoryFacetValue(value)) {\n            const selectedValue = getSelectedCategoryFacetValueRequest(value);\n            if (!selectedValue) {\n              return false;\n            }\n            if (!expectedValue) {\n              return true;\n            }\n            return selectedValue.value === expectedValue;\n          }\n          if (isSimpleFacetValue(value)) {\n            if (value.state !== 'selected') {\n              return false;\n            }\n            if (!expectedValue) {\n              return true;\n            }\n            return value.value === expectedValue;\n          }\n          return false;\n        });\n      },\n    };\n  });\n}\n\nfunction isCategoryFacetValue(request: unknown): request is CategoryFacetValue {\n  const requestAsRecord = request as Record<string, unknown>;\n  return (\n    (requestAsRecord?.children &&\n      Array.isArray(requestAsRecord.children) &&\n      requestAsRecord?.state &&\n      typeof requestAsRecord.state === 'string') === true\n  );\n}\n\nfunction getSelectedCategoryFacetValueRequest(\n  value: unknown\n): CategoryFacetValue | null {\n  if (!isCategoryFacetValue(value)) {\n    return null;\n  }\n  if (value.state === 'selected') {\n    return value;\n  }\n  for (const child of value.children) {\n    const selectedValue = getSelectedCategoryFacetValueRequest(child);\n    if (selectedValue !== null) {\n      return selectedValue;\n    }\n  }\n  return null;\n}\n\nfunction isSimpleFacetValue(value: unknown): value is SimpleFacetValue {\n  const asRecord = value as Record<string, unknown>;\n  return (\n    'value' in asRecord &&\n    typeof asRecord.value === 'string' &&\n    !('children' in asRecord)\n  );\n}\n"],"version":3}
+{"file":"depends-on.js","mappings":"SAcgB,cAAc,CAE5B,SAAiC;IACjC,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;QACrC,MAAM,8CAA8C,CAAC;KACtD;IAED,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,aAAa,EAAE,aAAa,CAAC,MAAM;QACtD,aAAa;QACb,SAAS,EAAE,uBAAuB,CAAa,aAAa,CAAC;KAC9D,CAAC,CAAC,CAAC;AACN,CAAC;AAED,SAAS,uBAAuB,CAE9B,aAAqB;IACrB,OAAO,CAAC,MAAoB,KAC1B,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK;QAChB,IAAI,oBAAoB,CAAC,KAAK,CAAC,EAAE;YAC/B,OAAO,yBAAyB,CAC9B,KAA2B,EAC3B,aAAa,CACd,CAAC;SACH;QACD,IAAI,kBAAkB,CAAC,KAAK,CAAC,EAAE;YAC7B,OAAO,uBAAuB,CAC5B,KAAyB,EACzB,aAAa,CACd,CAAC;SACH;QACD,OAAO,KAAK,CAAC;KACd,CAAC,CAAC;AACP,CAAC;AAED,SAAS,yBAAyB,CAChC,KAAiB,EACjB,aAAqB;IAErB,MAAM,aAAa,GAAG,oCAAoC,CAAC,KAAK,CAAC,CAAC;IAClE,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,KAAK,CAAC;KACd;IACD,OAAO,CAAC,aAAa,IAAI,aAAa,CAAC,KAAK,KAAK,aAAa,CAAC;AACjE,CAAC;AAED,SAAS,uBAAuB,CAC9B,KAAuB,EACvB,aAAqB;IAErB,IAAI,KAAK,CAAC,KAAK,KAAK,UAAU,EAAE;QAC9B,OAAO,KAAK,CAAC;KACd;IACD,OAAO,CAAC,aAAa,IAAI,KAAK,CAAC,KAAK,KAAK,aAAa,CAAC;AACzD,CAAC;AAED,SAAS,oBAAoB,CAAC,OAAgB;IAC5C,MAAM,eAAe,GAAG,OAAkC,CAAC;IAC3D,QACE,CAAC,eAAe,EAAE,QAAQ;QACxB,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,QAAQ,CAAC;QACvC,eAAe,EAAE,KAAK;QACtB,OAAO,eAAe,CAAC,KAAK,KAAK,QAAQ,MAAM,IAAI,EACrD;AACJ,CAAC;AAED,SAAS,oCAAoC,CAC3C,KAAc;IAEd,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IACD,IAAI,KAAK,CAAC,KAAK,KAAK,UAAU,EAAE;QAC9B,OAAO,KAAK,CAAC;KACd;IACD,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE;QAClC,MAAM,aAAa,GAAG,oCAAoC,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,aAAa,KAAK,IAAI,EAAE;YAC1B,OAAO,aAAa,CAAC;SACtB;KACF;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAc;IACxC,MAAM,QAAQ,GAAG,KAAgC,CAAC;IAClD,QACE,OAAO,IAAI,QAAQ;QACnB,OAAO,QAAQ,CAAC,KAAK,KAAK,QAAQ;QAClC,EAAE,UAAU,IAAI,QAAQ,CAAC,EACzB;AACJ;;;;","names":[],"sources":["src/components/common/facets/depends-on.ts"],"sourcesContent":["type GenericCondition<AnyFacetValueRequest> = {\n  parentFacetId: string;\n  condition(parentValues: AnyFacetValueRequest[]): boolean;\n};\n\ninterface SimpleFacetValue {\n  value: string;\n  state: string;\n}\n\ninterface CategoryFacetValue extends SimpleFacetValue {\n  children: SimpleFacetValue[];\n}\n\nexport function parseDependsOn<\n  FacetValue extends SimpleFacetValue | CategoryFacetValue,\n>(dependsOn: Record<string, string>): GenericCondition<FacetValue>[] {\n  if (Object.keys(dependsOn).length > 1) {\n    throw \"Depending on multiple facets isn't supported\";\n  }\n\n  const entries = Object.entries(dependsOn);\n  return entries.map(([parentFacetId, expectedValue]) => ({\n    parentFacetId,\n    condition: buildDependsOnCondition<FacetValue>(expectedValue),\n  }));\n}\n\nfunction buildDependsOnCondition<\n  FacetValue extends SimpleFacetValue | CategoryFacetValue,\n>(expectedValue: string): (values: FacetValue[]) => boolean {\n  return (values: FacetValue[]) =>\n    values.some((value) => {\n      if (isCategoryFacetValue(value)) {\n        return matchesCategoryFacetValue(\n          value as CategoryFacetValue,\n          expectedValue\n        );\n      }\n      if (isSimpleFacetValue(value)) {\n        return matchesSimpleFacetValue(\n          value as SimpleFacetValue,\n          expectedValue\n        );\n      }\n      return false;\n    });\n}\n\nfunction matchesCategoryFacetValue<FacetValue extends CategoryFacetValue>(\n  value: FacetValue,\n  expectedValue: string\n): boolean {\n  const selectedValue = getSelectedCategoryFacetValueRequest(value);\n  if (!selectedValue) {\n    return false;\n  }\n  return !expectedValue || selectedValue.value === expectedValue;\n}\n\nfunction matchesSimpleFacetValue(\n  value: SimpleFacetValue,\n  expectedValue: string\n): boolean {\n  if (value.state !== 'selected') {\n    return false;\n  }\n  return !expectedValue || value.value === expectedValue;\n}\n\nfunction isCategoryFacetValue(request: unknown): request is CategoryFacetValue {\n  const requestAsRecord = request as Record<string, unknown>;\n  return (\n    (requestAsRecord?.children &&\n      Array.isArray(requestAsRecord.children) &&\n      requestAsRecord?.state &&\n      typeof requestAsRecord.state === 'string') === true\n  );\n}\n\nfunction getSelectedCategoryFacetValueRequest(\n  value: unknown\n): CategoryFacetValue | null {\n  if (!isCategoryFacetValue(value)) {\n    return null;\n  }\n  if (value.state === 'selected') {\n    return value;\n  }\n  for (const child of value.children) {\n    const selectedValue = getSelectedCategoryFacetValueRequest(child);\n    if (selectedValue !== null) {\n      return selectedValue;\n    }\n  }\n  return null;\n}\n\nfunction isSimpleFacetValue(value: unknown): value is SimpleFacetValue {\n  const asRecord = value as Record<string, unknown>;\n  return (\n    'value' in asRecord &&\n    typeof asRecord.value === 'string' &&\n    !('children' in asRecord)\n  );\n}\n"],"version":3}