npm - @searchcraft/javascript-sdk - Versions diffs - 0.6.0 → 0.7.0 - Mend

@searchcraft/javascript-sdk 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (186) hide show

package/dist/cjs/searchcraft-filter-panel.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"searchcraft-filter-panel.entry.cjs.js","mappings":"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","names":["useSearchcraftStore","h","getMillis"],"sources":["src/components/searchcraft-filter-panel/searchcraft-filter-panel.module.scss?tag=searchcraft-filter-panel","src/components/searchcraft-filter-panel/searchcraft-filter-panel.tsx"],"sourcesContent":[".searchcraft-filter-panel {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.searchcraft-filter-panel-section {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.searchcraft-filter-panel-label {\n @include body-small-bold();\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport type {\n FilterItem,\n DateRangeFilterItem,\n NumericFilterItem,\n ExactMatchToggleFilterItem,\n FacetsFilterItem,\n} from '../../types/searchcraft-filter-panel.types';\nimport { useSearchcraftStore } from '@provider/store';\nimport { getMillis } from '@utils';\n\n/*\n This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.\n \n ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-filter-panel />\n * ```\n /\n@Component({\n tag: 'searchcraft-filter-panel',\n styleUrl: 'searchcraft-filter-panel.module.scss',\n shadow: false,\n})\nexport class SearchcraftFilterPanel {\n /\n The items to filter.\n /\n @Prop() items: FilterItem[] = [];\n\n @State() unsubscribe: (() => void) \| undefined;\n @State() lastQuery: string \| undefined;\n\n private searchStore = useSearchcraftStore.getState();\n\n componentDidLoad() {\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n if (this.lastQuery !== state.query) {\n // A place to put actions to do when the query changes\n }\n this.lastQuery = state.query \|\| '';\n });\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n }\n\n handleDateRangeChanged(fieldName: string, min: number, max: number) {\n const start = new Date(min);\n const end = new Date(max);\n this.searchStore.addRangeValueForIndexField({\n fieldName,\n value: `${fieldName}:[${start.toISOString()} TO ${end.toISOString()}]`,\n });\n\n this.searchStore.search();\n }\n\n handleNumericRangeChanged(fieldName: string, min: number, max: number) {\n this.searchStore.addRangeValueForIndexField({\n fieldName,\n value: `${fieldName}:[${min} TO ${max}]`,\n });\n this.searchStore.search();\n }\n\n handleFacetSelectionUpdated(fieldName: string, paths: string[]) {\n if (paths.length > 0) {\n this.searchStore.addFacetPathsForIndexField({\n fieldName,\n value: `${fieldName}: IN [${paths.join(' ')}]`,\n });\n } else {\n this.searchStore.removeFacetPathsForIndexField(fieldName);\n }\n this.searchStore.search();\n }\n\n handleExactMatchToggleUpdated(isActive: boolean) {\n this.searchStore.setSearchMode(isActive ? 'exact' : 'fuzzy');\n this.searchStore.search();\n }\n\n handleMostRecentToggleUpdated(isActive: boolean) {\n this.searchStore.setSortType(isActive ? 'desc' : 'asc');\n this.searchStore.search();\n }\n\n /\n Iterate through `items` and render them based on `type`\n */\n render() {\n return (\n <div class='searchcraft-filter-panel'>\n {this.items.map((filterItem) => {\n switch (filterItem.type) {\n case 'dateRange': {\n const item = filterItem as DateRangeFilterItem;\n const min = new Date(item.options.minDate).getTime();\n const max = new Date(item.options.maxDate).getTime();\n const granularityValue = getMillis(item.options.granularity);\n // return date range slider\n return (\n <div class='searchcraft-filter-panel-section'>\n <p class='searchcraft-filter-panel-label'>\n {filterItem.label}\n </p>\n <searchcraft-slider\n min={min}\n max={max}\n granularity={granularityValue}\n dataType='date'\n onRangeChanged={(event) => {\n this.handleDateRangeChanged(\n item.fieldName,\n event.detail.startValue,\n event.detail.endValue,\n );\n }}\n />\n </div>\n );\n }\n case 'numericRange': {\n const item = filterItem as NumericFilterItem;\n // return date range slider\n return (\n <div class='searchcraft-filter-panel-section'>\n <p class='searchcraft-filter-panel-label'>\n {filterItem.label}\n </p>\n <searchcraft-slider\n min={item.options.min}\n max={item.options.max}\n granularity={item.options.granularity}\n onRangeChanged={(event) => {\n this.handleNumericRangeChanged(\n item.fieldName,\n event.detail.startValue,\n event.detail.endValue,\n );\n }}\n />\n </div>\n );\n }\n case 'facets': {\n const item = filterItem as FacetsFilterItem;\n // return \"filters-list\"\n return (\n <div class='searchcraft-filter-panel-section'>\n <p class='searchcraft-filter-panel-label'>\n {filterItem.label}\n </p>\n <searchcraft-facet-list\n fieldName={item.fieldName}\n onFacetSelectionUpdated={(event) => {\n this.handleFacetSelectionUpdated(\n item.fieldName,\n event.detail.paths,\n );\n }}\n />\n </div>\n );\n }\n case 'exactMatchToggle': {\n const item = filterItem as ExactMatchToggleFilterItem;\n return (\n <searchcraft-toggle-button\n label={item.label}\n subLabel={item.options.subLabel}\n onToggleUpdated={(event) => {\n this.handleExactMatchToggleUpdated(event.detail);\n }}\n />\n );\n }\n case 'mostRecentToggle': {\n const item = filterItem as ExactMatchToggleFilterItem;\n return (\n <searchcraft-toggle-button\n label={item.label}\n subLabel={item.options.subLabel}\n onToggleUpdated={(event) => {\n this.handleMostRecentToggleUpdated(event.detail);\n }}\n />\n );\n }\n }\n })}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"searchcraft-filter-panel.entry.cjs.js","mappings":"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","names":["useSearchcraftStore","h","getMillis"],"sources":["src/components/searchcraft-filter-panel/searchcraft-filter-panel.module.scss?tag=searchcraft-filter-panel","src/components/searchcraft-filter-panel/searchcraft-filter-panel.tsx"],"sourcesContent":[".searchcraft-filter-panel {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.searchcraft-filter-panel-section {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.searchcraft-filter-panel-label {\n @include body-small-bold();\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport type {\n FilterItem,\n DateRangeFilterItem,\n NumericFilterItem,\n ExactMatchToggleFilterItem,\n FacetsFilterItem,\n} from '../../types/searchcraft-filter-panel.types';\nimport { useSearchcraftStore } from '@provider/store';\nimport { getMillis } from '@utils';\n\n/*\n This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.\n \n ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-filter-panel />\n * ```\n /\n@Component({\n tag: 'searchcraft-filter-panel',\n styleUrl: 'searchcraft-filter-panel.module.scss',\n shadow: false,\n})\nexport class SearchcraftFilterPanel {\n /\n The items to filter.\n /\n @Prop() items: FilterItem[] = [];\n\n @State() unsubscribe: (() => void) \| undefined;\n @State() lastQuery: string \| undefined;\n\n private searchStore = useSearchcraftStore.getState();\n\n componentDidLoad() {\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n if (this.lastQuery !== state.query) {\n // A place to put actions to do when the query changes\n }\n this.lastQuery = state.query \|\| '';\n });\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n }\n\n handleDateRangeChanged(fieldName: string, min: number, max: number) {\n const start = new Date(min);\n const end = new Date(max);\n this.searchStore.addRangeValueForIndexField({\n fieldName,\n value: `${fieldName}:[${start.toISOString()} TO ${end.toISOString()}]`,\n });\n\n this.searchStore.search();\n }\n\n handleNumericRangeChanged(fieldName: string, min: number, max: number) {\n this.searchStore.addRangeValueForIndexField({\n fieldName,\n value: `${fieldName}:[${min} TO ${max}]`,\n });\n this.searchStore.search();\n }\n\n handleFacetSelectionUpdated(fieldName: string, paths: string[]) {\n if (paths.length > 0) {\n this.searchStore.addFacetPathsForIndexField({\n fieldName,\n value: `${fieldName}: IN [${paths.join(' ')}]`,\n });\n } else {\n this.searchStore.removeFacetPathsForIndexField(fieldName);\n }\n this.searchStore.search();\n }\n\n handleExactMatchToggleUpdated(isActive: boolean) {\n this.searchStore.setSearchMode(isActive ? 'exact' : 'fuzzy');\n this.searchStore.search();\n }\n\n handleMostRecentToggleUpdated(isActive: boolean) {\n this.searchStore.setSortType(isActive ? 'desc' : 'asc');\n this.searchStore.search();\n }\n\n /\n Iterate through `items` and render them based on `type`\n */\n render() {\n return (\n <div class='searchcraft-filter-panel'>\n {this.items.map((filterItem) => {\n switch (filterItem.type) {\n case 'dateRange': {\n const item = filterItem as DateRangeFilterItem;\n const min = new Date(item.options.minDate).getTime();\n const max = new Date(item.options.maxDate).getTime();\n const granularityValue = getMillis(item.options.granularity);\n // return date range slider\n return (\n <div class='searchcraft-filter-panel-section'>\n <p class='searchcraft-filter-panel-label'>\n {filterItem.label}\n </p>\n <searchcraft-slider\n min={min}\n max={max}\n granularity={granularityValue}\n dataType='date'\n onRangeChanged={(event) => {\n this.handleDateRangeChanged(\n item.fieldName,\n event.detail.startValue,\n event.detail.endValue,\n );\n }}\n />\n </div>\n );\n }\n case 'numericRange': {\n const item = filterItem as NumericFilterItem;\n // return date range slider\n return (\n <div class='searchcraft-filter-panel-section'>\n <p class='searchcraft-filter-panel-label'>\n {filterItem.label}\n </p>\n <searchcraft-slider\n min={item.options.min}\n max={item.options.max}\n granularity={item.options.granularity}\n onRangeChanged={(event) => {\n this.handleNumericRangeChanged(\n item.fieldName,\n event.detail.startValue,\n event.detail.endValue,\n );\n }}\n />\n </div>\n );\n }\n case 'facets': {\n const item = filterItem as FacetsFilterItem;\n // return \"filters-list\"\n return (\n <div class='searchcraft-filter-panel-section'>\n <p class='searchcraft-filter-panel-label'>\n {filterItem.label}\n </p>\n <searchcraft-facet-list\n fieldName={item.fieldName}\n onFacetSelectionUpdated={(event) => {\n this.handleFacetSelectionUpdated(\n item.fieldName,\n event.detail.paths,\n );\n }}\n />\n </div>\n );\n }\n case 'exactMatchToggle': {\n const item = filterItem as ExactMatchToggleFilterItem;\n return (\n <searchcraft-toggle-button\n label={item.label}\n subLabel={item.options.subLabel}\n onToggleUpdated={(event) => {\n this.handleExactMatchToggleUpdated(event.detail);\n }}\n />\n );\n }\n case 'mostRecentToggle': {\n const item = filterItem as ExactMatchToggleFilterItem;\n return (\n <searchcraft-toggle-button\n label={item.label}\n subLabel={item.options.subLabel}\n onToggleUpdated={(event) => {\n this.handleMostRecentToggleUpdated(event.detail);\n }}\n />\n );\n }\n }\n })}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/searchcraft-input-form_2.cjs.entry.js CHANGED Viewed

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b3b77ea2.js');
-const store = require('./store-d7ebcf7a.js');
+const index = require('./index-d4b4a45e.js');
+const store = require('./store-abe47006.js');
 const styles = require('./styles-7b2d06f2.js');
 const index$1 = require('./index-5b0b9d4c.js');
 const units = require('./units-fe4d8083.js');
 const name = "@searchcraft/javascript-sdk";
-const version = "0.6.0";
+const version = "0.7.0";
 const description = "Searchcraft Javascript SDK";
 const author = "Searchcraft";
 const license = "Apache-2.0";
@@ -53,10 +53,11 @@ const scripts = {
 	generate: "stencil generate"
 };
 const dependencies = {
+	"@stencil/vue-output-target": "^0.9.2",
 	classnames: "^2.3.2"
 };
 const devDependencies = {
-	"@searchcraft/core": "^0.6.0",
+	"@searchcraft/core": "^0.7.0",
 	"@searchcraft/javascript-sdk": "*",
 	"@stencil/core": "^4.7.0",
 	"@stencil/react-output-target": "^0.8.2",
@@ -97,6 +98,29 @@ const SearchcraftInput = class {
         this.inputBlur = index.createEvent(this, "inputBlur", 7);
         this.inputInit = index.createEvent(this, "inputInit", 7);
         this.querySubmit = index.createEvent(this, "querySubmit", 7);
+        /**
+         * Whether or not to automatically submit the search term when the input changes.
+         */
+        this.autoSearch = true;
+        /**
+         * Where to place the search button.
+         */
+        this.buttonPlacement = 'none';
+        /**
+         * A custom styles object to be applied to the input element.
+         */
+        this.customStyles = {};
+        /**
+         * The input element's placeholder value.
+         */
+        this.placeholderValue = 'Enter Search';
+        /**
+         * The starting value of the input element.
+         */
+        this.searchTerm = '';
+        this.inputValue = this.searchTerm;
+        this.error = false;
+        this.isSearchcraftInitialized = false;
         this.searchStore = store.useSearchcraftStore.getState();
         this.handleOnInput = (event) => {
             const input = event.target;
@@ -143,17 +167,6 @@ const SearchcraftInput = class {
             event.preventDefault();
             await this.performSearch(this.searchTerm);
         };
-        this.config = undefined;
-        this.autoSearch = true;
-        this.buttonPlacement = 'none';
-        this.buttonLabel = undefined;
-        this.inputLabel = undefined;
-        this.customStyles = {};
-        this.placeholderValue = 'Enter Search';
-        this.searchTerm = '';
-        this.inputValue = this.searchTerm;
-        this.error = false;
-        this.isSearchcraftInitialized = false;
     }
     init() {
         if (this.config && !this.isSearchcraftInitialized) {
@@ -200,8 +213,6 @@ const SearchcraftPopoverListViewStyle0 = searchcraftPopoverListViewModuleCss;
 const SearchcraftPopoverListView = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.popoverResultMappings = undefined;
-        this.documents = undefined;
     }
     renderDocument(document, index$1) {
         /**

package/dist/cjs/searchcraft-input-form_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"searchcraft-input-form.searchcraft-popover-list-view.entry.cjs.js","mappings":"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","names":["useSearchcraftStore","SearchcraftCore","parseCustomStyles","classNames","h","index","getDocumentValueFromSearchResultMapping"],"sources":["src/components/searchcraft-input-form/searchcraft-input-form.module.scss?tag=searchcraft-input-form","src/components/searchcraft-input-form/searchcraft-input-form.tsx","src/components/searchcraft-popover-list-view/searchcraft-popover-list-view.module.scss?tag=searchcraft-popover-list-view","src/components/searchcraft-popover-list-view/searchcraft-popover-list-view.tsx"],"sourcesContent":[".searchcraft-input-grid {\n display: grid;\n gap: 4px 8px;\n}\n\n.searchcraft-input-grid-buttonLeft {\n grid-template-rows: repeat(3, auto);\n grid-template-columns: auto 1fr;\n\n & .searchcraft-input-button-wrapper {\n grid-column: 1 / span 1;\n grid-row: 2 / span 1;\n }\n\n & .searchcraft-input-label-wrapper {\n grid-column: 2 / span 1;\n grid-row: 1 / span 1;\n }\n\n & .searchcraft-input-error-wrapper {\n grid-column: 2 / span 1;\n grid-row: 3 / span 1;\n }\n\n & .searchcraft-input-wrapper {\n grid-column: 2 / span 1;\n grid-row: 2 / span 1;\n }\n}\n\n.searchcraft-input-grid-buttonRight {\n grid-template-rows: repeat(3, auto);\n grid-template-columns: 1fr auto;\n\n & .searchcraft-input-button-wrapper {\n grid-column: 2 / span 1;\n grid-row: 2 / span 1;\n }\n\n & .searchcraft-input-label-wrapper {\n grid-column: 1 / span 1;\n grid-row: 1 / span 1;\n }\n\n & .searchcraft-input-error-wrapper {\n grid-column: 1 / span 1;\n grid-row: 3 / span 1;\n }\n\n & .searchcraft-input-wrapper {\n grid-column: 1 / span 1;\n grid-row: 2 / span 1;\n }\n}\n\n.searchcraft-input-grid-buttonNone {\n grid-template-rows: repeat(3, auto);\n grid-template-columns: auto;\n\n & .searchcraft-input-button-wrapper {\n display: none;\n }\n\n & .searchcraft-input-label-wrapper {\n grid-column: 1 / span 1;\n grid-row: 1 / span 1;\n }\n\n & .searchcraft-input-error-wrapper {\n grid-column: 1 / span 1;\n grid-row: 3 / span 1;\n }\n\n & .searchcraft-input-wrapper {\n grid-column: 1 / span 1;\n grid-row: 2 / span 1;\n }\n}\n\n.searchcraft-input-wrapper {\n position: relative;\n display: flex;\n}\n\n.searchcraft-input {\n @include body();\n background-color: var(--sc-surface-neutral-secondary);\n border-radius: var(--sc-input-border-radius);\n border: none;\n color: var(--sc-content-neutral-primary);\n outline: none;\n padding-left: var(--sc-input-padding-left);\n padding-right: var(--sc-input-padding-right);\n padding-top: 12px;\n padding-bottom: 12px;\n flex: 1;\n\n &::placeholder {\n color: var(--sc-content-disabled);\n }\n\n &:focus {\n outline: var(--sc-border-brand) solid 2px;\n }\n\n &:focus::placeholder {\n opacity: 0;\n }\n}\n\n.searchcraft-input.error {\n color: var(--sc-content-danger);\n outline: var(--sc-border-danger) solid 2px;\n\n &:focus {\n outline: var(--sc-border-danger) solid 2px;\n }\n}\n\n.searchcraft-input-search-icon-wrapper {\n align-items: center;\n justify-content: center;\n display: flex;\n position: absolute;\n pointer-events: none;\n bottom: 0;\n left: 0;\n top: 0;\n width: var(--sc-input-padding-left);\n}\n\n.searchcraft-input-search-icon {\n pointer-events: none;\n width: var(--sc-input-search-icon-size);\n height: var(--sc-input-search-icon-size);\n}\n\n.searchcraft-input-clear-button {\n all: unset;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n position: absolute;\n border: none;\n outline: none;\n bottom: 0;\n right: 0;\n top: 0;\n width: var(--sc-input-padding-right);\n}\n\n.searchcraft-input-clear-icon {\n width: var(--sc-input-clear-icon-size);\n height: var(--sc-input-clear-icon-size);\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Event,\n type EventEmitter,\n Watch,\n} from '@stencil/core';\n\nimport { type SearchcraftConfig, SearchcraftCore } from '@searchcraft/core';\nimport packageJson from '../../../package.json';\n\nimport { parseCustomStyles } from '@utils';\nimport { useSearchcraftStore } from '@provider/store';\nimport classNames from 'classnames';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n detail: T;\n target: HTMLSearchcraftInputFormElement;\n}\n\n/*\n This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.\n * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.\n \n ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-input-form placeholder-value=\"Search here\" />\n * ```\n \n ```js\n * // index.js\n * const searchInputForm = document.querySelector('searchcraft-input-form');\n \n seardchInputForm.config = {\n * index: [],\n * readKey: '',\n * endpointUrl: '',\n * };\n \n searchForm.addEventListener('querySubmit', (event) => {\n * console.log('Query submitted', event.detail);\n * });\n * ```\n /\n@Component({\n tag: 'searchcraft-input-form',\n styleUrl: 'searchcraft-input-form.module.scss',\n shadow: false,\n})\nexport class SearchcraftInput {\n /\n The Searchcraft config object.\n /\n @Prop() config: SearchcraftConfig \| undefined;\n /\n Whether or not to automatically submit the search term when the input changes.\n /\n @Prop() autoSearch = true;\n /\n Where to place the search button.\n /\n @Prop() buttonPlacement: 'left' \| 'right' \| 'none' = 'none';\n /\n The label for the submit button.\n /\n @Prop() buttonLabel: string \| undefined;\n /\n The label rendered above the input.\n /\n @Prop() inputLabel: string \| undefined;\n /\n A custom styles object to be applied to the input element.\n /\n @Prop() customStyles: string \| Record<string, string> = {};\n /\n The input element's placeholder value.\n /\n @Prop() placeholderValue = 'Enter Search';\n /\n The starting value of the input element.\n /\n @Prop() searchTerm = '';\n /\n When the input is cleared.\n /\n @Event() inputCleared: EventEmitter<void>;\n /\n When no results are returned.\n /\n @Event() noResultsReceived: EventEmitter<void>;\n /\n When the input becomes focused.\n /\n @Event() inputFocus: EventEmitter<void>;\n /\n When the input becomes unfocused.\n /\n @Event() inputBlur: EventEmitter<void>;\n /\n Event emitted when input initializes.\n /\n @Event() inputInit: EventEmitter<void>;\n /\n Event emitted when a query has been submitted.\n /\n @Event() querySubmit: EventEmitter<string>;\n\n @State() inputValue = this.searchTerm;\n @State() error = false;\n @State() isSearchcraftInitialized = false;\n\n private searchStore = useSearchcraftStore.getState();\n\n init() {\n if (this.config && !this.isSearchcraftInitialized) {\n const searchcraft = new SearchcraftCore(this.config, {\n sdkName: packageJson.name,\n sdkVersion: packageJson.version,\n });\n this.searchStore.initialize(searchcraft, true);\n this.isSearchcraftInitialized = true;\n this.inputInit.emit();\n }\n }\n\n componentDidLoad() {\n this.init();\n }\n\n @Watch('config')\n onConfigChange() {\n this.init();\n }\n\n handleOnInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.inputValue = input.value;\n\n if (input.value.trim() === '') {\n this.inputCleared.emit();\n this.searchTerm = '';\n this.searchStore.setQuery('');\n this.searchStore.setSearchResults(null);\n return;\n }\n\n if (!this.autoSearch) {\n return;\n }\n\n this.performSearch(input.value);\n };\n\n private performSearch = async (value: string) => {\n if (value === useSearchcraftStore.getState().query) {\n return;\n }\n\n this.searchTerm = value.trim();\n this.error = false;\n this.searchStore.setQuery(this.searchTerm);\n this.querySubmit.emit(this.searchTerm);\n\n try {\n await this.searchStore.search();\n } catch (error) {\n this.error = true;\n this.inputCleared.emit();\n }\n };\n\n handleClearInput = () => {\n this.inputValue = '';\n this.searchTerm = '';\n this.searchStore.setQuery('');\n this.searchStore.setSearchResults(null);\n this.error = false;\n\n if (this.inputCleared) {\n this.inputCleared.emit();\n }\n };\n\n handleFormSubmit = async (event: Event) => {\n event.preventDefault();\n await this.performSearch(this.searchTerm);\n };\n\n render() {\n const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n const isShowingClearButton = this.inputValue.length > 0;\n\n const inputGridClassNames = classNames('searchcraft-input-grid', {\n 'searchcraft-input-grid-buttonLeft': this.buttonPlacement === 'left',\n 'searchcraft-input-grid-buttonRight': this.buttonPlacement === 'right',\n 'searchcraft-input-grid-buttonNone': this.buttonPlacement === 'none',\n });\n\n const shouldHaveVerticalGap = this.inputLabel \|\| this.error;\n const inputGridStyles = {\n gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',\n };\n\n return (\n <form class='searchcraft-input-form' onSubmit={this.handleFormSubmit}>\n <div class={inputGridClassNames} style={inputGridStyles}>\n <div class='searchcraft-input-button-wrapper'>\n <searchcraft-button\n onButtonClick={this.handleFormSubmit}\n label={this.buttonLabel}\n />\n </div>\n {this.inputLabel && (\n <div class='searchcraft-input-label-wrapper'>\n <searchcraft-input-label label={this.inputLabel} />\n </div>\n )}\n {this.error && (\n <div class='searchcraft-input-error-wrapper'>\n <searchcraft-error-message errorMessage='Something went wrong.' />\n </div>\n )}\n <div class='searchcraft-input-wrapper'>\n <input\n autoComplete='off'\n class='searchcraft-input'\n onFocus={() => this.inputFocus.emit()}\n onBlur={() => this.inputBlur.emit()}\n onInput={(event) => {\n this.handleOnInput(event);\n }}\n placeholder={this.placeholderValue}\n style={validatedCustomStyles}\n type='text'\n value={this.inputValue}\n />\n <div class='searchcraft-input-search-icon-wrapper'>\n <svg\n class='searchcraft-input-search-icon'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='searchcraft-title'\n >\n <title id='searchcraft-title'>\n Searchcraft Search Icon Light\n </title>\n <path\n d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n stroke='#404040'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </div>\n {isShowingClearButton && (\n <button\n type='button'\n class='searchcraft-input-clear-button'\n onClick={this.handleClearInput}\n >\n <svg\n class='searchcraft-input-clear-icon'\n viewBox='0 0 22 22'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='icon-title'\n >\n <title id='icon-title'>\n Searchcraft Clear Input Icon Light\n </title>\n <path\n d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n stroke='black'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </button>\n )}\n </div>\n </div>\n </form>\n );\n }\n}\n","","import { Component, h, Prop } from '@stencil/core';\n\nimport { getDocumentValueFromSearchResultMapping } from '@utils';\nimport type { PopoverResultMappings } from 'types';\n\n/\n This web component is designed to display a list of results within a popover interface.\n * It is consumed within the `searchcraft-popover-form` component.\n \n ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-list-view />\n * ```\n /\n@Component({\n tag: 'searchcraft-popover-list-view',\n styleUrl: 'searchcraft-popover-list-view.module.scss',\n shadow: false,\n})\nexport class SearchcraftPopoverListView {\n /\n The mappings that define how the data in the documents are mapped to the\n * list-view-item elements.\n /\n @Prop() popoverResultMappings: PopoverResultMappings \| undefined;\n /\n The documents to render in the list view.\n /\n @Prop() documents: Record<string, unknown>[] \| undefined;\n\n renderDocument(document: Record<string, unknown>, index: number) {\n /\n Index field values -> Result container props mappings.\n */\n const titleContent = getDocumentValueFromSearchResultMapping(\n document,\n this.popoverResultMappings.title,\n );\n const subtitleContent = getDocumentValueFromSearchResultMapping(\n document,\n this.popoverResultMappings.subtitle,\n );\n const href = getDocumentValueFromSearchResultMapping(\n document,\n this.popoverResultMappings.href,\n );\n const imageSource = getDocumentValueFromSearchResultMapping(\n document,\n this.popoverResultMappings.imageSource,\n );\n const imageAlt = getDocumentValueFromSearchResultMapping(\n document,\n this.popoverResultMappings.imageAlt,\n );\n\n return (\n <searchcraft-popover-list-item\n key={`${document.document_id}-${index}`}\n title-content={titleContent}\n subtitle-content={subtitleContent}\n image-src={imageSource}\n image-alt={imageAlt}\n href={href}\n document-position={index}\n />\n );\n }\n\n render() {\n return (\n <div class='searchcraft-popover-list-view'>\n {this.documents?.map((document, index) =>\n this.renderDocument(document, index),\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"searchcraft-input-form.searchcraft-popover-list-view.entry.cjs.js","mappings":"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","names":["useSearchcraftStore","SearchcraftCore","parseCustomStyles","classNames","h","index","getDocumentValueFromSearchResultMapping"],"sources":["src/components/searchcraft-input-form/searchcraft-input-form.module.scss?tag=searchcraft-input-form","src/components/searchcraft-input-form/searchcraft-input-form.tsx","src/components/searchcraft-popover-list-view/searchcraft-popover-list-view.module.scss?tag=searchcraft-popover-list-view","src/components/searchcraft-popover-list-view/searchcraft-popover-list-view.tsx"],"sourcesContent":[".searchcraft-input-grid {\n display: grid;\n gap: 4px 8px;\n}\n\n.searchcraft-input-grid-buttonLeft {\n grid-template-rows: repeat(3, auto);\n grid-template-columns: auto 1fr;\n\n & .searchcraft-input-button-wrapper {\n grid-column: 1 / span 1;\n grid-row: 2 / span 1;\n }\n\n & .searchcraft-input-label-wrapper {\n grid-column: 2 / span 1;\n grid-row: 1 / span 1;\n }\n\n & .searchcraft-input-error-wrapper {\n grid-column: 2 / span 1;\n grid-row: 3 / span 1;\n }\n\n & .searchcraft-input-wrapper {\n grid-column: 2 / span 1;\n grid-row: 2 / span 1;\n }\n}\n\n.searchcraft-input-grid-buttonRight {\n grid-template-rows: repeat(3, auto);\n grid-template-columns: 1fr auto;\n\n & .searchcraft-input-button-wrapper {\n grid-column: 2 / span 1;\n grid-row: 2 / span 1;\n }\n\n & .searchcraft-input-label-wrapper {\n grid-column: 1 / span 1;\n grid-row: 1 / span 1;\n }\n\n & .searchcraft-input-error-wrapper {\n grid-column: 1 / span 1;\n grid-row: 3 / span 1;\n }\n\n & .searchcraft-input-wrapper {\n grid-column: 1 / span 1;\n grid-row: 2 / span 1;\n }\n}\n\n.searchcraft-input-grid-buttonNone {\n grid-template-rows: repeat(3, auto);\n grid-template-columns: auto;\n\n & .searchcraft-input-button-wrapper {\n display: none;\n }\n\n & .searchcraft-input-label-wrapper {\n grid-column: 1 / span 1;\n grid-row: 1 / span 1;\n }\n\n & .searchcraft-input-error-wrapper {\n grid-column: 1 / span 1;\n grid-row: 3 / span 1;\n }\n\n & .searchcraft-input-wrapper {\n grid-column: 1 / span 1;\n grid-row: 2 / span 1;\n }\n}\n\n.searchcraft-input-wrapper {\n position: relative;\n display: flex;\n}\n\n.searchcraft-input {\n @include body();\n background-color: var(--sc-surface-neutral-secondary);\n border-radius: var(--sc-input-border-radius);\n border: none;\n color: var(--sc-content-neutral-primary);\n outline: none;\n padding-left: var(--sc-input-padding-left);\n padding-right: var(--sc-input-padding-right);\n padding-top: 12px;\n padding-bottom: 12px;\n flex: 1;\n\n &::placeholder {\n color: var(--sc-content-disabled);\n }\n\n &:focus {\n outline: var(--sc-border-brand) solid 2px;\n }\n\n &:focus::placeholder {\n opacity: 0;\n }\n}\n\n.searchcraft-input.error {\n color: var(--sc-content-danger);\n outline: var(--sc-border-danger) solid 2px;\n\n &:focus {\n outline: var(--sc-border-danger) solid 2px;\n }\n}\n\n.searchcraft-input-search-icon-wrapper {\n align-items: center;\n justify-content: center;\n display: flex;\n position: absolute;\n pointer-events: none;\n bottom: 0;\n left: 0;\n top: 0;\n width: var(--sc-input-padding-left);\n}\n\n.searchcraft-input-search-icon {\n pointer-events: none;\n width: var(--sc-input-search-icon-size);\n height: var(--sc-input-search-icon-size);\n}\n\n.searchcraft-input-clear-button {\n all: unset;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n position: absolute;\n border: none;\n outline: none;\n bottom: 0;\n right: 0;\n top: 0;\n width: var(--sc-input-padding-right);\n}\n\n.searchcraft-input-clear-icon {\n width: var(--sc-input-clear-icon-size);\n height: var(--sc-input-clear-icon-size);\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Event,\n type EventEmitter,\n Watch,\n} from '@stencil/core';\n\nimport { type SearchcraftConfig, SearchcraftCore } from '@searchcraft/core';\nimport packageJson from '../../../package.json';\n\nimport { parseCustomStyles } from '@utils';\nimport { useSearchcraftStore } from '@provider/store';\nimport classNames from 'classnames';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n detail: T;\n target: HTMLSearchcraftInputFormElement;\n}\n\n/*\n This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.\n * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.\n \n ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-input-form placeholder-value=\"Search here\" />\n * ```\n \n ```js\n * // index.js\n * const searchInputForm = document.querySelector('searchcraft-input-form');\n \n seardchInputForm.config = {\n * index: [],\n * readKey: '',\n * endpointUrl: '',\n * };\n \n searchForm.addEventListener('querySubmit', (event) => {\n * console.log('Query submitted', event.detail);\n * });\n * ```\n /\n@Component({\n tag: 'searchcraft-input-form',\n styleUrl: 'searchcraft-input-form.module.scss',\n shadow: false,\n})\nexport class SearchcraftInput {\n /\n The Searchcraft config object.\n /\n @Prop() config: SearchcraftConfig \| undefined;\n /\n Whether or not to automatically submit the search term when the input changes.\n /\n @Prop() autoSearch = true;\n /\n Where to place the search button.\n /\n @Prop() buttonPlacement: 'left' \| 'right' \| 'none' = 'none';\n /\n The label for the submit button.\n /\n @Prop() buttonLabel: string \| undefined;\n /\n The label rendered above the input.\n /\n @Prop() inputLabel: string \| undefined;\n /\n A custom styles object to be applied to the input element.\n /\n @Prop() customStyles: string \| Record<string, string> = {};\n /\n The input element's placeholder value.\n /\n @Prop() placeholderValue = 'Enter Search';\n /\n The starting value of the input element.\n /\n @Prop() searchTerm = '';\n /\n When the input is cleared.\n /\n @Event() inputCleared: EventEmitter<void>;\n /\n When no results are returned.\n /\n @Event() noResultsReceived: EventEmitter<void>;\n /\n When the input becomes focused.\n /\n @Event() inputFocus: EventEmitter<void>;\n /\n When the input becomes unfocused.\n /\n @Event() inputBlur: EventEmitter<void>;\n /\n Event emitted when input initializes.\n /\n @Event() inputInit: EventEmitter<void>;\n /\n Event emitted when a query has been submitted.\n /\n @Event() querySubmit: EventEmitter<string>;\n\n @State() inputValue = this.searchTerm;\n @State() error = false;\n @State() isSearchcraftInitialized = false;\n\n private searchStore = useSearchcraftStore.getState();\n\n init() {\n if (this.config && !this.isSearchcraftInitialized) {\n const searchcraft = new SearchcraftCore(this.config, {\n sdkName: packageJson.name,\n sdkVersion: packageJson.version,\n });\n this.searchStore.initialize(searchcraft, true);\n this.isSearchcraftInitialized = true;\n this.inputInit.emit();\n }\n }\n\n componentDidLoad() {\n this.init();\n }\n\n @Watch('config')\n onConfigChange() {\n this.init();\n }\n\n handleOnInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.inputValue = input.value;\n\n if (input.value.trim() === '') {\n this.inputCleared.emit();\n this.searchTerm = '';\n this.searchStore.setQuery('');\n this.searchStore.setSearchResults(null);\n return;\n }\n\n if (!this.autoSearch) {\n return;\n }\n\n this.performSearch(input.value);\n };\n\n private performSearch = async (value: string) => {\n if (value === useSearchcraftStore.getState().query) {\n return;\n }\n\n this.searchTerm = value.trim();\n this.error = false;\n this.searchStore.setQuery(this.searchTerm);\n this.querySubmit.emit(this.searchTerm);\n\n try {\n await this.searchStore.search();\n } catch (error) {\n this.error = true;\n this.inputCleared.emit();\n }\n };\n\n handleClearInput = () => {\n this.inputValue = '';\n this.searchTerm = '';\n this.searchStore.setQuery('');\n this.searchStore.setSearchResults(null);\n this.error = false;\n\n if (this.inputCleared) {\n this.inputCleared.emit();\n }\n };\n\n handleFormSubmit = async (event: Event) => {\n event.preventDefault();\n await this.performSearch(this.searchTerm);\n };\n\n render() {\n const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n const isShowingClearButton = this.inputValue.length > 0;\n\n const inputGridClassNames = classNames('searchcraft-input-grid', {\n 'searchcraft-input-grid-buttonLeft': this.buttonPlacement === 'left',\n 'searchcraft-input-grid-buttonRight': this.buttonPlacement === 'right',\n 'searchcraft-input-grid-buttonNone': this.buttonPlacement === 'none',\n });\n\n const shouldHaveVerticalGap = this.inputLabel \|\| this.error;\n const inputGridStyles = {\n gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',\n };\n\n return (\n <form class='searchcraft-input-form' onSubmit={this.handleFormSubmit}>\n <div class={inputGridClassNames} style={inputGridStyles}>\n <div class='searchcraft-input-button-wrapper'>\n <searchcraft-button\n onButtonClick={this.handleFormSubmit}\n label={this.buttonLabel}\n />\n </div>\n {this.inputLabel && (\n <div class='searchcraft-input-label-wrapper'>\n <searchcraft-input-label label={this.inputLabel} />\n </div>\n )}\n {this.error && (\n <div class='searchcraft-input-error-wrapper'>\n <searchcraft-error-message errorMessage='Something went wrong.' />\n </div>\n )}\n <div class='searchcraft-input-wrapper'>\n <input\n autoComplete='off'\n class='searchcraft-input'\n onFocus={() => this.inputFocus.emit()}\n onBlur={() => this.inputBlur.emit()}\n onInput={(event) => {\n this.handleOnInput(event);\n }}\n placeholder={this.placeholderValue}\n style={validatedCustomStyles}\n type='text'\n value={this.inputValue}\n />\n <div class='searchcraft-input-search-icon-wrapper'>\n <svg\n class='searchcraft-input-search-icon'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='searchcraft-title'\n >\n <title id='searchcraft-title'>\n Searchcraft Search Icon Light\n </title>\n <path\n d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n stroke='#404040'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </div>\n {isShowingClearButton && (\n <button\n type='button'\n class='searchcraft-input-clear-button'\n onClick={this.handleClearInput}\n >\n <svg\n class='searchcraft-input-clear-icon'\n viewBox='0 0 22 22'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='icon-title'\n >\n <title id='icon-title'>\n Searchcraft Clear Input Icon Light\n </title>\n <path\n d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n stroke='black'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </button>\n )}\n </div>\n </div>\n </form>\n );\n }\n}\n","","import { Component, h, Prop } from '@stencil/core';\n\nimport { getDocumentValueFromSearchResultMapping } from '@utils';\nimport type { PopoverResultMappings } from 'types';\n\n/\n This web component is designed to display a list of results within a popover interface.\n * It is consumed within the `searchcraft-popover-form` component.\n \n ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-list-view />\n * ```\n /\n@Component({\n tag: 'searchcraft-popover-list-view',\n styleUrl: 'searchcraft-popover-list-view.module.scss',\n shadow: false,\n})\nexport class SearchcraftPopoverListView {\n /\n The mappings that define how the data in the documents are mapped to the\n * list-view-item elements.\n /\n @Prop() popoverResultMappings: PopoverResultMappings \| undefined;\n /\n The documents to render in the list view.\n /\n @Prop() documents: Record<string, unknown>[] \| undefined;\n\n renderDocument(document: Record<string, unknown>, index: number) {\n /\n Index field values -> Result container props mappings.\n */\n const titleContent = getDocumentValueFromSearchResultMapping(\n document,\n this.popoverResultMappings.title,\n );\n const subtitleContent = getDocumentValueFromSearchResultMapping(\n document,\n this.popoverResultMappings.subtitle,\n );\n const href = getDocumentValueFromSearchResultMapping(\n document,\n this.popoverResultMappings.href,\n );\n const imageSource = getDocumentValueFromSearchResultMapping(\n document,\n this.popoverResultMappings.imageSource,\n );\n const imageAlt = getDocumentValueFromSearchResultMapping(\n document,\n this.popoverResultMappings.imageAlt,\n );\n\n return (\n <searchcraft-popover-list-item\n key={`${document.document_id}-${index}`}\n title-content={titleContent}\n subtitle-content={subtitleContent}\n image-src={imageSource}\n image-alt={imageAlt}\n href={href}\n document-position={index}\n />\n );\n }\n\n render() {\n return (\n <div class='searchcraft-popover-list-view'>\n {this.documents?.map((document, index) =>\n this.renderDocument(document, index),\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/searchcraft-javascript-sdk.cjs.js CHANGED Viewed

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b3b77ea2.js');
+const index = require('./index-d4b4a45e.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 /*
- Stencil Client Patch Browser v4.22.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.25.0 | MIT Licensed | https://stenciljs.com
  */
 var patchBrowser = () => {
   const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('searchcraft-javascript-sdk.cjs.js', document.baseURI).href));

package/dist/cjs/searchcraft-javascript-sdk.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"searchcraft-javascript-sdk.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,4NAAe,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v4.22.3 \| MIT Licensed \| https://stenciljs.com\n /\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\| s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm \|\| {})[\"data-opts\"] \|\| {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"version":3}
1	+ {"file":"searchcraft-javascript-sdk.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,4NAAe,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v4.25.0 \| MIT Licensed \| https://stenciljs.com\n /\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\| s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm \|\| {})[\"data-opts\"] \|\| {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"version":3}

package/dist/cjs/searchcraft-popover-button.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b3b77ea2.js');
-const store = require('./store-d7ebcf7a.js');
+const index = require('./index-d4b4a45e.js');
+const store = require('./store-abe47006.js');
 const searchcraftPopoverButtonModuleCss = "";
 const SearchcraftPopoverButtonStyle0 = searchcraftPopoverButtonModuleCss;

package/dist/cjs/searchcraft-popover-form.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b3b77ea2.js');
+const index = require('./index-d4b4a45e.js');
 const index$1 = require('./index-5b0b9d4c.js');
-const store = require('./store-d7ebcf7a.js');
+const store = require('./store-abe47006.js');
 const searchcraftPopoverFormModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-popover-form{display:flex;flex-direction:column;flex:1}.searchcraft-popover-form .searchcraft-popover-form-input-wrapper{padding:12px;background-color:var(--sc-surface-neutral-secondary);display:flex;flex-direction:row;gap:4px}.searchcraft-popover-form .searchcraft-popover-form-input-wrapper>searchcraft-input-form{flex:1}.searchcraft-popover-form .searchcraft-popover-form-cancel-button{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);border:0;outline:0;padding:0;flex-shrink:0;background:none;cursor:pointer;padding-left:12px;padding-right:12px;border-radius:calc(var(--sc-popover-form-border-radius) * 0.8)}.searchcraft-popover-form .searchcraft-popover-form-cancel-button:hover{background-color:var(--sc-surface-brand-secondary-hover)}.searchcraft-popover-form .searchcraft-popover-form-cancel-button:focus{background-color:var(--sc-surface-brand-secondary-active)}.searchcraft-popover-form-inline .searchcraft-input{border-top-left-radius:var(--sc-popover-form-border-radius);border-top-right-radius:var(--sc-popover-form-border-radius);border-bottom-left-radius:var(--sc-popover-form-border-radius);border-bottom-right-radius:var(--sc-popover-form-border-radius);border:none;outline:none}.searchcraft-popover-form-inline.searchcraft-popover-form-active .searchcraft-input{border-top-left-radius:var(--sc-popover-form-border-radius);border-top-right-radius:var(--sc-popover-form-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.searchcraft-popover-form-inline .searchcraft-popover-inline-wrapper-outer{position:relative}.searchcraft-popover-form-inline .searchcraft-popover-inline-wrapper-inner{position:absolute;height:var(--sc-popover-list-view-height);z-index:1000;width:100%}.searchcraft-popover-form-inline .searchcraft-popover-list-view{display:flex;flex-direction:column;overflow:auto;background-color:var(--sc-surface-neutral-secondary);border-bottom-left-radius:var(--sc-popover-form-border-radius);border-bottom-right-radius:var(--sc-popover-form-border-radius);max-height:var(--sc-popover-list-view-height)}.searchcraft-popover-form-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:0;background-color:var(--sc-surface-neutral-secondary)}@media (min-width: 576px){.searchcraft-popover-form-modal{padding:16px;background-color:transparent}}.searchcraft-popover-form-modal .searchcraft-input{border-radius:calc(var(--sc-popover-form-border-radius) * 0.8);outline-width:1px;outline-color:var(--sc-border-neutral)}.searchcraft-popover-form-modal .searchcraft-popover-form-modal-backdrop{position:absolute;inset:0;background-color:rgba(0, 0, 0, 0.5);display:none}@media (min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-form-modal-backdrop{display:block}}.searchcraft-popover-form-modal .searchcraft-popover-form-modal-inner{position:absolute;inset:0;z-index:1002;margin-top:0px;display:flex;border-radius:var(--sc-popover-form-border-radius);overflow:hidden}@media (min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-form-modal-inner{inset:auto;position:relative;width:100%;margin-top:100px;max-width:var(--sc-popover-modal-max-width)}}.searchcraft-popover-form-modal .searchcraft-popover-list-view{display:flex;flex-direction:column;overflow:auto;background-color:var(--sc-surface-neutral-secondary);border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-list-view{max-height:var(--sc-popover-list-view-height)}}.searchcraft-popover-form-modal searchcraft-popover-list-view{overflow:scroll}@media (min-width: 576px){.searchcraft-popover-form-modal searchcraft-popover-list-view{overflow:auto}}.searchcraft-popover-form-fullscreen{position:fixed;inset:0;z-index:1000;background-color:var(--sc-surface-neutral-secondary)}.searchcraft-popover-form-fullscreen .searchcraft-popover-form{position:absolute;inset:0}.searchcraft-popover-form-fullscreen .searchcraft-input{border-radius:calc(var(--sc-popover-form-border-radius) * 0.8);outline-width:1px;outline-color:var(--sc-border-neutral)}.searchcraft-popover-form-fullscreen searchcraft-popover-list-view{overflow:scroll}";
 const SearchcraftPopoverFormStyle0 = searchcraftPopoverFormModuleCss;
@@ -12,6 +12,27 @@ const SearchcraftPopoverFormStyle0 = searchcraftPopoverFormModuleCss;
 const SearchcraftPopoverForm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * 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.
+         */
+        this.type = 'inline';
+        /**
+         * The hotkey that activates the popover.
+         */
+        this.hotkey = 'k';
+        /**
+         * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
+         */
+        this.hotkeyModifier = 'meta';
+        this.isPopoverVisibleInState = false;
+        this.isFocused = false;
+        this.breakpointSm = 576;
+        this.breakpointMd = 768;
+        this.breakpointLg = 992;
         this.handleDocumentClick = (event) => {
             if (!this.hostElement.contains(event.target)) {
                 this.isFocused = false;
@@ -47,20 +68,6 @@ const SearchcraftPopoverForm = class {
             const input = this.hostElement.querySelector('.searchcraft-input');
             input === null || input === void 0 ? void 0 : input.focus();
         };
-        this.config = undefined;
-        this.type = 'inline';
-        this.popoverResultMappings = undefined;
-        this.hotkey = 'k';
-        this.hotkeyModifier = 'meta';
-        this.isPopoverVisibleInState = false;
-        this.unsubscribe = undefined;
-        this.searchResults = undefined;
-        this.searchTerm = undefined;
-        this.isFocused = false;
-        this.breakpointSm = 576;
-        this.breakpointMd = 768;
-        this.breakpointLg = 992;
-        this.modalElement = undefined;
     }
     componentDidLoad() {
         // Loads the breakpoint values into state

package/dist/cjs/searchcraft-popover-form.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"searchcraft-popover-form.entry.cjs.js","mappings":"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","names":["useSearchcraftStore","classNames","h"],"sources":["src/components/searchcraft-popover-form/searchcraft-popover-form.module.scss?tag=searchcraft-popover-form","src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"sourcesContent":["/*\n Styles applied to all popover form variants.\n /\n.searchcraft-popover-form {\n display: flex;\n flex-direction: column;\n flex: 1;\n\n & .searchcraft-popover-form-input-wrapper {\n padding: 12px;\n background-color: var(--sc-surface-neutral-secondary);\n display: flex;\n flex-direction: row;\n gap: 4px;\n }\n\n & .searchcraft-popover-form-input-wrapper > searchcraft-input-form {\n flex: 1;\n }\n\n & .searchcraft-popover-form-cancel-button {\n @include body();\n border: 0;\n outline: 0;\n padding: 0;\n flex-shrink: 0;\n background: none;\n cursor: pointer;\n padding-left: 12px;\n padding-right: 12px;\n border-radius: calc(var(--sc-popover-form-border-radius) 0.8);\n\n &:hover {\n background-color: var(--sc-surface-brand-secondary-hover);\n }\n\n &:focus {\n background-color: var(--sc-surface-brand-secondary-active);\n }\n }\n}\n\n/*\n Styles applied to `inline` popover forms.\n /\n.searchcraft-popover-form-inline {\n & .searchcraft-input {\n border-top-left-radius: var(--sc-popover-form-border-radius);\n border-top-right-radius: var(--sc-popover-form-border-radius);\n border-bottom-left-radius: var(--sc-popover-form-border-radius);\n border-bottom-right-radius: var(--sc-popover-form-border-radius);\n border: none;\n outline: none;\n }\n\n &.searchcraft-popover-form-active .searchcraft-input {\n border-top-left-radius: var(--sc-popover-form-border-radius);\n border-top-right-radius: var(--sc-popover-form-border-radius);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n & .searchcraft-popover-inline-wrapper-outer {\n position: relative;\n }\n\n & .searchcraft-popover-inline-wrapper-inner {\n position: absolute;\n height: var(--sc-popover-list-view-height);\n z-index: 1000;\n width: 100%;\n }\n\n & .searchcraft-popover-list-view {\n display: flex;\n flex-direction: column;\n overflow: auto;\n background-color: var(--sc-surface-neutral-secondary);\n border-bottom-left-radius: var(--sc-popover-form-border-radius);\n border-bottom-right-radius: var(--sc-popover-form-border-radius);\n max-height: var(--sc-popover-list-view-height)\n }\n}\n\n/\n Styles applied to `modal` popover forms.\n /\n.searchcraft-popover-form-modal {\n position: fixed;\n inset: 0;\n z-index: 1000;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: 0;\n background-color: var(--sc-surface-neutral-secondary);\n\n @media (min-width: $breakpoint-sm) {\n padding: 16px;\n background-color: transparent;\n }\n\n & .searchcraft-input {\n border-radius: calc(var(--sc-popover-form-border-radius) 0.8);\n outline-width: 1px;\n outline-color: var(--sc-border-neutral);\n }\n\n & .searchcraft-popover-form-modal-backdrop {\n position: absolute;\n inset: 0;\n background-color: rgba(0,0,0, 0.5);\n display: none;\n\n @media (min-width: $breakpoint-sm) {\n display: block;\n }\n }\n\n & .searchcraft-popover-form-modal-inner {\n position: absolute;\n inset: 0;\n z-index: 1002;\n margin-top: 0px;\n display: flex;\n border-radius: var(--sc-popover-form-border-radius);\n overflow: hidden;\n\n @media (min-width: $breakpoint-sm) {\n inset: auto;\n position: relative;\n width: 100%;\n margin-top: 100px;\n max-width: var(--sc-popover-modal-max-width);\n }\n }\n\n & .searchcraft-popover-list-view {\n display: flex;\n flex-direction: column;\n overflow: auto;\n background-color: var(--sc-surface-neutral-secondary);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n\n @media (min-width: $breakpoint-sm) {\n max-height: var(--sc-popover-list-view-height)\n }\n }\n\n & searchcraft-popover-list-view {\n overflow: scroll;\n\n @media (min-width: $breakpoint-sm) {\n overflow: auto;\n }\n }\n}\n\n/*\n Styles applied to `fullscreen` popover forms.\n /\n.searchcraft-popover-form-fullscreen {\n position: fixed;\n inset: 0;\n z-index: 1000;\n background-color: var(--sc-surface-neutral-secondary);\n\n & .searchcraft-popover-form {\n position: absolute;\n inset: 0;\n }\n\n & .searchcraft-input {\n border-radius: calc(var(--sc-popover-form-border-radius) 0.8);\n outline-width: 1px;\n outline-color: var(--sc-border-neutral);\n }\n\n & searchcraft-popover-list-view {\n overflow: scroll;\n }\n}\n","import { Component, Element, Prop, State, h } from '@stencil/core';\nimport classNames from 'classnames';\nimport type { SearchcraftConfig, SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport type { PopoverResultMappings } from 'types';\n\n/*\n 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.\n \n ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-form type=\"fullscreen\" />\n * ```\n \n ```js\n * // index.js\n * const popoverForm = document.querySelector('searchcraft-popover-form');\n \n popoverForm.config = {\n * index: [index_name_from_vektron],\n * readKey: 'read_key_from_vektron',\n * endpointUrl: 'enpoint_url_from_vektron',\n * };\n \n popoverForm.popoverResultMappings = {\n * containerHref: {\n * fieldNames: [\n * {\n * fieldName: 'canonical_link',\n * dataType: 'text',\n * },\n * ],\n * };\n * ```\n /\n@Component({\n tag: 'searchcraft-popover-form',\n styleUrl: 'searchcraft-popover-form.module.scss',\n shadow: false,\n})\nexport class SearchcraftPopoverForm {\n /\n The Searchcraft config object.\n /\n @Prop() config: SearchcraftConfig \| undefined;\n /\n The type of popover form to render.\n \n - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.\n * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.\n * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.\n /\n @Prop() type: 'inline' \| 'fullscreen' \| 'modal' = 'inline';\n /\n Formats the content rendered for each result.\n /\n @Prop() popoverResultMappings: PopoverResultMappings \| undefined;\n /\n The hotkey that activates the popover.\n /\n @Prop() hotkey = 'k';\n /\n The hotkey modifier that activates the popover. Used together with the `hotkey` prop.\n /\n @Prop() hotkeyModifier: 'ctrl' \| 'meta' \| 'alt' \| 'option' = 'meta';\n\n @State() isPopoverVisibleInState = false;\n @State() unsubscribe: (() => void) \| undefined;\n @State() searchResults: SearchcraftResponse \| undefined;\n @State() searchTerm: string \| undefined;\n @State() isFocused = false;\n @State() breakpointSm = 576;\n @State() breakpointMd = 768;\n @State() breakpointLg = 992;\n\n @State() modalElement;\n\n @Element() hostElement!: HTMLElement;\n\n componentDidLoad() {\n // Loads the breakpoint values into state\n const computedStyle = getComputedStyle(document.documentElement);\n this.breakpointSm = Number.parseFloat(\n computedStyle.getPropertyValue('--sc-breakpoint-sm').trim(),\n );\n this.breakpointMd = Number.parseFloat(\n computedStyle.getPropertyValue('--sc-breakpoint-md').trim(),\n );\n this.breakpointLg = Number.parseFloat(\n computedStyle.getPropertyValue('--sc-breakpoint-lg').trim(),\n );\n // Set popover visiblity in state\n this.isPopoverVisibleInState =\n useSearchcraftStore.getState().isPopoverVisible;\n\n // Add event listeners\n document.addEventListener('click', this.handleDocumentClick);\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n\n // Subscribe to state events\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n if (this.isPopoverVisibleInState !== state.isPopoverVisible) {\n this.handlePopoverVisibilityChange(state.isPopoverVisible);\n }\n\n this.searchResults = { ...state.searchResults };\n this.searchTerm = state.query;\n });\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n document.removeEventListener('click', this.handleDocumentClick);\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n handleDocumentClick = (event: MouseEvent) => {\n if (!this.hostElement.contains(event.target as Node)) {\n this.isFocused = false;\n }\n };\n\n /\n Handles when popover visibility is changed in state\n /\n handlePopoverVisibilityChange(isVisible: boolean) {\n this.isPopoverVisibleInState = isVisible;\n document.body.style.overflow = isVisible ? 'hidden' : 'auto';\n }\n\n /\n Actions to perform when various keys are pressed within the popover form.\n /\n handleDocumentKeyDown = (event: KeyboardEvent) => {\n // Document-scoped actions\n if (event.key === this.hotkey) {\n this.handleHotkeyPressed(event);\n }\n\n // Document-scoped -> Popover-scoped keyboard event boundary\n if (!this.hostElement.contains(document.activeElement)) {\n return;\n }\n\n // Popover-scoped actions\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n event.preventDefault();\n this.focusOnNextListItem(event.key);\n break;\n case 'Escape':\n useSearchcraftStore.getState().setPopoverVisibility(false);\n break;\n default:\n return;\n }\n };\n\n handleInputInit = () => {\n const input = this.hostElement.querySelector('.searchcraft-input') as\n \| HTMLInputElement\n \| undefined;\n input?.focus();\n };\n\n /\n When popover is `inline` and the viewport is at the smallest breakpoint,\n * focusing on the input will open a modal version of the popover form.\n /\n handleInputFocus() {\n this.isFocused = true;\n\n if (\n this.type === 'inline' &&\n window.visualViewport.width < this.breakpointSm\n ) {\n useSearchcraftStore.getState().setPopoverVisibility(true);\n\n // Appends a popover form of type=`modal` to the body\n if (!this.modalElement) {\n this.modalElement = document.createElement('searchcraft-popover-form');\n this.modalElement.config = this.config;\n this.modalElement.popoverResultMappings = this.popoverResultMappings;\n this.modalElement.setAttribute('type', 'fullscreen');\n document.body.appendChild(this.modalElement);\n }\n }\n }\n\n handleModalBackdropClick(_event: MouseEvent) {\n useSearchcraftStore.getState().setPopoverVisibility(false);\n }\n\n /\n When a hotkey is pressed, tests if the modifiers also match.\n * If modifiers match, toggles visibility of the popover modal.\n /\n handleHotkeyPressed(event: KeyboardEvent) {\n if (\n (event.ctrlKey && this.hotkeyModifier === 'ctrl') \|\|\n (event.altKey && this.hotkeyModifier === 'alt') \|\|\n (event.metaKey && this.hotkeyModifier === 'meta')\n ) {\n event.preventDefault();\n if (this.type === 'inline' && !this.isPopoverVisibleInState) {\n const hostElementInput = this.hostElement.querySelector(\n '.searchcraft-input',\n ) as HTMLInputElement \| undefined;\n hostElementInput?.focus();\n } else {\n useSearchcraftStore\n .getState()\n .setPopoverVisibility(!this.isPopoverVisibleInState);\n }\n }\n }\n\n handleCancelButtonClick() {\n useSearchcraftStore.getState().setPopoverVisibility(false);\n }\n\n /\n Moves focus to the next/previous list item in the list view. If you are at the top\n * of the list view, it moves focus back to the input.\n \n @param direction\n /\n focusOnNextListItem(direction: 'ArrowDown' \| 'ArrowUp') {\n const listItems = Array.from(\n document.querySelectorAll<HTMLAnchorElement>(\n 'a.searchcraft-popover-list-item',\n ),\n ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);\n\n const currentIndex = listItems.indexOf(\n document.activeElement as HTMLAnchorElement,\n );\n\n if (direction === 'ArrowDown') {\n listItems[(currentIndex + 1) % listItems.length]?.focus();\n } else if (direction === 'ArrowUp') {\n if (currentIndex >= 1) {\n listItems[currentIndex - 1]?.focus();\n } else {\n const input = document.querySelector('.searchcraft-input') as\n \| HTMLInputElement\n \| undefined;\n\n if (input) {\n input.focus();\n requestAnimationFrame(() => {\n input.selectionEnd = input.value.length;\n input.selectionStart = input.value.length;\n });\n }\n }\n }\n }\n\n get hasResultsToShow() {\n return (\n this.searchTerm?.trim()?.length > 0 &&\n this.searchResults?.data?.hits?.length > 0\n );\n }\n\n renderInlinePopover(documents: Record<string, unknown>[]) {\n const isListViewVisible = this.hasResultsToShow && this.isFocused;\n\n const popoverFormClassNames = classNames(\n 'searchcraft-popover-form searchcraft-popover-form-inline',\n {\n 'searchcraft-popover-form-active': isListViewVisible,\n },\n );\n\n return (\n <div class={popoverFormClassNames}>\n <searchcraft-input-form\n config={this.config}\n onInputFocus={this.handleInputFocus.bind(this)}\n />\n {isListViewVisible && (\n <div class='searchcraft-popover-inline-wrapper-outer'>\n <div class='searchcraft-popover-inline-wrapper-inner'>\n <searchcraft-popover-list-view\n popoverResultMappings={this.popoverResultMappings}\n documents={documents}\n />\n </div>\n </div>\n )}\n </div>\n );\n }\n\n renderModalPopover(documents: Record<string, unknown>[]) {\n if (this.isPopoverVisibleInState) {\n const popoverFormClassNames = classNames('searchcraft-popover-form', {\n 'searchcraft-popover-form-active': this.hasResultsToShow,\n });\n\n return (\n <div class='searchcraft-popover-form-modal'>\n {/ biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}\n <div\n class='searchcraft-popover-form-modal-backdrop'\n onClick={this.handleModalBackdropClick}\n />\n <div class='searchcraft-popover-form-modal-inner'>\n <div class={popoverFormClassNames}>\n <div class='searchcraft-popover-form-input-wrapper'>\n <searchcraft-input-form\n config={this.config}\n onInputFocus={this.handleInputFocus.bind(this)}\n onInputInit={this.handleInputInit.bind(this)}\n />\n <button\n type='button'\n class='searchcraft-popover-form-cancel-button'\n onClick={this.handleCancelButtonClick.bind(this)}\n >\n Cancel\n </button>\n </div>\n {this.hasResultsToShow && (\n <searchcraft-popover-list-view\n popoverResultMappings={this.popoverResultMappings}\n documents={documents}\n />\n )}\n </div>\n </div>\n </div>\n );\n }\n }\n\n renderFullscreenPopover(documents: Record<string, unknown>[]) {\n if (this.isPopoverVisibleInState) {\n return (\n <div class='searchcraft-popover-form-fullscreen'>\n <div class='searchcraft-popover-form'>\n <div class='searchcraft-popover-form-input-wrapper'>\n <searchcraft-input-form\n config={this.config}\n onInputFocus={this.handleInputFocus.bind(this)}\n onInputInit={this.handleInputInit.bind(this)}\n />\n <button\n type='button'\n class='searchcraft-popover-form-cancel-button'\n onClick={this.handleCancelButtonClick.bind(this)}\n >\n Cancel\n </button>\n </div>\n {this.hasResultsToShow && (\n <searchcraft-popover-list-view\n popoverResultMappings={this.popoverResultMappings}\n documents={documents}\n />\n )}\n </div>\n </div>\n );\n }\n }\n\n render() {\n const documents: Record<string, unknown>[] =\n this.searchResults?.data?.hits?.map((data, _index) => {\n const { doc: result } = data;\n return result;\n });\n\n switch (this.type) {\n case 'inline':\n return this.renderInlinePopover(documents);\n case 'modal':\n return this.renderModalPopover(documents);\n case 'fullscreen':\n return this.renderFullscreenPopover(documents);\n }\n }\n}\n"],"version":3}
1	+ {"file":"searchcraft-popover-form.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,+BAA+B,GAAG,+iPAA+iP,CAAC;AACxlP,qCAAe,+BAA+B;;MCyCjC,sBAAsB;IALnC;;;;;;;;;QAiBU,SAAI,GAAsC,QAAQ,CAAC;;;;QAQnD,WAAM,GAAG,GAAG,CAAC;;;;QAIb,mBAAc,GAAuC,MAAM,CAAC;QAE3D,4BAAuB,GAAG,KAAK,CAAC;QAIhC,cAAS,GAAG,KAAK,CAAC;QAClB,iBAAY,GAAG,GAAG,CAAC;QACnB,iBAAY,GAAG,GAAG,CAAC;QACnB,iBAAY,GAAG,GAAG,CAAC;QA2C5B,wBAAmB,GAAG,CAAC,KAAiB;YACtC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBACpD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACxB;SACF,CAAC;;;;QAaF,0BAAqB,GAAG,CAAC,KAAoB;;YAE3C,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC7B,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;aACjC;;YAGD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;gBACtD,OAAO;aACR;;YAGD,QAAQ,KAAK,CAAC,GAAG;gBACf,KAAK,WAAW,CAAC;gBACjB,KAAK,SAAS;oBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;oBACpC,MAAM;gBACR,KAAK,QAAQ;oBACXA,yBAAmB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;oBAC3D,MAAM;gBACR;oBACE,OAAO;aACV;SACF,CAAC;QAEF,oBAAe,GAAG;YAChB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,oBAAoB,CAEpD,CAAC;YACd,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,EAAE,CAAC;SAChB,CAAC;KA8NH;IAnTC,gBAAgB;;QAEd,MAAM,aAAa,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACjE,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,CACnC,aAAa,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,IAAI,EAAE,CAC5D,CAAC;QACF,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,CACnC,aAAa,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,IAAI,EAAE,CAC5D,CAAC;QACF,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,CACnC,aAAa,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,IAAI,EAAE,CAC5D,CAAC;;QAEF,IAAI,CAAC,uBAAuB;YAC1BA,yBAAmB,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC;;QAGlD,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC7D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;;QAGjE,IAAI,CAAC,WAAW,GAAGA,yBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;YACrD,IAAI,IAAI,CAAC,uBAAuB,KAAK,KAAK,CAAC,gBAAgB,EAAE;gBAC3D,IAAI,CAAC,6BAA6B,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;aAC5D;YAED,IAAI,CAAC,aAAa,qBAAQ,KAAK,CAAC,aAAa,CAAE,CAAC;YAChD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;SAC/B,CAAC,CAAC;KACJ;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,WAAW,oDAAI,CAAC;QACrB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAChE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KACrE;;;;IAWD,6BAA6B,CAAC,SAAkB;QAC9C,IAAI,CAAC,uBAAuB,GAAG,SAAS,CAAC;QACzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;KAC9D;;;;;IA0CD,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,IACE,IAAI,CAAC,IAAI,KAAK,QAAQ;YACtB,MAAM,CAAC,cAAc,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,EAC/C;YACAA,yBAAmB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;;YAG1D,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;gBACtB,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;gBACvE,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;gBACvC,IAAI,CAAC,YAAY,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC;gBACrE,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;gBACrD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;aAC9C;SACF;KACF;IAED,wBAAwB,CAAC,MAAkB;QACzCA,yBAAmB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAC5D;;;;;IAMD,mBAAmB,CAAC,KAAoB;QACtC,IACE,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM;aAC/C,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,CAAC;aAC9C,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,EACjD;YACA,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;gBAC3D,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CACrD,oBAAoB,CACW,CAAC;gBAClC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,KAAK,EAAE,CAAC;aAC3B;iBAAM;gBACLA,yBAAmB;qBAChB,QAAQ,EAAE;qBACV,oBAAoB,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;aACxD;SACF;KACF;IAED,uBAAuB;QACrBA,yBAAmB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAC5D;;;;;;;IAQD,mBAAmB,CAAC,SAAkC;;QACpD,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAC1B,QAAQ,CAAC,gBAAgB,CACvB,iCAAiC,CAClC,CACF,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,YAAY,KAAK,IAAI,CAAC,CAAC;QAE3E,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CACpC,QAAQ,CAAC,aAAkC,CAC5C,CAAC;QAEF,IAAI,SAAS,KAAK,WAAW,EAAE;YAC7B,MAAA,SAAS,CAAC,CAAC,YAAY,GAAG,CAAC,IAAI,SAAS,CAAC,MAAM,CAAC,0CAAE,KAAK,EAAE,CAAC;SAC3D;aAAM,IAAI,SAAS,KAAK,SAAS,EAAE;YAClC,IAAI,YAAY,IAAI,CAAC,EAAE;gBACrB,MAAA,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;aACtC;iBAAM;gBACL,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAE5C,CAAC;gBAEd,IAAI,KAAK,EAAE;oBACT,KAAK,CAAC,KAAK,EAAE,CAAC;oBACd,qBAAqB,CAAC;wBACpB,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;wBACxC,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;qBAC3C,CAAC,CAAC;iBACJ;aACF;SACF;KACF;IAED,IAAI,gBAAgB;;QAClB,QACE,CAAA,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,0CAAE,MAAM,IAAG,CAAC;YACnC,CAAA,MAAA,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,0CAAE,IAAI,0CAAE,MAAM,IAAG,CAAC,EAC1C;KACH;IAED,mBAAmB,CAAC,SAAoC;QACtD,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,SAAS,CAAC;QAElE,MAAM,qBAAqB,GAAGC,kBAAU,CACtC,0DAA0D,EAC1D;YACE,iCAAiC,EAAE,iBAAiB;SACrD,CACF,CAAC;QAEF,QACEC,iBAAK,KAAK,EAAE,qBAAqB,IAC/BA,oCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC9C,EACD,iBAAiB,KAChBA,iBAAK,KAAK,EAAC,0CAA0C,IACnDA,iBAAK,KAAK,EAAC,0CAA0C,IACnDA,2CACE,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,SAAS,EAAE,SAAS,GACpB,CACE,CACF,CACP,CACG,EACN;KACH;IAED,kBAAkB,CAAC,SAAoC;QACrD,IAAI,IAAI,CAAC,uBAAuB,EAAE;YAChC,MAAM,qBAAqB,GAAGD,kBAAU,CAAC,0BAA0B,EAAE;gBACnE,iCAAiC,EAAE,IAAI,CAAC,gBAAgB;aACzD,CAAC,CAAC;YAEH,QACEC,iBAAK,KAAK,EAAC,gCAAgC,IAEzCA,iBACE,KAAK,EAAC,yCAAyC,EAC/C,OAAO,EAAE,IAAI,CAAC,wBAAwB,GACtC,EACFA,iBAAK,KAAK,EAAC,sCAAsC,IAC/CA,iBAAK,KAAK,EAAE,qBAAqB,IAC/BA,iBAAK,KAAK,EAAC,wCAAwC,IACjDA,oCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9C,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,GAC5C,EACFA,oBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,wCAAwC,EAC9C,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,aAGzC,CACL,EACL,IAAI,CAAC,gBAAgB,KACpBA,2CACE,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,SAAS,EAAE,SAAS,GACpB,CACH,CACG,CACF,CACF,EACN;SACH;KACF;IAED,uBAAuB,CAAC,SAAoC;QAC1D,IAAI,IAAI,CAAC,uBAAuB,EAAE;YAChC,QACEA,iBAAK,KAAK,EAAC,qCAAqC,IAC9CA,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,iBAAK,KAAK,EAAC,wCAAwC,IACjDA,oCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9C,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,GAC5C,EACFA,oBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,wCAAwC,EAC9C,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,aAGzC,CACL,EACL,IAAI,CAAC,gBAAgB,KACpBA,2CACE,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,SAAS,EAAE,SAAS,GACpB,CACH,CACG,CACF,EACN;SACH;KACF;IAED,MAAM;;QACJ,MAAM,SAAS,GACb,MAAA,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,0CAAE,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM;YAC/C,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;YAC7B,OAAO,MAAM,CAAC;SACf,CAAC,CAAC;QAEL,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;YAC7C,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC;YAC5C,KAAK,YAAY;gBACf,OAAO,IAAI,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC;SAClD;KACF;;;;;;;","names":["useSearchcraftStore","classNames","h"],"sources":["src/components/searchcraft-popover-form/searchcraft-popover-form.module.scss?tag=searchcraft-popover-form","src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"sourcesContent":["/*\n Styles applied to all popover form variants.\n /\n.searchcraft-popover-form {\n display: flex;\n flex-direction: column;\n flex: 1;\n\n & .searchcraft-popover-form-input-wrapper {\n padding: 12px;\n background-color: var(--sc-surface-neutral-secondary);\n display: flex;\n flex-direction: row;\n gap: 4px;\n }\n\n & .searchcraft-popover-form-input-wrapper > searchcraft-input-form {\n flex: 1;\n }\n\n & .searchcraft-popover-form-cancel-button {\n @include body();\n border: 0;\n outline: 0;\n padding: 0;\n flex-shrink: 0;\n background: none;\n cursor: pointer;\n padding-left: 12px;\n padding-right: 12px;\n border-radius: calc(var(--sc-popover-form-border-radius) 0.8);\n\n &:hover {\n background-color: var(--sc-surface-brand-secondary-hover);\n }\n\n &:focus {\n background-color: var(--sc-surface-brand-secondary-active);\n }\n }\n}\n\n/*\n Styles applied to `inline` popover forms.\n /\n.searchcraft-popover-form-inline {\n & .searchcraft-input {\n border-top-left-radius: var(--sc-popover-form-border-radius);\n border-top-right-radius: var(--sc-popover-form-border-radius);\n border-bottom-left-radius: var(--sc-popover-form-border-radius);\n border-bottom-right-radius: var(--sc-popover-form-border-radius);\n border: none;\n outline: none;\n }\n\n &.searchcraft-popover-form-active .searchcraft-input {\n border-top-left-radius: var(--sc-popover-form-border-radius);\n border-top-right-radius: var(--sc-popover-form-border-radius);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n & .searchcraft-popover-inline-wrapper-outer {\n position: relative;\n }\n\n & .searchcraft-popover-inline-wrapper-inner {\n position: absolute;\n height: var(--sc-popover-list-view-height);\n z-index: 1000;\n width: 100%;\n }\n\n & .searchcraft-popover-list-view {\n display: flex;\n flex-direction: column;\n overflow: auto;\n background-color: var(--sc-surface-neutral-secondary);\n border-bottom-left-radius: var(--sc-popover-form-border-radius);\n border-bottom-right-radius: var(--sc-popover-form-border-radius);\n max-height: var(--sc-popover-list-view-height)\n }\n}\n\n/\n Styles applied to `modal` popover forms.\n /\n.searchcraft-popover-form-modal {\n position: fixed;\n inset: 0;\n z-index: 1000;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: 0;\n background-color: var(--sc-surface-neutral-secondary);\n\n @media (min-width: $breakpoint-sm) {\n padding: 16px;\n background-color: transparent;\n }\n\n & .searchcraft-input {\n border-radius: calc(var(--sc-popover-form-border-radius) 0.8);\n outline-width: 1px;\n outline-color: var(--sc-border-neutral);\n }\n\n & .searchcraft-popover-form-modal-backdrop {\n position: absolute;\n inset: 0;\n background-color: rgba(0,0,0, 0.5);\n display: none;\n\n @media (min-width: $breakpoint-sm) {\n display: block;\n }\n }\n\n & .searchcraft-popover-form-modal-inner {\n position: absolute;\n inset: 0;\n z-index: 1002;\n margin-top: 0px;\n display: flex;\n border-radius: var(--sc-popover-form-border-radius);\n overflow: hidden;\n\n @media (min-width: $breakpoint-sm) {\n inset: auto;\n position: relative;\n width: 100%;\n margin-top: 100px;\n max-width: var(--sc-popover-modal-max-width);\n }\n }\n\n & .searchcraft-popover-list-view {\n display: flex;\n flex-direction: column;\n overflow: auto;\n background-color: var(--sc-surface-neutral-secondary);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n\n @media (min-width: $breakpoint-sm) {\n max-height: var(--sc-popover-list-view-height)\n }\n }\n\n & searchcraft-popover-list-view {\n overflow: scroll;\n\n @media (min-width: $breakpoint-sm) {\n overflow: auto;\n }\n }\n}\n\n/*\n Styles applied to `fullscreen` popover forms.\n /\n.searchcraft-popover-form-fullscreen {\n position: fixed;\n inset: 0;\n z-index: 1000;\n background-color: var(--sc-surface-neutral-secondary);\n\n & .searchcraft-popover-form {\n position: absolute;\n inset: 0;\n }\n\n & .searchcraft-input {\n border-radius: calc(var(--sc-popover-form-border-radius) 0.8);\n outline-width: 1px;\n outline-color: var(--sc-border-neutral);\n }\n\n & searchcraft-popover-list-view {\n overflow: scroll;\n }\n}\n","import { Component, Element, Prop, State, h } from '@stencil/core';\nimport classNames from 'classnames';\nimport type { SearchcraftConfig, SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport type { PopoverResultMappings } from 'types';\n\n/*\n 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.\n \n ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-form type=\"fullscreen\" />\n * ```\n \n ```js\n * // index.js\n * const popoverForm = document.querySelector('searchcraft-popover-form');\n \n popoverForm.config = {\n * index: [index_name_from_vektron],\n * readKey: 'read_key_from_vektron',\n * endpointUrl: 'enpoint_url_from_vektron',\n * };\n \n popoverForm.popoverResultMappings = {\n * containerHref: {\n * fieldNames: [\n * {\n * fieldName: 'canonical_link',\n * dataType: 'text',\n * },\n * ],\n * };\n * ```\n /\n@Component({\n tag: 'searchcraft-popover-form',\n styleUrl: 'searchcraft-popover-form.module.scss',\n shadow: false,\n})\nexport class SearchcraftPopoverForm {\n /\n The Searchcraft config object.\n /\n @Prop() config: SearchcraftConfig \| undefined;\n /\n The type of popover form to render.\n \n - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.\n * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.\n * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.\n /\n @Prop() type: 'inline' \| 'fullscreen' \| 'modal' = 'inline';\n /\n Formats the content rendered for each result.\n /\n @Prop() popoverResultMappings: PopoverResultMappings \| undefined;\n /\n The hotkey that activates the popover.\n /\n @Prop() hotkey = 'k';\n /\n The hotkey modifier that activates the popover. Used together with the `hotkey` prop.\n /\n @Prop() hotkeyModifier: 'ctrl' \| 'meta' \| 'alt' \| 'option' = 'meta';\n\n @State() isPopoverVisibleInState = false;\n @State() unsubscribe: (() => void) \| undefined;\n @State() searchResults: SearchcraftResponse \| undefined;\n @State() searchTerm: string \| undefined;\n @State() isFocused = false;\n @State() breakpointSm = 576;\n @State() breakpointMd = 768;\n @State() breakpointLg = 992;\n\n @State() modalElement;\n\n @Element() hostElement!: HTMLElement;\n\n componentDidLoad() {\n // Loads the breakpoint values into state\n const computedStyle = getComputedStyle(document.documentElement);\n this.breakpointSm = Number.parseFloat(\n computedStyle.getPropertyValue('--sc-breakpoint-sm').trim(),\n );\n this.breakpointMd = Number.parseFloat(\n computedStyle.getPropertyValue('--sc-breakpoint-md').trim(),\n );\n this.breakpointLg = Number.parseFloat(\n computedStyle.getPropertyValue('--sc-breakpoint-lg').trim(),\n );\n // Set popover visiblity in state\n this.isPopoverVisibleInState =\n useSearchcraftStore.getState().isPopoverVisible;\n\n // Add event listeners\n document.addEventListener('click', this.handleDocumentClick);\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n\n // Subscribe to state events\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n if (this.isPopoverVisibleInState !== state.isPopoverVisible) {\n this.handlePopoverVisibilityChange(state.isPopoverVisible);\n }\n\n this.searchResults = { ...state.searchResults };\n this.searchTerm = state.query;\n });\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n document.removeEventListener('click', this.handleDocumentClick);\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n handleDocumentClick = (event: MouseEvent) => {\n if (!this.hostElement.contains(event.target as Node)) {\n this.isFocused = false;\n }\n };\n\n /\n Handles when popover visibility is changed in state\n /\n handlePopoverVisibilityChange(isVisible: boolean) {\n this.isPopoverVisibleInState = isVisible;\n document.body.style.overflow = isVisible ? 'hidden' : 'auto';\n }\n\n /\n Actions to perform when various keys are pressed within the popover form.\n /\n handleDocumentKeyDown = (event: KeyboardEvent) => {\n // Document-scoped actions\n if (event.key === this.hotkey) {\n this.handleHotkeyPressed(event);\n }\n\n // Document-scoped -> Popover-scoped keyboard event boundary\n if (!this.hostElement.contains(document.activeElement)) {\n return;\n }\n\n // Popover-scoped actions\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n event.preventDefault();\n this.focusOnNextListItem(event.key);\n break;\n case 'Escape':\n useSearchcraftStore.getState().setPopoverVisibility(false);\n break;\n default:\n return;\n }\n };\n\n handleInputInit = () => {\n const input = this.hostElement.querySelector('.searchcraft-input') as\n \| HTMLInputElement\n \| undefined;\n input?.focus();\n };\n\n /\n When popover is `inline` and the viewport is at the smallest breakpoint,\n * focusing on the input will open a modal version of the popover form.\n /\n handleInputFocus() {\n this.isFocused = true;\n\n if (\n this.type === 'inline' &&\n window.visualViewport.width < this.breakpointSm\n ) {\n useSearchcraftStore.getState().setPopoverVisibility(true);\n\n // Appends a popover form of type=`modal` to the body\n if (!this.modalElement) {\n this.modalElement = document.createElement('searchcraft-popover-form');\n this.modalElement.config = this.config;\n this.modalElement.popoverResultMappings = this.popoverResultMappings;\n this.modalElement.setAttribute('type', 'fullscreen');\n document.body.appendChild(this.modalElement);\n }\n }\n }\n\n handleModalBackdropClick(_event: MouseEvent) {\n useSearchcraftStore.getState().setPopoverVisibility(false);\n }\n\n /\n When a hotkey is pressed, tests if the modifiers also match.\n * If modifiers match, toggles visibility of the popover modal.\n /\n handleHotkeyPressed(event: KeyboardEvent) {\n if (\n (event.ctrlKey && this.hotkeyModifier === 'ctrl') \|\|\n (event.altKey && this.hotkeyModifier === 'alt') \|\|\n (event.metaKey && this.hotkeyModifier === 'meta')\n ) {\n event.preventDefault();\n if (this.type === 'inline' && !this.isPopoverVisibleInState) {\n const hostElementInput = this.hostElement.querySelector(\n '.searchcraft-input',\n ) as HTMLInputElement \| undefined;\n hostElementInput?.focus();\n } else {\n useSearchcraftStore\n .getState()\n .setPopoverVisibility(!this.isPopoverVisibleInState);\n }\n }\n }\n\n handleCancelButtonClick() {\n useSearchcraftStore.getState().setPopoverVisibility(false);\n }\n\n /\n Moves focus to the next/previous list item in the list view. If you are at the top\n * of the list view, it moves focus back to the input.\n \n @param direction\n /\n focusOnNextListItem(direction: 'ArrowDown' \| 'ArrowUp') {\n const listItems = Array.from(\n document.querySelectorAll<HTMLAnchorElement>(\n 'a.searchcraft-popover-list-item',\n ),\n ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);\n\n const currentIndex = listItems.indexOf(\n document.activeElement as HTMLAnchorElement,\n );\n\n if (direction === 'ArrowDown') {\n listItems[(currentIndex + 1) % listItems.length]?.focus();\n } else if (direction === 'ArrowUp') {\n if (currentIndex >= 1) {\n listItems[currentIndex - 1]?.focus();\n } else {\n const input = document.querySelector('.searchcraft-input') as\n \| HTMLInputElement\n \| undefined;\n\n if (input) {\n input.focus();\n requestAnimationFrame(() => {\n input.selectionEnd = input.value.length;\n input.selectionStart = input.value.length;\n });\n }\n }\n }\n }\n\n get hasResultsToShow() {\n return (\n this.searchTerm?.trim()?.length > 0 &&\n this.searchResults?.data?.hits?.length > 0\n );\n }\n\n renderInlinePopover(documents: Record<string, unknown>[]) {\n const isListViewVisible = this.hasResultsToShow && this.isFocused;\n\n const popoverFormClassNames = classNames(\n 'searchcraft-popover-form searchcraft-popover-form-inline',\n {\n 'searchcraft-popover-form-active': isListViewVisible,\n },\n );\n\n return (\n <div class={popoverFormClassNames}>\n <searchcraft-input-form\n config={this.config}\n onInputFocus={this.handleInputFocus.bind(this)}\n />\n {isListViewVisible && (\n <div class='searchcraft-popover-inline-wrapper-outer'>\n <div class='searchcraft-popover-inline-wrapper-inner'>\n <searchcraft-popover-list-view\n popoverResultMappings={this.popoverResultMappings}\n documents={documents}\n />\n </div>\n </div>\n )}\n </div>\n );\n }\n\n renderModalPopover(documents: Record<string, unknown>[]) {\n if (this.isPopoverVisibleInState) {\n const popoverFormClassNames = classNames('searchcraft-popover-form', {\n 'searchcraft-popover-form-active': this.hasResultsToShow,\n });\n\n return (\n <div class='searchcraft-popover-form-modal'>\n {/ biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}\n <div\n class='searchcraft-popover-form-modal-backdrop'\n onClick={this.handleModalBackdropClick}\n />\n <div class='searchcraft-popover-form-modal-inner'>\n <div class={popoverFormClassNames}>\n <div class='searchcraft-popover-form-input-wrapper'>\n <searchcraft-input-form\n config={this.config}\n onInputFocus={this.handleInputFocus.bind(this)}\n onInputInit={this.handleInputInit.bind(this)}\n />\n <button\n type='button'\n class='searchcraft-popover-form-cancel-button'\n onClick={this.handleCancelButtonClick.bind(this)}\n >\n Cancel\n </button>\n </div>\n {this.hasResultsToShow && (\n <searchcraft-popover-list-view\n popoverResultMappings={this.popoverResultMappings}\n documents={documents}\n />\n )}\n </div>\n </div>\n </div>\n );\n }\n }\n\n renderFullscreenPopover(documents: Record<string, unknown>[]) {\n if (this.isPopoverVisibleInState) {\n return (\n <div class='searchcraft-popover-form-fullscreen'>\n <div class='searchcraft-popover-form'>\n <div class='searchcraft-popover-form-input-wrapper'>\n <searchcraft-input-form\n config={this.config}\n onInputFocus={this.handleInputFocus.bind(this)}\n onInputInit={this.handleInputInit.bind(this)}\n />\n <button\n type='button'\n class='searchcraft-popover-form-cancel-button'\n onClick={this.handleCancelButtonClick.bind(this)}\n >\n Cancel\n </button>\n </div>\n {this.hasResultsToShow && (\n <searchcraft-popover-list-view\n popoverResultMappings={this.popoverResultMappings}\n documents={documents}\n />\n )}\n </div>\n </div>\n );\n }\n }\n\n render() {\n const documents: Record<string, unknown>[] =\n this.searchResults?.data?.hits?.map((data, _index) => {\n const { doc: result } = data;\n return result;\n });\n\n switch (this.type) {\n case 'inline':\n return this.renderInlinePopover(documents);\n case 'modal':\n return this.renderModalPopover(documents);\n case 'fullscreen':\n return this.renderFullscreenPopover(documents);\n }\n }\n}\n"],"version":3}

package/dist/cjs/searchcraft-popover-list-item.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b3b77ea2.js');
+const index = require('./index-d4b4a45e.js');
 const searchcraftPopoverListItemModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-popover-list-item{all:unset;display:flex;flex-direction:row;cursor:pointer;gap:8px;padding-right:var(--sc-popover-list-item-padding-horizontal);padding-left:var(--sc-popover-list-item-padding-horizontal);padding-top:var(--sc-popover-list-item-padding-vertical);padding-bottom:var(--sc-popover-list-item-padding-vertical)}.searchcraft-popover-list-item:focus{background-color:var(--sc-surface-neutral-secondary-active);color:var(--sc-content-neutral-secondary)}.searchcraft-popover-list-item:hover{background-color:var(--sc-surface-neutral-secondary-hover);color:var(--sc-content-neutral-secondary)}.searchcraft-popover-list-item-title{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);margin:0;color:inherit}.searchcraft-popover-list-item-subtitle{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-font-size);font-weight:var(--sc-body-small-font-weight);line-height:var(--sc-body-small-line-height);margin:0;color:inherit}.searchcraft-popover-list-item-image-wrapper{width:var(--sc-popover-list-item-image-size);height:var(--sc-popover-list-item-image-size);display:flex;align-items:center;justify-content:center;flex-shrink:0}.searchcraft-popover-list-item-image{max-width:var(--sc-popover-list-item-image-size);max-height:var(--sc-popover-list-item-image-size)}.searchcraft-popover-list-item-info-wrapper{display:flex;flex-direction:column;gap:8px;justify-content:center}";
 const SearchcraftPopoverListItemStyle0 = searchcraftPopoverListItemModuleCss;
@@ -10,12 +10,6 @@ const SearchcraftPopoverListItemStyle0 = searchcraftPopoverListItemModuleCss;
 const SearchcraftPopoverListItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.titleContent = undefined;
-        this.subtitleContent = undefined;
-        this.imageSrc = undefined;
-        this.imageAlt = undefined;
-        this.href = undefined;
-        this.documentPosition = undefined;
     }
     componentDidLoad() { }
     connectedCallback() { }

package/dist/cjs/searchcraft-popover-list-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"searchcraft-popover-list-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mCAAmC,GAAG,g2JAAg2J,CAAC;AAC74J,yCAAe,mCAAmC;;MCSrC,0BAA0B~~;;;;;;;;;;~~IAcrC,gBAAgB,MAAK;IAErB,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,iBAAiB,MAAK;IAEtB,MAAM;QACJ,QACEA,gEAAG,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACrD,IAAI,CAAC,QAAQ,KACZA,kEAAK,KAAK,EAAC,6CAA6C,IACtDA,kEACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qCAAqC,GAC3C,CACE,CACP,EACDA,kEAAK,KAAK,EAAC,4CAA4C,IACrDA,gEAAG,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,YAAY,CAAK,EACtEA,gEAAG,KAAK,EAAC,wCAAwC,IAC9C,IAAI,CAAC,eAAe,CACnB,CACA,CACJ,EACJ;KACH;;;;;;","names":["h"],"sources":["src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.module.scss?tag=searchcraft-popover-list-item","src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.tsx"],"sourcesContent":[".searchcraft-popover-list-item {\n all: unset;\n display: flex;\n flex-direction: row;\n cursor: pointer;\n gap: 8px;\n padding-right: var(--sc-popover-list-item-padding-horizontal);\n padding-left: var(--sc-popover-list-item-padding-horizontal);\n padding-top: var(--sc-popover-list-item-padding-vertical);\n padding-bottom: var(--sc-popover-list-item-padding-vertical);\n\n &:focus {\n background-color: var(--sc-surface-neutral-secondary-active);\n color: var(--sc-content-neutral-secondary);\n }\n\n &:hover {\n background-color: var(--sc-surface-neutral-secondary-hover);\n color: var(--sc-content-neutral-secondary);\n }\n}\n\n.searchcraft-popover-list-item-title {\n @include body();\n margin: 0;\n color: inherit;\n}\n\n.searchcraft-popover-list-item-subtitle {\n @include body-small();\n margin: 0;\n color: inherit;\n}\n\n.searchcraft-popover-list-item-image-wrapper {\n width: var(--sc-popover-list-item-image-size);\n height: var(--sc-popover-list-item-image-size);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.searchcraft-popover-list-item-image {\n max-width: var(--sc-popover-list-item-image-size);\n max-height: var(--sc-popover-list-item-image-size);\n}\n\n.searchcraft-popover-list-item-info-wrapper {\n display: flex;\n flex-direction: column;\n gap: 8px;\n justify-content: center;\n}","import { Component, h, Prop } from '@stencil/core';\n\n/*\n A single list item rendered in a searchcraft-popover-list-view.\n /\n@Component({\n tag: 'searchcraft-popover-list-item',\n styleUrl: 'searchcraft-popover-list-item.module.scss',\n shadow: false,\n})\nexport class SearchcraftPopoverListItem {\n /* The result title /\n @Prop() titleContent: string \| undefined;\n /* The result subtitle /\n @Prop() subtitleContent: string \| undefined;\n /* The source of the image. If not included, no item will be rendered. /\n @Prop() imageSrc: string \| undefined;\n /* The image alt tag. /\n @Prop() imageAlt: string \| undefined;\n /* The link href /\n @Prop() href: string \| undefined;\n /* The document position relative to the search results (For Measure) */\n @Prop() documentPosition: number;\n\n componentDidLoad() {}\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n handleButtonClick() {}\n\n render() {\n return (\n <a class='searchcraft-popover-list-item' href={this.href}>\n {this.imageSrc && (\n <div class='searchcraft-popover-list-item-image-wrapper'>\n <img\n alt={this.imageAlt}\n src={this.imageSrc}\n class='searchcraft-popover-list-item-image'\n />\n </div>\n )}\n <div class='searchcraft-popover-list-item-info-wrapper'>\n <p class='searchcraft-popover-list-item-title'>{this.titleContent}</p>\n <p class='searchcraft-popover-list-item-subtitle'>\n {this.subtitleContent}\n </p>\n </div>\n </a>\n );\n }\n}\n"],"version":3}
1	+ {"file":"searchcraft-popover-list-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mCAAmC,GAAG,g2JAAg2J,CAAC;AAC74J,yCAAe,mCAAmC;;MCSrC,0BAA0B;;;;IAcrC,gBAAgB,MAAK;IAErB,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,iBAAiB,MAAK;IAEtB,MAAM;QACJ,QACEA,gEAAG,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACrD,IAAI,CAAC,QAAQ,KACZA,kEAAK,KAAK,EAAC,6CAA6C,IACtDA,kEACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qCAAqC,GAC3C,CACE,CACP,EACDA,kEAAK,KAAK,EAAC,4CAA4C,IACrDA,gEAAG,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,YAAY,CAAK,EACtEA,gEAAG,KAAK,EAAC,wCAAwC,IAC9C,IAAI,CAAC,eAAe,CACnB,CACA,CACJ,EACJ;KACH;;;;;;","names":["h"],"sources":["src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.module.scss?tag=searchcraft-popover-list-item","src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.tsx"],"sourcesContent":[".searchcraft-popover-list-item {\n all: unset;\n display: flex;\n flex-direction: row;\n cursor: pointer;\n gap: 8px;\n padding-right: var(--sc-popover-list-item-padding-horizontal);\n padding-left: var(--sc-popover-list-item-padding-horizontal);\n padding-top: var(--sc-popover-list-item-padding-vertical);\n padding-bottom: var(--sc-popover-list-item-padding-vertical);\n\n &:focus {\n background-color: var(--sc-surface-neutral-secondary-active);\n color: var(--sc-content-neutral-secondary);\n }\n\n &:hover {\n background-color: var(--sc-surface-neutral-secondary-hover);\n color: var(--sc-content-neutral-secondary);\n }\n}\n\n.searchcraft-popover-list-item-title {\n @include body();\n margin: 0;\n color: inherit;\n}\n\n.searchcraft-popover-list-item-subtitle {\n @include body-small();\n margin: 0;\n color: inherit;\n}\n\n.searchcraft-popover-list-item-image-wrapper {\n width: var(--sc-popover-list-item-image-size);\n height: var(--sc-popover-list-item-image-size);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.searchcraft-popover-list-item-image {\n max-width: var(--sc-popover-list-item-image-size);\n max-height: var(--sc-popover-list-item-image-size);\n}\n\n.searchcraft-popover-list-item-info-wrapper {\n display: flex;\n flex-direction: column;\n gap: 8px;\n justify-content: center;\n}","import { Component, h, Prop } from '@stencil/core';\n\n/*\n A single list item rendered in a searchcraft-popover-list-view.\n /\n@Component({\n tag: 'searchcraft-popover-list-item',\n styleUrl: 'searchcraft-popover-list-item.module.scss',\n shadow: false,\n})\nexport class SearchcraftPopoverListItem {\n /* The result title /\n @Prop() titleContent: string \| undefined;\n /* The result subtitle /\n @Prop() subtitleContent: string \| undefined;\n /* The source of the image. If not included, no item will be rendered. /\n @Prop() imageSrc: string \| undefined;\n /* The image alt tag. /\n @Prop() imageAlt: string \| undefined;\n /* The link href /\n @Prop() href: string \| undefined;\n /* The document position relative to the search results (For Measure) */\n @Prop() documentPosition: number;\n\n componentDidLoad() {}\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n handleButtonClick() {}\n\n render() {\n return (\n <a class='searchcraft-popover-list-item' href={this.href}>\n {this.imageSrc && (\n <div class='searchcraft-popover-list-item-image-wrapper'>\n <img\n alt={this.imageAlt}\n src={this.imageSrc}\n class='searchcraft-popover-list-item-image'\n />\n </div>\n )}\n <div class='searchcraft-popover-list-item-info-wrapper'>\n <p class='searchcraft-popover-list-item-title'>{this.titleContent}</p>\n <p class='searchcraft-popover-list-item-subtitle'>\n {this.subtitleContent}\n </p>\n </div>\n </a>\n );\n }\n}\n"],"version":3}

package/dist/cjs/searchcraft-results-info.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b3b77ea2.js');
-const store = require('./store-d7ebcf7a.js');
+const index = require('./index-d4b4a45e.js');
+const store = require('./store-abe47006.js');
 const units = require('./units-fe4d8083.js');
 const searchcraftResultsInfoModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-results-info-container{border-bottom:1px solid var(--sc-surface-disabled);display:flex;justify-content:flex-start}.searchcraft-results-info-content{color:var(--sc-content-primary);font-family:var(--sc-font-family);font-size:18px;font-weight:600;line-height:20px;margin:0px 0 8px}@media (max-width: 768px){.searchcraft-results-info-content{margin:0;margin-bottom:8px}}";

package/dist/cjs/searchcraft-results-info.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"searchcraft-results-info.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,+BAA+B,GAAG,6rHAA6rH,CAAC;AACtuH,qCAAe,+BAA+B;;MCoBjC,sBAAsB~~;;;4BACT~~,KAAK;~~4BACL~~,CAAC;~~4BACD~~,EAAE;~~qBACT~~,EAAE~~;;IAInB~~,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAGA,yBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;;YACrD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,KAAK,KAAI,CAAC,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,CAClB,CAAC,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,UAAU,KAAI,CAAC,IAAI,IAAI,EACnD,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;SAChC,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;YAC1C,OAAO,IAAI,CAAC;SACb;QACD,MAAM,gBAAgB,GAAGC,4BAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnE,QACEC,iBAAK,KAAK,EAAC,oCAAoC,IAC7CA,eAAG,KAAK,EAAC,kCAAkC,IACxC,gBAAgB,wBAAoB,IAAI,CAAC,YAAY,OACpD,CACA,EACN;KACH;;;;;;","names":["useSearchcraftStore","formatNumberWithCommas","h"],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.module.scss?tag=searchcraft-results-info","src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":[".searchcraft-results-info-container {\n border-bottom: 1px solid var(--sc-surface-disabled);\n display: flex;\n justify-content: flex-start;\n}\n\n.searchcraft-results-info-content {\n color: var(--sc-content-primary);\n font-family: var(--sc-font-family);\n font-size: 18px;\n font-weight: 600;\n line-height: 20px;\n margin: 0px 0 8px;\n\n @media (max-width: $breakpoint-md) {\n margin: 0;\n margin-bottom: 8px;\n }\n}","import { Component, h, State } from '@stencil/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { formatNumberWithCommas } from '@utils';\n\n/*\n This web component is designed to display the number of results returned from a search query.\n * It provides users with real-time feedback on the scale of the results, such as the total number of items found.\n \n ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-results-info />\n * ```\n /\n@Component({\n tag: 'searchcraft-results-info',\n styleUrl: 'searchcraft-results-info.module.scss',\n shadow: false,\n})\nexport class SearchcraftResultsInfo {\n @State() isRequesting = false;\n @State() resultsCount = 0;\n @State() responseTime = '';\n @State() query = '';\n\n unsubscribe: () => void;\n\n connectedCallback() {\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n this.isRequesting = state.isRequesting;\n this.resultsCount = state.searchResults?.data?.count \|\| 0;\n this.responseTime = (\n (state.searchResults?.data?.time_taken \|\| 0) 1000\n ).toFixed(2);\n this.query = state.query \|\| '';\n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n render() {\n if (!this.query \|\| this.resultsCount === 0) {\n return null;\n }\n const formattedResults = formatNumberWithCommas(this.resultsCount);\n return (\n <div class='searchcraft-results-info-container'>\n <p class='searchcraft-results-info-content'>\n {formattedResults} results found in {this.responseTime}ms\n </p>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"searchcraft-results-info.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,+BAA+B,GAAG,6rHAA6rH,CAAC;AACtuH,qCAAe,+BAA+B;;MCoBjC,sBAAsB;IALnC;;QAMW,iBAAY,GAAG,KAAK,CAAC;QACrB,iBAAY,GAAG,CAAC,CAAC;QACjB,iBAAY,GAAG,EAAE,CAAC;QAClB,UAAK,GAAG,EAAE,CAAC;KAkCrB;IA9BC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAGA,yBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;;YACrD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,KAAK,KAAI,CAAC,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,CAClB,CAAC,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,UAAU,KAAI,CAAC,IAAI,IAAI,EACnD,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;SAChC,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;YAC1C,OAAO,IAAI,CAAC;SACb;QACD,MAAM,gBAAgB,GAAGC,4BAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnE,QACEC,iBAAK,KAAK,EAAC,oCAAoC,IAC7CA,eAAG,KAAK,EAAC,kCAAkC,IACxC,gBAAgB,wBAAoB,IAAI,CAAC,YAAY,OACpD,CACA,EACN;KACH;;;;;;","names":["useSearchcraftStore","formatNumberWithCommas","h"],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.module.scss?tag=searchcraft-results-info","src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":[".searchcraft-results-info-container {\n border-bottom: 1px solid var(--sc-surface-disabled);\n display: flex;\n justify-content: flex-start;\n}\n\n.searchcraft-results-info-content {\n color: var(--sc-content-primary);\n font-family: var(--sc-font-family);\n font-size: 18px;\n font-weight: 600;\n line-height: 20px;\n margin: 0px 0 8px;\n\n @media (max-width: $breakpoint-md) {\n margin: 0;\n margin-bottom: 8px;\n }\n}","import { Component, h, State } from '@stencil/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { formatNumberWithCommas } from '@utils';\n\n/*\n This web component is designed to display the number of results returned from a search query.\n * It provides users with real-time feedback on the scale of the results, such as the total number of items found.\n \n ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-results-info />\n * ```\n /\n@Component({\n tag: 'searchcraft-results-info',\n styleUrl: 'searchcraft-results-info.module.scss',\n shadow: false,\n})\nexport class SearchcraftResultsInfo {\n @State() isRequesting = false;\n @State() resultsCount = 0;\n @State() responseTime = '';\n @State() query = '';\n\n unsubscribe: () => void;\n\n connectedCallback() {\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n this.isRequesting = state.isRequesting;\n this.resultsCount = state.searchResults?.data?.count \|\| 0;\n this.responseTime = (\n (state.searchResults?.data?.time_taken \|\| 0) 1000\n ).toFixed(2);\n this.query = state.query \|\| '';\n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n render() {\n if (!this.query \|\| this.resultsCount === 0) {\n return null;\n }\n const formattedResults = formatNumberWithCommas(this.resultsCount);\n return (\n <div class='searchcraft-results-info-container'>\n <p class='searchcraft-results-info-content'>\n {formattedResults} results found in {this.responseTime}ms\n </p>\n </div>\n );\n }\n}\n"],"version":3}