@depict-ai/ui 1.0.14 → 1.0.15

package/dist/index.d.ts

@@ -1,562 +1,542 @@
-import { Display, Elem, ColsAtSize, Node_Array } from "@depict-ai/utilishared";
-import { JSX, Accessor, Setter, Signal } from "solid-js";
-import { SearchResponse } from "@depict-ai/types/api/SearchResponse";
-import { SearchRequest, SearchFilter } from "@depict-ai/types/api/SearchRequest";
-import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
-import { SearchSuggestionsResponse, CategorySuggestion } from "@depict-ai/types/api/SearchSuggestionsResponse";
-import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
-import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-import { ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
-export const version = "1.0.14";
-export type OnNavigation = ((options: {
-    is_replace: boolean;
-    new_url: URL;
-}) => void) | "hard_navigation";
-export type ExclusiveId = {
-    categoryId: string;
-    productId?: undefined;
-    productIds?: undefined;
-} | {
-    categoryId?: undefined;
-    productId: string;
-    productIds?: undefined;
-} | {
-    categoryId?: undefined;
-    productId?: undefined;
-    productIds: string[];
-} | {
-    categoryId?: undefined;
-    productId?: undefined;
-    productIds?: undefined;
-};
-type RecsAPIWrapperOptions = {
-    type: string;
-    merchant: string;
-    market: string;
-    userId?: string;
-    sessionId?: string;
-    headers?: HeadersInit;
-} & ExclusiveId;
-/**
- * Fetches recommendations from Depict's API.
- * ## It is important that you make the correct choice out of: no id, `categoryId`, `productId` and `productIds` (choose ONE) so read the documentation carefully.
- *
- * @param merchant The name of the merchant (e.g. "acme")
- * @param market The market to fetch recs for. Depict will provide this to you. (Example: "sv" or "sv-se".)
- * @param type The type of the recommendations, e.g. `front_page`, `after_basket, `related`, etc. Ask Depict for this.
- * @param categoryId When requesting recommendations for a category page, pass the id of the category page as `categoryId`.
- * @param productId When requesting recommendations for a single product, e.g. on a product detail page, pass the id of the product as `productId`.
- * @param productIds When requesting recommendations that should take multiple products into account, i.e. the contents of the basket/cart, pass an array of product ids as `productIds`
- * @param userId Optional unique identifier of a logged in user. Should be persistent across devices and sessions.
- * @param sessionId Optional unique identifer of the current session. Only necessary when performing server side requests to Depict.
- * @param headers Optional headers to send to the Depict API. This could be authentication for example. 99% of integrations can leave this unset.
- * When no id is provided (none out of `categoryId`, `productId` and `productIds`) general recommendations will be fetched. This is for, for example, the frontpage where generally popular products get returned.
- *
- * @note If you only get recommendations when specifying the wrong id type (i.e. you only get basket recommendations if you provide a single product id while the recommendations should be based on everything in the basket) please ask Depict to re-configure the endpoint for you.
- *
- *  @example Fetching frontpage recommendations
- * ```
- * const front_page_recs = await fetchDepictRecommendations({
- *     merchant: "oscarjacobson",
- *     market: "sv-se",
- *     type: "front_page",
- *   });
- * ```
- * @example Fetching recommendations for a product page
- * ```
- *  const product_page_recs = await fetchDepictRecommendations({
- *     merchant: "stronger",
- *     market: "se",
- *     type: "product_normal",
- *     productId: "hero-sports-bra-luna",
- *   });
- * ```
- * @return This function is guaranteed to return an array of Displays. If anything fails, you will get an empty array.
- */
-export function fetchDepictRecommendations<T extends Display = Display>({ merchant, market, headers, ...fetch_recs_options }: RecsAPIWrapperOptions): Promise<T[]>;
-/**
- * Like standard_price_format except that the price and the formatting are reactive accessors
- */
-export function SolidFormatPrice(props: {
-    price_: number;
-    price_formatting_: {
-        pre_: string;
-        post_: string;
-        decimal_places_delimiter_: string;
-        thousands_delimiter_: string;
-        places_after_comma_: number | "auto";
-    };
-}): JSX.Element;
-/**
- * PLP internationalisation shared between search and category listing
- */
-type plp_shared_i18n = {
-    scroll_to_top_: string;
-    back_: string;
-    open_sorting_: string;
-    close_sorting_: string;
-    open_filters_: string;
-    close_filters_: string;
-    close_: string;
-    ok_: string;
-    filters_cleared_: string;
-    we_cleared_your_filters_: string;
-    restore_: string;
-    sorting_text_: string;
-    filter_text_: string;
-    selected_filters_title_: string;
-    filters_: string;
-    view_less_: string;
-    view_more_: string;
-    clear_all_from_filter_crumbs_: string;
-    clear_individual_filter_: string;
-    of_: string;
-    clear_all_filters_from_big_button_: string;
-    try_without_filters_: string;
-    range_filter_low_point_aria_label_: string;
-    range_filter_high_point_aria_label_: string;
-    morphing_sign_expanded_aria_label_: string;
-    morphing_sign_collapsed_aria_label_: string;
-    price_formatting_: {
-        pre_: string;
-        post_: string;
-        decimal_places_delimiter_: string;
-        thousands_delimiter_: string;
-        places_after_comma_: number | "auto";
-    };
-};
-/**
- * Search internationalisation
- */
-interface search_i18n extends plp_shared_i18n {
-    placeholder_text_: string;
-    show_n_results_: (number_of_results: HTMLElement) => Elem[];
-    no_results_text_: string;
-    search_recs_title_: string;
-    clear_filters_query_sorting_after_submit_: string;
-    modal_view_all_results_: (number_of_results: HTMLElement) => Elem[];
-    modal_discover_more_: string;
-    get_showing_results_for_: (query: HTMLElement, number_of_results: HTMLElement) => Elem[];
-    previous_searches_text_: string;
-    category_: string;
-    suggestions_: string;
-    search_submit_button_aria_label_: string;
-    search_field_field_aria_label_: string;
-    previous_searches_delete_entry_from_history_: string;
-}
-/**
- * Category internationalisation
- */
-interface category_i18n extends plp_shared_i18n {
-    show_n_products_: (number_of_results: HTMLElement) => Elem[];
-    no_products_text_: string;
-    product_: string;
-    products_: string;
-    breadcrumbs_aria_label_: string;
-    quicklinks_aria_label_: string;
-    breadcrumbs_separator_: string;
-}
-export type InstantCard<T extends Display> = (display: T, context: {
-    index: number;
-    i18n: search_i18n;
-    merchant: string;
-    market: string;
-}) => JSX.Element;
-interface DepictAPIConstructorOptions {
-    get_metadata?: () => Promise<{
-        [k: string]: string;
-    } | undefined>;
-    get_user_id?: () => string | undefined;
-    get_session_id?: () => string | undefined;
-}
-export class DepictAPI {
-    #private;
-    constructor({ get_metadata, get_user_id, get_session_id }?: DepictAPIConstructorOptions);
-    suggest(input_req: SearchSuggestionsRequest): Promise<SearchSuggestionsResponse & {
-        failed?: true;
-    }>;
-    query(input_req: SearchRequest): Promise<SearchResponse & {
-        failed?: true;
-    }>;
-    list(input_req: ProductListingRequest): Promise<ProductListingResponse & {
-        failed?: true;
-    }>;
-    get_recommended<D extends Display>(input_req: BaseSearchRequest): Promise<{
-        displays: D[];
-    }>;
-}
-/**
- * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
- */
-export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
-export type SDKGridSpacing = string | {
-    horizontal: string;
-    vertical: string;
-};
-export type WithRequired<T, K extends keyof T> = T & {
-    [P in K]-?: T[P];
-};
-export interface SDKRenderingInfo {
-    set_on_index_change: (fn: (index: number) => void) => void;
-    merchant: string;
-    market: string;
-}
-export type ProductCardTemplate<T extends Display> = (display: T | null, info?: SDKRenderingInfo) => JSX.Element | Promise<JSX.Element>;
-export function show_toast({ children, on_close_, close_after_, ...more_attributes }: {
-    children?: JSX.Element;
-    close_after_: number;
-    on_close_?: VoidFunction;
-} & JSX.HTMLAttributes<HTMLDivElement>): {
-    close_toast_: VoidFunction;
-};
-declare class SDKError extends Error {
-}
-export class ProductCardError extends SDKError {
-    constructor(templateError: Error);
-}
-/**
- * Base placeholder component used by ImagePlaceholder and TextPlaceholder
- */
-export function BasePlaceholder(props: {
-    style: JSX.CSSProperties;
-    class?: string;
-}): JSX.Element;
-/**
- * A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
- * If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
- * @property height height of the placeholder. Set to `1em` by default.
- * @property width width of the placeholder. For specific number of characters use `ch`, ex: `width="7ch"`
- * @property class extra classes to add to the placeholder
- * @property style extra styles to add to the placeholder
- */
-export function TextPlaceholder(props: {
-    style?: JSX.CSSProperties;
-    height: string;
-    width: string;
-    class?: string;
-}): JSX.Element;
-/**
- * Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
- * @returns A cleanup function to manually re-enable scrolling.
- */
-export function disable_scrolling(): () => void;
-export const CategoryTitle: ({ category_title_, product_count_, }: {
-    category_title_: Accessor<string | undefined>;
-    product_count_: JSX.Element;
-}) => JSX.Element;
-/**
- * Embeds number of products between sort and filter buttons on mobile if possible, only supported for category pages right now. Pass it as category_title_ to Category.
- * Note: this will add an invisible element as first element in depict-search-page which will confuse the flex-gap SCSS mixin a bit so you'll get some extra spacing at the beginning of the search page
- * If you see “ResizeObserver loop limit exceeded”, this is probably doing it. More context here: https://depictaiworkspace.slack.com/archives/C02KVDZ8YHZ/p1667315647758829
- */
-export const embedded_num_products: ({ make_product_count_, set_observed_results_filters_elements_, is_slim_, sort_and_filter_element_, extra_sort_and_filter_args_, }: {
-    make_product_count_: () => JSX.Element;
-    set_observed_results_filters_elements_: Setter<JSX.Element>;
-    sort_and_filter_element_: Accessor<HTMLDivElement | undefined>;
-    is_slim_: Accessor<boolean>;
-    extra_sort_and_filter_args_: {
-        get_extra_sorting_button_?: ((extra_button: JSX.Element) => unknown) | undefined;
-        get_extra_filters_button_?: ((extra_button: JSX.Element) => unknown) | undefined;
-        sort_button_width_?: Accessor<number | undefined> | undefined;
-        filter_button_width_?: Accessor<number | undefined> | undefined;
-    };
-}) => {
-    only_show_filters_opener_: Accessor<boolean>;
-    middle_elements_: Accessor<JSX.Element>;
-    on_filters_constructed_: () => void;
-};
-export type SDKColsAtSize = [number, number?][];
-/**
- * Transform SDK ColsAtSize into valid Layout ColsAtSize
- * @param cols_at_size [nbCol, maxWidth]
- * @returns
- */
-export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
-type DepictCategoryConstructorOptions = {
-    market: string;
-    merchant: string;
-    localization: category_i18n;
-    on_navigation?: OnNavigation;
-    api?: DepictAPI;
-};
-export class DepictCategory {
-    #private;
-    get localization(): category_i18n;
-    set localization(locale_obj: category_i18n);
-    get category_id(): string;
-    set category_id(id: string);
-    get merchant(): string;
-    set merchant(merchant: string);
-    get market(): string;
-    set market(market: string);
-    get on_navigation(): OnNavigation;
-    set on_navigation(new_function: OnNavigation);
-    constructor({ api, on_navigation, ...props_on_class }: DepictCategoryConstructorOptions);
-}
-export function CategoryPage<T extends Display>({ depict_category, grid_spacing, cols_at_size, product_card_template, show_breadcrumbs, show_quicklinks, category_title, }: {
-    depict_category: DepictCategory;
-    grid_spacing: SDKGridSpacing;
-    cols_at_size: SDKColsAtSize;
-    product_card_template: ProductCardTemplate<T>;
-    show_quicklinks?: boolean;
-    show_breadcrumbs?: boolean;
-    category_title: typeof CategoryTitle | typeof embedded_num_products;
-}): import("@depict-ai/utilishared").Node_Array;
-export function BreadCrumbs({ depict_category }: {
-    depict_category: DepictCategory;
-}): HTMLElement;
-export function QuickLinks({ depict_category }: {
-    depict_category: DepictCategory;
-}): HTMLElement;
-export function get_categories(tenant: string, market: string): Promise<string[]>;
-type ImagePlaceholderBaseOptions = {
-    style?: JSX.CSSProperties;
-    class?: string;
-};
-type ImagePlaceholderBlockOptions = {
-    width: string;
-    height: string;
-};
-type ImagePlaceholderImageOptions = {
-    aspectRatio: number;
-};
-/**
- * A placeholder that can be used instead of an image or other block of content while it's loading.
- * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
- * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
- * @property width If width and height is set, the defined width and height will be used.
- * @property height If width and height is set, the defined width and height will be used.
- * @property class extra classes to add to the placeholder
- * @property style extra styles to add to the placeholder
- */
-export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
-export function DefaultInstantCardPlaceholder(): HTMLDivElement;
-/**
- * Useful for aligning the search modal to an element, like an existing input field
- * @param modal_body_style a signal containing the style properties that will be applied to the modal body. You provide it to open_modal_ as  `style_props_` when using SearchModal
- * @param input_field the element to align to.
- * @param width_transformer A function that gets to change the width value before it is being applied
- * @param includeScroll Should the aligner offset with scrolling? Useful to set to false when using position: fixed
- * @param one_axies_only Usually align_field will align on top and left positioning and set the width. With one_axies_only it can be chosen to apart from setting width only align on top/left axis
- * @returns a function that can be called any time to re-run the alignment routine in case that the elements have gone out of alignment
- */
-export function align_field(modal_body_style: Signal<JSX.CSSProperties>, input_field: HTMLElement, width_transformer?: (arg0: number) => number, includeScroll?: boolean, one_axies_only?: "top" | "left"): () => void;
-interface Styles {
-    [selector: string]: JSX.CSSProperties;
-}
-export const styles_to_valid_css_string: (styles: Styles) => string;
-/** A function that renders category suggestion cards. Set to false to disable category suggestions. */
-export type RenderCategorySuggestion = (category_suggestion: Accessor<CategorySuggestion>, index: number) => JSX.Element;
-/**
- * Connects the height of the search field to the height of the aligner.
- * @param aligner
- * @returns
- */
-export function connect_search_field_height_to_aligner_height(aligner: HTMLElement): {
-    cleanup: () => void;
-};
-type ConstructorOptions<T extends Display> = {
-    search_query_url_param_name?: string;
-    market: string;
-    merchant: string;
-    localization: search_i18n;
-    on_navigation?: OnNavigation;
-    url_transformer?: (url_object: URL) => unknown;
-    enable_category_suggestions?: boolean;
-    disable_scrolling_during_modal?: boolean;
-    api?: DepictAPI;
-    bottom_distance_under_modal?: Accessor<number | undefined>;
-    render_instant_card?: InstantCard<T>;
-};
-export type OpenModalArguments = [
-    options_for_modal?: {
-        style_props_?: Signal<JSX.CSSProperties>;
-        closing_animation_?: () => Promise<any>;
-        class_list_?: Accessor<Record<string, boolean>>;
-        selected_text_range_?: readonly [number | null, number | null] | [number | null, number | null];
-        dont_sync_search_field_value_except_on_submit_?: boolean;
-    },
-    on_dispose?: VoidFunction
-];
-export const get_search_query_updating_blocked_signal: (depict_search: DepictSearch<any>) => Signal<boolean> | undefined;
-export class DepictSearch<T extends Display> {
-    #private;
-    constructor({ search_query_url_param_name: search_query_url_param_name_, url_transformer, on_navigation, enable_category_suggestions, disable_scrolling_during_modal, api, bottom_distance_under_modal, render_instant_card, ...props_on_class }: ConstructorOptions<T>);
-    get on_navigation(): OnNavigation;
-    set on_navigation(new_function: OnNavigation);
-    get localization(): search_i18n;
-    set localization(locale_obj: search_i18n);
-    get modal_open(): OpenModalArguments | boolean;
-    set modal_open(new_state: OpenModalArguments | boolean);
-    get merchant(): string;
-    set merchant(tenant: string);
-    get market(): string;
-    set market(market: string);
-    fetchSearchResults(query: string, filters?: SearchFilter[], maxResults?: number): Promise<T[]>;
-}
-export function SearchPage<T extends Display>({ depict_search, include_input_field, grid_spacing, cols_at_size, product_card_template, extra_depict_options, }: {
-    depict_search: DepictSearch<T>;
-    include_input_field?: boolean | {
-        on_open_?: VoidFunction;
-        on_close_?: VoidFunction;
-    };
-    grid_spacing: SDKGridSpacing;
-    cols_at_size: SDKColsAtSize;
-    product_card_template: ProductCardTemplate<T>;
-    extra_depict_options?: {
-        recommendations_cols_at_size?: SDKColsAtSize;
-    };
-}): import("@depict-ai/utilishared").Node_Array;
-interface SearchFieldParams {
-    depict_search: DepictSearch<any>;
-    modal_dispose_handler?: VoidFunction;
-    click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
-    aligner_ref?: HTMLElement | null;
-}
-export function SearchField({ depict_search, modal_dispose_handler, click_handler, aligner_ref, }: SearchFieldParams): import("@depict-ai/utilishared").Node_Array;
-export type BaseProviderConfig = {
-    /**
-     * The merchant to use for the search.
-     * @example "YOUR_MERCHANT", "stronger"
-     */
-    merchant: string;
-    /**
-     * The market to use for the search.
-     * @example "YOUR_MARKET", "no", "en-de"
-     */
-    market: string;
-    /**
-     * Optional unique identifier of a logged in user. Should be persistent across devices and sessions.
-     */
-    userId?: string;
-    /**
-     * Optional unique identifer of the current session. Only necessary when performing server side requests to Depict.
-     */
-    sessionId?: string;
-    /**
-     * Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
-     */
-    metaData?: Record<string, string>;
-};
-export type BaseSearchProviderConfig = {
-    /**
-     * The path to the search page.
-     * @example "/search", "/sok"
-     */
-    searchPagePath: string;
-    /**
-     * The name of the url parameter that will be used for the search query.
-     * @example "q", "search_query", "query"
-     * @default "query"
-     */
-    urlParamName?: string;
-    /**
-     * Whether to enable category suggestions in the search modal and search page.
-     * @default false
-     */
-    enableCategorySuggestions?: boolean;
-};
-export interface BaseProductListingConfig {
-    /**
-     * How many columns to show at each media size.
-     * @default
-     * [[2, 901], [3, 1024], [4]]
-     * @example
-     * [[2, 901], [3, 1024], [4]]
-     * means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any viewport size.
-     */
-    columnsAtSize?: SDKColsAtSize;
-    /**
-     * The spacing between products.
-     * @default "2%"
-     * @example
-     * "2%", "10px", "1rem", {horizontal: "1%", vertical: "5px"}
-     */
-    gridSpacing?: SDKGridSpacing;
-}
-export interface BaseSearchPageConfig extends BaseProductListingConfig {
-    /**
-     * Whether to show the search input field in the search page.
-     * @default true
-     */
-    includeInputField?: boolean;
-}
-export interface BaseCategoryPageConfig extends BaseProductListingConfig {
-    /**
-     * Whether to show the breadcrumbs in the category page.
-     * @default true
-     */
-    showBreadcrumbs?: boolean;
-    /**
-     * Whether to show the quicklinks in the category page.
-     * @default true
-     */
-    showQuicklinks?: boolean;
-}
-type CenteredLocation = {
-    location?: "centered";
-};
-type AlignedLocation = {
-    location: "aligned";
-    element: HTMLElement;
-};
-/**
- * How the modal should be opened.
- */
-type ModalLocation = AlignedLocation | CenteredLocation;
-type OpenModalParams<T extends Display> = ModalLocation & {
-    search: DepictSearch<T>;
-    /**
-     * If true, the search field in the modal opened will be empty and de-coupled from the other SearchFields.
-     */
-    makesNewSearch?: boolean;
-};
-/**
- * Open the modal with support for alignment.
- * @returns {void}
- */
-export const open_modal_with_alignment: <T extends Display>(openModalParams: OpenModalParams<T>) => void;
-export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
-export interface PageReplacer {
-    readonly render_: () => Node_Array;
-    readonly is_page_: (url: URL) => boolean;
-    readonly title_?: string;
-    readonly selector_: string;
-    readonly append_instead_of_replace_?: boolean;
-}
-/**
- * PageReplacer is a class that can be used to layer an SPA (single page application) on top of a non-SPA, for certain pages.
- * An example use case is that we want to make it absolutely instant to go to a search page or to go from one search query to the next (so basically one can navigate to pages without reloading the page).
- * PageReplacer works by, when something has changed the URL (using history.pushState) to the page where it should take effect, replacing a specified element with another element.
- * The element that is replaced is specified by a CSS selector and usually represents the element containing "main content" of the page. The "replacement" works by setting `display: none` on the original page and then adding the "new page"-element after it in the DOM:
- * @param render_ A function that returns the elements which replace the "page" when is_page_ returns true.
- * @param title_ The title that document.title should be changed to when is_page_ returns true (the replacement page is open).
- * @param is_page_ A function that returns true if the provided URL is the page where the replacement should take effect.
- * @param selector_ A CSS selector that selects the element that should be replaced.
- * @param append_instead_of_replace_ If true, the replacement element will be appended to the element that is found by selector_ instead of replacing it. This is useful if one doesn't actually want it to replace the element because one has other logic.
- */
-export class PageReplacer extends EventTarget {
-    #private;
-    /**
-     * Returns if the "replacement page" is currently open
-     */
-    get open_(): boolean;
-    /**
-     * Stops listening to URL changes and closes the page (if it is currently open)
-     */
-    destroy_(): void;
-    constructor({ is_spa_, ...options }: Omit<PageReplacer, "destroy_" | "addEventListener" | "removeEventListener" | "dispatchEvent" | "open_"> & {
-        is_spa_?: boolean;
-    });
-}
-/**
- * makes so that links to the previous page close the search instead of closing the search and reloading the page (to be used with non-spas)
- */
-export function setup_fast_leave(pr: PageReplacer): void;
-export const defaultColsAtSize: SDKColsAtSize;
-export const defaultGridSpacing = "2%";
-export const defaultCategoryTitlePlugin: ({ category_title_, product_count_, }: {
-    category_title_: import("solid-js").Accessor<string | undefined>;
-    product_count_: import("solid-js").JSX.Element;
-}) => import("solid-js").JSX.Element;
-export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";
+import { Display, Elem, ColsAtSize, Node_Array } from "@depict-ai/utilishared";
+import { JSX, Accessor, Setter, Signal } from "solid-js";
+import { SearchResponse } from "@depict-ai/types/api/SearchResponse";
+import { SearchRequest, SearchFilter } from "@depict-ai/types/api/SearchRequest";
+import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
+import { SearchSuggestionsResponse, CategorySuggestion } from "@depict-ai/types/api/SearchSuggestionsResponse";
+import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
+import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
+import { ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
+export const version = "1.0.15";
+export type OnNavigation = ((options: {
+    is_replace: boolean;
+    new_url: URL;
+}) => void) | "hard_navigation";
+export type ExclusiveId = {
+    categoryId: string;
+    productId?: undefined;
+    productIds?: undefined;
+} | {
+    categoryId?: undefined;
+    productId: string;
+    productIds?: undefined;
+} | {
+    categoryId?: undefined;
+    productId?: undefined;
+    productIds: string[];
+} | {
+    categoryId?: undefined;
+    productId?: undefined;
+    productIds?: undefined;
+};
+type RecsAPIWrapperOptions = {
+    type: string;
+    merchant: string;
+    market: string;
+    userId?: string;
+    sessionId?: string;
+    headers?: HeadersInit;
+} & ExclusiveId;
+/**
+ * Fetches recommendations from Depict's API.
+ * ## It is important that you make the correct choice out of: no id, `categoryId`, `productId` and `productIds` (choose ONE) so read the documentation carefully.
+ *
+ * @param merchant The name of the merchant (e.g. "acme")
+ * @param market The market to fetch recs for. Depict will provide this to you. (Example: "sv" or "sv-se".)
+ * @param type The type of the recommendations, e.g. `front_page`, `after_basket, `related`, etc. Ask Depict for this.
+ * @param categoryId When requesting recommendations for a category page, pass the id of the category page as `categoryId`.
+ * @param productId When requesting recommendations for a single product, e.g. on a product detail page, pass the id of the product as `productId`.
+ * @param productIds When requesting recommendations that should take multiple products into account, i.e. the contents of the basket/cart, pass an array of product ids as `productIds`
+ * @param userId Optional unique identifier of a logged in user. Should be persistent across devices and sessions.
+ * @param sessionId Optional unique identifer of the current session. Only necessary when performing server side requests to Depict.
+ * @param headers Optional headers to send to the Depict API. This could be authentication for example. 99% of integrations can leave this unset.
+ * When no id is provided (none out of `categoryId`, `productId` and `productIds`) general recommendations will be fetched. This is for, for example, the frontpage where generally popular products get returned.
+ *
+ * @note If you only get recommendations when specifying the wrong id type (i.e. you only get basket recommendations if you provide a single product id while the recommendations should be based on everything in the basket) please ask Depict to re-configure the endpoint for you.
+ *
+ *  @example Fetching frontpage recommendations
+ * ```
+ * const front_page_recs = await fetchDepictRecommendations({
+ *     merchant: "oscarjacobson",
+ *     market: "sv-se",
+ *     type: "front_page",
+ *   });
+ * ```
+ * @example Fetching recommendations for a product page
+ * ```
+ *  const product_page_recs = await fetchDepictRecommendations({
+ *     merchant: "stronger",
+ *     market: "se",
+ *     type: "product_normal",
+ *     productId: "hero-sports-bra-luna",
+ *   });
+ * ```
+ * @return This function is guaranteed to return an array of Displays. If anything fails, you will get an empty array.
+ */
+export function fetchDepictRecommendations<T extends Display = Display>({ merchant, market, headers, ...fetch_recs_options }: RecsAPIWrapperOptions): Promise<T[]>;
+/**
+ * Like standard_price_format except that the price and the formatting are reactive accessors
+ */
+export function SolidFormatPrice(props: {
+    price_: number;
+    price_formatting_: {
+        pre_: string;
+        post_: string;
+        decimal_places_delimiter_: string;
+        thousands_delimiter_: string;
+        places_after_comma_: number | "auto";
+    };
+}): JSX.Element;
+/**
+ * PLP internationalisation shared between search and category listing
+ */
+type plp_shared_i18n = {
+    scroll_to_top_: string;
+    back_: string;
+    open_sorting_: string;
+    close_sorting_: string;
+    open_filters_: string;
+    close_filters_: string;
+    close_: string;
+    ok_: string;
+    filters_cleared_: string;
+    we_cleared_your_filters_: string;
+    restore_: string;
+    sorting_text_: string;
+    filter_text_: string;
+    selected_filters_title_: string;
+    filters_: string;
+    view_less_: string;
+    view_more_: string;
+    clear_all_from_filter_crumbs_: string;
+    clear_individual_filter_: string;
+    of_: string;
+    clear_all_filters_from_big_button_: string;
+    try_without_filters_: string;
+    range_filter_low_point_aria_label_: string;
+    range_filter_high_point_aria_label_: string;
+    morphing_sign_expanded_aria_label_: string;
+    morphing_sign_collapsed_aria_label_: string;
+    price_formatting_: {
+        pre_: string;
+        post_: string;
+        decimal_places_delimiter_: string;
+        thousands_delimiter_: string;
+        places_after_comma_: number | "auto";
+    };
+};
+/**
+ * Search internationalisation
+ */
+interface search_i18n extends plp_shared_i18n {
+    placeholder_text_: string;
+    show_n_results_: (number_of_results: HTMLElement) => Elem[];
+    no_results_text_: string;
+    search_recs_title_: string;
+    clear_filters_query_sorting_after_submit_: string;
+    modal_view_all_results_: (number_of_results: HTMLElement) => Elem[];
+    modal_discover_more_: string;
+    get_showing_results_for_: (query: HTMLElement, number_of_results: HTMLElement) => Elem[];
+    previous_searches_text_: string;
+    category_: string;
+    suggestions_: string;
+    search_submit_button_aria_label_: string;
+    search_field_field_aria_label_: string;
+    previous_searches_delete_entry_from_history_: string;
+}
+/**
+ * Category internationalisation
+ */
+interface category_i18n extends plp_shared_i18n {
+    show_n_products_: (number_of_results: HTMLElement) => Elem[];
+    no_products_text_: string;
+    product_: string;
+    products_: string;
+    breadcrumbs_aria_label_: string;
+    quicklinks_aria_label_: string;
+    breadcrumbs_separator_: string;
+}
+export type InstantCard<T extends Display> = (display: T, context: {
+    index: number;
+    i18n: search_i18n;
+    merchant: string;
+    market: string;
+}) => JSX.Element;
+interface DepictAPIConstructorOptions {
+    get_metadata?: () => Promise<{
+        [k: string]: string;
+    } | undefined>;
+    get_user_id?: () => string | undefined;
+    get_session_id?: () => string | undefined;
+}
+export class DepictAPI {
+    #private;
+    constructor({ get_metadata, get_user_id, get_session_id }?: DepictAPIConstructorOptions);
+    suggest(input_req: SearchSuggestionsRequest): Promise<SearchSuggestionsResponse & {
+        failed?: true;
+    }>;
+    query(input_req: SearchRequest): Promise<SearchResponse & {
+        failed?: true;
+    }>;
+    list(input_req: ProductListingRequest): Promise<ProductListingResponse & {
+        failed?: true;
+    }>;
+    get_recommended<D extends Display>(input_req: BaseSearchRequest): Promise<{
+        displays: D[];
+    }>;
+}
+/**
+ * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
+ */
+export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
+export type SDKGridSpacing = string | {
+    horizontal: string;
+    vertical: string;
+};
+export type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+export interface SDKRenderingInfo {
+    set_on_index_change: (fn: (index: number) => void) => void;
+    merchant: string;
+    market: string;
+}
+export type ProductCardTemplate<T extends Display> = (display: T | null, info?: SDKRenderingInfo) => JSX.Element | Promise<JSX.Element>;
+export function show_toast({ children, on_close_, close_after_, ...more_attributes }: {
+    children?: JSX.Element;
+    close_after_: number;
+    on_close_?: VoidFunction;
+} & JSX.HTMLAttributes<HTMLDivElement>): {
+    close_toast_: VoidFunction;
+};
+declare class SDKError extends Error {
+}
+export class ProductCardError extends SDKError {
+    constructor(templateError: Error);
+}
+/**
+ * Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
+ * @returns A cleanup function to manually re-enable scrolling.
+ */
+export function disable_scrolling(): () => void;
+export const CategoryTitle: ({ category_title_, product_count_, }: {
+    category_title_: Accessor<string | undefined>;
+    product_count_: JSX.Element;
+}) => HTMLElement;
+/**
+ * Embeds number of products between sort and filter buttons on mobile if possible, only supported for category pages right now. Pass it as category_title_ to Category.
+ * Note: this will add an invisible element as first element in depict-search-page which will confuse the flex-gap SCSS mixin a bit so you'll get some extra spacing at the beginning of the search page
+ * If you see “ResizeObserver loop limit exceeded”, this is probably doing it. More context here: https://depictaiworkspace.slack.com/archives/C02KVDZ8YHZ/p1667315647758829
+ */
+export const embedded_num_products: ({ make_product_count_, set_observed_results_filters_elements_, is_slim_, sort_and_filter_element_, extra_sort_and_filter_args_, }: {
+    make_product_count_: () => JSX.Element;
+    set_observed_results_filters_elements_: Setter<JSX.Element>;
+    sort_and_filter_element_: Accessor<HTMLDivElement | undefined>;
+    is_slim_: Accessor<boolean>;
+    extra_sort_and_filter_args_: {
+        get_extra_sorting_button_?: ((extra_button: JSX.Element) => unknown) | undefined;
+        get_extra_filters_button_?: ((extra_button: JSX.Element) => unknown) | undefined;
+        sort_button_width_?: Accessor<number | undefined> | undefined;
+        filter_button_width_?: Accessor<number | undefined> | undefined;
+    };
+}) => {
+    only_show_filters_opener_: Accessor<boolean>;
+    middle_elements_: Accessor<JSX.Element>;
+    on_filters_constructed_: () => void;
+};
+export type SDKColsAtSize = [number, number?][];
+/**
+ * Transform SDK ColsAtSize into valid Layout ColsAtSize
+ * @param cols_at_size [nbCol, maxWidth]
+ * @returns
+ */
+export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
+type DepictCategoryConstructorOptions = {
+    market: string;
+    merchant: string;
+    localization: category_i18n;
+    on_navigation?: OnNavigation;
+    api?: DepictAPI;
+};
+export class DepictCategory {
+    #private;
+    get localization(): category_i18n;
+    set localization(locale_obj: category_i18n);
+    get category_id(): string;
+    set category_id(id: string);
+    get merchant(): string;
+    set merchant(merchant: string);
+    get market(): string;
+    set market(market: string);
+    get on_navigation(): OnNavigation;
+    set on_navigation(new_function: OnNavigation);
+    constructor({ api, on_navigation, ...props_on_class }: DepictCategoryConstructorOptions);
+}
+export function CategoryPage<T extends Display>({ depict_category, grid_spacing, cols_at_size, product_card_template, show_breadcrumbs, show_quicklinks, category_title, }: {
+    depict_category: DepictCategory;
+    grid_spacing: SDKGridSpacing;
+    cols_at_size: SDKColsAtSize;
+    product_card_template: ProductCardTemplate<T>;
+    show_quicklinks?: boolean;
+    show_breadcrumbs?: boolean;
+    category_title: typeof CategoryTitle | typeof embedded_num_products;
+}): import("@depict-ai/utilishared").Node_Array;
+export function BreadCrumbs({ depict_category }: {
+    depict_category: DepictCategory;
+}): HTMLElement;
+export function QuickLinks({ depict_category }: {
+    depict_category: DepictCategory;
+}): HTMLElement;
+export function get_categories(tenant: string, market: string): Promise<string[]>;
+export function DefaultInstantCardPlaceholder(): HTMLDivElement;
+/**
+ * Useful for aligning the search modal to an element, like an existing input field
+ * @param modal_body_style a signal containing the style properties that will be applied to the modal body. You provide it to open_modal_ as  `style_props_` when using SearchModal
+ * @param input_field the element to align to.
+ * @param width_transformer A function that gets to change the width value before it is being applied
+ * @param includeScroll Should the aligner offset with scrolling? Useful to set to false when using position: fixed
+ * @param one_axies_only Usually align_field will align on top and left positioning and set the width. With one_axies_only it can be chosen to apart from setting width only align on top/left axis
+ * @returns a function that can be called any time to re-run the alignment routine in case that the elements have gone out of alignment
+ */
+export function align_field(modal_body_style: Signal<JSX.CSSProperties>, input_field: HTMLElement, width_transformer?: (arg0: number) => number, includeScroll?: boolean, one_axies_only?: "top" | "left"): () => void;
+interface Styles {
+    [selector: string]: JSX.CSSProperties;
+}
+export const styles_to_valid_css_string: (styles: Styles) => string;
+/** A function that renders category suggestion cards. Set to false to disable category suggestions. */
+export type RenderCategorySuggestion = (category_suggestion: Accessor<CategorySuggestion>, index: number) => JSX.Element;
+/**
+ * Connects the height of the search field to the height of the aligner.
+ * @param aligner
+ * @returns
+ */
+export function connect_search_field_height_to_aligner_height(aligner: HTMLElement): {
+    cleanup: () => void;
+};
+type ConstructorOptions<T extends Display> = {
+    search_query_url_param_name?: string;
+    market: string;
+    merchant: string;
+    localization: search_i18n;
+    on_navigation?: OnNavigation;
+    url_transformer?: (url_object: URL) => unknown;
+    enable_category_suggestions?: boolean;
+    disable_scrolling_during_modal?: boolean;
+    api?: DepictAPI;
+    bottom_distance_under_modal?: Accessor<number | undefined>;
+    render_instant_card?: InstantCard<T>;
+};
+export type OpenModalArguments = [
+    options_for_modal?: {
+        style_props_?: Signal<JSX.CSSProperties>;
+        closing_animation_?: () => Promise<any>;
+        class_list_?: Accessor<Record<string, boolean>>;
+        selected_text_range_?: readonly [number | null, number | null] | [number | null, number | null];
+        dont_sync_search_field_value_except_on_submit_?: boolean;
+    },
+    on_dispose?: VoidFunction
+];
+export const get_search_query_updating_blocked_signal: (depict_search: DepictSearch<any>) => Signal<boolean> | undefined;
+export class DepictSearch<T extends Display> {
+    #private;
+    constructor({ search_query_url_param_name: search_query_url_param_name_, url_transformer, on_navigation, enable_category_suggestions, disable_scrolling_during_modal, api, bottom_distance_under_modal, render_instant_card, ...props_on_class }: ConstructorOptions<T>);
+    get on_navigation(): OnNavigation;
+    set on_navigation(new_function: OnNavigation);
+    get localization(): search_i18n;
+    set localization(locale_obj: search_i18n);
+    get modal_open(): OpenModalArguments | boolean;
+    set modal_open(new_state: OpenModalArguments | boolean);
+    get merchant(): string;
+    set merchant(tenant: string);
+    get market(): string;
+    set market(market: string);
+    fetchSearchResults(query: string, filters?: SearchFilter[], maxResults?: number): Promise<T[]>;
+}
+export function SearchPage<T extends Display>({ depict_search, include_input_field, grid_spacing, cols_at_size, product_card_template, extra_depict_options, }: {
+    depict_search: DepictSearch<T>;
+    include_input_field?: boolean | {
+        on_open_?: VoidFunction;
+        on_close_?: VoidFunction;
+    };
+    grid_spacing: SDKGridSpacing;
+    cols_at_size: SDKColsAtSize;
+    product_card_template: ProductCardTemplate<T>;
+    extra_depict_options?: {
+        recommendations_cols_at_size?: SDKColsAtSize;
+    };
+}): import("@depict-ai/utilishared").Node_Array;
+interface SearchFieldParams {
+    depict_search: DepictSearch<any>;
+    modal_dispose_handler?: VoidFunction;
+    click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
+    aligner_ref?: HTMLElement | null;
+}
+export function SearchField({ depict_search, modal_dispose_handler, click_handler, aligner_ref, }: SearchFieldParams): import("@depict-ai/utilishared").Node_Array;
+export type BaseProviderConfig = {
+    /**
+     * The merchant to use for the search.
+     * @example "YOUR_MERCHANT", "stronger"
+     */
+    merchant: string;
+    /**
+     * The market to use for the search.
+     * @example "YOUR_MARKET", "no", "en-de"
+     */
+    market: string;
+    /**
+     * Optional unique identifier of a logged in user. Should be persistent across devices and sessions.
+     */
+    userId?: string;
+    /**
+     * Optional unique identifer of the current session. Only necessary when performing server side requests to Depict.
+     */
+    sessionId?: string;
+    /**
+     * Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
+     */
+    metaData?: Record<string, string>;
+};
+export type BaseSearchProviderConfig = {
+    /**
+     * The path to the search page.
+     * @example "/search", "/sok"
+     */
+    searchPagePath: string;
+    /**
+     * The name of the url parameter that will be used for the search query.
+     * @example "q", "search_query", "query"
+     * @default "query"
+     */
+    urlParamName?: string;
+    /**
+     * Whether to enable category suggestions in the search modal and search page.
+     * @default false
+     */
+    enableCategorySuggestions?: boolean;
+};
+export interface BaseProductListingConfig {
+    /**
+     * How many columns to show at each media size.
+     * @default
+     * [[2, 901], [3, 1024], [4]]
+     * @example
+     * [[2, 901], [3, 1024], [4]]
+     * means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any viewport size.
+     */
+    columnsAtSize?: SDKColsAtSize;
+    /**
+     * The spacing between products.
+     * @default "2%"
+     * @example
+     * "2%", "10px", "1rem", {horizontal: "1%", vertical: "5px"}
+     */
+    gridSpacing?: SDKGridSpacing;
+}
+export interface BaseSearchPageConfig extends BaseProductListingConfig {
+    /**
+     * Whether to show the search input field in the search page.
+     * @default true
+     */
+    includeInputField?: boolean;
+}
+export interface BaseCategoryPageConfig extends BaseProductListingConfig {
+    /**
+     * Whether to show the breadcrumbs in the category page.
+     * @default true
+     */
+    showBreadcrumbs?: boolean;
+    /**
+     * Whether to show the quicklinks in the category page.
+     * @default true
+     */
+    showQuicklinks?: boolean;
+}
+/**
+ * Props for the TextPlaceholder component.
+ */
+export interface TextPlaceholderProps {
+    /**
+     * The height of the text, including a unit.
+     * @example "1em"
+     */
+    height: string;
+    /**
+     * The width of the text.
+     * @example "60px", "10em"
+     */
+    width: string;
+}
+/**
+ * Props for the ImagePlaceholder component.
+ */
+export interface ImagePlaceholderProps {
+    /** The aspect ratio of the image that will be displayed. */
+    aspectRatio: number;
+}
+type CenteredLocation = {
+    location?: "centered";
+};
+type AlignedLocation = {
+    location: "aligned";
+    element: HTMLElement;
+};
+/**
+ * How the modal should be opened.
+ */
+type ModalLocation = AlignedLocation | CenteredLocation;
+type OpenModalParams<T extends Display> = ModalLocation & {
+    search: DepictSearch<T>;
+    /**
+     * If true, the search field in the modal opened will be empty and de-coupled from the other SearchFields.
+     */
+    makesNewSearch?: boolean;
+};
+/**
+ * Open the modal with support for alignment.
+ * @returns {void}
+ */
+export const open_modal_with_alignment: <T extends Display>(openModalParams: OpenModalParams<T>) => void;
+export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
+export interface PageReplacer {
+    readonly render_: () => Node_Array;
+    readonly is_page_: (url: URL) => boolean;
+    readonly title_?: string;
+    readonly selector_: string;
+    readonly append_instead_of_replace_?: boolean;
+}
+/**
+ * PageReplacer is a class that can be used to layer an SPA (single page application) on top of a non-SPA, for certain pages.
+ * An example use case is that we want to make it absolutely instant to go to a search page or to go from one search query to the next (so basically one can navigate to pages without reloading the page).
+ * PageReplacer works by, when something has changed the URL (using history.pushState) to the page where it should take effect, replacing a specified element with another element.
+ * The element that is replaced is specified by a CSS selector and usually represents the element containing "main content" of the page. The "replacement" works by setting `display: none` on the original page and then adding the "new page"-element after it in the DOM:
+ * @param render_ A function that returns the elements which replace the "page" when is_page_ returns true.
+ * @param title_ The title that document.title should be changed to when is_page_ returns true (the replacement page is open).
+ * @param is_page_ A function that returns true if the provided URL is the page where the replacement should take effect.
+ * @param selector_ A CSS selector that selects the element that should be replaced.
+ * @param append_instead_of_replace_ If true, the replacement element will be appended to the element that is found by selector_ instead of replacing it. This is useful if one doesn't actually want it to replace the element because one has other logic.
+ */
+export class PageReplacer extends EventTarget {
+    #private;
+    /**
+     * Returns if the "replacement page" is currently open
+     */
+    get open_(): boolean;
+    /**
+     * Stops listening to URL changes and closes the page (if it is currently open)
+     */
+    destroy_(): void;
+    constructor({ is_spa_, ...options }: Omit<PageReplacer, "destroy_" | "addEventListener" | "removeEventListener" | "dispatchEvent" | "open_"> & {
+        is_spa_?: boolean;
+    });
+}
+/**
+ * makes so that links to the previous page close the search instead of closing the search and reloading the page (to be used with non-spas)
+ */
+export function setup_fast_leave(pr: PageReplacer): void;
+export const defaultColsAtSize: SDKColsAtSize;
+export const defaultGridSpacing = "2%";
+export const defaultCategoryTitlePlugin: ({ category_title_, product_count_, }: {
+    category_title_: import("solid-js").Accessor<string | undefined>;
+    product_count_: import("solid-js").JSX.Element;
+}) => HTMLElement;
+export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";