/* eslint-disable */
/* tslint:disable */
/**
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { AdClientResponseItem, FilterItem, PopoverButtonTemplate, PopoverResultMappings, ResultsInfoTemplate, SearchClientResponseItem, SearchResultTemplate, SearchResultTemplateData } from "./types/index";
import { SearchcraftSelectOption } from "./components/searchcraft-select/searchcraft-select";
export { AdClientResponseItem, FilterItem, PopoverButtonTemplate, PopoverResultMappings, ResultsInfoTemplate, SearchClientResponseItem, SearchResultTemplate, SearchResultTemplateData } from "./types/index";
export { SearchcraftSelectOption } from "./components/searchcraft-select/searchcraft-select";
export namespace Components {
/**
* An inline ad meant to be rendered in a list of search results.
*/
interface SearchcraftAd {
"adClientResponseItem"?: AdClientResponseItem;
/**
* @default 'Custom'
*/
"adSource": 'Custom' | 'Nativo' | 'adMarketplace';
/**
* Where the ad is being rendered within the search results div. Lifecycle behavior differs for ads being rendered in different positions, so we need to be able to handle all of those cases.
* @default 'interstitial'
*/
"renderPosition": 'interstitial' | 'top' | 'bottom';
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* 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.
*/
interface SearchcraftButton {
/**
* Whether the button is disabled.
* @default false
*/
"disabled"?: boolean;
/**
* Controls the visual representation of the button.
* @default 'primary'
*/
"hierarchy"?: 'primary' | 'tertiary';
/**
* The icon element.
*/
"icon"?: Element;
/**
* Should the button only display an icon.
* @default false
*/
"iconOnly"?: boolean;
/**
* The position of the icon.
* @default 'left'
*/
"iconPosition"?: 'left' | 'right';
/**
* The label for the button.
* @default 'Search'
*/
"label": string;
/**
* The type of the button.
* @default 'button'
*/
"type"?: 'submit' | 'reset' | 'button';
}
/**
* 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.
* @js-example ```html
*
* No search results found for query
*
* ```
*/
interface SearchcraftErrorMessage {
}
/**
* 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`.
* @js-example ```html
*
*
*
*
*
*
*
* ```
* ```js
* // index.js
* const facetList = document.querySelector('searchcraft-facet-list');
* facetList.addEventListener('facetSelectionUpdated', () => {
* console.log('Facet selection updated');
* });
* // Programmatically toggle collapse state
* await facetList.handleCollapseToggle();
* ```
*/
interface SearchcraftFacetList {
/**
* Array of facet values to exclude from rendering.
*/
"exclude"?: string[];
/**
* The name of the field where facets are applied.
* @default ''
*/
"fieldName": string;
/**
* Returns whether the facet section is currently collapsed.
* @returns A promise that resolves to true if collapsed, false if expanded.
*/
"getIsCollapsed": () => Promise;
/**
* Toggles the collapsed state of the facet section.
* @returns A promise that resolves when the toggle is complete.
*/
"handleCollapseToggle": () => Promise;
/**
* Initial collapse state of the facet section.
* @default 'open'
*/
"initialCollapseState"?: 'open' | 'closed';
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* The number of facets to show before displaying a "view more" link. Set to 0 to show all facets without a "view more" link.
* @default 8
*/
"viewMoreThreshold"?: number;
}
/**
* This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
* @react-import ```jsx
* import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* ```js
* // index.js
* const filterPanel = document.querySelector('searchcraft-filter-panel');
* if (filterPanel) {
* filterPanel.items = [];
* }
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftFilterPanel {
/**
* The items to filter.
* @default []
*/
"items": FilterItem[];
/**
* Controls whether the filter panel automatically hides/shows based on window size. - 'auto': Automatically hide/show based on window width - 'manual': User controls visibility manually
* @default 'auto'
*/
"responsiveBehavior"?: 'auto' | 'manual';
/**
* The breakpoint (in pixels) below which the filter panel will be hidden. Defaults to 768px (--sc-breakpoint-md).
* @default 768
*/
"responsiveBreakpoint"?: number;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* 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.
* @react-import ```jsx
* import { SearchcraftInputForm } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftInputForm {
/**
* Whether or not to automatically submit the search term when the input changes.
* @default true
*/
"autoSearch"?: boolean;
/**
* The label for the submit button.
*/
"buttonLabel"?: string;
/**
* Where to place the search button.
* @default 'none'
*/
"buttonPlacement"?: 'left' | 'right' | 'none';
/**
* The label rendered above the input.
*/
"inputLabel"?: string;
/**
* The placeholder's render behavior. 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus. 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
*/
"placeholderBehavior"?: 'hide-on-focus' | 'hide-on-text-entered';
/**
* The input element's placeholder value.
* @default 'Enter Search'
*/
"placeholderValue"?: string;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* The value to display in the input field.
*/
"value"?: string;
}
/**
* This web component serves as the input label for the searchcraft-input-form component.
* @js-example ```html
*
* ```
*/
interface SearchcraftInputLabel {
/**
* The classname applied to the label element.
* @default ''
*/
"inputLabelClassName"?: string | undefined;
/**
* @default ''
*/
"label": string;
}
/**
* Renders a loading spinner/loading state for use in things like the summary box.
*/
interface SearchcraftLoading {
"label"?: string;
}
/**
* This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
* @react-import ```jsx
* import { SearchcraftPagination } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftPagination } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftPagination {
/**
* The URL query string parameter name used to track the current page. When a user navigates to a URL that contains this parameter, the pagination component will automatically navigate to that page.
* @default "p"
*/
"pageQueryParam": string;
/**
* Whether to scroll to the top of the search results when pagination buttons are clicked.
* @default true
*/
"scrollToTop"?: boolean;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* Whether to use a query string parameter to track and restore the current page. Set to `false` to disable query string synchronisation entirely.
* @default true
*/
"usePageQueryParam": boolean;
}
/**
* Renders a button which, when clicked, turns on popover visibility.
* @react-import ```jsx
* import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
* ````
* @vue-import ```jsx
* import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* Open popover
*
* ```
* ```js
* // index.js
* const popoverButton = document.querySelector('searchcraft-popover-button');
* popoverButton.template = ({ isPopoverVisible }, { html }) => html`
* Click me
* `;
* ```
* @react-example ```jsx
* html`
* Click me
* `}
* >
* Open popover
*
* ```
* @vue-example ```jsx
* html`
* Click me
* `}
* >
* Open popover
*
* ```
*/
interface SearchcraftPopoverButton {
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* A callback function responsible for rendering the button contents.
*/
"template"?: PopoverButtonTemplate;
/**
* The type of popover button to render.
*/
"type"?: 'skeuomorphic' | 'magnifying-glass';
}
/**
* Renders the footer for the searchcraft-popover-form.
*/
interface SearchcraftPopoverFooter {
/**
* The SDK variant used to render this component. Used for UTM attribution. This isn't exposed for developer consumption, it's set automatically.
* @default 'js'
*/
"sdkVariant"?: 'js' | 'react' | 'vue';
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* Optional href for the "View all" button.
*/
"viewAllResultsHref"?: string;
/**
* Optional label for the "View all" button.
*/
"viewAllResultsLabel"?: string;
}
/**
* 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.
* @react-import ```jsx
* import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* ```js
* // index.js
* const popoverForm = document.querySelector('searchcraft-popover-form');
* popoverForm.popoverResultMappings = {};
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftPopoverForm {
/**
* The hotkey that activates the popover.
* @default 'k'
*/
"hotkey"?: string;
/**
* The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
* @default 'meta'
*/
"hotkeyModifier"?: 'ctrl' | 'meta' | 'alt' | 'option';
/**
* The placeholder's render behavior. 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus. 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
*/
"placeholderBehavior"?: 'hide-on-focus' | 'hide-on-text-entered';
/**
* The input element's placeholder value.
* @default 'Enter Search'
*/
"placeholderValue"?: string;
/**
* Formats the content rendered for each result.
*/
"popoverResultMappings"?: PopoverResultMappings;
/**
* The SDK variant used to render this component. Used for UTM attribution on the footer link.
* @default 'js'
*/
"sdkVariant"?: 'js' | 'react' | 'vue';
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* Whether to display the AI generative summary box before the search results. NOTE: This requires the usage of a read key that has "SUMMARY" permissions and either a subscription to Searchcraft Cloud with AI features enabled or a self-hosted model connected.
* @default false
*/
"showSummaryBox"?: boolean;
/**
* 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.
* @default 'inline'
*/
"type"?: 'inline' | 'fullscreen' | 'modal';
/**
* Base URL for the "View all" footer link. The current search term will be appended (URL encoded). For example, in a CMS-backed site you might set this to `/?s=` so the final URL becomes `/?s=`.
*/
"viewAllResultsBaseUrl"?: string;
/**
* Optional label for the "View All" footer button. Defaults to "View All".
*/
"viewAllResultsLabel"?: string;
}
/**
* A single list item rendered in a searchcraft-popover-list-view.
*/
interface SearchcraftPopoverListItem {
/**
* The document position relative to the search results (For Measure)
* @default 0
*/
"documentPosition": number;
"item": SearchClientResponseItem | undefined;
"popoverResultMappings": PopoverResultMappings | undefined;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* This web component is designed to display a list of results within a popover interface.
* It is consumed within the `searchcraft-popover-form` component.
* @js-example ```html
*
* ```
*/
interface SearchcraftPopoverListView {
"adClientResponseItems": AdClientResponseItem[] | undefined;
/**
* The mappings that define how the data in the documents are mapped to the list-view-item elements.
*/
"popoverResultMappings": PopoverResultMappings | undefined;
/**
* The items to render in the list view.
*/
"searchClientResponseItems": SearchClientResponseItem[] | undefined;
"searchResultsPage": number;
"searchResultsPerPage": number;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* This web component is designed to display the number of results returned from a search query.
* @react-import ```jsx
* import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* ```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
* html`
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
* `}
* />
* ```
* @vue-example ```jsx
* html`
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
* `}
* />
* ```
*/
interface SearchcraftResultsInfo {
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* A callback function responsible for rendering the results info.
*/
"template"?: ResultsInfoTemplate;
}
/**
* This component renders a results summary for RAG search result summaries.
* When the user makes a search, a network call is made to retrieve the summary content, which is then
* rendered in this box.
* NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
* @react-import ```jsx
* import { SearchcraftResultsSummary } from "@searchcraft/react-sdk";
* ```
* @vue-import ```ts
* import { SearchcraftResultsSummary } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftResultsSummary {
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* 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.
*/
interface SearchcraftSearchResult {
/**
* The position in the document. Used with the "document_clicked" measure event.
* @default 0
*/
"documentPosition": number;
/**
* The index.
*/
"index": number;
"item"?: SearchClientResponseItem;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* A callback function responsible for rendering a result.
*/
"template"?: SearchResultTemplate;
}
/**
* 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
*
*
* ```
* ```js
* // index.js
* const searchResults = document.querySelector('searchcraft-search-results');
* searchResults.template = (item, index, { html }) => html`
* ${item.title}
* `;
* ```
* @react-example ```jsx
* html`
* ${item.title}
* `}
* />
* ```
* @vue-example ```jsx
* html`
* ${item.title}
* `}
* />
* ```
*/
interface SearchcraftSearchResults {
/**
* A query that will appears when the component initializes or the search term is ''..
*/
"initialQuery"?: string;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* A callback function responsible for rendering a result. Passed to `searchcraft-search-result`.
*/
"template"?: SearchResultTemplate;
}
/**
* This web component is designed to choose the number of search results displayed.
* @react-import ```jsx
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface 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.
* @default 20
*/
"increment": string | number;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* This web component is designed to allow users to select between a group of options.
* @js-example ```html
*
*
* ```
*/
interface SearchcraftSelect {
/**
* The caption displayed below the select input.
*/
"caption"?: string;
/**
* Whether the select input is disabled.
* @default false
*/
"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.
* @default []
*/
"options": SearchcraftSelectOption[] | string;
}
/**
* 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.
*/
interface SearchcraftSlider {
/**
* The type of data the sliders are using.
* @default 'number'
*/
"dataType": 'number' | 'date';
/**
* The date granularity to use. Used to format date labels.
*/
"dateGranularity"?: 'year' | 'month' | 'day' | 'hour';
/**
* The maximum value allowed.
* @default 100
*/
"max": number;
/**
* The minimum value allowed.
* @default 0
*/
"min": number;
/**
* The step amount for the slider inputs.
* @default 1
*/
"step": number;
}
/**
* @deprecated Use `searchcraft-results-summary` instead.
* This component is deprecated and will be removed in a future version.
* Please update to use `searchcraft-results-summary` which has the same functionality.
* This component renders a summary box for RAG search result summaries.
* When the user makes a search, a network call is made to retrieve the summary content, which is then
* rendered in this box.
* NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
* @react-import ```jsx
* import { SearchcraftSummaryBox } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftSummaryBox } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftSummaryBox {
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* 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.'
* @react-import ```jsx
* import { SearchcraftTheme } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftTheme } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftTheme {
}
/**
* This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
*/
interface SearchcraftToggleButton {
/**
* The label.
* @default 'Toggle'
*/
"label": string;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* The secondary label displayed below the main label.
*/
"subLabel": string | undefined;
}
}
export interface SearchcraftButtonCustomEvent extends CustomEvent {
detail: T;
target: HTMLSearchcraftButtonElement;
}
export interface SearchcraftFacetListCustomEvent extends CustomEvent {
detail: T;
target: HTMLSearchcraftFacetListElement;
}
export interface SearchcraftInputFormCustomEvent extends CustomEvent {
detail: T;
target: HTMLSearchcraftInputFormElement;
}
export interface SearchcraftSelectCustomEvent extends CustomEvent {
detail: T;
target: HTMLSearchcraftSelectElement;
}
export interface SearchcraftSliderCustomEvent extends CustomEvent {
detail: T;
target: HTMLSearchcraftSliderElement;
}
export interface SearchcraftToggleButtonCustomEvent extends CustomEvent {
detail: T;
target: HTMLSearchcraftToggleButtonElement;
}
declare global {
/**
* An inline ad meant to be rendered in a list of search results.
*/
interface HTMLSearchcraftAdElement extends Components.SearchcraftAd, HTMLStencilElement {
}
var HTMLSearchcraftAdElement: {
prototype: HTMLSearchcraftAdElement;
new (): HTMLSearchcraftAdElement;
};
interface HTMLSearchcraftButtonElementEventMap {
"buttonClick": void;
}
/**
* 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.
*/
interface HTMLSearchcraftButtonElement extends Components.SearchcraftButton, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLSearchcraftButtonElement, ev: SearchcraftButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLSearchcraftButtonElement, ev: SearchcraftButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLSearchcraftButtonElement: {
prototype: HTMLSearchcraftButtonElement;
new (): HTMLSearchcraftButtonElement;
};
/**
* 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.
* @js-example ```html
*
* No search results found for query
*
* ```
*/
interface HTMLSearchcraftErrorMessageElement extends Components.SearchcraftErrorMessage, HTMLStencilElement {
}
var HTMLSearchcraftErrorMessageElement: {
prototype: HTMLSearchcraftErrorMessageElement;
new (): HTMLSearchcraftErrorMessageElement;
};
interface HTMLSearchcraftFacetListElementEventMap {
"facetSelectionUpdated": { paths: string[] };
}
/**
* 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`.
* @js-example ```html
*
*
*
*
*
*
*
* ```
* ```js
* // index.js
* const facetList = document.querySelector('searchcraft-facet-list');
* facetList.addEventListener('facetSelectionUpdated', () => {
* console.log('Facet selection updated');
* });
* // Programmatically toggle collapse state
* await facetList.handleCollapseToggle();
* ```
*/
interface HTMLSearchcraftFacetListElement extends Components.SearchcraftFacetList, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLSearchcraftFacetListElement, ev: SearchcraftFacetListCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLSearchcraftFacetListElement, ev: SearchcraftFacetListCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLSearchcraftFacetListElement: {
prototype: HTMLSearchcraftFacetListElement;
new (): HTMLSearchcraftFacetListElement;
};
/**
* This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
* @react-import ```jsx
* import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* ```js
* // index.js
* const filterPanel = document.querySelector('searchcraft-filter-panel');
* if (filterPanel) {
* filterPanel.items = [];
* }
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface HTMLSearchcraftFilterPanelElement extends Components.SearchcraftFilterPanel, HTMLStencilElement {
}
var HTMLSearchcraftFilterPanelElement: {
prototype: HTMLSearchcraftFilterPanelElement;
new (): HTMLSearchcraftFilterPanelElement;
};
interface HTMLSearchcraftInputFormElementEventMap {
"inputFocus": void;
"inputBlur": void;
"inputInit": void;
}
/**
* 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.
* @react-import ```jsx
* import { SearchcraftInputForm } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface HTMLSearchcraftInputFormElement extends Components.SearchcraftInputForm, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLSearchcraftInputFormElement, ev: SearchcraftInputFormCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLSearchcraftInputFormElement, ev: SearchcraftInputFormCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLSearchcraftInputFormElement: {
prototype: HTMLSearchcraftInputFormElement;
new (): HTMLSearchcraftInputFormElement;
};
/**
* This web component serves as the input label for the searchcraft-input-form component.
* @js-example ```html
*
* ```
*/
interface HTMLSearchcraftInputLabelElement extends Components.SearchcraftInputLabel, HTMLStencilElement {
}
var HTMLSearchcraftInputLabelElement: {
prototype: HTMLSearchcraftInputLabelElement;
new (): HTMLSearchcraftInputLabelElement;
};
/**
* Renders a loading spinner/loading state for use in things like the summary box.
*/
interface HTMLSearchcraftLoadingElement extends Components.SearchcraftLoading, HTMLStencilElement {
}
var HTMLSearchcraftLoadingElement: {
prototype: HTMLSearchcraftLoadingElement;
new (): HTMLSearchcraftLoadingElement;
};
/**
* This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
* @react-import ```jsx
* import { SearchcraftPagination } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftPagination } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface HTMLSearchcraftPaginationElement extends Components.SearchcraftPagination, HTMLStencilElement {
}
var HTMLSearchcraftPaginationElement: {
prototype: HTMLSearchcraftPaginationElement;
new (): HTMLSearchcraftPaginationElement;
};
/**
* Renders a button which, when clicked, turns on popover visibility.
* @react-import ```jsx
* import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
* ````
* @vue-import ```jsx
* import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* Open popover
*
* ```
* ```js
* // index.js
* const popoverButton = document.querySelector('searchcraft-popover-button');
* popoverButton.template = ({ isPopoverVisible }, { html }) => html`
* Click me
* `;
* ```
* @react-example ```jsx
* html`
* Click me
* `}
* >
* Open popover
*
* ```
* @vue-example ```jsx
* html`
* Click me
* `}
* >
* Open popover
*
* ```
*/
interface HTMLSearchcraftPopoverButtonElement extends Components.SearchcraftPopoverButton, HTMLStencilElement {
}
var HTMLSearchcraftPopoverButtonElement: {
prototype: HTMLSearchcraftPopoverButtonElement;
new (): HTMLSearchcraftPopoverButtonElement;
};
/**
* Renders the footer for the searchcraft-popover-form.
*/
interface HTMLSearchcraftPopoverFooterElement extends Components.SearchcraftPopoverFooter, HTMLStencilElement {
}
var HTMLSearchcraftPopoverFooterElement: {
prototype: HTMLSearchcraftPopoverFooterElement;
new (): HTMLSearchcraftPopoverFooterElement;
};
/**
* 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.
* @react-import ```jsx
* import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* ```js
* // index.js
* const popoverForm = document.querySelector('searchcraft-popover-form');
* popoverForm.popoverResultMappings = {};
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface HTMLSearchcraftPopoverFormElement extends Components.SearchcraftPopoverForm, HTMLStencilElement {
}
var HTMLSearchcraftPopoverFormElement: {
prototype: HTMLSearchcraftPopoverFormElement;
new (): HTMLSearchcraftPopoverFormElement;
};
/**
* A single list item rendered in a searchcraft-popover-list-view.
*/
interface HTMLSearchcraftPopoverListItemElement extends Components.SearchcraftPopoverListItem, HTMLStencilElement {
}
var HTMLSearchcraftPopoverListItemElement: {
prototype: HTMLSearchcraftPopoverListItemElement;
new (): HTMLSearchcraftPopoverListItemElement;
};
/**
* This web component is designed to display a list of results within a popover interface.
* It is consumed within the `searchcraft-popover-form` component.
* @js-example ```html
*
* ```
*/
interface HTMLSearchcraftPopoverListViewElement extends Components.SearchcraftPopoverListView, HTMLStencilElement {
}
var HTMLSearchcraftPopoverListViewElement: {
prototype: HTMLSearchcraftPopoverListViewElement;
new (): HTMLSearchcraftPopoverListViewElement;
};
/**
* This web component is designed to display the number of results returned from a search query.
* @react-import ```jsx
* import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* ```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
* html`
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
* `}
* />
* ```
* @vue-example ```jsx
* html`
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
* `}
* />
* ```
*/
interface HTMLSearchcraftResultsInfoElement extends Components.SearchcraftResultsInfo, HTMLStencilElement {
}
var HTMLSearchcraftResultsInfoElement: {
prototype: HTMLSearchcraftResultsInfoElement;
new (): HTMLSearchcraftResultsInfoElement;
};
/**
* This component renders a results summary for RAG search result summaries.
* When the user makes a search, a network call is made to retrieve the summary content, which is then
* rendered in this box.
* NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
* @react-import ```jsx
* import { SearchcraftResultsSummary } from "@searchcraft/react-sdk";
* ```
* @vue-import ```ts
* import { SearchcraftResultsSummary } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface HTMLSearchcraftResultsSummaryElement extends Components.SearchcraftResultsSummary, HTMLStencilElement {
}
var HTMLSearchcraftResultsSummaryElement: {
prototype: HTMLSearchcraftResultsSummaryElement;
new (): HTMLSearchcraftResultsSummaryElement;
};
/**
* 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.
*/
interface HTMLSearchcraftSearchResultElement extends Components.SearchcraftSearchResult, HTMLStencilElement {
}
var HTMLSearchcraftSearchResultElement: {
prototype: HTMLSearchcraftSearchResultElement;
new (): HTMLSearchcraftSearchResultElement;
};
/**
* 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
*
*
* ```
* ```js
* // index.js
* const searchResults = document.querySelector('searchcraft-search-results');
* searchResults.template = (item, index, { html }) => html`
* ${item.title}
* `;
* ```
* @react-example ```jsx
* html`
* ${item.title}
* `}
* />
* ```
* @vue-example ```jsx
* html`
* ${item.title}
* `}
* />
* ```
*/
interface HTMLSearchcraftSearchResultsElement extends Components.SearchcraftSearchResults, HTMLStencilElement {
}
var HTMLSearchcraftSearchResultsElement: {
prototype: HTMLSearchcraftSearchResultsElement;
new (): HTMLSearchcraftSearchResultsElement;
};
/**
* This web component is designed to choose the number of search results displayed.
* @react-import ```jsx
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface HTMLSearchcraftSearchResultsPerPageElement extends Components.SearchcraftSearchResultsPerPage, HTMLStencilElement {
}
var HTMLSearchcraftSearchResultsPerPageElement: {
prototype: HTMLSearchcraftSearchResultsPerPageElement;
new (): HTMLSearchcraftSearchResultsPerPageElement;
};
interface HTMLSearchcraftSelectElementEventMap {
"selectChange": string;
}
/**
* This web component is designed to allow users to select between a group of options.
* @js-example ```html
*
*
* ```
*/
interface HTMLSearchcraftSelectElement extends Components.SearchcraftSelect, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLSearchcraftSelectElement, ev: SearchcraftSelectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLSearchcraftSelectElement, ev: SearchcraftSelectCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLSearchcraftSelectElement: {
prototype: HTMLSearchcraftSelectElement;
new (): HTMLSearchcraftSelectElement;
};
interface HTMLSearchcraftSliderElementEventMap {
"rangeChanged": any;
}
/**
* 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.
*/
interface HTMLSearchcraftSliderElement extends Components.SearchcraftSlider, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLSearchcraftSliderElement, ev: SearchcraftSliderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLSearchcraftSliderElement, ev: SearchcraftSliderCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLSearchcraftSliderElement: {
prototype: HTMLSearchcraftSliderElement;
new (): HTMLSearchcraftSliderElement;
};
/**
* @deprecated Use `searchcraft-results-summary` instead.
* This component is deprecated and will be removed in a future version.
* Please update to use `searchcraft-results-summary` which has the same functionality.
* This component renders a summary box for RAG search result summaries.
* When the user makes a search, a network call is made to retrieve the summary content, which is then
* rendered in this box.
* NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
* @react-import ```jsx
* import { SearchcraftSummaryBox } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftSummaryBox } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface HTMLSearchcraftSummaryBoxElement extends Components.SearchcraftSummaryBox, HTMLStencilElement {
}
var HTMLSearchcraftSummaryBoxElement: {
prototype: HTMLSearchcraftSummaryBoxElement;
new (): HTMLSearchcraftSummaryBoxElement;
};
/**
* 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.'
* @react-import ```jsx
* import { SearchcraftTheme } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftTheme } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface HTMLSearchcraftThemeElement extends Components.SearchcraftTheme, HTMLStencilElement {
}
var HTMLSearchcraftThemeElement: {
prototype: HTMLSearchcraftThemeElement;
new (): HTMLSearchcraftThemeElement;
};
interface HTMLSearchcraftToggleButtonElementEventMap {
"toggleUpdated": boolean;
}
/**
* This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
*/
interface HTMLSearchcraftToggleButtonElement extends Components.SearchcraftToggleButton, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLSearchcraftToggleButtonElement, ev: SearchcraftToggleButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLSearchcraftToggleButtonElement, ev: SearchcraftToggleButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLSearchcraftToggleButtonElement: {
prototype: HTMLSearchcraftToggleButtonElement;
new (): HTMLSearchcraftToggleButtonElement;
};
interface HTMLElementTagNameMap {
"searchcraft-ad": HTMLSearchcraftAdElement;
"searchcraft-button": HTMLSearchcraftButtonElement;
"searchcraft-error-message": HTMLSearchcraftErrorMessageElement;
"searchcraft-facet-list": HTMLSearchcraftFacetListElement;
"searchcraft-filter-panel": HTMLSearchcraftFilterPanelElement;
"searchcraft-input-form": HTMLSearchcraftInputFormElement;
"searchcraft-input-label": HTMLSearchcraftInputLabelElement;
"searchcraft-loading": HTMLSearchcraftLoadingElement;
"searchcraft-pagination": HTMLSearchcraftPaginationElement;
"searchcraft-popover-button": HTMLSearchcraftPopoverButtonElement;
"searchcraft-popover-footer": HTMLSearchcraftPopoverFooterElement;
"searchcraft-popover-form": HTMLSearchcraftPopoverFormElement;
"searchcraft-popover-list-item": HTMLSearchcraftPopoverListItemElement;
"searchcraft-popover-list-view": HTMLSearchcraftPopoverListViewElement;
"searchcraft-results-info": HTMLSearchcraftResultsInfoElement;
"searchcraft-results-summary": HTMLSearchcraftResultsSummaryElement;
"searchcraft-search-result": HTMLSearchcraftSearchResultElement;
"searchcraft-search-results": HTMLSearchcraftSearchResultsElement;
"searchcraft-search-results-per-page": HTMLSearchcraftSearchResultsPerPageElement;
"searchcraft-select": HTMLSearchcraftSelectElement;
"searchcraft-slider": HTMLSearchcraftSliderElement;
"searchcraft-summary-box": HTMLSearchcraftSummaryBoxElement;
"searchcraft-theme": HTMLSearchcraftThemeElement;
"searchcraft-toggle-button": HTMLSearchcraftToggleButtonElement;
}
}
declare namespace LocalJSX {
/**
* An inline ad meant to be rendered in a list of search results.
*/
interface SearchcraftAd {
"adClientResponseItem"?: AdClientResponseItem;
/**
* @default 'Custom'
*/
"adSource"?: 'Custom' | 'Nativo' | 'adMarketplace';
/**
* Where the ad is being rendered within the search results div. Lifecycle behavior differs for ads being rendered in different positions, so we need to be able to handle all of those cases.
* @default 'interstitial'
*/
"renderPosition"?: 'interstitial' | 'top' | 'bottom';
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* 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.
*/
interface SearchcraftButton {
/**
* Whether the button is disabled.
* @default false
*/
"disabled"?: boolean;
/**
* Controls the visual representation of the button.
* @default 'primary'
*/
"hierarchy"?: 'primary' | 'tertiary';
/**
* The icon element.
*/
"icon"?: Element;
/**
* Should the button only display an icon.
* @default false
*/
"iconOnly"?: boolean;
/**
* The position of the icon.
* @default 'left'
*/
"iconPosition"?: 'left' | 'right';
/**
* The label for the button.
* @default 'Search'
*/
"label"?: string;
/**
* The event fired when the button is clicked.
*/
"onButtonClick"?: (event: SearchcraftButtonCustomEvent) => void;
/**
* The type of the button.
* @default 'button'
*/
"type"?: 'submit' | 'reset' | 'button';
}
/**
* 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.
* @js-example ```html
*
* No search results found for query
*
* ```
*/
interface SearchcraftErrorMessage {
}
/**
* 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`.
* @js-example ```html
*
*
*
*
*
*
*
* ```
* ```js
* // index.js
* const facetList = document.querySelector('searchcraft-facet-list');
* facetList.addEventListener('facetSelectionUpdated', () => {
* console.log('Facet selection updated');
* });
* // Programmatically toggle collapse state
* await facetList.handleCollapseToggle();
* ```
*/
interface SearchcraftFacetList {
/**
* Array of facet values to exclude from rendering.
*/
"exclude"?: string[];
/**
* The name of the field where facets are applied.
* @default ''
*/
"fieldName"?: string;
/**
* Initial collapse state of the facet section.
* @default 'open'
*/
"initialCollapseState"?: 'open' | 'closed';
/**
* Emitted when the facets are updated.
*/
"onFacetSelectionUpdated"?: (event: SearchcraftFacetListCustomEvent<{ paths: string[] }>) => void;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* The number of facets to show before displaying a "view more" link. Set to 0 to show all facets without a "view more" link.
* @default 8
*/
"viewMoreThreshold"?: number;
}
/**
* This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
* @react-import ```jsx
* import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* ```js
* // index.js
* const filterPanel = document.querySelector('searchcraft-filter-panel');
* if (filterPanel) {
* filterPanel.items = [];
* }
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftFilterPanel {
/**
* The items to filter.
* @default []
*/
"items"?: FilterItem[];
/**
* Controls whether the filter panel automatically hides/shows based on window size. - 'auto': Automatically hide/show based on window width - 'manual': User controls visibility manually
* @default 'auto'
*/
"responsiveBehavior"?: 'auto' | 'manual';
/**
* The breakpoint (in pixels) below which the filter panel will be hidden. Defaults to 768px (--sc-breakpoint-md).
* @default 768
*/
"responsiveBreakpoint"?: number;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* 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.
* @react-import ```jsx
* import { SearchcraftInputForm } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftInputForm {
/**
* Whether or not to automatically submit the search term when the input changes.
* @default true
*/
"autoSearch"?: boolean;
/**
* The label for the submit button.
*/
"buttonLabel"?: string;
/**
* Where to place the search button.
* @default 'none'
*/
"buttonPlacement"?: 'left' | 'right' | 'none';
/**
* The label rendered above the input.
*/
"inputLabel"?: string;
/**
* When the input becomes unfocused.
*/
"onInputBlur"?: (event: SearchcraftInputFormCustomEvent) => void;
/**
* When the input becomes focused.
*/
"onInputFocus"?: (event: SearchcraftInputFormCustomEvent) => void;
/**
* Event emitted when input initializes.
*/
"onInputInit"?: (event: SearchcraftInputFormCustomEvent) => void;
/**
* The placeholder's render behavior. 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus. 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
*/
"placeholderBehavior"?: 'hide-on-focus' | 'hide-on-text-entered';
/**
* The input element's placeholder value.
* @default 'Enter Search'
*/
"placeholderValue"?: string;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* The value to display in the input field.
*/
"value"?: string;
}
/**
* This web component serves as the input label for the searchcraft-input-form component.
* @js-example ```html
*
* ```
*/
interface SearchcraftInputLabel {
/**
* The classname applied to the label element.
* @default ''
*/
"inputLabelClassName"?: string | undefined;
/**
* @default ''
*/
"label"?: string;
}
/**
* Renders a loading spinner/loading state for use in things like the summary box.
*/
interface SearchcraftLoading {
"label"?: string;
}
/**
* This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
* @react-import ```jsx
* import { SearchcraftPagination } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftPagination } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftPagination {
/**
* The URL query string parameter name used to track the current page. When a user navigates to a URL that contains this parameter, the pagination component will automatically navigate to that page.
* @default "p"
*/
"pageQueryParam"?: string;
/**
* Whether to scroll to the top of the search results when pagination buttons are clicked.
* @default true
*/
"scrollToTop"?: boolean;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* Whether to use a query string parameter to track and restore the current page. Set to `false` to disable query string synchronisation entirely.
* @default true
*/
"usePageQueryParam"?: boolean;
}
/**
* Renders a button which, when clicked, turns on popover visibility.
* @react-import ```jsx
* import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
* ````
* @vue-import ```jsx
* import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* Open popover
*
* ```
* ```js
* // index.js
* const popoverButton = document.querySelector('searchcraft-popover-button');
* popoverButton.template = ({ isPopoverVisible }, { html }) => html`
* Click me
* `;
* ```
* @react-example ```jsx
* html`
* Click me
* `}
* >
* Open popover
*
* ```
* @vue-example ```jsx
* html`
* Click me
* `}
* >
* Open popover
*
* ```
*/
interface SearchcraftPopoverButton {
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* A callback function responsible for rendering the button contents.
*/
"template"?: PopoverButtonTemplate;
/**
* The type of popover button to render.
*/
"type"?: 'skeuomorphic' | 'magnifying-glass';
}
/**
* Renders the footer for the searchcraft-popover-form.
*/
interface SearchcraftPopoverFooter {
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* Optional href for the "View all" button.
*/
"viewAllResultsHref"?: string;
/**
* Optional label for the "View all" button.
*/
"viewAllResultsLabel"?: string;
}
/**
* 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.
* @react-import ```jsx
* import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* ```js
* // index.js
* const popoverForm = document.querySelector('searchcraft-popover-form');
* popoverForm.popoverResultMappings = {};
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftPopoverForm {
/**
* The hotkey that activates the popover.
* @default 'k'
*/
"hotkey"?: string;
/**
* The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
* @default 'meta'
*/
"hotkeyModifier"?: 'ctrl' | 'meta' | 'alt' | 'option';
/**
* The placeholder's render behavior. 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus. 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
*/
"placeholderBehavior"?: 'hide-on-focus' | 'hide-on-text-entered';
/**
* The input element's placeholder value.
* @default 'Enter Search'
*/
"placeholderValue"?: string;
/**
* Formats the content rendered for each result.
*/
"popoverResultMappings"?: PopoverResultMappings;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* Whether to display the AI generative summary box before the search results. NOTE: This requires the usage of a read key that has "SUMMARY" permissions and either a subscription to Searchcraft Cloud with AI features enabled or a self-hosted model connected.
* @default false
*/
"showSummaryBox"?: boolean;
/**
* 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.
* @default 'inline'
*/
"type"?: 'inline' | 'fullscreen' | 'modal';
/**
* Base URL for the "View all" footer link. The current search term will be appended (URL encoded). For example, in a CMS-backed site you might set this to `/?s=` so the final URL becomes `/?s=`.
*/
"viewAllResultsBaseUrl"?: string;
/**
* Optional label for the "View All" footer button. Defaults to "View All".
*/
"viewAllResultsLabel"?: string;
}
/**
* A single list item rendered in a searchcraft-popover-list-view.
*/
interface SearchcraftPopoverListItem {
/**
* The document position relative to the search results (For Measure)
* @default 0
*/
"documentPosition"?: number;
"item"?: SearchClientResponseItem | undefined;
"popoverResultMappings"?: PopoverResultMappings | undefined;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* This web component is designed to display a list of results within a popover interface.
* It is consumed within the `searchcraft-popover-form` component.
* @js-example ```html
*
* ```
*/
interface SearchcraftPopoverListView {
"adClientResponseItems"?: AdClientResponseItem[] | undefined;
/**
* The mappings that define how the data in the documents are mapped to the list-view-item elements.
*/
"popoverResultMappings"?: PopoverResultMappings | undefined;
/**
* The items to render in the list view.
*/
"searchClientResponseItems"?: SearchClientResponseItem[] | undefined;
"searchResultsPage": number;
"searchResultsPerPage": number;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* This web component is designed to display the number of results returned from a search query.
* @react-import ```jsx
* import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* ```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
* html`
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
* `}
* />
* ```
* @vue-example ```jsx
* html`
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
* `}
* />
* ```
*/
interface SearchcraftResultsInfo {
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* A callback function responsible for rendering the results info.
*/
"template"?: ResultsInfoTemplate;
}
/**
* This component renders a results summary for RAG search result summaries.
* When the user makes a search, a network call is made to retrieve the summary content, which is then
* rendered in this box.
* NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
* @react-import ```jsx
* import { SearchcraftResultsSummary } from "@searchcraft/react-sdk";
* ```
* @vue-import ```ts
* import { SearchcraftResultsSummary } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftResultsSummary {
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* 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.
*/
interface SearchcraftSearchResult {
/**
* The position in the document. Used with the "document_clicked" measure event.
* @default 0
*/
"documentPosition"?: number;
/**
* The index.
*/
"index": number;
"item"?: SearchClientResponseItem;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* A callback function responsible for rendering a result.
*/
"template"?: SearchResultTemplate;
}
/**
* 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
*
*
* ```
* ```js
* // index.js
* const searchResults = document.querySelector('searchcraft-search-results');
* searchResults.template = (item, index, { html }) => html`
* ${item.title}
* `;
* ```
* @react-example ```jsx
* html`
* ${item.title}
* `}
* />
* ```
* @vue-example ```jsx
* html`
* ${item.title}
* `}
* />
* ```
*/
interface SearchcraftSearchResults {
/**
* A query that will appears when the component initializes or the search term is ''..
*/
"initialQuery"?: string;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* A callback function responsible for rendering a result. Passed to `searchcraft-search-result`.
*/
"template"?: SearchResultTemplate;
}
/**
* This web component is designed to choose the number of search results displayed.
* @react-import ```jsx
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface 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.
* @default 20
*/
"increment"?: string | number;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* This web component is designed to allow users to select between a group of options.
* @js-example ```html
*
*
* ```
*/
interface SearchcraftSelect {
/**
* The caption displayed below the select input.
*/
"caption"?: string;
/**
* Whether the select input is disabled.
* @default false
*/
"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 event fired when the select is changed.
*/
"onSelectChange"?: (event: SearchcraftSelectCustomEvent) => void;
/**
* The options for the select input.
* @default []
*/
"options"?: SearchcraftSelectOption[] | string;
}
/**
* 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.
*/
interface SearchcraftSlider {
/**
* The type of data the sliders are using.
* @default 'number'
*/
"dataType"?: 'number' | 'date';
/**
* The date granularity to use. Used to format date labels.
*/
"dateGranularity"?: 'year' | 'month' | 'day' | 'hour';
/**
* The maximum value allowed.
* @default 100
*/
"max"?: number;
/**
* The minimum value allowed.
* @default 0
*/
"min"?: number;
/**
* When the range has changed.
*/
"onRangeChanged"?: (event: SearchcraftSliderCustomEvent) => void;
/**
* The step amount for the slider inputs.
* @default 1
*/
"step"?: number;
}
/**
* @deprecated Use `searchcraft-results-summary` instead.
* This component is deprecated and will be removed in a future version.
* Please update to use `searchcraft-results-summary` which has the same functionality.
* This component renders a summary box for RAG search result summaries.
* When the user makes a search, a network call is made to retrieve the summary content, which is then
* rendered in this box.
* NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
* @react-import ```jsx
* import { SearchcraftSummaryBox } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftSummaryBox } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftSummaryBox {
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
}
/**
* 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.'
* @react-import ```jsx
* import { SearchcraftTheme } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftTheme } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
interface SearchcraftTheme {
}
/**
* This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
*/
interface SearchcraftToggleButton {
/**
* The label.
* @default 'Toggle'
*/
"label"?: string;
/**
* When the toggle element is changed.
*/
"onToggleUpdated"?: (event: SearchcraftToggleButtonCustomEvent) => void;
/**
* The id of the Searchcraft instance that this component should use.
*/
"searchcraftId"?: string;
/**
* The secondary label displayed below the main label.
*/
"subLabel"?: string | undefined;
}
interface IntrinsicElements {
"searchcraft-ad": SearchcraftAd;
"searchcraft-button": SearchcraftButton;
"searchcraft-error-message": SearchcraftErrorMessage;
"searchcraft-facet-list": SearchcraftFacetList;
"searchcraft-filter-panel": SearchcraftFilterPanel;
"searchcraft-input-form": SearchcraftInputForm;
"searchcraft-input-label": SearchcraftInputLabel;
"searchcraft-loading": SearchcraftLoading;
"searchcraft-pagination": SearchcraftPagination;
"searchcraft-popover-button": SearchcraftPopoverButton;
"searchcraft-popover-footer": SearchcraftPopoverFooter;
"searchcraft-popover-form": SearchcraftPopoverForm;
"searchcraft-popover-list-item": SearchcraftPopoverListItem;
"searchcraft-popover-list-view": SearchcraftPopoverListView;
"searchcraft-results-info": SearchcraftResultsInfo;
"searchcraft-results-summary": SearchcraftResultsSummary;
"searchcraft-search-result": SearchcraftSearchResult;
"searchcraft-search-results": SearchcraftSearchResults;
"searchcraft-search-results-per-page": SearchcraftSearchResultsPerPage;
"searchcraft-select": SearchcraftSelect;
"searchcraft-slider": SearchcraftSlider;
"searchcraft-summary-box": SearchcraftSummaryBox;
"searchcraft-theme": SearchcraftTheme;
"searchcraft-toggle-button": SearchcraftToggleButton;
}
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
export namespace JSX {
interface IntrinsicElements {
/**
* An inline ad meant to be rendered in a list of search results.
*/
"searchcraft-ad": LocalJSX.SearchcraftAd & JSXBase.HTMLAttributes;
/**
* 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.
*/
"searchcraft-button": LocalJSX.SearchcraftButton & JSXBase.HTMLAttributes;
/**
* 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.
* @js-example ```html
*
* No search results found for query
*
* ```
*/
"searchcraft-error-message": LocalJSX.SearchcraftErrorMessage & JSXBase.HTMLAttributes;
/**
* 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`.
* @js-example ```html
*
*
*
*
*
*
*
* ```
* ```js
* // index.js
* const facetList = document.querySelector('searchcraft-facet-list');
* facetList.addEventListener('facetSelectionUpdated', () => {
* console.log('Facet selection updated');
* });
* // Programmatically toggle collapse state
* await facetList.handleCollapseToggle();
* ```
*/
"searchcraft-facet-list": LocalJSX.SearchcraftFacetList & JSXBase.HTMLAttributes;
/**
* This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
* @react-import ```jsx
* import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* ```js
* // index.js
* const filterPanel = document.querySelector('searchcraft-filter-panel');
* if (filterPanel) {
* filterPanel.items = [];
* }
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
"searchcraft-filter-panel": LocalJSX.SearchcraftFilterPanel & JSXBase.HTMLAttributes;
/**
* 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.
* @react-import ```jsx
* import { SearchcraftInputForm } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
"searchcraft-input-form": LocalJSX.SearchcraftInputForm & JSXBase.HTMLAttributes;
/**
* This web component serves as the input label for the searchcraft-input-form component.
* @js-example ```html
*
* ```
*/
"searchcraft-input-label": LocalJSX.SearchcraftInputLabel & JSXBase.HTMLAttributes;
/**
* Renders a loading spinner/loading state for use in things like the summary box.
*/
"searchcraft-loading": LocalJSX.SearchcraftLoading & JSXBase.HTMLAttributes;
/**
* This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
* @react-import ```jsx
* import { SearchcraftPagination } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftPagination } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
"searchcraft-pagination": LocalJSX.SearchcraftPagination & JSXBase.HTMLAttributes;
/**
* Renders a button which, when clicked, turns on popover visibility.
* @react-import ```jsx
* import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
* ````
* @vue-import ```jsx
* import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* Open popover
*
* ```
* ```js
* // index.js
* const popoverButton = document.querySelector('searchcraft-popover-button');
* popoverButton.template = ({ isPopoverVisible }, { html }) => html`
* Click me
* `;
* ```
* @react-example ```jsx
* html`
* Click me
* `}
* >
* Open popover
*
* ```
* @vue-example ```jsx
* html`
* Click me
* `}
* >
* Open popover
*
* ```
*/
"searchcraft-popover-button": LocalJSX.SearchcraftPopoverButton & JSXBase.HTMLAttributes;
/**
* Renders the footer for the searchcraft-popover-form.
*/
"searchcraft-popover-footer": LocalJSX.SearchcraftPopoverFooter & JSXBase.HTMLAttributes;
/**
* 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.
* @react-import ```jsx
* import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* ```js
* // index.js
* const popoverForm = document.querySelector('searchcraft-popover-form');
* popoverForm.popoverResultMappings = {};
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
"searchcraft-popover-form": LocalJSX.SearchcraftPopoverForm & JSXBase.HTMLAttributes;
/**
* A single list item rendered in a searchcraft-popover-list-view.
*/
"searchcraft-popover-list-item": LocalJSX.SearchcraftPopoverListItem & JSXBase.HTMLAttributes;
/**
* This web component is designed to display a list of results within a popover interface.
* It is consumed within the `searchcraft-popover-form` component.
* @js-example ```html
*
* ```
*/
"searchcraft-popover-list-view": LocalJSX.SearchcraftPopoverListView & JSXBase.HTMLAttributes;
/**
* This web component is designed to display the number of results returned from a search query.
* @react-import ```jsx
* import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* ```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
* html`
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
* `}
* />
* ```
* @vue-example ```jsx
* html`
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
* `}
* />
* ```
*/
"searchcraft-results-info": LocalJSX.SearchcraftResultsInfo & JSXBase.HTMLAttributes;
/**
* This component renders a results summary for RAG search result summaries.
* When the user makes a search, a network call is made to retrieve the summary content, which is then
* rendered in this box.
* NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
* @react-import ```jsx
* import { SearchcraftResultsSummary } from "@searchcraft/react-sdk";
* ```
* @vue-import ```ts
* import { SearchcraftResultsSummary } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
"searchcraft-results-summary": LocalJSX.SearchcraftResultsSummary & JSXBase.HTMLAttributes;
/**
* 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.
*/
"searchcraft-search-result": LocalJSX.SearchcraftSearchResult & JSXBase.HTMLAttributes;
/**
* 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
*
*
* ```
* ```js
* // index.js
* const searchResults = document.querySelector('searchcraft-search-results');
* searchResults.template = (item, index, { html }) => html`
* ${item.title}
* `;
* ```
* @react-example ```jsx
* html`
* ${item.title}
* `}
* />
* ```
* @vue-example ```jsx
* html`
* ${item.title}
* `}
* />
* ```
*/
"searchcraft-search-results": LocalJSX.SearchcraftSearchResults & JSXBase.HTMLAttributes;
/**
* This web component is designed to choose the number of search results displayed.
* @react-import ```jsx
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
"searchcraft-search-results-per-page": LocalJSX.SearchcraftSearchResultsPerPage & JSXBase.HTMLAttributes;
/**
* This web component is designed to allow users to select between a group of options.
* @js-example ```html
*
*
* ```
*/
"searchcraft-select": LocalJSX.SearchcraftSelect & JSXBase.HTMLAttributes;
/**
* 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.
*/
"searchcraft-slider": LocalJSX.SearchcraftSlider & JSXBase.HTMLAttributes;
/**
* @deprecated Use `searchcraft-results-summary` instead.
* This component is deprecated and will be removed in a future version.
* Please update to use `searchcraft-results-summary` which has the same functionality.
* This component renders a summary box for RAG search result summaries.
* When the user makes a search, a network call is made to retrieve the summary content, which is then
* rendered in this box.
* NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
* @react-import ```jsx
* import { SearchcraftSummaryBox } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftSummaryBox } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
"searchcraft-summary-box": LocalJSX.SearchcraftSummaryBox & JSXBase.HTMLAttributes;
/**
* 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.'
* @react-import ```jsx
* import { SearchcraftTheme } from "@searchcraft/react-sdk";
* ```
* @vue-import ```jsx
* import { SearchcraftTheme } from "@searchcraft/vue-sdk";
* ```
* @js-example ```html
*
* ```
* @react-example ```jsx
*
* ```
* @vue-example ```jsx
*
* ```
*/
"searchcraft-theme": LocalJSX.SearchcraftTheme & JSXBase.HTMLAttributes;
/**
* This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
*/
"searchcraft-toggle-button": LocalJSX.SearchcraftToggleButton & JSXBase.HTMLAttributes;
}
}
}