@searchcraft/javascript-sdk 0.10.1 → 0.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/components/index.d.ts +123 -80
  2. package/dist/components/index.js +7 -33
  3. package/dist/components/index.js.map +1 -1
  4. package/dist/components/{p-84e2cbd6.js → p-01589c0b.js} +3 -3
  5. package/dist/components/{p-84e2cbd6.js.map → p-01589c0b.js.map} +1 -1
  6. package/dist/components/{p-5d17ace0.js → p-0f5b47be.js} +7 -7
  7. package/dist/components/{p-5d17ace0.js.map → p-0f5b47be.js.map} +1 -1
  8. package/dist/components/{p-0077f677.js → p-2999498a.js} +34 -22
  9. package/dist/components/p-2999498a.js.map +1 -0
  10. package/dist/components/{p-17c646e2.js → p-3465cbc7.js} +548 -474
  11. package/dist/components/p-3465cbc7.js.map +1 -0
  12. package/dist/components/{p-13e81b5d.js → p-435bec83.js} +2 -2
  13. package/dist/components/{p-13e81b5d.js.map → p-435bec83.js.map} +1 -1
  14. package/dist/components/{p-172a848d.js → p-48fa555e.js} +7 -7
  15. package/dist/components/{p-172a848d.js.map → p-48fa555e.js.map} +1 -1
  16. package/dist/components/p-4d37616e.js +105 -0
  17. package/dist/components/p-4d37616e.js.map +1 -0
  18. package/dist/components/{p-3e65aa91.js → p-66109c31.js} +3 -8
  19. package/dist/components/p-66109c31.js.map +1 -0
  20. package/dist/components/{p-2be1a382.js → p-760c6845.js} +2 -2
  21. package/dist/components/{p-2be1a382.js.map → p-760c6845.js.map} +1 -1
  22. package/dist/components/{p-868803f9.js → p-7c650118.js} +2 -2
  23. package/dist/components/{p-868803f9.js.map → p-7c650118.js.map} +1 -1
  24. package/dist/components/{p-a62a2e74.js → p-c1f43fe1.js} +4 -4
  25. package/dist/components/{p-a62a2e74.js.map → p-c1f43fe1.js.map} +1 -1
  26. package/dist/components/searchcraft-ad.js +1 -1
  27. package/dist/components/searchcraft-facet-list.js +1 -1
  28. package/dist/components/searchcraft-filter-panel.js +5 -5
  29. package/dist/components/searchcraft-input-form.js +1 -1
  30. package/dist/components/searchcraft-pagination.js +1 -1
  31. package/dist/components/searchcraft-popover-button.js +5 -3
  32. package/dist/components/searchcraft-popover-button.js.map +1 -1
  33. package/dist/components/searchcraft-popover-footer.js +1 -1
  34. package/dist/components/searchcraft-popover-form.js +8 -8
  35. package/dist/components/searchcraft-popover-form.js.map +1 -1
  36. package/dist/components/searchcraft-popover-list-item.js +1 -1
  37. package/dist/components/searchcraft-popover-list-view.js +1 -1
  38. package/dist/components/searchcraft-results-info.js +2 -2
  39. package/dist/components/searchcraft-search-result.js +1 -1
  40. package/dist/components/searchcraft-search-results-per-page.js +1 -1
  41. package/dist/components/searchcraft-search-results.js +69 -32
  42. package/dist/components/searchcraft-search-results.js.map +1 -1
  43. package/dist/components/searchcraft-slider.js +1 -1
  44. package/dist/components/searchcraft-theme.js +1 -1
  45. package/dist/components/searchcraft-theme.js.map +1 -1
  46. package/dist/components/searchcraft-toggle-button.js +1 -1
  47. package/dist/hydrate/index.js +484 -388
  48. package/dist/hydrate/index.mjs +484 -388
  49. package/dist/themes/hologram.css +1 -1
  50. package/dist/themes/hologram.css.map +1 -1
  51. package/dist/types/components/searchcraft-input-form/searchcraft-input-form.d.ts +7 -3
  52. package/dist/types/components/searchcraft-popover-button/searchcraft-popover-button.d.ts +3 -3
  53. package/dist/types/components/searchcraft-search-results/searchcraft-search-results.d.ts +10 -5
  54. package/dist/types/components.d.ts +20 -12
  55. package/dist/types/index.d.ts +0 -1
  56. package/dist/types/store/SearchcraftStore.types.d.ts +15 -6
  57. package/dist/types/utils/index.d.ts +0 -1
  58. package/dist/types/utils/units.d.ts +19 -6
  59. package/package.json +4 -7
  60. package/dist/components/p-0077f677.js.map +0 -1
  61. package/dist/components/p-17c646e2.js.map +0 -1
  62. package/dist/components/p-3e65aa91.js.map +0 -1
  63. package/dist/components/p-6104fe5d.js +0 -84
  64. package/dist/components/p-6104fe5d.js.map +0 -1
  65. package/dist/types/utils/styles.d.ts +0 -3
