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

@searchcraft/javascript-sdk 0.7.0 → 0.7.2

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 (263) hide show

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,6BAA6B,GAAG,k4MAAk4M,CAAC;AACz6M,mCAAe,6BAA6B;;MCmD/B,gBAAgB;IAL7B;;;;;;;;;;;QAaU,eAAU,GAAG,IAAI,CAAC;;;;QAIlB,oBAAe,GAA8B,MAAM,CAAC;;;;QAYpD,iBAAY,GAAoC,EAAE,CAAC;;;;QAInD,qBAAgB,GAAG,cAAc,CAAC;;;;QAIlC,eAAU,GAAG,EAAE,CAAC;QA0Bf,eAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAC7B,UAAK,GAAG,KAAK,CAAC;QACd,6BAAwB,GAAG,KAAK,CAAC;QAElC,gBAAW,GAAGA,yBAAmB,CAAC,QAAQ,EAAE,CAAC;QAuBrD,kBAAa,GAAG,CAAC,KAAY;YAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;YAE9B,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;gBACzB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;gBACrB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBAC9B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBACxC,OAAO;aACR;YAED,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;gBACpB,OAAO;aACR;YAED,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SACjC,CAAC;QAEM,kBAAa,GAAG,OAAO,KAAa;YAC1C,IAAI,KAAK,KAAKA,yBAAmB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE;gBAClD,OAAO;aACR;YAED,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;YAC/B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC3C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAEvC,IAAI;gBACF,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;aACjC;YAAC,OAAO,KAAK,EAAE;gBACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gBAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;aAC1B;SACF,CAAC;QAEF,qBAAgB,GAAG;YACjB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACxC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YAEnB,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;aAC1B;SACF,CAAC;QAEF,qBAAgB,GAAG,OAAO,KAAY;YACpC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC3C,CAAC;KAsGH;IA/KC,IAAI;QACF,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE;YACjD,MAAM,WAAW,GAAG,IAAIC,QAAe,CAAC,IAAI,CAAC,MAAM,EAAE;gBACnD,OAAO,EAAE,WAAW,CAAC,IAAI;gBACzB,UAAU,EAAE,WAAW,CAAC,OAAO;aAChC,CAAC,CAAC;YACH,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;YAC/C,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC;YACrC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;SACvB;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAGD,cAAc;QACZ,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAwDD,MAAM;QACJ,MAAM,qBAAqB,GAAGC,wBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAEnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;QAExD,MAAM,mBAAmB,GAAGC,kBAAU,CAAC,wBAAwB,EAAE;YAC/D,mCAAmC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;YACpE,oCAAoC,EAAE,IAAI,CAAC,eAAe,KAAK,OAAO;YACtE,mCAAmC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;SACrE,CAAC,CAAC;QAEH,MAAM,qBAAqB,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC;QAC5D,MAAM,eAAe,GAAG;YACtB,GAAG,EAAE,qBAAqB,GAAG,SAAS,GAAG,SAAS;SACnD,CAAC;QAEF,QACEC,mEAAM,KAAK,EAAC,wBAAwB,EAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAClEA,kEAAK,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,eAAe,IACrDA,kEAAK,KAAK,EAAC,kCAAkC,IAC3CA,iFACE,aAAa,EAAE,IAAI,CAAC,gBAAgB,EACpC,KAAK,EAAE,IAAI,CAAC,WAAW,GACvB,CACE,EACL,IAAI,CAAC,UAAU,KACdA,kEAAK,KAAK,EAAC,iCAAiC,IAC1CA,sFAAyB,KAAK,EAAE,IAAI,CAAC,UAAU,GAAI,CAC/C,CACP,EACA,IAAI,CAAC,KAAK,KACTA,kEAAK,KAAK,EAAC,iCAAiC,IAC1CA,wFAA2B,YAAY,EAAC,uBAAuB,GAAG,CAC9D,CACP,EACDA,kEAAK,KAAK,EAAC,2BAA2B,IACpCA,oEACE,YAAY,EAAC,KAAK,EAClB,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EACrC,MAAM,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EACnC,OAAO,EAAE,CAAC,KAAK;gBACb,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;aAC3B,EACD,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,KAAK,EAAE,qBAAqB,EAC5B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,UAAU,GACtB,EACFA,kEAAK,KAAK,EAAC,uCAAuC,IAChDA,kEACE,KAAK,EAAC,+BAA+B,EACrC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB,IAEnCA,oEAAO,EAAE,EAAC,mBAAmB,oCAErB,EACRA,mEACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACF,EACL,oBAAoB,KACnBA,qEACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,gCAAgC,EACtC,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAE9BA,kEACE,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5BA,oEAAO,EAAE,EAAC,YAAY,yCAEd,EACRA,mEACE,CAAC,EAAC,uIAAuI,EACzI,MAAM,EAAC,OAAO,kBACD,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACC,CACV,CACG,CACF,CACD,EACP;KACH;;;;;;;AClSH,MAAM,mCAAmC,GAAG,EAAE,CAAC;AAC/C,yCAAe,mCAAmC;;MCmBrC,0BAA0B;;;;IAWrC,cAAc,CAAC,QAAiC,EAAEC,OAAa;;;;QAI7D,MAAM,YAAY,GAAGC,6CAAuC,CAC1D,QAAQ,EACR,IAAI,CAAC,qBAAqB,CAAC,KAAK,CACjC,CAAC;QACF,MAAM,eAAe,GAAGA,6CAAuC,CAC7D,QAAQ,EACR,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CACpC,CAAC;QACF,MAAM,IAAI,GAAGA,6CAAuC,CAClD,QAAQ,EACR,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAChC,CAAC;QACF,MAAM,WAAW,GAAGA,6CAAuC,CACzD,QAAQ,EACR,IAAI,CAAC,qBAAqB,CAAC,WAAW,CACvC,CAAC;QACF,MAAM,QAAQ,GAAGA,6CAAuC,CACtD,QAAQ,EACR,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CACpC,CAAC;QAEF,QACEF,2CACE,GAAG,EAAE,GAAG,QAAQ,CAAC,WAAW,IAAIC,OAAK,EAAE,mBACxB,YAAY,sBACT,eAAe,eACtB,WAAW,eACX,QAAQ,EACnB,IAAI,EAAE,IAAI,uBACSA,OAAK,GACxB,EACF;KACH;IAED,MAAM;;QACJ,QACED,kEAAK,KAAK,EAAC,+BAA+B,IACvC,MAAA,IAAI,CAAC,SAAS,0CAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,KACnC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CACrC,CACG,EACN;KACH;;;;;;;","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.tsx","src/components/searchcraft-popover-list-view/searchcraft-popover-list-view.tsx"],"sourcesContent":["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\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 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 this.inputCleared?.emit();\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 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,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d4b4a45e.js');
+const index = require('./index-a81df4f0.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["searchcraft-filter-panel.cjs",[[0,"searchcraft-filter-panel",{"items":[16],"unsubscribe":[32],"lastQuery":[32]}]]],["searchcraft-base-search-results.cjs",[[4,"searchcraft-base-search-results",{"adInterval":[2,"ad-interval"],"customStylesForResults":[1,"custom-styles-for-results"],"searchResultMappings":[16],"placeAdAtEnd":[4,"place-ad-at-end"],"placeAdAtStart":[4,"place-ad-at-start"],"resultImagePlacement":[1,"result-image-placement"],"buttonLabel":[1,"button-label"],"buttonTarget":[1,"button-target"],"buttonRel":[1,"button-rel"],"containerTarget":[1,"container-target"],"containerRel":[1,"container-rel"],"hasSearched":[32],"query":[32],"searchResults":[32]}]]],["searchcraft-popover-button.cjs",[[4,"searchcraft-popover-button"]]],["searchcraft-results-info.cjs",[[0,"searchcraft-results-info",{"isRequesting":[32],"resultsCount":[32],"responseTime":[32],"query":[32]}]]],["searchcraft-base-search-result.cjs",[[0,"searchcraft-base-search-result",{"titleContent":[1,"title-content"],"subtitleContent":[1,"subtitle-content"],"bodyContent":[1,"body-content"],"footerContent":[1,"footer-content"],"buttonLabel":[1,"button-label"],"buttonHref":[1,"button-href"],"buttonTarget":[1,"button-target"],"buttonRel":[1,"button-rel"],"containerHref":[1,"container-href"],"containerTarget":[1,"container-target"],"containerRel":[1,"container-rel"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"imagePlacement":[1,"image-placement"],"customStyles":[1,"custom-styles"],"documentPosition":[2,"document-position"]}]]],["searchcraft-popover-list-item.cjs",[[0,"searchcraft-popover-list-item",{"titleContent":[1,"title-content"],"subtitleContent":[1,"subtitle-content"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"href":[1],"documentPosition":[2,"document-position"]}]]],["searchcraft-button_3.cjs",[[0,"searchcraft-button",{"iconElement":[16],"iconOnly":[4,"icon-only"],"iconPosition":[1,"icon-position"],"label":[1],"isRequesting":[32]}],[0,"searchcraft-input-label",{"inputLabelClassName":[1,"input-label-class-name"],"label":[1]}],[0,"searchcraft-error-message",{"errorMessage":[1,"error-message"]}]]],["searchcraft-input-form_2.cjs",[[0,"searchcraft-input-form",{"config":[16],"autoSearch":[4,"auto-search"],"buttonPlacement":[1,"button-placement"],"buttonLabel":[1,"button-label"],"inputLabel":[1,"input-label"],"customStyles":[1,"custom-styles"],"placeholderValue":[1,"placeholder-value"],"searchTerm":[1,"search-term"],"inputValue":[32],"error":[32],"isSearchcraftInitialized":[32]},null,{"config":["onConfigChange"]}],[0,"searchcraft-popover-list-view",{"popoverResultMappings":[16],"documents":[16]}]]],["searchcraft-popover-form.cjs",[[0,"searchcraft-popover-form",{"config":[16],"type":[1],"popoverResultMappings":[16],"hotkey":[1],"hotkeyModifier":[1,"hotkey-modifier"],"isPopoverVisibleInState":[32],"unsubscribe":[32],"searchResults":[32],"searchTerm":[32],"isFocused":[32],"breakpointSm":[32],"breakpointMd":[32],"breakpointLg":[32],"modalElement":[32]}]]],["searchcraft-facet-list_3.cjs",[[0,"searchcraft-facet-list",{"fieldName":[1,"field-name"],"baseFacetRoot":[32],"facetRoot":[32],"selectedPaths":[32],"lastTimeTaken":[32],"hasNewSearchTerm":[32],"lastQuery":[32],"lastSearchMode":[32],"lastSortType":[32],"unsubscribe":[32]}],[0,"searchcraft-slider",{"max":[2],"min":[2],"granularity":[2],"dataType":[1,"data-type"],"endValue":[32],"startValue":[32],"lastFocusedHandle":[32]}],[0,"searchcraft-toggle-button",{"label":[1],"subLabel":[1,"sub-label"],"isActive":[32],"unsubscribe":[32],"lastQuery":[32]}]]]], options);
+  return index.bootstrapLazy([["searchcraft-filter-panel.cjs",[[0,"searchcraft-filter-panel",{"items":[16],"unsubscribe":[32],"lastQuery":[32]}]]],["searchcraft-base-search-results.cjs",[[4,"searchcraft-base-search-results",{"adInterval":[2,"ad-interval"],"customStylesForResults":[1,"custom-styles-for-results"],"searchResultMappings":[16],"placeAdAtEnd":[4,"place-ad-at-end"],"placeAdAtStart":[4,"place-ad-at-start"],"resultImagePlacement":[1,"result-image-placement"],"buttonLabel":[1,"button-label"],"buttonTarget":[1,"button-target"],"buttonRel":[1,"button-rel"],"containerTarget":[1,"container-target"],"containerRel":[1,"container-rel"],"hasSearched":[32],"query":[32],"searchResults":[32]}]]],["searchcraft-popover-button.cjs",[[4,"searchcraft-popover-button"]]],["searchcraft-results-info.cjs",[[0,"searchcraft-results-info",{"isRequesting":[32],"resultsCount":[32],"responseTime":[32],"query":[32]}]]],["searchcraft-theme.cjs",[[0,"searchcraft-theme"]]],["searchcraft-base-search-result.cjs",[[0,"searchcraft-base-search-result",{"titleContent":[1,"title-content"],"subtitleContent":[1,"subtitle-content"],"bodyContent":[1,"body-content"],"footerContent":[1,"footer-content"],"buttonLabel":[1,"button-label"],"buttonHref":[1,"button-href"],"buttonTarget":[1,"button-target"],"buttonRel":[1,"button-rel"],"containerHref":[1,"container-href"],"containerTarget":[1,"container-target"],"containerRel":[1,"container-rel"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"imagePlacement":[1,"image-placement"],"customStyles":[1,"custom-styles"],"documentPosition":[2,"document-position"]}]]],["searchcraft-popover-list-item.cjs",[[0,"searchcraft-popover-list-item",{"titleContent":[1,"title-content"],"subtitleContent":[1,"subtitle-content"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"href":[1],"documentPosition":[2,"document-position"]}]]],["searchcraft-button_3.cjs",[[0,"searchcraft-button",{"iconElement":[16],"iconOnly":[4,"icon-only"],"iconPosition":[1,"icon-position"],"label":[1],"isRequesting":[32]}],[0,"searchcraft-input-label",{"inputLabelClassName":[1,"input-label-class-name"],"label":[1]}],[0,"searchcraft-error-message",{"errorMessage":[1,"error-message"]}]]],["searchcraft-input-form_2.cjs",[[0,"searchcraft-input-form",{"config":[16],"autoSearch":[4,"auto-search"],"buttonPlacement":[1,"button-placement"],"buttonLabel":[1,"button-label"],"inputLabel":[1,"input-label"],"customStyles":[1,"custom-styles"],"placeholderValue":[1,"placeholder-value"],"searchTerm":[1,"search-term"],"inputValue":[32],"error":[32],"isSearchcraftInitialized":[32]},null,{"config":["onConfigChange"]}],[0,"searchcraft-popover-list-view",{"popoverResultMappings":[16],"documents":[16]}]]],["searchcraft-popover-form.cjs",[[0,"searchcraft-popover-form",{"config":[16],"type":[1],"popoverResultMappings":[16],"hotkey":[1],"hotkeyModifier":[1,"hotkey-modifier"],"isPopoverVisibleInState":[32],"unsubscribe":[32],"searchResults":[32],"searchTerm":[32],"isFocused":[32],"breakpointSm":[32],"breakpointMd":[32],"breakpointLg":[32],"modalElement":[32]}]]],["searchcraft-facet-list_3.cjs",[[0,"searchcraft-facet-list",{"fieldName":[1,"field-name"],"baseFacetRoot":[32],"facetRoot":[32],"selectedPaths":[32],"lastTimeTaken":[32],"hasNewSearchTerm":[32],"lastQuery":[32],"lastSearchMode":[32],"lastSortType":[32],"unsubscribe":[32]}],[0,"searchcraft-slider",{"max":[2],"min":[2],"granularity":[2],"dataType":[1,"data-type"],"endValue":[32],"startValue":[32],"lastFocusedHandle":[32]}],[0,"searchcraft-toggle-button",{"label":[1],"subLabel":[1,"sub-label"],"isActive":[32],"unsubscribe":[32],"lastQuery":[32]}]]]], options);
 });
 exports.setNonce = index.setNonce;

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

@@ -2,11 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d4b4a45e.js');
-const store = require('./store-abe47006.js');
-const searchcraftPopoverButtonModuleCss = "";
-const SearchcraftPopoverButtonStyle0 = searchcraftPopoverButtonModuleCss;
+const index = require('./index-a81df4f0.js');
+const store = require('./store-f6ba3dfb.js');
 const SearchcraftPopoverButton = class {
     constructor(hostRef) {
@@ -16,10 +13,9 @@ const SearchcraftPopoverButton = class {
         store.useSearchcraftStore.getState().setPopoverVisibility(true);
     }
     render() {
-        return (index.h("button", { key: '7885ca44b5ce619d572194d60c3b7e9d9f6666be', type: 'button', onClick: this.handleOnClick.bind(this) }, index.h("slot", { key: '0a8dc506eadbc725e3ed4c7c6987e02dfcecc229' })));
+        return (index.h("button", { key: '3907a514a85a79c320f529840fda06474721871a', type: 'button', onClick: this.handleOnClick.bind(this) }, index.h("slot", { key: '91bedc41efb5c17a774eab7a95e0abac39497408' })));
     }
 };
-SearchcraftPopoverButton.style = SearchcraftPopoverButtonStyle0;
 exports.searchcraft_popover_button = SearchcraftPopoverButton;

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

	@@ -1 +1 @@
1	- {"file":"searchcraft-popover-button.entry.cjs.js","mappings":";;;;;;;~~AAAA~~,~~MAAM,iCAAiC,GAAG,EAAE,CAAC;AAC7C,uCAAe,iCAAiC;;MCUnC,~~wBAAwB;;;;IACnC,aAAa;QACXA,yBAAmB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;KAC3D;IAED,MAAM;QACJ,QACEC,qEAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAC1DA,oEAAQ,CACD,EACT;KACH~~;;;;;;~~","names":["useSearchcraftStore","h"],"sources":["src/components/searchcraft-popover-button/searchcraft-popover-button.~~module.scss?tag=searchcraft-popover-button","src/components/searchcraft-popover-button/searchcraft-popover-button.~~tsx"],"sourcesContent":["~~","~~import { useSearchcraftStore } from '@provider/store';\nimport { Component, h } from '@stencil/core';\n\n/*\n Renders a button which, when clicked, turns on popover visibility.\n */\n@Component({\n tag: 'searchcraft-popover-button',\n ~~styleUrl: 'searchcraft-popover-button.module.scss',\n~~ shadow: false,\n})\nexport class SearchcraftPopoverButton {\n handleOnClick() {\n useSearchcraftStore.getState().setPopoverVisibility(true);\n }\n\n render() {\n return (\n <button type='button' onClick={this.handleOnClick.bind(this)}>\n <slot />\n </button>\n );\n }\n}\n"],"version":3}
1	+ {"file":"searchcraft-popover-button.entry.cjs.js","mappings":";;;;;;;MAUa,wBAAwB;;;;IACnC,aAAa;QACXA,yBAAmB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;KAC3D;IAED,MAAM;QACJ,QACEC,qEAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAC1DA,oEAAQ,CACD,EACT;KACH;;;;;","names":["useSearchcraftStore","h"],"sources":["src/components/searchcraft-popover-button/searchcraft-popover-button.tsx"],"sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { Component, h } from '@stencil/core';\n\n/*\n Renders a button which, when clicked, turns on popover visibility.\n */\n@Component({\n tag: 'searchcraft-popover-button',\n shadow: false,\n})\nexport class SearchcraftPopoverButton {\n handleOnClick() {\n useSearchcraftStore.getState().setPopoverVisibility(true);\n }\n\n render() {\n return (\n <button type='button' onClick={this.handleOnClick.bind(this)}>\n <slot />\n </button>\n );\n }\n}\n"],"version":3}

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

@@ -2,73 +2,48 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d4b4a45e.js');
+const index = require('./index-a81df4f0.js');
 const index$1 = require('./index-5b0b9d4c.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;
+const store = require('./store-f6ba3dfb.js');
 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;
-            }
-        };
-        /**
-         * Actions to perform when various keys are pressed within the popover form.
-         */
-        this.handleDocumentKeyDown = (event) => {
-            // Document-scoped actions
-            if (event.key === this.hotkey) {
-                this.handleHotkeyPressed(event);
-            }
-            // Document-scoped -> Popover-scoped keyboard event boundary
-            if (!this.hostElement.contains(document.activeElement)) {
-                return;
-            }
-            // Popover-scoped actions
-            switch (event.key) {
-                case 'ArrowDown':
-                case 'ArrowUp':
-                    event.preventDefault();
-                    this.focusOnNextListItem(event.key);
-                    break;
-                case 'Escape':
-                    store.useSearchcraftStore.getState().setPopoverVisibility(false);
-                    break;
-                default:
-                    return;
-            }
-        };
-        this.handleInputInit = () => {
-            const input = this.hostElement.querySelector('.searchcraft-input');
-            input === null || input === void 0 ? void 0 : input.focus();
-        };
     }
