@searchcraft/javascript-sdk 0.10.3 → 0.10.5
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/components/index.d.ts +50 -20
- package/dist/components/index.js +4 -4
- package/dist/components/p-4dd1995c.js +193 -0
- package/dist/components/p-4dd1995c.js.map +1 -0
- package/dist/components/{p-6717ab82.js → p-6c471ee0.js} +3 -3
- package/dist/components/{p-6717ab82.js.map → p-6c471ee0.js.map} +1 -1
- package/dist/components/{p-d4558d44.js → p-7c10ca44.js} +273 -260
- package/dist/components/p-7c10ca44.js.map +1 -0
- package/dist/components/{p-da1fb5c0.js → p-8a4cfe99.js} +2 -2
- package/dist/components/{p-da1fb5c0.js.map → p-8a4cfe99.js.map} +1 -1
- package/dist/components/{p-508ee769.js → p-b72015a6.js} +2 -2
- package/dist/components/{p-508ee769.js.map → p-b72015a6.js.map} +1 -1
- package/dist/components/p-bb700499.js +338 -0
- package/dist/components/p-bb700499.js.map +1 -0
- package/dist/components/{p-5a4be632.js → p-bfad84c6.js} +13 -4
- package/dist/components/p-bfad84c6.js.map +1 -0
- package/dist/components/p-d54771ef.js +182 -0
- package/dist/components/p-d54771ef.js.map +1 -0
- package/dist/components/{p-fd564261.js → p-d9222264.js} +4 -4
- package/dist/components/{p-fd564261.js.map → p-d9222264.js.map} +1 -1
- package/dist/components/{p-ad569b01.js → p-f1afb299.js} +2 -2
- package/dist/components/{p-ad569b01.js.map → p-f1afb299.js.map} +1 -1
- package/dist/components/{p-06bac1fc.js → p-f4b0ff45.js} +3 -3
- package/dist/components/{p-06bac1fc.js.map → p-f4b0ff45.js.map} +1 -1
- package/dist/components/searchcraft-ad.js +1 -1
- package/dist/components/searchcraft-facet-list.js +1 -1
- package/dist/components/searchcraft-filter-panel.js +13 -18
- package/dist/components/searchcraft-filter-panel.js.map +1 -1
- package/dist/components/searchcraft-input-form.js +1 -1
- package/dist/components/searchcraft-pagination.js +1 -1
- package/dist/components/searchcraft-popover-button.js +1 -1
- package/dist/components/searchcraft-popover-footer.js +1 -1
- package/dist/components/searchcraft-popover-form.js +6 -6
- package/dist/components/searchcraft-popover-list-item.js +1 -1
- package/dist/components/searchcraft-popover-list-view.js +1 -1
- package/dist/components/searchcraft-results-info.js +2 -2
- package/dist/components/searchcraft-search-result.js +1 -1
- package/dist/components/searchcraft-search-results-per-page.js +1 -1
- package/dist/components/searchcraft-search-results.js +3 -3
- package/dist/components/searchcraft-slider.js +1 -1
- package/dist/components/searchcraft-theme.js +1 -1
- package/dist/components/searchcraft-theme.js.map +1 -1
- package/dist/components/searchcraft-toggle-button.js +1 -1
- package/dist/hydrate/index.js +613 -386
- package/dist/hydrate/index.mjs +613 -386
- package/dist/themes/hologram.css +1 -1
- package/dist/themes/hologram.css.map +1 -1
- package/dist/types/components/searchcraft-facet-list/searchcraft-facet-list.d.ts +21 -13
- package/dist/types/components/searchcraft-filter-panel/searchcraft-filter-panel.d.ts +2 -2
- package/dist/types/components/searchcraft-input-form/searchcraft-input-form.d.ts +6 -0
- package/dist/types/components/searchcraft-slider/searchcraft-slider.d.ts +10 -4
- package/dist/types/components.d.ts +23 -7
- package/dist/types/store/SearchcraftStore.types.d.ts +3 -2
- package/dist/types/utils/facets.d.ts +20 -3
- package/dist/types/utils/throttle.d.ts +14 -0
- package/dist/types/utils/units.d.ts +33 -0
- package/package.json +3 -3
- package/dist/components/p-4d37616e.js +0 -105
- package/dist/components/p-4d37616e.js.map +0 -1
- package/dist/components/p-53c795bd.js +0 -279
- package/dist/components/p-53c795bd.js.map +0 -1
- package/dist/components/p-5a4be632.js.map +0 -1
- package/dist/components/p-7c650118.js +0 -110
- package/dist/components/p-7c650118.js.map +0 -1
- package/dist/components/p-d4558d44.js.map +0 -1
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Given a document and a SearchResultMapping, return a mapped value from the document.
|
|
3
|
-
* Applies formatting based on the values specified in the `SearchResultFieldName` values.
|
|
4
|
-
*
|
|
5
|
-
* @param document
|
|
6
|
-
* @param {SearchResultMapping} mapping
|
|
7
|
-
* @returns {string | undefined}
|
|
8
|
-
*/
|
|
9
|
-
function getDocumentValueFromSearchResultMapping(document, mapping) {
|
|
10
|
-
if (document && mapping) {
|
|
11
|
-
return mapping.fieldNames
|
|
12
|
-
.map((fieldNameDetails) => {
|
|
13
|
-
let valueFound = document[fieldNameDetails.fieldName];
|
|
14
|
-
if (valueFound) {
|
|
15
|
-
switch (fieldNameDetails.dataType) {
|
|
16
|
-
case 'date': {
|
|
17
|
-
valueFound = formatRelativeDate(valueFound, fieldNameDetails.dateFormatLocale, fieldNameDetails.dateFormatOptions);
|
|
18
|
-
break;
|
|
19
|
-
}
|
|
20
|
-
case 'number': {
|
|
21
|
-
valueFound = Intl.NumberFormat(fieldNameDetails.numberFormatLocale, fieldNameDetails.numberFormatOptions).format(valueFound * (fieldNameDetails.numberScale || 1));
|
|
22
|
-
break;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
return valueFound;
|
|
27
|
-
})
|
|
28
|
-
.filter((value) => !!value)
|
|
29
|
-
.join(mapping.delimiter || ' ');
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* Convert different units of time to milliseconds.
|
|
34
|
-
*
|
|
35
|
-
* @param unit - The unit of time
|
|
36
|
-
* @returns {number}
|
|
37
|
-
*/
|
|
38
|
-
function getMillis(unit) {
|
|
39
|
-
const millisInHour = 60 * 60 * 1000;
|
|
40
|
-
const millisInDay = 24 * millisInHour;
|
|
41
|
-
const millisInMonth = 30 * millisInDay;
|
|
42
|
-
const millisInYear = 365 * millisInDay;
|
|
43
|
-
switch (unit) {
|
|
44
|
-
case 'hour':
|
|
45
|
-
return millisInHour;
|
|
46
|
-
case 'day':
|
|
47
|
-
return millisInDay;
|
|
48
|
-
case 'month':
|
|
49
|
-
return millisInMonth;
|
|
50
|
-
case 'year':
|
|
51
|
-
return millisInYear;
|
|
52
|
-
default:
|
|
53
|
-
return 3600000;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
/**
|
|
57
|
-
* Format a number with commas as thousands separators.
|
|
58
|
-
*
|
|
59
|
-
* @param number - The number to be formatted.
|
|
60
|
-
* @returns {string} - The formatted number as a string.
|
|
61
|
-
*/
|
|
62
|
-
function formatNumberWithCommas(number) {
|
|
63
|
-
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* Format a date or date string. The string is formatted relative to today's date
|
|
67
|
-
* (e.g. 2 days ago) until the date range is greater than a month.
|
|
68
|
-
*
|
|
69
|
-
* @param dateInput - The date to be formatted.
|
|
70
|
-
* @param locale - The language used for formatting the date.
|
|
71
|
-
* @param options - The non-default options used for formatting the date.
|
|
72
|
-
* @returns {string} - The formatted date as a string.
|
|
73
|
-
*/
|
|
74
|
-
function formatRelativeDate(dateInput, locale = 'en-US', options = {
|
|
75
|
-
day: 'numeric',
|
|
76
|
-
month: 'long',
|
|
77
|
-
year: 'numeric',
|
|
78
|
-
}) {
|
|
79
|
-
const date = new Date(dateInput);
|
|
80
|
-
const now = new Date();
|
|
81
|
-
const diffMillis = now.getTime() - date.getTime();
|
|
82
|
-
const oneMonthInMillis = 30 * 24 * 60 * 60 * 1000; // Approx. 1 month in ms
|
|
83
|
-
if (diffMillis < oneMonthInMillis) {
|
|
84
|
-
const diffSeconds = Math.trunc(diffMillis / 1000);
|
|
85
|
-
const diffMinutes = Math.trunc(diffSeconds / 60);
|
|
86
|
-
const diffHours = Math.trunc(diffMinutes / 60);
|
|
87
|
-
const diffDays = Math.trunc(diffHours / 24);
|
|
88
|
-
const relativeTimeFormat = new Intl.RelativeTimeFormat(locale, options);
|
|
89
|
-
if (diffDays >= 1) {
|
|
90
|
-
return relativeTimeFormat.format(-diffDays, 'day');
|
|
91
|
-
}
|
|
92
|
-
if (diffHours >= 1) {
|
|
93
|
-
return relativeTimeFormat.format(-diffHours, 'hour');
|
|
94
|
-
}
|
|
95
|
-
if (diffMinutes >= 1) {
|
|
96
|
-
return relativeTimeFormat.format(-diffMinutes, 'minute');
|
|
97
|
-
}
|
|
98
|
-
return relativeTimeFormat.format(0, 'second');
|
|
99
|
-
}
|
|
100
|
-
return new Intl.DateTimeFormat(locale, options).format(date);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
export { getDocumentValueFromSearchResultMapping as a, formatNumberWithCommas as f, getMillis as g };
|
|
104
|
-
|
|
105
|
-
//# sourceMappingURL=p-4d37616e.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-4d37616e.js","mappings":"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","names":[],"sources":["src/utils/units.ts"],"sourcesContent":["import type { SearchResultMapping } from '@searchcraft/core';\n\n/**\n * Given a document and a SearchResultMapping, return a mapped value from the document.\n * Applies formatting based on the values specified in the `SearchResultFieldName` values.\n *\n * @param document\n * @param {SearchResultMapping} mapping\n * @returns {string | undefined}\n */\nexport function getDocumentValueFromSearchResultMapping(\n document: Record<string, unknown> | undefined,\n mapping: SearchResultMapping | undefined,\n): string | undefined {\n if (document && mapping) {\n return mapping.fieldNames\n .map((fieldNameDetails) => {\n let valueFound = document[fieldNameDetails.fieldName];\n\n if (valueFound) {\n switch (fieldNameDetails.dataType) {\n case 'date': {\n valueFound = formatRelativeDate(\n valueFound as string | Date,\n fieldNameDetails.dateFormatLocale,\n fieldNameDetails.dateFormatOptions,\n );\n break;\n }\n case 'number': {\n valueFound = Intl.NumberFormat(\n fieldNameDetails.numberFormatLocale,\n fieldNameDetails.numberFormatOptions,\n ).format(\n (valueFound as number) * (fieldNameDetails.numberScale || 1),\n );\n break;\n }\n default:\n break;\n }\n }\n\n return valueFound;\n })\n .filter((value) => !!value)\n .join(mapping.delimiter || ' ');\n }\n}\n\n/**\n * Convert different units of time to milliseconds.\n *\n * @param unit - The unit of time\n * @returns {number}\n */\nexport function getMillis(unit: 'year' | 'month' | 'day' | 'hour'): number {\n const millisInHour = 60 * 60 * 1000;\n const millisInDay = 24 * millisInHour;\n const millisInMonth = 30 * millisInDay;\n const millisInYear = 365 * millisInDay;\n\n switch (unit) {\n case 'hour':\n return millisInHour;\n case 'day':\n return millisInDay;\n case 'month':\n return millisInMonth;\n case 'year':\n return millisInYear;\n default:\n return 3600000;\n }\n}\n\n/**\n * Format a number with commas as thousands separators.\n *\n * @param number - The number to be formatted.\n * @returns {string} - The formatted number as a string.\n */\nexport function formatNumberWithCommas(number) {\n return number.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n}\n\n/**\n * Format a date or date string. The string is formatted relative to today's date\n * (e.g. 2 days ago) until the date range is greater than a month.\n *\n * @param dateInput - The date to be formatted.\n * @param locale - The language used for formatting the date.\n * @param options - The non-default options used for formatting the date.\n * @returns {string} - The formatted date as a string.\n */\nexport function formatRelativeDate(\n dateInput: string | Date,\n locale = 'en-US',\n options: Intl.DateTimeFormatOptions = {\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n },\n): string {\n const date = new Date(dateInput);\n const now = new Date();\n const diffMillis = now.getTime() - date.getTime();\n const oneMonthInMillis = 30 * 24 * 60 * 60 * 1000; // Approx. 1 month in ms\n\n if (diffMillis < oneMonthInMillis) {\n const diffSeconds = Math.trunc(diffMillis / 1000);\n const diffMinutes = Math.trunc(diffSeconds / 60);\n const diffHours = Math.trunc(diffMinutes / 60);\n const diffDays = Math.trunc(diffHours / 24);\n const relativeTimeFormat = new Intl.RelativeTimeFormat(locale, options);\n\n if (diffDays >= 1) {\n return relativeTimeFormat.format(-diffDays, 'day');\n }\n\n if (diffHours >= 1) {\n return relativeTimeFormat.format(-diffHours, 'hour');\n }\n\n if (diffMinutes >= 1) {\n return relativeTimeFormat.format(-diffMinutes, 'minute');\n }\n\n return relativeTimeFormat.format(0, 'second');\n }\n\n return new Intl.DateTimeFormat(locale, options).format(date);\n}\n"],"version":3}
|
|
@@ -1,279 +0,0 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h } from './p-5365011f.js';
|
|
2
|
-
import { s as searchcraftStore } from './p-d4558d44.js';
|
|
3
|
-
import './p-a64b4cba.js';
|
|
4
|
-
|
|
5
|
-
function deepMergeWithSpread(obj1, obj2) {
|
|
6
|
-
const result = { ...obj1 };
|
|
7
|
-
for (const key in obj2) {
|
|
8
|
-
// biome-ignore lint/suspicious/noPrototypeBuiltins: <explanation>
|
|
9
|
-
if (obj2.hasOwnProperty(key)) {
|
|
10
|
-
if (obj2[key] instanceof Object && obj1[key] instanceof Object) {
|
|
11
|
-
result[key] = deepMergeWithSpread(obj1[key], obj2[key]);
|
|
12
|
-
}
|
|
13
|
-
else {
|
|
14
|
-
result[key] = obj2[key];
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
return result;
|
|
19
|
-
}
|
|
20
|
-
/**
|
|
21
|
-
* Given an array of facet paths, removes parent facet paths.
|
|
22
|
-
*/
|
|
23
|
-
function removeSubstringMatches(arr) {
|
|
24
|
-
return arr.filter((entry, index, array) => !array.some((otherEntry, otherIndex) => otherIndex !== index && otherEntry.includes(entry)));
|
|
25
|
-
}
|
|
26
|
-
function facetToRecord(facet) {
|
|
27
|
-
const records = {};
|
|
28
|
-
const traverseAndAddToFragments = (facetChild) => {
|
|
29
|
-
records[facetChild.path] = {
|
|
30
|
-
count: facetChild.count,
|
|
31
|
-
path: facetChild.path,
|
|
32
|
-
};
|
|
33
|
-
facetChild.children?.forEach((child) => {
|
|
34
|
-
traverseAndAddToFragments(child);
|
|
35
|
-
});
|
|
36
|
-
};
|
|
37
|
-
traverseAndAddToFragments(facet);
|
|
38
|
-
return records;
|
|
39
|
-
}
|
|
40
|
-
function recordToObject(record) {
|
|
41
|
-
const root = {
|
|
42
|
-
count: 0,
|
|
43
|
-
path: '/',
|
|
44
|
-
children: {},
|
|
45
|
-
};
|
|
46
|
-
Object.keys(record).forEach((key) => {
|
|
47
|
-
const fragment = record[key];
|
|
48
|
-
if (!fragment) {
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
if (fragment.path === '/') {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
const pathParts = fragment.path.substring(1).split('/');
|
|
55
|
-
let currentRoot = root;
|
|
56
|
-
let currentPath = '';
|
|
57
|
-
pathParts.forEach((part, index) => {
|
|
58
|
-
const nextPath = `${currentPath}/${part}`;
|
|
59
|
-
if (!currentRoot.children[nextPath]) {
|
|
60
|
-
currentRoot.children[nextPath] = {
|
|
61
|
-
count: 0,
|
|
62
|
-
path: nextPath,
|
|
63
|
-
children: {},
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
if (index === pathParts.length - 1) {
|
|
67
|
-
currentRoot.children[nextPath].count = fragment.count;
|
|
68
|
-
}
|
|
69
|
-
currentPath = nextPath;
|
|
70
|
-
currentRoot = currentRoot.children[nextPath];
|
|
71
|
-
});
|
|
72
|
-
});
|
|
73
|
-
return root;
|
|
74
|
-
}
|
|
75
|
-
function objectToFacet(childObject) {
|
|
76
|
-
const transformed = {
|
|
77
|
-
count: childObject.count,
|
|
78
|
-
path: childObject.path,
|
|
79
|
-
children: [],
|
|
80
|
-
};
|
|
81
|
-
if (Object.keys(childObject.children).length > 0) {
|
|
82
|
-
transformed.children = Object.values(childObject.children).map((subChildObject) => objectToFacet(subChildObject));
|
|
83
|
-
}
|
|
84
|
-
return transformed;
|
|
85
|
-
}
|
|
86
|
-
/**
|
|
87
|
-
* Filters records with the parent paths from record2 OUT of record1
|
|
88
|
-
*/
|
|
89
|
-
function filterRecordByParentPaths(record1, record2) {
|
|
90
|
-
// Extract all paths (keys) both records
|
|
91
|
-
const paths1 = Object.keys(record1);
|
|
92
|
-
const paths2 = Object.keys(record2);
|
|
93
|
-
// Find all parent paths in record2
|
|
94
|
-
const parentPaths = new Set(paths2
|
|
95
|
-
.filter((path) => path.split('/').length > 2) // Only consider paths with more than one level
|
|
96
|
-
.map((path) => path.substring(0, path.lastIndexOf('/'))));
|
|
97
|
-
// Filter out keys in record1 that share a parent path with any of the identified parent paths
|
|
98
|
-
const filteredRecord = Object.fromEntries(paths1
|
|
99
|
-
.filter((path) => !parentPaths.has(path.substring(0, path.lastIndexOf('/'))))
|
|
100
|
-
.map((path) => [path, record1[path]]));
|
|
101
|
-
return filteredRecord;
|
|
102
|
-
}
|
|
103
|
-
function mergeFacetRoots(fieldName, currentRoot, incomingRoot) {
|
|
104
|
-
const currentArray = currentRoot[fieldName];
|
|
105
|
-
const incomingArray = incomingRoot[fieldName];
|
|
106
|
-
const currentRootFacetChild = {
|
|
107
|
-
count: 0,
|
|
108
|
-
path: '/',
|
|
109
|
-
children: currentArray,
|
|
110
|
-
};
|
|
111
|
-
const incomingRootFacetChild = {
|
|
112
|
-
count: 0,
|
|
113
|
-
path: '/',
|
|
114
|
-
children: incomingArray,
|
|
115
|
-
};
|
|
116
|
-
// Flatten them into records
|
|
117
|
-
const currentRecord = facetToRecord(currentRootFacetChild);
|
|
118
|
-
const incomingRecord = facetToRecord(incomingRootFacetChild);
|
|
119
|
-
// Filter out the records from record1 (the current set of records)
|
|
120
|
-
// that share a parent path with record2 (the incoming records)
|
|
121
|
-
const filteredCurrentRecord = filterRecordByParentPaths(currentRecord, incomingRecord);
|
|
122
|
-
// Deep merge the records together
|
|
123
|
-
const mergedRecord = deepMergeWithSpread(filteredCurrentRecord, incomingRecord);
|
|
124
|
-
// Convert into a heirarchical object
|
|
125
|
-
const mergedObject = recordToObject(mergedRecord);
|
|
126
|
-
// Convert the heirarchical object back to the Facet child structure
|
|
127
|
-
const mergedFacetChild = objectToFacet(mergedObject);
|
|
128
|
-
return {
|
|
129
|
-
[fieldName]: mergedFacetChild.children,
|
|
130
|
-
};
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
const SearchcraftFacetList = /*@__PURE__*/ proxyCustomElement(class SearchcraftFacetList extends H {
|
|
134
|
-
constructor() {
|
|
135
|
-
super();
|
|
136
|
-
this.__registerHost();
|
|
137
|
-
this.facetSelectionUpdated = createEvent(this, "facetSelectionUpdated", 7);
|
|
138
|
-
}
|
|
139
|
-
/**
|
|
140
|
-
* The name of the field where facets are applied.
|
|
141
|
-
*/
|
|
142
|
-
fieldName = '';
|
|
143
|
-
/**
|
|
144
|
-
* When the facets are updated.
|
|
145
|
-
*/
|
|
146
|
-
facetSelectionUpdated;
|
|
147
|
-
baseFacetRoot;
|
|
148
|
-
facetRoot;
|
|
149
|
-
selectedPaths = {};
|
|
150
|
-
lastTimeTaken;
|
|
151
|
-
hasNewSearchTerm = false;
|
|
152
|
-
lastSearchTerm;
|
|
153
|
-
lastSearchMode;
|
|
154
|
-
lastSortType;
|
|
155
|
-
unsubscribe;
|
|
156
|
-
searchStore = searchcraftStore.getState();
|
|
157
|
-
handleStateUpdate(state) {
|
|
158
|
-
const facetPrime = state.searchResponseFacetPrime;
|
|
159
|
-
const timeTaken = state.searchResponseTimeTaken;
|
|
160
|
-
if (!this.fieldName) {
|
|
161
|
-
return;
|
|
162
|
-
}
|
|
163
|
-
/** Things to do when the state's search term has changed, but before the response received */
|
|
164
|
-
if (state.searchTerm !== this.lastSearchTerm ||
|
|
165
|
-
state.searchMode !== this.lastSearchMode) {
|
|
166
|
-
this.selectedPaths = {};
|
|
167
|
-
this.hasNewSearchTerm = true;
|
|
168
|
-
}
|
|
169
|
-
/** Things to do when a new response with a new facet prime has been received */
|
|
170
|
-
if (timeTaken !== this.lastTimeTaken && facetPrime) {
|
|
171
|
-
this.facetRoot = undefined;
|
|
172
|
-
const incomingFacetRoot = facetPrime.find((facet) => this.fieldName === Object.keys(facet)[0]);
|
|
173
|
-
/** Data is from a new search term: completely override our facets */
|
|
174
|
-
if (this.hasNewSearchTerm) {
|
|
175
|
-
this.baseFacetRoot = incomingFacetRoot;
|
|
176
|
-
this.facetRoot = incomingFacetRoot;
|
|
177
|
-
this.hasNewSearchTerm = false;
|
|
178
|
-
}
|
|
179
|
-
else if (this.baseFacetRoot && incomingFacetRoot) {
|
|
180
|
-
/** Data is from an existing search term, merge the facets together */
|
|
181
|
-
this.facetRoot = mergeFacetRoots(this.fieldName, this.baseFacetRoot, incomingFacetRoot);
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
this.lastSearchTerm = state.searchTerm;
|
|
185
|
-
this.lastSearchMode = state.searchMode;
|
|
186
|
-
this.lastSortType = state.sortType;
|
|
187
|
-
this.lastTimeTaken = timeTaken;
|
|
188
|
-
}
|
|
189
|
-
connectedCallback() {
|
|
190
|
-
this.handleStateUpdate(this.searchStore);
|
|
191
|
-
this.unsubscribe = searchcraftStore.subscribe((state) => {
|
|
192
|
-
this.handleStateUpdate(state);
|
|
193
|
-
});
|
|
194
|
-
}
|
|
195
|
-
disconnectedCallback() {
|
|
196
|
-
this.unsubscribe?.();
|
|
197
|
-
}
|
|
198
|
-
handleCheckboxChange(path) {
|
|
199
|
-
const isCheckboxChecked = !this.selectedPaths[path];
|
|
200
|
-
if (isCheckboxChecked) {
|
|
201
|
-
/**
|
|
202
|
-
* Checkbox Checked: Add to the selectedPaths record
|
|
203
|
-
* Uses spread operator here so UI updates.
|
|
204
|
-
*/
|
|
205
|
-
this.selectedPaths = {
|
|
206
|
-
...this.selectedPaths,
|
|
207
|
-
[path]: true,
|
|
208
|
-
};
|
|
209
|
-
}
|
|
210
|
-
else {
|
|
211
|
-
/**
|
|
212
|
-
* Checkbox Uncheck: Remove any paths and sub-paths
|
|
213
|
-
*/
|
|
214
|
-
const updatedPaths = Object.keys(this.selectedPaths).filter((testPath) => !testPath.includes(path));
|
|
215
|
-
this.selectedPaths = updatedPaths.reduce((acc, str) => {
|
|
216
|
-
acc[str] = true;
|
|
217
|
-
return acc;
|
|
218
|
-
}, {});
|
|
219
|
-
}
|
|
220
|
-
/**
|
|
221
|
-
* Emit the paths array, with parent paths removed.
|
|
222
|
-
*/
|
|
223
|
-
const paths = Object.keys(this.selectedPaths).filter((path) => this.selectedPaths[path]);
|
|
224
|
-
const pathsWithParentPathsRemoved = removeSubstringMatches(paths);
|
|
225
|
-
this.facetSelectionUpdated?.emit({ paths: pathsWithParentPathsRemoved });
|
|
226
|
-
}
|
|
227
|
-
formatLabel = (facetChild) => {
|
|
228
|
-
const label = facetChild.path.replace(/^\//, '');
|
|
229
|
-
const count = facetChild.count;
|
|
230
|
-
return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
|
|
231
|
-
};
|
|
232
|
-
formatSubLabel = (facetChild, facetChildAncestor) => {
|
|
233
|
-
const facetChildPath = facetChild.path.substring(facetChildAncestor.path.length);
|
|
234
|
-
const label = facetChildPath.replace(/^\//, '');
|
|
235
|
-
const count = facetChild.count;
|
|
236
|
-
return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
|
|
237
|
-
};
|
|
238
|
-
render() {
|
|
239
|
-
if (!this.fieldName) {
|
|
240
|
-
return;
|
|
241
|
-
}
|
|
242
|
-
const firstFacet = this.facetRoot?.[this.fieldName];
|
|
243
|
-
return (h("div", { class: 'searchcraft-facet-list' }, !firstFacet && (h("p", { class: 'searchcraft-facet-list-message' }, "Enter a search to view facets.")), firstFacet?.map((facetChild) => {
|
|
244
|
-
const isChildSelected = facetChild.children
|
|
245
|
-
? facetChild.children?.some((child) => this.selectedPaths[child.path])
|
|
246
|
-
: false;
|
|
247
|
-
return (h("div", { key: facetChild.path, class: 'searchcraft-facet-list-item' }, h("label", { class: 'searchcraft-facet-list-checkbox-label' }, h("div", { class: 'searchcraft-facet-list-checkbox-input-wrapper' }, h("input", { class: 'searchcraft-facet-list-checkbox-input', checked: this.selectedPaths[facetChild.path], onChange: (_event) => this.handleCheckboxChange(facetChild.path), type: 'checkbox' }), isChildSelected ? (h("div", { class: 'searchcraft-facet-list-checkbox-input-dash-icon' }, h("svg", { width: '14', height: '3', viewBox: '0 0 14 3', fill: 'none' }, h("title", null, "Checkbox dash"), h("line", { x1: '1.5', y1: '1.5', x2: '12.5', y2: '1.5', stroke: 'white', "stroke-width": '3', "stroke-linecap": 'round' })))) : (h("div", { class: 'searchcraft-facet-list-checkbox-input-check-icon' }, h("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none' }, h("title", null, "Checkbox check"), h("path", { d: 'M13.9999 2L5.74988 10L1.99988 6.36364', stroke: 'white', "stroke-width": '3', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))), this.formatLabel(facetChild)), facetChild.children && facetChild.children.length > 0 && (h("div", { class: 'searchcraft-facet-child-list' }, facetChild.children.map((grandchild) => (h("label", { key: grandchild.path, class: 'searchcraft-facet-list-checkbox-label searchcraft-facet-child-list-checkbox-label', style: {
|
|
248
|
-
display: this.selectedPaths[facetChild.path]
|
|
249
|
-
? 'flex'
|
|
250
|
-
: 'none',
|
|
251
|
-
} }, h("div", { class: 'searchcraft-facet-list-checkbox-input-wrapper searchcraft-facet-child-list-checkbox-input-wrapper' }, h("input", { class: 'searchcraft-facet-list-checkbox-input searchcraft-facet-child-list-checkbox-input', checked: this.selectedPaths[grandchild.path], onChange: (_event) => {
|
|
252
|
-
this.handleCheckboxChange(grandchild.path);
|
|
253
|
-
}, type: 'checkbox' }), h("div", { class: 'searchcraft-facet-list-checkbox-input-check-icon searchcraft-facet-child-list-checkbox-input-check-icon' }, h("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none' }, h("title", null, "Checkbox check"), h("path", { d: 'M13.9999 2L5.74988 10L1.99988 6.36364', stroke: 'white', "stroke-width": '3', "stroke-linecap": 'round', "stroke-linejoin": 'round' })))), this.formatSubLabel(grandchild, facetChild))))))));
|
|
254
|
-
})));
|
|
255
|
-
}
|
|
256
|
-
}, [0, "searchcraft-facet-list", {
|
|
257
|
-
"fieldName": [1, "field-name"],
|
|
258
|
-
"baseFacetRoot": [32],
|
|
259
|
-
"facetRoot": [32],
|
|
260
|
-
"selectedPaths": [32],
|
|
261
|
-
"lastTimeTaken": [32]
|
|
262
|
-
}]);
|
|
263
|
-
function defineCustomElement() {
|
|
264
|
-
if (typeof customElements === "undefined") {
|
|
265
|
-
return;
|
|
266
|
-
}
|
|
267
|
-
const components = ["searchcraft-facet-list"];
|
|
268
|
-
components.forEach(tagName => { switch (tagName) {
|
|
269
|
-
case "searchcraft-facet-list":
|
|
270
|
-
if (!customElements.get(tagName)) {
|
|
271
|
-
customElements.define(tagName, SearchcraftFacetList);
|
|
272
|
-
}
|
|
273
|
-
break;
|
|
274
|
-
} });
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
export { SearchcraftFacetList as S, defineCustomElement as d };
|
|
278
|
-
|
|
279
|
-
//# sourceMappingURL=p-53c795bd.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-53c795bd.js","mappings":"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","names":[],"sources":["src/utils/facets.ts","src/components/searchcraft-facet-list/searchcraft-facet-list.tsx"],"sourcesContent":["import type {\n FacetChild,\n FacetChildObject,\n FacetRoot,\n} from '@searchcraft/core';\n\nfunction deepMergeWithSpread(obj1, obj2) {\n const result = { ...obj1 };\n\n for (const key in obj2) {\n // biome-ignore lint/suspicious/noPrototypeBuiltins: <explanation>\n if (obj2.hasOwnProperty(key)) {\n if (obj2[key] instanceof Object && obj1[key] instanceof Object) {\n result[key] = deepMergeWithSpread(obj1[key], obj2[key]);\n } else {\n result[key] = obj2[key];\n }\n }\n }\n\n return result;\n}\n\n/**\n * Given an array of facet paths, removes parent facet paths.\n */\nexport function removeSubstringMatches(arr: string[]): string[] {\n return arr.filter(\n (entry, index, array) =>\n !array.some(\n (otherEntry, otherIndex) =>\n otherIndex !== index && otherEntry.includes(entry),\n ),\n );\n}\n\ntype FacetChildFragment = {\n count: number;\n path: string;\n};\n\nfunction facetToRecord(facet: FacetChild): Record<string, FacetChildFragment> {\n const records: Record<string, FacetChildFragment> = {};\n\n const traverseAndAddToFragments = (facetChild: FacetChild) => {\n records[facetChild.path] = {\n count: facetChild.count,\n path: facetChild.path,\n };\n\n facetChild.children?.forEach((child) => {\n traverseAndAddToFragments(child);\n });\n };\n\n traverseAndAddToFragments(facet);\n\n return records;\n}\n\nfunction recordToObject(\n record: Record<string, FacetChildFragment>,\n): FacetChildObject {\n const root: FacetChildObject = {\n count: 0,\n path: '/',\n children: {},\n };\n\n Object.keys(record).forEach((key) => {\n const fragment = record[key];\n if (!fragment) {\n return;\n }\n\n if (fragment.path === '/') {\n return;\n }\n const pathParts = fragment.path.substring(1).split('/');\n let currentRoot = root;\n let currentPath = '';\n\n pathParts.forEach((part, index) => {\n const nextPath = `${currentPath}/${part}`;\n if (!currentRoot.children[nextPath]) {\n currentRoot.children[nextPath] = {\n count: 0,\n path: nextPath,\n children: {},\n };\n }\n\n if (index === pathParts.length - 1) {\n currentRoot.children[nextPath].count = fragment.count;\n }\n\n currentPath = nextPath;\n currentRoot = currentRoot.children[nextPath];\n });\n });\n\n return root;\n}\n\nfunction objectToFacet(childObject: FacetChildObject): FacetChild {\n const transformed: FacetChild = {\n count: childObject.count,\n path: childObject.path,\n children: [],\n };\n\n if (Object.keys(childObject.children).length > 0) {\n transformed.children = Object.values(childObject.children).map(\n (subChildObject) => objectToFacet(subChildObject),\n );\n }\n\n return transformed;\n}\n\n/**\n * Filters records with the parent paths from record2 OUT of record1\n */\nfunction filterRecordByParentPaths(\n record1: Record<string, FacetChild>,\n record2: Record<string, FacetChild>,\n): Record<string, FacetChild> {\n // Extract all paths (keys) both records\n const paths1 = Object.keys(record1);\n const paths2 = Object.keys(record2);\n\n // Find all parent paths in record2\n const parentPaths = new Set(\n paths2\n .filter((path) => path.split('/').length > 2) // Only consider paths with more than one level\n .map((path) => path.substring(0, path.lastIndexOf('/'))),\n );\n\n // Filter out keys in record1 that share a parent path with any of the identified parent paths\n const filteredRecord = Object.fromEntries(\n paths1\n .filter(\n (path) => !parentPaths.has(path.substring(0, path.lastIndexOf('/'))),\n )\n .map((path) => [path, record1[path]]), // Reconstruct the key-value pairs\n );\n\n return filteredRecord as Record<string, FacetChild>;\n}\n\nexport function mergeFacetRoots(\n fieldName: string,\n currentRoot: FacetRoot,\n incomingRoot: FacetRoot,\n): FacetRoot {\n const currentArray = currentRoot[fieldName];\n const incomingArray = incomingRoot[fieldName];\n\n const currentRootFacetChild: FacetChild = {\n count: 0,\n path: '/',\n children: currentArray,\n };\n\n const incomingRootFacetChild: FacetChild = {\n count: 0,\n path: '/',\n children: incomingArray,\n };\n\n // Flatten them into records\n const currentRecord: Record<string, FacetChildFragment> = facetToRecord(\n currentRootFacetChild,\n );\n\n const incomingRecord: Record<string, FacetChildFragment> = facetToRecord(\n incomingRootFacetChild,\n );\n\n // Filter out the records from record1 (the current set of records)\n // that share a parent path with record2 (the incoming records)\n const filteredCurrentRecord = filterRecordByParentPaths(\n currentRecord,\n incomingRecord,\n );\n\n // Deep merge the records together\n const mergedRecord: Record<string, FacetChildFragment> = deepMergeWithSpread(\n filteredCurrentRecord,\n incomingRecord,\n );\n\n // Convert into a heirarchical object\n const mergedObject: FacetChildObject = recordToObject(mergedRecord);\n\n // Convert the heirarchical object back to the Facet child structure\n const mergedFacetChild = objectToFacet(mergedObject);\n\n return {\n [fieldName]: mergedFacetChild.children,\n } as FacetRoot;\n}\n","import {\n Component,\n h,\n State,\n Prop,\n Event,\n type EventEmitter,\n} from '@stencil/core';\n\nimport type { FacetChild, FacetRoot } from '@searchcraft/core';\n\nimport { searchcraftStore, type SearchcraftState } from '@store';\nimport { mergeFacetRoots, removeSubstringMatches } from '@utils';\n\n/**\n * This web component is designed to display facets in a search interface, allowing users to refine their search results by applying filters based on various attributes.\n * It is consumed within the `searchcraft-filter-panel`.\n *\n * @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-facet-list field-name=\"title\" />\n * ```\n *\n * ```js\n * // index.js\n * const facetList = document.querySelector('searchcraft-facet-list');\n *\n * facetList.addEventListener('facetSelectionUpdated', () => {\n * console.log('Facet selection updated');\n * });\n * ```\n *\n * @internal\n */\n@Component({\n tag: 'searchcraft-facet-list',\n shadow: false,\n})\nexport class SearchcraftFacetList {\n /**\n * The name of the field where facets are applied.\n */\n @Prop() fieldName = '';\n\n /**\n * When the facets are updated.\n */\n @Event() facetSelectionUpdated?: EventEmitter<{ paths: string[] }>;\n\n @State() baseFacetRoot: FacetRoot | undefined;\n @State() facetRoot: FacetRoot | undefined;\n @State() selectedPaths: Record<string, boolean> = {};\n @State() lastTimeTaken: number | undefined;\n hasNewSearchTerm = false;\n lastSearchTerm: string | undefined;\n lastSearchMode: string | undefined;\n lastSortType: string | undefined | null;\n unsubscribe: (() => void) | undefined;\n\n private searchStore = searchcraftStore.getState();\n\n handleStateUpdate(state: SearchcraftState) {\n const facetPrime = state.searchResponseFacetPrime;\n const timeTaken = state.searchResponseTimeTaken;\n\n if (!this.fieldName) {\n return;\n }\n\n /** Things to do when the state's search term has changed, but before the response received */\n if (\n state.searchTerm !== this.lastSearchTerm ||\n state.searchMode !== this.lastSearchMode\n ) {\n this.selectedPaths = {};\n this.hasNewSearchTerm = true;\n }\n\n /** Things to do when a new response with a new facet prime has been received */\n if (timeTaken !== this.lastTimeTaken && facetPrime) {\n this.facetRoot = undefined;\n const incomingFacetRoot: FacetRoot | undefined = facetPrime.find(\n (facet) => this.fieldName === Object.keys(facet)[0],\n );\n\n /** Data is from a new search term: completely override our facets */\n if (this.hasNewSearchTerm) {\n this.baseFacetRoot = incomingFacetRoot;\n this.facetRoot = incomingFacetRoot;\n this.hasNewSearchTerm = false;\n } else if (this.baseFacetRoot && incomingFacetRoot) {\n /** Data is from an existing search term, merge the facets together */\n this.facetRoot = mergeFacetRoots(\n this.fieldName,\n this.baseFacetRoot,\n incomingFacetRoot,\n );\n }\n }\n\n this.lastSearchTerm = state.searchTerm;\n this.lastSearchMode = state.searchMode;\n this.lastSortType = state.sortType;\n this.lastTimeTaken = timeTaken;\n }\n\n connectedCallback() {\n this.handleStateUpdate(this.searchStore);\n\n this.unsubscribe = searchcraftStore.subscribe((state) => {\n this.handleStateUpdate(state);\n });\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n }\n\n handleCheckboxChange(path: string) {\n const isCheckboxChecked = !this.selectedPaths[path];\n\n if (isCheckboxChecked) {\n /**\n * Checkbox Checked: Add to the selectedPaths record\n * Uses spread operator here so UI updates.\n */\n this.selectedPaths = {\n ...this.selectedPaths,\n [path]: true,\n };\n } else {\n /**\n * Checkbox Uncheck: Remove any paths and sub-paths\n */\n const updatedPaths = Object.keys(this.selectedPaths).filter(\n (testPath) => !testPath.includes(path),\n );\n\n this.selectedPaths = updatedPaths.reduce(\n (acc, str) => {\n acc[str] = true;\n return acc;\n },\n {} as Record<string, boolean>,\n );\n }\n\n /**\n * Emit the paths array, with parent paths removed.\n */\n const paths = Object.keys(this.selectedPaths).filter(\n (path) => this.selectedPaths[path],\n );\n const pathsWithParentPathsRemoved = removeSubstringMatches(paths);\n\n this.facetSelectionUpdated?.emit({ paths: pathsWithParentPathsRemoved });\n }\n\n formatLabel = (facetChild: FacetChild): string => {\n const label = facetChild.path.replace(/^\\//, '');\n const count = facetChild.count;\n return `${label.replace(/-/g, ' ').replace(/\\b\\w/g, (char) => char.toUpperCase())} (${count})`;\n };\n\n formatSubLabel = (\n facetChild: FacetChild,\n facetChildAncestor: FacetChild,\n ): string => {\n const facetChildPath = facetChild.path.substring(\n facetChildAncestor.path.length,\n );\n const label = facetChildPath.replace(/^\\//, '');\n const count = facetChild.count;\n return `${label.replace(/-/g, ' ').replace(/\\b\\w/g, (char) => char.toUpperCase())} (${count})`;\n };\n\n render() {\n if (!this.fieldName) {\n return;\n }\n\n const firstFacet = this.facetRoot?.[this.fieldName];\n\n return (\n <div class='searchcraft-facet-list'>\n {!firstFacet && (\n <p class='searchcraft-facet-list-message'>\n Enter a search to view facets.\n </p>\n )}\n {firstFacet?.map((facetChild: FacetChild) => {\n const isChildSelected = facetChild.children\n ? facetChild.children?.some(\n (child) => this.selectedPaths[child.path],\n )\n : false;\n\n return (\n <div key={facetChild.path} class='searchcraft-facet-list-item'>\n <label class='searchcraft-facet-list-checkbox-label'>\n <div class='searchcraft-facet-list-checkbox-input-wrapper'>\n <input\n class='searchcraft-facet-list-checkbox-input'\n checked={this.selectedPaths[facetChild.path]}\n onChange={(_event: Event) =>\n this.handleCheckboxChange(facetChild.path)\n }\n type='checkbox'\n />\n {isChildSelected ? (\n <div class='searchcraft-facet-list-checkbox-input-dash-icon'>\n <svg width='14' height='3' viewBox='0 0 14 3' fill='none'>\n <title>Checkbox dash</title>\n <line\n x1='1.5'\n y1='1.5'\n x2='12.5'\n y2='1.5'\n stroke='white'\n stroke-width='3'\n stroke-linecap='round'\n />\n </svg>\n </div>\n ) : (\n <div class='searchcraft-facet-list-checkbox-input-check-icon'>\n <svg\n width='16'\n height='16'\n viewBox='0 0 16 16'\n fill='none'\n >\n <title>Checkbox check</title>\n <path\n d='M13.9999 2L5.74988 10L1.99988 6.36364'\n stroke='white'\n stroke-width='3'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </div>\n )}\n </div>\n {this.formatLabel(facetChild)}\n </label>\n {facetChild.children && facetChild.children.length > 0 && (\n <div class='searchcraft-facet-child-list'>\n {facetChild.children.map((grandchild) => (\n <label\n key={grandchild.path}\n class='searchcraft-facet-list-checkbox-label searchcraft-facet-child-list-checkbox-label'\n style={{\n display: this.selectedPaths[facetChild.path]\n ? 'flex'\n : 'none',\n }}\n >\n <div class='searchcraft-facet-list-checkbox-input-wrapper searchcraft-facet-child-list-checkbox-input-wrapper'>\n <input\n class='searchcraft-facet-list-checkbox-input searchcraft-facet-child-list-checkbox-input'\n checked={this.selectedPaths[grandchild.path]}\n onChange={(_event: Event) => {\n this.handleCheckboxChange(grandchild.path);\n }}\n type='checkbox'\n />\n <div class='searchcraft-facet-list-checkbox-input-check-icon searchcraft-facet-child-list-checkbox-input-check-icon'>\n <svg\n width='16'\n height='16'\n viewBox='0 0 16 16'\n fill='none'\n >\n <title>Checkbox check</title>\n <path\n d='M13.9999 2L5.74988 10L1.99988 6.36364'\n stroke='white'\n stroke-width='3'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </div>\n </div>\n {this.formatSubLabel(grandchild, facetChild)}\n </label>\n ))}\n </div>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-5a4be632.js","mappings":"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","names":[],"sources":["src/components/searchcraft-input-form/searchcraft-input-form.tsx"],"sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Event,\n type EventEmitter,\n Watch,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport type { SearchcraftCore } from '@searchcraft/core';\n\nimport { searchcraftStore } from '@store';\n\n/**\n * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.\n * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.\n *\n * @react-import\n * ```jsx\n * import { SearchcraftInputForm } from \"@searchcraft/react-sdk\";\n * ```\n *\n * @vue-import\n * ```jsx\n * import { SearchcraftInputForm } from \"@searchcraft/vue-sdk\";\n * ```\n *\n * @js-example\n * ```html\n * <searchcraft-input-form auto-search />\n * ```\n *\n * @react-example\n * ```jsx\n * <SearchcraftInputForm autoSearch />\n * ```\n *\n * @vue-example\n * ```jsx\n * <SearchcraftInputForm autoSearch />\n * ```\n */\n@Component({\n tag: 'searchcraft-input-form',\n shadow: false,\n})\nexport class SearchcraftInputForm {\n /**\n * Whether or not to automatically submit the search term when the input changes.\n */\n @Prop() autoSearch?: boolean = true;\n /**\n * Where to place the search button.\n */\n @Prop() buttonPlacement?: 'left' | 'right' | 'none' = 'none';\n /**\n * The label for the submit button.\n */\n @Prop() buttonLabel?: string;\n /**\n * The label rendered above the input.\n */\n @Prop() inputLabel?: string;\n /**\n * The input element's placeholder value.\n */\n @Prop() placeholderValue?: string = 'Enter Search';\n /**\n * When the input becomes focused.\n */\n @Event() inputFocus?: EventEmitter<void>;\n /**\n * When the input becomes unfocused.\n */\n @Event() inputBlur?: EventEmitter<void>;\n /**\n * Event emitted when input initializes.\n */\n @Event() inputInit?: EventEmitter<void>;\n\n @State() inputValue = '';\n @State() searchTerm = '';\n @State() error = false;\n\n @Prop() core?: SearchcraftCore;\n\n private searchcraftStore = searchcraftStore.getState();\n private unsubscribe: () => void = () => {};\n\n init() {\n if (this.core) {\n this.searchcraftStore.init(this.core);\n this.inputInit?.emit();\n }\n }\n\n @Watch('core')\n onCoreChange() {\n this.init();\n }\n\n connectedCallback() {\n this.init();\n }\n\n componentDidLoad() {\n this.unsubscribe = searchcraftStore.subscribe((state) => {\n this.searchTerm = state.searchTerm;\n this.inputValue = state.searchTerm;\n });\n }\n\n disconnectedCallback() {\n this.handleReset();\n this.unsubscribe?.();\n }\n\n handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.inputValue = input.value;\n\n if (!this.autoSearch) {\n return;\n }\n\n this.performSearch(input.value);\n };\n\n private performSearch = async (searchTerm: string) => {\n if (searchTerm === this.searchTerm) {\n return;\n }\n\n this.searchcraftStore.setSearchTerm(searchTerm.trim());\n this.error = false;\n\n try {\n await this.searchcraftStore.search();\n } catch (error) {\n console.error(`Search for ${searchTerm} failed:`, error);\n this.error = true;\n }\n };\n\n private handleReset = () => {\n this.searchcraftStore.setSearchResultsCount(0);\n this.searchcraftStore.setSearchTerm('');\n this.searchcraftStore.setSearchClientResponseItems([]);\n this.error = false;\n };\n\n handleClearInput = () => {\n this.handleReset();\n };\n\n handleFormSubmit = async (event: Event) => {\n event.preventDefault();\n await this.performSearch(this.inputValue);\n };\n\n render() {\n const isShowingClearButton = this.inputValue.length > 0;\n const inputGridClassNames = classNames('searchcraft-input-form-grid', {\n 'searchcraft-input-form-grid-button-left':\n this.buttonPlacement === 'left',\n 'searchcraft-input-form-grid-button-right':\n this.buttonPlacement === 'right',\n 'searchcraft-input-form-grid-button-none':\n this.buttonPlacement === 'none',\n });\n const shouldHaveVerticalGap = this.inputLabel || this.error;\n const inputGridStyles = {\n gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',\n };\n return (\n <form class='searchcraft-input-form' onSubmit={this.handleFormSubmit}>\n <div class={inputGridClassNames} style={inputGridStyles}>\n <div class='searchcraft-input-form-button'>\n <searchcraft-button\n onButtonClick={this.handleFormSubmit}\n label={this.buttonLabel}\n />\n </div>\n {this.inputLabel && (\n <div class='searchcraft-input-form-label'>\n <searchcraft-input-label label={this.inputLabel} />\n </div>\n )}\n {this.error && (\n <div class='searchcraft-input-form-error-message'>\n <searchcraft-error-message>\n Something went wrong.\n </searchcraft-error-message>\n </div>\n )}\n <div class='searchcraft-input-form-input-wrapper'>\n <input\n autoComplete='off'\n class='searchcraft-input-form-input'\n onFocus={() => this.inputFocus?.emit()}\n onBlur={() => this.inputBlur?.emit()}\n onInput={(event) => {\n this.handleInput(event);\n }}\n placeholder={this.placeholderValue}\n type='text'\n value={this.inputValue}\n />\n <div class='searchcraft-input-form-input-icon'>\n <svg\n class='searchcraft-input-form-input-search-icon'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='searchcraft-title'\n >\n <title>Search icon</title>\n <path\n d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </div>\n {isShowingClearButton && (\n <button\n type='button'\n class='searchcraft-input-form-clear-button'\n onClick={this.handleClearInput}\n >\n <svg\n class='searchcraft-input-form-clear-icon'\n viewBox='0 0 22 22'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='icon-title'\n >\n <title>Clear icon</title>\n <path\n d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </button>\n )}\n </div>\n </div>\n </form>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h } from './p-5365011f.js';
|
|
2
|
-
import { g as getMillis } from './p-4d37616e.js';
|
|
3
|
-
import './p-a64b4cba.js';
|
|
4
|
-
import { c as classNames } from './p-5cdc6210.js';
|
|
5
|
-
|
|
6
|
-
const SearchcraftSlider = /*@__PURE__*/ proxyCustomElement(class SearchcraftSlider extends H {
|
|
7
|
-
constructor() {
|
|
8
|
-
super();
|
|
9
|
-
this.__registerHost();
|
|
10
|
-
this.rangeChanged = createEvent(this, "rangeChanged", 7);
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* The maximum value allowed.
|
|
14
|
-
*/
|
|
15
|
-
max = 100;
|
|
16
|
-
/**
|
|
17
|
-
* The minimum value allowed.
|
|
18
|
-
*/
|
|
19
|
-
min = 0;
|
|
20
|
-
/**
|
|
21
|
-
* The granularity that the value must adhere to.
|
|
22
|
-
*/
|
|
23
|
-
granularity = getMillis('month');
|
|
24
|
-
/** The type of data allowed. */
|
|
25
|
-
dataType = 'number';
|
|
26
|
-
endValue = this.max;
|
|
27
|
-
startValue = this.min;
|
|
28
|
-
lastFocusedHandle = 'max';
|
|
29
|
-
/**
|
|
30
|
-
* When the range has changed.
|
|
31
|
-
* */
|
|
32
|
-
rangeChanged;
|
|
33
|
-
componentDidLoad() {
|
|
34
|
-
this.startValue = this.min;
|
|
35
|
-
this.endValue = this.max;
|
|
36
|
-
}
|
|
37
|
-
emitUpdate = async () => {
|
|
38
|
-
this.rangeChanged?.emit({
|
|
39
|
-
startValue: this.startValue,
|
|
40
|
-
endValue: this.endValue,
|
|
41
|
-
});
|
|
42
|
-
};
|
|
43
|
-
handleStartValueChange = (event) => {
|
|
44
|
-
const inputElement = event.target;
|
|
45
|
-
const value = Number.parseInt(inputElement.value, 10);
|
|
46
|
-
this.lastFocusedHandle = 'min';
|
|
47
|
-
if (value <= this.endValue) {
|
|
48
|
-
this.startValue = value;
|
|
49
|
-
this.emitUpdate();
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
this.startValue = this.endValue;
|
|
53
|
-
inputElement.value = `${this.endValue}`;
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
handleEndValueChange = (event) => {
|
|
57
|
-
const inputElement = event.target;
|
|
58
|
-
const value = Number.parseInt(inputElement.value, 10);
|
|
59
|
-
this.lastFocusedHandle = 'max';
|
|
60
|
-
if (value >= this.startValue) {
|
|
61
|
-
this.endValue = value;
|
|
62
|
-
this.emitUpdate();
|
|
63
|
-
}
|
|
64
|
-
else {
|
|
65
|
-
this.endValue = this.startValue;
|
|
66
|
-
inputElement.value = `${this.startValue}`;
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
render() {
|
|
70
|
-
const rangeMin = this.min;
|
|
71
|
-
const rangeMax = this.max;
|
|
72
|
-
const startPercent = ((this.startValue - rangeMin) / (rangeMax - rangeMin)) * 100;
|
|
73
|
-
const endPercent = ((this.endValue - rangeMin) / (rangeMax - rangeMin)) * 100;
|
|
74
|
-
const startLabel = this.dataType === 'number'
|
|
75
|
-
? this.startValue
|
|
76
|
-
: new Date(this.startValue).getFullYear();
|
|
77
|
-
const endLabel = this.dataType === 'number'
|
|
78
|
-
? this.endValue
|
|
79
|
-
: new Date(this.endValue).getFullYear();
|
|
80
|
-
return (h("div", { key: '9225b18ce2f40246837d183fcefdd0be7cc22383', class: 'searchcraft-slider' }, h("div", { key: '8078c1eda2ceb781282f59216915896fdbe2a8d3', class: 'searchcraft-slider-range' }, h("div", { key: '6a6bafa9f7abf41ab24f020cd291a4a08c618afb', class: 'searchcraft-slider-active-range', style: {
|
|
81
|
-
left: `${startPercent}%`,
|
|
82
|
-
width: `${endPercent - startPercent}%`,
|
|
83
|
-
} }), h("input", { key: 'f07a91d441d277b8e9eba34e39093393a44bbf53', class: classNames('searchcraft-slider-input', 'searchcraft-slider-input-min-handle'), max: this.max, min: this.min, onInput: this.handleStartValueChange.bind(this), step: this.granularity, style: { zIndex: this.lastFocusedHandle === 'min' ? '2' : '1' }, type: 'range', value: this.startValue }), h("input", { key: '0637ea5fe123abe1d77c540b347c78fc8ad3d281', class: classNames('searchcraft-slider-input', 'searchcraft-slider-input-max-handle'), max: this.max, min: this.min, onInput: this.handleEndValueChange.bind(this), step: this.granularity, style: { zIndex: this.lastFocusedHandle === 'max' ? '2' : '1' }, type: 'range', value: this.endValue })), h("div", { key: 'b62f8d8485915dddefb7ca29f62b4a96d70470c5', class: 'searchcraft-slider-label' }, h("span", { key: 'fd5d32172ce53d93b858ca54c17b12b80fcdde1d', class: 'searchcraft-slider-start-label' }, startLabel), h("span", { key: '8f4d230b78fb8d896a469f17ade3a3fd3162b427', class: 'searchcraft-slider-end-label' }, endLabel))));
|
|
84
|
-
}
|
|
85
|
-
}, [0, "searchcraft-slider", {
|
|
86
|
-
"max": [2],
|
|
87
|
-
"min": [2],
|
|
88
|
-
"granularity": [2],
|
|
89
|
-
"dataType": [1, "data-type"],
|
|
90
|
-
"endValue": [32],
|
|
91
|
-
"startValue": [32],
|
|
92
|
-
"lastFocusedHandle": [32]
|
|
93
|
-
}]);
|
|
94
|
-
function defineCustomElement() {
|
|
95
|
-
if (typeof customElements === "undefined") {
|
|
96
|
-
return;
|
|
97
|
-
}
|
|
98
|
-
const components = ["searchcraft-slider"];
|
|
99
|
-
components.forEach(tagName => { switch (tagName) {
|
|
100
|
-
case "searchcraft-slider":
|
|
101
|
-
if (!customElements.get(tagName)) {
|
|
102
|
-
customElements.define(tagName, SearchcraftSlider);
|
|
103
|
-
}
|
|
104
|
-
break;
|
|
105
|
-
} });
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
export { SearchcraftSlider as S, defineCustomElement as d };
|
|
109
|
-
|
|
110
|
-
//# sourceMappingURL=p-7c650118.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-7c650118.js","mappings":"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","names":[],"sources":["src/components/searchcraft-slider/searchcraft-slider.tsx"],"sourcesContent":["import {\n Component,\n Event,\n type EventEmitter,\n h,\n State,\n Prop,\n} from '@stencil/core';\nimport { getMillis } from '@utils';\nimport classNames from 'classnames';\n\n/**\n * This web component is designed to allow users to select a value from a range defined by a minimum and maximum value. The component renders a slider interface, which can be used to visually choose a value between two boundaries.\n *\n * @internal\n */\n@Component({\n tag: 'searchcraft-slider',\n shadow: false,\n})\nexport class SearchcraftSlider {\n /**\n * The maximum value allowed.\n */\n @Prop() max = 100;\n /**\n * The minimum value allowed.\n */\n @Prop() min = 0;\n /**\n * The granularity that the value must adhere to.\n */\n @Prop() granularity: number = getMillis('month');\n /** The type of data allowed. */\n @Prop() dataType: 'number' | 'date' = 'number';\n\n @State() endValue = this.max;\n @State() startValue = this.min;\n @State() lastFocusedHandle: 'min' | 'max' = 'max';\n\n /**\n * When the range has changed.\n * */\n @Event() rangeChanged:\n | EventEmitter<{ startValue: number; endValue: number }>\n | undefined;\n\n componentDidLoad() {\n this.startValue = this.min;\n this.endValue = this.max;\n }\n\n private emitUpdate = async () => {\n this.rangeChanged?.emit({\n startValue: this.startValue,\n endValue: this.endValue,\n });\n };\n\n private handleStartValueChange = (event: InputEvent) => {\n const inputElement = event.target as HTMLInputElement;\n const value = Number.parseInt(inputElement.value, 10);\n this.lastFocusedHandle = 'min';\n if (value <= this.endValue) {\n this.startValue = value;\n this.emitUpdate();\n } else {\n this.startValue = this.endValue;\n inputElement.value = `${this.endValue}`;\n }\n };\n\n private handleEndValueChange = (event: InputEvent) => {\n const inputElement = event.target as HTMLInputElement;\n const value = Number.parseInt(inputElement.value, 10);\n this.lastFocusedHandle = 'max';\n if (value >= this.startValue) {\n this.endValue = value;\n this.emitUpdate();\n } else {\n this.endValue = this.startValue;\n inputElement.value = `${this.startValue}`;\n }\n };\n\n render() {\n const rangeMin = this.min;\n const rangeMax = this.max;\n const startPercent =\n ((this.startValue - rangeMin) / (rangeMax - rangeMin)) * 100;\n const endPercent =\n ((this.endValue - rangeMin) / (rangeMax - rangeMin)) * 100;\n\n const startLabel =\n this.dataType === 'number'\n ? this.startValue\n : new Date(this.startValue).getFullYear();\n\n const endLabel =\n this.dataType === 'number'\n ? this.endValue\n : new Date(this.endValue).getFullYear();\n\n return (\n <div class='searchcraft-slider'>\n <div class='searchcraft-slider-range'>\n <div\n class='searchcraft-slider-active-range'\n style={{\n left: `${startPercent}%`,\n width: `${endPercent - startPercent}%`,\n }}\n />\n <input\n class={classNames(\n 'searchcraft-slider-input',\n 'searchcraft-slider-input-min-handle',\n )}\n max={this.max}\n min={this.min}\n onInput={this.handleStartValueChange.bind(this)}\n step={this.granularity}\n style={{ zIndex: this.lastFocusedHandle === 'min' ? '2' : '1' }}\n type='range'\n value={this.startValue}\n />\n <input\n class={classNames(\n 'searchcraft-slider-input',\n 'searchcraft-slider-input-max-handle',\n )}\n max={this.max}\n min={this.min}\n onInput={this.handleEndValueChange.bind(this)}\n step={this.granularity}\n style={{ zIndex: this.lastFocusedHandle === 'max' ? '2' : '1' }}\n type='range'\n value={this.endValue}\n />\n </div>\n <div class='searchcraft-slider-label'>\n <span class='searchcraft-slider-start-label'>{startLabel}</span>\n <span class='searchcraft-slider-end-label'>{endLabel}</span>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|