@searchcraft/javascript-sdk 0.9.7 → 0.10.0

package/dist/hydrate/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@searchcraft/javascript-sdk/hydrate",
+  "description": "SearchcraftJavascriptSdk component hydration app.",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  }
+}

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

@@ -1,6 +1,8 @@
 import type { AdClientResponseItem, SearchcraftAdSource } from '@searchcraft/core';
 /**
  * An inline ad meant to be rendered in a list of search results.
+ *
+ * @internal
  */
 export declare class SearchcraftPopoverListItemAd {
     adSource: SearchcraftAdSource;

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

@@ -1,8 +1,9 @@
 import { type EventEmitter } from '../../stencil-public-runtime';
 /**
- * This web component represents a button to be consumed within the `search-input-form` component.
+ * This web component represents a button.
  * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
- * It is consumed within the `searchcraft-input-form` component.
+ *
+ * @internal
  */
 export declare class SearchcraftButton {
     /**

package/dist/types/components/searchcraft-error-message/searchcraft-error-message.d.ts

@@ -1,17 +1,16 @@
 /**
  * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.
  *
- * ## Usage
+ * @js-example
  * ```html
- * <!-- index.html -->
- * <searchcraft-error-message error-message="No search results found for query" />
+ * <searchcraft-error-message>
+ *   No search results found for query
+ * </searchcraft-error-message>
  * ```
+ *
+ * @internal
  */
 export declare class SearchcraftErrorMessage {
-    /**
-     * The error message.
-     */
-    errorMessage?: string;
     render(): any;
 }
 //# sourceMappingURL=searchcraft-error-message.d.ts.map

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

@@ -5,7 +5,7 @@ import { type SearchcraftState } from "../../store/index";
  * This web component is designed to display facets in a search interface, allowing users to refine their search results by applying filters based on various attributes.
  * It is consumed within the `searchcraft-filter-panel`.
  *
- * ## Usage
+ * @js-example
  * ```html
  * <!-- index.html -->
  * <searchcraft-facet-list field-name="title" />
@@ -19,6 +19,8 @@ import { type SearchcraftState } from "../../store/index";
  *   console.log('Facet selection updated');
  * });
  * ```
+ *
+ * @internal
  */
 export declare class SearchcraftFacetList {
     /**

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

@@ -2,11 +2,39 @@ 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.
  *
- * ## Usage
+ * @import
+ * ```jsx
+ * // react
+ * import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
+ *
+ * // vue
+ * import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
+ * ```
+ *
+ * @js-example
  * ```html
  * <!-- index.html -->
  * <searchcraft-filter-panel />
  * ```
+ *
+ * ```js
+ * // index.js
+ * const filterPanel = document.querySelector('searchcraft-filter-panel');
+ *
+ * if (filterPanel) {
+ *   filterPanel.items = [];
+ * }
+ * ```
+ *
+ * @react-example
+ * ```jsx
+ * <SearchcraftFilterPanel items={[]} />
+ * ```
+ *
+ * @vue-example
+ * ```jsx
+ * <SearchcraftFilterPanel :items="[]" />
+ * ```
  */
 export declare class SearchcraftFilterPanel {
     /**

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

@@ -4,27 +4,39 @@ import type { SearchcraftCore } from '@searchcraft/core';
  * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
  * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
  *
- * ## Usage
+ * @import
+ * ```jsx
+ * // react
+ * import { SearchcraftInputForm } from "@searchcraft/react-sdk";
+ *
+ * // vue
+ * import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
+ * ```
+ *
+ * @js-example
  * ```html
- * <!-- index.html -->
- * <searchcraft-input-form placeholder-value="Search here" />
+ * <searchcraft-input-form auto-search />
  * ```
  *
- * ```js
- * // index.js
- * const searchInputForm = document.querySelector('searchcraft-input-form');
+ * @react-example
+ * ```jsx
+ * <SearchcraftInputForm autoSearch />
+ * ```
  *
+ * @vue-example
+ * ```jsx
+ * <SearchcraftInputForm autoSearch />
  * ```
  */
-export declare class SearchcraftInput {
+export declare class SearchcraftInputForm {
     /**
      * Whether or not to automatically submit the search term when the input changes.
      */
-    autoSearch: boolean;
+    autoSearch?: boolean;
     /**
      * Where to place the search button.
      */
-    buttonPlacement: 'left' | 'right' | 'none';
+    buttonPlacement?: 'left' | 'right' | 'none';
     /**
      * The label for the submit button.
      */
@@ -33,14 +45,10 @@ export declare class SearchcraftInput {
      * The label rendered above the input.
      */
     inputLabel?: string;
-    /**
-     * A custom styles object to be applied to the input element.
-     */
-    customStyles: string | Record<string, string>;
     /**
      * The input element's placeholder value.
      */
-    placeholderValue: string;
+    placeholderValue?: string;
     /**
      * When the input becomes focused.
      */

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

@@ -1,11 +1,12 @@
 /**
  * This web component serves as the input label for the searchcraft-input-form component.
  *
- * ## Usage
+ * @js-example
  * ```html
- * <!-- index.html -->
  * <searchcraft-input-label label="Search" />
  * ```
+ *
+ * @internal
  */
 export declare class SearchcraftInputLabel {
     /**

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

@@ -1,18 +1,31 @@
 /**
- * This web component is designed to facilitate pagination of search results.
- * Once a query is submitted, calculates the number for pages.
+ * This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
  *
- * ## Usage
+ * @import
+ * ```jsx
+ * // react
+ * import { SearchcraftPagination } from "@searchcraft/react-sdk";
+ *
+ * // vue
+ * import { SearchcraftPagination } from "@searchcraft/vue-sdk";
+ * ```
+ *
+ * @js-example
  * ```html
- * <!-- index.html -->
  * <searchcraft-pagination />
  * ```
+ *
+ * @react-example
+ * ```jsx
+ * <SearchcraftPagination />
+ * ```
+ *
+ * @vue-example
+ * ```jsx
+ * <SearchcraftPagination />
+ * ```
  */
 export declare class SearchcraftPagination {
-    /**
-     * The custom styles object.
-     */
-    customStyles?: string;
     searchTerm: any;
     searchResultsPerPage: any;
     searchResultsPage: any;

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

@@ -1,5 +1,35 @@
 /**
  * Renders a button which, when clicked, turns on popover visibility.
+ *
+ * @import
+ * ```jsx
+ * // react
+ * import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
+ *
+ * // vue
+ * import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
+ * ```
+ *
+ * @js-example
+ * ```html
+ * <searchcraft-popover-button>
+ *   Open popover
+ * </searchcraft-popover-button>
+ * ```
+ *
+ * @react-example
+ * ```jsx
+ * <SearchcraftPopoverButton>
+ *   Open popover
+ * </SearchcraftPopoverButton>
+ * ```
+ *
+ * @vue-example
+ * ```jsx
+ * <SearchcraftPopoverButton>
+ *   Open popover
+ * </SearchcraftPopoverButton>
+ * ```
  */
 export declare class SearchcraftPopoverButton {
     handleOnClick(): void;

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

@@ -2,36 +2,47 @@ import type { SearchClientResponseItem, AdClientResponseItem, PopoverResultMappi
 /**
  * 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
+ * @import
+ * ```jsx
+ * // react
+ * import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
+ *
+ * // vue
+ * import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
+ * ```
+ *
+ * @js-example
  * ```html
  * <!-- index.html -->
- * <searchcraft-popover-form type="fullscreen" />
+ * <searchcraft-popover-form type="inline" />
  * ```
  *
  * ```js
  * // index.js
  * const popoverForm = document.querySelector('searchcraft-popover-form');
  *
- * popoverForm.popoverResultMappings = {
- *  containerHref: {
- *   fieldNames: [
- *    {
- *      fieldName: 'canonical_link',
- *      dataType: 'text',
- *    },
- *  ],
- *  };
+ * popoverForm.popoverResultMappings = {};
+ * ```
+ *
+ * @react-example
+ * ```jsx
+ * <SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />
  * ```
+ *
+ * @vue-example
+ * ```jsx
+ * <SearchcraftPopoverForm type="inline" :popoverResultMappings="[]"" />
+ * ```
+ *
  */
 export declare class SearchcraftPopoverForm {
     /**
      * The type of popover form to render.
-     *
      * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.
      * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.
      * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.
      */
-    type: 'inline' | 'fullscreen' | 'modal';
+    type?: 'inline' | 'fullscreen' | 'modal';
     /**
      * Formats the content rendered for each result.
      */
@@ -39,11 +50,11 @@ export declare class SearchcraftPopoverForm {
     /**
      * The hotkey that activates the popover.
      */
-    hotkey: string;
+    hotkey?: string;
     /**
      * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
      */
-    hotkeyModifier: 'ctrl' | 'meta' | 'alt' | 'option';
+    hotkeyModifier?: 'ctrl' | 'meta' | 'alt' | 'option';
     isPopoverVisibleInState: boolean;
     unsubscribe: (() => void) | undefined;
     searchClientResponseItems: SearchClientResponseItem[];

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

@@ -1,6 +1,8 @@
 import type { SearchDocument, SearchClientResponseItem, PopoverResultMappings } from '@searchcraft/core';
 /**
  * A single list item rendered in a searchcraft-popover-list-view.
+ *
+ * @internal
  */
 export declare class SearchcraftPopoverListItem {
     item: SearchClientResponseItem | undefined;

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

@@ -4,11 +4,12 @@ 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.
  *
- * ## Usage
+ * @js-example
  * ```html
- * <!-- index.html -->
  * <searchcraft-popover-list-view />
  * ```
+ *
+ * @internal
  */
 export declare class SearchcraftPopoverListView {
     /**

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

@@ -1,33 +1,59 @@
+import type { ResultsInfoTemplate } from '@searchcraft/core';
 /**
  * This web component is designed to display the number of results returned from a search query.
  *
- * ## Usage
+ * @import
+ * ```jsx
+ * // react
+ * import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
+ *
+ * // vue
+ * import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
+ * ```
+ *
+ * @js-example
  * ```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 />
  * ```
+ *
+ * ```js
+ * // index.js
+ * const resultsInfo = document.querySelector('searchcraft-results-info');
+ *
+ * resultsInfo.template = (info, { html }) => html`
+ *   ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
+ * `;
+ * ```
+ *
+ * @react-example
+ * ```jsx
+ * <SearchcraftResultsInfo
+ *   template={(info, { html }) => html`
+ *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
+ *   `}
+ * />
+ *
+ * @vue-example
+ * ```jsx
+ * <SearchcraftResultsInfo
+ *   :template={(info, { html }) => html`
+ *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
+ *   `}
+ * />
  */
 export declare class SearchcraftResultsInfo {
     /**
-     * The custom formatter for the resulting string.
+     * A callback function responsible for rendering the results info.
      *
      * @example
      * ```ts
-     *  resultsInfo.customFormatter = (range, count, responseTime) =>
-     *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+     *  resultsInfo.template = html`
+     *    ${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;
+    template?: ResultsInfoTemplate;
     searchTerm: any;
     searchResultsPage: any;
     searchResultsPerPage: any;

package/dist/types/components/searchcraft-search-result/searchcraft-search-result.d.ts

@@ -0,0 +1,25 @@
+import type { SearchClientResponseItem, SearchResultTemplate, SearchResultTemplateData } from '@searchcraft/core';
+/**
+ * This web component is designed to display detailed information for a single search result. Once a query is submitted, the component formats and presents the result.
+ *
+ * @internal
+ */
+export declare class SearchcraftSearchResult {
+    item?: SearchClientResponseItem;
+    /**
+     * The index.
+     */
+    index: number;
+    /**
+     * The position in the document. Used with the "document_clicked" measure event.
+     */
+    documentPosition: number;
+    /**
+     * A callback function responsible for rendering a result.
+     */
+    template?: SearchResultTemplate<SearchResultTemplateData>;
+    templateHtml: string | undefined;
+    connectedCallback(): void;
+    render(): any;
+}
+//# sourceMappingURL=searchcraft-search-result.d.ts.map

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

@@ -0,0 +1,80 @@
+import type { AdClientResponseItem, SearchClientResponseItem, SearchcraftConfig, SearchResultTemplate, SearchResultTemplateData } from '@searchcraft/core';
+import { type SearchcraftState } from "../../store/index";
+/**
+ * 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.
+ *
+ *
+ * @import
+ * ```jsx
+ * // react
+ * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
+ *
+ * // vue
+ * import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
+ * ```
+ *
+ * @js-example
+ * ```html
+ * <!-- index.html -->
+ * <searchcraft-search-results
+ *   ad-interval="4"
+ *   place-ad-at-start="true"
+ * />
+ * ```
+ *
+ * ```js
+ * // index.js
+ * const searchResults = document.querySelector('searchcraft-search-results');
+ *
+ * searchResults.template = (item, index, { html }) => html`
+ *  <h2>${item.title}</h2>
+ * `;
+ * ```
+ *
+ * @react-example
+ * ```jsx
+ * <SearchcraftSearchResults
+ *   adInterval={4}
+ *   placeAdAtState={true}
+ *   template={(item, index, { html }) => html`
+ *     <h2>${item.title}</h2>
+ *   `}
+ * />
+ * ```
+ *
+ *  @vue-example
+ * ```jsx
+ * <SearchcraftSearchResults
+ *   adInterval={4}
+ *   placeAdAtState={true}
+ *   :template={(item, index, { html }) => html`
+ *     <h2>${item.title}</h2>
+ *   `}
+ * />
+ * ```
+ */
+export declare class SearchcraftSearchResults {
+    /**
+     * A callback function responsible for rendering a result. Passed to `searchcraft-search-result`.
+     */
+    template?: SearchResultTemplate<SearchResultTemplateData>;
+    searchTerm: string;
+    searchClientResponseItems?: SearchClientResponseItem[];
+    adClientResponseItems: AdClientResponseItem[];
+    searchResultsPerPage: any;
+    searchResultsPage: any;
+    isSearchInProgress: boolean;
+    config?: SearchcraftConfig;
+    private unsubscribe;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleStateChange(state: SearchcraftState): void;
+    renderEmptyState(): any;
+    renderNoResultsFoundState(): any;
+    renderWithADMAds(): any;
+    renderWithCustomAds(): any;
+    renderWithNativoAds(): any;
+    renderWithNoAds(): any;
+    render(): any;
+}
+//# sourceMappingURL=searchcraft-search-results.d.ts.map

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

@@ -1,11 +1,30 @@
 /**
  * This web component is designed to choose the number of search results displayed.
  *
- * ## Usage
+ * @import
+ * ```jsx
+ * // react
+ * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
+ *
+ * // vue
+ * import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
+ * ```
+ *
+ * @js-example
  * ```html
  * <!-- index.html -->
  * <searchcraft-search-results-per-page increment="20" />
  * ```
+ *
+ * @react-example
+ * ```jsx
+ * <SearchcraftSearchResultsPerPage increment={20} />
+ * ```
+ *
+ * @vue-example
+ * ```jsx
+ * <SearchcraftSearchResultsPerPage increment="20" />
+ * ```
  */
 export declare class SearchcraftSearchResultsPerPage {
     /**
@@ -13,10 +32,6 @@ export declare class SearchcraftSearchResultsPerPage {
      * 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;

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

@@ -7,7 +7,7 @@ export type SearchcraftSelectOption = {
 /**
  * This web component is designed to allow users to select between a group of options.
  *
- * ## Usage
+ * @js-example
  * ```html
  * <!-- index.html -->
  * <searchcraft-select
@@ -16,6 +16,8 @@ export type SearchcraftSelectOption = {
  *  options="[{ label: 'label', value: 'value' }]"
  * />
  * ```
+ *
+ * @internal
  */
 export declare class SearchcraftSelect {
     /**
@@ -46,10 +48,6 @@ export declare class SearchcraftSelect {
      * The options for the select input.
      */
     options: SearchcraftSelectOption[] | string;
-    /**
-     * A custom styles object.
-     */
-    customStyles?: string;
     /**
      * The event fired when the select is changed.
      */

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

@@ -1,8 +1,8 @@
 import { type EventEmitter } from '../../stencil-public-runtime';
 /**
- * This web component is designed to allow users to select a value from a range defined by a minimum and maximum value.
- * The component renders a slider interface, which can be used to visually choose a value between two boundaries.
- * It is consumed by the `searchcraft-filter-panel` component.
+ * This web component is designed to allow users to select a value from a range defined by a minimum and maximum value. The component renders a slider interface, which can be used to visually choose a value between two boundaries.
+ *
+ * @internal
  */
 export declare class SearchcraftSlider {
     /**