@searchcraft/javascript-sdk 0.9.7 → 0.10.1

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

@@ -0,0 +1,28 @@
+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;
+    hostElement?: HTMLElement;
+    connectedCallback(): void;
+    handleResultContainerClick: (event: MouseEvent) => void;
+    handleKeyDown: () => 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,81 @@
+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.
+ *
+ *
+ * @react-import
+ * ```jsx
+ * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
+ * ```
+ *
+ * @vue-import
+ * ```jsx
+ * 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,31 @@
 /**
  * This web component is designed to choose the number of search results displayed.
  *
- * ## Usage
+ * @react-import
+ * ```jsx
+ * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
+ * ```
+ *
+ * @vue-import
+ * ```jsx
+ * 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 +33,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 {
     /**

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

@@ -1,24 +1,32 @@
 /**
- * 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.
+ * This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
  *
- * ## Usage
+ * @react-import
+ * ```jsx
+ * import { SearchcraftTheme } from "@searchcraft/react-sdk";
+ * ```
+ *
+ * @vue-import
+ * ```jsx
+ * import { SearchcraftTheme } from "@searchcraft/vue-sdk";
+ * ```
+ *
+ * @js-example
  * ```html
- * <!-- index.html -->
- * <searchcraft-theme theme="light" custom-theme="{}" />
+ * <searchcraft-theme />
+ * ```
+ *
+ * @react-example
+ * ```jsx
+ * <SearchcraftTheme />
+ * ```
+ *
+ * @vue-example
+ * ```jsx
+ * <SearchcraftTheme />
  * ```
  */
 export declare class SearchcraftTheme {
-    /**
-     * The name of the theme.
-     */
-    theme?: string;
-    /**
-     * The custom theme configuration object.
-     */
-    customTheme?: string;
-    private camelToKebab;
-    componentDidLoad(): void;
-    render(): void;
+    render(): any;
 }
 //# sourceMappingURL=searchcraft-theme.d.ts.map

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

@@ -1,7 +1,8 @@
 import { type EventEmitter } from '../../stencil-public-runtime';
 /**
  * This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
- * It is consumed within the `searchcraft-filter-panel` component.
+ *
+ * @internal
  */
 export declare class SearchcraftToggleButton {
     /**