@coveo/atomic 3.35.0-pre.b985e047c6 → 3.35.0-pre.c5c77d8c36

package/dist/types/components/search/index.d.ts

@@ -2,6 +2,7 @@ export { AtomicPager } from './atomic-pager/atomic-pager.js';
 export { AtomicQuerySummary } from './atomic-query-summary/atomic-query-summary.js';
 export { AtomicRelevanceInspector } from './atomic-relevance-inspector/atomic-relevance-inspector.js';
 export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';
+export { AtomicSearchBoxQuerySuggestions } from './atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.js';
 export { AtomicSearchBoxRecentQueries } from './atomic-search-box-recent-queries/atomic-search-box-recent-queries.js';
 export { AtomicSearchInterface } from './atomic-search-interface/atomic-search-interface.js';
 export { AtomicSearchLayout } from './atomic-search-layout/atomic-search-layout.js';

package/dist/types/components/search/result-template-component-utils/context/fetch-result-context.d.ts

@@ -0,0 +1,8 @@
+import type { FoldedResult, Result } from '@coveo/headless';
+/**
+ * Retrieves `Result` on a rendered `atomic-result`.
+ *
+ * @param element - The element that the event is dispatched to
+ * @returns A promise that resolves on initialization of the parent `atomic-result` element, or rejects if missing
+ */
+export declare function fetchResultContext<T extends Result | FoldedResult = Result>(element: Element): Promise<T>;

package/dist/types/components/search/result-template-component-utils/context/interactive-result-context-controller.d.ts

@@ -0,0 +1,12 @@
+import type { InteractiveResult } from '@coveo/headless';
+import type { LitElement } from 'lit';
+import { InteractiveItemContextController } from "../../../common/item-list/context/interactive-item-context-controller";
+/**
+ * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive result context in result template components.
+ *
+ * @param host - The Lit component instance
+ * @returns InteractiveItemContextController instance
+ */
+export declare function createInteractiveResultContextController(host: LitElement & {
+    error: Error;
+}): InteractiveItemContextController<InteractiveResult>;

package/dist/types/components/search/result-template-component-utils/context/result-context-controller.d.ts

@@ -0,0 +1,18 @@
+import type { FoldedResult, InteractiveResult, Result } from '@coveo/headless';
+import type { LitElement } from 'lit';
+import type { InteractiveItemContextEvent } from "../../../common/item-list/context/interactive-item-context-controller";
+import { ItemContextController, type ItemContextEvent } from "../../../common/item-list/context/item-context-controller";
+/**
+ * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing result context in result template components.
+ *
+ * @param host - The Lit component instance
+ * @param options - Configuration options
+ * @returns ItemContextController instance configured for atomic-result
+ */
+export declare function createResultContextController(host: LitElement & {
+    error: Error | null;
+}, options?: {
+    folded?: boolean;
+}): ItemContextController<Result | FoldedResult>;
+export type ResultContextEvent<T = Result | FoldedResult> = ItemContextEvent<T>;
+export type InteractiveResultContextEvent<T extends InteractiveResult = InteractiveResult> = InteractiveItemContextEvent<T>;

package/dist/types/components/search/{result-template-components/result-template-decorators.d.ts → result-template-component-utils/context/stencil-result-template-decorators.d.ts}

@@ -1,5 +1,5 @@
 import { FoldedResult, Result } from '@coveo/headless';
