@coveo/atomic 3.34.0-pre.4c6dc408dd → 3.34.0-pre.4f2ee671ee

package/dist/types/components/common/layout/custom-render-controller.d.ts

@@ -0,0 +1,25 @@
+import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
+import type { ItemRenderingFunction } from "../item-list/item-list-common";
+import type { AnyItem } from "../item-list/unfolded-item";
+export interface CustomRenderHost extends ReactiveControllerHost {
+    shadowRoot?: ShadowRoot | null;
+}
+export interface CustomRenderOptions {
+    renderingFunction: () => ItemRenderingFunction<AnyItem> | undefined;
+    itemData: () => AnyItem | undefined;
+    rootElementRef: () => HTMLElement | undefined;
+    linkContainerRef?: () => HTMLElement | undefined;
+    onRenderComplete?: (element: HTMLElement, output: string) => void;
+}
+/**
+ * A reactive controller that manages custom rendering function execution for item components.
+ */
+export declare class CustomRenderController implements ReactiveController {
+    private options;
+    private hasExecutedRenderFunction;
+    constructor(host: CustomRenderHost & LitElement, options: CustomRenderOptions);
+    hostConnected(): void;
+    hostUpdated(): void;
+    private resetRenderState;
+    private executeRenderFunction;
+}

package/dist/types/components/common/layout/item-layout-controller.d.ts

@@ -0,0 +1,47 @@
+import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
+import type { ItemRenderingFunction } from "../item-list/item-list-common";
+import type { AnyItem } from "../item-list/unfolded-item";
+import { type ItemDisplayDensity, type ItemDisplayImageSize, type ItemDisplayLayout, ItemLayout } from './display-options';
+export interface ItemLayoutHost extends ReactiveControllerHost {
+    shadowRoot?: ShadowRoot | null;
+}
+export interface LayoutDisplayConfig {
+    display: ItemDisplayLayout;
+    density: ItemDisplayDensity;
+    imageSize: ItemDisplayImageSize;
+}
+export interface ItemLayoutOptions {
+    elementPrefix: string;
+    renderingFunction: () => ItemRenderingFunction<AnyItem> | undefined;
+    content: () => ParentNode | undefined;
+    layoutConfig: () => LayoutDisplayConfig;
+    itemClasses: () => string;
+}
+/**
+ * A reactive controller that manages layout creation and class application for item components.
+ */
+export declare class ItemLayoutController implements ReactiveController {
+    private host;
+    private options;
+    private layoutInstance;
+    constructor(host: ItemLayoutHost & LitElement, options: ItemLayoutOptions);
+    hostConnected(): void;
+    hostUpdated(): void;
+    /**
+     * Gets the current layout instance
+     */
+    getLayout(): ItemLayout | null;
+    /**
+     * Gets combined layout and extra classes
+     */
+    getCombinedClasses(additionalContent?: string): string[];
+    /**
+     * Applies layout classes to a specific element (useful for custom rendering)
+     */
+    applyLayoutClassesToElement(element: HTMLElement, additionalContent?: string): void;
+    private applyLayoutClasses;
+    private createLayout;
+    private hasCustomRenderFunction;
+    private addClassesToElements;
+    private observeAndApplyClasses;
+}

package/dist/types/components/common/layout/item-layout-sections.d.ts

@@ -0,0 +1,6 @@
+declare const allTags: Set<"atomic-product-section-actions" | "atomic-product-section-badges" | "atomic-product-section-bottom-metadata" | "atomic-product-section-children" | "atomic-product-section-description" | "atomic-product-section-emphasized" | "atomic-product-section-metadata" | "atomic-product-section-name" | "atomic-product-section-visual" | "atomic-result-section-actions" | "atomic-result-section-badges" | "atomic-result-section-bottom-metadata" | "atomic-result-section-children" | "atomic-result-section-emphasized" | "atomic-result-section-excerpt" | "atomic-result-section-title" | "atomic-result-section-title-metadata" | "atomic-result-section-visual">;
+type SetValueType<T> = T extends Set<infer U> ? U : never;
+export type ItemSectionTagName = SetValueType<typeof allTags>;
+export declare function isResultSectionNode(element: Node): boolean;
+export declare function containsSections(content: string | NodeList | HTMLCollection): boolean;
+export {};

package/dist/types/components/search/{result-template-components/atomic-result-sections → atomic-result-section-actions}/atomic-result-section-actions.d.ts

