@mmlogic/components 0.3.5 → 0.3.6

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 (169) hide show
  1. package/dist/{collection/utils/cell-renderer.js → mosterdcomponents/cell-renderer-CbRwLOo8.js} +9 -3
  2. package/dist/mosterdcomponents/cell-renderer-CbRwLOo8.js.map +1 -0
  3. package/dist/{esm/index.js → mosterdcomponents/client-layout-D88nn5zf.js} +4 -1
  4. package/dist/mosterdcomponents/client-layout-D88nn5zf.js.map +1 -0
  5. package/dist/{collection/utils/format.js → mosterdcomponents/format-BAfsQfy1.js} +12 -7
  6. package/dist/mosterdcomponents/format-BAfsQfy1.js.map +1 -0
  7. package/dist/{collection/utils/i18n.js → mosterdcomponents/i18n-hoGGKbKU.js} +6 -1
  8. package/dist/mosterdcomponents/i18n-hoGGKbKU.js.map +1 -0
  9. package/dist/mosterdcomponents/index-B_tPFIvS.js +4585 -0
  10. package/dist/mosterdcomponents/index-B_tPFIvS.js.map +1 -0
  11. package/dist/mosterdcomponents/index-I5SuYv7a.js +4 -0
  12. package/dist/mosterdcomponents/index-I5SuYv7a.js.map +1 -0
  13. package/dist/mosterdcomponents/index.esm.js +5 -1
  14. package/dist/mosterdcomponents/index.esm.js.map +1 -0
  15. package/dist/mosterdcomponents/mosterdcomponents.css +180 -1
  16. package/dist/mosterdcomponents/mosterdcomponents.esm.js +50 -1
  17. package/dist/mosterdcomponents/mosterdcomponents.esm.js.map +1 -0
  18. package/dist/mosterdcomponents/mrd-boolean-field.entry.js +37 -0
  19. package/dist/mosterdcomponents/mrd-boolean-field.entry.js.map +1 -0
  20. package/dist/mosterdcomponents/mrd-currency-field.entry.js +67 -0
  21. package/dist/mosterdcomponents/mrd-currency-field.entry.js.map +1 -0
  22. package/dist/mosterdcomponents/mrd-date-field.entry.js +46 -0
  23. package/dist/mosterdcomponents/mrd-date-field.entry.js.map +1 -0
  24. package/dist/mosterdcomponents/mrd-datetime-field.entry.js +78 -0
  25. package/dist/mosterdcomponents/mrd-datetime-field.entry.js.map +1 -0
  26. package/dist/mosterdcomponents/mrd-email-field.entry.js +50 -0
  27. package/dist/mosterdcomponents/mrd-email-field.entry.js.map +1 -0
  28. package/dist/{collection/components/mrd-field/mrd-field.js → mosterdcomponents/mrd-field.entry.js} +28 -179
  29. package/dist/mosterdcomponents/mrd-field.entry.js.map +1 -0
  30. package/dist/mosterdcomponents/mrd-file-field.entry.js +108 -0
  31. package/dist/mosterdcomponents/mrd-file-field.entry.js.map +1 -0
  32. package/dist/{collection/components/mrd-form/mrd-form.js → mosterdcomponents/mrd-form.entry.js} +31 -308
  33. package/dist/mosterdcomponents/mrd-form.entry.js.map +1 -0
  34. package/dist/mosterdcomponents/mrd-hyperlink-field.entry.js +87 -0
  35. package/dist/mosterdcomponents/mrd-hyperlink-field.entry.js.map +1 -0
  36. package/dist/mosterdcomponents/mrd-image-field.entry.js +122 -0
  37. package/dist/mosterdcomponents/mrd-image-field.entry.js.map +1 -0
  38. package/dist/{collection/components/mrd-layout-section/mrd-layout-section.js → mosterdcomponents/mrd-layout-section.entry.js} +31 -418
  39. package/dist/mosterdcomponents/mrd-layout-section.entry.js.map +1 -0
  40. package/dist/mosterdcomponents/mrd-list-field.entry.js +107 -0
  41. package/dist/mosterdcomponents/mrd-list-field.entry.js.map +1 -0
  42. package/dist/mosterdcomponents/mrd-longtext-field.entry.js +47 -0
  43. package/dist/mosterdcomponents/mrd-longtext-field.entry.js.map +1 -0
  44. package/dist/mosterdcomponents/mrd-number-field.entry.js +87 -0
  45. package/dist/mosterdcomponents/mrd-number-field.entry.js.map +1 -0
  46. package/dist/mosterdcomponents/mrd-relation-field.entry.js +267 -0
  47. package/dist/mosterdcomponents/mrd-relation-field.entry.js.map +1 -0
  48. package/dist/mosterdcomponents/mrd-secret-field.entry.js +49 -0
  49. package/dist/mosterdcomponents/mrd-secret-field.entry.js.map +1 -0
  50. package/dist/{collection/components/mrd-table/mrd-table.js → mosterdcomponents/mrd-table.entry.js} +32 -394
  51. package/dist/mosterdcomponents/mrd-table.entry.js.map +1 -0
  52. package/dist/mosterdcomponents/mrd-text-field.entry.js +47 -0
  53. package/dist/mosterdcomponents/mrd-text-field.entry.js.map +1 -0
  54. package/dist/mosterdcomponents/mrd-textarea-field.entry.js +86 -0
  55. package/dist/mosterdcomponents/mrd-textarea-field.entry.js.map +1 -0
  56. package/dist/mosterdcomponents/mrd-time-field.entry.js +46 -0
  57. package/dist/mosterdcomponents/mrd-time-field.entry.js.map +1 -0
  58. package/dist/{esm/quill-CiuCgGz_.js → mosterdcomponents/quill-C9pgw_k-.js} +16282 -1397
  59. package/dist/mosterdcomponents/quill-C9pgw_k-.js.map +1 -0
  60. package/dist/{collection/utils/validation.js → mosterdcomponents/validation-ixb43cqU.js} +12 -5
  61. package/dist/mosterdcomponents/validation-ixb43cqU.js.map +1 -0
  62. package/package.json +1 -1
  63. package/dist/cjs/app-globals-V2Kpy_OQ.js +0 -5
  64. package/dist/cjs/index-BPj2cBXs.js +0 -1570
  65. package/dist/cjs/index.cjs.js +0 -66
  66. package/dist/cjs/loader.cjs.js +0 -13
  67. package/dist/cjs/mosterdcomponents.cjs.js +0 -25
  68. package/dist/cjs/mrd-boolean-field_20.cjs.entry.js +0 -3961
  69. package/dist/cjs/quill-DmFfnC1f.js +0 -16272
  70. package/dist/collection/collection-manifest.json +0 -32
  71. package/dist/collection/components/mrd-boolean-field/mrd-boolean-field.js +0 -199
  72. package/dist/collection/components/mrd-boolean-field/mrd-boolean-field.scss +0 -77
  73. package/dist/collection/components/mrd-currency-field/mrd-currency-field.js +0 -248
  74. package/dist/collection/components/mrd-currency-field/mrd-currency-field.scss +0 -100
  75. package/dist/collection/components/mrd-date-field/mrd-date-field.js +0 -206
  76. package/dist/collection/components/mrd-date-field/mrd-date-field.scss +0 -66
  77. package/dist/collection/components/mrd-datetime-field/mrd-datetime-field.js +0 -240
  78. package/dist/collection/components/mrd-datetime-field/mrd-datetime-field.scss +0 -66
  79. package/dist/collection/components/mrd-email-field/mrd-email-field.js +0 -230
  80. package/dist/collection/components/mrd-email-field/mrd-email-field.scss +0 -69
  81. package/dist/collection/components/mrd-field/mrd-field.scss +0 -118
  82. package/dist/collection/components/mrd-file-field/mrd-file-field.js +0 -341
  83. package/dist/collection/components/mrd-file-field/mrd-file-field.scss +0 -153
  84. package/dist/collection/components/mrd-form/mrd-form.scss +0 -148
  85. package/dist/collection/components/mrd-hyperlink-field/mrd-hyperlink-field.js +0 -291
  86. package/dist/collection/components/mrd-hyperlink-field/mrd-hyperlink-field.scss +0 -91
  87. package/dist/collection/components/mrd-image-field/mrd-image-field.js +0 -356
  88. package/dist/collection/components/mrd-image-field/mrd-image-field.scss +0 -190
  89. package/dist/collection/components/mrd-layout-section/mrd-layout-section.scss +0 -445
  90. package/dist/collection/components/mrd-list-field/mrd-list-field.js +0 -313
  91. package/dist/collection/components/mrd-list-field/mrd-list-field.scss +0 -109
  92. package/dist/collection/components/mrd-longtext-field/mrd-longtext-field.js +0 -227
  93. package/dist/collection/components/mrd-longtext-field/mrd-longtext-field.scss +0 -78
  94. package/dist/collection/components/mrd-number-field/mrd-number-field.js +0 -316
  95. package/dist/collection/components/mrd-number-field/mrd-number-field.scss +0 -77
  96. package/dist/collection/components/mrd-relation-field/mrd-relation-field.js +0 -707
  97. package/dist/collection/components/mrd-relation-field/mrd-relation-field.scss +0 -266
  98. package/dist/collection/components/mrd-secret-field/mrd-secret-field.js +0 -229
  99. package/dist/collection/components/mrd-secret-field/mrd-secret-field.scss +0 -73
  100. package/dist/collection/components/mrd-table/mrd-table.scss +0 -809
  101. package/dist/collection/components/mrd-text-field/mrd-text-field.js +0 -227
  102. package/dist/collection/components/mrd-text-field/mrd-text-field.scss +0 -69
  103. package/dist/collection/components/mrd-textarea-field/mrd-textarea-field.js +0 -267
  104. package/dist/collection/components/mrd-textarea-field/mrd-textarea-field.scss +0 -135
  105. package/dist/collection/components/mrd-time-field/mrd-time-field.js +0 -206
  106. package/dist/collection/components/mrd-time-field/mrd-time-field.scss +0 -66
  107. package/dist/collection/dev/api.js +0 -145
  108. package/dist/collection/dev/app.js +0 -890
  109. package/dist/collection/dev/auth.js +0 -156
  110. package/dist/collection/dev/example-data.js +0 -403
  111. package/dist/collection/dev/sprites.svg +0 -55
  112. package/dist/collection/index.js +0 -1
  113. package/dist/collection/types/client-layout.js +0 -64
  114. package/dist/collection/types/index.js +0 -1
  115. package/dist/components/client-layout.js +0 -1
  116. package/dist/components/format.js +0 -1
  117. package/dist/components/i18n.js +0 -1
  118. package/dist/components/index.js +0 -1
  119. package/dist/components/mrd-boolean-field.js +0 -1
  120. package/dist/components/mrd-boolean-field2.js +0 -1
  121. package/dist/components/mrd-currency-field.js +0 -1
  122. package/dist/components/mrd-currency-field2.js +0 -1
  123. package/dist/components/mrd-date-field.js +0 -1
  124. package/dist/components/mrd-date-field2.js +0 -1
  125. package/dist/components/mrd-datetime-field.js +0 -1
  126. package/dist/components/mrd-datetime-field2.js +0 -1
  127. package/dist/components/mrd-email-field.js +0 -1
  128. package/dist/components/mrd-email-field2.js +0 -1
  129. package/dist/components/mrd-field.js +0 -1
  130. package/dist/components/mrd-field2.js +0 -1
  131. package/dist/components/mrd-file-field.js +0 -1
  132. package/dist/components/mrd-file-field2.js +0 -1
  133. package/dist/components/mrd-form.js +0 -1
  134. package/dist/components/mrd-hyperlink-field.js +0 -1
  135. package/dist/components/mrd-hyperlink-field2.js +0 -1
  136. package/dist/components/mrd-image-field.js +0 -1
  137. package/dist/components/mrd-image-field2.js +0 -1
  138. package/dist/components/mrd-layout-section.js +0 -1
  139. package/dist/components/mrd-list-field.js +0 -1
  140. package/dist/components/mrd-list-field2.js +0 -1
  141. package/dist/components/mrd-longtext-field.js +0 -1
  142. package/dist/components/mrd-longtext-field2.js +0 -1
  143. package/dist/components/mrd-number-field.js +0 -1
  144. package/dist/components/mrd-number-field2.js +0 -1
  145. package/dist/components/mrd-relation-field.js +0 -1
  146. package/dist/components/mrd-relation-field2.js +0 -1
  147. package/dist/components/mrd-secret-field.js +0 -1
  148. package/dist/components/mrd-secret-field2.js +0 -1
  149. package/dist/components/mrd-table.js +0 -1
  150. package/dist/components/mrd-table2.js +0 -1
  151. package/dist/components/mrd-text-field.js +0 -1
  152. package/dist/components/mrd-text-field2.js +0 -1
  153. package/dist/components/mrd-textarea-field.js +0 -1
  154. package/dist/components/mrd-textarea-field2.js +0 -1
  155. package/dist/components/mrd-time-field.js +0 -1
  156. package/dist/components/mrd-time-field2.js +0 -1
  157. package/dist/components/quill.js +0 -1
  158. package/dist/components/validation.js +0 -1
  159. package/dist/esm/app-globals-DQuL1Twl.js +0 -3
  160. package/dist/esm/index-_tsCCkAi.js +0 -1561
  161. package/dist/esm/loader.js +0 -11
  162. package/dist/esm/mosterdcomponents.js +0 -21
  163. package/dist/esm/mrd-boolean-field_20.entry.js +0 -3940
  164. package/dist/index.cjs.js +0 -1
  165. package/dist/index.js +0 -1
  166. package/dist/mosterdcomponents/p-CiuCgGz_.js +0 -1
  167. package/dist/mosterdcomponents/p-DQuL1Twl.js +0 -1
  168. package/dist/mosterdcomponents/p-_tsCCkAi.js +0 -2
  169. package/dist/mosterdcomponents/p-e477187c.entry.js +0 -1
