@coveo/atomic 3.33.8-pre.a40e031589 → 3.33.8-pre.a5e3612f4f

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';

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

@@ -2,5 +2,6 @@
 export default {
     '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/facet-number-input.js

@@ -42,11 +42,11 @@ const FacetNumberInput = /*@__PURE__*/ proxyCustomElement(class FacetNumberInput
         const inputClasses = 'p-2.5 input-primary placeholder-neutral-dark min-w-0 mr-1';
         const labelClasses = 'text-neutral-dark text-sm';
         const step = this.type === 'integer' ? '1' : 'any';
-        return (h("form", { key: '085a1d3beb08ea5fb4af741c2856060ddfe21cb0', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
+        return (h("form", { key: '3afc8c27aad7fc2f3f280a8e5305dfdbc5291f74', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: 'e512e8ba8a9c50fdeea5e4aa28839a6a45c33315', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: '9573f0e91f52b4be8a8125be85547ee90258e27c', part: "input-start", id: `${this.filterState.facetId}_start`, type: "number", step: step, ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": minAria, required: true, min: Number.MIN_SAFE_INTEGER, max: this.end, value: this.filterState.range?.start, onInput: (e) => (this.start = e.target.valueAsNumber) }), h("label", { key: 'db739b28b33e3d480a056e8e86266167d72c619f', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: 'ac9b23ed6dfd74a5b8d17dd267dc1e4980ec475b', part: "input-end", id: `${this.filterState.facetId}_end`, type: "number", step: step, ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": maxAria, required: true, min: this.start, max: Number.MAX_SAFE_INTEGER, value: this.filterState.range?.end, onInput: (e) => (this.end = e.target.valueAsNumber) }), h(Button, { key: 'bda58c0d3de64935383484edeceadcd7c4576bd4', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            } }, h("label", { key: '9749444397b017e575f1cbc598ef8d4e440dc8b0', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: '94b1e3e64ec6ef14aff52ecf8e18c52bc987c7a7', part: "input-start", id: `${this.filterState.facetId}_start`, type: "number", step: step, ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": minAria, required: true, min: Number.MIN_SAFE_INTEGER, max: this.end, value: this.filterState.range?.start, onInput: (e) => (this.start = e.target.valueAsNumber) }), h("label", { key: '89da4fb4747fb9d0cba5251dd3972677867301de', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: '17813e5183986382376d765716ed60bff74de98c', part: "input-end", id: `${this.filterState.facetId}_end`, type: "number", step: step, ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": maxAria, required: true, min: this.start, max: Number.MAX_SAFE_INTEGER, value: this.filterState.range?.end, onInput: (e) => (this.end = e.target.valueAsNumber) }), h(Button, { key: 'a98a7d0b356bb5c3eeec2512d96fd5bedc3605a6', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
     }
     static get style() { return AtomicFacetNumberInputStyle0; }
 }, [0, "atomic-facet-number-input", {

package/dist/atomic/components/global/environment.js

@@ -3,7 +3,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.33.8-pre.a40e031589",
+        version: "3.33.8-pre.a5e3612f4f",
         headlessVersion,
     };
 }

package/dist/atomic/components/stencil-query-suggestions.js.map

@@ -1 +1 @@
-{"file":"stencil-query-suggestions.js","mappings":";;;MAUa,oCAAoC,GAAG,CAClD,UAAsB,EACtB,IAAU;IAEV,OAAO;QACL,IAAI,EAAE,uBAAuB;QAC7B,GAAG,EAAE,MAAM,qBAAqB,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;QACvD,KAAK,EAAE,UAAU,CAAC,QAAQ;QAC1B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,wBAAwB,EAAE;YAC1C,KAAK,EAAE,UAAU,CAAC,QAAQ;YAC1B,aAAa,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC;SACpC,CAAC;KACH,CAAC;AACJ,EAAE;MAEW,wBAAwB,GAAwB,CAAC,CAAC,EAAE,QAAQ;IACvE,QACE,WAAK,IAAI,EAAC,0BAA0B,EAAC,KAAK,EAAC,mBAAmB,IAC3D,QAAQ,CACL,EACN;AACJ,EAAE;MAOW,mBAAmB,GAE5B,CAAC,EAAC,IAAI,EAAE,aAAa,EAAC;IACxB,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO;KACR;IAED,QACE,mBACE,IAAI,EAAC,uBAAuB,EAC5B,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,uBAAuB,GAChB,EACf;AACJ,EAAE;MAOW,mBAAmB,GAE5B,CAAC,EAAC,UAAU,EAAE,QAAQ,EAAC;IACzB,IAAI,QAAQ,EAAE;QACZ,QACE,YACE,IAAI,EAAC,uBAAuB,EAC5B,KAAK,EAAC,wBAAwB,EAC9B,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAChC,EACR;KACH;IAED,QACE,YAAM,IAAI,EAAC,uBAAuB,EAAC,KAAK,EAAC,wBAAwB,IAC9D,UAAU,CAAC,QAAQ,CACf,EACP;AACJ;;;;","names":[],"sources":["src/components/common/suggestions/stencil-query-suggestions.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {encodeForDomAttribute} from '../../../utils/string-utils.js';\nimport {SearchBoxSuggestionElement} from './suggestions-common.js';\n\ninterface Suggestion {\n  highlightedValue: string;\n  rawValue: string;\n}\n\nexport const getPartialSearchBoxSuggestionElement = (\n  suggestion: Suggestion,\n  i18n: i18n\n): Pick<SearchBoxSuggestionElement, 'ariaLabel' | 'key' | 'query' | 'part'> => {\n  return {\n    part: 'query-suggestion-item',\n    key: `qs-${encodeForDomAttribute(suggestion.rawValue)}`,\n    query: suggestion.rawValue,\n    ariaLabel: i18n.t('query-suggestion-label', {\n      query: suggestion.rawValue,\n      interpolation: {escapeValue: false},\n    }),\n  };\n};\n\nexport const QuerySuggestionContainer: FunctionalComponent = (_, children) => {\n  return (\n    <div part=\"query-suggestion-content\" class=\"flex items-center\">\n      {children}\n    </div>\n  );\n};\n\ninterface QuerySuggestionIconProps {\n  icon: string;\n  hasSuggestion: boolean;\n}\n\nexport const QuerySuggestionIcon: FunctionalComponent<\n  QuerySuggestionIconProps\n> = ({icon, hasSuggestion}) => {\n  if (!hasSuggestion) {\n    return;\n  }\n\n  return (\n    <atomic-icon\n      part=\"query-suggestion-icon\"\n      icon={icon}\n      class=\"mr-2 h-4 w-4 shrink-0\"\n    ></atomic-icon>\n  );\n};\n\ninterface QuerySuggestionTextProps {\n  suggestion: Suggestion;\n  hasQuery: boolean;\n}\n\nexport const QuerySuggestionText: FunctionalComponent<\n  QuerySuggestionTextProps\n> = ({suggestion, hasQuery}) => {\n  if (hasQuery) {\n    return (\n      <span\n        part=\"query-suggestion-text\"\n        class=\"line-clamp-2 break-all\"\n        innerHTML={suggestion.highlightedValue}\n      ></span>\n    );\n  }\n\n  return (\n    <span part=\"query-suggestion-text\" class=\"line-clamp-2 break-all\">\n      {suggestion.rawValue}\n    </span>\n  );\n};\n"],"version":3}
+{"file":"stencil-query-suggestions.js","mappings":";;;MAUa,oCAAoC,GAAG,CAClD,UAAsB,EACtB,IAAU;IAEV,OAAO;QACL,IAAI,EAAE,uBAAuB;QAC7B,GAAG,EAAE,MAAM,qBAAqB,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;QACvD,KAAK,EAAE,UAAU,CAAC,QAAQ;QAC1B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,wBAAwB,EAAE;YAC1C,KAAK,EAAE,UAAU,CAAC,QAAQ;YAC1B,aAAa,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC;SACpC,CAAC;KACH,CAAC;AACJ,EAAE;MAEW,wBAAwB,GAAwB,CAAC,CAAC,EAAE,QAAQ;IACvE,QACE,WAAK,IAAI,EAAC,0BAA0B,EAAC,KAAK,EAAC,mBAAmB,IAC3D,QAAQ,CACL,EACN;AACJ,EAAE;MAOW,mBAAmB,GAE5B,CAAC,EAAC,IAAI,EAAE,aAAa,EAAC;IACxB,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO;KACR;IAED,QACE,mBACE,IAAI,EAAC,uBAAuB,EAC5B,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,uBAAuB,GAChB,EACf;AACJ,EAAE;MAOW,mBAAmB,GAE5B,CAAC,EAAC,UAAU,EAAE,QAAQ,EAAC;IACzB,IAAI,QAAQ,EAAE;QACZ,QACE,YACE,IAAI,EAAC,uBAAuB,EAC5B,KAAK,EAAC,wBAAwB,EAC9B,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAChC,EACR;KACH;IAED,QACE,YAAM,IAAI,EAAC,uBAAuB,EAAC,KAAK,EAAC,wBAAwB,IAC9D,UAAU,CAAC,QAAQ,CACf,EACP;AACJ;;;;","names":[],"sources":["src/components/common/suggestions/stencil-query-suggestions.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {encodeForDomAttribute} from '../../../utils/string-utils.js';\nimport {SearchBoxSuggestionElement} from './suggestions-types.js';\n\ninterface Suggestion {\n  highlightedValue: string;\n  rawValue: string;\n}\n\nexport const getPartialSearchBoxSuggestionElement = (\n  suggestion: Suggestion,\n  i18n: i18n\n): Pick<SearchBoxSuggestionElement, 'ariaLabel' | 'key' | 'query' | 'part'> => {\n  return {\n    part: 'query-suggestion-item',\n    key: `qs-${encodeForDomAttribute(suggestion.rawValue)}`,\n    query: suggestion.rawValue,\n    ariaLabel: i18n.t('query-suggestion-label', {\n      query: suggestion.rawValue,\n      interpolation: {escapeValue: false},\n    }),\n  };\n};\n\nexport const QuerySuggestionContainer: FunctionalComponent = (_, children) => {\n  return (\n    <div part=\"query-suggestion-content\" class=\"flex items-center\">\n      {children}\n    </div>\n  );\n};\n\ninterface QuerySuggestionIconProps {\n  icon: string;\n  hasSuggestion: boolean;\n}\n\nexport const QuerySuggestionIcon: FunctionalComponent<\n  QuerySuggestionIconProps\n> = ({icon, hasSuggestion}) => {\n  if (!hasSuggestion) {\n    return;\n  }\n\n  return (\n    <atomic-icon\n      part=\"query-suggestion-icon\"\n      icon={icon}\n      class=\"mr-2 h-4 w-4 shrink-0\"\n    ></atomic-icon>\n  );\n};\n\ninterface QuerySuggestionTextProps {\n  suggestion: Suggestion;\n  hasQuery: boolean;\n}\n\nexport const QuerySuggestionText: FunctionalComponent<\n  QuerySuggestionTextProps\n> = ({suggestion, hasQuery}) => {\n  if (hasQuery) {\n    return (\n      <span\n        part=\"query-suggestion-text\"\n        class=\"line-clamp-2 break-all\"\n        innerHTML={suggestion.highlightedValue}\n      ></span>\n    );\n  }\n\n  return (\n    <span part=\"query-suggestion-text\" class=\"line-clamp-2 break-all\">\n      {suggestion.rawValue}\n    </span>\n  );\n};\n"],"version":3}

package/dist/atomic/components/stencil-suggestion-manager.js

@@ -3,7 +3,25 @@ import { B as Button } from './stencil-button.js';
 import { isNullOrUndefined } from '@coveo/bueno';
 import { D as DOMPurify } from './purify.js';
 import { d as debounce } from './debounce-utils.js';
-import { e as elementHasQuery, a as elementHasNoQuery } from './suggestions-common.js';
+
+/**
+ * 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
+ */
+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
+ */
+function elementHasQuery(el) {
+    return !!el.query && el.query.trim() !== '';
+}
 
 const SearchSlimIcon = `<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="7" cy="7" r="6.5" stroke="currentColor"/>
@@ -409,6 +427,6 @@ class SuggestionManager {
     }
 }
 
-export { SuggestionManager as S, SearchSlimIcon as a, SearchBoxWrapper as b, SearchTextArea as c };
+export { SuggestionManager as S, elementHasQuery as a, SearchSlimIcon as b, SearchBoxWrapper as c, SearchTextArea as d, elementHasNoQuery as e };
 
 //# sourceMappingURL=stencil-suggestion-manager.js.map