@coveo/atomic 3.33.8-pre.4dadface29 → 3.33.8-pre.4e37aa6985

package/dist/types/components/commerce/atomic-commerce-interface/atomic-commerce-interface.d.ts

@@ -1,4 +1,5 @@
 import { type CommerceEngine, type CommerceEngineConfiguration, type Context, type LogLevel, type ProductListing, type ProductListingSummaryState, type Search, type SearchSummaryState, type Summary, type UrlManager } from '@coveo/headless/commerce';
+import type { CurrencyCodeISO4217 } from '@coveo/relay-event-types';
 import { type i18n } from 'i18next';
 import { type CSSResultGroup, LitElement } from 'lit';
 import type { CommonBindings } from '../../common/interface/bindings';
@@ -49,7 +50,13 @@ export declare class AtomicCommerceInterface extends AtomicCommerceInterface_bas
     /**
      * The commerce interface language.
      *
-     * Will default to the value set in the Headless engine context if not provided.
+     * Will default to the value set in the Headless engine context if not
+     * provided.
+     *
+     * @deprecated - This property will be removed in the next major version of
+     * Atomic (v4). Rather than using this property, set the initial language
+     * through the engine configuration when calling `initializeWithEngine`, and
+     * update the language as needed using the `updateLocale` method.
      */
     language?: string;
     /**
@@ -100,6 +107,26 @@ export declare class AtomicCommerceInterface extends AtomicCommerceInterface_bas
      * Executes the first request after initializing connection to the headless commerce engine.
      */
     executeFirstRequest(): Promise<void>;
+    /**
+     * Updates the locale settings for the commerce interface and headless commerce
+     * engine. Only the provided parameters will be updated.
+     *
+     * Calling this method affects the localization of the interface as well as
+     * the catalog configuration being used by the Commerce API. If the resulting
+     * language-country-currency combination matches no existing catalog
+     * configuration in your Coveo organization, requests made through the
+     * commerce engine will start failing.
+     *
+     * @param language - (Optional) The IETF language code tag (e.g., `en`).
+     * @param country - (Optional) The ISO-3166-1 country tag (e.g., `US`).
+     * @param currency - (Optional) The ISO-4217 currency code (e.g., `USD`).
+     *
+     * @example
+     * ```typescript
+     * interface.updateLocale('fr', 'CA', 'CAD');
+     * ```
+     */
+    updateLocale(language?: string, country?: string, currency?: CurrencyCodeISO4217): void;
     toggleAnalytics(): void;
     updateIconAssetsPath(): void;
     updateLanguage(): void;
@@ -115,6 +142,7 @@ export declare class AtomicCommerceInterface extends AtomicCommerceInterface_bas
     private initSummary;
     private initUrlManager;
     private internalInitialization;
+    private isNewLocale;
     private onHashChange;
     scrollToTop(): void;
     private updateHash;

package/dist/types/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.d.ts

@@ -103,6 +103,7 @@ export declare class AtomicCommerceRecommendationInterface extends AtomicCommerc
     private initContext;
     private getBindings;
     private initLanguage;
+    private isNewLocale;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/types/components/search/atomic-pager/atomic-pager.d.ts

@@ -1,36 +1,33 @@
-import { type Pager, type PagerState, type SearchStatus, type SearchStatusState } from '@coveo/headless';
-import { LitElement } from 'lit';
-import type { Bindings } from "../atomic-search-interface/interfaces";
-import type { InitializableComponent } from "../../../decorators/types";
-declare const AtomicPager_base: typeof LitElement;
+import { Pager, PagerState, SearchStatus, SearchStatusState } from '@coveo/headless';
+import { InitializableComponent } from '../../../utils/initialization-utils';
+import { Bindings } from '../atomic-search-interface/atomic-search-interface';
 /**
  * The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.
  *
  * @part buttons - The list of the next/previous buttons and page-buttons.
  * @part page-buttons - The list of page buttons.
- * @part page-button - The individual page buttons.
+ * @part page-button - The page button.
  * @part active-page-button - The active page button.
- * @part previous-button - The previous page button.
- * @part next-button - The next page button.
- * @part previous-button-icon - The icon displayed on the "previous page" button.
- * @part next-button-icon - The icon displayed on the "next page" button.
- *
- * @event atomic/scrollToTop - Emitted when the user clicks any of the buttons rendered by the component.
+ * @part previous-button - The previous button.
+ * @part next-button - The next button.
+ * @part previous-button-icon - Icon of the previous button.
+ * @part next-button-icon - Icon of the next button.
  */