@@ -1,3 +1,5 @@
+import { LitElement } from 'lit';
+declare const AtomicResultSectionActions_base: typeof LitElement;
 /**
  * This section allows the information seeker to perform an action on an item without having to view its details.
  * For example, in Commerce you can add an item to the cart directly or add it to a wish list to view at a later time.
@@ -8,7 +10,11 @@
  * * Is a wrapping flexbox with a gap.
  * * May appear over, next to, or beneath the visual section.
  */
-export declare class AtomicResultSectionActions {
-    private host;
-    componentDidRender(): void;
+export declare class AtomicResultSectionActions extends AtomicResultSectionActions_base {
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'atomic-result-section-actions': AtomicResultSectionActions;
+    }
+}
+export {};

package/dist/types/components/search/{result-template-components/atomic-result-sections → atomic-result-section-badges}/atomic-result-section-badges.d.ts

@@ -1,3 +1,5 @@
+import { LitElement } from 'lit';
+declare const AtomicResultSectionBadges_base: typeof LitElement;
 /**
  * This section provides badges that highlight special features of the item.
  *
@@ -7,7 +9,11 @@
  * * Is a wrapping flexbox with a gap.
  * * May appear over, next to, or beneath the visual section.
  */
-export declare class AtomicResultSectionBadges {
-    private host;
-    componentDidRender(): void;
+export declare class AtomicResultSectionBadges extends AtomicResultSectionBadges_base {
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'atomic-result-section-badges': AtomicResultSectionBadges;
+    }
+}
+export {};

package/dist/types/components/search/{result-template-components/atomic-result-sections → atomic-result-section-bottom-metadata}/atomic-result-section-bottom-metadata.d.ts

@@ -1,3 +1,5 @@
+import { LitElement } from 'lit';
+declare const AtomicResultSectionBottomMetadata_base: typeof LitElement;
 /**
  * This section displays additional descriptive information about the item.
  *
@@ -8,7 +10,11 @@
  * * Has a defined CSS `color` property for text.
  * * Has a font weight.
  */
-export declare class AtomicResultSectionBottomMetadata {
-    private host;
-    componentDidRender(): void;
+export declare class AtomicResultSectionBottomMetadata extends AtomicResultSectionBottomMetadata_base {
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'atomic-result-section-bottom-metadata': AtomicResultSectionBottomMetadata;
+    }
+}
+export {};

package/dist/types/components/search/atomic-result-section-children/atomic-result-section-children.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+declare const AtomicResultSectionChildren_base: typeof LitElement;
+/**
+ * This section displays the folded results, available when using the <atomic-result-children> component.
+ *
+ * Behavior:
+ * * Shows children at the bottom of the result, indented and wrapped in a border.
+ */
+export declare class AtomicResultSectionChildren extends AtomicResultSectionChildren_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'atomic-result-section-children': AtomicResultSectionChildren;
+    }
+}
+export {};

package/dist/types/components/search/atomic-result-section-emphasized/atomic-result-section-emphasized.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+declare const AtomicResultSectionEmphasized_base: typeof LitElement;
+/**
+ * This section displays the field that's important for its search criteria.
+ * For example, in Commerce, a product's cost is often more important than the title itself.
+ *
+ * Behavior:
+ * * Has a very large font size.
+ * * Is the second closest element beneath the title section.
+ */
+export declare class AtomicResultSectionEmphasized extends AtomicResultSectionEmphasized_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'atomic-result-section-emphasized': AtomicResultSectionEmphasized;
+    }
+}
+export {};

package/dist/types/components/search/{result-template-components/atomic-result-sections → atomic-result-section-excerpt}/atomic-result-section-excerpt.d.ts

@@ -1,3 +1,5 @@
+import { LitElement } from 'lit';
+declare const AtomicResultSectionExcerpt_base: typeof LitElement;
 /**
  * This section contains an informative summary of the item's content.
  *
@@ -7,7 +9,11 @@
  * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
  * * Has a defined CSS `color` property for text.
  */
-export declare class AtomicResultSectionExcerpt {
-    private host;
-    componentDidRender(): void;
+export declare class AtomicResultSectionExcerpt extends AtomicResultSectionExcerpt_base {
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'atomic-result-section-excerpt': AtomicResultSectionExcerpt;
+    }
+}
+export {};

package/dist/types/components/search/{result-template-components/atomic-result-sections → atomic-result-section-title}/atomic-result-section-title.d.ts

@@ -1,3 +1,5 @@
+import { LitElement } from 'lit';
+declare const AtomicResultSectionTitle_base: typeof LitElement;
 /**
  * This section identifies the item by its name, and its main use is to make the result list scannable.
  * This is usually the page title.
@@ -7,7 +9,11 @@
  * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
  * * Has a defined CSS `color` property for text.
  */
