@searchcraft/javascript-sdk 0.2.6 → 0.2.7
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/loader.cjs.js +1 -1
- package/dist/cjs/{searchcraft-auto-search-form_17.cjs.entry.js → searchcraft-auto-search-form_18.cjs.entry.js} +28 -16
- package/dist/cjs/searchcraft-auto-search-form_18.cjs.entry.js.map +1 -0
- package/dist/cjs/searchcraft-base-search-form.cjs.entry.js +1 -1
- package/dist/cjs/searchcraft-button.cjs.entry.js +1 -1
- package/dist/cjs/searchcraft-javascript-sdk.cjs.js +1 -1
- package/dist/collection/assets/searchcraft-check-icon.js +9 -0
- package/dist/collection/assets/searchcraft-check-icon.js.map +1 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.js +1 -1
- package/dist/collection/components/searchcraft-base-search-form/searchcraft-base-search-form.js +1 -1
- package/dist/collection/components/searchcraft-base-search-result/searchcraft-base-search-result.js +3 -3
- package/dist/collection/components/searchcraft-base-search-result/searchcraft-base-search-result.module.css +10 -0
- package/dist/collection/components/searchcraft-button/searchcraft-button.js +1 -1
- package/dist/collection/components/searchcraft-error-message/searchcraft-error-message.js +1 -1
- package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.js +7 -5
- 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 +20 -7
- package/dist/collection/components/searchcraft-input/searchcraft-input.js +1 -1
- package/dist/collection/components/searchcraft-spinner-dark/searchcraft-spinner-dark.js +1 -1
- package/dist/collection/components/searchcraft-spinner-light/searchcraft-spinner-light.js +1 -1
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/{p-1c377190.js → p-0eb562da.js} +3 -3
- package/dist/components/{p-1c377190.js.map → p-0eb562da.js.map} +1 -1
- package/dist/components/{p-848301b7.js → p-14f328f4.js} +2 -2
- package/dist/components/{p-848301b7.js.map → p-14f328f4.js.map} +1 -1
- package/dist/components/{p-023371c8.js → p-1b18e9fe.js} +5 -5
- package/dist/components/p-1b18e9fe.js.map +1 -0
- package/dist/components/{p-576f0d2b.js → p-52b81ff4.js} +3 -3
- package/dist/components/{p-576f0d2b.js.map → p-52b81ff4.js.map} +1 -1
- package/dist/components/{p-b5f97e04.js → p-643cfdcf.js} +5 -5
- package/dist/components/{p-b5f97e04.js.map → p-643cfdcf.js.map} +1 -1
- package/dist/components/{p-3fece4e2.js → p-9952c9ba.js} +2 -2
- package/dist/components/{p-3fece4e2.js.map → p-9952c9ba.js.map} +1 -1
- package/dist/components/{p-25f18f2e.js → p-bdf84774.js} +2 -2
- package/dist/components/{p-25f18f2e.js.map → p-bdf84774.js.map} +1 -1
- package/dist/components/p-d3187f5a.js +29 -0
- package/dist/components/p-d3187f5a.js.map +1 -0
- package/dist/components/searchcraft-auto-search-form.js +6 -6
- package/dist/components/searchcraft-base-search-form.js +7 -7
- package/dist/components/searchcraft-base-search-result.js +1 -1
- package/dist/components/searchcraft-base-search-results.js +2 -2
- package/dist/components/searchcraft-button.js +1 -1
- package/dist/components/searchcraft-check-icon.d.ts +11 -0
- package/dist/components/searchcraft-check-icon.js +8 -0
- package/dist/components/searchcraft-check-icon.js.map +1 -0
- package/dist/components/searchcraft-clear-input-button.js +1 -1
- package/dist/components/searchcraft-error-message.js +1 -1
- package/dist/components/searchcraft-filters-list.js +15 -7
- package/dist/components/searchcraft-filters-list.js.map +1 -1
- package/dist/components/searchcraft-input.js +1 -1
- package/dist/components/searchcraft-spinner-dark.js +1 -1
- package/dist/components/searchcraft-spinner-light.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{searchcraft-auto-search-form_17.entry.js → searchcraft-auto-search-form_18.entry.js} +28 -17
- package/dist/esm/searchcraft-auto-search-form_18.entry.js.map +1 -0
- package/dist/esm/searchcraft-base-search-form.entry.js +1 -1
- package/dist/esm/searchcraft-button.entry.js +1 -1
- package/dist/esm/searchcraft-javascript-sdk.js +1 -1
- package/dist/searchcraft-javascript-sdk/{p-cc454542.entry.js → p-66f38e89.entry.js} +2 -2
- package/dist/searchcraft-javascript-sdk/p-67cc5ccb.entry.js +2 -0
- package/dist/searchcraft-javascript-sdk/p-67cc5ccb.entry.js.map +1 -0
- package/dist/searchcraft-javascript-sdk/{p-63b3b565.entry.js → p-d9efd790.entry.js} +2 -2
- package/dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js +1 -1
- package/dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js.map +1 -1
- package/dist/types/assets/searchcraft-check-icon.d.ts +3 -0
- package/dist/types/components.d.ts +13 -0
- package/package.json +1 -1
- package/dist/cjs/searchcraft-auto-search-form_17.cjs.entry.js.map +0 -1
- package/dist/components/p-023371c8.js.map +0 -1
- package/dist/esm/searchcraft-auto-search-form_17.entry.js.map +0 -1
- package/dist/searchcraft-javascript-sdk/p-c2c4f6b7.entry.js +0 -2
- package/dist/searchcraft-javascript-sdk/p-c2c4f6b7.entry.js.map +0 -1
- /package/dist/searchcraft-javascript-sdk/{p-cc454542.entry.js.map → p-66f38e89.entry.js.map} +0 -0
- /package/dist/searchcraft-javascript-sdk/{p-63b3b565.entry.js.map → p-d9efd790.entry.js.map} +0 -0
|
@@ -111,6 +111,7 @@
|
|
|
111
111
|
margin-bottom: 4px;
|
|
112
112
|
margin-top: 0;
|
|
113
113
|
position: relative;
|
|
114
|
+
-webkit-font-smoothing: antialiased;
|
|
114
115
|
color: #292929;
|
|
115
116
|
}
|
|
116
117
|
|
|
@@ -122,6 +123,7 @@
|
|
|
122
123
|
margin-bottom: 4px;
|
|
123
124
|
margin-top: 0;
|
|
124
125
|
position: relative;
|
|
126
|
+
-webkit-font-smoothing: antialiased;
|
|
125
127
|
color: #FFF;
|
|
126
128
|
}
|
|
127
129
|
|
|
@@ -132,6 +134,7 @@
|
|
|
132
134
|
line-height: 16px;
|
|
133
135
|
margin-bottom: 4px;
|
|
134
136
|
margin-top: 0px;
|
|
137
|
+
-webkit-font-smoothing: antialiased;
|
|
135
138
|
color: #737373;
|
|
136
139
|
}
|
|
137
140
|
|
|
@@ -142,6 +145,7 @@
|
|
|
142
145
|
line-height: 16px;
|
|
143
146
|
margin-bottom: 4px;
|
|
144
147
|
margin-top: 0px;
|
|
148
|
+
-webkit-font-smoothing: antialiased;
|
|
145
149
|
color: #BFBFBF;
|
|
146
150
|
}
|
|
147
151
|
|
|
@@ -152,6 +156,7 @@
|
|
|
152
156
|
line-height: 20px;
|
|
153
157
|
margin-bottom: 4px;
|
|
154
158
|
margin-top: 0px;
|
|
159
|
+
-webkit-font-smoothing: antialiased;
|
|
155
160
|
color: #404040;
|
|
156
161
|
}
|
|
157
162
|
|
|
@@ -162,6 +167,7 @@
|
|
|
162
167
|
line-height: 20px;
|
|
163
168
|
margin-bottom: 4px;
|
|
164
169
|
margin-top: 0px;
|
|
170
|
+
-webkit-font-smoothing: antialiased;
|
|
165
171
|
color: #E6E6E6;
|
|
166
172
|
}
|
|
167
173
|
|
|
@@ -172,6 +178,7 @@
|
|
|
172
178
|
line-height: 20px;
|
|
173
179
|
margin-bottom: 4px;
|
|
174
180
|
margin-top: 0px;
|
|
181
|
+
-webkit-font-smoothing: antialiased;
|
|
175
182
|
color: #404040;
|
|
176
183
|
}
|
|
177
184
|
|
|
@@ -190,6 +197,7 @@
|
|
|
190
197
|
line-height: 20px;
|
|
191
198
|
margin-bottom: 4px;
|
|
192
199
|
margin-top: 0px;
|
|
200
|
+
-webkit-font-smoothing: antialiased;
|
|
193
201
|
color: #E6E6E6;
|
|
194
202
|
}
|
|
195
203
|
|
|
@@ -200,6 +208,7 @@
|
|
|
200
208
|
line-height: 20px;
|
|
201
209
|
margin-bottom: 4px;
|
|
202
210
|
margin-top: 0px;
|
|
211
|
+
-webkit-font-smoothing: antialiased;
|
|
203
212
|
color: #404040;
|
|
204
213
|
}
|
|
205
214
|
|
|
@@ -210,5 +219,6 @@
|
|
|
210
219
|
line-height: 20px;
|
|
211
220
|
margin-bottom: 4px;
|
|
212
221
|
margin-top: 0px;
|
|
222
|
+
-webkit-font-smoothing: antialiased;
|
|
213
223
|
color: #E6E6E6;
|
|
214
224
|
}
|
|
@@ -17,7 +17,7 @@ export class SearchcraftButton {
|
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
19
|
const buttonStyle = this.getButtonStyle();
|
|
20
|
-
return (h(Fragment, { key: '
|
|
20
|
+
return (h(Fragment, { key: 'eb540b00f175ade3604c050f31bb0cfcc7e67d7e' }, this.iconOnly ? (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.isRequesting ? (h("div", { class: 'spinner-margin-right' }, h("searchcraft-spinner-dark", null))) : (this.iconElement), h("span", { class: classNames(this.isRequesting && 'button-label', 'searchcraft-button-label') }, this.label)))));
|
|
21
21
|
}
|
|
22
22
|
static get is() { return "searchcraft-button"; }
|
|
23
23
|
static get encapsulation() { return "shadow"; }
|
|
@@ -7,7 +7,7 @@ export class SearchcraftErrorMessage {
|
|
|
7
7
|
}
|
|
8
8
|
render() {
|
|
9
9
|
const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
|
|
10
|
-
return (h("p", { key: '
|
|
10
|
+
return (h("p", { key: 'af47ef1acca6beb5ba557f55a6f911fad9184bb7', class: classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
|
|
11
11
|
}
|
|
12
12
|
static get is() { return "searchcraft-error-message"; }
|
|
13
13
|
static get encapsulation() { return "shadow"; }
|
|
@@ -25,8 +25,7 @@ export class SearchcraftFiltersList {
|
|
|
25
25
|
}
|
|
26
26
|
connectedCallback() {
|
|
27
27
|
var _a;
|
|
28
|
-
const state = this.searchStore;
|
|
29
|
-
// Initial population of facets if available
|
|
28
|
+
const state = this.searchStore;
|
|
30
29
|
if ((_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data.facets) {
|
|
31
30
|
this.populateFiltersFromFacets(state.searchResults.data.facets);
|
|
32
31
|
}
|
|
@@ -44,7 +43,6 @@ export class SearchcraftFiltersList {
|
|
|
44
43
|
this.query = state.query || '';
|
|
45
44
|
this.isRequesting = state.isRequesting;
|
|
46
45
|
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;
|
|
47
|
-
// Populate filters when facets are updated
|
|
48
46
|
if ((_d = state.searchResults) === null || _d === void 0 ? void 0 : _d.data.facets) {
|
|
49
47
|
this.populateFiltersFromFacets(state.searchResults.data.facets);
|
|
50
48
|
}
|
|
@@ -59,6 +57,10 @@ export class SearchcraftFiltersList {
|
|
|
59
57
|
var _a;
|
|
60
58
|
const newFilters = flattenFacets(((_a = facets[0]) === null || _a === void 0 ? void 0 : _a.section) || []);
|
|
61
59
|
const filtersMap = new Map();
|
|
60
|
+
this.dynamicFilters.forEach((filter) => {
|
|
61
|
+
const key = filter.value.split('/').pop() || '';
|
|
62
|
+
filtersMap.set(key, filter);
|
|
63
|
+
});
|
|
62
64
|
newFilters.forEach((filter) => {
|
|
63
65
|
const key = filter.value.split('/').pop() || '';
|
|
64
66
|
const existingFilter = filtersMap.get(key);
|
|
@@ -96,9 +98,9 @@ export class SearchcraftFiltersList {
|
|
|
96
98
|
const isChecked = this.selectedFilters.has(filter.value);
|
|
97
99
|
const children = this.dynamicFilters.filter((child) => child.value.startsWith(`${filter.value}/`) &&
|
|
98
100
|
child.value !== filter.value);
|
|
99
|
-
return (h("div", { key: filter.value }, h("label", { class: 'checkboxLabel' }, h("input", { class: 'filterCheckbox', checked: isChecked, onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox' }), this.formatLabel(filter.label)), children.map((child) => {
|
|
101
|
+
return (h("div", { key: filter.value }, h("label", { class: 'checkboxLabel' }, h("input", { class: 'filterCheckbox', checked: isChecked, onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox' }), h("div", { class: 'checkContainer' }, h("searchcraft-check-icon", null)), this.formatLabel(filter.label)), children.map((child) => {
|
|
100
102
|
const isChildChecked = this.selectedFilters.has(child.value);
|
|
101
|
-
return (h("label", { class: 'childCheckboxLabel', key: child.value, style: { marginLeft: '20px' } }, h("input", { class: 'childFilterCheckbox', checked: isChildChecked, onChange: (event) => this.handleFilterChange(child.value, event.target.checked), type: 'checkbox' }), this.formatLabel(child.label.split('/').pop() || '')));
|
|
103
|
+
return (h("label", { class: 'childCheckboxLabel', key: child.value, style: { marginLeft: '20px' } }, h("input", { class: 'childFilterCheckbox', checked: isChildChecked, onChange: (event) => this.handleFilterChange(child.value, event.target.checked), type: 'checkbox' }), h("div", { class: 'checkContainer' }, h("searchcraft-check-icon", null)), this.formatLabel(child.label.split('/').pop() || '')));
|
|
102
104
|
})));
|
|
103
105
|
})));
|
|
104
106
|
}
|
|
@@ -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<{ label: string; value: string }> = [];\n @State() isRequesting = false;\n @State() query = '';\n @State() resultsCount = 0;\n @State() selectedFilters: Set<string> = new Set();\n\n private searchStore = useSearchcraftStore.getState();\n unsubscribe: () => void;\n\n connectedCallback() {\n const state = this.searchStore; // Fetch the initial state\n\n // Initial population of facets if available\n if (state.searchResults?.data.facets) {\n this.populateFiltersFromFacets(state.searchResults.data.facets);\n }\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n if (!state.query || state.query.trim().length === 0) {\n if (this.selectedFilters.size > 0) {\n this.selectedFilters.clear();\n this.filtersUpdated.emit([]);\n if (this.searchStore.selectedFilters.length > 0) {\n this.searchStore.setSelectedFilters([]);\n }\n }\n }\n this.query = state.query || '';\n this.isRequesting = state.isRequesting;\n this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n\n // Populate filters when facets are updated\n if (state.searchResults?.data.facets) {\n this.populateFiltersFromFacets(state.searchResults.data.facets);\n }\n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n populateFiltersFromFacets(facets: Facets) {\n const newFilters = flattenFacets(facets[0]?.section || []);\n const filtersMap = new Map<string, { label: string; value: string }>();\n\n newFilters.forEach((filter) => {\n const key = filter.value.split('/').pop() || '';\n const existingFilter = filtersMap.get(key);\n if (\n !existingFilter ||\n filter.value.length < existingFilter.value.length\n ) {\n filtersMap.set(key, filter);\n }\n });\n\n this.dynamicFilters = Array.from(filtersMap.values());\n }\n\n handleFilterChange = (value: string, checked: boolean) => {\n if (checked) {\n this.selectedFilters.add(value);\n } else {\n this.selectedFilters.delete(value);\n }\n const deduplicatedFilters = this.deduplicatePaths(\n Array.from(this.selectedFilters),\n );\n\n this.filtersUpdated.emit(deduplicatedFilters);\n this.searchStore.setSelectedFilters(deduplicatedFilters);\n this.searchStore.search();\n };\n\n deduplicatePaths(filters: string[]): string[] {\n const pathMap = new Map<string, string>();\n\n filters.forEach((path) => {\n const key = path.split('/').pop() || '';\n const existingPath = pathMap.get(key);\n\n if (!existingPath || path.length < existingPath.length) {\n pathMap.set(key, path);\n }\n });\n\n return Array.from(pathMap.values());\n }\n\n formatLabel(label: string): string {\n return label\n .replace(/-/g, ' ')\n .split(' ')\n .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n .join(' ');\n }\n\n render() {\n if (!this.query || this.resultsCount === 0) {\n return null;\n }\n\n const filtersToRender = this.dynamicFilters.filter(\n (filter) => !filter.value.includes('/', filter.value.indexOf('/') + 1),\n );\n\n return (\n <div class='filtersList'>\n {filtersToRender.map((filter) => {\n const isChecked = this.selectedFilters.has(filter.value);\n const children = this.dynamicFilters.filter(\n (child) =>\n child.value.startsWith(`${filter.value}/`) &&\n child.value !== filter.value,\n );\n\n return (\n <div key={filter.value}>\n <label class='checkboxLabel'>\n <input\n class='filterCheckbox'\n checked={isChecked}\n onChange={(event: Event) =>\n this.handleFilterChange(\n filter.value,\n (event.target as HTMLInputElement).checked,\n )\n }\n type='checkbox'\n />\n {this.formatLabel(filter.label)}\n </label>\n {children.map((child) => {\n const isChildChecked = this.selectedFilters.has(child.value);\n return (\n <label\n class='childCheckboxLabel'\n key={child.value}\n style={{ marginLeft: '20px' }}\n >\n <input\n class='childFilterCheckbox'\n checked={isChildChecked}\n onChange={(event: Event) =>\n this.handleFilterChange(\n child.value,\n (event.target as HTMLInputElement).checked,\n )\n }\n type='checkbox'\n />\n {this.formatLabel(child.label.split('/').pop() || '')}\n </label>\n );\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<{ label: string; value: string }> = [];\n @State() isRequesting = false;\n @State() query = '';\n @State() resultsCount = 0;\n @State() selectedFilters: Set<string> = new Set();\n\n private searchStore = useSearchcraftStore.getState();\n unsubscribe: () => void;\n\n connectedCallback() {\n const state = this.searchStore;\n\n if (state.searchResults?.data.facets) {\n this.populateFiltersFromFacets(state.searchResults.data.facets);\n }\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n if (!state.query || state.query.trim().length === 0) {\n if (this.selectedFilters.size > 0) {\n this.selectedFilters.clear();\n this.filtersUpdated.emit([]);\n if (this.searchStore.selectedFilters.length > 0) {\n this.searchStore.setSelectedFilters([]);\n }\n }\n }\n this.query = state.query || '';\n this.isRequesting = state.isRequesting;\n this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n\n if (state.searchResults?.data.facets) {\n this.populateFiltersFromFacets(state.searchResults.data.facets);\n }\n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n populateFiltersFromFacets(facets: Facets) {\n const newFilters = flattenFacets(facets[0]?.section || []);\n const filtersMap = new Map<string, { label: string; value: string }>();\n\n this.dynamicFilters.forEach((filter) => {\n const key = filter.value.split('/').pop() || '';\n filtersMap.set(key, filter);\n });\n\n newFilters.forEach((filter) => {\n const key = filter.value.split('/').pop() || '';\n const existingFilter = filtersMap.get(key);\n\n if (\n !existingFilter ||\n filter.value.length < existingFilter.value.length\n ) {\n filtersMap.set(key, filter);\n }\n });\n\n this.dynamicFilters = Array.from(filtersMap.values());\n }\n\n handleFilterChange = (value: string, checked: boolean) => {\n if (checked) {\n this.selectedFilters.add(value);\n } else {\n this.selectedFilters.delete(value);\n }\n const deduplicatedFilters = this.deduplicatePaths(\n Array.from(this.selectedFilters),\n );\n\n this.filtersUpdated.emit(deduplicatedFilters);\n this.searchStore.setSelectedFilters(deduplicatedFilters);\n this.searchStore.search();\n };\n\n deduplicatePaths(filters: string[]): string[] {\n const pathMap = new Map<string, string>();\n\n filters.forEach((path) => {\n const key = path.split('/').pop() || '';\n const existingPath = pathMap.get(key);\n\n if (!existingPath || path.length < existingPath.length) {\n pathMap.set(key, path);\n }\n });\n\n return Array.from(pathMap.values());\n }\n\n formatLabel(label: string): string {\n return label\n .replace(/-/g, ' ')\n .split(' ')\n .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n .join(' ');\n }\n\n render() {\n if (!this.query || this.resultsCount === 0) {\n return null;\n }\n\n const filtersToRender = this.dynamicFilters.filter(\n (filter) => !filter.value.includes('/', filter.value.indexOf('/') + 1),\n );\n\n return (\n <div class='filtersList'>\n {filtersToRender.map((filter) => {\n const isChecked = this.selectedFilters.has(filter.value);\n const children = this.dynamicFilters.filter(\n (child) =>\n child.value.startsWith(`${filter.value}/`) &&\n child.value !== filter.value,\n );\n\n return (\n <div key={filter.value}>\n <label class='checkboxLabel'>\n <input\n class='filterCheckbox'\n checked={isChecked}\n onChange={(event: Event) =>\n this.handleFilterChange(\n filter.value,\n (event.target as HTMLInputElement).checked,\n )\n }\n type='checkbox'\n />\n <div class='checkContainer'>\n <searchcraft-check-icon />\n </div>\n {this.formatLabel(filter.label)}\n </label>\n {children.map((child) => {\n const isChildChecked = this.selectedFilters.has(child.value);\n return (\n <label\n class='childCheckboxLabel'\n key={child.value}\n style={{ marginLeft: '20px' }}\n >\n <input\n class='childFilterCheckbox'\n checked={isChildChecked}\n onChange={(event: Event) =>\n this.handleFilterChange(\n child.value,\n (event.target as HTMLInputElement).checked,\n )\n }\n type='checkbox'\n />\n <div class='checkContainer'>\n <searchcraft-check-icon />\n </div>\n {this.formatLabel(child.label.split('/').pop() || '')}\n </label>\n );\n })}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"]}
|
package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.module.css
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
@charset "UTF-8";
|
|
2
1
|
.filtersList {
|
|
3
2
|
width: 100%;
|
|
4
3
|
}
|
|
@@ -11,6 +10,8 @@
|
|
|
11
10
|
font-size: 14px;
|
|
12
11
|
font-weight: 600;
|
|
13
12
|
gap: 14px;
|
|
13
|
+
position: relative;
|
|
14
|
+
-webkit-font-smoothing: antialiased;
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
.checkboxLabel input[type=checkbox] {
|
|
@@ -27,11 +28,11 @@
|
|
|
27
28
|
|
|
28
29
|
.checkboxLabel input[type=checkbox]:checked {
|
|
29
30
|
background-color: #000;
|
|
31
|
+
position: relative;
|
|
30
32
|
}
|
|
31
33
|
|
|
32
|
-
.checkboxLabel input[type=checkbox]:checked
|
|
33
|
-
|
|
34
|
-
content: "✔";
|
|
34
|
+
.checkboxLabel input[type=checkbox]:checked + .checkContainer {
|
|
35
|
+
display: block;
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
.remainingFilterListCheckbox {
|
|
@@ -46,6 +47,7 @@
|
|
|
46
47
|
font-size: 14px;
|
|
47
48
|
font-weight: 600;
|
|
48
49
|
gap: 12px;
|
|
50
|
+
position: relative;
|
|
49
51
|
}
|
|
50
52
|
|
|
51
53
|
.childCheckboxLabel input[type=checkbox] {
|
|
@@ -57,14 +59,25 @@
|
|
|
57
59
|
display: flex;
|
|
58
60
|
height: 24px;
|
|
59
61
|
justify-content: center;
|
|
62
|
+
position: relative;
|
|
60
63
|
width: 24px;
|
|
64
|
+
-webkit-font-smoothing: antialiased;
|
|
61
65
|
}
|
|
62
66
|
|
|
63
67
|
.childCheckboxLabel input[type=checkbox]:checked {
|
|
64
68
|
background-color: #000;
|
|
69
|
+
position: relative;
|
|
65
70
|
}
|
|
66
71
|
|
|
67
|
-
.childCheckboxLabel input[type=checkbox]:checked
|
|
68
|
-
|
|
69
|
-
|
|
72
|
+
.childCheckboxLabel input[type=checkbox]:checked + .checkContainer {
|
|
73
|
+
display: block;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.checkContainer {
|
|
77
|
+
display: none;
|
|
78
|
+
height: 16px;
|
|
79
|
+
width: 16px;
|
|
80
|
+
position: absolute;
|
|
81
|
+
top: 10px;
|
|
82
|
+
left: 7px;
|
|
70
83
|
}
|
|
@@ -48,7 +48,7 @@ export class SearchcraftInput {
|
|
|
48
48
|
const placeholderStyle = {
|
|
49
49
|
fontSize: validatedCustomStyles.placeholderFontSize || '16px',
|
|
50
50
|
};
|
|
51
|
-
return (h("div", { key: '
|
|
51
|
+
return (h("div", { key: '3c655e3572de20f333b75f85e45cc957ac0bc006', 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
52
|
#searchcraft-input-id::placeholder {
|
|
53
53
|
font-size: ${placeholderStyle.fontSize};
|
|
54
54
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
export class SearchcraftSpinnerDark {
|
|
3
3
|
render() {
|
|
4
|
-
return (h("div", { key: '
|
|
4
|
+
return (h("div", { key: 'fbbd8b46026e1c1c83b59efd68a5cecdca7cad59', class: 'spinnerContainer' }, h("div", { key: '7fb274ca3ed3d9b69eef7faa77413b1e1fe68ef5', class: 'spinnerDark' })));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "searchcraft-spinner-dark"; }
|
|
7
7
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
export class SearchcraftSpinnerLight {
|
|
3
3
|
render() {
|
|
4
|
-
return (h("div", { key: '
|
|
4
|
+
return (h("div", { key: '5f8d9dbe616324b466436037581491efff818065', class: 'spinnerContainer' }, h("div", { key: '8152d98d48ac5a4a55c49048a385301238b54932', class: 'spinnerLight' })));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "searchcraft-spinner-light"; }
|
|
7
7
|
static get encapsulation() { return "shadow"; }
|
package/dist/components/index.js
CHANGED
|
@@ -4,6 +4,7 @@ import { SearchcraftBaseSearchResult } from './searchcraft-base-search-result.js
|
|
|
4
4
|
import { SearchcraftBaseSearchResults } from './searchcraft-base-search-results.js';
|
|
5
5
|
import { SearchcraftButton } from './searchcraft-button.js';
|
|
6
6
|
import { SearchcraftButtonIcon } from './searchcraft-button-icon.js';
|
|
7
|
+
import { SearchcraftCheckIcon } from './searchcraft-check-icon.js';
|
|
7
8
|
import { SearchcraftClearIconSet } from './searchcraft-clear-icon-set.js';
|
|
8
9
|
import { SearchcraftClearInputButton } from './searchcraft-clear-input-button.js';
|
|
9
10
|
import { SearchcraftErrorMessage } from './searchcraft-error-message.js';
|
|
@@ -31,6 +32,7 @@ const defineCustomElements = (opts) => {
|
|
|
31
32
|
SearchcraftBaseSearchResults,
|
|
32
33
|
SearchcraftButton,
|
|
33
34
|
SearchcraftButtonIcon,
|
|
35
|
+
SearchcraftCheckIcon,
|
|
34
36
|
SearchcraftClearIconSet,
|
|
35
37
|
SearchcraftClearInputButton,
|
|
36
38
|
SearchcraftErrorMessage,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"index.js","mappings":"
|
|
1
|
+
{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-7498e493.js';
|
|
2
2
|
import { c as classNames } from './p-5cdc6210.js';
|
|
3
3
|
import { d as defineCustomElement$3 } from './p-70722ab2.js';
|
|
4
|
-
import { d as defineCustomElement$2 } from './p-
|
|
5
|
-
import { d as defineCustomElement$1 } from './p-
|
|
4
|
+
import { d as defineCustomElement$2 } from './p-9952c9ba.js';
|
|
5
|
+
import { d as defineCustomElement$1 } from './p-bdf84774.js';
|
|
6
6
|
|
|
7
7
|
const searchcraftClearInputButtonModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputClearButtonLTR{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;padding:0;position:absolute;right:0;top:50%;transform:translateY(-50%);width:20px}.inputClearButtonRTL{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;left:0px;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:20px}";
|
|
8
8
|
const SearchcraftClearInputButtonStyle0 = searchcraftClearInputButtonModuleCss;
|
|
@@ -64,4 +64,4 @@ function defineCustomElement() {
|
|
|
64
64
|
|
|
65
65
|
export { SearchcraftClearInputButton as S, defineCustomElement as d };
|
|
66
66
|
|
|
67
|
-
//# sourceMappingURL=p-
|
|
67
|
+
//# sourceMappingURL=p-0eb562da.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-0eb562da.js","mappings":";;;;;;AAAA,MAAM,oCAAoC,GAAG,+bAA+b,CAAC;AAC7e,0CAAe,oCAAoC;;MCctC,2BAA2B;;;;;;QAY9B,qBAAgB,GAAG,CAAC,KAAiB;YAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SACxB,CAAC;4BAdsB,KAAK;sCACI,KAAK;qBAIrB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;KAC/B;IAOD,MAAM;QACJ,OAAO,IAAI,CAAC,sBAAsB,IAChC,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,IAChB,IAAI,CAAC,YAAY,IACf,oCAA6B,KAE7B,mCAA4B,CAC7B,IACC,IAAI,CAAC,YAAY,IACnB,kCAA4B,IAAI,EAAC,aAAa,GAAG,KAEjD,kCAA4B,IAAI,EAAC,YAAY,GAAG,CACjD,CACM,KAET,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,IAChB,IAAI,CAAC,YAAY,IACf,oCAA6B,KAE7B,mCAA4B,CAC7B,IACC,IAAI,CAAC,YAAY,IACnB,kCAA4B,IAAI,EAAC,aAAa,GAAG,KAEjD,kCAA4B,IAAI,EAAC,YAAY,GAAG,CACjD,CACM,CACV,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-clear-input-button/searchcraft-clear-input-button.module.scss?tag=searchcraft-clear-input-button&encapsulation=shadow","src/components/searchcraft-clear-input-button/searchcraft-clear-input-button.tsx"],"sourcesContent":[":root {\n --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.inputClearButtonLTR {\n align-items: center;\n background: none;\n border: none;\n display: flex;\n height: 20px;\n justify-content: center;\n padding: 0;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 20px;\n}\n\n.inputClearButtonRTL {\n align-items: center;\n background: none;\n border: none;\n display: flex;\n height: 20px;\n justify-content: center;\n left: 0px;\n padding: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 20px;\n}","import {\n Component,\n Event,\n type EventEmitter,\n Prop,\n h,\n State,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'searchcraft-clear-input-button',\n styleUrl: 'searchcraft-clear-input-button.module.scss',\n shadow: true,\n})\nexport class SearchcraftClearInputButton {\n @Prop() isRequesting? = false;\n @Prop() rightToLeftOrientation = false;\n\n @Event() clearInput: EventEmitter<void>;\n\n @State() theme = 'light';\n\n private isLightTheme() {\n return this.theme === 'light';\n }\n\n private handleClearClick = (event: MouseEvent) => {\n event.preventDefault();\n this.clearInput.emit();\n };\n\n render() {\n return this.rightToLeftOrientation ? (\n <button\n class={classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl')}\n onClick={this.handleClearClick}\n type='button'\n >\n {this.isRequesting ? (\n this.isLightTheme ? (\n <searchcraft-spinner-light />\n ) : (\n <searchcraft-spinner-dark />\n )\n ) : this.isLightTheme ? (\n <searchcraft-clear-icon-set type='clear-light' />\n ) : (\n <searchcraft-clear-icon-set type='clear-dark' />\n )}\n </button>\n ) : (\n <button\n class={classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr')}\n onClick={this.handleClearClick}\n type='button'\n >\n {this.isRequesting ? (\n this.isLightTheme ? (\n <searchcraft-spinner-light />\n ) : (\n <searchcraft-spinner-dark />\n )\n ) : this.isLightTheme ? (\n <searchcraft-clear-icon-set type='clear-light' />\n ) : (\n <searchcraft-clear-icon-set type='clear-dark' />\n )}\n </button>\n );\n }\n}\n"],"version":3}
|
|
@@ -14,7 +14,7 @@ const SearchcraftErrorMessage = /*@__PURE__*/ proxyCustomElement(class Searchcra
|
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
16
|
const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
|
|
17
|
-
return (h("p", { key: '
|
|
17
|
+
return (h("p", { key: 'af47ef1acca6beb5ba557f55a6f911fad9184bb7', class: classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
|
|
18
18
|
}
|
|
19
19
|
static get style() { return SearchcraftErrorMessageStyle0; }
|
|
20
20
|
}, [1, "searchcraft-error-message", {
|
|
@@ -37,4 +37,4 @@ function defineCustomElement() {
|
|
|
37
37
|
|
|
38
38
|
export { SearchcraftErrorMessage as S, defineCustomElement as d };
|
|
39
39
|
|
|
40
|
-
//# sourceMappingURL=p-
|
|
40
|
+
//# sourceMappingURL=p-14f328f4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-14f328f4.js","mappings":";;;AAAA,MAAM,gCAAgC,GAAG,6SAA6S,CAAC;AACvV,sCAAe,gCAAgC;;MCOlC,uBAAuB;;;;;;qBASA,OAAO;;IAEzC,MAAM;QACJ,MAAM,iBAAiB,GACrB,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;QAEpE,QACE,0DAAG,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IACpC,IAAI,CAAC,YAAY,IAAI,0BAA0B,CAC9C,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-error-message/searchcraft-error-message.module.scss?tag=searchcraft-error-message&encapsulation=shadow","src/components/searchcraft-error-message/searchcraft-error-message.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin error-message-base {\n font-family: var(--font-stack);\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n margin-top: 4px;\n}\n\n.errorMessageLight {\n @include error-message-base;\n color: $light-input-caption-color-error;\n}\n\n.errorMessageDark {\n @include error-message-base;\n color: $dark-input-caption-color-error;\n}","import { Component, Prop, h } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'searchcraft-error-message',\n styleUrl: 'searchcraft-error-message.module.scss',\n shadow: true,\n})\nexport class SearchcraftErrorMessage {\n /**\n * The error message to display. Defaults to a standard message if not provided.\n */\n @Prop() errorMessage?: string;\n\n /**\n * The theme, which determines the style (light or dark).\n */\n @Prop() theme: 'light' | 'dark' = 'light';\n\n render() {\n const errorMessageStyle =\n this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';\n\n return (\n <p class={classNames(errorMessageStyle)}>\n {this.errorMessage || 'Search term is required.'}\n </p>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-7498e493.js';
|
|
2
2
|
|
|
3
|
-
const searchcraftBaseSearchResultModuleCss = "@charset \"UTF-8\";:root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#FAFAFA}@media (min-width: 600px){.interactiveResultContainerLight{flex-direction:row}}.interactiveResultContainerDark{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#2E2E2E}@media (min-width: 600px){.interactiveResultContainerDark{flex-direction:row}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 600px){.interactiveIconLarge{display:none}}.interactiveIconSmall{display:inline-block;position:absolute;right:5px;top:-2px}@media (min-width: 600px){.interactiveIconSmall{display:none}}.imageContainer{max-width:100%}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 600px){.contentContainer{max-width:50%}}.secondaryContentContainer{display:flex}.imageLight{border-radius:8px;max-height:100%;max-width:100%;border:1px solid #D9D9D9}.imageDark{border-radius:8px;max-height:100%;max-width:100%;border:1px solid #333}.headingLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;color:#292929}.headingDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;color:#FFF}.subheadingLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#737373}.subheadingDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#BFBFBF}.primaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.primaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.secondaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.secondaryContentLight::after{content:\"•\";color:#404040;font-size:1em;margin-left:5px;margin-right:5px}.secondaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.tertiaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.tertiaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}";
|
|
3
|
+
const searchcraftBaseSearchResultModuleCss = "@charset \"UTF-8\";:root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#FAFAFA}@media (min-width: 600px){.interactiveResultContainerLight{flex-direction:row}}.interactiveResultContainerDark{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#2E2E2E}@media (min-width: 600px){.interactiveResultContainerDark{flex-direction:row}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 600px){.interactiveIconLarge{display:none}}.interactiveIconSmall{display:inline-block;position:absolute;right:5px;top:-2px}@media (min-width: 600px){.interactiveIconSmall{display:none}}.imageContainer{max-width:100%}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 600px){.contentContainer{max-width:50%}}.secondaryContentContainer{display:flex}.imageLight{border-radius:8px;max-height:100%;max-width:100%;border:1px solid #D9D9D9}.imageDark{border-radius:8px;max-height:100%;max-width:100%;border:1px solid #333}.headingLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;-webkit-font-smoothing:antialiased;color:#292929}.headingDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;-webkit-font-smoothing:antialiased;color:#FFF}.subheadingLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#737373}.subheadingDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#BFBFBF}.primaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#404040}.primaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#E6E6E6}.secondaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#404040}.secondaryContentLight::after{content:\"•\";color:#404040;font-size:1em;margin-left:5px;margin-right:5px}.secondaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#E6E6E6}.tertiaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#404040}.tertiaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#E6E6E6}";
|
|
4
4
|
const SearchcraftBaseSearchResultStyle0 = searchcraftBaseSearchResultModuleCss;
|
|
5
5
|
|
|
6
6
|
const SearchcraftBaseSearchResult = /*@__PURE__*/ proxyCustomElement(class SearchcraftBaseSearchResult extends H {
|
|
@@ -47,9 +47,9 @@ const SearchcraftBaseSearchResult = /*@__PURE__*/ proxyCustomElement(class Searc
|
|
|
47
47
|
render() {
|
|
48
48
|
const isLightTheme = this.themeMode === 'light';
|
|
49
49
|
const styles = this.parseStyles();
|
|
50
|
-
const imageContainer = this.imageSource && (h("div", { key: '
|
|
51
|
-
const contentContainer = (h("div", { key: '
|
|
52
|
-
return (h("div", { key: '
|
|
50
|
+
const imageContainer = this.imageSource && (h("div", { key: 'bc2c9e7e6fdfdd7a159adeaae93ee295f3871bb1', class: 'imageContainer' }, h("img", { key: '403cf6f083a0fab8c0d84f858e6f799bb5e39856', alt: this.imageDescription, class: isLightTheme ? 'imageLight' : 'imageDark', src: this.imageSource, style: styles.image || {} })));
|
|
51
|
+
const contentContainer = (h("div", { key: 'ec56243d676a5dfbdc7d9dc5be9f2e078ab3e599', class: 'contentContainer' }, h("h2", { key: 'e2d73b3c6c18753fee3e3a2a8526a68c62a0a2f5', class: isLightTheme ? 'headingLight' : 'headingDark', style: styles.heading || {} }, this.headingText), h("h3", { key: 'fccf35b5a06c09c96150568d4cd71bacea1fe15d', class: isLightTheme ? 'subheadingLight' : 'subheadingDark', style: styles.subheading || {} }, this.subheadingText), h("p", { key: '95b64831fd0248f69773cafa6357133f9758748c', class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark', style: styles.primaryContent || {} }, this.primaryContent), h("div", { key: 'f1e597968aab316067762bca3e39bccb50f3b34a', class: 'secondaryContentContainer' }, h("p", { key: '05ccdbb2854cd538fa2fd9e3a6efe8fa8ea46003', class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark', style: styles.secondaryContent || {} }, this.secondaryContent), h("p", { key: 'ca2b96c02c9d8b073b0e0cff3e288d9eba7e3cd1', class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark', style: styles.tertiaryContent || {} }, this.tertiaryContent)), this.buttonText && (h("button", { key: '9d728eb6dcc2cdc2d0b438e79286795835dbf9e6', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText))));
|
|
52
|
+
return (h("div", { key: '44c9677d5c3c75439b9d73d8e60e5744d2ee9be0', class: this.isInteractive
|
|
53
53
|
? isLightTheme
|
|
54
54
|
? 'interactiveResultContainerLight'
|
|
55
55
|
: 'interactiveResultContainerDark'
|
|
@@ -86,4 +86,4 @@ function defineCustomElement() {
|
|
|
86
86
|
|
|
87
87
|
export { SearchcraftBaseSearchResult as S, defineCustomElement as d };
|
|
88
88
|
|
|
89
|
-
//# sourceMappingURL=p-
|
|
89
|
+
//# sourceMappingURL=p-1b18e9fe.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-1b18e9fe.js","mappings":";;AAAA,MAAM,oCAAoC,GAAG,ysGAAysG,CAAC;AACvvG,0CAAe,oCAAoC;;MCMtC,2BAA2B;;;;;;;;QAc7B,mBAAc,GAAe,SAAQ,CAAC;QACtC,oBAAe,GAAe,SAAQ,CAAC;QACvC,mBAAc,GAAe,SAAQ,CAAC;QAEvC,sBAAiB,GAAG;YAC1B,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB,CAAC;QAEM,yBAAoB,GAAG;YAC7B,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;SACF,CAAC;0BAzBmB,EAAE;4BACA,IAAI;2BACL,EAAE;gCACG,EAAE;2BACP,EAAE;6BACA,KAAK;8BACJ,EAAE;gCACA,EAAE;8BACJ,EAAE;+BACD,EAAE;yBACU,OAAO;+BACnB,KAAK;;IAgBvB,WAAW;QACjB,IAAI;YACF,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACtC;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC;YACrD,OAAO,EAAE,CAAC;SACX;KACF;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAElC,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,KACrC,4DAAK,KAAK,EAAC,gBAAgB,IACzB,4DACE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,KAAK,EAAE,YAAY,GAAG,YAAY,GAAG,WAAW,EAChD,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,GACzB,CACE,CACP,CAAC;QAEF,MAAM,gBAAgB,IACpB,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,2DACE,KAAK,EAAE,YAAY,GAAG,cAAc,GAAG,aAAa,EACpD,KAAK,EAAE,MAAM,CAAC,OAAO,IAAI,EAAE,IAE1B,IAAI,CAAC,WAAW,CACd,EACL,2DACE,KAAK,EAAE,YAAY,GAAG,iBAAiB,GAAG,gBAAgB,EAC1D,KAAK,EAAE,MAAM,CAAC,UAAU,IAAI,EAAE,IAE7B,IAAI,CAAC,cAAc,CACjB,EACL,0DACE,KAAK,EAAE,YAAY,GAAG,qBAAqB,GAAG,oBAAoB,EAClE,KAAK,EAAE,MAAM,CAAC,cAAc,IAAI,EAAE,IAEjC,IAAI,CAAC,cAAc,CAClB,EACJ,4DAAK,KAAK,EAAC,2BAA2B,IACpC,0DACE,KAAK,EACH,YAAY,GAAG,uBAAuB,GAAG,sBAAsB,EAEjE,KAAK,EAAE,MAAM,CAAC,gBAAgB,IAAI,EAAE,IAEnC,IAAI,CAAC,gBAAgB,CACpB,EACJ,0DACE,KAAK,EACH,YAAY,GAAG,sBAAsB,GAAG,qBAAqB,EAE/D,KAAK,EAAE,MAAM,CAAC,eAAe,IAAI,EAAE,IAElC,IAAI,CAAC,eAAe,CACnB,CACA,EACL,IAAI,CAAC,UAAU,KACd,+DACE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,IAAI,EAAE,EAC1B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,UAAU,CACT,CACV,CACG,CACP,CAAC;QAEF,QACE,4DACE,KAAK,EACH,IAAI,CAAC,aAAa;kBACd,YAAY;sBACV,iCAAiC;sBACjC,gCAAgC;kBAClC,iBAAiB,EAEvB,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,KAAK,EAAE,MAAM,CAAC,SAAS,IAAI,EAAE,EAC7B,QAAQ,EAAC,GAAG,IAEX,IAAI,CAAC,eAAe,IACnB,EAAC,QAAQ,QACN,gBAAgB,EAChB,cAAc,CACN,KAEX,EAAC,QAAQ,QACN,cAAc,EACd,gBAAgB,CACR,CACZ,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-base-search-result/searchcraft-base-search-result.module.scss?tag=searchcraft-base-search-result&encapsulation=shadow","src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin interactive-result-container-base {\n align-items: flex-start;\n border-radius: 16px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 8px;\n position: relative;\n\n @media (min-width: 600px) {\n flex-direction: row;\n }\n}\n\n.interactiveResultContainerLight {\n @include interactive-result-container-base;\n background-color: $light-search-result-container-background;\n}\n\n.interactiveResultContainerDark {\n @include interactive-result-container-base;\n background-color: $dark-search-result-container-background;\n}\n\n.resultContainer {\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media (min-width: 600px) {\n flex-direction: row;\n }\n}\n\n.interactiveIconLarge {\n display: inline-block;\n position: absolute;\n right: 5px;\n top: 8px;\n\n\n @media (max-width: 600px) {\n display: none;\n }\n}\n\n.interactiveIconSmall {\n display: inline-block;\n position: absolute;\n right: 5px;\n top: -2px;\n\n\n @media (min-width: 600px) {\n display: none;\n }\n}\n\n.imageContainer {\n max-width: 100%;\n}\n\n.contentContainer {\n max-height: 100%;\n max-width: 100%;\n\n @media (min-width: 600px) {\n max-width: 50%;\n }\n}\n\n.secondaryContentContainer {\n display: flex;\n\n}\n\n@mixin image-base {\n border-radius: 8px;\n max-height: 100%;\n max-width: 100%;\n}\n\n.imageLight {\n @include image-base;\n border: 1px solid $light-search-result-image-border;\n}\n\n.imageDark {\n @include image-base;\n border: 1px solid $dark-search-result-image-border;\n}\n\n@mixin heading-base {\n font-family: var(--font-stack);\n font-size: 16px;\n font-weight: 700;\n line-height: 20px;\n margin-bottom: 4px;\n margin-top: 0;\n position: relative;\n -webkit-font-smoothing: antialiased;\n}\n\n.headingLight {\n @include heading-base;\n color: $light-search-result-heading-color;\n}\n\n.headingDark {\n @include heading-base;\n color: $dark-search-result-heading-color;\n}\n\n@mixin subheading-base {\n font-family: var(--font-stack);\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n margin-bottom: 4px;\n margin-top: 0px;\n -webkit-font-smoothing: antialiased;\n}\n\n.subheadingLight {\n @include subheading-base;\n color: $light-search-result-subheading-color;\n}\n\n.subheadingDark {\n @include subheading-base;\n color: $dark-search-result-subheading-color\n}\n\n@mixin body-content-base {\n font-family: var(--font-stack);\n font-size: 16px;\n font-weight: 400;\n line-height: 20px;\n margin-bottom: 4px;\n margin-top: 0px;\n -webkit-font-smoothing: antialiased;\n}\n\n.primaryContentLight {\n @include body-content-base;\n color: $light-search-result-body-content-color;\n}\n\n.primaryContentDark {\n @include body-content-base;\n color: $dark-search-result-body-content-color;\n}\n\n.secondaryContentLight {\n @include body-content-base;\n color: $light-search-result-body-content-color;\n}\n\n.secondaryContentLight::after {\n content: \"•\";\n color: $light-search-result-body-content-color;\n font-size: 1em;\n margin-left: 5px;\n margin-right: 5px;\n}\n\n.secondaryContentDark {\n @include body-content-base;\n color: $dark-search-result-body-content-color;\n}\n\n.tertiaryContentLight {\n @include body-content-base;\n color: $light-search-result-body-content-color;\n}\n\n.tertiaryContentDark {\n @include body-content-base;\n color: $dark-search-result-body-content-color;\n}","import { Component, Event, Fragment, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'searchcraft-base-search-result',\n styleUrl: 'searchcraft-base-search-result.module.scss',\n shadow: true,\n})\nexport class SearchcraftBaseSearchResult {\n @Prop() buttonText = ''; // Label for the button\n @Prop() customStyles = '{}'; // New string prop for serialized styles.\n @Prop() headingText = ''; // Text for the heading\n @Prop() imageDescription = ''; // Alternative text for the image\n @Prop() imageSource = ''; // Source URL for the image\n @Prop() isInteractive = false; // Determines if the result is interactive\n @Prop() primaryContent = ''; // Primary body content\n @Prop() secondaryContent = ''; // Secondary body content\n @Prop() subheadingText = ''; // Text for the subheading\n @Prop() tertiaryContent = ''; // Tertiary body content\n @Prop() themeMode: 'light' | 'dark' = 'light'; // Light or dark theme context\n @Prop() placeImageRight = false; // Determines the placement of the image container\n\n @Event() buttonCallback: () => void = () => {}; // Callback for button click\n @Event() keyDownCallback: () => void = () => {}; // Callback for key down event\n @Event() resultCallback: () => void = () => {}; // Callback for result container click\n\n private handleButtonClick = () => {\n this.buttonCallback();\n };\n\n private handleContainerClick = () => {\n if (this.isInteractive) {\n this.resultCallback();\n }\n };\n\n private parseStyles(): Record<string, { [key: string]: string }> {\n try {\n return JSON.parse(this.customStyles);\n } catch (error) {\n console.error('Error parsing custom styles:', error);\n return {};\n }\n }\n\n render() {\n const isLightTheme = this.themeMode === 'light';\n const styles = this.parseStyles();\n\n const imageContainer = this.imageSource && (\n <div class='imageContainer'>\n <img\n alt={this.imageDescription}\n class={isLightTheme ? 'imageLight' : 'imageDark'}\n src={this.imageSource}\n style={styles.image || {}}\n />\n </div>\n );\n\n const contentContainer = (\n <div class='contentContainer'>\n <h2\n class={isLightTheme ? 'headingLight' : 'headingDark'}\n style={styles.heading || {}}\n >\n {this.headingText}\n </h2>\n <h3\n class={isLightTheme ? 'subheadingLight' : 'subheadingDark'}\n style={styles.subheading || {}}\n >\n {this.subheadingText}\n </h3>\n <p\n class={isLightTheme ? 'primaryContentLight' : 'primaryContentDark'}\n style={styles.primaryContent || {}}\n >\n {this.primaryContent}\n </p>\n <div class='secondaryContentContainer'>\n <p\n class={\n isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark'\n }\n style={styles.secondaryContent || {}}\n >\n {this.secondaryContent}\n </p>\n <p\n class={\n isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark'\n }\n style={styles.tertiaryContent || {}}\n >\n {this.tertiaryContent}\n </p>\n </div>\n {this.buttonText && (\n <button\n onClick={this.handleButtonClick}\n style={styles.button || {}}\n type='button'\n >\n {this.buttonText}\n </button>\n )}\n </div>\n );\n\n return (\n <div\n class={\n this.isInteractive\n ? isLightTheme\n ? 'interactiveResultContainerLight'\n : 'interactiveResultContainerDark'\n : 'resultContainer'\n }\n onKeyDown={this.keyDownCallback}\n onClick={this.handleContainerClick}\n style={styles.container || {}}\n tabindex='0'\n >\n {this.placeImageRight ? (\n <Fragment>\n {contentContainer}\n {imageContainer}\n </Fragment>\n ) : (\n <Fragment>\n {imageContainer}\n {contentContainer}\n </Fragment>\n )}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-7498e493.js';
|
|
2
2
|
import { c as classNames } from './p-5cdc6210.js';
|
|
3
|
-
import { d as defineCustomElement$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-9952c9ba.js';
|
|
4
4
|
|
|
5
5
|
const searchcraftButtonModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.buttonLight{border-radius:8px;display:flex;font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;padding:11px 20px;position:relative;background-color:#000;border:1px solid #E6E6E6;color:#FFF}.buttonLight:hover{cursor:pointer}.buttonLight:hover{background-color:#2E2E2E}.buttonLight:focus{outline:2px solid #000000}.buttonDark{border-radius:8px;display:flex;font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;padding:11px 20px;position:relative;background-color:#FFF;border:1px solid #404040;color:#292929}.buttonDark:hover{cursor:pointer}.buttonDark:hover{background-color:#FAFAFA}.buttonDark:focus{outline:2px solid #404040}.spinnerMarginRight{left:4px;margin-right:4px;position:absolute}.spinnerMarginLeft{left:4px;margin-left:4px;position:absolute}.buttonLabel{animation:right-and-back 0.2s;margin-left:4px;position:relative}@keyframes right-and-back{0%{right:-6px}50%{right:-12px}75%{right:-6px}100%{right:0px}}";
|
|
6
6
|
const SearchcraftButtonStyle0 = searchcraftButtonModuleCss;
|
|
@@ -26,7 +26,7 @@ const SearchcraftButton = /*@__PURE__*/ proxyCustomElement(class SearchcraftButt
|
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
28
28
|
const buttonStyle = this.getButtonStyle();
|
|
29
|
-
return (h(Fragment, { key: '
|
|
29
|
+
return (h(Fragment, { key: 'eb540b00f175ade3604c050f31bb0cfcc7e67d7e' }, this.iconOnly ? (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.isRequesting ? (h("div", { class: 'spinner-margin-right' }, h("searchcraft-spinner-dark", null))) : (this.iconElement), h("span", { class: classNames(this.isRequesting && 'button-label', 'searchcraft-button-label') }, this.label)))));
|
|
30
30
|
}
|
|
31
31
|
static get style() { return SearchcraftButtonStyle0; }
|
|
32
32
|
}, [1, "searchcraft-button", {
|
|
@@ -58,4 +58,4 @@ function defineCustomElement() {
|
|
|
58
58
|
|
|
59
59
|
export { SearchcraftButton as S, defineCustomElement as d };
|
|
60
60
|
|
|
61
|
-
//# sourceMappingURL=p-
|
|
61
|
+
//# sourceMappingURL=p-52b81ff4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-52b81ff4.js","mappings":";;;;AAAA,MAAM,0BAA0B,GAAG,y/BAAy/B,CAAC;AAC7hC,gCAAe,0BAA0B;;MCe5B,iBAAiB;;;;;;QAepB,gBAAW,GAAG;YACpB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACzB,CAAC;;wBAfiB,KAAK;4BACD,MAAM;qBACb,QAAQ;4BAIA,KAAK;qBACZ,OAAO;;IAEhB,cAAc;QACpB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,aAAa,GAAG,YAAY,CAAC;KAC9D;IAMD,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,QACE,EAAC,QAAQ,uDACN,IAAI,CAAC,QAAQ,IACZ,cACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,IAChB,mCAA4B,KAE5B,IAAI,CAAC,WAAW,CACjB,CACM,KAET,cACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,IAChD,WAAK,KAAK,EAAC,sBAAsB,IAC/B,mCAA4B,CACxB,KAEN,IAAI,CAAC,WAAW,CACjB,EACD,YACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,YAAY,IAAI,cAAc,EACnC,0BAA0B,CAC3B,IAEA,IAAI,CAAC,KAAK,CACN,CACA,CACV,CACQ,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-button/searchcraft-button.module.scss?tag=searchcraft-button&encapsulation=shadow","src/components/searchcraft-button/searchcraft-button.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin button-base {\n border-radius: 8px;\n display: flex;\n font-family: var(--font-stack);\n font-size: 16px;\n font-weight: 700;\n line-height: 20px;\n padding: 11px 20px;\n position: relative;\n\n &:hover {\n cursor: pointer;\n }\n}\n\n.buttonLight {\n @include button-base;\n background-color: $light-background;\n border: 1px solid $light-button-border;\n color: $light-button-color;\n\n &:hover {\n background-color: $light-button-hover;\n }\n\n &:focus {\n outline: 2px solid $light-button-outline-focus;\n }\n}\n\n.buttonDark {\n @include button-base;\n background-color: $dark-background;\n border: 1px solid $dark-button-border;\n color: $dark-button-color;\n\n &:hover {\n background-color: $dark-button-hover;\n }\n\n &:focus {\n outline: 2px solid $dark-button-outline-focus;\n }\n}\n\n.spinnerMarginRight {\n left: 4px;\n margin-right: 4px;\n position: absolute;\n}\n\n.spinnerMarginLeft {\n left: 4px;\n margin-left: 4px;\n position: absolute;\n}\n\n.buttonLabel {\n animation: right-and-back .2s;\n margin-left: 4px;\n position: relative;\n}\n\n@keyframes right-and-back {\n 0% { right: -6px; }\n 50% { right: -12px; }\n 75% { right: -6px; }\n 100% {right: 0px; }\n}","import {\n Component,\n Event,\n type EventEmitter,\n Prop,\n h,\n State,\n Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'searchcraft-button',\n styleUrl: 'searchcraft-button.module.scss',\n shadow: true,\n})\nexport class SearchcraftButton {\n @Prop() iconElement?: Element;\n @Prop() iconOnly = false;\n @Prop() iconPosition = 'left';\n @Prop() label = 'Search';\n\n @Event() buttonClick!: EventEmitter<void>;\n\n @State() isRequesting = false;\n @State() theme = 'light';\n\n private getButtonStyle() {\n return this.theme === 'light' ? 'buttonLight' : 'buttonDark';\n }\n\n private handleClick = () => {\n this.buttonClick.emit(); // Emit the event instead of calling a function\n };\n\n render() {\n const buttonStyle = this.getButtonStyle();\n\n return (\n <Fragment>\n {this.iconOnly ? (\n <button\n class={classNames(buttonStyle, 'searchcraft-button')}\n onClick={this.handleClick}\n type='submit'\n >\n {this.isRequesting ? (\n <searchcraft-spinner-dark />\n ) : (\n this.iconElement\n )}\n </button>\n ) : (\n <button\n class={classNames(buttonStyle, 'searchcraft-button')}\n onClick={this.handleClick}\n type='submit'\n >\n {this.iconPosition === 'left' && this.isRequesting ? (\n <div class='spinner-margin-right'>\n <searchcraft-spinner-dark />\n </div>\n ) : (\n this.iconElement\n )}\n <span\n class={classNames(\n this.isRequesting && 'button-label',\n 'searchcraft-button-label',\n )}\n >\n {this.label}\n </span>\n </button>\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}
|
|
@@ -2,12 +2,12 @@ import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from '
|
|
|
2
2
|
import { c as classNames } from './p-5cdc6210.js';
|
|
3
3
|
import { p as parseCustomStyles } from './p-2bda632c.js';
|
|
4
4
|
import { d as defineCustomElement$7 } from './p-70722ab2.js';
|
|
5
|
-
import { d as defineCustomElement$6 } from './p-
|
|
5
|
+
import { d as defineCustomElement$6 } from './p-0eb562da.js';
|
|
6
6
|
import { d as defineCustomElement$5 } from './p-6237f03e.js';
|
|
7
7
|
import { d as defineCustomElement$4 } from './p-8c38185e.js';
|
|
8
8
|
import { d as defineCustomElement$3 } from './p-a3bd1bc8.js';
|
|
9
|
-
import { d as defineCustomElement$2 } from './p-
|
|
10
|
-
import { d as defineCustomElement$1 } from './p-
|
|
9
|
+
import { d as defineCustomElement$2 } from './p-9952c9ba.js';
|
|
10
|
+
import { d as defineCustomElement$1 } from './p-bdf84774.js';
|
|
11
11
|
|
|
12
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%}";
|
|
13
13
|
const SearchcraftInputStyle0 = searchcraftInputModuleCss;
|
|
@@ -65,7 +65,7 @@ const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput
|
|
|
65
65
|
const placeholderStyle = {
|
|
66
66
|
fontSize: validatedCustomStyles.placeholderFontSize || '16px',
|
|
67
67
|
};
|
|
68
|
-
return (h("div", { key: '
|
|
68
|
+
return (h("div", { key: '3c655e3572de20f333b75f85e45cc957ac0bc006', 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
69
|
#searchcraft-input-id::placeholder {
|
|
70
70
|
font-size: ${placeholderStyle.fontSize};
|
|
71
71
|
}
|
|
@@ -142,4 +142,4 @@ function defineCustomElement() {
|
|
|
142
142
|
|
|
143
143
|
export { SearchcraftInput as S, defineCustomElement as d };
|
|
144
144
|
|
|
145
|
-
//# sourceMappingURL=p-
|
|
145
|
+
//# sourceMappingURL=p-643cfdcf.js.map
|