@coveo/atomic 3.33.8-pre.bfb642d322 → 3.33.8-pre.c15f1d422b

package/dist/atomic/components/components/common/suggestions/{suggestions-common.js → suggestions-events.js}

@@ -1,5 +1,21 @@
 import { closest } from '../../../utils/dom-utils';
 import { buildCustomEvent } from '../../../utils/event-utils';
+/**
+ * Dispatches an event which retrieves the `SearchBoxSuggestionsBindings` on a configured parent search box.
+ *
+ * @param event Event sent from the registered query suggestions to the parent search box
+ * @param element Element on which to dispatch the event, which must be the child of a configured search box
+ * @param allowedSearchBoxElements Optional array of allowed search box element selectors
+ *
+ * @throws Error if the element is not a child of an allowed search box element
+ */
+export const dispatchSearchBoxSuggestionsEvent = (event, element, allowedSearchBoxElements = searchBoxElements) => {
+    const interfaceElement = closest(element, searchBoxElements.join(', '));
+    if (!interfaceElement) {
+        throw new Error(`The "${element.nodeName.toLowerCase()}" component was not handled, as it is not a child of the following elements: ${allowedSearchBoxElements.join(', ')}`);
+    }
+    void dispatchSearchBoxSuggestionsEventEventually(interfaceElement, element, event);
+};
 const searchBoxElements = [
     'atomic-search-box',
     'atomic-insight-search-box',
@@ -17,21 +33,3 @@ const dispatchSearchBoxSuggestionsEventEventually = async (interfaceElement, ele
     }
     element.dispatchEvent(buildCustomEvent('atomic/searchBoxSuggestion/register', event));
 };
-/**
- * Dispatches an event which retrieves the `SearchBoxSuggestionsBindings` on a configured parent search box.
- * @param event Event sent from the registered query suggestions to the parent search box.
- * @param element Element on which to dispatch the event, which must be the child of a configured search box.
- */
-export const dispatchSearchBoxSuggestionsEvent = (event, element, allowedSearchBoxElements = searchBoxElements) => {
-    const interfaceElement = closest(element, searchBoxElements.join(', '));
-    if (!interfaceElement) {
-        throw new Error(`The "${element.nodeName.toLowerCase()}" component was not handled, as it is not a child of the following elements: ${allowedSearchBoxElements.join(', ')}`);
-    }
-    void dispatchSearchBoxSuggestionsEventEventually(interfaceElement, element, event);
-};
-export function elementHasNoQuery(el) {
-    return !el.query || el.query.trim() === '';
-}
-export function elementHasQuery(el) {
-    return !!el.query && el.query.trim() !== '';
-}

package/dist/atomic/components/components/common/suggestions/suggestions-types.js

@@ -0,0 +1 @@
+export {};

package/dist/atomic/components/components/common/suggestions/suggestions-utils.js

@@ -0,0 +1,18 @@
+/**
+ * Checks if a search box suggestion element has no query.
+ *
+ * @param el - The search box suggestion element to check
+ * @returns True if the element has no query or the query is whitespace-only
+ */
+export function elementHasNoQuery(el) {
+    return !el.query || el.query.trim() === '';
+}
+/**
+ * Checks if a search box suggestion element has a query.
+ *
+ * @param el - The search box suggestion element to check
+ * @returns True if the element has a non-empty, non-whitespace query
+ */
+export function elementHasQuery(el) {
+    return !!el.query && el.query.trim() !== '';
+}

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

@@ -0,0 +1,57 @@
+import { augmentAnalyticsConfigWithAtomicVersion, augmentAnalyticsConfigWithDocument, augmentAnalyticsWithAtomicVersion, augmentWithExternalMiddleware, getNextAnalyticsConfig, } from '../../common/interface/analytics-config';
+export function getAnalyticsConfig(searchEngineConfig, enabled, store) {
+    switch (searchEngineConfig.analytics?.analyticsMode) {
+        case 'next':
+            return getNextAnalyticsConfig(searchEngineConfig, enabled);
+        default:
+            return getLegacyAnalyticsConfig(searchEngineConfig, enabled, store);
+    }
+}
+function getLegacyAnalyticsConfig(searchEngineConfig, enabled, store) {
+    const analyticsClientMiddleware = (event, payload) => augmentAnalytics(event, payload, store, searchEngineConfig);
+    const defaultConfiguration = {
+        analyticsClientMiddleware,
+        enabled,
+        ...augmentAnalyticsConfigWithDocument(),
+    };
+    const immutableConfiguration = {
+        ...augmentAnalyticsConfigWithAtomicVersion(),
+    };
+    if (searchEngineConfig.analytics) {
+        return {
+            ...defaultConfiguration,
+            ...searchEngineConfig.analytics,
+            analyticsClientMiddleware,
+            ...immutableConfiguration,
+        };
+    }
+    return {
+        ...defaultConfiguration,
+        ...immutableConfiguration,
+    };
+}
+function augmentAnalytics(event, payload, store, config) {
+    let result = augmentWithExternalMiddleware(event, payload, config);
+    result = augmentAnalyticsWithAtomicVersion(result);
+    result = augmentAnalyticsWithFacetTitles(result, store);
+    return result;
+}
+function augmentAnalyticsWithFacetTitles(payload, store) {
+    const allFacets = store.getAllFacets();
+    const getAtomicFacetLabelOrOriginalTitle = (facetId, originalTitle) => (allFacets[facetId] ? allFacets[facetId].label() : originalTitle);
+    if (payload.facetState) {
+        payload.facetState = payload.facetState.map((analyticsFacetState) => {
+            const { id, title: originalTitle } = analyticsFacetState;
+            return {
+                ...analyticsFacetState,
+                title: getAtomicFacetLabelOrOriginalTitle(id, originalTitle),
+            };
+        });
+    }
+    if (payload.customData?.facetTitle &&
+        payload.customData.facetId &&
+        payload.customData.facetTitle) {
+        payload.customData.facetTitle = getAtomicFacetLabelOrOriginalTitle(payload.customData.facetId, payload.customData.facetTitle);
+    }
+    return payload;
+}

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

@@ -0,0 +1,495 @@
+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';
+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,4 +1,5 @@
 // Auto-generated file
 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';