-export declare class AtomicResultSectionTitle {
-    private host;
-    componentDidRender(): void;
+export declare class AtomicResultSectionTitle extends AtomicResultSectionTitle_base {
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'atomic-result-section-title': AtomicResultSectionTitle;
+    }
+}
+export {};

package/dist/types/components/search/atomic-result-section-title-metadata/atomic-result-section-title-metadata.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+declare const AtomicResultSectionTitleMetadata_base: typeof LitElement;
+/**
+ * This section surfaces some fields that are directly related to the title of the item.
+ * For example, in Commerce, this could be the item's rating, which is tied to the nature of the product itself,
+ * rather than to the product's description.
+ *
+ * Behavior:
+ * * Has a very small font size.
+ * * Is the closest element beneath the title section.
+ */
+export declare class AtomicResultSectionTitleMetadata extends AtomicResultSectionTitleMetadata_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'atomic-result-section-title-metadata': AtomicResultSectionTitleMetadata;
+    }
+}
+export {};

package/dist/types/components/search/atomic-result-section-visual/atomic-result-section-visual.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+import type { ItemDisplayImageSize } from "../../common/layout/display-options";
+declare const AtomicResultSectionVisual_base: typeof LitElement;
+/**
+ * This section provides visual information about the item.
+ * For example, in Commerce, an image is a great shorthand for a result category.
+ * An icon can quickly show the item type, or an avatar can help identify to whom it is related.
+ *
+ * Behavior:
+ * * Has a fixed size that depends on the specified image size, the layout, the density, and the screen size.
+ * ** When the image size is set to `icon`, this section stays very small.
+ * ** You should ensure that elements inside of it take the available space.
+ * * Always has a 1:1 aspect ratio.
+ */
+export declare class AtomicResultSectionVisual extends AtomicResultSectionVisual_base {
+    /**
+     * How large or small the visual section of result using this template should be.
+     */
+    imageSize?: Omit<ItemDisplayImageSize, 'icon'>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'atomic-result-section-visual': AtomicResultSectionVisual;
+    }
+}
+export {};

package/dist/types/components/search/atomic-search-box-recent-queries/atomic-search-box-recent-queries.d.ts

@@ -0,0 +1,45 @@
+import { type SearchBox } from '@coveo/headless';
+import { LitElement } from 'lit';
+import type { SearchBoxSuggestionsComponent } from "../../../decorators/types";
+import type { SearchBoxSuggestions, SearchBoxSuggestionsBindings } from '../../common/suggestions/suggestions-types';
+import type { Bindings } from '../atomic-search-interface/interfaces';
+/**
+ * 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.
+ */
+export declare class AtomicSearchBoxRecentQueries extends LitElement implements SearchBoxSuggestionsComponent<Bindings> {
+    bindings: SearchBoxSuggestionsBindings<SearchBox, Bindings>;
+    private recentQueriesList;
+    private storage;
+    error: Error;
+    /**
+     * 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 to display when the user types in the input field.
+     */
+    maxWithQuery: number;
+    /**
+     * The maximum number of suggestions to display initially, when the input field is empty.
+     */
+    maxWithoutQuery?: number;
+    connectedCallback(): void;
+    initialize(): SearchBoxSuggestions;
+    private retrieveLocalStorage;
+    private updateLocalStorage;
+    private warnUser;
+    private disableFeature;
+    private renderItems;
+    private renderClear;
+    private renderItem;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'atomic-search-box-recent-queries': AtomicSearchBoxRecentQueries;
+    }
+}

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

@@ -1,6 +1,16 @@
 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 { AtomicResultSectionActions } from './atomic-result-section-actions/atomic-result-section-actions.js';
+export { AtomicResultSectionBadges } from './atomic-result-section-badges/atomic-result-section-badges.js';
+export { AtomicResultSectionBottomMetadata } from './atomic-result-section-bottom-metadata/atomic-result-section-bottom-metadata.js';
+export { AtomicResultSectionChildren } from './atomic-result-section-children/atomic-result-section-children.js';
+export { AtomicResultSectionEmphasized } from './atomic-result-section-emphasized/atomic-result-section-emphasized.js';
+export { AtomicResultSectionExcerpt } from './atomic-result-section-excerpt/atomic-result-section-excerpt.js';
+export { AtomicResultSectionTitle } from './atomic-result-section-title/atomic-result-section-title.js';
+export { AtomicResultSectionTitleMetadata } from './atomic-result-section-title-metadata/atomic-result-section-title-metadata.js';
+export { AtomicResultSectionVisual } from './atomic-result-section-visual/atomic-result-section-visual.js';
 export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.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';