+    /**
+     * The Searchcraft config object.
+     */
+    config;
+    /**
+     * The type of popover form to render.
+     *
+     * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.
+     * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.
+     * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.
+     */
+    type = 'inline';
+    /**
+     * Formats the content rendered for each result.
+     */
+    popoverResultMappings;
+    /**
+     * The hotkey that activates the popover.
+     */
+    hotkey = 'k';
+    /**
+     * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
+     */
+    hotkeyModifier = 'meta';
+    isPopoverVisibleInState = false;
+    unsubscribe;
+    searchResults;
+    searchTerm;
+    isFocused = false;
+    breakpointSm = 576;
+    breakpointMd = 768;
+    breakpointLg = 992;
+    modalElement;
+    get hostElement() { return index.getElement(this); }
     componentDidLoad() {
         // Loads the breakpoint values into state
         const computedStyle = getComputedStyle(document.documentElement);
@@ -86,16 +61,20 @@ const SearchcraftPopoverForm = class {
             if (this.isPopoverVisibleInState !== state.isPopoverVisible) {
                 this.handlePopoverVisibilityChange(state.isPopoverVisible);
             }
-            this.searchResults = Object.assign({}, state.searchResults);
+            this.searchResults = { ...state.searchResults };
             this.searchTerm = state.query;
         });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unsubscribe?.();
         document.removeEventListener('click', this.handleDocumentClick);
         document.removeEventListener('keydown', this.handleDocumentKeyDown);
     }
