@searchcraft/javascript-sdk 0.2.9 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/cjs/searchcraft-auto-search-form_19.cjs.entry.js +28 -11
  2. package/dist/cjs/searchcraft-auto-search-form_19.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.js +4 -4
  4. package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.js.map +1 -1
  5. package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.js +1 -3
  6. package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.js.map +1 -1
  7. package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.module.css +15 -12
  8. package/dist/collection/components/searchcraft-input/searchcraft-input.js +5 -1
  9. package/dist/collection/components/searchcraft-input/searchcraft-input.js.map +1 -1
  10. package/dist/collection/components/searchcraft-input/searchcraft-input.module.css +24 -16
  11. package/dist/collection/components/searchcraft-slider/searchcraft-slider.module.css +3 -3
  12. package/dist/collection/components/searchcraft-toggle-button/searchcraft-toggle-button.js +15 -0
  13. package/dist/collection/components/searchcraft-toggle-button/searchcraft-toggle-button.js.map +1 -1
  14. package/dist/components/{p-dd2a4022.js → p-27a6ca57.js} +7 -3
  15. package/dist/components/p-27a6ca57.js.map +1 -0
  16. package/dist/components/searchcraft-auto-search-form.js +5 -5
  17. package/dist/components/searchcraft-auto-search-form.js.map +1 -1
  18. package/dist/components/searchcraft-base-search-form.js +1 -1
  19. package/dist/components/searchcraft-filters-list.js +2 -4
  20. package/dist/components/searchcraft-filters-list.js.map +1 -1
  21. package/dist/components/searchcraft-input.js +1 -1
  22. package/dist/components/searchcraft-slider.js +1 -1
  23. package/dist/components/searchcraft-slider.js.map +1 -1
  24. package/dist/components/searchcraft-toggle-button.js +15 -0
  25. package/dist/components/searchcraft-toggle-button.js.map +1 -1
  26. package/dist/esm/searchcraft-auto-search-form_19.entry.js +28 -11
  27. package/dist/esm/searchcraft-auto-search-form_19.entry.js.map +1 -1
  28. package/dist/searchcraft-javascript-sdk/p-72382d90.entry.js +2 -0
  29. package/dist/searchcraft-javascript-sdk/p-72382d90.entry.js.map +1 -0
  30. package/dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js +1 -1
  31. package/dist/types/components/searchcraft-toggle-button/searchcraft-toggle-button.d.ts +3 -1
  32. package/package.json +1 -1
  33. package/dist/components/p-dd2a4022.js.map +0 -1
  34. package/dist/searchcraft-javascript-sdk/p-6c007e2e.entry.js +0 -2
  35. package/dist/searchcraft-javascript-sdk/p-6c007e2e.entry.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"searchcraft-filters-list.js","sourceRoot":"","sources":["../../../src/components/searchcraft-filters-list/searchcraft-filters-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n State,\n Prop,\n Event,\n type EventEmitter,\n} from '@stencil/core';\n\nimport type { Facets } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { flattenFacets } from '@utils/utils';\n\n@Component({\n tag: 'searchcraft-filters-list',\n styleUrl: 'searchcraft-filters-list.module.scss',\n shadow: true,\n})\nexport class SearchcraftFiltersList {\n @Prop() filters: Array<{ label: string; value: string }> = [];\n\n @Event() filtersUpdated: EventEmitter<string[]>;\n\n @State() dynamicFilters: Array<{\n label: string;\n value: string;\n count: number;\n children?: Array<{\n label: string;\n value: string;\n count: number;\n }>;\n }> = [];\n @State() selectedFilters: string[] = [];\n @State() query = '';\n @State() isRequesting = false;\n @State() resultsCount = 0;\n\n private searchStore = useSearchcraftStore.getState();\n private autoSearchFormElement: HTMLElement | null = null;\n unsubscribe: () => void;\n\n connectedCallback() {\n const state = this.searchStore;\n const facets = state.searchResults?.data.facets;\n\n if (facets) {\n this.populateFiltersFromFacets(facets);\n }\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n const query = state.query?.trim();\n const facets = state.searchResults?.data.facets;\n this.query = query || '';\n this.isRequesting = state.isRequesting;\n this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n\n if (facets && this.selectedFilters.length === 0) {\n this.populateFiltersFromFacets(facets);\n }\n });\n\n this.autoSearchFormElement = document.querySelector(\n 'searchcraft-auto-search-form',\n );\n if (this.autoSearchFormElement) {\n this.autoSearchFormElement.addEventListener(\n 'querySubmit',\n this.handleSearchRequest,\n );\n }\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n\n if (this.autoSearchFormElement) {\n this.autoSearchFormElement.removeEventListener(\n 'querySubmit',\n this.handleSearchRequest,\n );\n }\n }\n\n handleSearchRequest = () => {\n this.selectedFilters = [];\n this.searchStore.setSelectedFilters([]);\n this.emitFiltersUpdate();\n };\n\n populateFiltersFromFacets(facets: Facets) {\n const flattened = flattenFacets(facets[0]?.section || []);\n this.dynamicFilters = flattened.map((filter) => ({\n label: filter.label,\n value: filter.value,\n count: filter.count,\n children: filter.children || [],\n }));\n }\n\n handleCheckboxChange(value: string, isChecked: boolean, isParent = false) {\n if (isParent) {\n const parentFilter = this.dynamicFilters.find(\n (filter) => filter.value === value,\n );\n const childValues =\n parentFilter?.children?.map((child) => child.value) || [];\n\n if (!isChecked) {\n // Remove children from selectedFilters when parent is unchecked\n this.selectedFilters = this.selectedFilters.filter(\n (filter) => filter !== value && !childValues.includes(filter),\n );\n } else {\n // Add parent filter to selectedFilters\n this.selectedFilters = [...this.selectedFilters, value];\n }\n } else {\n // Update selectedFilters for child filters\n this.selectedFilters = isChecked\n ? [...this.selectedFilters, value]\n : this.selectedFilters.filter((filter) => filter !== value);\n }\n this.emitFiltersUpdate();\n }\n\n emitFiltersUpdate() {\n this.filtersUpdated.emit(this.selectedFilters);\n this.searchStore.setSelectedFilters(this.selectedFilters);\n this.searchStore.search();\n }\n\n formatLabel(label: string, count: number): string {\n return `${label.replace(/-/g, ' ').replace(/\\b\\w/g, (char) => char.toUpperCase())} (${count})`;\n }\n\n render() {\n if (!this.query || this.resultsCount === 0) {\n return null;\n }\n return (\n <div class='filtersList'>\n {this.dynamicFilters.map((filter) => {\n const isChildSelected = filter.children\n ? filter.children.some((child) =>\n this.selectedFilters.includes(child.value),\n )\n : false;\n\n return (\n <div key={filter.value} class='filterItem'>\n <label class='checkboxLabel'>\n <input\n type='checkbox'\n checked={this.selectedFilters.includes(filter.value)}\n onChange={(event: Event) =>\n this.handleCheckboxChange(\n filter.value,\n (event.target as HTMLInputElement).checked,\n true,\n )\n }\n />\n {isChildSelected ? (\n <div class='dashContainer'>\n <searchcraft-dash-icon />\n </div>\n ) : (\n <div class='checkContainer'>\n <searchcraft-check-icon />\n </div>\n )}\n {this.formatLabel(filter.label, filter.count)}\n </label>\n {filter.children && filter.children.length > 0 && (\n <div class='childrenContainer'>\n {filter.children.map((child) => (\n <label\n key={child.value}\n class='childCheckboxLabel'\n style={{\n marginLeft: '20px',\n display: this.selectedFilters.includes(filter.value)\n ? 'flex'\n : 'none',\n }}\n >\n <input\n type='checkbox'\n checked={this.selectedFilters.includes(child.value)}\n onChange={(event: Event) =>\n this.handleCheckboxChange(\n child.value,\n (event.target as HTMLInputElement).checked,\n )\n }\n />\n <div class='checkContainer'>\n <searchcraft-check-icon />\n </div>\n {this.formatLabel(\n child.label.includes('/')\n ? child.label.split('/').pop() || child.label\n : child.label,\n child.count,\n )}\n </label>\n ))}\n </div>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"searchcraft-filters-list.js","sourceRoot":"","sources":["../../../src/components/searchcraft-filters-list/searchcraft-filters-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n State,\n Prop,\n Event,\n type EventEmitter,\n} from '@stencil/core';\n\nimport type { Facets } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { flattenFacets } from '@utils/utils';\n\n@Component({\n tag: 'searchcraft-filters-list',\n styleUrl: 'searchcraft-filters-list.module.scss',\n shadow: true,\n})\nexport class SearchcraftFiltersList {\n @Prop() filters: Array<{ label: string; value: string }> = [];\n\n @Event() filtersUpdated: EventEmitter<string[]>;\n\n @State() dynamicFilters: Array<{\n label: string;\n value: string;\n count: number;\n children?: Array<{\n label: string;\n value: string;\n count: number;\n }>;\n }> = [];\n @State() selectedFilters: string[] = [];\n @State() query = '';\n @State() isRequesting = false;\n @State() resultsCount = 0;\n\n private searchStore = useSearchcraftStore.getState();\n private autoSearchFormElement: HTMLElement | null = null;\n unsubscribe: () => void;\n\n connectedCallback() {\n const state = this.searchStore;\n const facets = state.searchResults?.data.facets;\n\n if (facets) {\n this.populateFiltersFromFacets(facets);\n }\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n const query = state.query?.trim();\n const facets = state.searchResults?.data.facets;\n this.query = query || '';\n this.isRequesting = state.isRequesting;\n this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n\n if (facets && this.selectedFilters.length === 0) {\n this.populateFiltersFromFacets(facets);\n }\n });\n\n this.autoSearchFormElement = document.querySelector(\n 'searchcraft-auto-search-form',\n );\n if (this.autoSearchFormElement) {\n this.autoSearchFormElement.addEventListener(\n 'querySubmit',\n this.handleSearchRequest,\n );\n }\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n\n if (this.autoSearchFormElement) {\n this.autoSearchFormElement.removeEventListener(\n 'querySubmit',\n this.handleSearchRequest,\n );\n }\n }\n\n handleSearchRequest = () => {\n this.selectedFilters = [];\n this.searchStore.setSelectedFilters([]);\n this.emitFiltersUpdate();\n };\n\n populateFiltersFromFacets(facets: Facets) {\n const flattened = flattenFacets(facets[0]?.section || []);\n this.dynamicFilters = flattened.map((filter) => ({\n label: filter.label,\n value: filter.value,\n count: filter.count,\n children: filter.children || [],\n }));\n }\n\n handleCheckboxChange(value: string, isChecked: boolean, isParent = false) {\n if (isParent) {\n const parentFilter = this.dynamicFilters.find(\n (filter) => filter.value === value,\n );\n const childValues =\n parentFilter?.children?.map((child) => child.value) || [];\n\n if (!isChecked) {\n // Remove children from selectedFilters when parent is unchecked\n this.selectedFilters = this.selectedFilters.filter(\n (filter) => filter !== value && !childValues.includes(filter),\n );\n } else {\n this.selectedFilters = [...this.selectedFilters, value];\n }\n } else {\n this.selectedFilters = isChecked\n ? [...this.selectedFilters, value]\n : this.selectedFilters.filter((filter) => filter !== value);\n }\n this.emitFiltersUpdate();\n }\n\n emitFiltersUpdate() {\n this.filtersUpdated.emit(this.selectedFilters);\n this.searchStore.setSelectedFilters(this.selectedFilters);\n this.searchStore.search();\n }\n\n formatLabel(label: string, count: number): string {\n return `${label.replace(/-/g, ' ').replace(/\\b\\w/g, (char) => char.toUpperCase())} (${count})`;\n }\n\n render() {\n if (!this.query || this.resultsCount === 0) {\n return null;\n }\n return (\n <div class='filtersList'>\n {this.dynamicFilters.map((filter) => {\n const isChildSelected = filter.children\n ? filter.children.some((child) =>\n this.selectedFilters.includes(child.value),\n )\n : false;\n\n return (\n <div key={filter.value} class='filterItem'>\n <label class='checkboxLabel'>\n <input\n checked={this.selectedFilters.includes(filter.value)}\n onChange={(event: Event) =>\n this.handleCheckboxChange(\n filter.value,\n (event.target as HTMLInputElement).checked,\n true,\n )\n }\n type='checkbox'\n />\n {isChildSelected ? (\n <div class='dashContainer'>\n <searchcraft-dash-icon />\n </div>\n ) : (\n <div class='checkContainer'>\n <searchcraft-check-icon />\n </div>\n )}\n {this.formatLabel(filter.label, filter.count)}\n </label>\n {filter.children && filter.children.length > 0 && (\n <div class='childrenContainer'>\n {filter.children.map((child) => (\n <label\n key={child.value}\n class='childCheckboxLabel'\n style={{\n marginLeft: '20px',\n display: this.selectedFilters.includes(filter.value)\n ? 'flex'\n : 'none',\n }}\n >\n <input\n type='checkbox'\n checked={this.selectedFilters.includes(child.value)}\n onChange={(event: Event) =>\n this.handleCheckboxChange(\n child.value,\n (event.target as HTMLInputElement).checked,\n )\n }\n />\n <div class='checkContainer'>\n <searchcraft-check-icon />\n </div>\n {this.formatLabel(\n child.label.includes('/')\n ? child.label.split('/').pop() || child.label\n : child.label,\n child.count,\n )}\n </label>\n ))}\n </div>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"]}
@@ -19,6 +19,7 @@
19
19
  appearance: none;
20
20
  background-color: #EDEDED;
21
21
  border: 1px solid #D9D9D9;
22
+ border-radius: 8px;
22
23
  cursor: pointer;
23
24
  display: flex;
24
25
  height: 24px;
@@ -26,8 +27,12 @@
26
27
  width: 24px;
27
28
  }
28
29
 
30
+ .checkboxLabel input[type=checkbox]:focus {
31
+ outline: 2px solid #007DB3;
32
+ }
33
+
29
34
  .checkboxLabel input[type=checkbox]:checked {
30
- background-color: #000;
35
+ background-color: #007DB3;
31
36
  position: relative;
32
37
  }
33
38
 
@@ -59,6 +64,7 @@
59
64
  appearance: none;
60
65
  background-color: #EDEDED;
61
66
  border: 1px solid #D9D9D9;
67
+ border-radius: 8px;
62
68
  cursor: pointer;
63
69
  display: flex;
64
70
  height: 24px;
@@ -68,8 +74,12 @@
68
74
  -webkit-font-smoothing: antialiased;
69
75
  }
70
76
 
77
+ .childCheckboxLabel input[type=checkbox]:focus {
78
+ outline: 2px solid #007DB3;
79
+ }
80
+
71
81
  .childCheckboxLabel input[type=checkbox]:checked {
72
- background-color: #000;
82
+ background-color: #007DB3;
73
83
  position: relative;
74
84
  }
75
85
 
@@ -86,8 +96,8 @@
86
96
  height: 16px;
87
97
  width: 16px;
88
98
  position: absolute;
89
- top: 10px;
90
- left: 7px;
99
+ top: 9px;
100
+ left: 8px;
91
101
  }