package/dist/components/{p-0077f677.js → p-2999498a.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-5365011f.js';
2
2
  import { c as classNames } from './p-5cdc6210.js';
3
- import { s as searchcraftStore } from './p-17c646e2.js';
3
+ import { s as searchcraftStore } from './p-3465cbc7.js';
4
4
  import { d as defineCustomElement$3 } from './p-acf23bab.js';
5
5
  import { d as defineCustomElement$2 } from './p-f2585cdf.js';
6
6
  import { d as defineCustomElement$1 } from './p-1adf78b9.js';
@@ -49,20 +49,31 @@ const SearchcraftInputForm = /*@__PURE__*/ proxyCustomElement(class SearchcraftI
49
49
  searchTerm = '';
50
50
  error = false;
51
51
  core;
52
- searchStore = searchcraftStore.getState();
52
+ searchcraftStore = searchcraftStore.getState();
53
+ unsubscribe = () => { };
53
54
  init() {
54
55
  if (this.core) {
55
- this.searchStore.initialize(this.core);
56
+ this.searchcraftStore.init(this.core);
56
57
  this.inputInit?.emit();
57
58
  }
58
59
  }
59
- connectedCallback() {
60
+ onCoreChange() {
60
61
  this.init();
61
62
  }
62
- onCoreChange() {
63
+ connectedCallback() {
63
64
  this.init();
64
65
  }
65
- handleOnInput = (event) => {
66
+ componentDidLoad() {
67
+ this.unsubscribe = searchcraftStore.subscribe((state) => {
68
+ this.searchTerm = state.searchTerm;
69
+ this.inputValue = state.searchTerm;
70
+ });
71
+ }
72
+ disconnectedCallback() {
73
+ this.handleReset();
74
+ this.unsubscribe?.();
75
+ }
76
+ handleInput = (event) => {
66
77
  const input = event.target;
67
78
  this.inputValue = input.value;
68
79
  if (!this.autoSearch) {
@@ -70,31 +81,32 @@ const SearchcraftInputForm = /*@__PURE__*/ proxyCustomElement(class SearchcraftI
70
81
  }
71
82
  this.performSearch(input.value);
72
83
  };
73
- performSearch = async (value) => {
74
- if (value === searchcraftStore.getState().searchTerm) {
84
+ performSearch = async (searchTerm) => {
85
+ if (searchTerm === this.searchTerm) {
75
86
  return;
76
87
  }
77
- this.searchTerm = value.trim();
88
+ this.searchcraftStore.setSearchTerm(searchTerm.trim());
78
89
  this.error = false;
79
- this.searchStore.setSearchTerm(this.searchTerm);
80
90
  try {
81
- await this.searchStore.search();
91
+ await this.searchcraftStore.search();
82
92
  }
83
93
  catch (error) {
84
- console.log(error);
94
+ console.error(`Search for ${searchTerm} failed:`, error);
85
95
  this.error = true;
86
96
  }
87
97
  };
88
- handleClearInput = () => {
89
- this.inputValue = '';
90
- this.searchTerm = '';
91
- this.searchStore.setSearchTerm('');
92
- this.searchStore.setSearchClientResponseItems([]);
98
+ handleReset = () => {
99
+ this.searchcraftStore.setSearchResultsCount(0);
100
+ this.searchcraftStore.setSearchTerm('');
101
+ this.searchcraftStore.setSearchClientResponseItems([]);
93
102
  this.error = false;
94
103
  };
104
+ handleClearInput = () => {
105
+ this.handleReset();
106
+ };
95
107
  handleFormSubmit = async (event) => {
96
108
  event.preventDefault();
97
- await this.performSearch(this.searchTerm);
109
+ await this.performSearch(this.inputValue);
98
110
  };
99
111
  render() {
100
112
  const isShowingClearButton = this.inputValue.length > 0;
@@ -107,9 +119,9 @@ const SearchcraftInputForm = /*@__PURE__*/ proxyCustomElement(class SearchcraftI
107
119
  const inputGridStyles = {
108
120
  gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',
109
121
  };
110
- return (h("form", { key: '488789f41d06780cf1cb3ab55013995fd16985bc', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: 'abde33425daaa82f068d7bb31fca8f94d55b79e5', class: inputGridClassNames, style: inputGridStyles }, h("div", { key: 'd2ee4a97e3384550160e3d77c73167e725b78910', class: 'searchcraft-input-form-button' }, h("searchcraft-button", { key: '6ca8bffa156a032dbddce0728f682f7e713b00b3', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (h("div", { key: '760f54d2ca7401fdd3151f0baa65163ba447aad4', class: 'searchcraft-input-form-label' }, h("searchcraft-input-label", { key: '9b1e1fcc8559ba7417edc23cd495c27c44e9d394', label: this.inputLabel }))), this.error && (h("div", { key: 'e2ba421228fe3daa1b60b3bda963be7b8fe5e2dd', class: 'searchcraft-input-form-error-message' }, h("searchcraft-error-message", { key: '07655cb3197b9bd20fe6feb610a58b5679a82c33' }, "Something went wrong."))), h("div", { key: '93c20245f8f1bcb1656e88d7c26644ab41dd5000', class: 'searchcraft-input-form-input-wrapper' }, h("input", { key: '2a3748be8434ac01ebae9907e0a762e868d5d10f', autoComplete: 'off', class: 'searchcraft-input-form-input', onFocus: () => this.inputFocus?.emit(), onBlur: () => this.inputBlur?.emit(), onInput: (event) => {
111
- this.handleOnInput(event);
112
- }, placeholder: this.placeholderValue, type: 'text', value: this.inputValue }), h("div", { key: 'c9eb1230b10d3bb91ffe0e43481ac3d1a1362b29', class: 'searchcraft-input-form-input-icon' }, h("svg", { key: '68b3d2c336cc99faacb28e0a98cd93f88f9df13b', class: 'searchcraft-input-form-input-search-icon', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { key: 'da56c06e543f45c59ef0f5922bd7d61fef448630' }, "Search icon"), h("path", { key: 'ae0bcf6b95f861155cf0023d72a33f6d437b67dd', 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', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), isShowingClearButton && (h("button", { key: '5663606a70f3c4afd44406e6e550dc44573c5421', type: 'button', class: 'searchcraft-input-form-clear-button', onClick: this.handleClearInput }, h("svg", { key: '15f316ed61153f1054e3c5ac6dffca48b702ac81', class: 'searchcraft-input-form-clear-icon', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { key: '3e93ab9c95db6a7c012a9b25875aa78f33984ce6' }, "Clear icon"), h("path", { key: 'b31b09b4a928e113720a13e9826e1d462c4e65bd', 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', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))))));
122
+ return (h("form", { key: '6af89b2ab634e0f3e0ef575f98f33d091602f95a', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: '93fea8e2b80468afeb6014122d5b749d74bfaf35', class: inputGridClassNames, style: inputGridStyles }, h("div", { key: '1e5a416843b99aec68c4672a9c78f607347dc9d1', class: 'searchcraft-input-form-button' }, h("searchcraft-button", { key: 'c38c1df0ce20f914ed76fbc0acad5a22b40e6fff', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (h("div", { key: '2169a4466b0fdc8075c0dc74da442aef28a84d65', class: 'searchcraft-input-form-label' }, h("searchcraft-input-label", { key: 'a263b5aa2a4d50d297f06c1fe9e6afb64763f097', label: this.inputLabel }))), this.error && (h("div", { key: '49be2ac0f2d01916e5ea533e6406ee9d4d932178', class: 'searchcraft-input-form-error-message' }, h("searchcraft-error-message", { key: '310c9aebcf580d4abe92d288c6b70a5adf083f8e' }, "Something went wrong."))), h("div", { key: 'f4702e368815e049586e97cf59541b2dc5460fc0', class: 'searchcraft-input-form-input-wrapper' }, h("input", { key: 'a8cddd5e937eee1d30fb98eaaa3dbffe96c192ce', autoComplete: 'off', class: 'searchcraft-input-form-input', onFocus: () => this.inputFocus?.emit(), onBlur: () => this.inputBlur?.emit(), onInput: (event) => {
123
+ this.handleInput(event);
124
+ }, placeholder: this.placeholderValue, type: 'text', value: this.inputValue }), h("div", { key: '616b4dde1ba016cf6a2fba8594a99a3a3f584ef5', class: 'searchcraft-input-form-input-icon' }, h("svg", { key: 'daaef561677a06a76813375e429be7e053b8b122', class: 'searchcraft-input-form-input-search-icon', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { key: 'e6d82ca64dd9bfc663813c239d11e5652aa0b9a1' }, "Search icon"), h("path", { key: '1df856c98c2063c1d0c80027255935f73b513939', 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', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), isShowingClearButton && (h("button", { key: '8dd6dfefe0ba909657bd436b559ce35b5004f9ae', type: 'button', class: 'searchcraft-input-form-clear-button', onClick: this.handleClearInput }, h("svg", { key: 'bcdba04d5c0949cacc8e1962d2b3cd40ad995de6', class: 'searchcraft-input-form-clear-icon', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { key: 'e01e7fb9b23daf9434520c4c68c0d7539b37d1f8' }, "Clear icon"), h("path", { key: 'ce526d332b6e352cd9cf6008ee2f7497c6769782', 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', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))))));
113
125
  }
114
126
  static get watchers() { return {
115
127
  "core": ["onCoreChange"]
@@ -158,4 +170,4 @@ function defineCustomElement() {
158
170
 
159
171
  export { SearchcraftInputForm as S, defineCustomElement as d };
160
172
 
161
- //# sourceMappingURL=p-0077f677.js.map
173
+ //# sourceMappingURL=p-2999498a.js.map
package/dist/components/p-2999498a.js.map ADDED
@@ -0,0 +1 @@
1
+ {"file":"p-2999498a.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}