@@ -1,707 +0,0 @@
1
- import { Host, h } from "@stencil/core";
2
- import { t } from "../../utils/i18n";
3
- import { validateRequired } from "../../utils/validation";
4
- import { ClientLayoutItemRelationDisplayType, ClientLayoutItemRelationEditBehavior } from "../../types";
5
- export class MrdRelationField {
6
- constructor() {
7
- this.name = '';
8
- this.label = '';
9
- this.required = false;
10
- this.disabled = false;
11
- this.locale = navigator.language;
12
- this.relatedClass = '';
13
- /** When set, used instead of relatedClass for search queries (mostSignificantClass from API). */
14
- this.mostSignificantClass = '';
15
- this.displayType = ClientLayoutItemRelationDisplayType.SEARCH;
16
- this.multiple = false;
17
- this.dropdownValues = [];
18
- /** Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record. */
19
- this.value = null;
20
- this.searchQuery = '';
21
- this.searchResults = [];
22
- this.allRecords = [];
23
- this.isLoading = false;
24
- this.selectedItems = [];
25
- this.showResults = false;
26
- this.error = '';
27
- this.highlightedIndex = -1;
28
- this.searchDebounce = null;
29
- this.handleKeyDown = (e) => {
30
- if (!this.showResults || this.searchResults.length === 0) {
31
- if (e.key === 'Escape') {
32
- this.showResults = false;
33
- this.highlightedIndex = -1;
34
- }
35
- return;
36
- }
37
- if (e.key === 'ArrowDown') {
38
- e.preventDefault();
39
- this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.searchResults.length - 1);
40
- }
41
- else if (e.key === 'ArrowUp') {
42
- e.preventDefault();
43
- this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
44
- }
45
- else if (e.key === 'Enter') {
46
- e.preventDefault();
47
- if (this.highlightedIndex >= 0) {
48
- this.handleResultSelect(this.searchResults[this.highlightedIndex]);
49
- }
50
- }
51
- else if (e.key === 'Escape') {
52
- this.showResults = false;
53
- this.highlightedIndex = -1;
54
- }
55
- };
56
- this.clearSelection = () => {
57
- this.selectedItems = [];
58
- this.searchQuery = '';
59
- this.searchResults = [];
60
- this.showResults = false;
61
- this.highlightedIndex = -1;
62
- this.mrdChange.emit({ name: this.name, value: this.multiple ? [] : null });
63
- };
64
- this.handleSearchInput = (e) => {
65
- const query = e.target.value;
66
- this.searchQuery = query;
67
- if (this.searchDebounce)
68
- clearTimeout(this.searchDebounce);
69
- if (query.trim().length >= 2) {
70
- this.isLoading = true;
71
- this.showResults = true;
72
- this.searchDebounce = setTimeout(() => {
73
- this.mrdSearch.emit({ name: this.name, query, relatedClass: this.mostSignificantClass });
74
- }, 300);
75
- }
76
- else {
77
- this.searchResults = [];
78
- this.showResults = false;
79
- this.isLoading = false;
80
- }
81
- };
82
- this.handleResultSelect = (result) => {
83
- if (this.multiple) {
84
- if (!this.selectedItems.find(i => i.id === result.id)) {
85
- this.selectedItems = [...this.selectedItems, result];
86
- }
87
- this.searchQuery = '';
88
- this.searchResults = [];
89
- this.showResults = false;
90
- const ids = this.selectedItems.map(i => i.id);
91
- this.mrdChange.emit({ name: this.name, value: ids });
92
- }
93
- else {
94
- this.selectedItems = [result];
95
- this.searchQuery = result.label;
96
- this.showResults = false;
97
- this.mrdChange.emit({ name: this.name, value: result.id });
98
- }
99
- if (this.required && !validateRequired(this.selectedItems)) {
100
- this.error = t('required', this.locale);
101
- }
102
- else {
103
- this.error = '';
104
- }
105
- };
106
- this.handleRemoveSelected = (id) => {
107
- this.selectedItems = this.selectedItems.filter(i => i.id !== id);
108
- const ids = this.selectedItems.map(i => i.id);
109
- this.mrdChange.emit({ name: this.name, value: this.multiple ? ids : null });
110
- };
111
- this.handleDropdownChange = (e) => {
112
- const val = e.target.value;
113
- if (this.required && !validateRequired(val)) {
114
- this.error = t('required', this.locale);
115
- }
116
- else {
117
- this.error = '';
118
- }
119
- this.mrdChange.emit({ name: this.name, value: val });
120
- };
121
- this.handleBlur = () => {
122
- var _a, _b;
123
- setTimeout(() => {
124
- this.showResults = false;
125
- this.highlightedIndex = -1;
126
- }, 200);
127
- const val = this.multiple ? this.selectedItems.map(i => i.id) : ((_b = (_a = this.selectedItems[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
128
- this.mrdBlur.emit({ name: this.name, value: val });
129
- };
130
- }
131
- async setAllRecords(records) {
132
- this.allRecords = records;
133
- }
134
- getValueHref() {
135
- var _a, _b, _c;
136
- const v = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
137
- if (!v)
138
- return '';
139
- if (typeof v === 'object')
140
- return (_c = v.id) !== null && _c !== void 0 ? _c : '';
141
- return v;
142
- }
143
- allRecordsChanged() {
144
- if (this.editBehavior !== ClientLayoutItemRelationEditBehavior.DROPDOWN)
145
- return;
146
- const current = this.getValueHref();
147
- if (!current)
148
- return;
149
- // Defer past Stencil's async render cycle: options must exist in the DOM before
150
- // select.value can be set. setAttribute('selected') alone is ignored by browsers
151
- // when the select already has an established value.
152
- setTimeout(() => {
153
- var _a;
154
- const select = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector('select');
155
- if (select)
156
- select.value = current;
157
- }, 0);
158
- }
159
- async setSearchResults(results) {
160
- this.searchResults = results;
161
- this.isLoading = false;
162
- this.showResults = true;
163
- this.highlightedIndex = -1;
164
- }
165
- async setLoading(loading) {
166
- this.isLoading = loading;
167
- }
168
- toSearchResult(v) {
169
- var _a, _b, _c, _d;
170
- return {
171
- id: (_b = (_a = v.id) !== null && _a !== void 0 ? _a : v.href) !== null && _b !== void 0 ? _b : '',
172
- label: (_d = (_c = v.label) !== null && _c !== void 0 ? _c : v.name) !== null && _d !== void 0 ? _d : '',
173
- description: v.description,
174
- };
175
- }
176
- applyValuePrefill(v) {
177
- if (!v)
178
- return;
179
- if (Array.isArray(v)) {
180
- if (v.length > 0 && typeof v[0] === 'object') {
181
- this.selectedItems = v.map(item => this.toSearchResult(item));
182
- this.searchQuery = '';
183
- }
184
- // array of strings → user interaction, ignore
185
- }
186
- else if (typeof v === 'object') {
187
- const obj = v;
188
- if (Array.isArray(obj.values)) {
189
- // Multiple relation: API embeds selected items in values[]
190
- this.selectedItems = obj.values.map((item) => this.toSearchResult(item));
191
- this.searchQuery = '';
192
- }
193
- else if (!this.multiple && (obj.id || obj.name || obj.label)) {
194
- // Single relation: { href, name } or already { id, label }
195
- const result = this.toSearchResult(obj);
196
- this.selectedItems = [result];
197
- this.searchQuery = result.label;
198
- }
199
- // else: collection href (multiple without values) or unrecognised — skip
200
- }
201
- }
202
- componentWillLoad() {
203
- this.applyValuePrefill(this.value);
204
- }
205
- // Handles edit-mode: values prop on mrd-form is often set async after mount.
206
- // Only updates selectedItems when the new value contains { id, label } objects
207
- // (host pre-fill). Plain href strings from user interaction are ignored.
208
- valueChanged(newValue) {
209
- this.applyValuePrefill(newValue);
210
- }
211
- componentDidLoad() {
212
- // Only emit when there is no commonRelation dependency — the form orchestrates those.
213
- if (this.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN && !this.commonRelation) {
214
- // Defer to next tick so parent event listeners are registered after DOM patching
215
- setTimeout(() => {
216
- this.mrdFetchAll.emit({
217
- name: this.name,
218
- relatedClass: this.relatedClass,
219
- mostSignificantClass: this.mostSignificantClass || undefined,
220
- });
221
- }, 0);
222
- }
223
- }
224
- render() {
225
- var _a, _b;
226
- const hasError = !!this.error;
227
- if (this.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN) {
228
- const currentValue = this.getValueHref();
229
- return (h(Host, null, h("div", { class: "mrd-relation-field" }, this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.allRecords.map(record => (h("option", { key: record.id, value: record.id, selected: record.id === currentValue }, record.label)))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
230
- }
231
- if (this.displayType === ClientLayoutItemRelationDisplayType.DROPDOWN) {
232
- const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
233
- return (h(Host, null, h("div", { class: "mrd-relation-field" }, this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (h("option", { key: dv.key, value: dv.key, selected: dv.key === currentValue }, dv.label)))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
234
- }
235
- // SEARCH mode
236
- const labelEl = this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label));
237
- // Single selection: show selected value as a badge, hide the search input
238
- if (!this.multiple && this.selectedItems.length > 0) {
239
- return (h(Host, null, h("div", { class: "mrd-relation-field" }, labelEl, h("div", { class: `mrd-relation-field__selected-value${hasError ? ' mrd-relation-field__selected-value--error' : ''}` }, h("span", { class: "mrd-relation-field__selected-name" }, this.selectedItems[0].label), h("button", { type: "button", class: "mrd-relation-field__selected-clear", onClick: this.clearSelection, "aria-label": t('remove', this.locale) }, "\u2715")), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
240
- }
241
- return (h(Host, null, h("div", { class: "mrd-relation-field" }, labelEl, this.multiple && this.selectedItems.length > 0 && (h("div", { class: "mrd-relation-field__tags" }, this.selectedItems.map(item => (h("span", { key: item.id, class: "mrd-relation-field__tag" }, item.label, h("button", { type: "button", class: "mrd-relation-field__tag-remove", onClick: () => this.handleRemoveSelected(item.id), "aria-label": t('remove', this.locale) }, "\u2715")))))), h("div", { class: "mrd-relation-field__search-wrapper" }, h("input", { class: `mrd-relation-field__search${hasError ? ' mrd-relation-field__search--error' : ''}`, type: "text", value: this.searchQuery, placeholder: t('search_placeholder', this.locale), disabled: this.disabled, onInput: this.handleSearchInput, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur }), this.isLoading && (h("span", { class: "mrd-relation-field__spinner", "aria-label": t('loading', this.locale) }))), this.showResults && (h("div", { class: "mrd-relation-field__results" }, this.searchResults.length === 0 && !this.isLoading ? (h("div", { class: "mrd-relation-field__no-results" }, t('no_results', this.locale))) : (this.searchResults.map((result, i) => (h("div", { key: result.id, class: `mrd-relation-field__result-item${i === this.highlightedIndex ? ' mrd-relation-field__result-item--highlighted' : ''}`, onMouseDown: () => this.handleResultSelect(result) }, h("span", { class: "mrd-relation-field__result-label" }, result.label), result.description && (h("span", { class: "mrd-relation-field__result-desc" }, result.description)))))))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
242
- }
243
- static get is() { return "mrd-relation-field"; }
244
- static get encapsulation() { return "scoped"; }
245
- static get originalStyleUrls() {
246
- return {
247
- "$": ["mrd-relation-field.scss"]
248
- };
249
- }
250
- static get styleUrls() {
251
- return {
252
- "$": ["mrd-relation-field.css"]
253
- };
254
- }
255
- static get properties() {
256
- return {
257
- "name": {
258
- "type": "string",
259
- "mutable": false,
260
- "complexType": {
261
- "original": "string",
262
- "resolved": "string",
263
- "references": {}
264
- },
265
- "required": false,
266
- "optional": false,
267
- "docs": {
268
- "tags": [],
269
- "text": ""
270
- },
271
- "getter": false,
272
- "setter": false,
273
- "reflect": false,
274
- "attribute": "name",
275
- "defaultValue": "''"
276
- },
277
- "label": {
278
- "type": "string",
279
- "mutable": false,
280
- "complexType": {
281
- "original": "string",
282
- "resolved": "string",
283
- "references": {}
284
- },
285
- "required": false,
286
- "optional": false,
287
- "docs": {
288
- "tags": [],
289
- "text": ""
290
- },
291
- "getter": false,
292
- "setter": false,
293
- "reflect": false,
294
- "attribute": "label",
295
- "defaultValue": "''"
296
- },
297
- "required": {
298
- "type": "boolean",
299
- "mutable": false,
300
- "complexType": {
301
- "original": "boolean",
302
- "resolved": "boolean",
303
- "references": {}
304
- },
305
- "required": false,
306
- "optional": false,
307
- "docs": {
308
- "tags": [],
309
- "text": ""
310
- },
311
- "getter": false,
312
- "setter": false,
313
- "reflect": false,
314
- "attribute": "required",
315
- "defaultValue": "false"
316
- },
317
- "disabled": {
318
- "type": "boolean",
319
- "mutable": false,
320
- "complexType": {
321
- "original": "boolean",
322
- "resolved": "boolean",
323
- "references": {}
324
- },
325
- "required": false,
326
- "optional": false,
327
- "docs": {
328
- "tags": [],
329
- "text": ""
330
- },
331
- "getter": false,
332
- "setter": false,
333
- "reflect": false,
334
- "attribute": "disabled",
335
- "defaultValue": "false"
336
- },
337
- "locale": {
338
- "type": "string",
339
- "mutable": false,
340
- "complexType": {
341
- "original": "string",
342
- "resolved": "string",
343
- "references": {}
344
- },
345
- "required": false,
346
- "optional": false,
347
- "docs": {
348
- "tags": [],
349
- "text": ""
350
- },
351
- "getter": false,
352
- "setter": false,
353
- "reflect": false,
354
- "attribute": "locale",
355
- "defaultValue": "navigator.language"
356
- },
357
- "relatedClass": {
358
- "type": "string",
359
- "mutable": false,
360
- "complexType": {
361
- "original": "string",
362
- "resolved": "string",
363
- "references": {}
364
- },
365
- "required": false,
366
- "optional": false,
367
- "docs": {
368
- "tags": [],
369
- "text": ""
370
- },
371
- "getter": false,
372
- "setter": false,
373
- "reflect": false,
374
- "attribute": "related-class",
375
- "defaultValue": "''"
376
- },
377
- "mostSignificantClass": {
378
- "type": "string",
379
- "mutable": false,
380
- "complexType": {
381
- "original": "string",
382
- "resolved": "string",
383
- "references": {}
384
- },
385
- "required": false,
386
- "optional": false,
387
- "docs": {
388
- "tags": [],
389
- "text": "When set, used instead of relatedClass for search queries (mostSignificantClass from API)."
390
- },
391
- "getter": false,
392
- "setter": false,
393
- "reflect": false,
394
- "attribute": "most-significant-class",
395
- "defaultValue": "''"
396
- },
397
- "displayType": {
398
- "type": "string",
399
- "mutable": false,
400
- "complexType": {
401
- "original": "ClientLayoutItemRelationDisplayType",
402
- "resolved": "ClientLayoutItemRelationDisplayType.CHECKBOX | ClientLayoutItemRelationDisplayType.DROPDOWN | ClientLayoutItemRelationDisplayType.SEARCH",
403
- "references": {
404
- "ClientLayoutItemRelationDisplayType": {
405
- "location": "import",
406
- "path": "../../types",
407
- "id": "src/types/index.ts::ClientLayoutItemRelationDisplayType",
408
- "referenceLocation": "ClientLayoutItemRelationDisplayType"
409
- }
410
- }
411
- },
412
- "required": false,
413
- "optional": false,
414
- "docs": {
415
- "tags": [],
416
- "text": ""
417
- },
418
- "getter": false,
419
- "setter": false,
420
- "reflect": false,
421
- "attribute": "display-type",
422
- "defaultValue": "ClientLayoutItemRelationDisplayType.SEARCH"
423
- },
424
- "editBehavior": {
425
- "type": "string",
426
- "mutable": false,
427
- "complexType": {
428
- "original": "ClientLayoutItemRelationEditBehavior | null",
429
- "resolved": "ClientLayoutItemRelationEditBehavior.CHECKBOX | ClientLayoutItemRelationEditBehavior.DROPDOWN | ClientLayoutItemRelationEditBehavior.SEARCH | null | undefined",
430
- "references": {
431
- "ClientLayoutItemRelationEditBehavior": {
432
- "location": "import",
433
- "path": "../../types",
434
- "id": "src/types/index.ts::ClientLayoutItemRelationEditBehavior",
435
- "referenceLocation": "ClientLayoutItemRelationEditBehavior"
436
- }
437
- }
438
- },
439
- "required": false,
440
- "optional": true,
441
- "docs": {
442
- "tags": [],
443
- "text": ""
444
- },
445
- "getter": false,
446
- "setter": false,
447
- "reflect": false,
448
- "attribute": "edit-behavior"
449
- },
450
- "commonRelation": {
451
- "type": "string",
452
- "mutable": false,
453
- "complexType": {
454
- "original": "string",
455
- "resolved": "string | undefined",
456
- "references": {}
457
- },
458
- "required": false,
459
- "optional": true,
460
- "docs": {
461
- "tags": [],
462
- "text": ""
463
- },
464
- "getter": false,
465
- "setter": false,
466
- "reflect": false,
467
- "attribute": "common-relation"
468
- },
469
- "multiple": {
470
- "type": "boolean",
471
- "mutable": false,
472
- "complexType": {
473
- "original": "boolean",
474
- "resolved": "boolean",
475
- "references": {}
476
- },
477
- "required": false,
478
- "optional": false,
479
- "docs": {
480
- "tags": [],
481
- "text": ""
482
- },
483
- "getter": false,
484
- "setter": false,
485
- "reflect": false,
486
- "attribute": "multiple",
487
- "defaultValue": "false"
488
- },
489
- "dropdownValues": {
490
- "type": "unknown",
491
- "mutable": false,
492
- "complexType": {
493
- "original": "ClientListValue[]",
494
- "resolved": "ClientListValue[]",
495
- "references": {
496
- "ClientListValue": {
497
- "location": "import",
498
- "path": "../../types",
499
- "id": "src/types/index.ts::ClientListValue",
500
- "referenceLocation": "ClientListValue"
501
- }
502
- }
503
- },
504
- "required": false,
505
- "optional": false,
506
- "docs": {
507
- "tags": [],
508
- "text": ""
509
- },
510
- "getter": false,
511
- "setter": false,
512
- "defaultValue": "[]"
513
- },
514
- "value": {
515
- "type": "string",
516
- "mutable": false,
517
- "complexType": {
518
- "original": "string | string[] | RelationSearchResult | RelationSearchResult[] | null",
519
- "resolved": "RelationSearchResult | RelationSearchResult[] | null | string | string[]",
520
- "references": {
521
- "RelationSearchResult": {
522
- "location": "import",
523
- "path": "../../types",
524
- "id": "src/types/index.ts::RelationSearchResult",
525
- "referenceLocation": "RelationSearchResult"
526
- }
527
- }
528
- },
529
- "required": false,
530
- "optional": false,
531
- "docs": {
532
- "tags": [],
533
- "text": "Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record."
534
- },
535
- "getter": false,
536
- "setter": false,
537
- "reflect": false,
538
- "attribute": "value",
539
- "defaultValue": "null"
540
- }
541
- };
542
- }
543
- static get states() {
544
- return {
545
- "searchQuery": {},
546
- "searchResults": {},
547
- "allRecords": {},
548
- "isLoading": {},
549
- "selectedItems": {},
550
- "showResults": {},
551
- "error": {},
552
- "highlightedIndex": {}
553
- };
554
- }
555
- static get events() {
556
- return [{
557
- "method": "mrdChange",
558
- "name": "mrdChange",
559
- "bubbles": true,
560
- "cancelable": true,
561
- "composed": true,
562
- "docs": {
563
- "tags": [],
564
- "text": ""
565
- },
566
- "complexType": {
567
- "original": "{ name: string; value: string | string[] | null }",
568
- "resolved": "{ name: string; value: string | string[] | null; }",
569
- "references": {}
570
- }
571
- }, {
572
- "method": "mrdBlur",
573
- "name": "mrdBlur",
574
- "bubbles": true,
575
- "cancelable": true,
576
- "composed": true,
577
- "docs": {
578
- "tags": [],
579
- "text": ""
580
- },
581
- "complexType": {
582
- "original": "{ name: string; value: string | string[] | null }",
583
- "resolved": "{ name: string; value: string | string[] | null; }",
584
- "references": {}
585
- }
586
- }, {
587
- "method": "mrdSearch",
588
- "name": "mrdSearch",
589
- "bubbles": true,
590
- "cancelable": true,
591
- "composed": true,
592
- "docs": {
593
- "tags": [],
594
- "text": ""
595
- },
596
- "complexType": {
597
- "original": "{ name: string; query: string; relatedClass: string }",
598
- "resolved": "{ name: string; query: string; relatedClass: string; }",
599
- "references": {}
600
- }
601
- }, {
602
- "method": "mrdFetchAll",
603
- "name": "mrdFetchAll",
604
- "bubbles": true,
605
- "cancelable": true,
606
- "composed": true,
607
- "docs": {
608
- "tags": [],
609
- "text": ""
610
- },
611
- "complexType": {
612
- "original": "{ name: string; relatedClass: string; mostSignificantClass?: string; commonRelation?: string; filter?: string; filterValue?: string }",
613
- "resolved": "{ name: string; relatedClass: string; mostSignificantClass?: string | undefined; commonRelation?: string | undefined; filter?: string | undefined; filterValue?: string | undefined; }",
614
- "references": {}
615
- }
616
- }];
617
- }
618
- static get methods() {
619
- return {
620
- "setAllRecords": {
621
- "complexType": {
622
- "signature": "(records: RelationSearchResult[]) => Promise<void>",
623
- "parameters": [{
624
- "name": "records",
625
- "type": "RelationSearchResult[]",
626
- "docs": ""
627
- }],
628
- "references": {
629
- "Promise": {
630
- "location": "global",
631
- "id": "global::Promise"
632
- },
633
- "RelationSearchResult": {
634
- "location": "import",
635
- "path": "../../types",
636
- "id": "src/types/index.ts::RelationSearchResult",
637
- "referenceLocation": "RelationSearchResult"
638
- }
639
- },
640
- "return": "Promise<void>"
641
- },
642
- "docs": {
643
- "text": "",
644
- "tags": []
645
- }
646
- },
647
- "setSearchResults": {
648
- "complexType": {
649
- "signature": "(results: RelationSearchResult[]) => Promise<void>",
650
- "parameters": [{
651
- "name": "results",
652
- "type": "RelationSearchResult[]",
653
- "docs": ""
654
- }],
655
- "references": {
656
- "Promise": {
657
- "location": "global",
658
- "id": "global::Promise"
659
- },
660
- "RelationSearchResult": {
661
- "location": "import",
662
- "path": "../../types",
663
- "id": "src/types/index.ts::RelationSearchResult",
664
- "referenceLocation": "RelationSearchResult"
665
- }
666
- },
667
- "return": "Promise<void>"
668
- },
669
- "docs": {
670
- "text": "",
671
- "tags": []
672
- }
673
- },
674
- "setLoading": {
675
- "complexType": {
676
- "signature": "(loading: boolean) => Promise<void>",
677
- "parameters": [{
678
- "name": "loading",
679
- "type": "boolean",
680
- "docs": ""
681
- }],
682
- "references": {
683
- "Promise": {
684
- "location": "global",
685
- "id": "global::Promise"
686
- }
687
- },
688
- "return": "Promise<void>"
689
- },
690
- "docs": {
691
- "text": "",
692
- "tags": []
693
- }
694
- }
695
- };
696
- }
697
- static get elementRef() { return "el"; }
698
- static get watchers() {
699
- return [{
700
- "propName": "allRecords",
701
- "methodName": "allRecordsChanged"
702
- }, {
703
- "propName": "value",
704
- "methodName": "valueChanged"
705
- }];
706
- }
707
- }