92
102
 
93
103
  .dashContainer {
@@ -95,13 +105,6 @@
95
105
  height: 3px;
96
106
  width: 14px;
97
107
  position: absolute;
98
- top: 5px;
108
+ top: 3px;
99
109
  left: 9px;
100
- }
101
-
102
- .loading {
103
- align-items: center;
104
- display: flex;
105
- justify-content: center;
106
- margin: 100px;
107
110
  }
@@ -29,6 +29,10 @@ export class SearchcraftInput {
29
29
  this.inputKeyUp.emit(input.value);
30
30
  }
31
31
  handleClearInput() {
32
+ if (this.query === '') {
33
+ return;
34
+ }
35
+ this.query = '';
32
36
  if (this.clearInput) {
33
37
  this.clearInput.emit();
34
38
  }
@@ -48,7 +52,7 @@ export class SearchcraftInput {
48
52
  const placeholderStyle = {
49
53
  fontSize: validatedCustomStyles.placeholderFontSize || '16px',
50
54
  };
51
- return (h("div", { key: '0eea589d7f78b4ae830b1950ab193f9c72797625', class: classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (h(Fragment, null, h("input", { autoComplete: 'off', class: classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), h("style", null, `
55
+ return (h("div", { key: '7047cbe1692a4c8f11232d7f65e00824703d8b50', class: classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (h(Fragment, null, h("input", { autoComplete: 'off', class: classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), h("style", null, `
52
56
  #searchcraft-input-id::placeholder {
53
57
  font-size: ${placeholderStyle.fontSize};
54
58
  }
@@ -1 +1 @@
1
- {"version":3,"file":"searchcraft-input.js","sourceRoot":"","sources":["../../../src/components/searchcraft-input/searchcraft-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Event,\n Fragment,\n type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils/utils';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n detail: T;\n target: HTMLSearchcraftInputElement;\n}\n\n@Component({\n tag: 'searchcraft-input',\n styleUrl: 'searchcraft-input.module.scss',\n shadow: true,\n})\nexport class SearchcraftInput {\n @Prop() customStyles: string | Record<string, string> = {};\n @Prop() error = false;\n @Prop() formClassName = '';\n @Prop() inputCaptionClassName = '';\n @Prop() inputCaptionValue = '';\n @Prop() inputClassName = '';\n @Prop() inputIconHeight = 20;\n @Prop() inputIconWidth = 20;\n @Prop() isRequesting = false;\n @Prop() placeholderValue = 'Enter Search';\n @Prop() rightToLeftOrientation = false;\n @Prop() query = '';\n\n @Event() clearInput: EventEmitter<void>;\n @Event() searchInputChange: EventEmitter<string>;\n @Event() inputKeyUp: EventEmitter<string>;\n\n @State() theme = 'light';\n\n private get isLightTheme() {\n return this.theme === 'light';\n }\n\n handleInputChange(event: Event) {\n const input = event.target as HTMLInputElement;\n this.searchInputChange.emit(input.value);\n }\n\n handleInputKeyUp(event: KeyboardEvent) {\n const input = event.target as HTMLInputElement;\n this.inputKeyUp.emit(input.value);\n }\n\n handleClearInput() {\n if (this.clearInput) {\n this.clearInput.emit();\n }\n }\n\n render() {\n const containerClassName = this.rightToLeftOrientation\n ? 'inputContainerRTL'\n : 'inputContainerLTR';\n\n const inputClassName = classNames(\n this.error\n ? this.isLightTheme\n ? 'inputErrorLightRTL'\n : 'inputErrorDarkRTL'\n : this.isLightTheme\n ? 'inputLightLTR'\n : 'inputDarkLTR',\n 'searchcraft-input',\n );\n\n const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n const placeholderStyle = {\n fontSize: validatedCustomStyles.placeholderFontSize || '16px',\n };\n return (\n <div\n class={classNames(\n containerClassName,\n this.formClassName,\n 'searchcraft-input-form',\n )}\n >\n {this.rightToLeftOrientation ? (\n <Fragment>\n <input\n autoComplete='off'\n class={classNames(inputClassName, 'searchcraft-input')}\n id='searchcraft-input-id'\n onChange={this.handleInputChange.bind(this)}\n onKeyUp={this.handleInputKeyUp.bind(this)}\n placeholder={this.placeholderValue}\n type='text'\n value={this.query}\n style={validatedCustomStyles}\n />\n <style>\n {`\n #searchcraft-input-id::placeholder {\n font-size: ${placeholderStyle.fontSize};\n }\n `}\n </style>\n {this.inputCaptionValue && (\n <searchcraft-input-caption\n inputCaptionClassName={this.inputCaptionClassName}\n inputCaptionValue={this.inputCaptionValue}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n {this.query.length > 0 && (\n <searchcraft-clear-input-button\n isRequesting={this.isRequesting}\n onClearInput={this.handleClearInput}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n <searchcraft-input-icon\n error={this.error}\n height={this.inputIconHeight}\n rightToLeftOrientation={this.rightToLeftOrientation}\n width={this.inputIconWidth}\n />\n </Fragment>\n ) : (\n <Fragment>\n <searchcraft-input-icon\n error={this.error}\n height={this.inputIconHeight}\n rightToLeftOrientation={this.rightToLeftOrientation}\n width={this.inputIconWidth}\n />\n <input\n autoComplete='off'\n class={classNames(inputClassName, 'searchcraft-input')}\n id='searchcraft-input-id'\n onChange={this.handleInputChange.bind(this)}\n onKeyUp={this.handleInputKeyUp.bind(this)}\n placeholder={this.placeholderValue}\n type='text'\n value={this.query}\n style={validatedCustomStyles}\n />\n <style>\n {`\n #searchcraft-input-id::placeholder {\n font-size: ${placeholderStyle.fontSize};\n }\n `}\n </style>\n {this.inputCaptionValue && (\n <searchcraft-input-caption\n inputCaptionClassName={this.inputCaptionClassName}\n inputCaptionValue={this.inputCaptionValue}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n {this.query.length > 0 && (\n <searchcraft-clear-input-button\n isRequesting={this.isRequesting}\n onClearInput={this.handleClearInput}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n </Fragment>\n )}\n </div>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"searchcraft-input.js","sourceRoot":"","sources":["../../../src/components/searchcraft-input/searchcraft-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Event,\n Fragment,\n type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils/utils';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n detail: T;\n target: HTMLSearchcraftInputElement;\n}\n\n@Component({\n tag: 'searchcraft-input',\n styleUrl: 'searchcraft-input.module.scss',\n shadow: true,\n})\nexport class SearchcraftInput {\n @Prop() customStyles: string | Record<string, string> = {};\n @Prop() error = false;\n @Prop() formClassName = '';\n @Prop() inputCaptionClassName = '';\n @Prop() inputCaptionValue = '';\n @Prop() inputClassName = '';\n @Prop() inputIconHeight = 20;\n @Prop() inputIconWidth = 20;\n @Prop() isRequesting = false;\n @Prop() placeholderValue = 'Enter Search';\n @Prop() rightToLeftOrientation = false;\n @Prop() query = '';\n\n @Event() clearInput: EventEmitter<void>;\n @Event() searchInputChange: EventEmitter<string>;\n @Event() inputKeyUp: EventEmitter<string>;\n\n @State() theme = 'light';\n\n private get isLightTheme() {\n return this.theme === 'light';\n }\n\n handleInputChange(event: Event) {\n const input = event.target as HTMLInputElement;\n this.searchInputChange.emit(input.value);\n }\n\n handleInputKeyUp(event: KeyboardEvent) {\n const input = event.target as HTMLInputElement;\n this.inputKeyUp.emit(input.value);\n }\n\n handleClearInput() {\n if (this.query === '') {\n return;\n }\n this.query = '';\n if (this.clearInput) {\n this.clearInput.emit();\n }\n }\n\n render() {\n const containerClassName = this.rightToLeftOrientation\n ? 'inputContainerRTL'\n : 'inputContainerLTR';\n\n const inputClassName = classNames(\n this.error\n ? this.isLightTheme\n ? 'inputErrorLightRTL'\n : 'inputErrorDarkRTL'\n : this.isLightTheme\n ? 'inputLightLTR'\n : 'inputDarkLTR',\n 'searchcraft-input',\n );\n\n const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n const placeholderStyle = {\n fontSize: validatedCustomStyles.placeholderFontSize || '16px',\n };\n return (\n <div\n class={classNames(\n containerClassName,\n this.formClassName,\n 'searchcraft-input-form',\n )}\n >\n {this.rightToLeftOrientation ? (\n <Fragment>\n <input\n autoComplete='off'\n class={classNames(inputClassName, 'searchcraft-input')}\n id='searchcraft-input-id'\n onChange={this.handleInputChange.bind(this)}\n onKeyUp={this.handleInputKeyUp.bind(this)}\n placeholder={this.placeholderValue}\n type='text'\n value={this.query}\n style={validatedCustomStyles}\n />\n <style>\n {`\n #searchcraft-input-id::placeholder {\n font-size: ${placeholderStyle.fontSize};\n }\n `}\n </style>\n {this.inputCaptionValue && (\n <searchcraft-input-caption\n inputCaptionClassName={this.inputCaptionClassName}\n inputCaptionValue={this.inputCaptionValue}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n {this.query.length > 0 && (\n <searchcraft-clear-input-button\n isRequesting={this.isRequesting}\n onClearInput={this.handleClearInput}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n <searchcraft-input-icon\n error={this.error}\n height={this.inputIconHeight}\n rightToLeftOrientation={this.rightToLeftOrientation}\n width={this.inputIconWidth}\n />\n </Fragment>\n ) : (\n <Fragment>\n <searchcraft-input-icon\n error={this.error}\n height={this.inputIconHeight}\n rightToLeftOrientation={this.rightToLeftOrientation}\n width={this.inputIconWidth}\n />\n <input\n autoComplete='off'\n class={classNames(inputClassName, 'searchcraft-input')}\n id='searchcraft-input-id'\n onChange={this.handleInputChange.bind(this)}\n onKeyUp={this.handleInputKeyUp.bind(this)}\n placeholder={this.placeholderValue}\n type='text'\n value={this.query}\n style={validatedCustomStyles}\n />\n <style>\n {`\n #searchcraft-input-id::placeholder {\n font-size: ${placeholderStyle.fontSize};\n }\n `}\n </style>\n {this.inputCaptionValue && (\n <searchcraft-input-caption\n inputCaptionClassName={this.inputCaptionClassName}\n inputCaptionValue={this.inputCaptionValue}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n {this.query.length > 0 && (\n <searchcraft-clear-input-button\n isRequesting={this.isRequesting}\n onClearInput={this.handleClearInput}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n </Fragment>\n )}\n </div>\n );\n }\n}\n"]}
@@ -16,7 +16,7 @@
16
16
  .inputLightLTR {
17
17
  border: none;
18
18
  border-radius: 8px;
19
- font-family: var(--font-stack);
19
+ font-family: "Brygada 1918";
20
20
  outline: none;
21
21
  padding-bottom: 15px;
22
22
  padding-top: 15px;
@@ -28,8 +28,9 @@
28
28
  padding-right: 16px;
29
29
  }
30
30
  .inputLightLTR::placeholder {
31
- font-family: var(--font-stack);
31
+ font-family: "Brygada 1918";
32
32
  font-size: 16px;
33
+ font-weight: 600;
33
34
  }
34
35
  .inputLightLTR::placeholder {
35
36
  color: #737373;
@@ -41,7 +42,7 @@
41
42
  .inputDarkLTR {
42
43
  border: none;
43
44
  border-radius: 8px;
44
- font-family: var(--font-stack);
45
+ font-family: "Brygada 1918";
45
46
  outline: none;
46
47
  padding-bottom: 15px;
47
48
  padding-top: 15px;
@@ -53,8 +54,9 @@
53
54
  padding-right: 16px;
54
55
  }
55
56
  .inputDarkLTR::placeholder {
56
- font-family: var(--font-stack);
57
+ font-family: "Brygada 1918";
57
58
  font-size: 16px;
59
+ font-weight: 600;
58
60
  }
59
61
  .inputDarkLTR::placeholder {
60
62
  color: #BFBFBF;
@@ -66,7 +68,7 @@
66
68
  .inputErrorLightLTR {
67
69
  border: none;
68
70
  border-radius: 8px;
69
- font-family: var(--font-stack);
71
+ font-family: "Brygada 1918";
70
72
  outline: none;
71
73
  padding-bottom: 15px;
72
74
  padding-top: 15px;
@@ -79,8 +81,9 @@
79
81
  padding-right: 16px;
80
82
  }
81
83
  .inputErrorLightLTR::placeholder {
82
- font-family: var(--font-stack);
84
+ font-family: "Brygada 1918";
83
85
  font-size: 16px;
86
+ font-weight: 600;
84
87
  }
85
88
  .inputErrorLightLTR::placeholder {
86
89
  color: #737373;
@@ -95,7 +98,7 @@
95
98
  .inputErrorDarkLTR {
96
99
  border: none;
97
100
  border-radius: 8px;
98
- font-family: var(--font-stack);
101
+ font-family: "Brygada 1918";
99
102
  outline: none;
100
103
  padding-bottom: 15px;
101
104
  padding-top: 15px;
@@ -108,8 +111,9 @@
108
111
  padding-right: 16px;
109
112
  }
110
113
  .inputErrorDarkLTR::placeholder {
111
- font-family: var(--font-stack);
114
+ font-family: "Brygada 1918";
112
115
  font-size: 16px;
116
+ font-weight: 600;
113
117
  }
114
118
  .inputErrorDarkLTR::placeholder {
115
119
  color: #BFBFBF;
@@ -124,7 +128,7 @@
124
128
  .inputLightRTL {
125
129
  border: none;
126
130
  border-radius: 8px;
127
- font-family: var(--font-stack);
131
+ font-family: "Brygada 1918";
128
132
  outline: none;
129
133
  padding-bottom: 15px;
130
134
  padding-top: 15px;
@@ -137,8 +141,9 @@
137
141
  text-align: right;
138
142
  }
139
143
  .inputLightRTL::placeholder {
140
- font-family: var(--font-stack);
144
+ font-family: "Brygada 1918";
141
145
  font-size: 16px;
146
+ font-weight: 600;
142
147
  }
143
148
  .inputLightRTL::placeholder {
144
149
  color: #737373;
@@ -150,7 +155,7 @@
150
155
  .inputDarkRTL {
151
156
  border: none;
152
157
  border-radius: 8px;
153
- font-family: var(--font-stack);
158
+ font-family: "Brygada 1918";
154
159
  outline: none;
155
160
  padding-bottom: 15px;
156
161
  padding-top: 15px;
@@ -163,8 +168,9 @@
163
168
  text-align: right;
164
169
  }
165
170
  .inputDarkRTL::placeholder {
166
- font-family: var(--font-stack);
171
+ font-family: "Brygada 1918";
167
172
  font-size: 16px;
173
+ font-weight: 600;
168
174
  }
169
175
  .inputDarkRTL::placeholder {
170
176
  color: #BFBFBF;
@@ -176,7 +182,7 @@
176
182
  .inputErrorLightRTL {
177
183
  border: none;
178
184
  border-radius: 8px;
179
- font-family: var(--font-stack);
185
+ font-family: "Brygada 1918";
180
186
  outline: none;
181
187
  padding-bottom: 15px;
182
188
  padding-top: 15px;
@@ -190,8 +196,9 @@
190
196
  text-align: right;
191
197
  }
192
198
  .inputErrorLightRTL::placeholder {
193
- font-family: var(--font-stack);
199
+ font-family: "Brygada 1918";
194
200
  font-size: 16px;
201
+ font-weight: 600;
195
202
  }
196
203
  .inputErrorLightRTL::placeholder {
197
204
  color: #737373;
@@ -206,7 +213,7 @@
206
213
  .inputErrorDarkRTL {
207
214
  border: none;
208
215
  border-radius: 8px;
209
- font-family: var(--font-stack);
216
+ font-family: "Brygada 1918";
210
217
  outline: none;
211
218
  padding-bottom: 15px;
212
219
  padding-top: 15px;
@@ -220,8 +227,9 @@
220
227
  text-align: right;
221
228
  }
222
229
  .inputErrorDarkRTL::placeholder {
223
- font-family: var(--font-stack);
230
+ font-family: "Brygada 1918";
224
231
  font-size: 16px;
232
+ font-weight: 600;
225
233
  }
226
234
  .inputErrorDarkRTL::placeholder {
227
235
  color: #BFBFBF;
@@ -14,13 +14,13 @@
14
14
  align-items: center;
15
15
  }
16
16
  .rangeContainer .activeRange {
17
+ background: #007DB3;
18
+ border-radius: 2px;
19
+ height: 4px;
17
20
  position: absolute;
18
21
  top: 50%;
19
22
  transform: translateY(-50%);
20
- height: 4px;
21
- background: #007DB3;
22
23
  z-index: 0;
23
- border-radius: 2px;
24
24
  }
25
25
  .rangeContainer .rangeSlider {
26
26
  width: 100%;
@@ -2,7 +2,15 @@ import { h } from "@stencil/core";
2
2
  import { useSearchcraftStore } from "../../provider/store";
3
3
  export class SearchcraftToggleButton {
4
4
  constructor() {
5
+ this.autoSearchFormElement = null;
5
6
  this.searchStore = useSearchcraftStore.getState();
7
+ this.handleSearchRequest = () => {
8
+ this.isActive = false;
9
+ this.searchStore.setSearchParams({
10
+ mode: 'fuzzy',
11
+ sort: 'asc',
12
+ });
13
+ };
6
14
  this.handleToggle = async () => {
7
15
  this.isActive = !this.isActive;
8
16
  if (this.type === 'mode') {
@@ -35,11 +43,18 @@ export class SearchcraftToggleButton {
35
43
  this.query = state.query || '';
36
44
  this.resultsCount = ((_c = (_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) || 0;
37
45
  });
46
+ this.autoSearchFormElement = document.querySelector('searchcraft-auto-search-form');
47
+ if (this.autoSearchFormElement) {
48
+ this.autoSearchFormElement.addEventListener('querySubmit', this.handleSearchRequest);
49
+ }
38
50
  }
39
51
  disconnectedCallback() {
40
52
  if (this.unsubscribe) {
41
53
  this.unsubscribe();
42
54
  }
55
+ if (this.autoSearchFormElement) {
56
+ this.autoSearchFormElement.addEventListener('querySubmit', this.handleSearchRequest);
57
+ }
43
58
  }
44
59
  render() {
45
60
  if (!this.query || this.resultsCount === 0) {
@@ -1 +1 @@
1
- {"version":3,"file":"searchcraft-toggle-button.js","sourceRoot":"","sources":["../../../src/components/searchcraft-toggle-button/searchcraft-toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAOtD,MAAM,OAAO,uBAAuB;;QAa1B,gBAAW,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAe7C,iBAAY,GAAG,KAAK,IAAI,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAE/B,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;gBACzB,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;gBAChD,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC;oBAC/B,IAAI;iBACL,CAAC,CAAC;YACL,CAAC;iBAAM,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;gBAChC,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC5C,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC;oBAC/B,IAAI;iBACL,CAAC,CAAC;YACL,CAAC;YAED,IAAI,CAAC;gBACH,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;YAClC,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;YACzC,CAAC;QACH,CAAC,CAAC;oBA1C8B,MAAM;wBAElB,KAAK;qBACR,EAAE;4BACK,CAAC;;IAKzB,gBAAgB;QACd,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;;YACzD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,IAAI,0CAAE,MAAM,KAAI,CAAC,CAAC;QACnE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAwBD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE,CAAC;YAC3C,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,cACE,KAAK,EAAE,kBAAkB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACxD,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,QAAQ;YAEb,WAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,CACzD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n tag: 'searchcraft-toggle-button',\n styleUrl: 'searchcraft-toggle-button.module.scss',\n shadow: true,\n})\nexport class SearchcraftToggleButton {\n /**\n * Type of the toggle - determines what it controls\n * 'mode': toggles between 'fuzzy' and 'normal'\n * 'sort': toggles between 'asc' and 'desc'\n */\n @Prop() type: 'mode' | 'sort' = 'mode';\n\n @State() isActive = false;\n @State() query = ''; // Track the query\n @State() resultsCount = 0; // Track the count of search results\n\n private unsubscribe: () => void;\n private searchStore = useSearchcraftStore.getState();\n\n componentDidLoad() {\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n this.query = state.query || '';\n this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n private handleToggle = async () => {\n this.isActive = !this.isActive;\n\n if (this.type === 'mode') {\n const mode = this.isActive ? 'normal' : 'fuzzy';\n this.searchStore.setSearchParams({\n mode,\n });\n } else if (this.type === 'sort') {\n const sort = this.isActive ? 'desc' : 'asc';\n this.searchStore.setSearchParams({\n sort,\n });\n }\n\n try {\n await this.searchStore.search();\n } catch (error) {\n console.error('Search failed:', error);\n }\n };\n\n render() {\n if (!this.query || this.resultsCount === 0) {\n return null;\n }\n\n return (\n <button\n class={`toggle-wrapper ${this.isActive ? 'active' : ''}`}\n onClick={this.handleToggle}\n type='button'\n >\n <div class={`toggle-switch ${this.isActive ? 'active' : ''}`} />\n </button>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"searchcraft-toggle-button.js","sourceRoot":"","sources":["../../../src/components/searchcraft-toggle-button/searchcraft-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n tag: 'searchcraft-toggle-button',\n styleUrl: 'searchcraft-toggle-button.module.scss',\n shadow: true,\n})\nexport class SearchcraftToggleButton {\n /**\n * Type of the toggle - determines what it controls\n * 'mode': toggles between 'fuzzy' and 'normal'\n * 'sort': toggles between 'asc' and 'desc'\n */\n @Prop() type: 'mode' | 'sort' = 'mode';\n\n @State() isActive = false;\n @State() query = ''; // Track the query\n @State() resultsCount = 0; // Track the count of search results\n\n private autoSearchFormElement: HTMLElement | null = null;\n private searchStore = useSearchcraftStore.getState();\n private unsubscribe: () => void;\n\n componentDidLoad() {\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n this.query = state.query || '';\n this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n });\n\n this.autoSearchFormElement = document.querySelector(\n 'searchcraft-auto-search-form',\n );\n if (this.autoSearchFormElement) {\n this.autoSearchFormElement.addEventListener(\n 'querySubmit',\n this.handleSearchRequest,\n );\n }\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n if (this.autoSearchFormElement) {\n this.autoSearchFormElement.addEventListener(\n 'querySubmit',\n this.handleSearchRequest,\n );\n }\n }\n\n handleSearchRequest = () => {\n this.isActive = false;\n this.searchStore.setSearchParams({\n mode: 'fuzzy',\n sort: 'asc',\n });\n };\n\n private handleToggle = async () => {\n this.isActive = !this.isActive;\n\n if (this.type === 'mode') {\n const mode = this.isActive ? 'normal' : 'fuzzy';\n this.searchStore.setSearchParams({\n mode,\n });\n } else if (this.type === 'sort') {\n const sort = this.isActive ? 'desc' : 'asc';\n this.searchStore.setSearchParams({\n sort,\n });\n }\n\n try {\n await this.searchStore.search();\n } catch (error) {\n console.error('Search failed:', error);\n }\n };\n\n render() {\n if (!this.query || this.resultsCount === 0) {\n return null;\n }\n\n return (\n <button\n class={`toggle-wrapper ${this.isActive ? 'active' : ''}`}\n onClick={this.handleToggle}\n type='button'\n >\n <div class={`toggle-switch ${this.isActive ? 'active' : ''}`} />\n </button>\n );\n }\n}\n"]}
@@ -9,7 +9,7 @@ import { d as defineCustomElement$3 } from './p-a3bd1bc8.js';
9
9
  import { d as defineCustomElement$2 } from './p-bc3f9025.js';
10
10
  import { d as defineCustomElement$1 } from './p-bfb22305.js';
11
11
 
12
- const searchcraftInputModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputContainerLTR{position:relative;width:100%}.inputContainerRTL{position:relative;width:100%;margin-left:8px}.inputLightLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;margin-right:8px;padding-left:36px;padding-right:16px}.inputLightLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputLightLTR::placeholder{color:#737373}.inputLightLTR:focus{outline:2px solid #000}.inputDarkLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;margin-right:8px;padding-left:36px;padding-right:16px}.inputDarkLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputDarkLTR::placeholder{color:#BFBFBF}.inputDarkLTR:focus{outline:2px solid #FFF}.inputErrorLightLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorLightLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorLightLTR::placeholder{color:#737373}.inputErrorLightLTR:focus{outline:2px solid #000}.inputErrorLightLTR:focus-visible{outline:2px solid #c00}.inputErrorDarkLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorDarkLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorDarkLTR::placeholder{color:#BFBFBF}.inputErrorDarkLTR:focus{outline:2px solid #FFF}.inputErrorDarkLTR:focus-visible{outline:2px solid #FFB3B3}.inputLightRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputLightRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputLightRTL::placeholder{color:#737373}.inputLightRTL:focus{outline:2px solid #000}.inputDarkRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputDarkRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputDarkRTL::placeholder{color:#BFBFBF}.inputDarkRTL:focus{outline:2px solid #FFF}.inputErrorLightRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorLightRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorLightRTL::placeholder{color:#737373}.inputErrorLightRTL:focus{outline:2px solid #000}.inputErrorLightRTL:focus-visible{outline:2px solid #c00}.inputErrorDarkRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorDarkRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorDarkRTL::placeholder{color:#BFBFBF}.inputErrorDarkRTL:focus{outline:2px solid #FFF}.inputErrorDarkRTL:focus-visible{outline:2px solid #FFB3B3}.inputWrapper{align-items:center;display:flex;position:relative;width:100%}";
12
+ const searchcraftInputModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputContainerLTR{position:relative;width:100%}.inputContainerRTL{position:relative;width:100%;margin-left:8px}.inputLightLTR{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;margin-right:8px;padding-left:36px;padding-right:16px}.inputLightLTR::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputLightLTR::placeholder{color:#737373}.inputLightLTR:focus{outline:2px solid #000}.inputDarkLTR{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;margin-right:8px;padding-left:36px;padding-right:16px}.inputDarkLTR::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputDarkLTR::placeholder{color:#BFBFBF}.inputDarkLTR:focus{outline:2px solid #FFF}.inputErrorLightLTR{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorLightLTR::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputErrorLightLTR::placeholder{color:#737373}.inputErrorLightLTR:focus{outline:2px solid #000}.inputErrorLightLTR:focus-visible{outline:2px solid #c00}.inputErrorDarkLTR{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorDarkLTR::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputErrorDarkLTR::placeholder{color:#BFBFBF}.inputErrorDarkLTR:focus{outline:2px solid #FFF}.inputErrorDarkLTR:focus-visible{outline:2px solid #FFB3B3}.inputLightRTL{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputLightRTL::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputLightRTL::placeholder{color:#737373}.inputLightRTL:focus{outline:2px solid #000}.inputDarkRTL{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputDarkRTL::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputDarkRTL::placeholder{color:#BFBFBF}.inputDarkRTL:focus{outline:2px solid #FFF}.inputErrorLightRTL{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorLightRTL::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputErrorLightRTL::placeholder{color:#737373}.inputErrorLightRTL:focus{outline:2px solid #000}.inputErrorLightRTL:focus-visible{outline:2px solid #c00}.inputErrorDarkRTL{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorDarkRTL::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputErrorDarkRTL::placeholder{color:#BFBFBF}.inputErrorDarkRTL:focus{outline:2px solid #FFF}.inputErrorDarkRTL:focus-visible{outline:2px solid #FFB3B3}.inputWrapper{align-items:center;display:flex;position:relative;width:100%}";
13
13
  const SearchcraftInputStyle0 = searchcraftInputModuleCss;
14
14
 
15
15
  const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput extends H {
@@ -46,6 +46,10 @@ const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput
46
46
  this.inputKeyUp.emit(input.value);
47
47
  }
48
48
  handleClearInput() {
49
+ if (this.query === '') {
50
+ return;
51
+ }
52
+ this.query = '';
49
53
  if (this.clearInput) {
50
54
  this.clearInput.emit();
51
55
  }
@@ -65,7 +69,7 @@ const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput
65
69
  const placeholderStyle = {
66
70
  fontSize: validatedCustomStyles.placeholderFontSize || '16px',
67
71
  };
68
- return (h("div", { key: '0eea589d7f78b4ae830b1950ab193f9c72797625', class: classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (h(Fragment, null, h("input", { autoComplete: 'off', class: classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), h("style", null, `
72
+ return (h("div", { key: '7047cbe1692a4c8f11232d7f65e00824703d8b50', class: classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (h(Fragment, null, h("input", { autoComplete: 'off', class: classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), h("style", null, `
69
73
  #searchcraft-input-id::placeholder {
70
74
  font-size: ${placeholderStyle.fontSize};
71
75
  }
@@ -142,4 +146,4 @@ function defineCustomElement() {
142
146
 
143
147
  export { SearchcraftInput as S, defineCustomElement as d };
144
148
 
145
- //# sourceMappingURL=p-dd2a4022.js.map
149
+ //# sourceMappingURL=p-27a6ca57.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-27a6ca57.js","mappings":"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","names":[],"sources":["src/components/searchcraft-input/searchcraft-input.module.scss?tag=searchcraft-input&encapsulation=shadow","src/components/searchcraft-input/searchcraft-input.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin input-container-base {\n position: relative;\n width: 100%;\n}\n\n@mixin input-base {\n border: none;\n border-radius: 8px;\n font-family: 'Brygada 1918';\n outline: none;\n padding-bottom: 15px;\n padding-top: 15px;\n width: 100%;\n\n &::placeholder {\n font-family: 'Brygada 1918';\n font-size: 16px;\n font-weight: 600;\n }\n}\n\n@mixin input-base-light {\n @include input-base;\n background-color: $light-input-background-color;\n color: $light-input-label-color;\n\n &::placeholder {\n color: $light-input-placeholder-color;\n }\n\n &:focus {\n outline: 2px solid $light-input-outline-focus;\n }\n}\n\n@mixin input-base-dark {\n @include input-base;\n background-color: $dark-input-background-color;\n color: $dark-input-label-color;\n\n &::placeholder {\n color: $dark-input-placeholder-color;\n }\n\n &:focus {\n outline: 2px solid $dark-input-outline-focus;\n }\n}\n\n@mixin input-error-base-light {\n @include input-base-light;\n outline: 2px solid $light-input-error-outline;\n\n &:focus-visible {\n outline: 2px solid $light-input-error-outline,\n }\n}\n\n@mixin input-error-base-dark {\n @include input-base-dark;\n outline: 2px solid $dark-input-error-outline;\n\n &:focus-visible {\n outline: 2px solid $dark-input-error-outline;\n }\n}\n\n.inputContainerLTR {\n @include input-container-base;\n}\n\n.inputContainerRTL {\n @include input-container-base;\n margin-left: 8px;\n}\n\n@mixin align-LTR {\n margin-right: 8px;\n padding-left: 36px;\n padding-right: 16px;\n}\n\n.inputLightLTR {\n @include input-base-light;\n @include align-LTR;\n}\n\n.inputDarkLTR {\n @include input-base-dark;\n @include align-LTR;\n}\n\n.inputErrorLightLTR {\n @include input-error-base-light;\n @include align-LTR;\n}\n\n.inputErrorDarkLTR {\n @include input-error-base-dark;\n @include align-LTR;\n}\n\n@mixin align-RTL {\n margin-left: 8px;\n padding-left: 16px;\n padding-right: 36px;\n text-align: right;\n}\n\n.inputLightRTL {\n @include input-base-light;\n @include align-RTL;\n}\n\n.inputDarkRTL {\n @include input-base-dark;\n @include align-RTL;\n}\n\n.inputErrorLightRTL {\n @include input-error-base-light;\n @include align-RTL;\n}\n\n.inputErrorDarkRTL {\n @include input-error-base-dark;\n @include align-RTL;\n}\n\n.inputWrapper {\n align-items: center;\n display: flex;\n position: relative;\n width: 100%;\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Event,\n Fragment,\n type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils/utils';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n detail: T;\n target: HTMLSearchcraftInputElement;\n}\n\n@Component({\n tag: 'searchcraft-input',\n styleUrl: 'searchcraft-input.module.scss',\n shadow: true,\n})\nexport class SearchcraftInput {\n @Prop() customStyles: string | Record<string, string> = {};\n @Prop() error = false;\n @Prop() formClassName = '';\n @Prop() inputCaptionClassName = '';\n @Prop() inputCaptionValue = '';\n @Prop() inputClassName = '';\n @Prop() inputIconHeight = 20;\n @Prop() inputIconWidth = 20;\n @Prop() isRequesting = false;\n @Prop() placeholderValue = 'Enter Search';\n @Prop() rightToLeftOrientation = false;\n @Prop() query = '';\n\n @Event() clearInput: EventEmitter<void>;\n @Event() searchInputChange: EventEmitter<string>;\n @Event() inputKeyUp: EventEmitter<string>;\n\n @State() theme = 'light';\n\n private get isLightTheme() {\n return this.theme === 'light';\n }\n\n handleInputChange(event: Event) {\n const input = event.target as HTMLInputElement;\n this.searchInputChange.emit(input.value);\n }\n\n handleInputKeyUp(event: KeyboardEvent) {\n const input = event.target as HTMLInputElement;\n this.inputKeyUp.emit(input.value);\n }\n\n handleClearInput() {\n if (this.query === '') {\n return;\n }\n this.query = '';\n if (this.clearInput) {\n this.clearInput.emit();\n }\n }\n\n render() {\n const containerClassName = this.rightToLeftOrientation\n ? 'inputContainerRTL'\n : 'inputContainerLTR';\n\n const inputClassName = classNames(\n this.error\n ? this.isLightTheme\n ? 'inputErrorLightRTL'\n : 'inputErrorDarkRTL'\n : this.isLightTheme\n ? 'inputLightLTR'\n : 'inputDarkLTR',\n 'searchcraft-input',\n );\n\n const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n const placeholderStyle = {\n fontSize: validatedCustomStyles.placeholderFontSize || '16px',\n };\n return (\n <div\n class={classNames(\n containerClassName,\n this.formClassName,\n 'searchcraft-input-form',\n )}\n >\n {this.rightToLeftOrientation ? (\n <Fragment>\n <input\n autoComplete='off'\n class={classNames(inputClassName, 'searchcraft-input')}\n id='searchcraft-input-id'\n onChange={this.handleInputChange.bind(this)}\n onKeyUp={this.handleInputKeyUp.bind(this)}\n placeholder={this.placeholderValue}\n type='text'\n value={this.query}\n style={validatedCustomStyles}\n />\n <style>\n {`\n #searchcraft-input-id::placeholder {\n font-size: ${placeholderStyle.fontSize};\n }\n `}\n </style>\n {this.inputCaptionValue && (\n <searchcraft-input-caption\n inputCaptionClassName={this.inputCaptionClassName}\n inputCaptionValue={this.inputCaptionValue}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n {this.query.length > 0 && (\n <searchcraft-clear-input-button\n isRequesting={this.isRequesting}\n onClearInput={this.handleClearInput}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n <searchcraft-input-icon\n error={this.error}\n height={this.inputIconHeight}\n rightToLeftOrientation={this.rightToLeftOrientation}\n width={this.inputIconWidth}\n />\n </Fragment>\n ) : (\n <Fragment>\n <searchcraft-input-icon\n error={this.error}\n height={this.inputIconHeight}\n rightToLeftOrientation={this.rightToLeftOrientation}\n width={this.inputIconWidth}\n />\n <input\n autoComplete='off'\n class={classNames(inputClassName, 'searchcraft-input')}\n id='searchcraft-input-id'\n onChange={this.handleInputChange.bind(this)}\n onKeyUp={this.handleInputKeyUp.bind(this)}\n placeholder={this.placeholderValue}\n type='text'\n value={this.query}\n style={validatedCustomStyles}\n />\n <style>\n {`\n #searchcraft-input-id::placeholder {\n font-size: ${placeholderStyle.fontSize};\n }\n `}\n </style>\n {this.inputCaptionValue && (\n <searchcraft-input-caption\n inputCaptionClassName={this.inputCaptionClassName}\n inputCaptionValue={this.inputCaptionValue}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n {this.query.length > 0 && (\n <searchcraft-clear-input-button\n isRequesting={this.isRequesting}\n onClearInput={this.handleClearInput}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n </Fragment>\n )}\n </div>\n );\n }\n}\n"],"version":3}
@@ -4,7 +4,7 @@ import { p as parseCustomStyles } from './p-7d1bcd2d.js';
4
4
  import { d as defineCustomElement$b } from './p-70722ab2.js';
5
5
  import { d as defineCustomElement$a } from './p-07edaa9b.js';
6
6
  import { d as defineCustomElement$9 } from './p-498c7ef9.js';
7
- import { d as defineCustomElement$8 } from './p-dd2a4022.js';
7
+ import { d as defineCustomElement$8 } from './p-27a6ca57.js';
8
8
  import { d as defineCustomElement$7 } from './p-6237f03e.js';
9
9
  import { d as defineCustomElement$6 } from './p-8c38185e.js';
10
10
  import { d as defineCustomElement$5 } from './p-ae84b899.js';
@@ -32,9 +32,6 @@ const SearchcraftAutoSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class Searc
32
32
  this.searchResults = null;
33
33
  this.searchStore.setSearchResults(null);
34
34
  }
35
- else {
36
- this.querySubmit.emit(this.query);
37
- }
38
35
  };
39
36
  this.handleInputKeyUp = (event) => {
40
37
  const target = event.detail;
@@ -58,6 +55,9 @@ const SearchcraftAutoSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class Searc
58
55
  }, this.debounceDelay);
59
56
  };
60
57
  this.handleClearInput = () => {
58
+ if (this.query === '' && !this.searchResults) {
59
+ return;
60
+ }
61
61
  this.query = '';
62
62
  this.searchResults = null;
63
63
  this.searchStore.setQuery('');
@@ -129,7 +129,7 @@ const SearchcraftAutoSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class Searc
129
129
  render() {
130
130
  const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
131
131
  const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);
132
- return (h("form", { key: '2421495aa88b52a47658af9b682e172da7d23691', class: `${formClass}`, onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: '032e7e3a7f83af11422b64b023a38c2f433d3809', label: this.labelForInput }), h("searchcraft-input", { key: 'a3a286e6b5ade795a157a1a046278477731684b4', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, "is-requesting": this.isRequesting, onClearInput: this.handleClearInput, onInputKeyUp: this.handleInputKeyUp, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation }), this.error && (h("searchcraft-error-message", { key: '4588522cf331cc8165e789bb3d58f35ef5148f11', errorMessage: 'Please enter a search query.' }))));
132
+ return (h("form", { key: '6f59f4b7d525c62fce6b21712519e3880c6756a2', class: `${formClass}`, onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: 'cbaa772a365131dbfcffec9e2a28438f1c978efe', label: this.labelForInput }), h("searchcraft-input", { key: '70a4933978df3878720e1189a15481123e12eba5', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, "is-requesting": this.isRequesting, onClearInput: this.handleClearInput, onInputKeyUp: this.handleInputKeyUp, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation }), this.error && (h("searchcraft-error-message", { key: 'd665a04dcc8999a09afa47f1a20156f12db6600c', errorMessage: 'Please enter a search query.' }))));
133
133
  }
134
134
  static get style() { return SearchcraftAutoSearchFormStyle0; }
135
135
  }, [1, "searchcraft-auto-search-form", {
@@ -1 +1 @@
1
- {"file":"searchcraft-auto-search-form.js","mappings":"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","names":["SearchcraftAutoSearchForm","SearchcraftCore"],"sources":["src/components/searchcraft-auto-search-form/searchcraft-auto-search-form.module.scss?tag=searchcraft-auto-search-form&encapsulation=shadow","src/components/searchcraft-auto-search-form/searchcraft-auto-search-form.tsx"],"sourcesContent":[":root {\n --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.formLTR {\n font-family: var(--font-stack);\n text-align: left;\n width: 100%;\n}\n\n.formRTL {\n font-family: var(--font-stack);\n text-align: right;\n width: 100%;\n}","import {\n Component,\n Prop,\n State,\n Event,\n type EventEmitter,\n h,\n} from '@stencil/core';\n\nimport {\n type CoreConfigSDK,\n CoreSDK as SearchcraftCore,\n type SearchcraftResponse,\n} from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { parseCustomStyles } from '@utils/utils';\n\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\n\n@Component({\n tag: 'searchcraft-auto-search-form',\n styleUrl: 'searchcraft-auto-search-form.module.scss',\n shadow: true,\n})\nexport class SearchcraftAutoSearchForm {\n @Prop() autoSearchFormClass = '';\n @Prop() clearInput: () => void = () => {};\n @Prop() config: CoreConfigSDK = {\n apiKey: '',\n endpointURL: '',\n index: [],\n };\n @Prop() customStylesForInput: string | Record<string, string> = {};\n @Prop() inputCaptionValue = '';\n @Prop() inputIconHeight = 20;\n @Prop() inputIconWidth = 20;\n @Prop() labelForInput = '';\n @Prop() placeholderValue = 'Search here';\n @Prop() rightToLeftOrientation = false;\n @Prop() searchContainerClass = '';\n\n @Event() inputClearedOrNoResults: EventEmitter<void>;\n @Event() querySubmit: EventEmitter<string>;\n\n @State() error = false;\n @State() isRequesting = false;\n @State() query = '';\n @State() searchResults: SearchcraftResponse | null = null;\n\n private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n private debounceDelay = 0;\n private searchStore = useSearchcraftStore.getState();\n unsubscribe: () => void;\n\n componentDidLoad() {\n const searchcraft = new SearchcraftCore(this.config);\n this.searchStore.initialize(searchcraft, true);\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n this.isRequesting = state.isRequesting;\n this.searchResults = { ...state.searchResults };\n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n handleInputChange = (event: ScInputCustomEvent<string>) => {\n this.query = event.detail;\n this.searchStore.setQuery(this.query);\n\n if (this.query.trim() === '') {\n this.searchResults = null;\n this.searchStore.setSearchResults(null);\n } else {\n this.querySubmit.emit(this.query);\n }\n };\n\n handleInputKeyUp = (event: ScInputCustomEvent<string>) => {\n const target = event.detail;\n if (target === this.query) {\n return;\n }\n this.query = target;\n\n if (this.debounceTimeout) {\n clearTimeout(this.debounceTimeout);\n }\n\n this.debounceTimeout = setTimeout(() => {\n if (this.query.trim() === '') {\n this.searchResults = null;\n this.searchStore.setSearchResults(null);\n } else {\n this.searchStore.setQuery(this.query);\n this.querySubmit.emit(this.query);\n this.runSearch();\n }\n }, this.debounceDelay);\n };\n\n handleClearInput = () => {\n this.query = '';\n this.searchResults = null;\n this.searchStore.setQuery('');\n this.searchStore.setSearchResults(null);\n\n if (typeof this.clearInput === 'function') {\n this.clearInput();\n }\n\n if (this.debounceTimeout) {\n clearTimeout(this.debounceTimeout);\n }\n\n this.error = false;\n this.inputClearedOrNoResults.emit();\n };\n\n private runSearch = async () => {\n if (this.query.trim() === '') {\n this.error = true;\n this.inputClearedOrNoResults.emit();\n } else {\n this.error = false;\n this.searchStore.setQuery(this.query);\n this.searchStore.setSelectedFilters([]);\n\n try {\n await this.searchStore.search();\n } catch (error) {\n this.error = true;\n this.inputClearedOrNoResults.emit();\n }\n }\n };\n\n handleFormSubmit = async (event: Event) => {\n event.preventDefault();\n await this.runSearch();\n };\n\n render() {\n const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';\n const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);\n\n return (\n <form class={`${formClass}`} onSubmit={this.handleFormSubmit}>\n <searchcraft-input-label label={this.labelForInput} />\n <searchcraft-input\n customStyles={parsedCustomStyles}\n input-caption-value={this.inputCaptionValue}\n input-icon-height={this.inputIconHeight}\n input-icon-width={this.inputIconWidth}\n is-requesting={this.isRequesting}\n onClearInput={this.handleClearInput}\n onInputKeyUp={this.handleInputKeyUp}\n onSearchInputChange={this.handleInputChange}\n placeholder-value={this.placeholderValue}\n query={this.query}\n right-to-left-orientation={this.rightToLeftOrientation}\n />\n {this.error && (\n <searchcraft-error-message errorMessage='Please enter a search query.' />\n )}\n </form>\n );\n }\n}\n"],"version":3}
1
+ {"file":"searchcraft-auto-search-form.js","mappings":"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","names":["SearchcraftAutoSearchForm","SearchcraftCore"],"sources":["src/components/searchcraft-auto-search-form/searchcraft-auto-search-form.module.scss?tag=searchcraft-auto-search-form&encapsulation=shadow","src/components/searchcraft-auto-search-form/searchcraft-auto-search-form.tsx"],"sourcesContent":[":root {\n --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.formLTR {\n font-family: var(--font-stack);\n text-align: left;\n width: 100%;\n}\n\n.formRTL {\n font-family: var(--font-stack);\n text-align: right;\n width: 100%;\n}","import {\n Component,\n Prop,\n State,\n Event,\n type EventEmitter,\n h,\n} from '@stencil/core';\n\nimport {\n type CoreConfigSDK,\n CoreSDK as SearchcraftCore,\n type SearchcraftResponse,\n} from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { parseCustomStyles } from '@utils/utils';\n\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\n\n@Component({\n tag: 'searchcraft-auto-search-form',\n styleUrl: 'searchcraft-auto-search-form.module.scss',\n shadow: true,\n})\nexport class SearchcraftAutoSearchForm {\n @Prop() autoSearchFormClass = '';\n @Prop() clearInput: () => void = () => {};\n @Prop() config: CoreConfigSDK = {\n apiKey: '',\n endpointURL: '',\n index: [],\n };\n @Prop() customStylesForInput: string | Record<string, string> = {};\n @Prop() inputCaptionValue = '';\n @Prop() inputIconHeight = 20;\n @Prop() inputIconWidth = 20;\n @Prop() labelForInput = '';\n @Prop() placeholderValue = 'Search here';\n @Prop() rightToLeftOrientation = false;\n @Prop() searchContainerClass = '';\n\n @Event() inputClearedOrNoResults: EventEmitter<void>;\n @Event() querySubmit: EventEmitter<string>;\n\n @State() error = false;\n @State() isRequesting = false;\n @State() query = '';\n @State() searchResults: SearchcraftResponse | null = null;\n\n private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n private debounceDelay = 0;\n private searchStore = useSearchcraftStore.getState();\n unsubscribe: () => void;\n\n componentDidLoad() {\n const searchcraft = new SearchcraftCore(this.config);\n this.searchStore.initialize(searchcraft, true);\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n this.isRequesting = state.isRequesting;\n this.searchResults = { ...state.searchResults };\n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n handleInputChange = (event: ScInputCustomEvent<string>) => {\n this.query = event.detail;\n this.searchStore.setQuery(this.query);\n if (this.query.trim() === '') {\n this.searchResults = null;\n this.searchStore.setSearchResults(null);\n }\n };\n\n handleInputKeyUp = (event: ScInputCustomEvent<string>) => {\n const target = event.detail;\n if (target === this.query) {\n return;\n }\n this.query = target;\n\n if (this.debounceTimeout) {\n clearTimeout(this.debounceTimeout);\n }\n\n this.debounceTimeout = setTimeout(() => {\n if (this.query.trim() === '') {\n this.searchResults = null;\n this.searchStore.setSearchResults(null);\n } else {\n this.searchStore.setQuery(this.query);\n this.querySubmit.emit(this.query);\n this.runSearch();\n }\n }, this.debounceDelay);\n };\n\n handleClearInput = () => {\n if (this.query === '' && !this.searchResults) {\n return;\n }\n this.query = '';\n this.searchResults = null;\n this.searchStore.setQuery('');\n this.searchStore.setSearchResults(null);\n\n if (typeof this.clearInput === 'function') {\n this.clearInput();\n }\n\n if (this.debounceTimeout) {\n clearTimeout(this.debounceTimeout);\n }\n\n this.error = false;\n this.inputClearedOrNoResults.emit();\n };\n\n private runSearch = async () => {\n if (this.query.trim() === '') {\n this.error = true;\n this.inputClearedOrNoResults.emit();\n } else {\n this.error = false;\n this.searchStore.setQuery(this.query);\n this.searchStore.setSelectedFilters([]);\n\n try {\n await this.searchStore.search();\n } catch (error) {\n this.error = true;\n this.inputClearedOrNoResults.emit();\n }\n }\n };\n\n handleFormSubmit = async (event: Event) => {\n event.preventDefault();\n await this.runSearch();\n };\n\n render() {\n const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';\n const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);\n\n return (\n <form class={`${formClass}`} onSubmit={this.handleFormSubmit}>\n <searchcraft-input-label label={this.labelForInput} />\n <searchcraft-input\n customStyles={parsedCustomStyles}\n input-caption-value={this.inputCaptionValue}\n input-icon-height={this.inputIconHeight}\n input-icon-width={this.inputIconWidth}\n is-requesting={this.isRequesting}\n onClearInput={this.handleClearInput}\n onInputKeyUp={this.handleInputKeyUp}\n onSearchInputChange={this.handleInputChange}\n placeholder-value={this.placeholderValue}\n query={this.query}\n right-to-left-orientation={this.rightToLeftOrientation}\n />\n {this.error && (\n <searchcraft-error-message errorMessage='Please enter a search query.' />\n )}\n </form>\n );\n }\n}\n"],"version":3}
@@ -4,7 +4,7 @@ import { d as defineCustomElement$c } from './p-4468fba3.js';
4
4
  import { d as defineCustomElement$b } from './p-70722ab2.js';
5
5
  import { d as defineCustomElement$a } from './p-07edaa9b.js';
6
6
  import { d as defineCustomElement$9 } from './p-498c7ef9.js';
7
- import { d as defineCustomElement$8 } from './p-dd2a4022.js';
7
+ import { d as defineCustomElement$8 } from './p-27a6ca57.js';
8
8
  import { d as defineCustomElement$7 } from './p-6237f03e.js';
9
9
  import { d as defineCustomElement$6 } from './p-8c38185e.js';
10
10
  import { d as defineCustomElement$5 } from './p-ae84b899.js';