+    handleDocumentClick = (event) => {
+        if (!this.hostElement.contains(event.target)) {
+            this.isFocused = false;
+        }
+    };
     /**
      * Handles when popover visibility is changed in state
      */
@@ -103,6 +82,36 @@ const SearchcraftPopoverForm = class {
         this.isPopoverVisibleInState = isVisible;
         document.body.style.overflow = isVisible ? 'hidden' : 'auto';
     }
+    /**
+     * Actions to perform when various keys are pressed within the popover form.
+     */
+    handleDocumentKeyDown = (event) => {
+        // Document-scoped actions
+        if (event.key === this.hotkey) {
+            this.handleHotkeyPressed(event);
+        }
+        // Document-scoped -> Popover-scoped keyboard event boundary
+        if (!this.hostElement.contains(document.activeElement)) {
+            return;
+        }
+        // Popover-scoped actions
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusOnNextListItem(event.key);
+                break;
+            case 'Escape':
+                store.useSearchcraftStore.getState().setPopoverVisibility(false);
+                break;
+            default:
+                return;
+        }
+    };
+    handleInputInit = () => {
+        const input = this.hostElement.querySelector('.searchcraft-input');
+        input?.focus();
+    };
     /**
      * When popover is `inline` and the viewport is at the smallest breakpoint,
      * focusing on the input will open a modal version of the popover form.
@@ -110,6 +119,7 @@ const SearchcraftPopoverForm = class {
     handleInputFocus() {
         this.isFocused = true;
         if (this.type === 'inline' &&
+            window.visualViewport &&
             window.visualViewport.width < this.breakpointSm) {
             store.useSearchcraftStore.getState().setPopoverVisibility(true);
             // Appends a popover form of type=`modal` to the body
@@ -136,7 +146,7 @@ const SearchcraftPopoverForm = class {
             event.preventDefault();
             if (this.type === 'inline' && !this.isPopoverVisibleInState) {
                 const hostElementInput = this.hostElement.querySelector('.searchcraft-input');
-                hostElementInput === null || hostElementInput === void 0 ? void 0 : hostElementInput.focus();
+                hostElementInput?.focus();
             }
             else {
                 store.useSearchcraftStore
@@ -155,15 +165,14 @@ const SearchcraftPopoverForm = class {
      * @param direction
      */
     focusOnNextListItem(direction) {
-        var _a, _b;
         const listItems = Array.from(document.querySelectorAll('a.searchcraft-popover-list-item')).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
         const currentIndex = listItems.indexOf(document.activeElement);
         if (direction === 'ArrowDown') {
-            (_a = listItems[(currentIndex + 1) % listItems.length]) === null || _a === void 0 ? void 0 : _a.focus();
+            listItems[(currentIndex + 1) % listItems.length]?.focus();
         }
         else if (direction === 'ArrowUp') {
             if (currentIndex >= 1) {
-                (_b = listItems[currentIndex - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+                listItems[currentIndex - 1]?.focus();
             }
             else {
                 const input = document.querySelector('.searchcraft-input');
@@ -178,9 +187,9 @@ const SearchcraftPopoverForm = class {
         }
     }
     get hasResultsToShow() {
-        var _a, _b, _c, _d, _e;
-        return (((_b = (_a = this.searchTerm) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
-            ((_e = (_d = (_c = this.searchResults) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.hits) === null || _e === void 0 ? void 0 : _e.length) > 0);
+        return (this.searchTerm &&
+            this.searchTerm?.trim()?.length > 0 &&
+            (this.searchResults?.data?.hits?.length || 0) > 0);
     }
     renderInlinePopover(documents) {
         const isListViewVisible = this.hasResultsToShow && this.isFocused;
@@ -203,8 +212,7 @@ const SearchcraftPopoverForm = class {
         }
     }
     render() {
-        var _a, _b, _c;
-        const documents = (_c = (_b = (_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.map((data, _index) => {
+        const documents = this.searchResults?.data?.hits?.map((data, _index) => {
             const { doc: result } = data;
             return result;
         });
@@ -217,9 +225,7 @@ const SearchcraftPopoverForm = class {
                 return this.renderFullscreenPopover(documents);
         }
     }
-    get hostElement() { return index.getElement(this); }
 };
-SearchcraftPopoverForm.style = SearchcraftPopoverFormStyle0;
 exports.searchcraft_popover_form = SearchcraftPopoverForm;

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":"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","names":["useSearchcraftStore","classNames","h"],"sources":["src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"sourcesContent":["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 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 } as SearchcraftResponse;\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 &&\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 &&\n this.searchTerm?.trim()?.length > 0 &&\n (this.searchResults?.data?.hits?.length \|\| 0) > 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 }) as Record<string, unknown>[];\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,24 +2,47 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-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;
+const index = require('./index-a81df4f0.js');
+const store = require('./store-f6ba3dfb.js');
 const SearchcraftPopoverListItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    /** The result title */
+    titleContent;
+    /** The result subtitle */
+    subtitleContent;
+    /** The source of the image. If not included, no item will be rendered. */
+    imageSrc;
+    /** The image alt tag. */
+    imageAlt;
+    /** The link href */
+    href;
+    /** The document position relative to the search results (For Measure) */
+    documentPosition = 0;
     componentDidLoad() { }
     connectedCallback() { }
     disconnectedCallback() { }
     handleButtonClick() { }
+    handleLinkClick = () => {
+        const state = store.useSearchcraftStore.getState();
+        const searchcraft = state.getSearchcraftInstance();
+        if (searchcraft) {
+            const document_position = this.documentPosition;
+            const search_term = state.query;
+            const number_of_documents = state.searchResults?.data?.hits?.length || 0;
+            searchcraft.sendMeasureEvent('document_clicked', {
+                document_position,
+                number_of_documents,
+                search_term,
+            });
+        }
+    };
     render() {
-        return (index.h("a", { key: 'b7a590e92994869477825dd17545e8d4e05d1d07', class: 'searchcraft-popover-list-item', href: this.href }, this.imageSrc && (index.h("div", { key: '129525e50ec17dce052f503af318b56e06c900ef', class: 'searchcraft-popover-list-item-image-wrapper' }, index.h("img", { key: '4ba701f35cbf7e167e7edd63ba19e3576e620c26', alt: this.imageAlt, src: this.imageSrc, class: 'searchcraft-popover-list-item-image' }))), index.h("div", { key: '6a6ab09451f5d9d4e554dc1f1fcd57ec13adf2f2', class: 'searchcraft-popover-list-item-info-wrapper' }, index.h("p", { key: '476fdefff6cb35167fb00f24cdf03b9f8d826ba5', class: 'searchcraft-popover-list-item-title' }, this.titleContent), index.h("p", { key: 'b43fd584bfcc8efc7d50d7220b649fafc8bba244', class: 'searchcraft-popover-list-item-subtitle' }, this.subtitleContent))));
+        return (index.h("a", { key: 'b20aae2fc421323774a5129dde7d53d4ae3283fb', class: 'searchcraft-popover-list-item', href: this.href, onClick: this.handleLinkClick.bind(this) }, this.imageSrc && (index.h("div", { key: '79541d12ea3adafff2e141cb8946aa3feaea51df', class: 'searchcraft-popover-list-item-image-wrapper' }, index.h("img", { key: '3e6368a0f544a58ee0af9d1c15d0c909c6231842', alt: this.imageAlt, src: this.imageSrc, class: 'searchcraft-popover-list-item-image' }))), index.h("div", { key: '87e7a9dcc8b868af259b4456e9962af9d8dee498', class: 'searchcraft-popover-list-item-info-wrapper' }, index.h("p", { key: 'e5b63b4c2752573d0ee0ef52c2903b593a8b94a0', class: 'searchcraft-popover-list-item-title' }, this.titleContent), index.h("p", { key: 'c506d5d7e569ec20885eb65cdc6476dfb8895a13', class: 'searchcraft-popover-list-item-subtitle' }, this.subtitleContent))));
     }
 };
-SearchcraftPopoverListItem.style = SearchcraftPopoverListItemStyle0;
 exports.searchcraft_popover_list_item = SearchcraftPopoverListItem;

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":";;;;;;;MAUa,0BAA0B;;;;;IAE7B,YAAY,CAAqB;;IAEjC,eAAe,CAAqB;;IAEpC,QAAQ,CAAqB;;IAE7B,QAAQ,CAAqB;;IAE7B,IAAI,CAAqB;;IAEzB,gBAAgB,GAAG,CAAC,CAAC;IAE7B,gBAAgB,MAAK;IAErB,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,iBAAiB,MAAK;IAEtB,eAAe,GAAG;QAChB,MAAM,KAAK,GAAGA,yBAAmB,CAAC,QAAQ,EAAE,CAAC;QAC7C,MAAM,WAAW,GAAG,KAAK,CAAC,sBAAsB,EAAE,CAAC;QAEnD,IAAI,WAAW,EAAE;YACf,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC;YAChD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC;YAChC,MAAM,mBAAmB,GAAG,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC;YAEzE,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,EAAE;gBAC/C,iBAAiB;gBACjB,mBAAmB;gBACnB,WAAW;aACZ,CAAC,CAAC;SACJ;KACF,CAAC;IAEF,MAAM;QACJ,QACEC,gEACE,KAAK,EAAC,+BAA+B,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAEvC,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":["useSearchcraftStore","h"],"sources":["src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.tsx"],"sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { 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 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 = 0;\n\n componentDidLoad() {}\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n handleButtonClick() {}\n\n handleLinkClick = () => {\n const state = useSearchcraftStore.getState();\n const searchcraft = state.getSearchcraftInstance();\n\n if (searchcraft) {\n const document_position = this.documentPosition;\n const search_term = state.query;\n const number_of_documents = state.searchResults?.data?.hits?.length \|\| 0;\n\n searchcraft.sendMeasureEvent('document_clicked', {\n document_position,\n number_of_documents,\n search_term,\n });\n }\n };\n\n render() {\n return (\n <a\n class='searchcraft-popover-list-item'\n href={this.href}\n onClick={this.handleLinkClick.bind(this)}\n >\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}