@searchcraft/javascript-sdk 0.7.1 → 0.8.0

package/dist/types/components/searchcraft-base-search-results/searchcraft-base-search-results.d.ts

@@ -1,6 +1,7 @@
 import { type EventEmitter } from '../../stencil-public-runtime';
-import type { SearchcraftResponse } from '@searchcraft/core';
-import type { SearchResultMappings } from "../../types/index";
+import type { AdClientResponseItem, SearchClientResponseItem } from '@searchcraft/core';
+import { type SearchcraftState } from "../../provider/store";
+import type { SearchResultMappings } from '@searchcraft/core';
 /**
  * This web component is responsible for displaying the results of a search query.
  * Once a query is submitted, the component formats and presents an ordered list of the results.
@@ -34,10 +35,6 @@ import type { SearchResultMappings } from "../../types/index";
  * ```
  */
 export declare class SearchcraftBaseSearchResults {
-    /**
-     * How often ads are injected.
-     */
-    adInterval: number;
     /**
      * A custom styles object.
      */
@@ -46,14 +43,6 @@ export declare class SearchcraftBaseSearchResults {
      * Formats the content rendered for each result.
      */
     searchResultMappings: SearchResultMappings | undefined;
-    /**
-     * Should an ad be placed at the end of the results.
-     */
-    placeAdAtEnd: boolean;
-    /**
-     * Should an ad be placed at the start of the results.
-     */
-    placeAdAtStart: boolean;
     /**
      * The placement of the image for each result.
      */
@@ -82,13 +71,15 @@ export declare class SearchcraftBaseSearchResults {
      * When no results are returned.
      */
     noResults?: EventEmitter<void>;
-    hasSearched: boolean;
-    query: string;
-    searchResults: SearchcraftResponse | null;
+    searchTerm: string;
+    searchClientResponseItems: SearchClientResponseItem[];
+    adClientResponseItems: AdClientResponseItem[];
+    searchResultsPerPage: any;
+    searchResultsPage: any;
     private unsubscribe;
     componentDidLoad(): void;
     disconnectedCallback(): void;
-    renderDocument(document: Record<string, unknown>, index: number): any;
+    handleStateChange(state: SearchcraftState): void;
     render(): any;
 }
 //# sourceMappingURL=searchcraft-base-search-results.d.ts.map

package/dist/types/components/searchcraft-button/searchcraft-button.d.ts

@@ -5,28 +5,39 @@ import { type EventEmitter } from '../../stencil-public-runtime';
  * It is consumed within the `searchcraft-input-form` component.
  */
 export declare class SearchcraftButton {
+    /**
+     * Controls the visual representation of the button.
+     */
+    hierarchy?: 'primary' | 'tertiary';
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
     /**
      * The icon element.
      */
-    iconElement?: Element;
+    icon?: Element;
     /**
      * Should the button only display an icon.
      */
-    iconOnly: boolean;
+    iconOnly?: boolean;
     /**
      * The position of the icon.
      */
-    iconPosition: string;
+    iconPosition?: 'left' | 'right';
     /**
      * The label for the button.
      */
     label: string;
     /**
-     * When the button is clicked.
+     * The type of the button.
+     */
+    type?: 'submit' | 'reset' | 'button';
+    /**
+     * The event fired when the button is clicked.
      */
     buttonClick: EventEmitter<void>;
-    isRequesting: boolean;
-    private handleClick;
+    private handleButtonClick;
     render(): any;
 }
 //# sourceMappingURL=searchcraft-button.d.ts.map

package/dist/types/components/searchcraft-facet-list/searchcraft-facet-list.d.ts

@@ -36,7 +36,7 @@ export declare class SearchcraftFacetList {
     selectedPaths: Record<string, boolean>;
     lastTimeTaken: number | undefined;
     hasNewSearchTerm: boolean;
-    lastQuery: string | undefined;
+    lastSearchTerm: string | undefined;
     lastSearchMode: string | undefined;
     lastSortType: string | undefined;
     unsubscribe: (() => void) | undefined;

package/dist/types/components/searchcraft-filter-panel/searchcraft-filter-panel.d.ts

@@ -1,4 +1,4 @@
-import type { FilterItem } from '../../types/searchcraft-filter-panel.types';
+import type { FilterItem } from '@searchcraft/core';
 /**
  * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
  *
@@ -14,7 +14,7 @@ export declare class SearchcraftFilterPanel {
      */
     items: FilterItem[];
     unsubscribe: (() => void) | undefined;
-    lastQuery: string | undefined;
+    lastSearchTerm: string | undefined;
     private searchStore;
     componentDidLoad(): void;
     disconnectedCallback(): void;

package/dist/types/components/searchcraft-input-form/searchcraft-input-form.d.ts

@@ -14,7 +14,7 @@ import { type SearchcraftConfig } from '@searchcraft/core';
  * // index.js
  * const searchInputForm = document.querySelector('searchcraft-input-form');
  *
- * seardchInputForm.config = {
+ * searchInputForm.config = {
  *   index: [],
  *   readKey: '',
  *   endpointUrl: '',

package/dist/types/components/searchcraft-pagination/searchcraft-pagination.d.ts

@@ -0,0 +1,33 @@
+/**
+ * This web component is designed to facilitate pagination of search results.
+ * Once a query is submitted, calculates the number for pages.
+ *
+ * ## Usage
+ * ```html
+ * <!-- index.html -->
+ * <searchcraft-pagination />
+ * ```
+ */
+export declare class SearchcraftPagination {
+    /**
+     * The custom styles object.
+     */
+    customStyles?: string;
+    searchTerm: any;
+    searchResultsPerPage: any;
+    searchResultsPage: any;
+    searchResultsCount: any;
+    searchResultsPagesCount: number;
+    searchResultsRangeMin: number;
+    searchResultsRangeMax: number;
+    setSearchResultsPage: (page: number) => void;
+    private unsubscribe;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleGoToPage(page: number): void;
+    renderOddPaginationItem(page: number): any;
+    renderEvenPaginationItem(page: number): any;
+    renderMiddlePaginationItem(): any;
+    render(): any;
+}
+//# sourceMappingURL=searchcraft-pagination.d.ts.map

package/dist/types/components/searchcraft-popover-form/searchcraft-popover-form.d.ts

@@ -1,7 +1,6 @@
-import type { SearchcraftConfig, SearchcraftResponse } from '@searchcraft/core';
-import type { PopoverResultMappings } from "../../types/index";
+import type { SearchcraftConfig, SearchClientResponseItem, AdClientResponseItem, PopoverResultMappings } from '@searchcraft/core';
 /**
- * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field.
+ * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
  *
  * ## Usage
  * ```html
@@ -57,12 +56,15 @@ export declare class SearchcraftPopoverForm {
     hotkeyModifier: 'ctrl' | 'meta' | 'alt' | 'option';
     isPopoverVisibleInState: boolean;
     unsubscribe: (() => void) | undefined;
-    searchResults: SearchcraftResponse | undefined;
+    searchClientResponseItems: SearchClientResponseItem[];
+    adClientResponseItems: AdClientResponseItem[];
     searchTerm: string | undefined;
     isFocused: boolean;
     breakpointSm: number;
     breakpointMd: number;
     breakpointLg: number;
+    searchResultsPage: any;
+    searchResultsPerPage: any;
     modalElement: any;
     hostElement: HTMLElement;
     componentDidLoad(): void;
@@ -97,9 +99,9 @@ export declare class SearchcraftPopoverForm {
      */
     focusOnNextListItem(direction: 'ArrowDown' | 'ArrowUp'): void;
     get hasResultsToShow(): boolean | "" | undefined;
-    renderInlinePopover(documents: Record<string, unknown>[]): any;
-    renderModalPopover(documents: Record<string, unknown>[]): any;
-    renderFullscreenPopover(documents: Record<string, unknown>[]): any;
+    renderInlinePopover(): any;
+    renderModalPopover(): any;
+    renderFullscreenPopover(): any;
     render(): any;
 }
 //# sourceMappingURL=searchcraft-popover-form.d.ts.map

package/dist/types/components/searchcraft-popover-list-item/searchcraft-popover-list-item.d.ts

@@ -1,23 +1,20 @@
+import type { SearchDocument, SearchClientResponseItem, PopoverResultMappings } from '@searchcraft/core';
 /**
  * A single list item rendered in a searchcraft-popover-list-view.
  */
 export declare class SearchcraftPopoverListItem {
-    /** The result title */
-    titleContent: string | undefined;
-    /** The result subtitle */
-    subtitleContent: string | undefined;
-    /** The source of the image. If not included, no item will be rendered. */
-    imageSrc: string | undefined;
-    /** The image alt tag. */
-    imageAlt: string | undefined;
-    /** The link href */
-    href: string | undefined;
+    item: SearchClientResponseItem | undefined;
+    popoverResultMappings: PopoverResultMappings | undefined;
     /** The document position relative to the search results (For Measure) */
     documentPosition: number;
-    componentDidLoad(): void;
+    href?: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    titleContent?: string;
+    subtitleContent?: string;
+    mapValuesFromDocument(document: SearchDocument): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    handleButtonClick(): void;
     handleLinkClick: () => void;
     render(): any;
 }

package/dist/types/components/searchcraft-popover-list-item-ad/searchcraft-popover-list-item-ad.d.ts

@@ -0,0 +1,14 @@
+import type { AdClientResponseItem } from '@searchcraft/core';
+/**
+ * A single list item rendered in a searchcraft-popover-list-view.
+ */
+export declare class SearchcraftPopoverListItemAd {
+    adClientResponseItem?: AdClientResponseItem;
+    connectedCallback(): void;
+    renderADMProductAd(): any;
+    renderADMTextAd(): any;
+    renderNativoAd(): void;
+    renderAdPlaceholder(): any;
+    render(): any;
+}
+//# sourceMappingURL=searchcraft-popover-list-item-ad.d.ts.map

package/dist/types/components/searchcraft-popover-list-view/searchcraft-popover-list-view.d.ts

@@ -1,4 +1,5 @@
-import type { PopoverResultMappings } from "../../types/index";
+import type { AdClientResponseItem, SearchClientResponseItem } from '@searchcraft/core';
+import type { PopoverResultMappings } from '@searchcraft/core';
 /**
  * This web component is designed to display a list of results within a popover interface.
  * It is consumed within the `searchcraft-popover-form` component.
@@ -16,10 +17,12 @@ export declare class SearchcraftPopoverListView {
      */
     popoverResultMappings: PopoverResultMappings | undefined;
     /**
-     * The documents to render in the list view.
+     * The items to render in the list view.
      */
-    documents: Record<string, unknown>[] | undefined;
-    renderDocument(document: Record<string, unknown>, index: number): any;
+    searchClientResponseItems: SearchClientResponseItem[] | undefined;
+    adClientResponseItems: AdClientResponseItem[] | undefined;
+    searchResultsPage: number;
+    searchResultsPerPage: number;
     render(): any;
 }
 //# sourceMappingURL=searchcraft-popover-list-view.d.ts.map

package/dist/types/components/searchcraft-results-info/searchcraft-results-info.d.ts

@@ -1,18 +1,40 @@
 /**
  * This web component is designed to display the number of results returned from a search query.
- * It provides users with real-time feedback on the scale of the results, such as the total number of items found.
  *
  * ## Usage
  * ```html
  * <!-- index.html -->
+ * <script>
+ *  const resultsInfo = document.querySelector('searchcraft-results-info');
+ *  resultsInfo.customFormatter = (range, count, responseTime) =>
+ *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+ * </script>
+ *
  * <searchcraft-results-info />
  * ```
  */
 export declare class SearchcraftResultsInfo {
-    isRequesting: boolean;
-    resultsCount: number;
+    /**
+     * The custom formatter for the resulting string.
+     *
+     * @example
+     * ```ts
+     *  resultsInfo.customFormatter = (range, count, responseTime) =>
+     *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+     * ```
+     */
+    customFormatter?: (range: [string, string], count: string, responseTime: string) => void;
+    /**
+     * The custom styles object.
+     */
+    customStyles?: string;
+    searchTerm: any;
+    searchResultsPage: any;
+    searchResultsPerPage: any;
+    searchResultsCount: any;
+    count: number;
+    range: number[];
     responseTime: string;
-    query: string;
     unsubscribe: () => void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/types/components/searchcraft-search-results-per-page/searchcraft-search-results-per-page.d.ts

@@ -0,0 +1,33 @@
+/**
+ * This web component is designed to choose the number of search results displayed.
+ *
+ * ## Usage
+ * ```html
+ * <!-- index.html -->
+ * <searchcraft-search-results-per-page increment="20" />
+ * ```
+ */
+export declare class SearchcraftSearchResultsPerPage {
+    /**
+     * The amount the options will increase (e.g. 20 = [20, 40, 60, 80, 100]).
+     * The base value is defined by the `searchResultsPerPage` option in the configuration.
+     */
+    increment: string | number;
+    /**
+     * The custom styles object.
+     */
+    customStyles?: string;
+    searchTerm: any;
+    searchResultsPage: any;
+    searchResultsPerPage: any;
+    searchResultsCount: any;
+    searchResultsPagesCount: any;
+    initialSearchResultsPerPage: any;
+    setSearchResultsPerPage: (perPage: number) => void;
+    setSearchResultsPage: (page: number) => void;
+    private unsubscribe;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}
+//# sourceMappingURL=searchcraft-search-results-per-page.d.ts.map

package/dist/types/components/searchcraft-select/searchcraft-select.d.ts

@@ -0,0 +1,64 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+export type SearchcraftSelectOption = {
+    label: string;
+    value: string | number;
+    selected?: boolean;
+};
+/**
+ * This web component is designed to allow users to select between a group of options.
+ *
+ * ## Usage
+ * ```html
+ * <!-- index.html -->
+ * <searchcraft-select
+ *  inputId="searchcraft-select"
+ *  name="searchcraft-select"
+ *  options="[{ label: 'label', value: 'value' }]"
+ * />
+ * ```
+ */
+export declare class SearchcraftSelect {
+    /**
+     * The caption displayed below the select input.
+     */
+    caption?: string;
+    /**
+     * Whether the select input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The ID for the select input.
+     */
+    inputId: string;
+    /**
+     * The label of the select input.
+     */
+    label?: string;
+    /**
+     * The ID for the label of the select input.
+     */
+    labelId?: string;
+    /**
+     * The name of the select input.
+     */
+    name: string;
+    /**
+     * The options for the select input.
+     */
+    options: SearchcraftSelectOption[] | string;
+    /**
+     * A custom styles object.
+     */
+    customStyles?: string;
+    /**
+     * The event fired when the select is changed.
+     */
+    selectChange: EventEmitter<string>;
+    searchResultsPerPage: any;
+    setSearchResultsPage: (page: number) => void;
+    setSearchResultsPerPage: (perPage: number) => void;
+    private handleSelectChange;
+    handleGoToPage(page: number): void;
+    render(): any;
+}
+//# sourceMappingURL=searchcraft-select.d.ts.map

package/dist/types/components/searchcraft-theme/searchcraft-theme.d.ts

@@ -1,4 +1,23 @@
-export declare class SearchcraftErrorMessage {
+/**
+ * This web component adds Searchcraft's built-in css theme to your page's <head> tag.
+ * It does not render anything visible, its only function is to manage the css styles on the page.
+ *
+ * ## Usage
+ * ```html
+ * <!-- index.html -->
+ * <searchcraft-theme theme="light" custom-theme="{}" />
+ * ```
+ */
+export declare class SearchcraftTheme {
+    /**
+     * The name of the theme.
+     */
+    theme: string;
+    /**
+     * The custom theme configuration object.
+     */
+    customTheme: string;
+    private camelToKebab;
     componentDidLoad(): void;
     render(): void;
 }

package/dist/types/components/searchcraft-toggle-button/searchcraft-toggle-button.d.ts

@@ -18,7 +18,7 @@ export declare class SearchcraftToggleButton {
     toggleUpdated?: EventEmitter<boolean>;
     isActive: boolean;
     unsubscribe: (() => void) | undefined;
-    lastQuery: string | undefined;
+    lastSearchTerm: string | undefined;
     private handleToggle;
     connectedCallback(): void;
     disconnectedCallback(): void;