@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.
- package/dist/cjs/searchcraft-auto-search-form_19.cjs.entry.js +28 -11
- package/dist/cjs/searchcraft-auto-search-form_19.cjs.entry.js.map +1 -1
- package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.js +4 -4
- package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.js.map +1 -1
- package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.js +1 -3
- package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.js.map +1 -1
- package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.module.css +15 -12
- package/dist/collection/components/searchcraft-input/searchcraft-input.js +5 -1
- package/dist/collection/components/searchcraft-input/searchcraft-input.js.map +1 -1
- package/dist/collection/components/searchcraft-input/searchcraft-input.module.css +24 -16
- package/dist/collection/components/searchcraft-slider/searchcraft-slider.module.css +3 -3
- package/dist/collection/components/searchcraft-toggle-button/searchcraft-toggle-button.js +15 -0
- package/dist/collection/components/searchcraft-toggle-button/searchcraft-toggle-button.js.map +1 -1
- package/dist/components/{p-dd2a4022.js → p-27a6ca57.js} +7 -3
- package/dist/components/p-27a6ca57.js.map +1 -0
- package/dist/components/searchcraft-auto-search-form.js +5 -5
- package/dist/components/searchcraft-auto-search-form.js.map +1 -1
- package/dist/components/searchcraft-base-search-form.js +1 -1
- package/dist/components/searchcraft-filters-list.js +2 -4
- package/dist/components/searchcraft-filters-list.js.map +1 -1
- package/dist/components/searchcraft-input.js +1 -1
- package/dist/components/searchcraft-slider.js +1 -1
- package/dist/components/searchcraft-slider.js.map +1 -1
- package/dist/components/searchcraft-toggle-button.js +15 -0
- package/dist/components/searchcraft-toggle-button.js.map +1 -1
- package/dist/esm/searchcraft-auto-search-form_19.entry.js +28 -11
- package/dist/esm/searchcraft-auto-search-form_19.entry.js.map +1 -1
- package/dist/searchcraft-javascript-sdk/p-72382d90.entry.js +2 -0
- package/dist/searchcraft-javascript-sdk/p-72382d90.entry.js.map +1 -0
- package/dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js +1 -1
- package/dist/types/components/searchcraft-toggle-button/searchcraft-toggle-button.d.ts +3 -1
- package/package.json +1 -1
- package/dist/components/p-dd2a4022.js.map +0 -1
- package/dist/searchcraft-javascript-sdk/p-6c007e2e.entry.js +0 -2
- 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"]}
|
package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.module.css
CHANGED
|
@@ -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: #
|
|
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: #
|
|
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:
|
|
90
|
-
left:
|
|
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:
|
|
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: '
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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) {
|
package/dist/collection/components/searchcraft-toggle-button/searchcraft-toggle-button.js.map
CHANGED
|
@@ -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;;
|
|
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
|
|
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: '
|
|
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-
|
|
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-
|
|
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: '
|
|
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":";;;;;;;;;;;;;;AAAA,MAAM,kCAAkC,GAAG,uLAAuL,CAAC;AACnO,wCAAe,kCAAkC;;MCyBpCA,2BAAyB;;;;;;;QAyB5B,oBAAe,GAAyC,IAAI,CAAC;QAC7D,kBAAa,GAAG,CAAC,CAAC;QAClB,gBAAW,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAmBrD,sBAAiB,GAAG,CAAC,KAAiC;YACpD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;
|
|
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-
|
|
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';
|