-export declare class AtomicPager extends AtomicPager_base implements InitializableComponent<Bindings> {
+export declare class AtomicPager implements InitializableComponent {
     bindings: Bindings;
-    error: Error;
-    private isAppLoaded;
     pager: Pager;
     searchStatus: SearchStatus;
     pagerState: PagerState;
     searchStatusState: SearchStatusState;
+    error: Error;
+    private isAppLoaded;
+    private scrollToTopEvent;
     /**
-     * The maximum number of page buttons to display in the pager.
+     * Specifies how many page buttons to display in the pager.
      */
     numberOfPages: number;
     /**
-     * The SVG icon to render on the "previous page" button.
+     * The SVG icon to use to display the Previous button.
      *
      * - 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.
@@ -38,7 +35,7 @@ export declare class AtomicPager extends AtomicPager_base implements Initializab
      */
     previousButtonIcon: string;
     /**
-     * The SVG icon to render on the "next page" button.
+     * The SVG icon to use to display the Next button.
      *
      * - 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.
@@ -47,13 +44,6 @@ export declare class AtomicPager extends AtomicPager_base implements Initializab
     nextButtonIcon: string;
     private radioGroupName;
     initialize(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    private validateProps;
+    render(): any;
     private focusOnFirstResultAndScrollToTop;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'atomic-pager': AtomicPager;
-    }
-}
-export {};

package/dist/types/components/search/{search-box-suggestions/atomic-search-box-query-suggestions → atomic-search-box-query-suggestions}/atomic-search-box-query-suggestions.d.ts

@@ -1,9 +1,13 @@
+import { type SearchBox } from '@coveo/headless';
+import { LitElement } from 'lit';
+import type { SearchBoxSuggestions, SearchBoxSuggestionsBindings } from "../../common/suggestions/suggestions-types";
+import type { Bindings } from "../atomic-search-interface/interfaces";
+import type { SearchBoxSuggestionsComponent } from "../../../decorators/types";
 /**
  * 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.
  */
-export declare class AtomicSearchBoxQuerySuggestions {
-    private bindings;
-    private host;
+export declare class AtomicSearchBoxQuerySuggestions extends LitElement implements SearchBoxSuggestionsComponent<Bindings> {
+    bindings: SearchBoxSuggestionsBindings<SearchBox, Bindings>;
     error: Error;
     /**
      * The SVG icon to display.
@@ -16,14 +20,19 @@ export declare class AtomicSearchBoxQuerySuggestions {
     /**
      * The maximum number of suggestions that will be displayed if the user has typed something into the input field.
      */
-    maxWithQuery?: number;
+    maxWithQuery: number;
     /**
      * The maximum number of suggestions that will be displayed initially when the input field is empty.
      */
     maxWithoutQuery?: number;
-    componentWillLoad(): void;
-    private initialize;
+    connectedCallback(): void;
+    initialize(): SearchBoxSuggestions;
     private renderItems;
     private renderItem;
-    render(): any;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'atomic-search-box-query-suggestions': AtomicSearchBoxQuerySuggestions;
+    }
 }

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

@@ -1,4 +1,4 @@
-export { AtomicPager } from './atomic-pager/atomic-pager.js';
 export { AtomicQuerySummary } from './atomic-query-summary/atomic-query-summary.js';
 export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';
+export { AtomicSearchBoxQuerySuggestions } from './atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.js';
 export { AtomicSearchLayout } from './atomic-search-layout/atomic-search-layout.js';

package/dist/types/components.d.ts

@@ -1427,6 +1427,23 @@ export namespace Components {
          */
         "start": number;
     }
+    /**
+     * The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.
+     */
+    interface AtomicPager {
+        /**
+          * The SVG icon to use to display the Next button.  - 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.
+         */
+        "nextButtonIcon": string;
+        /**
+          * Specifies how many page buttons to display in the pager.
+         */
+        "numberOfPages": number;
+        /**
+          * The SVG icon to use to display the Previous button.  - 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.
+         */
+        "previousButtonIcon": string;
+    }
     /**
      * The `atomic-popover` component displays any facet as a popover menu.
      */
@@ -2398,23 +2415,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-search-box-recent-queries` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of recent query suggestions.
      */
@@ -2922,6 +2922,10 @@ export interface AtomicIpxModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAtomicIpxModalElement;
 }
+export interface AtomicPagerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAtomicPagerElement;
+}
 export interface AtomicQuickviewModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAtomicQuickviewModalElement;
@@ -3598,6 +3602,26 @@ declare global {
         prototype: HTMLAtomicNumericRangeElement;
         new (): HTMLAtomicNumericRangeElement;
     };
+    interface HTMLAtomicPagerElementEventMap {
+        "atomic/scrollToTop": any;
+    }
+    /**
+     * The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.
+     */
+    interface HTMLAtomicPagerElement extends Components.AtomicPager, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAtomicPagerElementEventMap>(type: K, listener: (this: HTMLAtomicPagerElement, ev: AtomicPagerCustomEvent<HTMLAtomicPagerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAtomicPagerElementEventMap>(type: K, listener: (this: HTMLAtomicPagerElement, ev: AtomicPagerCustomEvent<HTMLAtomicPagerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAtomicPagerElement: {
+        prototype: HTMLAtomicPagerElement;
+        new (): HTMLAtomicPagerElement;
+    };
     /**
      * The `atomic-popover` component displays any facet as a popover menu.
      */
@@ -4153,15 +4177,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-search-box-recent-queries` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of recent query suggestions.
      */
@@ -4527,6 +4542,7 @@ declare global {
         "atomic-notifications": HTMLAtomicNotificationsElement;
         "atomic-numeric-facet": HTMLAtomicNumericFacetElement;
         "atomic-numeric-range": HTMLAtomicNumericRangeElement;
+        "atomic-pager": HTMLAtomicPagerElement;
         "atomic-popover": HTMLAtomicPopoverElement;
         "atomic-query-error": HTMLAtomicQueryErrorElement;
         "atomic-quickview": HTMLAtomicQuickviewElement;
@@ -4573,7 +4589,6 @@ declare global {
         "atomic-result-timespan": HTMLAtomicResultTimespanElement;
         "atomic-search-box": HTMLAtomicSearchBoxElement;
         "atomic-search-box-instant-results": HTMLAtomicSearchBoxInstantResultsElement;
-        "atomic-search-box-query-suggestions": HTMLAtomicSearchBoxQuerySuggestionsElement;
         "atomic-search-box-recent-queries": HTMLAtomicSearchBoxRecentQueriesElement;
         "atomic-search-interface": HTMLAtomicSearchInterfaceElement;
         "atomic-segmented-facet": HTMLAtomicSegmentedFacetElement;
@@ -5918,6 +5933,24 @@ declare namespace LocalJSX {
          */
         "start": number;
     }
+    /**
+     * The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.
+     */
+    interface AtomicPager {
+        /**
+          * The SVG icon to use to display the Next button.  - 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.
+         */
+        "nextButtonIcon"?: string;
+        /**
+          * Specifies how many page buttons to display in the pager.
+         */
+        "numberOfPages"?: number;
+        "onAtomic/scrollToTop"?: (event: AtomicPagerCustomEvent<any>) => void;
+        /**
+          * The SVG icon to use to display the Previous button.  - 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.
+         */
+        "previousButtonIcon"?: string;
+    }
     /**
      * The `atomic-popover` component displays any facet as a popover menu.
      */
@@ -6822,23 +6855,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-search-box-recent-queries` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of recent query suggestions.
      */
@@ -7380,6 +7396,7 @@ declare namespace LocalJSX {
         "atomic-notifications": AtomicNotifications;
         "atomic-numeric-facet": AtomicNumericFacet;
         "atomic-numeric-range": AtomicNumericRange;
+        "atomic-pager": AtomicPager;
         "atomic-popover": AtomicPopover;
         "atomic-query-error": AtomicQueryError;
         "atomic-quickview": AtomicQuickview;
@@ -7426,7 +7443,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-search-box-recent-queries": AtomicSearchBoxRecentQueries;
         "atomic-search-interface": AtomicSearchInterface;
         "atomic-segmented-facet": AtomicSegmentedFacet;
@@ -7645,6 +7661,10 @@ declare module "@stencil/core" {
              * The `atomic-numeric-range` component defines the range of an `atomic-numeric-facet`, and therefore must be defined within an `atomic-numeric-facet` component.
              */
             "atomic-numeric-range": LocalJSX.AtomicNumericRange & JSXBase.HTMLAttributes<HTMLAtomicNumericRangeElement>;
+            /**
+             * The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.
+             */
+            "atomic-pager": LocalJSX.AtomicPager & JSXBase.HTMLAttributes<HTMLAtomicPagerElement>;
             /**
              * The `atomic-popover` component displays any facet as a popover menu.
              */
@@ -7936,10 +7956,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-search-box-recent-queries` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of recent query suggestions.
              */