-import { InteractiveItemContextEvent, ItemContextEvent } from '../../common/item-list/stencil-item-decorators';
+import { InteractiveItemContextEvent, ItemContextEvent } from "../../../common/item-list/stencil-item-decorators";
 /**
  * A [StencilJS property decorator](https://stenciljs.com/) to be used for result template components.
  * This allows the Stencil component to fetch the current result from its rendered parent, the `atomic-result` component.
@@ -8,6 +8,8 @@ import { InteractiveItemContextEvent, ItemContextEvent } from '../../common/item
  * @ResultContext() private result!: Result;
  *
  * For more information and examples, view the "Utilities" section of the readme.
+ *
+ * @deprecated should only be used for Stencil components. For Lit components, use `createResultContextController` from \@/src/components/search/result-template-component-utils/context/result-context-controller.ts
  */
 export declare function ResultContext(opts?: {
     folded: boolean;
@@ -22,7 +24,9 @@ export type InteractiveResultContextEvent = InteractiveItemContextEvent;
  *
  * You should use the method in the [connectedCallback lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).
  *
- * @param element The element that the event is dispatched to, which must be the child of a rendered "atomic-result".
+ * @param element The element that the event is dispatched to, which must be the child of a rendered "atomic-result" element.
  * @returns A promise that resolves on initialization of the parent "atomic-result" element, or rejects when there is no parent "atomic-result" element.
+ *
+ * @deprecated should only be used for Stencil components. For Lit components, use `fetchResultContext` from \@/src/components/search/result-template-component-utils/context/fetch-result-context.ts
  */
 export declare function resultContext<T extends Result | FoldedResult = Result>(element: Element): Promise<T>;

package/dist/types/components.d.ts

@@ -2325,23 +2325,6 @@ export namespace Components {
          */
         "setRenderFunction": (resultRenderingFunction: ItemRenderingFunction) => Promise<void>;
     }
-    /**
-     * The `atomic-search-box-query-suggestions` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of query suggestion behavior.
-     */
-    interface AtomicSearchBoxQuerySuggestions {
-        /**
-          * The SVG icon to display.  - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. - Use a value that starts with `assets://`, to display an icon from the Atomic package. - Use a stringified SVG to display it directly.
-         */
-        "icon"?: string;
-        /**
-          * The maximum number of suggestions that will be displayed if the user has typed something into the input field.
-         */
-        "maxWithQuery"?: number;
-        /**
-          * The maximum number of suggestions that will be displayed initially when the input field is empty.
-         */
-        "maxWithoutQuery"?: number;
-    }
     /**
      * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.
      */
@@ -3955,15 +3938,6 @@ declare global {
         prototype: HTMLAtomicSearchBoxInstantResultsElement;
         new (): HTMLAtomicSearchBoxInstantResultsElement;
     };
-    /**
-     * The `atomic-search-box-query-suggestions` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of query suggestion behavior.
-     */
-    interface HTMLAtomicSearchBoxQuerySuggestionsElement extends Components.AtomicSearchBoxQuerySuggestions, HTMLStencilElement {
-    }
-    var HTMLAtomicSearchBoxQuerySuggestionsElement: {
-        prototype: HTMLAtomicSearchBoxQuerySuggestionsElement;
-        new (): HTMLAtomicSearchBoxQuerySuggestionsElement;
-    };
     /**
      * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.
      */
@@ -4355,7 +4329,6 @@ declare global {
         "atomic-result-timespan": HTMLAtomicResultTimespanElement;
         "atomic-search-box": HTMLAtomicSearchBoxElement;
         "atomic-search-box-instant-results": HTMLAtomicSearchBoxInstantResultsElement;
-        "atomic-search-box-query-suggestions": HTMLAtomicSearchBoxQuerySuggestionsElement;
         "atomic-segmented-facet": HTMLAtomicSegmentedFacetElement;
         "atomic-segmented-facet-scrollable": HTMLAtomicSegmentedFacetScrollableElement;
         "atomic-smart-snippet": HTMLAtomicSmartSnippetElement;
@@ -6548,23 +6521,6 @@ declare namespace LocalJSX {
          */
         "maxResultsPerQuery"?: number;
     }
-    /**
-     * The `atomic-search-box-query-suggestions` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of query suggestion behavior.
-     */
-    interface AtomicSearchBoxQuerySuggestions {
-        /**
-          * The SVG icon to display.  - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. - Use a value that starts with `assets://`, to display an icon from the Atomic package. - Use a stringified SVG to display it directly.
-         */
-        "icon"?: string;
-        /**
-          * The maximum number of suggestions that will be displayed if the user has typed something into the input field.
-         */
-        "maxWithQuery"?: number;
-        /**
-          * The maximum number of suggestions that will be displayed initially when the input field is empty.
-         */
-        "maxWithoutQuery"?: number;
-    }
     /**
      * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.
      */
@@ -7067,7 +7023,6 @@ declare namespace LocalJSX {
         "atomic-result-timespan": AtomicResultTimespan;
         "atomic-search-box": AtomicSearchBox;
         "atomic-search-box-instant-results": AtomicSearchBoxInstantResults;
-        "atomic-search-box-query-suggestions": AtomicSearchBoxQuerySuggestions;
         "atomic-segmented-facet": AtomicSegmentedFacet;
         "atomic-segmented-facet-scrollable": AtomicSegmentedFacetScrollable;
         "atomic-smart-snippet": AtomicSmartSnippet;
@@ -7570,10 +7525,6 @@ declare module "@stencil/core" {
              * This component is not supported on mobile.
              */
             "atomic-search-box-instant-results": LocalJSX.AtomicSearchBoxInstantResults & JSXBase.HTMLAttributes<HTMLAtomicSearchBoxInstantResultsElement>;
-            /**
-             * The `atomic-search-box-query-suggestions` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of query suggestion behavior.
-             */
-            "atomic-search-box-query-suggestions": LocalJSX.AtomicSearchBoxQuerySuggestions & JSXBase.HTMLAttributes<HTMLAtomicSearchBoxQuerySuggestionsElement>;
             /**
              * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.
              */

package/dist/types/index.d.ts

@@ -2,7 +2,8 @@ export type { i18n } from 'i18next';
 export { Components, JSX } from './components';
 export { CommerceBindings } from './components/commerce/atomic-commerce-interface/atomic-commerce-interface';
 export { SelectChildProductEventArgs } from './components/commerce/atomic-product-children/select-child-product-event';
-export { productContext } from './components/commerce/product-template-component-utils/stencil-product-template-decorators';
+export { fetchProductContext } from './components/commerce/product-template-component-utils/context/fetch-product-context';
+export { productContext } from './components/commerce/product-template-component-utils/context/stencil-product-template-decorators';
 export { PopoverChildFacet } from './components/common/facets/popover/popover-type';
 export { RedirectionPayload } from './components/common/search-box/redirection-payload';
 export { dispatchSearchBoxSuggestionsEvent } from './components/common/suggestions/suggestions-events';
@@ -10,7 +11,6 @@ export type { SearchBoxSuggestionElement, SearchBoxSuggestions, SearchBoxSuggest
 export { elementHasNoQuery, elementHasQuery, } from './components/common/suggestions/suggestions-utils';
 export { RecsBindings } from './components/recommendations/atomic-recs-interface/atomic-recs-interface';
 export { Bindings } from './components/search/atomic-search-interface/atomic-search-interface';
-export { resultContext } from './components/search/result-template-components/result-template-decorators';
-export { fetchProductContext } from './decorators/commerce/product-template-decorators';
+export { resultContext } from './components/search/result-template-component-utils/context/stencil-result-template-decorators';
 export { initializeBindings, MissingInterfaceParentError, } from './utils/initialization-utils';
 export { bindLogDocumentOpenOnResult } from './utils/result-utils';

package/docs/atomic-docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-10-08T14:14:23",
+  "timestamp": "2025-10-08T19:10:38",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.20.0",
@@ -11825,13 +11825,11 @@
       ],
       "dependents": [],
       "dependencies": [
-        "atomic-suggestion-renderer",
-        "atomic-search-box-query-suggestions"
+        "atomic-suggestion-renderer"
       ],
       "dependencyGraph": {
         "atomic-search-box": [
-          "atomic-suggestion-renderer",
-          "atomic-search-box-query-suggestions"
+          "atomic-suggestion-renderer"
         ]
       }
     },
@@ -12052,103 +12050,6 @@
         ]
       }
     },
-    {
-      "filePath": "src/components/search/search-box-suggestions/atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.tsx",
-      "encapsulation": "shadow",
-      "tag": "atomic-search-box-query-suggestions",
-      "docs": "The `atomic-search-box-query-suggestions` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of query suggestion behavior.",
-      "docsTags": [],
-      "usage": {},
-      "props": [
-        {
-          "name": "icon",
-          "type": "string | undefined",
-          "complexType": {
-            "original": "string",
-            "resolved": "string | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "icon",
-          "reflectToAttr": false,
-          "docs": "The SVG icon to display.\n\n- Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.\n- Use a value that starts with `assets://`, to display an icon from the Atomic package.\n- Use a stringified SVG to display it directly.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
-        {
-          "name": "maxWithQuery",
-          "type": "number | undefined",
-          "complexType": {
-            "original": "number",
-            "resolved": "number | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "max-with-query",
-          "reflectToAttr": true,
-          "docs": "The maximum number of suggestions that will be displayed if the user has typed something into the input field.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "number"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
-        {
-          "name": "maxWithoutQuery",
-          "type": "number | undefined",
-          "complexType": {
-            "original": "number",
-            "resolved": "number | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "max-without-query",
-          "reflectToAttr": true,
-          "docs": "The maximum number of suggestions that will be displayed initially when the input field is empty.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "number"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [],
-      "slots": [],
-      "parts": [],
-      "dependents": [
-        "atomic-search-box"
-      ],
-      "dependencies": [],
-      "dependencyGraph": {
-        "atomic-search-box": [
-          "atomic-search-box-query-suggestions"
-        ]
-      }
-    },
     {
       "filePath": "src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx",
       "encapsulation": "shadow",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coveo/atomic",
   "type": "module",
-  "version": "3.35.0-pre.b985e047c6",
+  "version": "3.35.0-pre.c5c77d8c36",
   "description": "A web-component library for building modern UIs interfacing with the Coveo platform",
   "homepage": "https://docs.coveo.com/en/atomic/latest/",
   "repository": {
@@ -100,7 +100,6 @@
   "devDependencies": {
     "@axe-core/playwright": "4.10.2",
     "@custom-elements-manifest/analyzer": "0.10.4",
-    "@mswjs/source": "0.4.1",
     "@playwright/test": "1.54.1",
     "@rollup/plugin-commonjs": "28.0.6",
     "@rollup/plugin-json": "6.1.0",
@@ -131,10 +130,7 @@
     "jest-cli": "29.7.0",
     "jest-localstorage-mock": "2.4.26",
     "local-web-server": "5.4.0",
-    "msw": "2.10.5",
-    "msw-storybook-addon": "2.0.5",
     "natural-orderby": "5.0.0",
-    "openapi-types": "12.1.3",
     "playwright": "1.54.1",
     "postcss": "8.5.6",
     "postcss-load-config": "6.0.1",
@@ -168,10 +164,5 @@
   "license": "Apache-2.0",
   "engines": {
     "node": "^20.9.0 || ^22.11.0"
-  },
-  "msw": {
-    "workerDirectory": [
-      "public"
-    ]
   }
 }

package/dist/atomic/components/atomic-search-box-query-suggestions.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../../types/components";
-
-interface AtomicSearchBoxQuerySuggestions extends Components.AtomicSearchBoxQuerySuggestions, HTMLElement {}
-export const AtomicSearchBoxQuerySuggestions: {
-    prototype: AtomicSearchBoxQuerySuggestions;
-    new (): AtomicSearchBoxQuerySuggestions;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/atomic/components/atomic-search-box-query-suggestions.js

@@ -1,8 +0,0 @@
-import { A as AtomicSearchBoxQuerySuggestions$1, d as defineCustomElement$1 } from './atomic-search-box-query-suggestions2.js';
-
-const AtomicSearchBoxQuerySuggestions = AtomicSearchBoxQuerySuggestions$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { AtomicSearchBoxQuerySuggestions, defineCustomElement };
-
-//# sourceMappingURL=atomic-search-box-query-suggestions.js.map

package/dist/atomic/components/atomic-search-box-query-suggestions.js.map

@@ -1 +0,0 @@
-{"file":"atomic-search-box-query-suggestions.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/atomic/components/atomic-search-box-query-suggestions2.js

@@ -1,89 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { loadQuerySuggestActions } from '@coveo/headless';
-import { S as SearchIcon } from './search.js';
-import { g as getPartialSearchBoxSuggestionElement, Q as QuerySuggestionContainer, a as QuerySuggestionIcon, b as QuerySuggestionText } from './stencil-query-suggestions.js';
-import { d as dispatchSearchBoxSuggestionsEvent } from './suggestions-events.js';
-
-const AtomicSearchBoxQuerySuggestions = /*@__PURE__*/ proxyCustomElement(class AtomicSearchBoxQuerySuggestions extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.error = undefined;
-        this.icon = undefined;
-        this.maxWithQuery = undefined;
-        this.maxWithoutQuery = undefined;
-    }
-    componentWillLoad() {
-        try {
-            dispatchSearchBoxSuggestionsEvent((bindings) => {
-                this.bindings = bindings;
-                return this.initialize();
-            }, this.host, ['atomic-search-box']);
-        }
-        catch (error) {
-            this.error = error;
-        }
-    }
-    initialize() {
-        const engine = this.bindings.engine;
-        const { registerQuerySuggest, fetchQuerySuggestions } = loadQuerySuggestActions(engine);
-        engine.dispatch(registerQuerySuggest({
-            id: this.bindings.id,
-            count: this.bindings.numberOfQueries,
-        }));
-        return {
-            position: Array.from(this.host.parentNode.children).indexOf(this.host),
-            onInput: () => engine.dispatch(fetchQuerySuggestions({
-                id: this.bindings.id,
-            })),
-            renderItems: () => this.renderItems(),
-        };
-    }
-    renderItems() {
-        const hasQuery = this.bindings.searchBoxController.state.value !== '';
-        const max = hasQuery ? this.maxWithQuery : this.maxWithoutQuery;
-        return this.bindings.searchBoxController.state.suggestions
-            .slice(0, max)
-            .map((suggestion) => this.renderItem(suggestion));
-    }
-    renderItem(suggestion) {
-        const hasQuery = this.bindings.searchBoxController.state.value !== '';
-        const partialItem = getPartialSearchBoxSuggestionElement(suggestion, this.bindings.i18n);
-        return {
-            ...partialItem,
-            content: (h(QuerySuggestionContainer, null, h(QuerySuggestionIcon, { icon: this.icon || SearchIcon, hasSuggestion: this.bindings.getSuggestions().length > 1 }), h(QuerySuggestionText, { suggestion: suggestion, hasQuery: hasQuery }))),
-            onSelect: () => {
-                this.bindings.searchBoxController.selectSuggestion(suggestion.rawValue);
-            },
-        };
-    }
-    render() {
-        if (this.error) {
-            return (h("atomic-component-error", { key: '7fdb4afa7291ad70c37a9709fd7108f4fe0fb94d', element: this.host, error: this.error }));
-        }
-    }
-    get host() { return this; }
-}, [1, "atomic-search-box-query-suggestions", {
-        "icon": [1],
-        "maxWithQuery": [514, "max-with-query"],
-        "maxWithoutQuery": [514, "max-without-query"],
-        "error": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["atomic-search-box-query-suggestions"];
-    components.forEach(tagName => { switch (tagName) {
-        case "atomic-search-box-query-suggestions":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AtomicSearchBoxQuerySuggestions);
-            }
-            break;
-    } });
-}
-
-export { AtomicSearchBoxQuerySuggestions as A, defineCustomElement as d };
-
-//# sourceMappingURL=atomic-search-box-query-suggestions2.js.map

package/dist/atomic/components/atomic-search-box-query-suggestions2.js.map

@@ -1 +0,0 @@
-{"file":"atomic-search-box-query-suggestions2.js","mappings":";;;;;;MA8Ba,+BAA+B;;;;;;;;;;IAwB1C,iBAAiB;QACf,IAAI;YACF,iCAAiC,CAC/B,CAAC,QAAQ;gBACP,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;gBACzB,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;aAC1B,EACD,IAAI,CAAC,IAAI,EACT,CAAC,mBAAmB,CAAC,CACtB,CAAC;SACH;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAc,CAAC;SAC7B;KACF;IAEO,UAAU;QAChB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAG3B,CAAC;QACH,MAAM,EAAC,oBAAoB,EAAE,qBAAqB,EAAC,GACjD,uBAAuB,CAAC,MAAM,CAAC,CAAC;QAElC,MAAM,CAAC,QAAQ,CACb,oBAAoB,CAAC;YACnB,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE;YACpB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,eAAe;SACrC,CAAC,CACH,CAAC;QAEF,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;YACvE,OAAO,EAAE,MACP,MAAM,CAAC,QAAQ,CACb,qBAAqB,CAAC;gBACpB,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE;aACrB,CAAC,CACH;YACH,WAAW,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE;SACtC,CAAC;KACH;IAEO,WAAW;QACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;QACtE,MAAM,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC;QAChE,OAAO,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,CAAC,WAAW;aACvD,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC;aACb,GAAG,CAAC,CAAC,UAAU,KAAK,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC;KACrD;IAEO,UAAU,CAAC,UAAsB;QACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;QACtE,MAAM,WAAW,GAAG,oCAAoC,CACtD,UAAU,EACV,IAAI,CAAC,QAAQ,CAAC,IAAI,CACnB,CAAC;QAEF,OAAO;YACL,GAAG,WAAW;YACd,OAAO,GACL,EAAC,wBAAwB,QACvB,EAAC,mBAAmB,IAClB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,UAAU,EAC7B,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,MAAM,GAAG,CAAC,GACxD,EAEF,EAAC,mBAAmB,IAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC1C,CAC5B;YACD,QAAQ,EAAE;gBACR,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;aACzE;SACF,CAAC;KACH;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QACE,+EACE,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,GACO,EAC1B;SACH;KACF;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/search/search-box-suggestions/atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.tsx"],"sourcesContent":["import {\n  loadQuerySuggestActions,\n  SearchBox,\n  SearchEngine,\n  Suggestion,\n} from '@coveo/headless';\nimport {Component, Element, Prop, State, h} from '@stencil/core';\nimport SearchIcon from '../../../../images/search.svg';\nimport {\n  getPartialSearchBoxSuggestionElement,\n  QuerySuggestionContainer,\n  QuerySuggestionIcon,\n  QuerySuggestionText,\n} from '../../../common/suggestions/stencil-query-suggestions';\nimport {\n  dispatchSearchBoxSuggestionsEvent,\n} from '../../../common/suggestions/suggestions-events';\nimport type {\n  SearchBoxSuggestionElement,\n  SearchBoxSuggestions,\n  SearchBoxSuggestionsBindings,\n} from '../../../common/suggestions/suggestions-types';\n\n/**\n * The `atomic-search-box-query-suggestions` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of query suggestion behavior.\n */\n@Component({\n  tag: 'atomic-search-box-query-suggestions',\n  shadow: true,\n})\nexport class AtomicSearchBoxQuerySuggestions {\n  private bindings!: SearchBoxSuggestionsBindings<SearchBox>;\n  @Element() private host!: HTMLElement;\n\n  @State() public error!: Error;\n\n  /**\n   * The SVG icon to display.\n   *\n   * - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.\n   * - Use a value that starts with `assets://`, to display an icon from the Atomic package.\n   * - Use a stringified SVG to display it directly.\n   */\n  @Prop() public icon?: string;\n\n  /**\n   * The maximum number of suggestions that will be displayed if the user has typed something into the input field.\n   */\n  @Prop({reflect: true}) public maxWithQuery?: number;\n  /**\n   * The maximum number of suggestions that will be displayed initially when the input field is empty.\n   */\n  @Prop({reflect: true}) public maxWithoutQuery?: number;\n\n  componentWillLoad() {\n    try {\n      dispatchSearchBoxSuggestionsEvent<SearchBox>(\n        (bindings) => {\n          this.bindings = bindings;\n          return this.initialize();\n        },\n        this.host,\n        ['atomic-search-box']\n      );\n    } catch (error) {\n      this.error = error as Error;\n    }\n  }\n\n  private initialize(): SearchBoxSuggestions {\n    const engine = this.bindings.engine as SearchEngine<{\n      querySet: string;\n      querySuggest: string;\n    }>;\n    const {registerQuerySuggest, fetchQuerySuggestions} =\n      loadQuerySuggestActions(engine);\n\n    engine.dispatch(\n      registerQuerySuggest({\n        id: this.bindings.id,\n        count: this.bindings.numberOfQueries,\n      })\n    );\n\n    return {\n      position: Array.from(this.host.parentNode!.children).indexOf(this.host),\n      onInput: () =>\n        engine.dispatch(\n          fetchQuerySuggestions({\n            id: this.bindings.id,\n          })\n        ),\n      renderItems: () => this.renderItems(),\n    };\n  }\n\n  private renderItems(): SearchBoxSuggestionElement[] {\n    const hasQuery = this.bindings.searchBoxController.state.value !== '';\n    const max = hasQuery ? this.maxWithQuery : this.maxWithoutQuery;\n    return this.bindings.searchBoxController.state.suggestions\n      .slice(0, max)\n      .map((suggestion) => this.renderItem(suggestion));\n  }\n\n  private renderItem(suggestion: Suggestion) {\n    const hasQuery = this.bindings.searchBoxController.state.value !== '';\n    const partialItem = getPartialSearchBoxSuggestionElement(\n      suggestion,\n      this.bindings.i18n\n    );\n\n    return {\n      ...partialItem,\n      content: (\n        <QuerySuggestionContainer>\n          <QuerySuggestionIcon\n            icon={this.icon || SearchIcon}\n            hasSuggestion={this.bindings.getSuggestions().length > 1}\n          />\n\n          <QuerySuggestionText suggestion={suggestion} hasQuery={hasQuery} />\n        </QuerySuggestionContainer>\n      ),\n      onSelect: () => {\n        this.bindings.searchBoxController.selectSuggestion(suggestion.rawValue);\n      },\n    };\n  }\n\n  public render() {\n    if (this.error) {\n      return (\n        <atomic-component-error\n          element={this.host}\n          error={this.error}\n        ></atomic-component-error>\n      );\n    }\n  }\n}\n"],"version":3}

package/dist/atomic/components/components/common/item-list/fetch-item-context.js

@@ -1,15 +0,0 @@
-import { closest } from '../../../utils/dom-utils.js';
-import { buildCustomEvent } from '../../../utils/event-utils.js';
-import { MissingParentError } from './context/item-context-controller.js';
-const itemContextEventName = 'atomic/resolveResult';
-export function fetchItemContext(element, parentName) {
-    return new Promise((resolve, reject) => {
-        const event = buildCustomEvent(itemContextEventName, (item) => {
-            return resolve(item);
-        });
-        element.dispatchEvent(event);
-        if (!closest(element, parentName)) {
-            reject(new MissingParentError(element.nodeName.toLowerCase(), parentName));
-        }
-    });
-}

package/dist/atomic/components/decorators/commerce/product-template-decorators.js

@@ -1,68 +0,0 @@
-import { InteractiveItemContextController, } from "../../components/common/item-list/context/interactive-item-context-controller";
-import { ItemContextController, } from "../../components/common/item-list/context/item-context-controller";
-import { fetchItemContext } from "../../components/common/item-list/fetch-item-context";
-/**
- * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.
- *
- * @param host - The Lit component instance
- * @param options - Configuration options
- * @returns ItemContextController instance configured for atomic-product
- *
- * @example
- * ```typescript
- * @customElement('my-product-component')
- * export class MyProductComponent extends LitElement {
- *   private productController = createProductContextController(this);
- *
- *   @state() product!: Product;
- *
- *   render() {
- *     this.product = this.productController.item;
- *     return html`<div>${this.product?.ec_name}</div>`;
- *   }
- * }
- * ```
- */
-export function createProductContextController(host, options = {}) {
-    return new ItemContextController(host, {
-        parentName: 'atomic-product',
-        folded: options.folded ?? false,
-    });
-}
-/**
- * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.
- *
- * @param host - The Lit component instance
- * @returns InteractiveItemContextController instance
- *
- * @example
- * ```typescript
- * @customElement('my-interactive-product-component')
- * export class MyInteractiveProductComponent extends LitElement {
- *   private interactiveProductController = createInteractiveProductContextController(this);
- *
- *   @state() product!: Product;
- *
- *   render() {
- *     this.product = this.interactiveProductController.interactiveItem;
- *     return html`<div>${this.product?.ec_name}</div>`;
- *   }
- * }
- * ```
- */
-export function createInteractiveProductContextController(host) {
-    return new InteractiveItemContextController(host);
-}
-/**
- * Retrieves `Product` on a rendered `atomic-product`.
- *
- * This utility function is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.
- *
- * You should use the utility function in the [`connectedCallback` lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).
- *
- * @param element - The element that the event is dispatched to, which must be the child of a rendered `atomic-product`.
- * @returns A promise that resolves on initialization of the parent `atomic-product` element, or rejects when there is no parent `atomic-product` element.
- */
-export function fetchProductContext(element) {
-    return fetchItemContext(element, 'atomic-product');
-}

package/dist/atomic/components/result-template-decorators.js.map

@@ -1 +0,0 @@
-{"file":"result-template-decorators.js","mappings":";;AASA;;;;;;;;;SASgB,aAAa,CAAC,OAA0B,EAAC,MAAM,EAAE,KAAK,EAAC;IACrE,OAAO,WAAW,CAAC,EAAC,UAAU,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC,CAAC,CAAC;AACzE,CAAC;SAEe,wBAAwB;IACtC,OAAO,sBAAsB,EAAE,CAAC;AAClC,CAAC;AAKD;;;;;;;;;;SAUgB,aAAa,CAC3B,OAAgB;IAEhB,OAAO,WAAW,CAAI,OAAO,EAAE,eAAe,CAAC,CAAC;AAClD;;;;","names":[],"sources":["src/components/search/result-template-components/result-template-decorators.tsx"],"sourcesContent":["import {FoldedResult, Result} from '@coveo/headless';\nimport {\n  InteractiveItemContext,\n  InteractiveItemContextEvent,\n  ItemContext,\n  ItemContextEvent,\n  itemContext,\n} from '../../common/item-list/stencil-item-decorators';\n\n/**\n * A [StencilJS property decorator](https://stenciljs.com/) to be used for result template components.\n * This allows the Stencil component to fetch the current result from its rendered parent, the `atomic-result` component.\n *\n * Example:\n * @ResultContext() private result!: Result;\n *\n * For more information and examples, view the \"Utilities\" section of the readme.\n */\nexport function ResultContext(opts: {folded: boolean} = {folded: false}) {\n  return ItemContext({parentName: 'atomic-result', folded: opts.folded});\n}\n\nexport function InteractiveResultContext() {\n  return InteractiveItemContext();\n}\n\nexport type ResultContextEvent<T = Result> = ItemContextEvent<T>;\nexport type InteractiveResultContextEvent = InteractiveItemContextEvent;\n\n/**\n * Retrieves `Result` on a rendered `atomic-result`.\n *\n * This method is useful for building custom result template elements, see [Create a Result List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-result-template-component-example) for more information.\n *\n * You should use the method in the [connectedCallback lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element The element that the event is dispatched to, which must be the child of a rendered \"atomic-result\".\n * @returns A promise that resolves on initialization of the parent \"atomic-result\" element, or rejects when there is no parent \"atomic-result\" element.\n */\nexport function resultContext<T extends Result | FoldedResult = Result>(\n  element: Element\n) {\n  return itemContext<T>(element, 'atomic-result');\n}\n"],"version":3}

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

@@ -1,33 +0,0 @@
-import { h } from '@stencil/core/internal/client';
-import { e as encodeForDomAttribute } from './string-utils.js';
-
-const getPartialSearchBoxSuggestionElement = (suggestion, i18n) => {
-    return {
-        part: 'query-suggestion-item',
-        key: `qs-${encodeForDomAttribute(suggestion.rawValue)}`,
-        query: suggestion.rawValue,
-        ariaLabel: i18n.t('query-suggestion-label', {
-            query: suggestion.rawValue,
-            interpolation: { escapeValue: false },
-        }),
-    };
-};
-const QuerySuggestionContainer = (_, children) => {
-    return (h("div", { part: "query-suggestion-content", class: "flex items-center" }, children));
-};
-const QuerySuggestionIcon = ({ icon, hasSuggestion }) => {
-    if (!hasSuggestion) {
-        return;
-    }
-    return (h("atomic-icon", { part: "query-suggestion-icon", icon: icon, class: "mr-2 h-4 w-4 shrink-0" }));
-};
-const QuerySuggestionText = ({ suggestion, hasQuery }) => {
-    if (hasQuery) {
-        return (h("span", { part: "query-suggestion-text", class: "line-clamp-2 break-all", innerHTML: suggestion.highlightedValue }));
-    }
-    return (h("span", { part: "query-suggestion-text", class: "line-clamp-2 break-all" }, suggestion.rawValue));
-};
-
-export { QuerySuggestionContainer as Q, QuerySuggestionIcon as a, QuerySuggestionText as b, getPartialSearchBoxSuggestionElement as g };
-
-//# sourceMappingURL=stencil-query-suggestions.js.map

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

@@ -1 +0,0 @@
-{"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}