@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,3961 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-BPj2cBXs.js');
4
- var index$1 = require('./index.cjs.js');
5
-
6
- const mrdBooleanFieldScss = () => `.sc-mrd-boolean-field-h{display:block}.mrd-boolean-field.sc-mrd-boolean-field{display:flex;align-items:center;width:100%}.mrd-boolean-field__toggle-label.sc-mrd-boolean-field{display:flex;align-items:center;gap:var(--mrd-space-3);cursor:pointer;user-select:none}.mrd-boolean-field__checkbox.sc-mrd-boolean-field{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:checked+.mrd-boolean-field__toggle.sc-mrd-boolean-field{background-color:var(--mrd-color-primary)}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:checked+.mrd-boolean-field__toggle.sc-mrd-boolean-field::after{transform:translateX(20px)}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:focus+.mrd-boolean-field__toggle.sc-mrd-boolean-field{box-shadow:var(--mrd-shadow-focus)}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:disabled+.mrd-boolean-field__toggle.sc-mrd-boolean-field{opacity:0.5;cursor:not-allowed}.mrd-boolean-field__toggle.sc-mrd-boolean-field{position:relative;display:inline-block;width:44px;height:24px;background-color:var(--mrd-color-neutral-300);border-radius:var(--mrd-border-radius-full);transition:background-color var(--mrd-transition);flex-shrink:0}.mrd-boolean-field__toggle.sc-mrd-boolean-field::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background-color:var(--mrd-color-white);border-radius:50%;transition:transform var(--mrd-transition);box-shadow:var(--mrd-shadow-sm)}.mrd-boolean-field__text.sc-mrd-boolean-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800)}.mrd-boolean-field__text--required.sc-mrd-boolean-field::after{content:' *';color:var(--mrd-color-danger)}`;
7
-
8
- const MrdBooleanField = class {
9
- constructor(hostRef) {
10
- index.registerInstance(this, hostRef);
11
- this.mrdChange = index.createEvent(this, "mrdChange");
12
- this.mrdBlur = index.createEvent(this, "mrdBlur");
13
- this.name = '';
14
- this.label = '';
15
- this.value = false;
16
- this.required = false;
17
- this.disabled = false;
18
- this.locale = navigator.language;
19
- this.checked = false;
20
- this.handleChange = (e) => {
21
- this.checked = e.target.checked;
22
- this.mrdChange.emit({ name: this.name, value: this.checked });
23
- };
24
- this.handleBlur = () => {
25
- this.mrdBlur.emit({ name: this.name, value: this.checked });
26
- };
27
- }
28
- componentWillLoad() {
29
- this.checked = !!this.value;
30
- }
31
- render() {
32
- return (index.h(index.Host, { key: 'aed1d936d686870114a12aad9fc4cccb76ecd31e' }, index.h("div", { key: '5cc8aaa0f12d4195d02fce8a810d7d993e2e8c99', class: "mrd-boolean-field" }, index.h("label", { key: '41c3b3e0f01778fc2654ba86e3fe4e5a07c8537a', class: "mrd-boolean-field__toggle-label" }, index.h("input", { key: 'c261e6903e050d2f3d8df8abb90c74d99ed20161', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), index.h("span", { key: '079ee220fe692536af15a7fb4286626102ae940e', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (index.h("span", { key: '1f4f52a41f0bd6ba4c61cf9d4db74ab2f1aa8877', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
33
- }
34
- };
35
- MrdBooleanField.style = mrdBooleanFieldScss();
36
-
37
- const translations = {
38
- nl: {
39
- required: 'Dit veld is verplicht',
40
- select_placeholder: 'Selecteer een optie',
41
- search_placeholder: 'Zoeken...',
42
- upload_file: 'Bestand uploaden',
43
- choose_file: 'Bestand kiezen',
44
- clear: 'Wissen',
45
- today: 'Vandaag',
46
- invalid_email: 'Voer een geldig e-mailadres in',
47
- invalid_url: 'Voer een geldige URL in',
48
- invalid_number: 'Voer een geldig getal in',
49
- drop_file_here: 'Sleep bestand hierheen of',
50
- browse: 'bladeren',
51
- file_too_large: 'Bestand is te groot',
52
- search_results: 'Zoekresultaten',
53
- no_results: 'Geen resultaten gevonden',
54
- loading: 'Laden...',
55
- submit: 'Opslaan',
56
- cancel: 'Annuleren',
57
- remove: 'Verwijderen',
58
- add: 'Toevoegen',
59
- yes: 'Ja',
60
- no: 'Nee',
61
- // mrd-table footer
62
- table_of: 'van',
63
- download: 'Downloaden',
64
- // mrd-table toolbar
65
- table_filter: 'Filteren',
66
- table_filter_hide: 'Filter verbergen',
67
- table_filter_active: 'actief',
68
- table_filter_clear_all: 'Alle filters wissen',
69
- table_new_record: 'Nieuw record',
70
- table_export_excel: 'Exporteer naar Excel',
71
- // mrd-table filter popup
72
- filter_sorting: 'Sortering',
73
- filter_ascending: 'Oplopend',
74
- filter_descending: 'Aflopend',
75
- filter_section: 'Filter',
76
- filter_apply: 'Toepassen',
77
- filter_clear: 'Wissen',
78
- filter_contains: 'Bevat',
79
- filter_starts_with: 'Begint met',
80
- filter_equals: 'Gelijk aan',
81
- filter_has_value: 'Heeft waarde',
82
- filter_is_empty: 'Is leeg',
83
- filter_is_not_empty: 'Is niet leeg',
84
- filter_exact: 'Exact',
85
- filter_range: 'Bereik',
86
- filter_from: 'Van',
87
- filter_to: 'Tot',
88
- filter_all: 'Alle',
89
- filter_select_all: 'Alles',
90
- filter_select_none: 'Geen',
91
- filter_search_value: 'Zoekwaarde...',
92
- filter_no_support: 'Geen filtering beschikbaar voor dit veldtype.',
93
- // mrd-table textblock
94
- textblock_show_more: 'Meer tonen',
95
- close: 'Sluiten',
96
- // history badge
97
- history_until: 'tot',
98
- history_badge_tooltip: 'Vorige waarden',
99
- hyperlink_name: 'Linktekst (optioneel)',
100
- },
101
- en: {
102
- required: 'This field is required',
103
- select_placeholder: 'Select an option',
104
- search_placeholder: 'Search...',
105
- upload_file: 'Upload file',
106
- choose_file: 'Choose file',
107
- clear: 'Clear',
108
- today: 'Today',
109
- invalid_email: 'Please enter a valid email address',
110
- invalid_url: 'Please enter a valid URL',
111
- invalid_number: 'Please enter a valid number',
112
- drop_file_here: 'Drop file here or',
113
- browse: 'browse',
114
- file_too_large: 'File is too large',
115
- search_results: 'Search results',
116
- no_results: 'No results found',
117
- loading: 'Loading...',
118
- submit: 'Save',
119
- cancel: 'Cancel',
120
- remove: 'Remove',
121
- add: 'Add',
122
- yes: 'Yes',
123
- no: 'No',
124
- // mrd-table footer
125
- table_of: 'of',
126
- download: 'Download',
127
- // mrd-table toolbar
128
- table_filter: 'Filter',
129
- table_filter_hide: 'Hide filter',
130
- table_filter_active: 'active',
131
- table_filter_clear_all: 'Clear all filters',
132
- table_new_record: 'New record',
133
- table_export_excel: 'Export to Excel',
134
- // mrd-table filter popup
135
- filter_sorting: 'Sorting',
136
- filter_ascending: 'Ascending',
137
- filter_descending: 'Descending',
138
- filter_section: 'Filter',
139
- filter_apply: 'Apply',
140
- filter_clear: 'Clear',
141
- filter_contains: 'Contains',
142
- filter_starts_with: 'Starts with',
143
- filter_equals: 'Equals',
144
- filter_has_value: 'Has value',
145
- filter_is_empty: 'Is empty',
146
- filter_is_not_empty: 'Is not empty',
147
- filter_exact: 'Exact',
148
- filter_range: 'Range',
149
- filter_from: 'From',
150
- filter_to: 'To',
151
- filter_all: 'All',
152
- filter_select_all: 'All',
153
- filter_select_none: 'None',
154
- filter_search_value: 'Search value...',
155
- filter_no_support: 'Filtering is not available for this field type.',
156
- // mrd-table textblock
157
- textblock_show_more: 'Show more',
158
- close: 'Close',
159
- // history badge
160
- history_until: 'until',
161
- history_badge_tooltip: 'Previous values',
162
- hyperlink_name: 'Link text (optional)',
163
- },
164
- ar: {
165
- required: 'هذا الحقل مطلوب',
166
- select_placeholder: 'اختر خياراً',
167
- search_placeholder: 'بحث...',
168
- upload_file: 'رفع ملف',
169
- choose_file: 'اختر ملفاً',
170
- clear: 'مسح',
171
- today: 'اليوم',
172
- invalid_email: 'يرجى إدخال عنوان بريد إلكتروني صحيح',
173
- invalid_url: 'يرجى إدخال رابط صحيح',
174
- invalid_number: 'يرجى إدخال رقم صحيح',
175
- drop_file_here: 'اسحب الملف هنا أو',
176
- browse: 'تصفح',
177
- file_too_large: 'الملف كبير جداً',
178
- search_results: 'نتائج البحث',
179
- no_results: 'لم يتم العثور على نتائج',
180
- loading: 'جار التحميل...',
181
- submit: 'حفظ',
182
- cancel: 'إلغاء',
183
- remove: 'إزالة',
184
- add: 'إضافة',
185
- yes: 'نعم',
186
- no: 'لا',
187
- // mrd-table footer
188
- table_of: 'من أصل',
189
- download: 'تنزيل',
190
- // mrd-table toolbar
191
- table_filter: 'تصفية',
192
- table_filter_hide: 'إخفاء التصفية',
193
- table_filter_active: 'نشط',
194
- table_filter_clear_all: 'مسح جميع الفلاتر',
195
- table_new_record: 'سجل جديد',
196
- table_export_excel: 'تصدير إلى Excel',
197
- // mrd-table filter popup
198
- filter_sorting: 'الترتيب',
199
- filter_ascending: 'تصاعدي',
200
- filter_descending: 'تنازلي',
201
- filter_section: 'تصفية',
202
- filter_apply: 'تطبيق',
203
- filter_clear: 'مسح',
204
- filter_contains: 'يحتوي على',
205
- filter_starts_with: 'يبدأ بـ',
206
- filter_equals: 'يساوي',
207
- filter_has_value: 'له قيمة',
208
- filter_is_empty: 'فارغ',
209
- filter_is_not_empty: 'ليس فارغاً',
210
- filter_exact: 'دقيق',
211
- filter_range: 'نطاق',
212
- filter_from: 'من',
213
- filter_to: 'إلى',
214
- filter_all: 'الكل',
215
- filter_select_all: 'الكل',
216
- filter_select_none: 'لا شيء',
217
- filter_search_value: 'قيمة البحث...',
218
- filter_no_support: 'التصفية غير متاحة لهذا النوع من الحقول.',
219
- // mrd-table textblock
220
- textblock_show_more: 'عرض المزيد',
221
- close: 'إغلاق',
222
- // history badge
223
- history_until: 'حتى',
224
- history_badge_tooltip: 'القيم السابقة',
225
- hyperlink_name: 'نص الرابط (اختياري)',
226
- },
227
- fr: {
228
- required: 'Ce champ est obligatoire',
229
- select_placeholder: 'Sélectionner une option',
230
- search_placeholder: 'Rechercher...',
231
- upload_file: 'Télécharger un fichier',
232
- choose_file: 'Choisir un fichier',
233
- clear: 'Effacer',
234
- today: "Aujourd'hui",
235
- invalid_email: 'Veuillez saisir une adresse e-mail valide',
236
- invalid_url: 'Veuillez saisir une URL valide',
237
- invalid_number: 'Veuillez saisir un nombre valide',
238
- drop_file_here: 'Déposez le fichier ici ou',
239
- browse: 'parcourir',
240
- file_too_large: 'Le fichier est trop volumineux',
241
- search_results: 'Résultats de recherche',
242
- no_results: 'Aucun résultat trouvé',
243
- loading: 'Chargement...',
244
- submit: 'Enregistrer',
245
- cancel: 'Annuler',
246
- remove: 'Supprimer',
247
- add: 'Ajouter',
248
- yes: 'Oui',
249
- no: 'Non',
250
- // mrd-table footer
251
- table_of: 'sur',
252
- download: 'Télécharger',
253
- // mrd-table toolbar
254
- table_filter: 'Filtrer',
255
- table_filter_hide: 'Masquer le filtre',
256
- table_filter_active: 'actif',
257
- table_filter_clear_all: 'Effacer tous les filtres',
258
- table_new_record: 'Nouvel enregistrement',
259
- table_export_excel: 'Exporter vers Excel',
260
- // mrd-table filter popup
261
- filter_sorting: 'Tri',
262
- filter_ascending: 'Croissant',
263
- filter_descending: 'Décroissant',
264
- filter_section: 'Filtre',
265
- filter_apply: 'Appliquer',
266
- filter_clear: 'Effacer',
267
- filter_contains: 'Contient',
268
- filter_starts_with: 'Commence par',
269
- filter_equals: 'Égal à',
270
- filter_has_value: 'A une valeur',
271
- filter_is_empty: 'Est vide',
272
- filter_is_not_empty: "N'est pas vide",
273
- filter_exact: 'Exact',
274
- filter_range: 'Plage',
275
- filter_from: 'De',
276
- filter_to: 'À',
277
- filter_all: 'Tous',
278
- filter_select_all: 'Tous',
279
- filter_select_none: 'Aucun',
280
- filter_search_value: 'Valeur de recherche...',
281
- filter_no_support: "Le filtrage n'est pas disponible pour ce type de champ.",
282
- // mrd-table textblock
283
- textblock_show_more: 'Voir plus',
284
- close: 'Fermer',
285
- // history badge
286
- history_until: "jusqu'au",
287
- history_badge_tooltip: 'Valeurs précédentes',
288
- hyperlink_name: 'Texte du lien (optionnel)',
289
- },
290
- de: {
291
- required: 'Dieses Feld ist erforderlich',
292
- select_placeholder: 'Option auswählen',
293
- search_placeholder: 'Suchen...',
294
- upload_file: 'Datei hochladen',
295
- choose_file: 'Datei auswählen',
296
- clear: 'Löschen',
297
- today: 'Heute',
298
- invalid_email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein',
299
- invalid_url: 'Bitte geben Sie eine gültige URL ein',
300
- invalid_number: 'Bitte geben Sie eine gültige Zahl ein',
301
- drop_file_here: 'Datei hier ablegen oder',
302
- browse: 'durchsuchen',
303
- file_too_large: 'Datei ist zu groß',
304
- search_results: 'Suchergebnisse',
305
- no_results: 'Keine Ergebnisse gefunden',
306
- loading: 'Laden...',
307
- submit: 'Speichern',
308
- cancel: 'Abbrechen',
309
- remove: 'Entfernen',
310
- add: 'Hinzufügen',
311
- yes: 'Ja',
312
- no: 'Nein',
313
- // mrd-table footer
314
- table_of: 'von',
315
- download: 'Herunterladen',
316
- // mrd-table toolbar
317
- table_filter: 'Filtern',
318
- table_filter_hide: 'Filter ausblenden',
319
- table_filter_active: 'aktiv',
320
- table_filter_clear_all: 'Alle Filter löschen',
321
- table_new_record: 'Neuer Eintrag',
322
- table_export_excel: 'Als Excel exportieren',
323
- // mrd-table filter popup
324
- filter_sorting: 'Sortierung',
325
- filter_ascending: 'Aufsteigend',
326
- filter_descending: 'Absteigend',
327
- filter_section: 'Filter',
328
- filter_apply: 'Anwenden',
329
- filter_clear: 'Löschen',
330
- filter_contains: 'Enthält',
331
- filter_starts_with: 'Beginnt mit',
332
- filter_equals: 'Gleich',
333
- filter_has_value: 'Hat Wert',
334
- filter_is_empty: 'Ist leer',
335
- filter_is_not_empty: 'Ist nicht leer',
336
- filter_exact: 'Genau',
337
- filter_range: 'Bereich',
338
- filter_from: 'Von',
339
- filter_to: 'Bis',
340
- filter_all: 'Alle',
341
- filter_select_all: 'Alle',
342
- filter_select_none: 'Keine',
343
- filter_search_value: 'Suchwert...',
344
- filter_no_support: 'Filterung ist für diesen Feldtyp nicht verfügbar.',
345
- // mrd-table textblock
346
- textblock_show_more: 'Mehr anzeigen',
347
- close: 'Schließen',
348
- // history badge
349
- history_until: 'bis',
350
- history_badge_tooltip: 'Vorherige Werte',
351
- hyperlink_name: 'Linktext (optional)',
352
- },
353
- es: {
354
- required: 'Este campo es obligatorio',
355
- select_placeholder: 'Seleccionar una opción',
356
- search_placeholder: 'Buscar...',
357
- upload_file: 'Subir archivo',
358
- choose_file: 'Elegir archivo',
359
- clear: 'Borrar',
360
- today: 'Hoy',
361
- invalid_email: 'Por favor, introduzca una dirección de correo electrónico válida',
362
- invalid_url: 'Por favor, introduzca una URL válida',
363
- invalid_number: 'Por favor, introduzca un número válido',
364
- drop_file_here: 'Suelte el archivo aquí o',
365
- browse: 'explorar',
366
- file_too_large: 'El archivo es demasiado grande',
367
- search_results: 'Resultados de búsqueda',
368
- no_results: 'No se encontraron resultados',
369
- loading: 'Cargando...',
370
- submit: 'Guardar',
371
- cancel: 'Cancelar',
372
- remove: 'Eliminar',
373
- add: 'Añadir',
374
- yes: 'Sí',
375
- no: 'No',
376
- // mrd-table footer
377
- table_of: 'de',
378
- download: 'Descargar',
379
- // mrd-table toolbar
380
- table_filter: 'Filtrar',
381
- table_filter_hide: 'Ocultar filtro',
382
- table_filter_active: 'activo',
383
- table_filter_clear_all: 'Borrar todos los filtros',
384
- table_new_record: 'Nuevo registro',
385
- table_export_excel: 'Exportar a Excel',
386
- // mrd-table filter popup
387
- filter_sorting: 'Ordenación',
388
- filter_ascending: 'Ascendente',
389
- filter_descending: 'Descendente',
390
- filter_section: 'Filtro',
391
- filter_apply: 'Aplicar',
392
- filter_clear: 'Borrar',
393
- filter_contains: 'Contiene',
394
- filter_starts_with: 'Empieza por',
395
- filter_equals: 'Igual a',
396
- filter_has_value: 'Tiene valor',
397
- filter_is_empty: 'Está vacío',
398
- filter_is_not_empty: 'No está vacío',
399
- filter_exact: 'Exacto',
400
- filter_range: 'Rango',
401
- filter_from: 'Desde',
402
- filter_to: 'Hasta',
403
- filter_all: 'Todos',
404
- filter_select_all: 'Todos',
405
- filter_select_none: 'Ninguno',
406
- filter_search_value: 'Valor de búsqueda...',
407
- filter_no_support: 'El filtrado no está disponible para este tipo de campo.',
408
- // mrd-table textblock
409
- textblock_show_more: 'Mostrar más',
410
- close: 'Cerrar',
411
- // history badge
412
- history_until: 'hasta',
413
- history_badge_tooltip: 'Valores anteriores',
414
- hyperlink_name: 'Texto del enlace (opcional)',
415
- },
416
- it: {
417
- required: 'Questo campo è obbligatorio',
418
- select_placeholder: "Seleziona un'opzione",
419
- search_placeholder: 'Cerca...',
420
- upload_file: 'Carica file',
421
- choose_file: 'Scegli file',
422
- clear: 'Cancella',
423
- today: 'Oggi',
424
- invalid_email: 'Inserisci un indirizzo email valido',
425
- invalid_url: 'Inserisci un URL valido',
426
- invalid_number: 'Inserisci un numero valido',
427
- drop_file_here: 'Trascina il file qui o',
428
- browse: 'sfoglia',
429
- file_too_large: 'Il file è troppo grande',
430
- search_results: 'Risultati della ricerca',
431
- no_results: 'Nessun risultato trovato',
432
- loading: 'Caricamento...',
433
- submit: 'Salva',
434
- cancel: 'Annulla',
435
- remove: 'Rimuovi',
436
- add: 'Aggiungi',
437
- yes: 'Sì',
438
- no: 'No',
439
- // mrd-table footer
440
- table_of: 'di',
441
- download: 'Scarica',
442
- // mrd-table toolbar
443
- table_filter: 'Filtra',
444
- table_filter_hide: 'Nascondi filtro',
445
- table_filter_active: 'attivo',
446
- table_filter_clear_all: 'Cancella tutti i filtri',
447
- table_new_record: 'Nuovo record',
448
- table_export_excel: 'Esporta in Excel',
449
- // mrd-table filter popup
450
- filter_sorting: 'Ordinamento',
451
- filter_ascending: 'Crescente',
452
- filter_descending: 'Decrescente',
453
- filter_section: 'Filtro',
454
- filter_apply: 'Applica',
455
- filter_clear: 'Cancella',
456
- filter_contains: 'Contiene',
457
- filter_starts_with: 'Inizia con',
458
- filter_equals: 'Uguale a',
459
- filter_has_value: 'Ha valore',
460
- filter_is_empty: 'È vuoto',
461
- filter_is_not_empty: 'Non è vuoto',
462
- filter_exact: 'Esatto',
463
- filter_range: 'Intervallo',
464
- filter_from: 'Da',
465
- filter_to: 'A',
466
- filter_all: 'Tutti',
467
- filter_select_all: 'Tutti',
468
- filter_select_none: 'Nessuno',
469
- filter_search_value: 'Valore di ricerca...',
470
- filter_no_support: 'Il filtro non è disponibile per questo tipo di campo.',
471
- // mrd-table textblock
472
- textblock_show_more: 'Mostra altro',
473
- close: 'Chiudi',
474
- // history badge
475
- history_until: 'fino a',
476
- history_badge_tooltip: 'Valori precedenti',
477
- hyperlink_name: 'Testo del collegamento (opzionale)',
478
- },
479
- uk: {
480
- required: "Це поле обов'язкове",
481
- select_placeholder: 'Виберіть варіант',
482
- search_placeholder: 'Пошук...',
483
- upload_file: 'Завантажити файл',
484
- choose_file: 'Вибрати файл',
485
- clear: 'Очистити',
486
- today: 'Сьогодні',
487
- invalid_email: 'Будь ласка, введіть дійсну адресу електронної пошти',
488
- invalid_url: 'Будь ласка, введіть дійсну URL-адресу',
489
- invalid_number: 'Будь ласка, введіть дійсне число',
490
- drop_file_here: 'Перетягніть файл сюди або',
491
- browse: 'огляд',
492
- file_too_large: 'Файл занадто великий',
493
- search_results: 'Результати пошуку',
494
- no_results: 'Результатів не знайдено',
495
- loading: 'Завантаження...',
496
- submit: 'Зберегти',
497
- cancel: 'Скасувати',
498
- remove: 'Видалити',
499
- add: 'Додати',
500
- yes: 'Так',
501
- no: 'Ні',
502
- // mrd-table footer
503
- table_of: 'з',
504
- download: 'Завантажити',
505
- // mrd-table toolbar
506
- table_filter: 'Фільтрувати',
507
- table_filter_hide: 'Сховати фільтр',
508
- table_filter_active: 'активний',
509
- table_filter_clear_all: 'Очистити всі фільтри',
510
- table_new_record: 'Новий запис',
511
- table_export_excel: 'Експортувати до Excel',
512
- // mrd-table filter popup
513
- filter_sorting: 'Сортування',
514
- filter_ascending: 'За зростанням',
515
- filter_descending: 'За спаданням',
516
- filter_section: 'Фільтр',
517
- filter_apply: 'Застосувати',
518
- filter_clear: 'Очистити',
519
- filter_contains: 'Містить',
520
- filter_starts_with: 'Починається з',
521
- filter_equals: 'Дорівнює',
522
- filter_has_value: 'Має значення',
523
- filter_is_empty: 'Порожнє',
524
- filter_is_not_empty: 'Не порожнє',
525
- filter_exact: 'Точно',
526
- filter_range: 'Діапазон',
527
- filter_from: 'Від',
528
- filter_to: 'До',
529
- filter_all: 'Всі',
530
- filter_select_all: 'Всі',
531
- filter_select_none: 'Жодного',
532
- filter_search_value: 'Значення для пошуку...',
533
- filter_no_support: 'Фільтрування недоступне для цього типу поля.',
534
- // mrd-table textblock
535
- textblock_show_more: 'Показати більше',
536
- close: 'Закрити',
537
- // history badge
538
- history_until: 'до',
539
- history_badge_tooltip: 'Попередні значення',
540
- hyperlink_name: "Текст посилання (необов'язково)",
541
- },
542
- };
543
- function t(key, locale) {
544
- var _a, _b, _c;
545
- const lang = (locale !== null && locale !== void 0 ? locale : 'en').split('-')[0].toLowerCase();
546
- const dict = (_a = translations[lang]) !== null && _a !== void 0 ? _a : translations['en'];
547
- return (_c = (_b = dict[key]) !== null && _b !== void 0 ? _b : translations['en'][key]) !== null && _c !== void 0 ? _c : key;
548
- }
549
-
550
- function validateRequired(value) {
551
- if (value === null || value === undefined)
552
- return false;
553
- if (typeof value === 'string')
554
- return value.trim().length > 0;
555
- if (Array.isArray(value))
556
- return value.length > 0;
557
- if (typeof value === 'object') {
558
- // HyperlinkValue check
559
- const hv = value;
560
- if ('href' in hv)
561
- return typeof hv.href === 'string' && hv.href.trim().length > 0;
562
- // CurrencyValue check
563
- const cv = value;
564
- if ('amount' in cv)
565
- return cv.amount !== null && cv.amount !== undefined && cv.amount !== '';
566
- }
567
- return true;
568
- }
569
- function validateEmail(value) {
570
- if (!value)
571
- return true;
572
- return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
573
- }
574
- function validateUrl(value) {
575
- if (!value)
576
- return true;
577
- try {
578
- const url = new URL(value);
579
- return url.protocol === 'http:' || url.protocol === 'https:';
580
- }
581
- catch (_a) {
582
- return false;
583
- }
584
- }
585
- function validateNumber(value, dataType) {
586
- if (value === null || value === undefined || value === '')
587
- return true;
588
- const num = Number(value);
589
- if (isNaN(num))
590
- return false;
591
- if (dataType === index$1.ClientLayoutItemFieldDataType.INTEGER) {
592
- return Number.isInteger(num);
593
- }
594
- if (dataType === index$1.ClientLayoutItemFieldDataType.PERCENTAGE) {
595
- return num >= 0 && num <= 100;
596
- }
597
- return true;
598
- }
599
-
600
- function formatNumber(value, locale, options) {
601
- if (value === null || value === undefined || isNaN(value))
602
- return '';
603
- return new Intl.NumberFormat(locale, options).format(value);
604
- }
605
- function formatCurrency(amount, currency, locale) {
606
- if (amount === null || amount === undefined || isNaN(amount))
607
- return '';
608
- return new Intl.NumberFormat(locale, {
609
- style: 'currency',
610
- currency,
611
- minimumFractionDigits: 2,
612
- maximumFractionDigits: 2,
613
- }).format(amount);
614
- }
615
- function formatPercentage(value, locale, decimalPrecision = 2) {
616
- if (value === null || value === undefined || isNaN(value))
617
- return '';
618
- return new Intl.NumberFormat(locale, {
619
- style: 'percent',
620
- minimumFractionDigits: decimalPrecision,
621
- maximumFractionDigits: decimalPrecision,
622
- }).format(value);
623
- }
624
- function formatDate(value, locale) {
625
- if (!value)
626
- return '';
627
- const date = typeof value === 'string' ? new Date(value) : value;
628
- if (isNaN(date.getTime()))
629
- return '';
630
- return new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit' }).format(date);
631
- }
632
- function formatDateTime(value, locale) {
633
- if (!value)
634
- return '';
635
- const date = typeof value === 'string' ? new Date(value) : value;
636
- if (isNaN(date.getTime()))
637
- return '';
638
- return new Intl.DateTimeFormat(locale, {
639
- year: 'numeric',
640
- month: '2-digit',
641
- day: '2-digit',
642
- hour: '2-digit',
643
- minute: '2-digit',
644
- }).format(date);
645
- }
646
- function formatTime(value, locale) {
647
- if (!value)
648
- return '';
649
- // value is HH:MM or HH:MM:SS
650
- const [hours, minutes] = value.split(':').map(Number);
651
- const date = new Date();
652
- date.setHours(hours, minutes, 0, 0);
653
- return new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit' }).format(date);
654
- }
655
- function parseLocalizedNumber(str, locale) {
656
- var _a, _b, _c, _d;
657
- if (!str || !str.trim())
658
- return null;
659
- // Detect decimal and thousands separators from the locale
660
- const parts = new Intl.NumberFormat(locale).formatToParts(1234567.89);
661
- const groupSep = (_b = (_a = parts.find((p) => p.type === 'group')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ',';
662
- const decimalSep = (_d = (_c = parts.find((p) => p.type === 'decimal')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '.';
663
- // Remove group separators, replace decimal separator with '.'
664
- const normalized = str
665
- .replace(new RegExp(`\\${groupSep}`, 'g'), '')
666
- .replace(new RegExp(`\\${decimalSep}`), '.')
667
- .replace('%', '')
668
- .trim();
669
- const parsed = parseFloat(normalized);
670
- return isNaN(parsed) ? null : parsed;
671
- }
672
-
673
- const mrdCurrencyFieldScss = () => `.sc-mrd-currency-field-h{display:block}.mrd-currency-field.sc-mrd-currency-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-currency-field__label.sc-mrd-currency-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-currency-field__label--required.sc-mrd-currency-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-currency-field__row.sc-mrd-currency-field{display:flex;gap:var(--mrd-space-2);align-items:stretch}.mrd-currency-field__amount.sc-mrd-currency-field{flex:1;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;text-align:right;box-sizing:border-box}.mrd-currency-field__amount.sc-mrd-currency-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-currency-field__amount.sc-mrd-currency-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-currency-field__amount--error.sc-mrd-currency-field{border-color:var(--mrd-border-color-error)}.mrd-currency-field__amount--error.sc-mrd-currency-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-currency-field__currency.sc-mrd-currency-field{width:90px;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-input-color);background-color:var(--mrd-color-neutral-50);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;cursor:pointer;box-sizing:border-box;appearance:none;text-align:center}.mrd-currency-field__currency.sc-mrd-currency-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-currency-field__currency.sc-mrd-currency-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-currency-field__error.sc-mrd-currency-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
674
-
675
- const COMMON_CURRENCIES = [
676
- 'EUR', 'USD', 'GBP', 'CHF', 'JPY', 'CNY', 'AUD', 'CAD',
677
- 'SEK', 'NOK', 'DKK', 'NZD', 'SGD', 'HKD', 'PLN', 'CZK',
678
- 'HUF', 'MXN', 'BRL', 'INR', 'TRY', 'ZAR', 'AED', 'SAR',
679
- ];
680
- const MrdCurrencyField = class {
681
- constructor(hostRef) {
682
- index.registerInstance(this, hostRef);
683
- this.mrdChange = index.createEvent(this, "mrdChange");
684
- this.mrdBlur = index.createEvent(this, "mrdBlur");
685
- this.name = '';
686
- this.label = '';
687
- this.value = { amount: null, currency: 'EUR' };
688
- this.required = false;
689
- this.disabled = false;
690
- this.locale = navigator.language;
691
- this.amountDisplay = '';
692
- this.currency = 'EUR';
693
- this.error = '';
694
- this.handleAmountInput = (e) => {
695
- this.amountDisplay = e.target.value;
696
- };
697
- this.handleAmountBlur = (e) => {
698
- const raw = e.target.value;
699
- const parsed = parseLocalizedNumber(raw, this.locale);
700
- if (this.required && !validateRequired(raw)) {
701
- this.error = t('required', this.locale);
702
- }
703
- else {
704
- this.error = '';
705
- }
706
- const val = { amount: parsed, currency: this.currency };
707
- this.mrdChange.emit({ name: this.name, value: val });
708
- this.mrdBlur.emit({ name: this.name, value: val });
709
- };
710
- this.handleCurrencyChange = (e) => {
711
- this.currency = e.target.value;
712
- const parsed = parseLocalizedNumber(this.amountDisplay, this.locale);
713
- this.mrdChange.emit({ name: this.name, value: { amount: parsed, currency: this.currency } });
714
- };
715
- }
716
- componentWillLoad() {
717
- if (this.value) {
718
- this.currency = this.value.currency || 'EUR';
719
- this.amountDisplay = this.value.amount !== null ? String(this.value.amount) : '';
720
- }
721
- }
722
- render() {
723
- const hasError = !!this.error;
724
- return (index.h(index.Host, { key: 'd3450e9c26b1a755d3e6a5a3561d93b2ac566a28' }, index.h("div", { key: 'b66942cc1953daff728504deef8a9cc1330ef549', class: "mrd-currency-field" }, this.label && (index.h("label", { key: '3d3f2f06e9ffea944552f0f7cf3150d0246c54f0', class: `mrd-currency-field__label${this.required ? ' mrd-currency-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'd30a2adfceefdbefef2d4fe6633a163a753b15d0', class: "mrd-currency-field__row" }, index.h("input", { key: '9af09b19b6cbe24498d6ca8edf7b28f675afdec5', class: `mrd-currency-field__amount${hasError ? ' mrd-currency-field__amount--error' : ''}`, type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), index.h("select", { key: '21e55b04b7bf16586b5cfaa82d77db45c6dedf21', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (index.h("option", { key: c, value: c, selected: c === this.currency }, c))))), hasError && index.h("span", { key: '7a0006d4230557cf9c58f82f21de73b5d12f7e17', class: "mrd-currency-field__error" }, this.error))));
725
- }
726
- };
727
- MrdCurrencyField.style = mrdCurrencyFieldScss();
728
-
729
- const mrdDateFieldScss = () => `.sc-mrd-date-field-h{display:block}.mrd-date-field.sc-mrd-date-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-date-field__label.sc-mrd-date-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-date-field__label--required.sc-mrd-date-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-date-field__input.sc-mrd-date-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;cursor:pointer}.mrd-date-field__input.sc-mrd-date-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-date-field__input.sc-mrd-date-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-date-field__input--error.sc-mrd-date-field{border-color:var(--mrd-border-color-error)}.mrd-date-field__input--error.sc-mrd-date-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-date-field__error.sc-mrd-date-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
730
-
731
- const MrdDateField = class {
732
- constructor(hostRef) {
733
- index.registerInstance(this, hostRef);
734
- this.mrdChange = index.createEvent(this, "mrdChange");
735
- this.mrdBlur = index.createEvent(this, "mrdBlur");
736
- this.name = '';
737
- this.label = '';
738
- this.value = '';
739
- this.required = false;
740
- this.disabled = false;
741
- this.locale = navigator.language;
742
- this.error = '';
743
- this.handleChange = (e) => {
744
- const val = e.target.value;
745
- if (this.required && !validateRequired(val)) {
746
- this.error = t('required', this.locale);
747
- }
748
- else {
749
- this.error = '';
750
- }
751
- this.mrdChange.emit({ name: this.name, value: val });
752
- };
753
- this.handleBlur = (e) => {
754
- const val = e.target.value;
755
- this.mrdBlur.emit({ name: this.name, value: val });
756
- };
757
- }
758
- render() {
759
- const hasError = !!this.error;
760
- return (index.h(index.Host, { key: '84c777fc68a95e0b1ceb08d61e3af7afa199ce94' }, index.h("div", { key: '6653d94ab79c74342ce792792547018e4464a814', class: "mrd-date-field" }, this.label && (index.h("label", { key: '2fa7b7ec50c784f9410ca48b93d50e39dc6e0bee', class: `mrd-date-field__label${this.required ? ' mrd-date-field__label--required' : ''}` }, this.label)), index.h("input", { key: 'f79ebbaf0e28ad7668a5400d1df514b66457b72d', class: `mrd-date-field__input${hasError ? ' mrd-date-field__input--error' : ''}`, type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && index.h("span", { key: 'e52f0b720d76e8ba0586fb40395b6875860762db', class: "mrd-date-field__error" }, this.error))));
761
- }
762
- };
763
- MrdDateField.style = mrdDateFieldScss();
764
-
765
- const mrdDatetimeFieldScss = () => `.sc-mrd-datetime-field-h{display:block}.mrd-datetime-field.sc-mrd-datetime-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-datetime-field__label.sc-mrd-datetime-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-datetime-field__label--required.sc-mrd-datetime-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-datetime-field__input.sc-mrd-datetime-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;cursor:pointer}.mrd-datetime-field__input.sc-mrd-datetime-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-datetime-field__input.sc-mrd-datetime-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-datetime-field__input--error.sc-mrd-datetime-field{border-color:var(--mrd-border-color-error)}.mrd-datetime-field__input--error.sc-mrd-datetime-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-datetime-field__error.sc-mrd-datetime-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
766
-
767
- const MrdDatetimeField = class {
768
- constructor(hostRef) {
769
- index.registerInstance(this, hostRef);
770
- this.mrdChange = index.createEvent(this, "mrdChange");
771
- this.mrdBlur = index.createEvent(this, "mrdBlur");
772
- this.name = '';
773
- this.label = '';
774
- this.value = '';
775
- this.required = false;
776
- this.disabled = false;
777
- this.locale = navigator.language;
778
- this.error = '';
779
- this.localValue = '';
780
- this.handleChange = (e) => {
781
- const localVal = e.target.value;
782
- this.localValue = localVal;
783
- if (this.required && !validateRequired(localVal)) {
784
- this.error = t('required', this.locale);
785
- }
786
- else {
787
- this.error = '';
788
- }
789
- this.mrdChange.emit({ name: this.name, value: this.localToUtc(localVal) });
790
- };
791
- this.handleBlur = (e) => {
792
- const localVal = e.target.value;
793
- this.mrdBlur.emit({ name: this.name, value: this.localToUtc(localVal) });
794
- };
795
- }
796
- componentWillLoad() {
797
- this.localValue = this.utcToLocal(this.value);
798
- }
799
- valueChanged(newVal) {
800
- this.localValue = this.utcToLocal(newVal);
801
- }
802
- // UTC ISO string → "YYYY-MM-DDTHH:mm" in local timezone (for datetime-local input)
803
- utcToLocal(utcStr) {
804
- if (!utcStr)
805
- return '';
806
- const d = new Date(utcStr);
807
- if (isNaN(d.getTime()))
808
- return '';
809
- const pad = (n) => String(n).padStart(2, '0');
810
- return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
811
- }
812
- // "YYYY-MM-DDTHH:mm" local time → UTC ISO string (for API)
813
- localToUtc(localStr) {
814
- if (!localStr)
815
- return '';
816
- const d = new Date(localStr);
817
- if (isNaN(d.getTime()))
818
- return '';
819
- return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
820
- }
821
- render() {
822
- const hasError = !!this.error;
823
- return (index.h(index.Host, { key: '6052b08238484bee345ae4bb9b3025c7f2474c35' }, index.h("div", { key: 'f9073be4496e35a7d40405ae4e6a27a5c1607626', class: "mrd-datetime-field" }, this.label && (index.h("label", { key: '5933c3b2dfcae9bfad378441210ada6b625657a2', class: `mrd-datetime-field__label${this.required ? ' mrd-datetime-field__label--required' : ''}` }, this.label)), index.h("input", { key: '7a947b104c38960d2326a4877e4ca52db9fd9d84', class: `mrd-datetime-field__input${hasError ? ' mrd-datetime-field__input--error' : ''}`, type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && index.h("span", { key: 'cea3dba7e14e18a3a08394ef3027b661f1808969', class: "mrd-datetime-field__error" }, this.error))));
824
- }
825
- static get watchers() { return {
826
- "value": [{
827
- "valueChanged": 0
828
- }]
829
- }; }
830
- };
831
- MrdDatetimeField.style = mrdDatetimeFieldScss();
832
-
833
- const mrdEmailFieldScss = () => `.sc-mrd-email-field-h{display:block}.mrd-email-field.sc-mrd-email-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-email-field__label.sc-mrd-email-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-email-field__label--required.sc-mrd-email-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-email-field__input.sc-mrd-email-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box}.mrd-email-field__input.sc-mrd-email-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-email-field__input.sc-mrd-email-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-email-field__input.sc-mrd-email-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-email-field__input--error.sc-mrd-email-field{border-color:var(--mrd-border-color-error)}.mrd-email-field__input--error.sc-mrd-email-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-email-field__error.sc-mrd-email-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
834
-
835
- const MrdEmailField = class {
836
- constructor(hostRef) {
837
- index.registerInstance(this, hostRef);
838
- this.mrdChange = index.createEvent(this, "mrdChange");
839
- this.mrdBlur = index.createEvent(this, "mrdBlur");
840
- this.name = '';
841
- this.label = '';
842
- this.value = '';
843
- this.placeholder = '';
844
- this.required = false;
845
- this.disabled = false;
846
- this.locale = navigator.language;
847
- this.error = '';
848
- this.handleInput = (e) => {
849
- const val = e.target.value;
850
- this.mrdChange.emit({ name: this.name, value: val });
851
- };
852
- this.handleBlur = (e) => {
853
- const val = e.target.value;
854
- if (this.required && !validateRequired(val)) {
855
- this.error = t('required', this.locale);
856
- }
857
- else if (val && !validateEmail(val)) {
858
- this.error = t('invalid_email', this.locale);
859
- }
860
- else {
861
- this.error = '';
862
- }
863
- this.mrdBlur.emit({ name: this.name, value: val });
864
- };
865
- }
866
- render() {
867
- const hasError = !!this.error;
868
- return (index.h(index.Host, { key: '851ec092957ab86e811b292eaabe29d04a600fe0' }, index.h("div", { key: '2d8969d60378f3161656369494549d682de8ec0e', class: "mrd-email-field" }, this.label && (index.h("label", { key: '7a35cc60d4804097e1a54f984c7da1829f6bbd11', class: `mrd-email-field__label${this.required ? ' mrd-email-field__label--required' : ''}` }, this.label)), index.h("input", { key: '1fc20e860aa021886f7ed522c3a0c8dd2cb1e093', class: `mrd-email-field__input${hasError ? ' mrd-email-field__input--error' : ''}`, type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && index.h("span", { key: 'a44b3b41b7cd6b8c643cc64e6aadd884a2ba4961', class: "mrd-email-field__error" }, this.error))));
869
- }
870
- };
871
- MrdEmailField.style = mrdEmailFieldScss();
872
-
873
- const mrdFieldScss = () => `.sc-mrd-field-h{display:block}.mrd-field__inner.sc-mrd-field{display:block;width:100%}.mrd-field__history-editor.sc-mrd-field{margin-top:var(--mrd-space-2);display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-field__history-editor-label.sc-mrd-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-500)}.mrd-field__history-editor-row.sc-mrd-field{display:flex;align-items:center;gap:var(--mrd-space-2)}.mrd-field__history-editor-sep.sc-mrd-field{flex-shrink:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500)}.mrd-field__history-editor-value.sc-mrd-field{flex:1 1 0;min-width:0;height:var(--mrd-input-height);padding:0 var(--mrd-space-3);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-800);background-color:var(--mrd-color-white);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);outline:none;transition:border-color var(--mrd-transition-fast), box-shadow var(--mrd-transition-fast)}.mrd-field__history-editor-value.sc-mrd-field:focus{border-color:var(--mrd-color-primary);box-shadow:var(--mrd-shadow-focus)}.mrd-field__history-editor-until.sc-mrd-field{flex:0 0 10rem;height:var(--mrd-input-height);padding:0 var(--mrd-space-3);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-800);background-color:var(--mrd-color-white);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);outline:none;transition:border-color var(--mrd-transition-fast), box-shadow var(--mrd-transition-fast)}.mrd-field__history-editor-until.sc-mrd-field:focus{border-color:var(--mrd-color-primary);box-shadow:var(--mrd-shadow-focus)}.mrd-field__history-editor-remove.sc-mrd-field{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;padding:0;background:transparent;border:none;border-radius:var(--mrd-border-radius-sm);color:var(--mrd-color-neutral-400);cursor:pointer;transition:color var(--mrd-transition-fast), background-color var(--mrd-transition-fast)}.mrd-field__history-editor-remove.sc-mrd-field:hover{color:var(--mrd-color-danger);background-color:var(--mrd-color-danger-light)}.mrd-field__history-editor-remove.sc-mrd-field svg.sc-mrd-field{width:1rem;height:1rem}.mrd-field__history-editor-add.sc-mrd-field{align-self:flex-start;padding:var(--mrd-space-1) var(--mrd-space-3);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-primary);background:transparent;border:var(--mrd-border-width) solid var(--mrd-color-primary);border-radius:var(--mrd-border-radius-md);cursor:pointer;transition:background-color var(--mrd-transition-fast), color var(--mrd-transition-fast)}.mrd-field__history-editor-add.sc-mrd-field:hover{background-color:var(--mrd-color-primary-light)}`;
874
-
875
- const MrdField = class {
876
- constructor(hostRef) {
877
- index.registerInstance(this, hostRef);
878
- this.mrdChange = index.createEvent(this, "mrdChange");
879
- this.mrdBlur = index.createEvent(this, "mrdBlur");
880
- this.mrdSearch = index.createEvent(this, "mrdSearch");
881
- this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
882
- this.mrdUpload = index.createEvent(this, "mrdUpload");
883
- this.locale = navigator.language;
884
- this.historyEntries = [];
885
- this.currentValue = undefined;
886
- this.handleChange = (e) => {
887
- var _a, _b, _c, _d;
888
- e.stopPropagation();
889
- const hist = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.historyEnabled) !== null && _b !== void 0 ? _b : (_d = (_c = this.item) === null || _c === void 0 ? void 0 : _c.field) === null || _d === void 0 ? void 0 : _d.historyEnabled;
890
- if (hist) {
891
- this.currentValue = e.detail.value;
892
- this.mrdChange.emit({
893
- name: e.detail.name,
894
- value: { current: e.detail.value, history: this.historyEntries },
895
- });
896
- }
897
- else {
898
- this.mrdChange.emit(e.detail);
899
- }
900
- };
901
- this.handleBlur = (e) => {
902
- var _a, _b, _c, _d;
903
- e.stopPropagation();
904
- const hist = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.historyEnabled) !== null && _b !== void 0 ? _b : (_d = (_c = this.item) === null || _c === void 0 ? void 0 : _c.field) === null || _d === void 0 ? void 0 : _d.historyEnabled;
905
- if (hist) {
906
- this.mrdBlur.emit({
907
- name: e.detail.name,
908
- value: { current: this.currentValue, history: this.historyEntries },
909
- });
910
- }
911
- else {
912
- this.mrdBlur.emit(e.detail);
913
- }
914
- };
915
- this.handleSearch = (e) => {
916
- e.stopPropagation();
917
- this.mrdSearch.emit(e.detail);
918
- };
919
- this.handleFetchAll = (e) => {
920
- e.stopPropagation();
921
- this.mrdFetchAll.emit(e.detail);
922
- };
923
- this.handleUpload = (e) => {
924
- e.stopPropagation();
925
- this.mrdUpload.emit(e.detail);
926
- };
927
- }
928
- componentWillLoad() {
929
- this.initHistoryState();
930
- }
931
- valueChanged() {
932
- this.initHistoryState();
933
- }
934
- initHistoryState() {
935
- var _a, _b, _c, _d, _e;
936
- const hist = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.historyEnabled) !== null && _b !== void 0 ? _b : (_d = (_c = this.item) === null || _c === void 0 ? void 0 : _c.field) === null || _d === void 0 ? void 0 : _d.historyEnabled;
937
- if (!hist)
938
- return;
939
- const raw = this.value;
940
- this.currentValue = (_e = raw === null || raw === void 0 ? void 0 : raw.current) !== null && _e !== void 0 ? _e : raw;
941
- this.historyEntries = Array.isArray(raw === null || raw === void 0 ? void 0 : raw.history) ? [...raw.history] : [];
942
- }
943
- getDisplayValue() {
944
- var _a, _b, _c, _d;
945
- const hist = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.historyEnabled) !== null && _b !== void 0 ? _b : (_d = (_c = this.item) === null || _c === void 0 ? void 0 : _c.field) === null || _d === void 0 ? void 0 : _d.historyEnabled;
946
- if (hist && this.value !== null && typeof this.value === 'object' && 'current' in this.value) {
947
- return this.value.current;
948
- }
949
- return this.value;
950
- }
951
- historyValueInputType() {
952
- var _a;
953
- switch ((_a = this.item) === null || _a === void 0 ? void 0 : _a.dataType) {
954
- case index$1.ClientLayoutItemFieldDataType.DATE: return 'date';
955
- case index$1.ClientLayoutItemFieldDataType.DATETIME: return 'datetime-local';
956
- case index$1.ClientLayoutItemFieldDataType.TIME: return 'time';
957
- case index$1.ClientLayoutItemFieldDataType.INTEGER:
958
- case index$1.ClientLayoutItemFieldDataType.DECIMAL:
959
- case index$1.ClientLayoutItemFieldDataType.PERCENTAGE: return 'number';
960
- case index$1.ClientLayoutItemFieldDataType.EMAIL: return 'email';
961
- default: return 'text';
962
- }
963
- }
964
- emitHistoryChange(entries) {
965
- this.historyEntries = entries;
966
- this.mrdChange.emit({
967
- name: this.item.name,
968
- value: { current: this.currentValue, history: entries },
969
- });
970
- }
971
- renderHistoryEditor() {
972
- var _a, _b, _c, _d;
973
- const hist = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.historyEnabled) !== null && _b !== void 0 ? _b : (_d = (_c = this.item) === null || _c === void 0 ? void 0 : _c.field) === null || _d === void 0 ? void 0 : _d.historyEnabled;
974
- if (!hist)
975
- return null;
976
- const { locale } = this;
977
- const valueType = this.historyValueInputType();
978
- const updateEntry = (i, field, val) => {
979
- const updated = this.historyEntries.map((e, idx) => idx === i ? Object.assign(Object.assign({}, e), { [field]: val }) : e);
980
- this.emitHistoryChange(updated);
981
- };
982
- const removeEntry = (i) => {
983
- this.emitHistoryChange(this.historyEntries.filter((_, idx) => idx !== i));
984
- };
985
- const addEntry = () => {
986
- this.emitHistoryChange([...this.historyEntries, { value: '', until: '' }]);
987
- };
988
- return (index.h("div", { class: "mrd-field__history-editor" }, this.historyEntries.length > 0 && (index.h("span", { class: "mrd-field__history-editor-label" }, t('history_badge_tooltip', locale))), this.historyEntries.map((entry, i) => (index.h("div", { key: String(i), class: "mrd-field__history-editor-row" }, index.h("input", { class: "mrd-field__history-editor-value", type: valueType, value: entry.value, onInput: (e) => updateEntry(i, 'value', e.target.value) }), index.h("span", { class: "mrd-field__history-editor-sep" }, t('history_until', locale)), index.h("input", { class: "mrd-field__history-editor-until", type: "date", value: entry.until, onInput: (e) => updateEntry(i, 'until', e.target.value) }), index.h("button", { type: "button", class: "mrd-field__history-editor-remove", onClick: () => removeEntry(i), "aria-label": t('remove', locale) }, index.h("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { "fill-rule": "evenodd", d: "M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z", "clip-rule": "evenodd" })))))), index.h("button", { type: "button", class: "mrd-field__history-editor-add", onClick: addEntry }, "+ ", t('add', locale))));
989
- }
990
- renderLeafField(displayValue) {
991
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
992
- const { item, locale } = this;
993
- const commonProps = {
994
- name: item.name,
995
- label: item.label,
996
- required: item.required,
997
- disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false,
998
- locale,
999
- onMrdChange: this.handleChange,
1000
- onMrdBlur: this.handleBlur,
1001
- };
1002
- switch (item.dataType) {
1003
- case index$1.ClientLayoutItemFieldDataType.TEXT:
1004
- return (index.h("mrd-text-field", Object.assign({}, commonProps, { value: (_b = displayValue) !== null && _b !== void 0 ? _b : '', placeholder: (_c = item.placeholder) !== null && _c !== void 0 ? _c : '' })));
1005
- case index$1.ClientLayoutItemFieldDataType.TEXTBLOCK:
1006
- return (index.h("mrd-textarea-field", Object.assign({}, commonProps, { value: (_d = displayValue) !== null && _d !== void 0 ? _d : '', placeholder: (_e = item.placeholder) !== null && _e !== void 0 ? _e : '' })));
1007
- case index$1.ClientLayoutItemFieldDataType.INTEGER:
1008
- case index$1.ClientLayoutItemFieldDataType.DECIMAL:
1009
- case index$1.ClientLayoutItemFieldDataType.PERCENTAGE:
1010
- return (index.h("mrd-number-field", Object.assign({}, commonProps, { value: (_f = displayValue) !== null && _f !== void 0 ? _f : null, dataType: item.dataType, decimalPrecision: (_g = item.decimalPrecision) !== null && _g !== void 0 ? _g : 2, placeholder: (_h = item.placeholder) !== null && _h !== void 0 ? _h : '' })));
1011
- case index$1.ClientLayoutItemFieldDataType.CURRENCY:
1012
- return (index.h("mrd-currency-field", Object.assign({}, commonProps, { value: (_j = displayValue) !== null && _j !== void 0 ? _j : { amount: null, currency: (_k = item.currencyCode) !== null && _k !== void 0 ? _k : 'EUR' } })));
1013
- case index$1.ClientLayoutItemFieldDataType.BOOLEAN:
1014
- return (index.h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_l = displayValue) !== null && _l !== void 0 ? _l : false })));
1015
- case index$1.ClientLayoutItemFieldDataType.DATE:
1016
- return (index.h("mrd-date-field", Object.assign({}, commonProps, { value: (_m = displayValue) !== null && _m !== void 0 ? _m : '' })));
1017
- case index$1.ClientLayoutItemFieldDataType.DATETIME:
1018
- return (index.h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_o = displayValue) !== null && _o !== void 0 ? _o : '' })));
1019
- case index$1.ClientLayoutItemFieldDataType.TIME:
1020
- return (index.h("mrd-time-field", Object.assign({}, commonProps, { value: (_p = displayValue) !== null && _p !== void 0 ? _p : '' })));
1021
- case index$1.ClientLayoutItemFieldDataType.EMAIL:
1022
- return (index.h("mrd-email-field", Object.assign({}, commonProps, { value: (_q = displayValue) !== null && _q !== void 0 ? _q : '', placeholder: (_r = item.placeholder) !== null && _r !== void 0 ? _r : '' })));
1023
- case index$1.ClientLayoutItemFieldDataType.HYPERLINK:
1024
- return (index.h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_s = displayValue) !== null && _s !== void 0 ? _s : '', placeholder: (_t = item.placeholder) !== null && _t !== void 0 ? _t : '' })));
1025
- case index$1.ClientLayoutItemFieldDataType.LIST:
1026
- return (index.h("mrd-list-field", Object.assign({}, commonProps, { value: (_u = displayValue) !== null && _u !== void 0 ? _u : '', multiple: (_v = item.multiple) !== null && _v !== void 0 ? _v : false, listItems: (_w = item.listItems) !== null && _w !== void 0 ? _w : [] })));
1027
- case index$1.ClientLayoutItemFieldDataType.FILE:
1028
- return (index.h("mrd-file-field", Object.assign({}, commonProps, { value: displayValue, accept: (_x = item.accept) !== null && _x !== void 0 ? _x : '', maxSize: (_y = item.maxSize) !== null && _y !== void 0 ? _y : 0, onMrdUpload: this.handleUpload })));
1029
- case index$1.ClientLayoutItemFieldDataType.IMAGE:
1030
- return (index.h("mrd-image-field", Object.assign({}, commonProps, { value: displayValue, accept: (_z = item.accept) !== null && _z !== void 0 ? _z : 'image/*', maxSize: (_0 = item.maxSize) !== null && _0 !== void 0 ? _0 : 0, onMrdUpload: this.handleUpload })));
1031
- case index$1.ClientLayoutItemFieldDataType.LONGTEXT:
1032
- return (index.h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_1 = displayValue) !== null && _1 !== void 0 ? _1 : '', placeholder: (_2 = item.placeholder) !== null && _2 !== void 0 ? _2 : '' })));
1033
- case index$1.ClientLayoutItemFieldDataType.SECRET:
1034
- return (index.h("mrd-secret-field", Object.assign({}, commonProps, { value: (_3 = displayValue) !== null && _3 !== void 0 ? _3 : '', placeholder: (_4 = item.placeholder) !== null && _4 !== void 0 ? _4 : '' })));
1035
- default:
1036
- return null;
1037
- }
1038
- }
1039
- render() {
1040
- var _a, _b, _c, _d, _e, _f;
1041
- const { item, locale, value } = this;
1042
- if (item.type === index$1.ClientLayoutItemType.RELATION) {
1043
- return (index.h(index.Host, null, index.h("mrd-relation-field", { name: item.name, label: item.label, required: item.required, disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false, locale: locale, relatedClass: item.relatedClass, mostSignificantClass: (_b = item.mostSignificantClass) !== null && _b !== void 0 ? _b : '', displayType: (_c = item.displayType) !== null && _c !== void 0 ? _c : index$1.ClientLayoutItemRelationDisplayType.SEARCH, editBehavior: (_d = item.editBehavior) !== null && _d !== void 0 ? _d : null, commonRelation: item.commonRelation, multiple: (_e = item.multiple) !== null && _e !== void 0 ? _e : false, dropdownValues: (_f = item.dropdownValues) !== null && _f !== void 0 ? _f : [], value: value, onMrdChange: this.handleChange, onMrdBlur: this.handleBlur, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll })));
1044
- }
1045
- if (item.type !== index$1.ClientLayoutItemType.FIELD) {
1046
- return index.h(index.Host, null);
1047
- }
1048
- const displayValue = this.getDisplayValue();
1049
- return (index.h(index.Host, null, index.h("div", { class: "mrd-field__inner" }, this.renderLeafField(displayValue), this.renderHistoryEditor())));
1050
- }
1051
- get el() { return index.getElement(this); }
1052
- static get watchers() { return {
1053
- "value": [{
1054
- "valueChanged": 0
1055
- }]
1056
- }; }
1057
- };
1058
- MrdField.style = mrdFieldScss();
1059
-
1060
- const mrdFileFieldScss = () => `.sc-mrd-file-field-h{display:block}.mrd-file-field.sc-mrd-file-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-file-field__label.sc-mrd-file-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-file-field__label--required.sc-mrd-file-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-file-field__zone.sc-mrd-file-field{display:flex;align-items:center;justify-content:center;padding:var(--mrd-space-6);border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-file-field__zone.sc-mrd-file-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--dragging.sc-mrd-file-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--error.sc-mrd-file-field{border-color:var(--mrd-border-color-error)}.mrd-file-field__zone--disabled.sc-mrd-file-field{opacity:0.6;cursor:not-allowed}.mrd-file-field__zone--disabled.sc-mrd-file-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-file-field__input.sc-mrd-file-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;pointer-events:none}.mrd-file-field__prompt.sc-mrd-file-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-file-field__upload-icon.sc-mrd-file-field{width:32px;height:32px;color:var(--mrd-color-neutral-400)}.mrd-file-field__browse.sc-mrd-file-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-file-field__selected.sc-mrd-file-field{display:flex;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-700)}.mrd-file-field__icon.sc-mrd-file-field{width:20px;height:20px;color:var(--mrd-color-primary);flex-shrink:0}.mrd-file-field__filename.sc-mrd-file-field{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.mrd-file-field__clear.sc-mrd-file-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-neutral-400);font-size:var(--mrd-font-size-sm);padding:var(--mrd-space-1);border-radius:var(--mrd-border-radius-sm);line-height:1}.mrd-file-field__clear.sc-mrd-file-field:hover{color:var(--mrd-color-danger);background-color:var(--mrd-color-danger-light)}.mrd-file-field__spinner.sc-mrd-file-field{display:inline-block;flex-shrink:0;width:18px;height:18px;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-file-spin 0.6s linear infinite}@keyframes mrd-file-spin{to{transform:rotate(360deg)}}.mrd-file-field__error.sc-mrd-file-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
1061
-
1062
- const MrdFileField = class {
1063
- constructor(hostRef) {
1064
- index.registerInstance(this, hostRef);
1065
- this.mrdChange = index.createEvent(this, "mrdChange");
1066
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1067
- this.mrdUpload = index.createEvent(this, "mrdUpload");
1068
- this.name = '';
1069
- this.label = '';
1070
- this.value = null;
1071
- this.required = false;
1072
- this.disabled = false;
1073
- this.locale = navigator.language;
1074
- this.accept = '';
1075
- this.maxSize = 0; // bytes, 0 = no limit
1076
- this.fileName = '';
1077
- this.isDragging = false;
1078
- this.uploading = false;
1079
- this.error = '';
1080
- this.handleInputChange = (e) => {
1081
- var _a;
1082
- const files = e.target.files;
1083
- this.handleFile((_a = files === null || files === void 0 ? void 0 : files[0]) !== null && _a !== void 0 ? _a : null);
1084
- };
1085
- this.handleDragOver = (e) => {
1086
- e.preventDefault();
1087
- this.isDragging = true;
1088
- };
1089
- this.handleDragLeave = () => {
1090
- this.isDragging = false;
1091
- };
1092
- this.handleDrop = (e) => {
1093
- var _a, _b, _c;
1094
- e.preventDefault();
1095
- this.isDragging = false;
1096
- const file = (_c = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : null;
1097
- this.handleFile(file);
1098
- };
1099
- this.handleZoneClick = () => {
1100
- var _a;
1101
- if (!this.disabled && !this.uploading) {
1102
- (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
1103
- }
1104
- };
1105
- this.handleClear = (e) => {
1106
- e.stopPropagation();
1107
- this.fileName = '';
1108
- this.error = '';
1109
- this.uploading = false;
1110
- if (this.fileInputRef)
1111
- this.fileInputRef.value = '';
1112
- this.mrdChange.emit({ name: this.name, value: null });
1113
- };
1114
- }
1115
- /** When the host provides a URI back via setFieldValue, the upload is done. */
1116
- valueChanged(newVal) {
1117
- if (typeof newVal === 'string' && newVal) {
1118
- this.uploading = false;
1119
- }
1120
- else if (!newVal) {
1121
- this.uploading = false;
1122
- this.fileName = '';
1123
- }
1124
- }
1125
- handleFile(file) {
1126
- if (!file) {
1127
- this.fileName = '';
1128
- this.uploading = false;
1129
- this.mrdChange.emit({ name: this.name, value: null });
1130
- return;
1131
- }
1132
- if (this.maxSize > 0 && file.size > this.maxSize) {
1133
- this.error = t('file_too_large', this.locale);
1134
- return;
1135
- }
1136
- this.error = '';
1137
- this.fileName = file.name;
1138
- this.uploading = true;
1139
- this.mrdChange.emit({ name: this.name, value: file });
1140
- this.mrdUpload.emit({ name: this.name, file });
1141
- }
1142
- render() {
1143
- const hasFile = this.uploading || (typeof this.value === 'string' && this.value) || this.fileName;
1144
- const hasError = !!this.error;
1145
- const zoneClass = [
1146
- 'mrd-file-field__zone',
1147
- this.isDragging ? 'mrd-file-field__zone--dragging' : '',
1148
- hasError ? 'mrd-file-field__zone--error' : '',
1149
- this.disabled || this.uploading ? 'mrd-file-field__zone--disabled' : '',
1150
- ].filter(Boolean).join(' ');
1151
- return (index.h(index.Host, { key: '2090102df8169226c1e66f87cbc837296e4b55d4' }, index.h("div", { key: '7a37a09df1bfa2eaf28ed04c806ad5f7c0337bb0', class: "mrd-file-field" }, this.label && (index.h("label", { key: '8f1fcb8adbb66b792be902c7c548e50db99b6a53', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), index.h("div", { key: '66d992298f537b24d69ce3ead3dd229f6d124f3d', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("input", { key: '95ba6560e71ee08c6b2526802727b29a18cdc454', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !hasFile, onChange: this.handleInputChange }), hasFile ? (index.h("div", { class: "mrd-file-field__selected" }, this.uploading ? (index.h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (index.h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), index.h("polyline", { points: "14 2 14 8 20 8" }))), index.h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (index.h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (index.h("div", { class: "mrd-file-field__prompt" }, index.h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("polyline", { points: "16 16 12 12 8 16" }), index.h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), index.h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), index.h("span", null, t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), hasError && index.h("span", { key: 'a6020e63bebb01e31a980a903f81badd486585aa', class: "mrd-file-field__error" }, this.error))));
1152
- }
1153
- static get watchers() { return {
1154
- "value": [{
1155
- "valueChanged": 0
1156
- }]
1157
- }; }
1158
- };
1159
- MrdFileField.style = mrdFileFieldScss();
1160
-
1161
- const mrdFormScss = () => `.sc-mrd-form-h{display:block}.mrd-form.sc-mrd-form{font-family:var(--mrd-font-family);width:100%}.mrd-form__title.sc-mrd-form{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-6) 0}.mrd-form__body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-5)}.mrd-form__field.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-form__field-error.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}.mrd-form__section.sc-mrd-form{border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);padding:var(--mrd-space-4) var(--mrd-space-5);margin:0}.mrd-form__section-legend.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-700);padding:0 var(--mrd-space-2)}.mrd-form__section-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);margin-top:var(--mrd-space-2)}.mrd-form__group.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-2)}.mrd-form__group-label.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);text-transform:uppercase;letter-spacing:0.05em}.mrd-form__group-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);padding-left:var(--mrd-space-4);border-left:3px solid var(--mrd-color-neutral-200)}.mrd-form__footer.sc-mrd-form{margin-top:var(--mrd-space-8);padding-top:var(--mrd-space-5);border-top:var(--mrd-border-width) solid var(--mrd-border-color);display:flex;justify-content:flex-end;gap:var(--mrd-space-3)}.mrd-form__submit.sc-mrd-form{display:inline-flex;align-items:center;justify-content:center;height:var(--mrd-input-height);padding:0 var(--mrd-space-6);background-color:var(--mrd-color-primary);color:var(--mrd-color-white);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);border:none;border-radius:var(--mrd-border-radius);cursor:pointer;transition:background-color var(--mrd-transition)}.mrd-form__submit.sc-mrd-form:hover{background-color:var(--mrd-color-primary-hover)}.mrd-form__submit.sc-mrd-form:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-form__submit.sc-mrd-form:active{background-color:var(--mrd-color-primary-dark)}.mrd-form__cancel.sc-mrd-form{display:inline-flex;align-items:center;justify-content:center;height:var(--mrd-input-height);padding:0 var(--mrd-space-6);background-color:transparent;color:var(--mrd-color-neutral-600);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);cursor:pointer;transition:background-color var(--mrd-transition), color var(--mrd-transition)}.mrd-form__cancel.sc-mrd-form:hover{background-color:var(--mrd-color-neutral-100);color:var(--mrd-color-neutral-800)}.mrd-form__cancel.sc-mrd-form:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-form__cancel.sc-mrd-form:active{background-color:var(--mrd-color-neutral-200)}`;
1162
-
1163
- const MrdForm = class {
1164
- constructor(hostRef) {
1165
- index.registerInstance(this, hostRef);
1166
- this.mrdSubmit = index.createEvent(this, "mrdSubmit");
1167
- this.mrdCancel = index.createEvent(this, "mrdCancel");
1168
- this.mrdSearch = index.createEvent(this, "mrdSearch");
1169
- this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
1170
- this.mrdUpload = index.createEvent(this, "mrdUpload");
1171
- this.locale = navigator.language;
1172
- this.values = {};
1173
- /**
1174
- * Absolute href of the parent/reference object (e.g. the clientAgreement href
1175
- * when creating an invoice from within a client agreement).
1176
- * Combined with `referenceClass`, mrd-form will automatically pre-fill the
1177
- * matching relation field so dependent DROPDOWN fields can be fetched on load
1178
- * — without the host app needing to know anything about the form layout.
1179
- */
1180
- /**
1181
- * Absolute href of the parent/reference object (e.g. the clientAgreement href
1182
- * when creating an invoice from within a client agreement).
1183
- * Combined with `referenceClass`, mrd-form will automatically pre-fill the
1184
- * matching relation field so dependent DROPDOWN fields can be fetched on load.
1185
- */
1186
- this.referenceHref = '';
1187
- /**
1188
- * The `mostSignificantClass` of the parent/reference object
1189
- * (e.g. `'clientAgreements'`). Used to locate the matching RELATION field.
1190
- */
1191
- this.referenceClass = '';
1192
- /** When true, a cancel button is shown next to the submit button. */
1193
- this.showCancel = false;
1194
- /**
1195
- * The currently logged-in user, resolved by the host via /accounts/me.
1196
- * Used to pre-fill RELATION fields whose defaultValue is "@me".
1197
- * May be null when not authenticated or not yet resolved.
1198
- */
1199
- this.me = null;
1200
- this.formValues = {};
1201
- this.errors = {};
1202
- this.submitted = false;
1203
- this.initialValues = {};
1204
- this.handleFieldChange = (e) => {
1205
- const { name, value } = e.detail;
1206
- const prevHref = this.getHref(this.formValues[name]);
1207
- this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
1208
- if (this.errors[name]) {
1209
- this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
1210
- }
1211
- // When a field changes, check if it is the commonRelation dependency for any
1212
- // DROPDOWN relation. If so, reset the dependent field and re-fetch its options.
1213
- // Skip when the effective href did not change (e.g. mrdBlur fires after mrdChange
1214
- // with the same value, which would otherwise trigger a duplicate fetch).
1215
- const newHref = this.getHref(value);
1216
- if (newHref === prevHref)
1217
- return;
1218
- for (const item of this.collectDependentDropdowns()) {
1219
- if (item.commonRelation !== name)
1220
- continue;
1221
- // Clear the dependent field's current selection (options have changed)
1222
- this.formValues = Object.assign(Object.assign({}, this.formValues), { [item.name]: null });
1223
- this.mrdFetchAll.emit({
1224
- name: item.name,
1225
- relatedClass: item.relatedClass,
1226
- mostSignificantClass: item.mostSignificantClass,
1227
- commonRelation: item.commonRelation,
1228
- filter: item.commonRelation + '_href',
1229
- filterValue: newHref, // empty string when dependency was cleared → host should clear the list
1230
- });
1231
- }
1232
- };
1233
- this.handleSearch = (e) => {
1234
- e.stopPropagation();
1235
- this.mrdSearch.emit(e.detail);
1236
- };
1237
- this.handleFetchAll = (e) => {
1238
- e.stopPropagation();
1239
- this.mrdFetchAll.emit(e.detail);
1240
- };
1241
- this.handleUpload = (e) => {
1242
- e.stopPropagation();
1243
- this.mrdUpload.emit(e.detail);
1244
- };
1245
- this.handleSubmit = (e) => {
1246
- e.preventDefault();
1247
- this.submitted = true;
1248
- if (this.validate()) {
1249
- this.mrdSubmit.emit(this.buildSubmitPayload());
1250
- }
1251
- };
1252
- }
1253
- componentWillLoad() {
1254
- var _a, _b;
1255
- this.initialValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
1256
- this.formValues = Object.assign({}, ((_b = this.values) !== null && _b !== void 0 ? _b : {}));
1257
- this.applyDefaultValues();
1258
- }
1259
- componentDidLoad() {
1260
- // Apply reference pre-fill and emit mrdFetchAll for dependent DROPDOWN fields.
1261
- // Deferred so Angular/host prop bindings are settled before we read them.
1262
- setTimeout(() => {
1263
- this.applyReferenceValue();
1264
- this.emitDependentFetchAll();
1265
- }, 0);
1266
- }
1267
- /** Sync formValues when the values prop is set from outside after mount
1268
- * (e.g. when pre-filling an existing record in edit mode). */
1269
- valuesChanged(newValues) {
1270
- this.initialValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
1271
- this.formValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
1272
- this.applyReferenceValue();
1273
- this.applyDefaultValues();
1274
- this.errors = {};
1275
- this.submitted = false;
1276
- // Re-check DROPDOWN dependencies now that formValues are updated
1277
- setTimeout(() => this.emitDependentFetchAll(), 0);
1278
- }
1279
- /** Re-apply @me defaults when the me prop arrives after mount. */
1280
- meChanged() {
1281
- this.applyDefaultValues();
1282
- }
1283
- /** Apply defaultValue from layout items to fields that have no value yet.
1284
- * Tokens: today() → YYYY-MM-DD, now() → YYYY-MM-DDTHH:mm, @me → this.me. */
1285
- applyDefaultValues() {
1286
- var _a, _b, _c, _d, _e, _f, _g, _h;
1287
- const allFields = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
1288
- const updates = {};
1289
- for (const item of allFields) {
1290
- if (!item.name)
1291
- continue;
1292
- const current = this.formValues[item.name];
1293
- if (current != null && current !== '')
1294
- continue;
1295
- const dv = (_e = (_c = item.defaultValue) !== null && _c !== void 0 ? _c : (_d = item.field) === null || _d === void 0 ? void 0 : _d.defaultValue) !== null && _e !== void 0 ? _e : (_f = item.relation) === null || _f === void 0 ? void 0 : _f.defaultValue;
1296
- if (!dv)
1297
- continue;
1298
- if (item.type === index$1.ClientLayoutItemType.FIELD) {
1299
- const resolved = this.resolveFieldDefault(dv, (_g = item.dataType) !== null && _g !== void 0 ? _g : (_h = item.field) === null || _h === void 0 ? void 0 : _h.dataType);
1300
- if (resolved != null)
1301
- updates[item.name] = resolved;
1302
- }
1303
- else if (item.type === index$1.ClientLayoutItemType.RELATION) {
1304
- if (dv === 'me()' && this.me) {
1305
- updates[item.name] = this.me;
1306
- }
1307
- }
1308
- }
1309
- if (Object.keys(updates).length > 0) {
1310
- this.formValues = Object.assign(Object.assign({}, this.formValues), updates);
1311
- }
1312
- }
1313
- resolveFieldDefault(dv, _dataType) {
1314
- if (dv === 'today()') {
1315
- return new Date().toISOString().slice(0, 10);
1316
- }
1317
- if (dv === 'now()') {
1318
- return new Date().toISOString().replace(/\.\d{3}Z$/, 'Z');
1319
- }
1320
- return dv;
1321
- }
1322
- /**
1323
- * When referenceHref + referenceClass are set, find the matching layout field
1324
- * and inject its value into formValues. This allows dependent DROPDOWN fields
1325
- * (those with commonRelation pointing to that field) to be fetched on load
1326
- * without the host app doing any form-domain logic.
1327
- *
1328
- * Two lookup strategies:
1329
- * 1. Find a RELATION whose mostSignificantClass matches referenceClass.
1330
- * 2. Fallback: find a DROPDOWN whose commonRelation field is absent from the
1331
- * layout (API omitted it because it is implied by the reference context).
1332
- */
1333
- applyReferenceValue() {
1334
- if (!this.referenceHref || !this.referenceClass)
1335
- return;
1336
- const fieldName = this.resolveReferenceFieldName();
1337
- if (!fieldName)
1338
- return;
1339
- // Only set when not already present (don't overwrite an explicit value)
1340
- if (!this.formValues[fieldName]) {
1341
- this.formValues = Object.assign(Object.assign({}, this.formValues), { [fieldName]: this.referenceHref });
1342
- }
1343
- }
1344
- resolveReferenceFieldName() {
1345
- var _a, _b;
1346
- const allItems = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
1347
- // Strategy 1: direct match on mostSignificantClass
1348
- const direct = allItems.find(item => item.type === index$1.ClientLayoutItemType.RELATION &&
1349
- item.mostSignificantClass === this.referenceClass);
1350
- if (direct === null || direct === void 0 ? void 0 : direct.name)
1351
- return direct.name;
1352
- // Strategy 2: a DROPDOWN whose commonRelation field was omitted from the layout
1353
- const layoutRelationNames = new Set(allItems
1354
- .filter(item => item.type === index$1.ClientLayoutItemType.RELATION)
1355
- .map(item => item.name));
1356
- for (const item of allItems) {
1357
- if (item.type === index$1.ClientLayoutItemType.RELATION &&
1358
- item.editBehavior === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN &&
1359
- item.commonRelation &&
1360
- !layoutRelationNames.has(item.commonRelation)) {
1361
- return item.commonRelation;
1362
- }
1363
- }
1364
- return null;
1365
- }
1366
- async setFieldValue(name, value) {
1367
- this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
1368
- if (this.errors[name]) {
1369
- this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
1370
- }
1371
- }
1372
- /** Collect all RELATION items that use editBehavior=DROPDOWN with a commonRelation. */
1373
- collectDependentDropdowns() {
1374
- var _a, _b;
1375
- return this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : [])
1376
- .filter(item => item.type === index$1.ClientLayoutItemType.RELATION &&
1377
- item.editBehavior === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN &&
1378
- !!item.commonRelation);
1379
- }
1380
- /** Emit mrdFetchAll for every dependent DROPDOWN whose filter value is currently set. */
1381
- emitDependentFetchAll() {
1382
- for (const item of this.collectDependentDropdowns()) {
1383
- const filterValue = this.getHref(this.formValues[item.commonRelation]);
1384
- if (filterValue) {
1385
- this.mrdFetchAll.emit({
1386
- name: item.name,
1387
- relatedClass: item.relatedClass,
1388
- mostSignificantClass: item.mostSignificantClass,
1389
- commonRelation: item.commonRelation,
1390
- filter: item.commonRelation + '_href',
1391
- filterValue,
1392
- });
1393
- }
1394
- }
1395
- }
1396
- /** Extract a plain href string from a form value, which can be a string or
1397
- * a RelationSearchResult-like object with an `id` field. */
1398
- getHref(value) {
1399
- if (!value)
1400
- return '';
1401
- if (typeof value === 'string')
1402
- return value;
1403
- if (typeof value === 'object' && 'id' in value)
1404
- return value.id;
1405
- return '';
1406
- }
1407
- collectFields(items) {
1408
- const fields = [];
1409
- for (const item of items) {
1410
- if (item.type === index$1.ClientLayoutItemType.FIELD || item.type === index$1.ClientLayoutItemType.RELATION) {
1411
- fields.push(item);
1412
- }
1413
- if (item.items) {
1414
- fields.push(...this.collectFields(item.items));
1415
- }
1416
- }
1417
- return fields;
1418
- }
1419
- validate() {
1420
- var _a, _b;
1421
- const newErrors = {};
1422
- const allFields = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
1423
- for (const item of allFields) {
1424
- if (!item.name)
1425
- continue;
1426
- if (item.required && !validateRequired(this.formValues[item.name])) {
1427
- newErrors[item.name] = t('required', this.locale);
1428
- }
1429
- }
1430
- this.errors = newErrors;
1431
- return Object.keys(newErrors).length === 0;
1432
- }
1433
- normalizeFieldValue(value) {
1434
- return (value === '' || value == null) ? null : value;
1435
- }
1436
- normalizeRelationValue(value) {
1437
- if (value == null || value === '')
1438
- return null;
1439
- if (typeof value === 'string')
1440
- return value || null;
1441
- if (Array.isArray(value)) {
1442
- return value.map(v => typeof v === 'object' && v !== null && 'id' in v ? v.id : String(v));
1443
- }
1444
- if (typeof value === 'object' && 'id' in value) {
1445
- return value.id || null;
1446
- }
1447
- return null;
1448
- }
1449
- deepEqual(a, b) {
1450
- if (a === b)
1451
- return true;
1452
- if (a == null && b == null)
1453
- return true;
1454
- if (a == null || b == null)
1455
- return false;
1456
- if (Array.isArray(a) && Array.isArray(b)) {
1457
- if (a.length !== b.length)
1458
- return false;
1459
- const sa = [...a].sort();
1460
- const sb = [...b].sort();
1461
- return JSON.stringify(sa) === JSON.stringify(sb);
1462
- }
1463
- return JSON.stringify(a) === JSON.stringify(b);
1464
- }
1465
- /** Build a submit payload containing only fields that changed relative to
1466
- * initialValues. For a new record (POST) initialValues is empty, so every
1467
- * non-null field is included. For edit (PATCH) only modified fields are sent,
1468
- * including fields explicitly cleared to null.
1469
- */
1470
- buildSubmitPayload() {
1471
- var _a, _b;
1472
- const payload = {};
1473
- const allFields = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
1474
- for (const item of allFields) {
1475
- if (!item.name)
1476
- continue;
1477
- const name = item.name;
1478
- if (item.type === index$1.ClientLayoutItemType.FIELD) {
1479
- const rawValue = this.formValues[name];
1480
- if (rawValue instanceof File)
1481
- continue;
1482
- const current = this.normalizeFieldValue(rawValue);
1483
- const initial = this.normalizeFieldValue(this.initialValues[name]);
1484
- if (this.deepEqual(current, initial))
1485
- continue;
1486
- payload[name] = current;
1487
- }
1488
- else if (item.type === index$1.ClientLayoutItemType.RELATION) {
1489
- const current = this.normalizeRelationValue(this.formValues[name]);
1490
- const initial = this.normalizeRelationValue(this.initialValues[name]);
1491
- if (this.deepEqual(current, initial))
1492
- continue;
1493
- payload[name] = current;
1494
- }
1495
- }
1496
- return payload;
1497
- }
1498
- renderItems(items) {
1499
- return items.map(item => {
1500
- var _a;
1501
- if (item.type === index$1.ClientLayoutItemType.SECTION) {
1502
- return (index.h("fieldset", { class: "mrd-form__section" }, item.label && index.h("legend", { class: "mrd-form__section-legend" }, item.label), index.h("div", { class: "mrd-form__section-body" }, item.items && this.renderItems(item.items))));
1503
- }
1504
- if (item.type === index$1.ClientLayoutItemType.GROUP) {
1505
- return (index.h("div", { class: "mrd-form__group" }, item.label && index.h("div", { class: "mrd-form__group-label" }, item.label), index.h("div", { class: "mrd-form__group-body" }, item.items && this.renderItems(item.items))));
1506
- }
1507
- const fieldName = (_a = item.name) !== null && _a !== void 0 ? _a : '';
1508
- const fieldValue = this.formValues[fieldName];
1509
- return (index.h("div", { class: "mrd-form__field" }, index.h("mrd-field", { item: item, locale: this.locale, value: fieldValue, onMrdChange: this.handleFieldChange, onMrdBlur: this.handleFieldChange, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll, onMrdUpload: this.handleUpload }), this.errors[fieldName] && (index.h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
1510
- });
1511
- }
1512
- render() {
1513
- if (!this.layout) {
1514
- return index.h(index.Host, null);
1515
- }
1516
- const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
1517
- return (index.h(index.Host, null, index.h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && index.h("h2", { class: "mrd-form__title" }, this.layout.title), index.h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), index.h("div", { class: "mrd-form__footer" }, index.h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale)), this.showCancel && (index.h("button", { type: "button", class: "mrd-form__cancel", onClick: () => this.mrdCancel.emit() }, t('cancel', this.locale)))))));
1518
- }
1519
- static get watchers() { return {
1520
- "values": [{
1521
- "valuesChanged": 0
1522
- }],
1523
- "me": [{
1524
- "meChanged": 0
1525
- }]
1526
- }; }
1527
- };
1528
- MrdForm.style = mrdFormScss();
1529
-
1530
- const mrdHyperlinkFieldScss = () => `.sc-mrd-hyperlink-field-h{display:block}.mrd-hyperlink-field.sc-mrd-hyperlink-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-hyperlink-field__label.sc-mrd-hyperlink-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-hyperlink-field__label--required.sc-mrd-hyperlink-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-hyperlink-field__input.sc-mrd-hyperlink-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box}.mrd-hyperlink-field__input.sc-mrd-hyperlink-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-hyperlink-field__input.sc-mrd-hyperlink-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-hyperlink-field__input.sc-mrd-hyperlink-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-hyperlink-field__input--error.sc-mrd-hyperlink-field{border-color:var(--mrd-border-color-error)}.mrd-hyperlink-field__input--error.sc-mrd-hyperlink-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-hyperlink-field__input--name.sc-mrd-hyperlink-field{margin-top:var(--mrd-space-1)}.mrd-hyperlink-field__link.sc-mrd-hyperlink-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-primary);text-decoration:underline;word-break:break-all}.mrd-hyperlink-field__link.sc-mrd-hyperlink-field:hover{opacity:0.8}.mrd-hyperlink-field__empty.sc-mrd-hyperlink-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-400)}.mrd-hyperlink-field__error.sc-mrd-hyperlink-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
1531
-
1532
- const MrdHyperlinkField = class {
1533
- constructor(hostRef) {
1534
- index.registerInstance(this, hostRef);
1535
- this.mrdChange = index.createEvent(this, "mrdChange");
1536
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1537
- this.name = '';
1538
- this.label = '';
1539
- this.value = '';
1540
- this.placeholder = '';
1541
- this.required = false;
1542
- this.disabled = false;
1543
- this.locale = navigator.language;
1544
- this.internalHref = '';
1545
- this.internalName = '';
1546
- this.error = '';
1547
- this.handleHrefInput = (e) => {
1548
- this.internalHref = e.target.value;
1549
- this.mrdChange.emit({ name: this.name, value: this.buildValue() });
1550
- };
1551
- this.handleNameInput = (e) => {
1552
- this.internalName = e.target.value;
1553
- this.mrdChange.emit({ name: this.name, value: this.buildValue() });
1554
- };
1555
- this.handleBlur = () => {
1556
- if (this.required && !validateRequired(this.internalHref)) {
1557
- this.error = t('required', this.locale);
1558
- }
1559
- else if (this.internalHref && !validateUrl(this.internalHref)) {
1560
- this.error = t('invalid_url', this.locale);
1561
- }
1562
- else {
1563
- this.error = '';
1564
- }
1565
- this.mrdBlur.emit({ name: this.name, value: this.buildValue() });
1566
- };
1567
- }
1568
- componentWillLoad() {
1569
- this.parseValue(this.value);
1570
- }
1571
- valueChanged(val) {
1572
- this.parseValue(val);
1573
- }
1574
- parseValue(val) {
1575
- var _a, _b, _c;
1576
- if (val !== null && val !== undefined && typeof val === 'object' && 'href' in val) {
1577
- this.internalHref = (_a = val.href) !== null && _a !== void 0 ? _a : '';
1578
- this.internalName = (_b = val.name) !== null && _b !== void 0 ? _b : '';
1579
- }
1580
- else {
1581
- this.internalHref = (_c = val) !== null && _c !== void 0 ? _c : '';
1582
- this.internalName = '';
1583
- }
1584
- }
1585
- buildValue() {
1586
- return this.internalName.trim()
1587
- ? { href: this.internalHref, name: this.internalName }
1588
- : { href: this.internalHref };
1589
- }
1590
- render() {
1591
- const hasError = !!this.error;
1592
- if (this.disabled) {
1593
- return (index.h(index.Host, null, index.h("div", { class: "mrd-hyperlink-field" }, this.label && index.h("span", { class: "mrd-hyperlink-field__label" }, this.label), this.internalHref
1594
- ? index.h("a", { class: "mrd-hyperlink-field__link", href: this.internalHref, target: "_blank", rel: "noopener noreferrer" }, this.internalName || this.internalHref)
1595
- : index.h("span", { class: "mrd-hyperlink-field__empty" }, "\u2014"))));
1596
- }
1597
- return (index.h(index.Host, null, index.h("div", { class: "mrd-hyperlink-field" }, this.label && (index.h("label", { class: `mrd-hyperlink-field__label${this.required ? ' mrd-hyperlink-field__label--required' : ''}` }, this.label)), index.h("input", { class: `mrd-hyperlink-field__input${hasError ? ' mrd-hyperlink-field__input--error' : ''}`, type: "url", name: this.name, value: this.internalHref, placeholder: this.placeholder || 'https://', required: this.required, onInput: this.handleHrefInput, onBlur: this.handleBlur }), index.h("input", { class: "mrd-hyperlink-field__input mrd-hyperlink-field__input--name", type: "text", value: this.internalName, placeholder: t('hyperlink_name', this.locale), onInput: this.handleNameInput, onBlur: this.handleBlur }), hasError && index.h("span", { class: "mrd-hyperlink-field__error" }, this.error))));
1598
- }
1599
- static get watchers() { return {
1600
- "value": [{
1601
- "valueChanged": 0
1602
- }]
1603
- }; }
1604
- };
1605
- MrdHyperlinkField.style = mrdHyperlinkFieldScss();
1606
-
1607
- const mrdImageFieldScss = () => `.sc-mrd-image-field-h{display:block}.mrd-image-field.sc-mrd-image-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-image-field__label.sc-mrd-image-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-image-field__label--required.sc-mrd-image-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-image-field__zone.sc-mrd-image-field{display:flex;align-items:center;justify-content:center;border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-image-field__zone.sc-mrd-image-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--dragging.sc-mrd-image-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--error.sc-mrd-image-field{border-color:var(--mrd-border-color-error)}.mrd-image-field__zone--disabled.sc-mrd-image-field{opacity:0.6;cursor:not-allowed}.mrd-image-field__zone--disabled.sc-mrd-image-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-image-field__input.sc-mrd-image-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;pointer-events:none}.mrd-image-field__prompt.sc-mrd-image-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-6);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-image-field__upload-icon.sc-mrd-image-field{width:40px;height:40px;color:var(--mrd-color-neutral-400)}.mrd-image-field__browse.sc-mrd-image-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-image-field__preview-container.sc-mrd-image-field{display:flex;align-items:center;gap:var(--mrd-space-4);padding:var(--mrd-space-4);width:100%}.mrd-image-field__preview-thumb.sc-mrd-image-field{flex-shrink:0;width:80px;height:80px;border-radius:var(--mrd-border-radius);overflow:hidden;border:var(--mrd-border-width) solid var(--mrd-border-color);background-color:var(--mrd-color-neutral-100)}.mrd-image-field__preview.sc-mrd-image-field{width:100%;height:100%;object-fit:cover;display:block}.mrd-image-field__preview-info.sc-mrd-image-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-image-field__preview-name.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrd-image-field__preview-overlay.sc-mrd-image-field{position:absolute;inset:0;background:rgb(255 255 255 / 0.7);display:flex;align-items:center;justify-content:center;border-radius:var(--mrd-border-radius)}.mrd-image-field__spinner.sc-mrd-image-field{display:inline-block;width:24px;height:24px;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-image-spin 0.6s linear infinite}@keyframes mrd-image-spin{to{transform:rotate(360deg)}}.mrd-image-field__upload-status.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500)}.mrd-image-field__clear.sc-mrd-image-field{flex-shrink:0;background-color:var(--mrd-color-white);color:var(--mrd-color-danger);border:var(--mrd-border-width) solid var(--mrd-color-danger);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-1) var(--mrd-space-3);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);cursor:pointer;transition:background-color var(--mrd-transition), color var(--mrd-transition)}.mrd-image-field__clear.sc-mrd-image-field:hover{background-color:var(--mrd-color-danger);color:var(--mrd-color-white)}.mrd-image-field__error.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
1608
-
1609
- const MrdImageField = class {
1610
- constructor(hostRef) {
1611
- index.registerInstance(this, hostRef);
1612
- this.mrdChange = index.createEvent(this, "mrdChange");
1613
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1614
- this.mrdUpload = index.createEvent(this, "mrdUpload");
1615
- this.name = '';
1616
- this.label = '';
1617
- this.value = null;
1618
- this.required = false;
1619
- this.disabled = false;
1620
- this.locale = navigator.language;
1621
- this.accept = 'image/*';
1622
- this.maxSize = 0;
1623
- this.previewUrl = '';
1624
- this.fileName = '';
1625
- this.isDragging = false;
1626
- this.uploading = false;
1627
- this.error = '';
1628
- this.handleInputChange = (e) => {
1629
- var _a;
1630
- const files = e.target.files;
1631
- this.handleFile((_a = files === null || files === void 0 ? void 0 : files[0]) !== null && _a !== void 0 ? _a : null);
1632
- };
1633
- this.handleDragOver = (e) => {
1634
- e.preventDefault();
1635
- this.isDragging = true;
1636
- };
1637
- this.handleDragLeave = () => {
1638
- this.isDragging = false;
1639
- };
1640
- this.handleDrop = (e) => {
1641
- var _a, _b, _c;
1642
- e.preventDefault();
1643
- this.isDragging = false;
1644
- const file = (_c = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : null;
1645
- this.handleFile(file);
1646
- };
1647
- this.handleZoneClick = () => {
1648
- var _a;
1649
- if (!this.disabled && !this.uploading) {
1650
- (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
1651
- }
1652
- };
1653
- this.handleClear = (e) => {
1654
- e.stopPropagation();
1655
- this.previewUrl = '';
1656
- this.fileName = '';
1657
- this.error = '';
1658
- this.uploading = false;
1659
- if (this.fileInputRef)
1660
- this.fileInputRef.value = '';
1661
- this.mrdChange.emit({ name: this.name, value: null });
1662
- };
1663
- }
1664
- /** When the host provides a URI back via setFieldValue, the upload is done. */
1665
- valueChanged(newVal) {
1666
- if (typeof newVal === 'string' && newVal) {
1667
- this.uploading = false;
1668
- }
1669
- else if (!newVal) {
1670
- this.uploading = false;
1671
- this.previewUrl = '';
1672
- this.fileName = '';
1673
- }
1674
- }
1675
- handleFile(file) {
1676
- if (!file) {
1677
- this.previewUrl = '';
1678
- this.fileName = '';
1679
- this.uploading = false;
1680
- this.mrdChange.emit({ name: this.name, value: null });
1681
- return;
1682
- }
1683
- if (this.maxSize > 0 && file.size > this.maxSize) {
1684
- this.error = t('file_too_large', this.locale);
1685
- return;
1686
- }
1687
- if (!file.type.startsWith('image/')) {
1688
- this.error = 'Please select an image file';
1689
- return;
1690
- }
1691
- this.error = '';
1692
- this.fileName = file.name;
1693
- this.uploading = true;
1694
- // Show local preview immediately while upload is in progress
1695
- const reader = new FileReader();
1696
- reader.onload = (ev) => {
1697
- var _a;
1698
- this.previewUrl = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.result;
1699
- };
1700
- reader.readAsDataURL(file);
1701
- this.mrdChange.emit({ name: this.name, value: file });
1702
- this.mrdUpload.emit({ name: this.name, file });
1703
- }
1704
- render() {
1705
- const hasError = !!this.error;
1706
- const zoneClass = [
1707
- 'mrd-image-field__zone',
1708
- this.isDragging ? 'mrd-image-field__zone--dragging' : '',
1709
- hasError ? 'mrd-image-field__zone--error' : '',
1710
- this.disabled || this.uploading ? 'mrd-image-field__zone--disabled' : '',
1711
- ].filter(Boolean).join(' ');
1712
- return (index.h(index.Host, { key: '71be4c1df559cff87280cac30be58beab3149064' }, index.h("div", { key: '9d0811d87068ce258aca9b2c5223a5594af9f6a3', class: "mrd-image-field" }, this.label && (index.h("label", { key: '63e129db968a2edfcc04fcac466d908ba4715158', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'c7e560ad4dda43499707a2d1771a8eb561653a1b', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("input", { key: 'd325ee1aa3baccd689cc579e4cfa21abe977a575', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (index.h("div", { class: "mrd-image-field__preview-container" }, index.h("div", { class: "mrd-image-field__preview-thumb" }, index.h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && index.h("div", { class: "mrd-image-field__preview-overlay" }, index.h("span", { class: "mrd-image-field__spinner" }))), index.h("div", { class: "mrd-image-field__preview-info" }, index.h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (index.h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (index.h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (index.h("div", { class: "mrd-image-field__prompt" }, index.h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), index.h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), index.h("polyline", { points: "21 15 16 10 5 21" })), index.h("span", null, t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), hasError && index.h("span", { key: 'b0442d6f5c07ef22443194b3f1a95d2dfc409c4e', class: "mrd-image-field__error" }, this.error))));
1713
- }
1714
- static get watchers() { return {
1715
- "value": [{
1716
- "valueChanged": 0
1717
- }]
1718
- }; }
1719
- };
1720
- MrdImageField.style = mrdImageFieldScss();
1721
-
1722
- class CellRenderer {
1723
- static render(column, row, locale) {
1724
- var _a, _b, _c, _d;
1725
- if (column.type === index$1.ClientLayoutItemType.RELATION) {
1726
- const name = (_a = column.name) !== null && _a !== void 0 ? _a : '';
1727
- const link = (_b = row === null || row === void 0 ? void 0 : row._links) === null || _b === void 0 ? void 0 : _b[name];
1728
- if (!link)
1729
- return '';
1730
- if (Array.isArray(link))
1731
- return link.map((l) => { var _a; return (_a = l.name) !== null && _a !== void 0 ? _a : ''; }).filter(Boolean).join(', ');
1732
- return (_c = link.name) !== null && _c !== void 0 ? _c : '';
1733
- }
1734
- if (column.type !== index$1.ClientLayoutItemType.FIELD)
1735
- return '';
1736
- const name = (_d = column.name) !== null && _d !== void 0 ? _d : '';
1737
- const dataType = column.dataType;
1738
- const listItems = column.listItems;
1739
- const raw = row === null || row === void 0 ? void 0 : row[name];
1740
- if (raw == null || raw === '')
1741
- return '';
1742
- const values = Array.isArray(raw) ? raw : [raw];
1743
- return values
1744
- .map(v => CellRenderer.renderValue(dataType !== null && dataType !== void 0 ? dataType : 'TEXT', v, listItems !== null && listItems !== void 0 ? listItems : [], locale))
1745
- .filter(s => s !== '')
1746
- .join(', ');
1747
- }
1748
- static renderValue(dataType, value, listItems, locale) {
1749
- var _a, _b;
1750
- switch (dataType) {
1751
- case 'INTEGER':
1752
- return formatNumber(Number(value), locale, { maximumFractionDigits: 0 });
1753
- case 'DECIMAL':
1754
- return formatNumber(Number(value), locale);
1755
- case 'PERCENTAGE':
1756
- return formatPercentage(Number(value), locale);
1757
- case 'CURRENCY': {
1758
- const { amount, currency } = typeof value === 'object' && value !== null
1759
- ? value
1760
- : { amount: value, currency: '' };
1761
- return currency
1762
- ? formatCurrency(Number(amount), currency, locale)
1763
- : formatNumber(Number(amount), locale);
1764
- }
1765
- case 'DATE':
1766
- return formatDate(value, locale);
1767
- case 'DATETIME':
1768
- return formatDateTime(value, locale);
1769
- case 'TIME':
1770
- return formatTime(value, locale);
1771
- case 'BOOLEAN':
1772
- return value ? '✓' : '';
1773
- case 'FILE':
1774
- case 'IMAGE':
1775
- return typeof value === 'object' && value !== null ? ((_a = value.fileName) !== null && _a !== void 0 ? _a : '') : '';
1776
- case 'LIST': {
1777
- const item = listItems.find(li => li.key === String(value));
1778
- return (_b = item === null || item === void 0 ? void 0 : item.label) !== null && _b !== void 0 ? _b : String(value);
1779
- }
1780
- case 'TEXTBLOCK': {
1781
- const stripped = String(value).replace(/<[^>]*>/g, '');
1782
- const txt = document.createElement('textarea');
1783
- txt.innerHTML = stripped;
1784
- return txt.value.trim();
1785
- }
1786
- case 'LONGTEXT':
1787
- return String(value).replace(/[\r\n]+/g, ' ').trim();
1788
- case 'JSON': {
1789
- const str = typeof value === 'object' ? JSON.stringify(value) : String(value);
1790
- return str.replace(/[\r\n]+/g, ' ').trim();
1791
- }
1792
- case 'SECRET':
1793
- return value ? '••••••••' : '';
1794
- default:
1795
- return String(value);
1796
- }
1797
- }
1798
- /**
1799
- * Returns syntax-highlighted JSON as an HTML string with inline styles.
1800
- * compact=true → single line (no indentation); compact=false → pretty-printed.
1801
- */
1802
- static formatJson(value, compact = false) {
1803
- try {
1804
- const parsed = typeof value === 'string' ? JSON.parse(value) : value;
1805
- const json = compact ? JSON.stringify(parsed) : JSON.stringify(parsed, null, 2);
1806
- return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => {
1807
- let style = 'color:#2aa198';
1808
- if (/^"/.test(match)) {
1809
- style = /:$/.test(match) ? 'color:#881391' : 'color:#268bd2';
1810
- }
1811
- else if (/true|false/.test(match)) {
1812
- style = 'color:#b58900';
1813
- }
1814
- else if (/null/.test(match)) {
1815
- style = 'color:#dc322f';
1816
- }
1817
- return `<span style="${style}">${match}</span>`;
1818
- });
1819
- }
1820
- catch (_a) {
1821
- return String(value);
1822
- }
1823
- }
1824
- }
1825
-
1826
- const mrdLayoutSectionScss = () => `.mrd-layout-section.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800)}.mrd-layout-section__field.sc-mrd-layout-section{display:grid;grid-template-columns:200px 1fr;align-items:baseline;gap:0 var(--mrd-space-2);padding:var(--mrd-space-1) 0}.mrd-layout-section__field-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-normal);color:var(--mrd-color-neutral-500);padding-top:1px}.mrd-layout-section__field-value.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);word-break:break-word;display:inline-flex;align-items:center;gap:var(--mrd-space-1)}.mrd-layout-section__history-wrap.sc-mrd-layout-section{position:relative;display:inline-flex;align-items:center}.mrd-layout-section__history-btn.sc-mrd-layout-section{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:transparent;border:none;border-radius:var(--mrd-border-radius-sm);color:var(--mrd-color-neutral-400);cursor:pointer;flex-shrink:0;transition:color var(--mrd-transition-fast), background-color var(--mrd-transition-fast)}.mrd-layout-section__history-btn.sc-mrd-layout-section:hover{color:var(--mrd-color-neutral-700);background-color:var(--mrd-color-neutral-100)}.mrd-layout-section__history-btn.sc-mrd-layout-section:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-layout-section__history-icon.sc-mrd-layout-section{width:0.875rem;height:0.875rem}.mrd-layout-section__history-popover.sc-mrd-layout-section{position:absolute;top:calc(100% + 0.25rem);left:0;min-width:24rem;max-width:24rem;background-color:var(--mrd-color-white);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);box-shadow:var(--mrd-shadow-md);padding:var(--mrd-space-1) 0;z-index:var(--mrd-z-dropdown)}.mrd-layout-section__history-entry.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-normal);color:var(--mrd-color-neutral-700);padding:var(--mrd-space-2) var(--mrd-space-3);line-height:var(--mrd-line-height-normal)}.mrd-layout-section__history-entry.sc-mrd-layout-section:not(:last-child){border-bottom:var(--mrd-border-width) solid var(--mrd-color-neutral-100)}.mrd-layout-section__field-header.sc-mrd-layout-section{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-4) 0;padding:0}.mrd-layout-section__header.sc-mrd-layout-section{font-size:var(--mrd-font-size-xl);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:var(--mrd-space-4) 0 var(--mrd-space-2) 0;padding:0}.mrd-layout-section__text.sc-mrd-layout-section{font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-700);line-height:var(--mrd-line-height-relaxed);margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:1px solid var(--mrd-color-neutral-300);border-radius:var(--mrd-border-radius);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light);border-color:var(--mrd-color-primary)}.mrd-layout-section__link.sc-mrd-layout-section{color:var(--mrd-color-primary);text-decoration:none}.mrd-layout-section__link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__relation-link.sc-mrd-layout-section{background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__relation-link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__download-link.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-1);background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__download-link.sc-mrd-layout-section:hover{text-decoration:underline;color:var(--mrd-color-primary-dark)}.mrd-layout-section__file-icon.sc-mrd-layout-section{flex-shrink:0;width:1rem;height:1rem}.mrd-layout-section__boolean--true.sc-mrd-layout-section{color:var(--mrd-color-success);font-weight:var(--mrd-font-weight-semibold)}.mrd-layout-section__boolean--false.sc-mrd-layout-section{color:var(--mrd-color-neutral-400)}.mrd-layout-section__field--block.sc-mrd-layout-section{grid-template-columns:1fr}.mrd-layout-section__badge.sc-mrd-layout-section{display:inline-block;font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-medium);padding:2px var(--mrd-space-3);border-radius:10px}.mrd-layout-section__badge-dot-row.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2)}.mrd-layout-section__badge-dot.sc-mrd-layout-section{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.mrd-layout-section__secret-masked.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-label-color);letter-spacing:0.15em;user-select:none;pointer-events:none}.mrd-layout-section__pre.sc-mrd-layout-section{font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);background-color:var(--mrd-color-neutral-50);border:1px solid var(--mrd-color-neutral-200);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);margin:0;max-height:calc(10 * 1.5 * var(--mrd-font-size-xs));overflow-x:auto;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.mrd-layout-section__group.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__group-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);margin:0 0 var(--mrd-space-2) 0;padding-bottom:0;text-transform:uppercase;letter-spacing:0.05em}.mrd-layout-section__related-view.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__related-view-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-lg);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:0 0 var(--mrd-space-3) 0}.mrd-layout-section__search.sc-mrd-layout-section{position:relative;margin:var(--mrd-space-2) 0}.mrd-layout-section__search-wrap.sc-mrd-layout-section{position:relative}.mrd-layout-section__search-icon.sc-mrd-layout-section{position:absolute;left:var(--mrd-input-padding-x);top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--mrd-color-neutral-400);pointer-events:none}.mrd-layout-section__search-input.sc-mrd-layout-section{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x) var(--mrd-input-padding-y) calc(var(--mrd-input-padding-x) + 1rem + var(--mrd-space-2));font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;box-sizing:border-box}.mrd-layout-section__search-input.sc-mrd-layout-section:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-layout-section__search-input.sc-mrd-layout-section::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-layout-section__search-results.sc-mrd-layout-section{position:absolute;top:100%;left:0;right:0;background-color:var(--mrd-color-white);border:1px solid var(--mrd-color-neutral-300);border-top:none;border-radius:0 0 var(--mrd-border-radius) var(--mrd-border-radius);box-shadow:var(--mrd-shadow-sm);z-index:100;max-height:300px;overflow-y:auto;list-style:none;margin:0;padding:var(--mrd-space-1) 0}.mrd-layout-section__search-result.sc-mrd-layout-section{margin:0;padding:0}.mrd-layout-section__search-result-btn.sc-mrd-layout-section{display:flex;flex-direction:column;width:100%;padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:none;text-align:left;cursor:pointer;font-family:var(--mrd-font-family)}.mrd-layout-section__search-result-btn.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light)}.mrd-layout-section__search-result-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800)}.mrd-layout-section__search-result-desc.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-top:var(--mrd-space-1)}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section{background:none;border:none;padding:0;cursor:pointer;display:inline-block;border-radius:var(--mrd-border-radius);overflow:hidden;line-height:0}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section:hover .mrd-layout-section__image-thumb.sc-mrd-layout-section{opacity:0.85}.mrd-layout-section__image-thumb.sc-mrd-layout-section{display:block;max-width:160px;max-height:100px;border-radius:var(--mrd-border-radius);object-fit:cover;transition:opacity 0.15s}.mrd-layout-section__modal-backdrop.sc-mrd-layout-section{position:fixed;inset:0;background:rgba(0, 0, 0, 0.6);z-index:300;display:flex;align-items:center;justify-content:center}.mrd-layout-section__modal.sc-mrd-layout-section{position:relative;background:#fff;border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);max-width:min(90vw, 900px);max-height:90vh;display:flex;align-items:center;justify-content:center;box-shadow:var(--mrd-shadow-lg)}.mrd-layout-section__modal-close.sc-mrd-layout-section{position:absolute;top:var(--mrd-space-2);right:var(--mrd-space-2);background:rgba(0, 0, 0, 0.5);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-size:var(--mrd-font-size-sm);line-height:1;z-index:1}.mrd-layout-section__modal-close.sc-mrd-layout-section:hover{background:rgba(0, 0, 0, 0.8)}.mrd-layout-section__modal-image.sc-mrd-layout-section{display:block;max-width:100%;max-height:calc(90vh - 2rem);border-radius:var(--mrd-border-radius);object-fit:contain}`;
1827
-
1828
- const MrdLayoutSection = class {
1829
- constructor(hostRef) {
1830
- index.registerInstance(this, hostRef);
1831
- this.mrdNavigate = index.createEvent(this, "mrdNavigate");
1832
- this.mrdSearch = index.createEvent(this, "mrdSearch");
1833
- this.mrdDownload = index.createEvent(this, "mrdDownload");
1834
- this.mrdLoadViewPage = index.createEvent(this, "mrdLoadViewPage");
1835
- this.mrdLoadImage = index.createEvent(this, "mrdLoadImage");
1836
- this.mrdViewAction = index.createEvent(this, "mrdViewAction");
1837
- this.mrdLoadViewAggregations = index.createEvent(this, "mrdLoadViewAggregations");
1838
- /** Items from one layout entry in ClientDashboardMetadata.layouts[]. */
1839
- this.items = [];
1840
- /** Record data object; keys are field names, _links holds relation and related-view links. */
1841
- this.data = {};
1842
- /** Legacy: view metadata map (ClientDashboardMetadata.views). Not needed in new flat format. */
1843
- this.views = {};
1844
- /** Legacy: top-level _links from ClientDashboardMetadata. Not needed in new flat format. */
1845
- this.links = {};
1846
- this.locale = navigator.language;
1847
- this.searchQueryMap = {};
1848
- this.searchResultsMap = {};
1849
- this.imagePreviewUrl = null;
1850
- this.imagePreviews = {};
1851
- this.openHistoryField = null;
1852
- this.historyClickOutside = null;
1853
- this.searchTimers = {};
1854
- this.handleViewLoadPage = (e, name) => {
1855
- e.stopPropagation();
1856
- this.mrdLoadViewPage.emit({ name, page: e.detail.page, sort: e.detail.sort, path: e.detail.path, qs: e.detail.qs });
1857
- };
1858
- this.handleSearchInput = (dataClass, query) => {
1859
- this.searchQueryMap = Object.assign(Object.assign({}, this.searchQueryMap), { [dataClass]: query });
1860
- if (this.searchTimers[dataClass])
1861
- clearTimeout(this.searchTimers[dataClass]);
1862
- if (query.length < 2) {
1863
- this.searchResultsMap = Object.assign(Object.assign({}, this.searchResultsMap), { [dataClass]: [] });
1864
- return;
1865
- }
1866
- this.searchTimers[dataClass] = setTimeout(() => {
1867
- this.mrdSearch.emit({ query, dataClass });
1868
- }, 300);
1869
- };
1870
- }
1871
- componentDidLoad() {
1872
- setTimeout(() => {
1873
- this.initEmbeddedTables();
1874
- this.emitLoadImages();
1875
- }, 0);
1876
- this.historyClickOutside = (e) => {
1877
- if (!this.el.contains(e.target))
1878
- this.openHistoryField = null;
1879
- };
1880
- document.addEventListener('mousedown', this.historyClickOutside);
1881
- }
1882
- disconnectedCallback() {
1883
- if (this.historyClickOutside) {
1884
- document.removeEventListener('mousedown', this.historyClickOutside);
1885
- this.historyClickOutside = null;
1886
- }
1887
- }
1888
- dataChanged(newVal) {
1889
- if (newVal && Object.keys(newVal).length > 0) {
1890
- setTimeout(() => this.initEmbeddedTables(), 0);
1891
- }
1892
- }
1893
- async initEmbeddedTables() {
1894
- const tables = this.el.querySelectorAll('mrd-table[data-view]');
1895
- for (const table of Array.from(tables)) {
1896
- if (typeof table.init === 'function') {
1897
- await table.init();
1898
- }
1899
- }
1900
- }
1901
- viewKeyFor(item) {
1902
- var _a, _b, _c, _d;
1903
- if (item.type === index$1.ClientLayoutItemType.RELATED_VIEW)
1904
- return (_b = (_a = item.relatedClass) !== null && _a !== void 0 ? _a : item.name) !== null && _b !== void 0 ? _b : '';
1905
- return (_d = (_c = item.dataClass) !== null && _c !== void 0 ? _c : item.name) !== null && _d !== void 0 ? _d : '';
1906
- }
1907
- emitLoadImages() {
1908
- for (const item of this.flattenItems(this.items)) {
1909
- if (item.type === index$1.ClientLayoutItemType.FIELD && item.dataType === index$1.ClientLayoutItemFieldDataType.IMAGE) {
1910
- const fieldName = item.name;
1911
- const raw = this.data[fieldName];
1912
- const href = raw === null || raw === void 0 ? void 0 : raw.href;
1913
- if (href)
1914
- this.mrdLoadImage.emit({ fieldName, href });
1915
- }
1916
- }
1917
- }
1918
- flattenItems(items) {
1919
- const result = [];
1920
- for (const item of items) {
1921
- result.push(item);
1922
- if (item.items)
1923
- result.push(...this.flattenItems(item.items));
1924
- }
1925
- return result;
1926
- }
1927
- /** Inject search results. Pass dataClass to target a specific SEARCH item; omit when there is only one. */
1928
- async setSearchResults(results, dataClass) {
1929
- const key = dataClass !== null && dataClass !== void 0 ? dataClass : this.resolveSearchKey();
1930
- if (key) {
1931
- this.searchResultsMap = Object.assign(Object.assign({}, this.searchResultsMap), { [key]: results });
1932
- }
1933
- }
1934
- /**
1935
- * Inject data into an embedded mrd-table for a RELATED_VIEW or VIEW item.
1936
- * Pass totalElements to update the pagination total (safe to pass on every page).
1937
- * Pass hasNext (from _links.next presence) so the table can decide whether to emit aggregations.
1938
- */
1939
- async setViewPage(name, page, rows, totalElements, hasNext) {
1940
- const table = this.el.querySelector(`mrd-table[data-view="${name}"]`);
1941
- if (!table)
1942
- return;
1943
- if (totalElements !== undefined) {
1944
- table.totalElements = totalElements;
1945
- }
1946
- await table.setPage(page, rows, hasNext);
1947
- }
1948
- /** Inject aggregation totals into an embedded mrd-table for a VIEW or RELATED_VIEW item. */
1949
- async setViewAggregations(name, data) {
1950
- const table = this.el.querySelector(`mrd-table[data-view="${name}"]`);
1951
- if (!table)
1952
- return;
1953
- await table.setAggregations(data);
1954
- }
1955
- /** Provide a resolved URL for an IMAGE field. Shows as thumbnail; clicking opens the lightbox. */
1956
- async setImagePreview(fieldName, url) {
1957
- this.imagePreviews = Object.assign(Object.assign({}, this.imagePreviews), { [fieldName]: url });
1958
- }
1959
- /** Open the lightbox directly with a URL (e.g. after mrdDownload on a FILE field). */
1960
- async openImagePreview(url) {
1961
- this.imagePreviewUrl = url;
1962
- }
1963
- resolveSearchKey() {
1964
- var _a;
1965
- const items = this.flattenItems(this.items).filter(i => i.type === index$1.ClientLayoutItemType.SEARCH);
1966
- if (items.length === 1)
1967
- return (_a = items[0].dataClass) !== null && _a !== void 0 ? _a : null;
1968
- return null;
1969
- }
1970
- renderSingleFieldValue(item, value) {
1971
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
1972
- const dt = item.dataType;
1973
- switch (dt) {
1974
- case index$1.ClientLayoutItemFieldDataType.HYPERLINK: {
1975
- const v = value;
1976
- const href = (_a = v === null || v === void 0 ? void 0 : v.href) !== null && _a !== void 0 ? _a : String(value);
1977
- const label = (_d = (_c = (_b = v === null || v === void 0 ? void 0 : v.name) !== null && _b !== void 0 ? _b : v === null || v === void 0 ? void 0 : v.text) !== null && _c !== void 0 ? _c : v === null || v === void 0 ? void 0 : v.label) !== null && _d !== void 0 ? _d : href;
1978
- return (index.h("a", { class: "mrd-layout-section__link", href: href, target: "_blank", rel: "noopener noreferrer" }, label));
1979
- }
1980
- case index$1.ClientLayoutItemFieldDataType.TEXTBLOCK:
1981
- return index.h("span", { innerHTML: String(value) });
1982
- case index$1.ClientLayoutItemFieldDataType.LONGTEXT:
1983
- return index.h("pre", { class: "mrd-layout-section__pre" }, String(value));
1984
- case index$1.ClientLayoutItemFieldDataType.JSON:
1985
- return index.h("pre", { class: "mrd-layout-section__pre", innerHTML: CellRenderer.formatJson(value) });
1986
- case index$1.ClientLayoutItemFieldDataType.FILE: {
1987
- const v = value;
1988
- const fileName = (_e = v === null || v === void 0 ? void 0 : v.fileName) !== null && _e !== void 0 ? _e : String(value);
1989
- const href = (_f = v === null || v === void 0 ? void 0 : v.href) !== null && _f !== void 0 ? _f : '';
1990
- return (index.h("button", { class: "mrd-layout-section__download-link", onClick: () => href && this.mrdDownload.emit({ href, fileName }) }, index.h("svg", { class: "mrd-layout-section__file-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-3 8l-3-3 1.41-1.41L10 14.17l4.59-4.58L16 11l-6 6z" })), t('download', this.locale)));
1991
- }
1992
- case index$1.ClientLayoutItemFieldDataType.IMAGE: {
1993
- const v = value;
1994
- const href = (_g = v === null || v === void 0 ? void 0 : v.href) !== null && _g !== void 0 ? _g : '';
1995
- const fileName = (_h = v === null || v === void 0 ? void 0 : v.fileName) !== null && _h !== void 0 ? _h : '';
1996
- const previewUrl = this.imagePreviews[item.name];
1997
- if (previewUrl) {
1998
- return (index.h("button", { class: "mrd-layout-section__image-thumb-btn", onClick: () => { this.imagePreviewUrl = previewUrl; }, title: fileName || undefined }, index.h("img", { class: "mrd-layout-section__image-thumb", src: previewUrl, alt: fileName })));
1999
- }
2000
- return (index.h("button", { class: "mrd-layout-section__download-link", onClick: () => href && this.mrdDownload.emit({ href, fileName }) }, index.h("svg", { class: "mrd-layout-section__file-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-3 8l-3-3 1.41-1.41L10 14.17l4.59-4.58L16 11l-6 6z" })), fileName || href));
2001
- }
2002
- case index$1.ClientLayoutItemFieldDataType.BOOLEAN:
2003
- return (index.h("span", { class: `mrd-layout-section__boolean mrd-layout-section__boolean--${value ? 'true' : 'false'}` }, value ? t('yes', this.locale) : t('no', this.locale)));
2004
- case index$1.ClientLayoutItemFieldDataType.LIST: {
2005
- const listItem = ((_j = item.listItems) !== null && _j !== void 0 ? _j : []).find(li => li.key === String(value));
2006
- const label = (_k = listItem === null || listItem === void 0 ? void 0 : listItem.label) !== null && _k !== void 0 ? _k : String(value);
2007
- const color = listItem === null || listItem === void 0 ? void 0 : listItem.color;
2008
- const bg = listItem === null || listItem === void 0 ? void 0 : listItem.backgroundColor;
2009
- if (color && bg) {
2010
- return (index.h("span", { class: "mrd-layout-section__badge", style: { color, backgroundColor: bg } }, label));
2011
- }
2012
- if (color) {
2013
- return (index.h("span", { class: "mrd-layout-section__badge-dot-row" }, index.h("span", { class: "mrd-layout-section__badge-dot", style: { backgroundColor: color } }), label));
2014
- }
2015
- return label;
2016
- }
2017
- case index$1.ClientLayoutItemFieldDataType.SECRET:
2018
- return value ? index.h("span", { class: "mrd-layout-section__secret-masked" }, '••••••••') : null;
2019
- default: {
2020
- const text = CellRenderer.renderValue(dt, value, (_l = item.listItems) !== null && _l !== void 0 ? _l : [], this.locale);
2021
- return text || null;
2022
- }
2023
- }
2024
- }
2025
- renderFieldValue(item, rawValue) {
2026
- if (rawValue == null || rawValue === '')
2027
- return null;
2028
- if (item.multiple && Array.isArray(rawValue)) {
2029
- const rendered = rawValue.map(v => this.renderSingleFieldValue(item, v));
2030
- if (rendered.every(r => typeof r === 'string' || r == null)) {
2031
- return rendered.filter(Boolean).join(', ') || null;
2032
- }
2033
- return (index.h("span", null, rendered.map((r, i) => (index.h("span", { key: String(i) }, r, i < rendered.length - 1 ? ', ' : '')))));
2034
- }
2035
- return this.renderSingleFieldValue(item, rawValue);
2036
- }
2037
- renderHistoryBadge(item, raw) {
2038
- var _a, _b, _c;
2039
- const hist = (_a = item.historyEnabled) !== null && _a !== void 0 ? _a : (_b = item.field) === null || _b === void 0 ? void 0 : _b.historyEnabled;
2040
- if (!hist || !item.name)
2041
- return null;
2042
- const history = (_c = raw === null || raw === void 0 ? void 0 : raw.history) !== null && _c !== void 0 ? _c : [];
2043
- if (!history.length)
2044
- return null;
2045
- const sorted = [...history].sort((a, b) => b.until.localeCompare(a.until));
2046
- const isOpen = this.openHistoryField === item.name;
2047
- const { locale } = this;
2048
- return (index.h("span", { class: "mrd-layout-section__history-wrap" }, index.h("button", { type: "button", class: "mrd-layout-section__history-btn", title: t('history_badge_tooltip', locale), "aria-label": t('history_badge_tooltip', locale), onClick: (e) => {
2049
- e.stopPropagation();
2050
- this.openHistoryField = isOpen ? null : item.name;
2051
- } }, index.h("svg", { class: "mrd-layout-section__history-icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { "fill-rule": "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .207.085.394.22.53l2.5 2.5a.75.75 0 101.06-1.06L10.75 9.69V5z", "clip-rule": "evenodd" }))), isOpen && (index.h("div", { class: "mrd-layout-section__history-popover", role: "listbox" }, sorted.map((entry, i) => (index.h("div", { key: String(i), class: "mrd-layout-section__history-entry" }, entry.value, " (", t('history_until', locale), " ", formatDate(entry.until, locale), ")")))))));
2052
- }
2053
- renderField(item) {
2054
- var _a, _b;
2055
- if (!item.name)
2056
- return null;
2057
- const raw = this.data[item.name];
2058
- const hist = (_a = item.historyEnabled) !== null && _a !== void 0 ? _a : (_b = item.field) === null || _b === void 0 ? void 0 : _b.historyEnabled;
2059
- const rawValue = hist && raw !== null && typeof raw === 'object' && 'current' in raw
2060
- ? raw.current
2061
- : raw;
2062
- const renderedValue = this.renderFieldValue(item, rawValue);
2063
- if (item.header) {
2064
- return (index.h("h1", { class: "mrd-layout-section__field-header", key: item.name }, typeof renderedValue === 'string' ? renderedValue : rawValue != null ? String(rawValue) : item.label));
2065
- }
2066
- if (renderedValue == null)
2067
- return null;
2068
- const isBlock = item.dataType === index$1.ClientLayoutItemFieldDataType.TEXTBLOCK
2069
- || item.dataType === index$1.ClientLayoutItemFieldDataType.LONGTEXT
2070
- || item.dataType === index$1.ClientLayoutItemFieldDataType.JSON;
2071
- return (index.h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}`, key: item.name }, index.h("span", { class: "mrd-layout-section__field-label" }, item.label), index.h("span", { class: "mrd-layout-section__field-value" }, renderedValue, this.renderHistoryBadge(item, raw))));
2072
- }
2073
- renderRelation(item) {
2074
- var _a, _b, _c;
2075
- if (!item.name)
2076
- return null;
2077
- const links = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links) !== null && _b !== void 0 ? _b : {});
2078
- const link = links[item.name];
2079
- if (!link)
2080
- return null;
2081
- const makeBtn = (href, name) => (index.h("button", { key: href, class: "mrd-layout-section__relation-link", onClick: () => this.mrdNavigate.emit({ href, label: name }) }, name));
2082
- let valueContent;
2083
- if ((_c = link.values) === null || _c === void 0 ? void 0 : _c.length) {
2084
- valueContent = link.values.map(v => makeBtn(v.href, v.name));
2085
- }
2086
- else if (link.name) {
2087
- valueContent = makeBtn(link.href, link.name);
2088
- }
2089
- if (!valueContent)
2090
- return null;
2091
- return (index.h("div", { class: "mrd-layout-section__field", key: item.name }, index.h("span", { class: "mrd-layout-section__field-label" }, item.label), index.h("span", { class: "mrd-layout-section__field-value" }, valueContent)));
2092
- }
2093
- renderSearch(item) {
2094
- var _a, _b, _c;
2095
- if (!item.dataClass)
2096
- return null;
2097
- const dataClass = item.dataClass;
2098
- const query = (_a = this.searchQueryMap[dataClass]) !== null && _a !== void 0 ? _a : '';
2099
- const results = (_b = this.searchResultsMap[dataClass]) !== null && _b !== void 0 ? _b : [];
2100
- return (index.h("div", { class: "mrd-layout-section__search", key: `search-${dataClass}` }, index.h("div", { class: "mrd-layout-section__search-wrap" }, index.h("svg", { class: "mrd-layout-section__search-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { "fill-rule": "evenodd", d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", "clip-rule": "evenodd" })), index.h("input", { class: "mrd-layout-section__search-input", type: "text", value: query, placeholder: (_c = item.label) !== null && _c !== void 0 ? _c : '', onInput: e => this.handleSearchInput(dataClass, e.target.value) })), results.length > 0 && (index.h("ul", { class: "mrd-layout-section__search-results" }, results.map(r => (index.h("li", { key: r.id, class: "mrd-layout-section__search-result" }, index.h("button", { class: "mrd-layout-section__search-result-btn", onClick: () => this.mrdNavigate.emit({ href: r.id, label: r.label }) }, index.h("span", { class: "mrd-layout-section__search-result-label" }, r.label), r.description && index.h("span", { class: "mrd-layout-section__search-result-desc" }, r.description)))))))));
2101
- }
2102
- renderRelatedView(item) {
2103
- var _a, _b, _c, _d, _e, _f;
2104
- const key = this.viewKeyFor(item);
2105
- if (!key)
2106
- return null;
2107
- if (!item.view)
2108
- return null;
2109
- const showTitle = (_a = item.showTitle) !== null && _a !== void 0 ? _a : false;
2110
- // Extract parentId from data._links.self.href for RELATED_VIEW path construction
2111
- const selfHref = (_e = (_d = (_c = (_b = this.data) === null || _b === void 0 ? void 0 : _b._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : '';
2112
- const parentId = (_f = selfHref.split('/').filter(Boolean).pop()) !== null && _f !== void 0 ? _f : '';
2113
- return (index.h("div", { class: "mrd-layout-section__related-view", key: `view-${key}` }, showTitle && item.label && index.h("h3", { class: "mrd-layout-section__related-view-title" }, item.label), index.h("mrd-table", { "data-view": key, item: item, parentId: parentId, locale: this.locale, onMrdLoadPage: (e) => this.handleViewLoadPage(e, key), onMrdLoadAggregations: (e) => {
2114
- var _a;
2115
- e.stopPropagation();
2116
- this.mrdLoadViewAggregations.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
2117
- }, onMrdRowClick: (e) => {
2118
- var _a, _b, _c;
2119
- e.stopPropagation();
2120
- const row = e.detail;
2121
- this.mrdNavigate.emit({ href: (_b = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href, label: (_c = row === null || row === void 0 ? void 0 : row.name) !== null && _c !== void 0 ? _c : '' });
2122
- }, onMrdAction: (e) => {
2123
- var _a;
2124
- e.stopPropagation();
2125
- this.mrdViewAction.emit({
2126
- name: key,
2127
- action: e.detail.action,
2128
- dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key,
2129
- path: e.detail.path,
2130
- qs: e.detail.qs,
2131
- parentPath: e.detail.parentPath,
2132
- basicType: e.detail.basicType,
2133
- });
2134
- } })));
2135
- }
2136
- renderItem(item) {
2137
- var _a, _b;
2138
- switch (item.type) {
2139
- case index$1.ClientLayoutItemType.FIELD:
2140
- return this.renderField(item);
2141
- case index$1.ClientLayoutItemType.RELATION:
2142
- return this.renderRelation(item);
2143
- case index$1.ClientLayoutItemType.HEADER:
2144
- return (index.h("h2", { class: "mrd-layout-section__header", key: `header-${item.label}` }, item.label));
2145
- case index$1.ClientLayoutItemType.TEXT:
2146
- return index.h("div", { class: "mrd-layout-section__text", key: `text-${item.label}`, innerHTML: (_a = item.label) !== null && _a !== void 0 ? _a : '' });
2147
- case index$1.ClientLayoutItemType.NAVIGATE:
2148
- return (index.h("button", { class: "mrd-layout-section__navigate", key: `nav-${item.label}`, onClick: () => { var _a, _b, _c; return this.mrdNavigate.emit({ label: (_a = item.label) !== null && _a !== void 0 ? _a : '', navigate: (_b = item.navigate) !== null && _b !== void 0 ? _b : { dataClass: (_c = item.dataClass) !== null && _c !== void 0 ? _c : '', icon: item.icon, navigationType: item.navigationType } }); } }, item.label));
2149
- case index$1.ClientLayoutItemType.SEARCH:
2150
- return this.renderSearch(item);
2151
- case index$1.ClientLayoutItemType.SECTION:
2152
- case index$1.ClientLayoutItemType.GROUP:
2153
- return (index.h("div", { class: "mrd-layout-section__group", key: `group-${item.label}` }, item.label && index.h("h3", { class: "mrd-layout-section__group-title" }, item.label), ((_b = item.items) !== null && _b !== void 0 ? _b : []).map(child => this.renderItem(child))));
2154
- case index$1.ClientLayoutItemType.RELATED_VIEW:
2155
- case index$1.ClientLayoutItemType.VIEW:
2156
- return this.renderRelatedView(item);
2157
- default:
2158
- return null;
2159
- }
2160
- }
2161
- renderImageModal() {
2162
- if (!this.imagePreviewUrl)
2163
- return null;
2164
- return (index.h("div", { class: "mrd-layout-section__modal-backdrop", onClick: () => { this.imagePreviewUrl = null; } }, index.h("div", { class: "mrd-layout-section__modal", onClick: (e) => e.stopPropagation() }, index.h("button", { class: "mrd-layout-section__modal-close", onClick: () => { this.imagePreviewUrl = null; } }, "\u2715"), index.h("img", { class: "mrd-layout-section__modal-image", src: this.imagePreviewUrl, alt: "" }))));
2165
- }
2166
- render() {
2167
- return (index.h(index.Host, { key: '8966198eebd98570d2db2f4d2fe9ef3f8b466ec6' }, index.h("div", { key: '645ddbfdd829a0f9c1a4eab18105662af6c078b2', class: "mrd-layout-section" }, this.items.map(item => this.renderItem(item))), this.renderImageModal()));
2168
- }
2169
- get el() { return index.getElement(this); }
2170
- static get watchers() { return {
2171
- "data": [{
2172
- "dataChanged": 0
2173
- }]
2174
- }; }
2175
- };
2176
- MrdLayoutSection.style = mrdLayoutSectionScss();
2177
-
2178
- const mrdListFieldScss = () => `.sc-mrd-list-field-h{display:block}.mrd-list-field.sc-mrd-list-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-list-field__label.sc-mrd-list-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-list-field__label--required.sc-mrd-list-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-list-field__select.sc-mrd-list-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);padding-right:calc(var(--mrd-input-padding-x) + 1.5rem);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--mrd-space-3) center;border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;cursor:pointer;box-sizing:border-box}.mrd-list-field__select.sc-mrd-list-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-list-field__select.sc-mrd-list-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-list-field__select--error.sc-mrd-list-field{border-color:var(--mrd-border-color-error)}.mrd-list-field__select--error.sc-mrd-list-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-list-field__checkbox-list.sc-mrd-list-field{display:flex;flex-direction:column;gap:var(--mrd-space-2);padding:var(--mrd-space-3);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);background-color:var(--mrd-input-bg)}.mrd-list-field__checkbox-list--error.sc-mrd-list-field{border-color:var(--mrd-border-color-error)}.mrd-list-field__checkbox-item.sc-mrd-list-field{display:flex;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);cursor:pointer}.mrd-list-field__checkbox-item.sc-mrd-list-field input[type='checkbox'].sc-mrd-list-field{width:1rem;height:1rem;cursor:pointer;accent-color:var(--mrd-color-primary)}.mrd-list-field__color-dot.sc-mrd-list-field{display:inline-block;width:12px;height:12px;border-radius:50%;flex-shrink:0}.mrd-list-field__error.sc-mrd-list-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
2179
-
2180
- const MrdListField = class {
2181
- constructor(hostRef) {
2182
- index.registerInstance(this, hostRef);
2183
- this.mrdChange = index.createEvent(this, "mrdChange");
2184
- this.mrdBlur = index.createEvent(this, "mrdBlur");
2185
- this.name = '';
2186
- this.label = '';
2187
- this.value = '';
2188
- this.required = false;
2189
- this.disabled = false;
2190
- this.multiple = false;
2191
- this.locale = navigator.language;
2192
- /** List items from the API. Each item has a `key` (stored value) and `label`. */
2193
- this.listItems = [];
2194
- this.error = '';
2195
- this.selected = [];
2196
- this.handleSelectChange = (e) => {
2197
- const select = e.target;
2198
- if (this.multiple) {
2199
- const vals = Array.from(select.selectedOptions).map(o => o.value);
2200
- this.selected = vals;
2201
- if (this.required && !validateRequired(vals)) {
2202
- this.error = t('required', this.locale);
2203
- }
2204
- else {
2205
- this.error = '';
2206
- }
2207
- this.mrdChange.emit({ name: this.name, value: vals });
2208
- }
2209
- else {
2210
- const val = select.value;
2211
- if (this.required && !validateRequired(val)) {
2212
- this.error = t('required', this.locale);
2213
- }
2214
- else {
2215
- this.error = '';
2216
- }
2217
- this.mrdChange.emit({ name: this.name, value: val });
2218
- }
2219
- };
2220
- this.handleBlur = () => {
2221
- const val = this.multiple ? this.selected : this.value;
2222
- this.mrdBlur.emit({ name: this.name, value: val });
2223
- };
2224
- this.toggleCheckbox = (key) => {
2225
- if (this.selected.includes(key)) {
2226
- this.selected = this.selected.filter(v => v !== key);
2227
- }
2228
- else {
2229
- this.selected = [...this.selected, key];
2230
- }
2231
- if (this.required && !validateRequired(this.selected)) {
2232
- this.error = t('required', this.locale);
2233
- }
2234
- else {
2235
- this.error = '';
2236
- }
2237
- this.mrdChange.emit({ name: this.name, value: this.selected });
2238
- };
2239
- }
2240
- componentWillLoad() {
2241
- if (this.multiple) {
2242
- this.selected = Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
2243
- }
2244
- }
2245
- getContrastColor(bgColor) {
2246
- if (!bgColor)
2247
- return '#000000';
2248
- const hex = bgColor.replace('#', '');
2249
- const r = parseInt(hex.substr(0, 2), 16);
2250
- const g = parseInt(hex.substr(2, 2), 16);
2251
- const b = parseInt(hex.substr(4, 2), 16);
2252
- const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
2253
- return luminance > 0.5 ? '#000000' : '#ffffff';
2254
- }
2255
- render() {
2256
- var _a, _b;
2257
- const hasError = !!this.error;
2258
- const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
2259
- if (this.multiple) {
2260
- return (index.h(index.Host, null, index.h("div", { class: "mrd-list-field" }, this.label && (index.h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), index.h("div", { class: `mrd-list-field__checkbox-list${hasError ? ' mrd-list-field__checkbox-list--error' : ''}` }, this.listItems.map(lv => {
2261
- var _a, _b;
2262
- return (index.h("label", { key: lv.key, class: "mrd-list-field__checkbox-item" }, index.h("input", { type: "checkbox", checked: this.selected.includes(lv.key), disabled: this.disabled, onChange: () => this.toggleCheckbox(lv.key) }), (lv.color || lv.backgroundColor) && (index.h("span", { class: "mrd-list-field__color-dot", style: { backgroundColor: (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : '' } })), index.h("span", null, lv.label)));
2263
- })), hasError && index.h("span", { class: "mrd-list-field__error" }, this.error))));
2264
- }
2265
- return (index.h(index.Host, null, index.h("div", { class: "mrd-list-field" }, this.label && (index.h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-list-field__select${hasError ? ' mrd-list-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleSelectChange, onBlur: this.handleBlur }, index.h("option", { value: "" }, t('select_placeholder', this.locale)), this.listItems.map(lv => {
2266
- var _a, _b;
2267
- const bg = (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : null;
2268
- const style = bg ? { backgroundColor: bg, color: this.getContrastColor(bg) } : {};
2269
- return (index.h("option", { key: lv.key, value: lv.key, selected: lv.key === currentValue, style: style }, lv.label));
2270
- })), hasError && index.h("span", { class: "mrd-list-field__error" }, this.error))));
2271
- }
2272
- };
2273
- MrdListField.style = mrdListFieldScss();
2274
-
2275
- const mrdLongtextFieldScss = () => `.sc-mrd-longtext-field-h{display:block}.mrd-longtext-field.sc-mrd-longtext-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-longtext-field__label.sc-mrd-longtext-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-longtext-field__label--required.sc-mrd-longtext-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-longtext-field__input.sc-mrd-longtext-field{display:block;width:100%;min-height:calc(var(--mrd-input-height) * 5);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;resize:vertical;box-sizing:border-box;line-height:1.5}.mrd-longtext-field__input.sc-mrd-longtext-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-longtext-field__input.sc-mrd-longtext-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-longtext-field__input--error.sc-mrd-longtext-field{border-color:var(--mrd-border-color-error)}.mrd-longtext-field__input--error.sc-mrd-longtext-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-longtext-field__content.sc-mrd-longtext-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);white-space:pre-wrap;word-break:break-word;margin:0;padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);background-color:var(--mrd-input-bg-disabled);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);line-height:1.5}.mrd-longtext-field__error.sc-mrd-longtext-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
2276
-
2277
- const MrdLongtextField = class {
2278
- constructor(hostRef) {
2279
- index.registerInstance(this, hostRef);
2280
- this.mrdChange = index.createEvent(this, "mrdChange");
2281
- this.mrdBlur = index.createEvent(this, "mrdBlur");
2282
- this.name = '';
2283
- this.label = '';
2284
- this.value = '';
2285
- this.placeholder = '';
2286
- this.required = false;
2287
- this.disabled = false;
2288
- this.locale = navigator.language;
2289
- this.error = '';
2290
- this.handleInput = (e) => {
2291
- const val = e.target.value;
2292
- this.mrdChange.emit({ name: this.name, value: val });
2293
- };
2294
- this.handleBlur = (e) => {
2295
- const val = e.target.value;
2296
- if (this.required && !validateRequired(val)) {
2297
- this.error = t('required', this.locale);
2298
- }
2299
- else {
2300
- this.error = '';
2301
- }
2302
- this.mrdBlur.emit({ name: this.name, value: val });
2303
- };
2304
- }
2305
- render() {
2306
- const hasError = !!this.error;
2307
- return (index.h(index.Host, { key: '10d998b80f54cf7b10be26bf451d808c78579e69' }, index.h("div", { key: 'af45fe94a41f668bf6ddca670b42e065ee83ef23', class: "mrd-longtext-field" }, this.label && (index.h("label", { key: '31a08490d695ac9f4bbe5dff6a1ae3bb2a94337d', class: `mrd-longtext-field__label${this.required ? ' mrd-longtext-field__label--required' : ''}` }, this.label)), this.disabled ? (index.h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (index.h("textarea", { class: `mrd-longtext-field__input${hasError ? ' mrd-longtext-field__input--error' : ''}`, name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), hasError && index.h("span", { key: '7f133e72a882a8aaf33245445829754da1e6377b', class: "mrd-longtext-field__error" }, this.error))));
2308
- }
2309
- };
2310
- MrdLongtextField.style = mrdLongtextFieldScss();
2311
-
2312
- const mrdNumberFieldScss = () => `.sc-mrd-number-field-h{display:block}.mrd-number-field.sc-mrd-number-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-number-field__label.sc-mrd-number-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-number-field__label--required.sc-mrd-number-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-number-field__input-wrapper.sc-mrd-number-field{position:relative;display:flex;align-items:center}.mrd-number-field__input.sc-mrd-number-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;text-align:right}.mrd-number-field__input.sc-mrd-number-field::placeholder{color:var(--mrd-input-placeholder-color);text-align:left}.mrd-number-field__input.sc-mrd-number-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-number-field__input.sc-mrd-number-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-number-field__input--error.sc-mrd-number-field{border-color:var(--mrd-border-color-error)}.mrd-number-field__input--error.sc-mrd-number-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-number-field__error.sc-mrd-number-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
2313
-
2314
- const MrdNumberField = class {
2315
- constructor(hostRef) {
2316
- index.registerInstance(this, hostRef);
2317
- this.mrdChange = index.createEvent(this, "mrdChange");
2318
- this.mrdBlur = index.createEvent(this, "mrdBlur");
2319
- this.name = '';
2320
- this.label = '';
2321
- this.value = null;
2322
- this.placeholder = '';
2323
- this.required = false;
2324
- this.disabled = false;
2325
- this.locale = navigator.language;
2326
- this.dataType = index$1.ClientLayoutItemFieldDataType.INTEGER;
2327
- this.decimalPrecision = 2;
2328
- this.displayValue = '';
2329
- this.error = '';
2330
- this.handleInput = (e) => {
2331
- this.displayValue = e.target.value;
2332
- };
2333
- this.handleBlur = (e) => {
2334
- const raw = e.target.value;
2335
- const parsed = parseLocalizedNumber(raw, this.locale);
2336
- if (this.required && (parsed === null || raw === '')) {
2337
- this.error = t('required', this.locale);
2338
- }
2339
- else if (raw !== '' && !validateNumber(parsed, this.dataType)) {
2340
- this.error = t('invalid_number', this.locale);
2341
- }
2342
- else {
2343
- this.error = '';
2344
- }
2345
- if (parsed !== null && validateRequired(raw)) {
2346
- this.displayValue = this.formatForDisplay(parsed);
2347
- }
2348
- this.mrdChange.emit({ name: this.name, value: parsed });
2349
- this.mrdBlur.emit({ name: this.name, value: parsed });
2350
- };
2351
- this.handleFocus = () => {
2352
- // Show raw number on focus
2353
- if (this.value !== null && this.value !== undefined) {
2354
- const str = String(this.value);
2355
- this.displayValue = str;
2356
- }
2357
- };
2358
- }
2359
- componentWillLoad() {
2360
- if (this.value !== null && this.value !== undefined) {
2361
- this.displayValue = this.formatForDisplay(this.value);
2362
- }
2363
- }
2364
- formatForDisplay(val) {
2365
- if (this.dataType === index$1.ClientLayoutItemFieldDataType.PERCENTAGE) {
2366
- return formatNumber(val, this.locale, {
2367
- minimumFractionDigits: 0,
2368
- maximumFractionDigits: this.decimalPrecision,
2369
- }) + '%';
2370
- }
2371
- if (this.dataType === index$1.ClientLayoutItemFieldDataType.DECIMAL) {
2372
- return formatNumber(val, this.locale, {
2373
- minimumFractionDigits: this.decimalPrecision,
2374
- maximumFractionDigits: this.decimalPrecision,
2375
- });
2376
- }
2377
- return formatNumber(val, this.locale, { maximumFractionDigits: 0 });
2378
- }
2379
- render() {
2380
- const hasError = !!this.error;
2381
- const suffix = this.dataType === index$1.ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
2382
- this.dataType === index$1.ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
2383
- return (index.h(index.Host, { key: '195beed4d6453597320b79654feaabe8f742eff2' }, index.h("div", { key: 'c641d7a4d27ba28dd34acda98d38f245945d20bb', class: "mrd-number-field" }, this.label && (index.h("label", { key: '2a5f6eb48889a3ab0aa76d6b2ca5d59b20625bb2', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'a844b89e6a278629a8aefa4ac72e5e18e5904cab', class: "mrd-number-field__input-wrapper" }, index.h("input", { key: '1ce9c3d67b458601a0de95b3b8478ef05df73069', class: `mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`, type: "text", inputMode: "decimal", name: this.name, value: this.displayValue, placeholder: this.placeholder || (suffix ? `0${suffix}` : '0'), required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })), hasError && index.h("span", { key: '4226614a65a8d27543d1287e2c1f61f67c427e63', class: "mrd-number-field__error" }, this.error))));
2384
- }
2385
- };
2386
- MrdNumberField.style = mrdNumberFieldScss();
2387
-
2388
- const mrdRelationFieldScss = () => `.sc-mrd-relation-field-h{display:block}.mrd-relation-field.sc-mrd-relation-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%;position:relative}.mrd-relation-field__label.sc-mrd-relation-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-relation-field__label--required.sc-mrd-relation-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-relation-field__select.sc-mrd-relation-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);padding-right:calc(var(--mrd-input-padding-x) + 1.5rem);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--mrd-space-3) center;border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;cursor:pointer;box-sizing:border-box}.mrd-relation-field__select.sc-mrd-relation-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-relation-field__select.sc-mrd-relation-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-relation-field__select--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error)}.mrd-relation-field__select--error.sc-mrd-relation-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-relation-field__tags.sc-mrd-relation-field{display:flex;flex-wrap:wrap;gap:var(--mrd-space-1);margin-bottom:var(--mrd-space-1)}.mrd-relation-field__tag.sc-mrd-relation-field{display:inline-flex;align-items:center;gap:var(--mrd-space-1);padding:var(--mrd-space-1) var(--mrd-space-2);background-color:var(--mrd-color-primary-light);color:var(--mrd-color-primary-dark);border-radius:var(--mrd-border-radius-full);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium)}.mrd-relation-field__tag-remove.sc-mrd-relation-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-primary-dark);font-size:var(--mrd-font-size-xs);padding:0;line-height:1;opacity:0.7}.mrd-relation-field__tag-remove.sc-mrd-relation-field:hover{opacity:1}.mrd-relation-field__search-wrapper.sc-mrd-relation-field{position:relative;display:flex;align-items:center}.mrd-relation-field__search.sc-mrd-relation-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;box-sizing:border-box}.mrd-relation-field__search.sc-mrd-relation-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-relation-field__search.sc-mrd-relation-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-relation-field__search.sc-mrd-relation-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-relation-field__search--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error)}.mrd-relation-field__search--error.sc-mrd-relation-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-relation-field__spinner.sc-mrd-relation-field{position:absolute;right:var(--mrd-space-3);width:16px;height:16px;border:2px solid var(--mrd-color-neutral-200);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-spin 0.7s linear infinite}@keyframes mrd-spin{to{transform:rotate(360deg)}}.mrd-relation-field__results.sc-mrd-relation-field{position:absolute;top:calc(100% + var(--mrd-space-1));left:0;right:0;background-color:var(--mrd-color-white);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);box-shadow:var(--mrd-shadow-md);z-index:var(--mrd-z-dropdown);max-height:240px;overflow-y:auto}.mrd-relation-field__result-item.sc-mrd-relation-field{display:flex;flex-direction:column;padding:var(--mrd-space-2) var(--mrd-space-3);cursor:pointer;transition:background-color var(--mrd-transition-fast)}.mrd-relation-field__result-item.sc-mrd-relation-field:hover{background-color:var(--mrd-color-neutral-50)}.mrd-relation-field__result-item.sc-mrd-relation-field:not(:last-child){border-bottom:var(--mrd-border-width) solid var(--mrd-color-neutral-100)}.mrd-relation-field__result-label.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800);font-weight:var(--mrd-font-weight-medium)}.mrd-relation-field__result-desc.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-top:var(--mrd-space-1)}.mrd-relation-field__result-item--highlighted.sc-mrd-relation-field{background-color:var(--mrd-color-primary-light)}.mrd-relation-field__selected-value.sc-mrd-relation-field{display:flex;align-items:center;gap:var(--mrd-space-2);height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);background-color:var(--mrd-color-primary-light);border:var(--mrd-border-width) solid var(--mrd-color-primary);border-radius:var(--mrd-border-radius);box-sizing:border-box}.mrd-relation-field__selected-value--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error);background-color:var(--mrd-color-danger-light)}.mrd-relation-field__selected-name.sc-mrd-relation-field{flex:1;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-primary-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mrd-relation-field__selected-clear.sc-mrd-relation-field{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--mrd-color-primary-dark);font-size:var(--mrd-font-size-sm);padding:0;line-height:1;opacity:0.6;transition:opacity var(--mrd-transition-fast)}.mrd-relation-field__selected-clear.sc-mrd-relation-field:hover{opacity:1}.mrd-relation-field__no-results.sc-mrd-relation-field{padding:var(--mrd-space-4);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-relation-field__error.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
2389
-
2390
- const MrdRelationField = class {
2391
- constructor(hostRef) {
2392
- index.registerInstance(this, hostRef);
2393
- this.mrdChange = index.createEvent(this, "mrdChange");
2394
- this.mrdBlur = index.createEvent(this, "mrdBlur");
2395
- this.mrdSearch = index.createEvent(this, "mrdSearch");
2396
- this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
2397
- this.name = '';
2398
- this.label = '';
2399
- this.required = false;
2400
- this.disabled = false;
2401
- this.locale = navigator.language;
2402
- this.relatedClass = '';
2403
- /** When set, used instead of relatedClass for search queries (mostSignificantClass from API). */
2404
- this.mostSignificantClass = '';
2405
- this.displayType = index$1.ClientLayoutItemRelationDisplayType.SEARCH;
2406
- this.multiple = false;
2407
- this.dropdownValues = [];
2408
- /** Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record. */
2409
- this.value = null;
2410
- this.searchQuery = '';
2411
- this.searchResults = [];
2412
- this.allRecords = [];
2413
- this.isLoading = false;
2414
- this.selectedItems = [];
2415
- this.showResults = false;
2416
- this.error = '';
2417
- this.highlightedIndex = -1;
2418
- this.searchDebounce = null;
2419
- this.handleKeyDown = (e) => {
2420
- if (!this.showResults || this.searchResults.length === 0) {
2421
- if (e.key === 'Escape') {
2422
- this.showResults = false;
2423
- this.highlightedIndex = -1;
2424
- }
2425
- return;
2426
- }
2427
- if (e.key === 'ArrowDown') {
2428
- e.preventDefault();
2429
- this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.searchResults.length - 1);
2430
- }
2431
- else if (e.key === 'ArrowUp') {
2432
- e.preventDefault();
2433
- this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
2434
- }
2435
- else if (e.key === 'Enter') {
2436
- e.preventDefault();
2437
- if (this.highlightedIndex >= 0) {
2438
- this.handleResultSelect(this.searchResults[this.highlightedIndex]);
2439
- }
2440
- }
2441
- else if (e.key === 'Escape') {
2442
- this.showResults = false;
2443
- this.highlightedIndex = -1;
2444
- }
2445
- };
2446
- this.clearSelection = () => {
2447
- this.selectedItems = [];
2448
- this.searchQuery = '';
2449
- this.searchResults = [];
2450
- this.showResults = false;
2451
- this.highlightedIndex = -1;
2452
- this.mrdChange.emit({ name: this.name, value: this.multiple ? [] : null });
2453
- };
2454
- this.handleSearchInput = (e) => {
2455
- const query = e.target.value;
2456
- this.searchQuery = query;
2457
- if (this.searchDebounce)
2458
- clearTimeout(this.searchDebounce);
2459
- if (query.trim().length >= 2) {
2460
- this.isLoading = true;
2461
- this.showResults = true;
2462
- this.searchDebounce = setTimeout(() => {
2463
- this.mrdSearch.emit({ name: this.name, query, relatedClass: this.mostSignificantClass });
2464
- }, 300);
2465
- }
2466
- else {
2467
- this.searchResults = [];
2468
- this.showResults = false;
2469
- this.isLoading = false;
2470
- }
2471
- };
2472
- this.handleResultSelect = (result) => {
2473
- if (this.multiple) {
2474
- if (!this.selectedItems.find(i => i.id === result.id)) {
2475
- this.selectedItems = [...this.selectedItems, result];
2476
- }
2477
- this.searchQuery = '';
2478
- this.searchResults = [];
2479
- this.showResults = false;
2480
- const ids = this.selectedItems.map(i => i.id);
2481
- this.mrdChange.emit({ name: this.name, value: ids });
2482
- }
2483
- else {
2484
- this.selectedItems = [result];
2485
- this.searchQuery = result.label;
2486
- this.showResults = false;
2487
- this.mrdChange.emit({ name: this.name, value: result.id });
2488
- }
2489
- if (this.required && !validateRequired(this.selectedItems)) {
2490
- this.error = t('required', this.locale);
2491
- }
2492
- else {
2493
- this.error = '';
2494
- }
2495
- };
2496
- this.handleRemoveSelected = (id) => {
2497
- this.selectedItems = this.selectedItems.filter(i => i.id !== id);
2498
- const ids = this.selectedItems.map(i => i.id);
2499
- this.mrdChange.emit({ name: this.name, value: this.multiple ? ids : null });
2500
- };
2501
- this.handleDropdownChange = (e) => {
2502
- const val = e.target.value;
2503
- if (this.required && !validateRequired(val)) {
2504
- this.error = t('required', this.locale);
2505
- }
2506
- else {
2507
- this.error = '';
2508
- }
2509
- this.mrdChange.emit({ name: this.name, value: val });
2510
- };
2511
- this.handleBlur = () => {
2512
- var _a, _b;
2513
- setTimeout(() => {
2514
- this.showResults = false;
2515
- this.highlightedIndex = -1;
2516
- }, 200);
2517
- 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);
2518
- this.mrdBlur.emit({ name: this.name, value: val });
2519
- };
2520
- }
2521
- async setAllRecords(records) {
2522
- this.allRecords = records;
2523
- }
2524
- getValueHref() {
2525
- var _a, _b, _c;
2526
- const v = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
2527
- if (!v)
2528
- return '';
2529
- if (typeof v === 'object')
2530
- return (_c = v.id) !== null && _c !== void 0 ? _c : '';
2531
- return v;
2532
- }
2533
- allRecordsChanged() {
2534
- if (this.editBehavior !== index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN)
2535
- return;
2536
- const current = this.getValueHref();
2537
- if (!current)
2538
- return;
2539
- // Defer past Stencil's async render cycle: options must exist in the DOM before
2540
- // select.value can be set. setAttribute('selected') alone is ignored by browsers
2541
- // when the select already has an established value.
2542
- setTimeout(() => {
2543
- var _a;
2544
- const select = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector('select');
2545
- if (select)
2546
- select.value = current;
2547
- }, 0);
2548
- }
2549
- async setSearchResults(results) {
2550
- this.searchResults = results;
2551
- this.isLoading = false;
2552
- this.showResults = true;
2553
- this.highlightedIndex = -1;
2554
- }
2555
- async setLoading(loading) {
2556
- this.isLoading = loading;
2557
- }
2558
- toSearchResult(v) {
2559
- var _a, _b, _c, _d;
2560
- return {
2561
- id: (_b = (_a = v.id) !== null && _a !== void 0 ? _a : v.href) !== null && _b !== void 0 ? _b : '',
2562
- label: (_d = (_c = v.label) !== null && _c !== void 0 ? _c : v.name) !== null && _d !== void 0 ? _d : '',
2563
- description: v.description,
2564
- };
2565
- }
2566
- applyValuePrefill(v) {
2567
- if (!v)
2568
- return;
2569
- if (Array.isArray(v)) {
2570
- if (v.length > 0 && typeof v[0] === 'object') {
2571
- this.selectedItems = v.map(item => this.toSearchResult(item));
2572
- this.searchQuery = '';
2573
- }
2574
- // array of strings → user interaction, ignore
2575
- }
2576
- else if (typeof v === 'object') {
2577
- const obj = v;
2578
- if (Array.isArray(obj.values)) {
2579
- // Multiple relation: API embeds selected items in values[]
2580
- this.selectedItems = obj.values.map((item) => this.toSearchResult(item));
2581
- this.searchQuery = '';
2582
- }
2583
- else if (!this.multiple && (obj.id || obj.name || obj.label)) {
2584
- // Single relation: { href, name } or already { id, label }
2585
- const result = this.toSearchResult(obj);
2586
- this.selectedItems = [result];
2587
- this.searchQuery = result.label;
2588
- }
2589
- // else: collection href (multiple without values) or unrecognised — skip
2590
- }
2591
- }
2592
- componentWillLoad() {
2593
- this.applyValuePrefill(this.value);
2594
- }
2595
- // Handles edit-mode: values prop on mrd-form is often set async after mount.
2596
- // Only updates selectedItems when the new value contains { id, label } objects
2597
- // (host pre-fill). Plain href strings from user interaction are ignored.
2598
- valueChanged(newValue) {
2599
- this.applyValuePrefill(newValue);
2600
- }
2601
- componentDidLoad() {
2602
- // Only emit when there is no commonRelation dependency — the form orchestrates those.
2603
- if (this.editBehavior === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN && !this.commonRelation) {
2604
- // Defer to next tick so parent event listeners are registered after DOM patching
2605
- setTimeout(() => {
2606
- this.mrdFetchAll.emit({
2607
- name: this.name,
2608
- relatedClass: this.relatedClass,
2609
- mostSignificantClass: this.mostSignificantClass || undefined,
2610
- });
2611
- }, 0);
2612
- }
2613
- }
2614
- render() {
2615
- var _a, _b;
2616
- const hasError = !!this.error;
2617
- if (this.editBehavior === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN) {
2618
- const currentValue = this.getValueHref();
2619
- return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), index.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 }, index.h("option", { value: "" }, t('select_placeholder', this.locale)), this.allRecords.map(record => (index.h("option", { key: record.id, value: record.id, selected: record.id === currentValue }, record.label)))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
2620
- }
2621
- if (this.displayType === index$1.ClientLayoutItemRelationDisplayType.DROPDOWN) {
2622
- const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
2623
- return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), index.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 }, index.h("option", { value: "" }, t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (index.h("option", { key: dv.key, value: dv.key, selected: dv.key === currentValue }, dv.label)))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
2624
- }
2625
- // SEARCH mode
2626
- const labelEl = this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label));
2627
- // Single selection: show selected value as a badge, hide the search input
2628
- if (!this.multiple && this.selectedItems.length > 0) {
2629
- return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, labelEl, index.h("div", { class: `mrd-relation-field__selected-value${hasError ? ' mrd-relation-field__selected-value--error' : ''}` }, index.h("span", { class: "mrd-relation-field__selected-name" }, this.selectedItems[0].label), index.h("button", { type: "button", class: "mrd-relation-field__selected-clear", onClick: this.clearSelection, "aria-label": t('remove', this.locale) }, "\u2715")), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
2630
- }
2631
- return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, labelEl, this.multiple && this.selectedItems.length > 0 && (index.h("div", { class: "mrd-relation-field__tags" }, this.selectedItems.map(item => (index.h("span", { key: item.id, class: "mrd-relation-field__tag" }, item.label, index.h("button", { type: "button", class: "mrd-relation-field__tag-remove", onClick: () => this.handleRemoveSelected(item.id), "aria-label": t('remove', this.locale) }, "\u2715")))))), index.h("div", { class: "mrd-relation-field__search-wrapper" }, index.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 && (index.h("span", { class: "mrd-relation-field__spinner", "aria-label": t('loading', this.locale) }))), this.showResults && (index.h("div", { class: "mrd-relation-field__results" }, this.searchResults.length === 0 && !this.isLoading ? (index.h("div", { class: "mrd-relation-field__no-results" }, t('no_results', this.locale))) : (this.searchResults.map((result, i) => (index.h("div", { key: result.id, class: `mrd-relation-field__result-item${i === this.highlightedIndex ? ' mrd-relation-field__result-item--highlighted' : ''}`, onMouseDown: () => this.handleResultSelect(result) }, index.h("span", { class: "mrd-relation-field__result-label" }, result.label), result.description && (index.h("span", { class: "mrd-relation-field__result-desc" }, result.description)))))))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
2632
- }
2633
- get el() { return index.getElement(this); }
2634
- static get watchers() { return {
2635
- "allRecords": [{
2636
- "allRecordsChanged": 0
2637
- }],
2638
- "value": [{
2639
- "valueChanged": 0
2640
- }]
2641
- }; }
2642
- };
2643
- MrdRelationField.style = mrdRelationFieldScss();
2644
-
2645
- const mrdSecretFieldScss = () => `.sc-mrd-secret-field-h{display:block}.mrd-secret-field.sc-mrd-secret-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-secret-field__label.sc-mrd-secret-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-secret-field__label--required.sc-mrd-secret-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-secret-field__input.sc-mrd-secret-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box}.mrd-secret-field__input.sc-mrd-secret-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-secret-field__input.sc-mrd-secret-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-secret-field__input--error.sc-mrd-secret-field{border-color:var(--mrd-border-color-error)}.mrd-secret-field__input--error.sc-mrd-secret-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-secret-field__error.sc-mrd-secret-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}.mrd-secret-field__masked.sc-mrd-secret-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-label-color);letter-spacing:0.15em;user-select:none;pointer-events:none}`;
2646
-
2647
- const MrdSecretField = class {
2648
- constructor(hostRef) {
2649
- index.registerInstance(this, hostRef);
2650
- this.mrdChange = index.createEvent(this, "mrdChange");
2651
- this.mrdBlur = index.createEvent(this, "mrdBlur");
2652
- this.name = '';
2653
- this.label = '';
2654
- this.value = '';
2655
- this.placeholder = '';
2656
- this.required = false;
2657
- this.disabled = false;
2658
- this.locale = navigator.language;
2659
- this.error = '';
2660
- this.handleInput = (e) => {
2661
- const val = e.target.value;
2662
- this.mrdChange.emit({ name: this.name, value: val });
2663
- };
2664
- this.handleBlur = (e) => {
2665
- const val = e.target.value;
2666
- if (this.required && !validateRequired(val)) {
2667
- this.error = t('required', this.locale);
2668
- }
2669
- else {
2670
- this.error = '';
2671
- }
2672
- this.mrdBlur.emit({ name: this.name, value: val });
2673
- };
2674
- }
2675
- render() {
2676
- const hasError = !!this.error;
2677
- return (index.h(index.Host, { key: '08f1aa9d8ab9f4e41abb6d3286e5e383427a5409' }, index.h("div", { key: 'fabe38aa130e211cea81f2c2f227bc15ad3ebf7d', class: "mrd-secret-field" }, this.label && (index.h("label", { key: '69af8844eff8ce84daa622635c79130fb491eb0b', class: `mrd-secret-field__label${this.required ? ' mrd-secret-field__label--required' : ''}` }, this.label)), this.disabled
2678
- ? (index.h("span", { class: "mrd-secret-field__masked", "aria-label": this.label }, this.value ? '••••••••' : ''))
2679
- : (index.h("input", { class: `mrd-secret-field__input${hasError ? ' mrd-secret-field__input--error' : ''}`, type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), hasError && index.h("span", { key: 'e602004f0bb10916d1015e3c2b003523a292997c', class: "mrd-secret-field__error" }, this.error))));
2680
- }
2681
- };
2682
- MrdSecretField.style = mrdSecretFieldScss();
2683
-
2684
- const mrdTableScss = () => `.sc-mrd-table-h{display:block;width:100%}.mrd-table__scroll.sc-mrd-table{overflow-y:auto;overflow-x:auto;border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);overflow-anchor:none}.mrd-table.sc-mrd-table{overflow-x:auto}.mrd-table__table.sc-mrd-table{width:auto;min-width:100%;border-collapse:collapse;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-900)}.mrd-table__scroll.sc-mrd-table .mrd-table__table.sc-mrd-table{min-width:max-content}.mrd-table__header.sc-mrd-table{position:sticky;top:0;z-index:1;background:var(--mrd-color-white);text-align:left;padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:2px solid var(--mrd-border-color);color:var(--mrd-color-neutral-600);font-weight:var(--mrd-font-weight-medium);white-space:nowrap;font-size:var(--mrd-font-size-xs);text-transform:uppercase;letter-spacing:0.04em}.mrd-table__header--sortable.sc-mrd-table{cursor:pointer;user-select:none}.mrd-table__header--sortable.sc-mrd-table:hover{background:var(--mrd-color-neutral-50);color:var(--mrd-color-neutral-800)}.mrd-table__header--sorted-asc.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table{color:var(--mrd-color-primary);border-bottom-color:var(--mrd-color-primary)}.mrd-table__header-label.sc-mrd-table{margin-right:var(--mrd-space-1)}.mrd-table__sort-icon.sc-mrd-table{font-size:0.85rem;opacity:0.4;vertical-align:middle}.mrd-table__header--sorted-asc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table{opacity:1;color:var(--mrd-color-primary)}.mrd-table__filter-icon.sc-mrd-table{display:inline-flex;align-items:center;vertical-align:middle;margin-left:var(--mrd-space-1);color:var(--mrd-color-primary)}.mrd-table__row.sc-mrd-table{border-bottom:1px solid var(--mrd-border-color)}.mrd-table__row.sc-mrd-table:hover{background:var(--mrd-color-neutral-200) !important}.mrd-table__row--clickable.sc-mrd-table{cursor:pointer}.mrd-table__spacer.sc-mrd-table{border:none}.mrd-table__spacer.sc-mrd-table td.sc-mrd-table{padding:0;border:none}.mrd-table__cell.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);vertical-align:top;white-space:nowrap}.mrd-table__cell--numeric.sc-mrd-table{text-align:right;font-variant-numeric:tabular-nums}.mrd-table__row--loading.sc-mrd-table{background:transparent}.mrd-table__cell--placeholder.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:1px solid var(--mrd-border-color)}.mrd-table__placeholder-bar.sc-mrd-table{display:block;height:0.75rem;width:55%;border-radius:var(--mrd-border-radius-sm);background:linear-gradient( 90deg, var(--mrd-color-neutral-200) 25%, var(--mrd-color-neutral-100) 50%, var(--mrd-color-neutral-200) 75% );background-size:200% 100%;animation:mrd-shimmer 1.4s ease infinite}@keyframes mrd-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.mrd-table__toolbar.sc-mrd-table{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--mrd-space-2)}.mrd-table__toolbar-left.sc-mrd-table,.mrd-table__toolbar-right.sc-mrd-table{display:flex;gap:var(--mrd-space-2);align-items:center}.mrd-table__toolbar-center.sc-mrd-table{flex:1;display:flex;justify-content:center;align-items:center;gap:var(--mrd-space-1)}.mrd-table__view-switcher.sc-mrd-table{display:flex;align-items:center;gap:var(--mrd-space-1)}.mrd-table__view-arrow.sc-mrd-table{background:none;border:none;cursor:pointer;padding:0 var(--mrd-space-1);color:var(--mrd-color-neutral-500);font-size:var(--mrd-font-size-xs);line-height:1}.mrd-table__view-arrow.sc-mrd-table:hover{color:var(--mrd-color-neutral-800)}.mrd-table__view-title-wrap.sc-mrd-table{position:relative}.mrd-table__view-title.sc-mrd-table{font-size:var(--mrd-font-size-sm);font-weight:600;color:var(--mrd-color-neutral-800);font-family:var(--mrd-font-family);background:none;border:none;outline:none;cursor:pointer;padding:0 var(--mrd-space-1);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mrd-table__view-title.sc-mrd-table:hover{color:var(--mrd-color-primary)}.mrd-table__view-popover.sc-mrd-table{position:absolute;top:calc(100% + var(--mrd-space-1));left:50%;transform:translateX(-50%);background:var(--mrd-color-white);border:1px solid var(--mrd-color-neutral-200);border-radius:var(--mrd-radius-md);box-shadow:var(--mrd-shadow-md);z-index:100;min-width:160px;padding:var(--mrd-space-1) 0}.mrd-table__view-popover-item.sc-mrd-table{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:var(--mrd-space-2) var(--mrd-space-3);font-size:var(--mrd-font-size-sm);font-family:var(--mrd-font-family);color:var(--mrd-color-neutral-700);white-space:nowrap}.mrd-table__view-popover-item.sc-mrd-table:hover{background:var(--mrd-color-neutral-50)}.mrd-table__view-popover-item--active.sc-mrd-table{font-weight:600;color:var(--mrd-color-primary)}.mrd-table__action.sc-mrd-table{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:transparent;border:1px solid transparent;border-radius:var(--mrd-border-radius);cursor:pointer;color:var(--mrd-color-neutral-400);transition:background-color 0.15s, border-color 0.15s, color 0.15s}.mrd-table__action.sc-mrd-table:hover{background-color:var(--mrd-color-neutral-100);border-color:var(--mrd-color-neutral-300);color:var(--mrd-color-neutral-700)}.mrd-table__action.sc-mrd-table:disabled{opacity:0.4;cursor:not-allowed}.mrd-table__action--primary.sc-mrd-table{color:var(--mrd-color-neutral-500)}.mrd-table__action--primary.sc-mrd-table:hover{background:var(--mrd-color-primary);border-color:var(--mrd-color-primary);color:var(--mrd-color-white)}.mrd-table__action--danger.sc-mrd-table{color:var(--mrd-color-error)}.mrd-table__action--danger.sc-mrd-table:hover{background-color:var(--mrd-color-error-light, #fef2f2);border-color:var(--mrd-color-error)}.mrd-table__action-icon.sc-mrd-table{width:1.25rem;height:1.25rem;pointer-events:none;fill:currentColor}.mrd-table__action-tooltip.sc-mrd-table{display:none;position:absolute;bottom:calc(100% + 6px);right:0;padding:var(--mrd-space-1) var(--mrd-space-2);font-size:var(--mrd-font-size-xs);white-space:nowrap;background:var(--mrd-color-tooltip, #fffce1);color:var(--mrd-color-neutral-900);border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-sm, var(--mrd-border-radius));pointer-events:none;z-index:10}.mrd-table__action.sc-mrd-table:hover .mrd-table__action-tooltip.sc-mrd-table{display:block}.mrd-table__create-picker-wrap.sc-mrd-table{position:relative}.mrd-table__create-picker.sc-mrd-table{position:absolute;right:0;top:calc(100% + 4px);background:var(--mrd-color-white, #fff);border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);box-shadow:var(--mrd-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));z-index:10;min-width:10rem;padding:var(--mrd-space-1) 0}.mrd-table__create-picker-item.sc-mrd-table{display:block;width:100%;text-align:left;padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:none;cursor:pointer;font-size:var(--mrd-font-size-sm);font-family:var(--mrd-font-family);color:var(--mrd-color-neutral-800)}.mrd-table__create-picker-item.sc-mrd-table:hover{background:var(--mrd-color-neutral-50);color:var(--mrd-color-neutral-900)}.mrd-table__filter-toggle--active.sc-mrd-table{background:var(--mrd-color-primary);border-color:var(--mrd-color-primary);color:var(--mrd-color-white)}.mrd-table__filter-toggle--active.sc-mrd-table:hover{background:var(--mrd-color-primary-dark, var(--mrd-color-primary));border-color:var(--mrd-color-primary-dark, var(--mrd-color-primary));color:var(--mrd-color-white)}.mrd-table__filter-badge.sc-mrd-table{position:absolute;top:-6px;right:-6px;min-width:1.25rem;height:1.25rem;padding:0 3px;background:var(--mrd-color-error, #e53e3e);color:var(--mrd-color-white);border-radius:9999px;font-size:0.65rem;font-weight:var(--mrd-font-weight-medium);line-height:1.25rem;text-align:center;pointer-events:none}.mrd-table__header--filtered.sc-mrd-table{color:var(--mrd-color-primary);border-bottom-color:var(--mrd-color-primary)}.mrd-table__filter-popup.sc-mrd-table{position:fixed;width:280px;background:var(--mrd-color-white);border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);box-shadow:var(--mrd-shadow-md, 0 4px 12px rgba(0,0,0,.12));z-index:var(--mrd-z-dropdown, 200);font-size:var(--mrd-font-size-sm)}.mrd-table__filter-popup-header.sc-mrd-table{display:flex;align-items:center;justify-content:space-between;padding:var(--mrd-space-2) var(--mrd-space-3);border-bottom:1px solid var(--mrd-border-color)}.mrd-table__filter-popup-title.sc-mrd-table{font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);font-size:var(--mrd-font-size-sm)}.mrd-table__filter-close.sc-mrd-table{background:transparent;border:none;cursor:pointer;color:var(--mrd-color-neutral-500);font-size:0.9rem;padding:2px 4px;border-radius:3px;line-height:1}.mrd-table__filter-close.sc-mrd-table:hover{background:var(--mrd-color-neutral-100);color:var(--mrd-color-neutral-800)}.mrd-table__filter-section.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-3)}.mrd-table__filter-section-label.sc-mrd-table{font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-medium);text-transform:uppercase;letter-spacing:0.04em;color:var(--mrd-color-neutral-500);margin-bottom:var(--mrd-space-2)}.mrd-table__filter-sort-buttons.sc-mrd-table{display:flex;gap:var(--mrd-space-2)}.mrd-table__filter-sort-btn.sc-mrd-table{flex:1;padding:var(--mrd-space-1) var(--mrd-space-2);background:transparent;border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);cursor:pointer;font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-700)}.mrd-table__filter-sort-btn.sc-mrd-table:hover{background:var(--mrd-color-neutral-100)}.mrd-table__filter-sort-btn--active.sc-mrd-table{background:var(--mrd-color-primary);border-color:var(--mrd-color-primary);color:var(--mrd-color-white)}.mrd-table__filter-divider.sc-mrd-table{height:1px;background:var(--mrd-border-color);margin:0}.mrd-table__filter-editor.sc-mrd-table{display:flex;flex-direction:column;gap:var(--mrd-space-2)}.mrd-table__filter-select.sc-mrd-table,.mrd-table__filter-input.sc-mrd-table{width:100%;padding:var(--mrd-space-1) var(--mrd-space-2);border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-900);background:var(--mrd-color-white);box-sizing:border-box}.mrd-table__filter-select.sc-mrd-table:focus,.mrd-table__filter-input.sc-mrd-table:focus{outline:none;border-color:var(--mrd-color-primary);box-shadow:0 0 0 2px rgba(0,0,0,.06)}.mrd-table__filter-range.sc-mrd-table{display:flex;align-items:center;gap:var(--mrd-space-1)}.mrd-table__filter-range.sc-mrd-table .mrd-table__filter-input.sc-mrd-table{flex:1;min-width:0}.mrd-table__filter-range-sep.sc-mrd-table{color:var(--mrd-color-neutral-400);flex-shrink:0}.mrd-table__filter-range--stacked.sc-mrd-table{flex-direction:column;align-items:stretch;gap:var(--mrd-space-2)}.mrd-table__filter-range-label.sc-mrd-table{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-bottom:2px}.mrd-table__filter-radio-group.sc-mrd-table{display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-table__filter-radio-group--inline.sc-mrd-table{flex-direction:row;gap:var(--mrd-space-3)}.mrd-table__filter-radio-label.sc-mrd-table{display:flex;align-items:center;gap:var(--mrd-space-1);cursor:pointer;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-800)}.mrd-table__filter-list.sc-mrd-table{display:flex;flex-direction:column;gap:var(--mrd-space-1);max-height:180px;overflow-y:auto}.mrd-table__filter-list-controls.sc-mrd-table{display:flex;gap:var(--mrd-space-2);margin-bottom:var(--mrd-space-1)}.mrd-table__filter-list-btn.sc-mrd-table{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-primary);background:transparent;border:none;cursor:pointer;padding:0;text-decoration:underline}.mrd-table__filter-checkbox-label.sc-mrd-table{display:flex;align-items:center;gap:var(--mrd-space-1);cursor:pointer;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-800)}.mrd-table__filter-no-support.sc-mrd-table{font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);margin:0;font-style:italic}.mrd-table__filter-popup-footer.sc-mrd-table{display:flex;justify-content:flex-end;gap:var(--mrd-space-2);padding:var(--mrd-space-2) var(--mrd-space-3);border-top:1px solid var(--mrd-border-color)}.mrd-table__filter-btn.sc-mrd-table{padding:var(--mrd-space-1) var(--mrd-space-3);border-radius:var(--mrd-border-radius);border:1px solid var(--mrd-border-color);font-size:var(--mrd-font-size-sm);cursor:pointer}.mrd-table__filter-btn--clear.sc-mrd-table{background:transparent;color:var(--mrd-color-neutral-600)}.mrd-table__filter-btn--clear.sc-mrd-table:hover{background:var(--mrd-color-neutral-100)}.mrd-table__filter-btn--apply.sc-mrd-table{background:var(--mrd-color-primary);border-color:var(--mrd-color-primary);color:var(--mrd-color-white)}.mrd-table__filter-btn--apply.sc-mrd-table:hover{background:var(--mrd-color-primary-dark, var(--mrd-color-primary));border-color:var(--mrd-color-primary-dark, var(--mrd-color-primary))}.mrd-table__totals-row.sc-mrd-table{border-top:2px solid var(--mrd-border-color)}.mrd-table__totals-cell.sc-mrd-table{position:sticky;bottom:0;z-index:2;padding:var(--mrd-space-2) var(--mrd-space-4);background:var(--mrd-color-white);font-weight:var(--mrd-font-weight-medium);font-variant-numeric:tabular-nums;white-space:nowrap;border-top:2px solid var(--mrd-border-color)}.mrd-table__totals-cell--numeric.sc-mrd-table{text-align:right}.mrd-table__footer.sc-mrd-table{padding:var(--mrd-space-1) var(--mrd-space-2);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);text-align:right}.mrd-table__empty.sc-mrd-table{padding:var(--mrd-space-4) var(--mrd-space-3);color:var(--mrd-color-neutral-500);font-size:var(--mrd-font-size-sm);text-align:center;margin:0}.mrd-table__file-btn.sc-mrd-table{display:inline-flex;align-items:center;gap:var(--mrd-space-1);background:none;border:none;padding:0;cursor:pointer;color:var(--mrd-color-primary);font-size:var(--mrd-font-size-sm);font-family:inherit;max-width:100%;overflow:hidden}.mrd-table__file-btn.sc-mrd-table:hover{text-decoration:underline;color:var(--mrd-color-primary-dark)}.mrd-table__file-icon.sc-mrd-table{flex-shrink:0;width:1rem;height:1rem}.mrd-table__textblock-btn.sc-mrd-table{display:inline;background:none;border:none;padding:0 0 0 var(--mrd-space-1);cursor:pointer;color:var(--mrd-color-primary);font-size:var(--mrd-font-size-sm);font-family:inherit;line-height:inherit;vertical-align:middle}.mrd-table__textblock-btn.sc-mrd-table:hover{color:var(--mrd-color-primary-dark)}.mrd-table__modal-backdrop.sc-mrd-table{position:fixed;inset:0;background:rgba(0, 0, 0, 0.4);z-index:var(--mrd-z-modal, 300);display:flex;align-items:center;justify-content:center}.mrd-table__modal.sc-mrd-table{background:#fff;border-radius:var(--mrd-radius-md, 0.5rem);padding:var(--mrd-space-6);max-width:min(600px, 90vw);max-height:70vh;overflow-y:auto;position:relative;box-shadow:var(--mrd-shadow-lg)}.mrd-table__modal-close.sc-mrd-table{position:absolute;top:var(--mrd-space-3);right:var(--mrd-space-3);background:none;border:none;cursor:pointer;font-size:1.25rem;line-height:1;color:var(--mrd-color-text-muted, #6b7280);padding:0}.mrd-table__modal-close.sc-mrd-table:hover{color:var(--mrd-color-text, #111827)}.mrd-table__modal-text.sc-mrd-table{margin:0;padding-right:var(--mrd-space-6);white-space:pre-wrap;word-break:break-word;font-size:var(--mrd-font-size-sm);line-height:1.6}.mrd-table__json-preview.sc-mrd-table{font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;max-width:calc(100% - 1.5rem);vertical-align:middle}.mrd-table__modal-json.sc-mrd-table{margin:0;padding-right:var(--mrd-space-6);font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);white-space:pre-wrap;word-break:break-word;line-height:1.6;background:none;border:none}`;
2685
-
2686
- const BUFFER = 10;
2687
- /** Wacht deze tijd (ms) na het laatste scroll-event voordat pagina's worden
2688
- * aangevraagd. Pagina's die de gebruiker snel voorbij scrollt worden zo geskipt. */
2689
- const REQUEST_DEBOUNCE_MS = 150;
2690
- /** Breedte van de filterpopup in px — voor overflow-correctie. */
2691
- const POPUP_WIDTH = 280;
2692
- const TEXT_TYPES = new Set(['TEXT', 'TEXTBLOCK', 'EMAIL', 'HYPERLINK']);
2693
- const NUMERIC_TYPES = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
2694
- const DATE_TYPES = new Set(['DATE', 'DATETIME', 'TIME']);
2695
- const NO_FILTER_TYPES = new Set(['FILE', 'IMAGE']);
2696
- /** Column types that cannot be sorted or filtered (not stored in PostgreSQL). */
2697
- const NON_INTERACTIVE_TYPES = new Set(['LONGTEXT', 'JSON', 'FILE', 'IMAGE']);
2698
- const MrdTable = class {
2699
- constructor(hostRef) {
2700
- index.registerInstance(this, hostRef);
2701
- this.mrdLoadPage = index.createEvent(this, "mrdLoadPage");
2702
- this.mrdRowClick = index.createEvent(this, "mrdRowClick");
2703
- this.mrdAction = index.createEvent(this, "mrdAction");
2704
- this.mrdDownload = index.createEvent(this, "mrdDownload");
2705
- this.mrdLoadAggregations = index.createEvent(this, "mrdLoadAggregations");
2706
- // ── Non-state internals ────────────────────────────────────────────────────
2707
- this.pendingPages = new Set();
2708
- this.debounceTimer = null;
2709
- this.outsideClickHandler = null;
2710
- this.keydownHandler = null;
2711
- this.createPickerClickHandler = null;
2712
- this.viewPopoverClickHandler = null;
2713
- // ── Props ──────────────────────────────────────────────────────────────────
2714
- /** The VIEW or RELATED_VIEW layout item. Contains view config, dataClass, fromClass, actions etc. */
2715
- this.item = null;
2716
- /** Parent record id — required for RELATED_VIEW to build /{fromClass}/{parentId}/{dataClass}. */
2717
- this.parentId = '';
2718
- /** Direct rows (non-paginated mode, used when totalElements === 0). */
2719
- this.rows = [];
2720
- this.locale = navigator.language;
2721
- /** Total number of records across all pages. 0 = non-paginated mode. */
2722
- this.totalElements = 0;
2723
- /** Records per page (must match the API page size). */
2724
- this.pageSize = 20;
2725
- /** Row height in px — used for spacer and scroll-position maths. */
2726
- this.rowHeight = 36;
2727
- /** Height of the scroll container in px. */
2728
- this.tableHeight = 500;
2729
- // ── Internal state ─────────────────────────────────────────────────────────
2730
- /** Index into allViews[] for the currently displayed view. 0 = primary, 1+ = alternatives. */
2731
- this.activeViewIdx = 0;
2732
- this.loadedPages = new Map();
2733
- this.requestedPages = new Set();
2734
- this.renderStart = 0;
2735
- this.renderEnd = 0;
2736
- this.colWidths = [];
2737
- this.sortField = '';
2738
- this.sortDir = 'asc';
2739
- /** Whether the filter UI is visible on column headers. */
2740
- this.filterMode = false;
2741
- /** Active filters keyed by field name. */
2742
- this.activeFilters = new Map();
2743
- /** Field name of the currently open filter popup (null = closed). */
2744
- this.openFilterCol = null;
2745
- /** Filter state being edited in the open popup. */
2746
- this.pendingFilter = null;
2747
- /** Viewport-relative position for the filter popup. */
2748
- this.popupPos = { top: 0, left: 0 };
2749
- /** Whether the create-type picker dropdown is open. */
2750
- this.createPickerOpen = false;
2751
- /** Whether the view-switcher popover (full list) is open. */
2752
- this.viewPopoverOpen = false;
2753
- /** Current scroll offset of the scroll container — drives pagination footer. */
2754
- this.scrollTop = 0;
2755
- /** Full text shown in the TEXTBLOCK expand modal (null = closed). */
2756
- this.textblockModal = null;
2757
- /** Syntax-highlighted JSON HTML shown in the JSON expand modal (null = closed). */
2758
- this.jsonModal = null;
2759
- /** Aggregation totals received from the host via setAggregations(). Null = not yet loaded. */
2760
- this.aggregations = null;
2761
- /** Record count received via setAggregations().total; overrides totalElements for display. */
2762
- this.aggregationsTotal = null;
2763
- /** True when a fresh aggregations request is needed (set on init / filter change). */
2764
- this.aggregationsPending = false;
2765
- /** Lower bound on total derived from setPage() hasNext info; grows as pages load. */
2766
- this.minKnownTotal = 0;
2767
- this.handleScroll = (e) => {
2768
- const scroller = e.currentTarget;
2769
- const scrollTop = scroller.scrollTop;
2770
- const total = this.baseTotal;
2771
- const visStart = Math.floor(scrollTop / this.rowHeight);
2772
- const visEnd = Math.min(visStart + this.visibleCount(), total - 1);
2773
- this.scrollTop = scrollTop;
2774
- this.renderStart = Math.max(0, visStart - BUFFER);
2775
- this.renderEnd = Math.min(total - 1, visEnd + BUFFER);
2776
- this.requestPagesForWindow(this.renderStart, this.renderEnd);
2777
- };
2778
- }
2779
- // ── Prop watchers ─────────────────────────────────────────────────────────
2780
- /** Clamp renderEnd when totalElements shrinks (e.g. after a filter is applied). */
2781
- totalElementsChanged(newVal) {
2782
- this.renderEnd = Math.min(this.renderEnd, Math.max(0, newVal - 1));
2783
- }
2784
- /** Reset to primary view when the item prop is replaced from outside. */
2785
- itemChanged(newVal) {
2786
- var _a, _b;
2787
- this.activeViewIdx = 0;
2788
- this.applyDefaultSort((_b = (_a = newVal === null || newVal === void 0 ? void 0 : newVal.view) === null || _a === void 0 ? void 0 : _a.defaultSort) !== null && _b !== void 0 ? _b : '');
2789
- }
2790
- // ── Lifecycle ──────────────────────────────────────────────────────────────
2791
- componentWillLoad() {
2792
- var _a, _b, _c;
2793
- this.applyDefaultSort((_c = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.defaultSort) !== null && _c !== void 0 ? _c : '');
2794
- }
2795
- // ── Helpers ────────────────────────────────────────────────────────────────
2796
- applyDefaultSort(defaultSort) {
2797
- var _a;
2798
- if (defaultSort) {
2799
- const parts = defaultSort.split(',');
2800
- this.sortField = parts[0].trim();
2801
- this.sortDir = ((_a = parts[1]) === null || _a === void 0 ? void 0 : _a.trim()) === 'desc' ? 'desc' : 'asc';
2802
- }
2803
- else {
2804
- this.sortField = '';
2805
- this.sortDir = 'asc';
2806
- }
2807
- }
2808
- // ── Public API ─────────────────────────────────────────────────────────────
2809
- /**
2810
- * Initialise (or reset) the virtual scroll.
2811
- * Call after setting all props and registering the mrdLoadPage listener,
2812
- * but before calling setPage(0, rows).
2813
- */
2814
- async init() {
2815
- if (this.debounceTimer !== null) {
2816
- clearTimeout(this.debounceTimer);
2817
- this.debounceTimer = null;
2818
- }
2819
- this.pendingPages.clear();
2820
- this.loadedPages = new Map();
2821
- this.requestedPages = new Set();
2822
- this.colWidths = [];
2823
- this.scrollTop = 0;
2824
- this.renderStart = 0;
2825
- // Always fill the visible viewport on init — totalElements may be stale from a
2826
- // previous view. setPage() clamps renderEnd when the page is shorter than pageSize.
2827
- this.renderEnd = this.visibleCount() - 1;
2828
- const scroller = this.el.querySelector('.mrd-table__scroll');
2829
- if (scroller)
2830
- scroller.scrollTop = 0;
2831
- this.aggregations = null;
2832
- this.aggregationsTotal = null;
2833
- this.aggregationsPending = true;
2834
- this.minKnownTotal = 0;
2835
- // Always request page 0 — totalElements may be unknown (0) on first load.
2836
- this.mrdLoadPage.emit({ page: 0, sort: this.sortParam(), path: this.buildDataPath(), qs: this.buildQueryParams(0) });
2837
- this.requestedPages = new Set([0]);
2838
- }
2839
- /**
2840
- * Inject the rows for a given page (0-based).
2841
- * Creates a new Map reference so Stencil detects the state change.
2842
- *
2843
- * When the page contains fewer rows than pageSize it is the last page.
2844
- * renderEnd is clamped immediately so no loading-placeholder rows appear
2845
- * beyond the actual data — without requiring the host to update totalElements.
2846
- *
2847
- * Pass hasNext (from _links.next in the API response) for accurate last-page
2848
- * detection even when rows.length === pageSize (exact multiple of page size).
2849
- */
2850
- async setPage(pageNumber, rows, hasNext) {
2851
- const isLastPage = hasNext !== undefined ? !hasNext : rows.length < this.pageSize;
2852
- if (isLastPage) {
2853
- // lastRowIdx is -1 when the page is empty; clamp renderEnd to -1 so the
2854
- // render loop does not execute and no shimmer rows appear.
2855
- const lastRowIdx = pageNumber * this.pageSize + rows.length - 1;
2856
- this.renderEnd = Math.min(this.renderEnd, lastRowIdx);
2857
- // Exact total is known: update minKnownTotal so the scroll container has the right height.
2858
- this.minKnownTotal = pageNumber * this.pageSize + rows.length;
2859
- }
2860
- else {
2861
- // There is at least one more page — ensure the scrollbar covers at least that next page.
2862
- this.minKnownTotal = Math.max(this.minKnownTotal, (pageNumber + 1) * this.pageSize + 1);
2863
- }
2864
- const next = new Map(this.loadedPages);
2865
- next.set(pageNumber, rows);
2866
- this.loadedPages = next;
2867
- if (pageNumber === 0 && this.aggregationsPending) {
2868
- this.aggregationsPending = false;
2869
- const hasAggColumns = this.columns.some(c => c.type === 'FIELD' && c.aggregate);
2870
- if (!isLastPage || hasAggColumns) {
2871
- this.emitLoadAggregations();
2872
- }
2873
- }
2874
- }
2875
- /** Inject aggregation totals returned by the /aggregations endpoint. */
2876
- async setAggregations(data) {
2877
- var _a;
2878
- const total = (_a = data.total) !== null && _a !== void 0 ? _a : (typeof data.count === 'number' ? data.count : undefined);
2879
- if (total != null)
2880
- this.aggregationsTotal = total;
2881
- this.aggregations = data;
2882
- }
2883
- // ── Lifecycle ──────────────────────────────────────────────────────────────
2884
- disconnectedCallback() {
2885
- if (this.outsideClickHandler) {
2886
- document.removeEventListener('click', this.outsideClickHandler);
2887
- this.outsideClickHandler = null;
2888
- }
2889
- if (this.createPickerClickHandler) {
2890
- document.removeEventListener('click', this.createPickerClickHandler);
2891
- this.createPickerClickHandler = null;
2892
- }
2893
- if (this.keydownHandler) {
2894
- document.removeEventListener('keydown', this.keydownHandler);
2895
- this.keydownHandler = null;
2896
- }
2897
- if (this.viewPopoverClickHandler) {
2898
- document.removeEventListener('click', this.viewPopoverClickHandler);
2899
- this.viewPopoverClickHandler = null;
2900
- }
2901
- }
2902
- componentDidRender() {
2903
- if (this.colWidths.length === 0 && this.loadedPages.size > 0 && this.totalElements > 0) {
2904
- const ths = this.el.querySelectorAll('.mrd-table__header');
2905
- if (ths.length > 0) {
2906
- this.colWidths = Array.from(ths).map(th => th.offsetWidth);
2907
- }
2908
- }
2909
- }
2910
- // ── Paging / scroll helpers ────────────────────────────────────────────────
2911
- visibleCount() {
2912
- return Math.ceil(this.tableHeight / this.rowHeight);
2913
- }
2914
- sortParam() {
2915
- if (!this.sortField)
2916
- return '';
2917
- return this.sortDir === 'desc' ? `${this.sortField},desc` : this.sortField;
2918
- }
2919
- /** Stable ordered list: primary view first, then alternatives (from the item prop). */
2920
- get allViews() {
2921
- var _a, _b, _c, _d, _e, _f, _g;
2922
- if (!this.item)
2923
- return [];
2924
- const it = this.item;
2925
- return [
2926
- { label: (_e = (_d = (_c = (_a = it.label) !== null && _a !== void 0 ? _a : (_b = it.view) === null || _b === void 0 ? void 0 : _b.pluralLabel) !== null && _c !== void 0 ? _c : it.dataClass) !== null && _d !== void 0 ? _d : it.relatedClass) !== null && _e !== void 0 ? _e : '', dataClass: (_f = it.dataClass) !== null && _f !== void 0 ? _f : it.relatedClass, fromClass: it.fromClass, filterClass: it.filterClass, view: it.view },
2927
- ...((_g = it.alternativeViews) !== null && _g !== void 0 ? _g : []).map(av => {
2928
- var _a, _b, _c, _d;
2929
- return ({
2930
- label: (_d = (_c = (_a = av.label) !== null && _a !== void 0 ? _a : (_b = av.view) === null || _b === void 0 ? void 0 : _b.pluralLabel) !== null && _c !== void 0 ? _c : av.dataClass) !== null && _d !== void 0 ? _d : '',
2931
- dataClass: av.dataClass,
2932
- fromClass: av.fromClass,
2933
- filterClass: av.filterClass,
2934
- view: av.view,
2935
- });
2936
- }),
2937
- ];
2938
- }
2939
- /** Relative excel export path for the current view.
2940
- * VIEW: /excel/{dataClass}
2941
- * RELATED_VIEW: /excel/{fromClass}/{parentId}/{dataClass} */
2942
- buildExcelPath() {
2943
- var _a, _b, _c, _d;
2944
- const v = this.allViews[this.activeViewIdx];
2945
- if (!v)
2946
- return '';
2947
- if (((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === 'RELATED_VIEW') {
2948
- return `/excel/${(_b = v.fromClass) !== null && _b !== void 0 ? _b : ''}/${this.parentId}/${(_c = v.dataClass) !== null && _c !== void 0 ? _c : ''}`;
2949
- }
2950
- return `/excel/${(_d = v.dataClass) !== null && _d !== void 0 ? _d : ''}`;
2951
- }
2952
- buildActionDetail(action, basicType) {
2953
- var _a, _b, _c;
2954
- if (action === 'export') {
2955
- return { action, path: this.buildExcelPath(), qs: this.buildQueryParams(0) };
2956
- }
2957
- if (action === 'create') {
2958
- const v = this.allViews[this.activeViewIdx];
2959
- const parentPath = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === 'RELATED_VIEW'
2960
- ? `/${(_b = v === null || v === void 0 ? void 0 : v.fromClass) !== null && _b !== void 0 ? _b : ''}/${this.parentId}`
2961
- : null;
2962
- return Object.assign({ action, dataClass: (_c = v === null || v === void 0 ? void 0 : v.dataClass) !== null && _c !== void 0 ? _c : '', parentPath }, (basicType ? { basicType } : {}));
2963
- }
2964
- return { action };
2965
- }
2966
- /** Relative data path for the current view, without query string.
2967
- * VIEW: /{dataClass}
2968
- * RELATED_VIEW: /{fromClass}/{parentId}/{dataClass} */
2969
- buildDataPath() {
2970
- var _a, _b, _c, _d;
2971
- const v = this.allViews[this.activeViewIdx];
2972
- if (!v)
2973
- return '';
2974
- if (((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === 'RELATED_VIEW') {
2975
- return `/${(_b = v.fromClass) !== null && _b !== void 0 ? _b : ''}/${this.parentId}/${(_c = v.dataClass) !== null && _c !== void 0 ? _c : ''}`;
2976
- }
2977
- return `/${(_d = v.dataClass) !== null && _d !== void 0 ? _d : ''}`;
2978
- }
2979
- /** Build query params for a page request from current sort, view filters, filterClass and active column filters. */
2980
- buildQueryParams(page) {
2981
- var _a, _b, _c, _d, _e, _f, _g;
2982
- const v = this.allViews[this.activeViewIdx];
2983
- const p = new URLSearchParams();
2984
- if (page > 0)
2985
- p.set('page', String(page));
2986
- const sort = this.sortParam();
2987
- if (sort)
2988
- p.set('sort', sort);
2989
- const filterClass = v === null || v === void 0 ? void 0 : v.filterClass;
2990
- if (filterClass)
2991
- p.set('type', filterClass);
2992
- for (const f of ((_b = (_a = v === null || v === void 0 ? void 0 : v.view) === null || _a === void 0 ? void 0 : _a.filter) !== null && _b !== void 0 ? _b : [])) {
2993
- if (!f.name)
2994
- continue;
2995
- if (f.operator === 'EMPTY') {
2996
- p.set(f.name, '');
2997
- continue;
2998
- }
2999
- if (f.operator === 'NOT_EMPTY') {
3000
- p.set(f.name + '_notempty', 'true');
3001
- continue;
3002
- }
3003
- if (f.operator === 'STARTS_WITH') {
3004
- p.set(f.name + '_startswith', String((_c = f.value) !== null && _c !== void 0 ? _c : ''));
3005
- continue;
3006
- }
3007
- if (f.operator === 'FROM') {
3008
- p.set(f.name + '_from', String((_d = f.value) !== null && _d !== void 0 ? _d : ''));
3009
- continue;
3010
- }
3011
- if (f.operator === 'TO') {
3012
- p.set(f.name + '_to', String((_e = f.value) !== null && _e !== void 0 ? _e : ''));
3013
- continue;
3014
- }
3015
- if (f.value != null) {
3016
- p.set(f.name, String(f.value));
3017
- }
3018
- }
3019
- for (const f of this.activeFilters.values()) {
3020
- if (f.operator === 'isEmpty') {
3021
- p.set(f.field, '');
3022
- continue;
3023
- }
3024
- if (f.operator === 'isNotEmpty') {
3025
- p.set(f.field + '_notempty', 'true');
3026
- continue;
3027
- }
3028
- if (f.operator === 'startsWith') {
3029
- p.set(f.field + '_startswith', String((_f = f.value) !== null && _f !== void 0 ? _f : ''));
3030
- continue;
3031
- }
3032
- if ((_g = f.values) === null || _g === void 0 ? void 0 : _g.length) {
3033
- p.set(f.field, f.values.join(','));
3034
- continue;
3035
- }
3036
- if (f.value != null)
3037
- p.set(f.field, String(f.value));
3038
- if (f.from != null)
3039
- p.set(f.field + '_from', String(f.from));
3040
- if (f.to != null)
3041
- p.set(f.field + '_to', String(f.to));
3042
- }
3043
- return p.toString();
3044
- }
3045
- get columns() {
3046
- var _a, _b, _c;
3047
- return ((_c = (_b = (_a = this.allViews[this.activeViewIdx]) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.values) !== null && _c !== void 0 ? _c : []);
3048
- }
3049
- get tableActions() {
3050
- var _a, _b;
3051
- const raw = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.actions) !== null && _b !== void 0 ? _b : [];
3052
- return (raw !== null && raw !== void 0 ? raw : []).reduce((acc, a) => {
3053
- if (a === 'NEW')
3054
- acc.push({ action: 'create', label: t('table_new_record', this.locale), icon: 'assets/sprites.svg#icon-plus', variant: 'primary' });
3055
- if (a === 'EXPORT')
3056
- acc.push({ action: 'export', label: t('table_export_excel', this.locale), icon: 'assets/sprites.svg#icon-file-excel' });
3057
- return acc;
3058
- }, []);
3059
- }
3060
- toggleCreatePicker() {
3061
- if (this.createPickerOpen) {
3062
- this.closeCreatePicker();
3063
- }
3064
- else {
3065
- this.createPickerOpen = true;
3066
- if (this.createPickerClickHandler)
3067
- document.removeEventListener('click', this.createPickerClickHandler);
3068
- this.createPickerClickHandler = (ev) => {
3069
- const wrap = this.el.querySelector('.mrd-table__create-picker-wrap');
3070
- if (wrap && !wrap.contains(ev.target))
3071
- this.closeCreatePicker();
3072
- };
3073
- document.addEventListener('click', this.createPickerClickHandler);
3074
- }
3075
- }
3076
- closeCreatePicker() {
3077
- this.createPickerOpen = false;
3078
- if (this.createPickerClickHandler) {
3079
- document.removeEventListener('click', this.createPickerClickHandler);
3080
- this.createPickerClickHandler = null;
3081
- }
3082
- }
3083
- colName(col) {
3084
- var _a;
3085
- return (_a = col.name) !== null && _a !== void 0 ? _a : '';
3086
- }
3087
- colDataType(col) {
3088
- var _a;
3089
- if (col.type === 'RELATION')
3090
- return 'RELATION';
3091
- return (_a = col.dataType) !== null && _a !== void 0 ? _a : 'TEXT';
3092
- }
3093
- /** True when we have a reliable total: either from the aggregations response or because
3094
- * a short page told us it was the last page (exact count from row length). */
3095
- isTotalKnown() {
3096
- if (this.aggregationsTotal != null)
3097
- return true;
3098
- for (const rows of this.loadedPages.values()) {
3099
- if (rows.length < this.pageSize)
3100
- return true;
3101
- }
3102
- return false;
3103
- }
3104
- /** Effective total: aggregations-response > totalElements prop > minKnownTotal from setPage(). */
3105
- get baseTotal() {
3106
- if (this.aggregationsTotal != null)
3107
- return this.aggregationsTotal;
3108
- if (this.totalElements > 0)
3109
- return this.totalElements;
3110
- return this.minKnownTotal;
3111
- }
3112
- // ── Aggregation helpers ────────────────────────────────────────────────────
3113
- buildAggregationParams() {
3114
- var _a;
3115
- const groups = { sum: [], avg: [], count: [] };
3116
- for (const col of this.columns) {
3117
- if (col.type !== 'FIELD' || !col.aggregate)
3118
- continue;
3119
- const fn = col.aggregate.toLowerCase();
3120
- if (fn in groups)
3121
- groups[fn].push((_a = col.name) !== null && _a !== void 0 ? _a : '');
3122
- }
3123
- const params = {};
3124
- if (groups.sum.length)
3125
- params.sum = groups.sum;
3126
- if (groups.avg.length)
3127
- params.avg = groups.avg;
3128
- if (groups.count.length)
3129
- params.count = groups.count;
3130
- return Object.keys(params).length > 0 ? params : null;
3131
- }
3132
- buildAggregationQs() {
3133
- var _a, _b, _c;
3134
- const p = new URLSearchParams(this.buildQueryParams(0));
3135
- p.delete('page');
3136
- p.delete('sort');
3137
- const groups = this.buildAggregationParams();
3138
- if ((_a = groups === null || groups === void 0 ? void 0 : groups.sum) === null || _a === void 0 ? void 0 : _a.length)
3139
- p.set('sum', groups.sum.join(','));
3140
- if ((_b = groups === null || groups === void 0 ? void 0 : groups.avg) === null || _b === void 0 ? void 0 : _b.length)
3141
- p.set('avg', groups.avg.join(','));
3142
- if ((_c = groups === null || groups === void 0 ? void 0 : groups.count) === null || _c === void 0 ? void 0 : _c.length)
3143
- p.set('count', groups.count.join(','));
3144
- return p.toString();
3145
- }
3146
- emitLoadAggregations() {
3147
- this.mrdLoadAggregations.emit({ path: this.buildDataPath(), qs: this.buildQueryParams(0), aggQs: this.buildAggregationQs() });
3148
- }
3149
- renderAggregationValue(col) {
3150
- var _a;
3151
- if (col.type !== 'FIELD' || !col.aggregate || !this.aggregations)
3152
- return '';
3153
- const fn = col.aggregate.toLowerCase();
3154
- const aggData = this.aggregations[fn];
3155
- const val = typeof aggData === 'object' && aggData !== null
3156
- ? aggData[(_a = col.name) !== null && _a !== void 0 ? _a : '']
3157
- : undefined;
3158
- if (val == null)
3159
- return '';
3160
- const dt = col.dataType;
3161
- if (dt === 'INTEGER')
3162
- return formatNumber(val, this.locale, { maximumFractionDigits: 0 });
3163
- if (dt === 'PERCENTAGE')
3164
- return formatPercentage(val, this.locale);
3165
- if (dt === 'CURRENCY' && col.currencyCode)
3166
- return formatCurrency(val, col.currencyCode, this.locale);
3167
- return formatNumber(val, this.locale);
3168
- }
3169
- // ── Reset pagination ───────────────────────────────────────────────────────
3170
- /** Reset pagination state and scroll to top (used after sort or filter change). */
3171
- resetPages() {
3172
- if (this.debounceTimer !== null) {
3173
- clearTimeout(this.debounceTimer);
3174
- this.debounceTimer = null;
3175
- }
3176
- this.pendingPages.clear();
3177
- this.loadedPages = new Map();
3178
- this.requestedPages = new Set();
3179
- this.colWidths = [];
3180
- this.scrollTop = 0;
3181
- this.renderStart = 0;
3182
- this.minKnownTotal = 0;
3183
- // Mirror init(): use visibleCount so the first page is always requested.
3184
- // setPage() will clamp renderEnd down when the last page is shorter.
3185
- this.renderEnd = this.visibleCount() - 1;
3186
- const scroller = this.el.querySelector('.mrd-table__scroll');
3187
- if (scroller)
3188
- scroller.scrollTop = 0;
3189
- }
3190
- handleSortClick(col) {
3191
- const name = this.colName(col);
3192
- if (this.sortField === name) {
3193
- this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
3194
- }
3195
- else {
3196
- this.sortField = name;
3197
- this.sortDir = 'asc';
3198
- }
3199
- this.resetPages();
3200
- this.emitPagesForWindow(this.renderStart, this.renderEnd);
3201
- }
3202
- applySort(col, dir) {
3203
- this.sortField = this.colName(col);
3204
- this.sortDir = dir;
3205
- this.resetPages();
3206
- this.emitPagesForWindow(this.renderStart, this.renderEnd);
3207
- }
3208
- emitPagesForWindow(start, end) {
3209
- const firstPage = Math.floor(start / this.pageSize);
3210
- const lastPage = Math.floor(end / this.pageSize);
3211
- const next = new Set(this.requestedPages);
3212
- let changed = false;
3213
- for (let p = firstPage; p <= lastPage; p++) {
3214
- if (!this.loadedPages.has(p) && !next.has(p)) {
3215
- next.add(p);
3216
- this.mrdLoadPage.emit({ page: p, sort: this.sortParam(), path: this.buildDataPath(), qs: this.buildQueryParams(p) });
3217
- changed = true;
3218
- }
3219
- }
3220
- if (changed)
3221
- this.requestedPages = next;
3222
- }
3223
- getRow(i) {
3224
- var _a;
3225
- const page = this.loadedPages.get(Math.floor(i / this.pageSize));
3226
- return (_a = page === null || page === void 0 ? void 0 : page[i % this.pageSize]) !== null && _a !== void 0 ? _a : null;
3227
- }
3228
- requestPagesForWindow(start, end) {
3229
- const firstPage = Math.floor(start / this.pageSize);
3230
- const lastPage = Math.floor(end / this.pageSize);
3231
- let anyNew = false;
3232
- for (let p = firstPage; p <= lastPage; p++) {
3233
- if (!this.loadedPages.has(p) && !this.requestedPages.has(p) && !this.pendingPages.has(p)) {
3234
- this.pendingPages.add(p);
3235
- anyNew = true;
3236
- }
3237
- }
3238
- if (!anyNew)
3239
- return;
3240
- if (this.debounceTimer !== null)
3241
- clearTimeout(this.debounceTimer);
3242
- this.debounceTimer = setTimeout(() => this.flushPendingPages(), REQUEST_DEBOUNCE_MS);
3243
- }
3244
- flushPendingPages() {
3245
- this.debounceTimer = null;
3246
- if (this.pendingPages.size === 0)
3247
- return;
3248
- const next = new Set(this.requestedPages);
3249
- let changed = false;
3250
- for (const page of this.pendingPages) {
3251
- if (this.loadedPages.has(page) || next.has(page))
3252
- continue;
3253
- const pageStart = page * this.pageSize;
3254
- const pageEnd = pageStart + this.pageSize - 1;
3255
- if (pageEnd < this.renderStart || pageStart > this.renderEnd)
3256
- continue;
3257
- next.add(page);
3258
- this.mrdLoadPage.emit({ page, sort: this.sortParam(), path: this.buildDataPath(), qs: this.buildQueryParams(page) });
3259
- changed = true;
3260
- }
3261
- this.pendingPages.clear();
3262
- if (changed)
3263
- this.requestedPages = next;
3264
- }
3265
- // ── Filter helpers ─────────────────────────────────────────────────────────
3266
- handleFilterToggle() {
3267
- this.filterMode = !this.filterMode;
3268
- if (!this.filterMode)
3269
- this.closeFilterPopup();
3270
- }
3271
- handleFilterOpen(col, e) {
3272
- e.stopPropagation();
3273
- const btn = e.currentTarget;
3274
- const rect = btn.getBoundingClientRect();
3275
- let left = rect.left;
3276
- if (left + POPUP_WIDTH > window.innerWidth - 8)
3277
- left = rect.right - POPUP_WIDTH;
3278
- this.popupPos = { top: rect.bottom + 4, left: Math.max(8, left) };
3279
- const name = this.colName(col);
3280
- const dataType = this.colDataType(col);
3281
- const existing = this.activeFilters.get(name);
3282
- // Set the default operator explicitly so it is present in the ColumnFilter
3283
- // even when the user never touches the operator dropdown.
3284
- const defaultOperator = (TEXT_TYPES.has(dataType) || dataType === 'RELATION')
3285
- ? 'startsWith'
3286
- : undefined;
3287
- // For DATETIME, stored values are UTC ISO strings; convert back to local
3288
- // "YYYY-MM-DD" dates so the date inputs show what the user originally entered.
3289
- // If from and to cover the same local day it was an exact-date filter — restore
3290
- // to exact mode so the user sees the single-date input again.
3291
- if (dataType === 'DATETIME' && existing && existing.operator !== 'isEmpty' && existing.operator !== 'isNotEmpty') {
3292
- const display = Object.assign({}, existing);
3293
- if (typeof display.from === 'string' && display.from)
3294
- display.from = this.utcISOToLocalDate(display.from);
3295
- if (typeof display.to === 'string' && display.to)
3296
- display.to = this.utcISOToLocalDateExclusiveEnd(display.to);
3297
- if (display.from && display.to && display.from === display.to) {
3298
- this.pendingFilter = Object.assign(Object.assign({}, display), { value: display.from, from: undefined, to: undefined });
3299
- }
3300
- else {
3301
- this.pendingFilter = display;
3302
- }
3303
- }
3304
- else {
3305
- this.pendingFilter = existing ? Object.assign({}, existing) : { field: name, dataType, operator: defaultOperator };
3306
- }
3307
- this.openFilterCol = name;
3308
- // Close on outside click — re-register to replace any stale handler
3309
- if (this.outsideClickHandler)
3310
- document.removeEventListener('click', this.outsideClickHandler);
3311
- this.outsideClickHandler = (ev) => {
3312
- const popup = this.el.querySelector('.mrd-table__filter-popup');
3313
- if (popup && !popup.contains(ev.target))
3314
- this.closeFilterPopup();
3315
- };
3316
- document.addEventListener('click', this.outsideClickHandler);
3317
- }
3318
- closeFilterPopup() {
3319
- this.openFilterCol = null;
3320
- this.pendingFilter = null;
3321
- if (this.outsideClickHandler) {
3322
- document.removeEventListener('click', this.outsideClickHandler);
3323
- this.outsideClickHandler = null;
3324
- }
3325
- }
3326
- openTextblockModal(text) {
3327
- this.textblockModal = text;
3328
- if (this.keydownHandler)
3329
- document.removeEventListener('keydown', this.keydownHandler);
3330
- this.keydownHandler = (ev) => {
3331
- if (ev.key === 'Escape')
3332
- this.closeTextblockModal();
3333
- };
3334
- document.addEventListener('keydown', this.keydownHandler);
3335
- }
3336
- closeTextblockModal() {
3337
- this.textblockModal = null;
3338
- if (this.keydownHandler) {
3339
- document.removeEventListener('keydown', this.keydownHandler);
3340
- this.keydownHandler = null;
3341
- }
3342
- }
3343
- openJsonModal(html) {
3344
- this.jsonModal = html;
3345
- if (this.keydownHandler)
3346
- document.removeEventListener('keydown', this.keydownHandler);
3347
- this.keydownHandler = (ev) => {
3348
- if (ev.key === 'Escape')
3349
- this.closeJsonModal();
3350
- };
3351
- document.addEventListener('keydown', this.keydownHandler);
3352
- }
3353
- closeJsonModal() {
3354
- this.jsonModal = null;
3355
- if (this.keydownHandler) {
3356
- document.removeEventListener('keydown', this.keydownHandler);
3357
- this.keydownHandler = null;
3358
- }
3359
- }
3360
- setPending(key, val) {
3361
- this.pendingFilter = Object.assign(Object.assign({}, this.pendingFilter), { [key]: val });
3362
- }
3363
- togglePendingValue(key, checked) {
3364
- var _a, _b;
3365
- const current = (_b = (_a = this.pendingFilter) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
3366
- this.pendingFilter = Object.assign(Object.assign({}, this.pendingFilter), { values: checked ? [...current, key] : current.filter(k => k !== key) });
3367
- }
3368
- filterHasValue(f) {
3369
- if (f.operator === 'isEmpty' || f.operator === 'isNotEmpty')
3370
- return true;
3371
- if (f.values !== undefined && f.values.length > 0)
3372
- return true;
3373
- if (f.value != null && f.value !== '')
3374
- return true;
3375
- if (typeof f.value === 'boolean')
3376
- return true;
3377
- if (f.from != null && f.from !== '')
3378
- return true;
3379
- if (f.to != null && f.to !== '')
3380
- return true;
3381
- return false;
3382
- }
3383
- // Convert a local "YYYY-MM-DD" date string to the UTC ISO string at the
3384
- // start of that local day (midnight). new Date(y, m, d) uses local time.
3385
- dateLocalToUTCStart(dateStr) {
3386
- if (!dateStr)
3387
- return dateStr;
3388
- const [year, month, day] = dateStr.split('-').map(Number);
3389
- return new Date(year, month - 1, day).toISOString().replace(/\.\d{3}Z$/, 'Z');
3390
- }
3391
- // Start of the day AFTER the given local date (exclusive range end).
3392
- dateLocalToUTCEndExclusive(dateStr) {
3393
- if (!dateStr)
3394
- return dateStr;
3395
- const [year, month, day] = dateStr.split('-').map(Number);
3396
- return new Date(year, month - 1, day + 1).toISOString().replace(/\.\d{3}Z$/, 'Z');
3397
- }
3398
- // Convert a stored UTC ISO string back to the local "YYYY-MM-DD" date.
3399
- utcISOToLocalDate(utcStr) {
3400
- if (!utcStr)
3401
- return utcStr;
3402
- const d = new Date(utcStr);
3403
- if (isNaN(d.getTime()))
3404
- return utcStr;
3405
- return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
3406
- }
3407
- // The stored "to" value is the exclusive end (midnight of the next day).
3408
- // Subtract one day to recover the local date the user entered.
3409
- utcISOToLocalDateExclusiveEnd(utcStr) {
3410
- if (!utcStr)
3411
- return utcStr;
3412
- const d = new Date(utcStr);
3413
- if (isNaN(d.getTime()))
3414
- return utcStr;
3415
- d.setDate(d.getDate() - 1);
3416
- return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
3417
- }
3418
- applyFilter() {
3419
- const f = this.pendingFilter;
3420
- if (!(f === null || f === void 0 ? void 0 : f.field)) {
3421
- this.closeFilterPopup();
3422
- return;
3423
- }
3424
- // For DATETIME fields the user enters local dates; convert to UTC ISO strings.
3425
- // Exact date → range covering the full local day (from = midnight, to = next midnight).
3426
- // "to" is always the exclusive end (midnight of the next local day).
3427
- let normalized = Object.assign({}, f);
3428
- if (f.dataType === 'DATETIME' && f.operator !== 'isEmpty' && f.operator !== 'isNotEmpty') {
3429
- if (typeof normalized.value === 'string' && normalized.value) {
3430
- normalized.from = this.dateLocalToUTCStart(normalized.value);
3431
- normalized.to = this.dateLocalToUTCEndExclusive(normalized.value);
3432
- normalized.value = undefined;
3433
- }
3434
- else {
3435
- if (typeof normalized.from === 'string' && normalized.from)
3436
- normalized.from = this.dateLocalToUTCStart(normalized.from);
3437
- if (typeof normalized.to === 'string' && normalized.to)
3438
- normalized.to = this.dateLocalToUTCEndExclusive(normalized.to);
3439
- }
3440
- }
3441
- const next = new Map(this.activeFilters);
3442
- if (this.filterHasValue(normalized)) {
3443
- next.set(normalized.field, normalized);
3444
- }
3445
- else {
3446
- next.delete(normalized.field);
3447
- }
3448
- this.activeFilters = next;
3449
- this.closeFilterPopup();
3450
- this.aggregations = null;
3451
- this.aggregationsTotal = null;
3452
- this.aggregationsPending = true;
3453
- if (this.totalElements > 0 || this.minKnownTotal > 0) {
3454
- this.resetPages();
3455
- this.emitPagesForWindow(this.renderStart, this.renderEnd);
3456
- }
3457
- }
3458
- clearFilter() {
3459
- const name = this.openFilterCol;
3460
- const next = new Map(this.activeFilters);
3461
- if (name)
3462
- next.delete(name);
3463
- this.activeFilters = next;
3464
- this.closeFilterPopup();
3465
- this.aggregations = null;
3466
- this.aggregationsTotal = null;
3467
- this.aggregationsPending = true;
3468
- if (this.totalElements > 0 || this.minKnownTotal > 0) {
3469
- this.resetPages();
3470
- this.emitPagesForWindow(this.renderStart, this.renderEnd);
3471
- }
3472
- }
3473
- clearAllFilters() {
3474
- this.activeFilters = new Map();
3475
- this.aggregations = null;
3476
- this.aggregationsTotal = null;
3477
- this.aggregationsPending = true;
3478
- if (this.totalElements > 0 || this.minKnownTotal > 0) {
3479
- this.resetPages();
3480
- this.emitPagesForWindow(this.renderStart, this.renderEnd);
3481
- }
3482
- }
3483
- // ── View switcher ──────────────────────────────────────────────────────────
3484
- handleViewSwitch(targetIdx) {
3485
- var _a, _b;
3486
- const target = this.allViews[targetIdx];
3487
- if (!(target === null || target === void 0 ? void 0 : target.view))
3488
- return;
3489
- this.activeViewIdx = targetIdx;
3490
- this.applyDefaultSort((_b = (_a = target.view) === null || _a === void 0 ? void 0 : _a.defaultSort) !== null && _b !== void 0 ? _b : '');
3491
- this.activeFilters = new Map();
3492
- this.init();
3493
- }
3494
- toggleViewPopover(e) {
3495
- e.stopPropagation();
3496
- if (this.viewPopoverOpen) {
3497
- this.viewPopoverOpen = false;
3498
- if (this.viewPopoverClickHandler) {
3499
- document.removeEventListener('click', this.viewPopoverClickHandler);
3500
- this.viewPopoverClickHandler = null;
3501
- }
3502
- return;
3503
- }
3504
- this.viewPopoverOpen = true;
3505
- this.viewPopoverClickHandler = () => {
3506
- this.viewPopoverOpen = false;
3507
- document.removeEventListener('click', this.viewPopoverClickHandler);
3508
- this.viewPopoverClickHandler = null;
3509
- };
3510
- document.addEventListener('click', this.viewPopoverClickHandler);
3511
- }
3512
- // ── Render: toolbar ────────────────────────────────────────────────────────
3513
- renderToolbar() {
3514
- var _a;
3515
- const filterCount = this.activeFilters.size;
3516
- const actions = this.tableActions;
3517
- const allViews = this.allViews;
3518
- const hasActions = actions.length > 0;
3519
- const hasViewSwitcher = allViews.length > 1;
3520
- return (index.h("div", { class: "mrd-table__toolbar" }, index.h("div", { class: "mrd-table__toolbar-left" }, index.h("button", { class: `mrd-table__action mrd-table__action--secondary mrd-table__filter-toggle${this.filterMode ? ' mrd-table__filter-toggle--active' : ''}`, onClick: () => this.handleFilterToggle() }, index.h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("path", { fill: "currentColor", d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" })), filterCount > 0 && index.h("span", { class: "mrd-table__filter-badge" }, filterCount), index.h("span", { class: "mrd-table__action-tooltip" }, this.filterMode ? t('table_filter_hide', this.locale) : t('table_filter', this.locale), filterCount > 0 ? ` (${filterCount} ${t('table_filter_active', this.locale)})` : '')), filterCount > 0 && (index.h("button", { class: "mrd-table__action mrd-table__action--secondary", onClick: () => this.clearAllFilters() }, index.h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })), index.h("span", { class: "mrd-table__action-tooltip" }, t('table_filter_clear_all', this.locale))))), hasViewSwitcher && (index.h("div", { class: "mrd-table__toolbar-center" }, index.h("div", { class: "mrd-table__view-switcher" }, index.h("button", { class: "mrd-table__view-arrow", "aria-label": "Previous view", onClick: () => this.handleViewSwitch((this.activeViewIdx - 1 + allViews.length) % allViews.length) }, "\u25C0"), index.h("div", { class: "mrd-table__view-title-wrap" }, index.h("button", { class: "mrd-table__view-title", onClick: (e) => this.toggleViewPopover(e) }, (_a = allViews[this.activeViewIdx]) === null || _a === void 0 ? void 0 : _a.label), this.viewPopoverOpen && (index.h("div", { class: "mrd-table__view-popover", onClick: (e) => e.stopPropagation() }, allViews.map((v, i) => (index.h("button", { key: String(i), class: `mrd-table__view-popover-item${i === this.activeViewIdx ? ' mrd-table__view-popover-item--active' : ''}`, onClick: () => {
3521
- if (i !== this.activeViewIdx)
3522
- this.handleViewSwitch(i);
3523
- this.viewPopoverOpen = false;
3524
- if (this.viewPopoverClickHandler) {
3525
- document.removeEventListener('click', this.viewPopoverClickHandler);
3526
- this.viewPopoverClickHandler = null;
3527
- }
3528
- } }, v.label)))))), index.h("button", { class: "mrd-table__view-arrow", "aria-label": "Next view", onClick: () => this.handleViewSwitch((this.activeViewIdx + 1) % allViews.length) }, "\u25B6")))), hasActions && (index.h("div", { class: "mrd-table__toolbar-right" }, actions.map(a => {
3529
- var _a, _b, _c;
3530
- const createTypes = a.action === 'create' ? (_a = this.item) === null || _a === void 0 ? void 0 : _a.createTypes : null;
3531
- if (createTypes === null || createTypes === void 0 ? void 0 : createTypes.length) {
3532
- return (index.h("div", { class: "mrd-table__create-picker-wrap", key: `action-${a.action}` }, index.h("button", { class: `mrd-table__action mrd-table__action--${(_b = a.variant) !== null && _b !== void 0 ? _b : 'secondary'}`, onClick: () => this.toggleCreatePicker() }, a.icon
3533
- ? index.h("svg", { class: "mrd-table__action-icon", "aria-hidden": "true" }, index.h("use", { href: a.icon }))
3534
- : a.label, index.h("span", { class: "mrd-table__action-tooltip" }, a.label)), this.createPickerOpen && (index.h("div", { class: "mrd-table__create-picker" }, createTypes.map(ct => (index.h("button", { key: ct.type, class: "mrd-table__create-picker-item", onClick: () => {
3535
- this.mrdAction.emit(this.buildActionDetail('create', ct.type));
3536
- this.closeCreatePicker();
3537
- } }, ct.label)))))));
3538
- }
3539
- return (index.h("button", { key: `action-${a.action}`, class: `mrd-table__action mrd-table__action--${(_c = a.variant) !== null && _c !== void 0 ? _c : 'secondary'}`, disabled: a.disabled, onClick: () => this.mrdAction.emit(this.buildActionDetail(a.action)) }, a.icon
3540
- ? index.h("svg", { class: "mrd-table__action-icon", "aria-hidden": "true" }, index.h("use", { href: a.icon }))
3541
- : a.label, index.h("span", { class: "mrd-table__action-tooltip" }, a.label)));
3542
- })))));
3543
- }
3544
- // ── Render: filter popup ───────────────────────────────────────────────────
3545
- renderFilterEditor(col) {
3546
- var _a, _b, _c, _d, _e, _f, _g;
3547
- const pf = (_a = this.pendingFilter) !== null && _a !== void 0 ? _a : {};
3548
- const dataType = this.colDataType(col);
3549
- if (NO_FILTER_TYPES.has(dataType)) {
3550
- return index.h("p", { class: "mrd-table__filter-no-support" }, t('filter_no_support', this.locale));
3551
- }
3552
- if (dataType === 'BOOLEAN') {
3553
- const boolOp = pf.operator;
3554
- const noValueOp = boolOp === 'isEmpty' || boolOp === 'isNotEmpty';
3555
- return (index.h("div", { class: "mrd-table__filter-radio-group" }, [
3556
- { labelKey: 'filter_all', value: null },
3557
- { labelKey: 'yes', value: true },
3558
- { labelKey: 'no', value: false },
3559
- ].map(opt => (index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `bf-${this.openFilterCol}`, checked: !noValueOp && pf.value === opt.value, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined, value: opt.value }); } }), t(opt.labelKey, this.locale)))), index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `bf-${this.openFilterCol}`, checked: boolOp === 'isEmpty', onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: 'isEmpty', value: undefined }); } }), t('filter_is_empty', this.locale)), index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `bf-${this.openFilterCol}`, checked: boolOp === 'isNotEmpty', onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: 'isNotEmpty', value: undefined }); } }), t('filter_is_not_empty', this.locale))));
3560
- }
3561
- if (dataType === 'LIST') {
3562
- const items = (_b = col.listItems) !== null && _b !== void 0 ? _b : [];
3563
- const selected = (_c = pf.values) !== null && _c !== void 0 ? _c : [];
3564
- return (index.h("div", { class: "mrd-table__filter-list" }, index.h("div", { class: "mrd-table__filter-list-controls" }, index.h("button", { class: "mrd-table__filter-list-btn", onClick: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { values: items.map(i => i.key) }); } }, t('filter_select_all', this.locale)), index.h("button", { class: "mrd-table__filter-list-btn", onClick: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { values: [] }); } }, t('filter_select_none', this.locale))), items.map(item => (index.h("label", { class: "mrd-table__filter-checkbox-label" }, index.h("input", { type: "checkbox", checked: selected.includes(item.key), onChange: (e) => this.togglePendingValue(item.key, e.target.checked) }), item.label)))));
3565
- }
3566
- if (TEXT_TYPES.has(dataType) || dataType === 'RELATION') {
3567
- const op = (_d = pf.operator) !== null && _d !== void 0 ? _d : 'startsWith';
3568
- const noInput = op === 'isEmpty' || op === 'isNotEmpty';
3569
- return (index.h("div", { class: "mrd-table__filter-editor" }, index.h("select", { class: "mrd-table__filter-select", onChange: (e) => this.setPending('operator', e.target.value) }, [
3570
- { val: 'startsWith', labelKey: 'filter_starts_with' },
3571
- { val: 'equals', labelKey: 'filter_equals' },
3572
- { val: 'isEmpty', labelKey: 'filter_is_empty' },
3573
- { val: 'isNotEmpty', labelKey: 'filter_is_not_empty' },
3574
- ].map(o => index.h("option", { value: o.val, selected: op === o.val }, t(o.labelKey, this.locale)))), !noInput && (index.h("input", { type: "text", class: "mrd-table__filter-input", value: String((_e = pf.value) !== null && _e !== void 0 ? _e : ''), placeholder: t('filter_search_value', this.locale), onInput: (e) => this.setPending('value', e.target.value) }))));
3575
- }
3576
- if (NUMERIC_TYPES.has(dataType)) {
3577
- const numOp = pf.operator;
3578
- const noInput = numOp === 'isEmpty' || numOp === 'isNotEmpty';
3579
- const rangeMode = !noInput && (pf.from !== undefined || pf.to !== undefined);
3580
- return (index.h("div", { class: "mrd-table__filter-editor" }, index.h("select", { class: "mrd-table__filter-select", onChange: (e) => {
3581
- const val = e.target.value;
3582
- if (val === 'isEmpty' || val === 'isNotEmpty') {
3583
- this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined });
3584
- }
3585
- else {
3586
- this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined });
3587
- }
3588
- } }, index.h("option", { value: "", selected: !noInput }, t('filter_has_value', this.locale)), index.h("option", { value: "isEmpty", selected: numOp === 'isEmpty' }, t('filter_is_empty', this.locale)), index.h("option", { value: "isNotEmpty", selected: numOp === 'isNotEmpty' }, t('filter_is_not_empty', this.locale))), !noInput && (index.h("div", { class: "mrd-table__filter-editor" }, index.h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `nm-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `nm-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (index.h("input", { type: "number", class: "mrd-table__filter-input", value: pf.value != null ? String(pf.value) : '', onInput: (e) => this.setPending('value', e.target.value) })) : (index.h("div", { class: "mrd-table__filter-range" }, index.h("input", { type: "number", class: "mrd-table__filter-input", placeholder: t('filter_from', this.locale), value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), index.h("span", { class: "mrd-table__filter-range-sep" }, "\u2013"), index.h("input", { type: "number", class: "mrd-table__filter-input", placeholder: t('filter_to', this.locale), value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))))));
3589
- }
3590
- if (dataType === 'DATETIME') {
3591
- const dtOp = pf.operator;
3592
- const noInput = dtOp === 'isEmpty' || dtOp === 'isNotEmpty';
3593
- const rangeMode = !noInput && (pf.from !== undefined || pf.to !== undefined);
3594
- return (index.h("div", { class: "mrd-table__filter-editor" }, index.h("select", { class: "mrd-table__filter-select", onChange: (e) => {
3595
- const val = e.target.value;
3596
- if (val === 'isEmpty' || val === 'isNotEmpty') {
3597
- this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined });
3598
- }
3599
- else {
3600
- this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined });
3601
- }
3602
- } }, index.h("option", { value: "", selected: !noInput }, t('filter_has_value', this.locale)), index.h("option", { value: "isEmpty", selected: dtOp === 'isEmpty' }, t('filter_is_empty', this.locale)), index.h("option", { value: "isNotEmpty", selected: dtOp === 'isNotEmpty' }, t('filter_is_not_empty', this.locale))), !noInput && (index.h("div", { class: "mrd-table__filter-editor" }, index.h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (index.h("input", { type: "date", class: "mrd-table__filter-input", value: String((_f = pf.value) !== null && _f !== void 0 ? _f : ''), onInput: (e) => this.setPending('value', e.target.value) })) : (index.h("div", { class: "mrd-table__filter-range mrd-table__filter-range--stacked" }, index.h("label", { class: "mrd-table__filter-range-label" }, t('filter_from', this.locale)), index.h("input", { type: "date", class: "mrd-table__filter-input", value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), index.h("label", { class: "mrd-table__filter-range-label" }, t('filter_to', this.locale)), index.h("input", { type: "date", class: "mrd-table__filter-input", value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))))));
3603
- }
3604
- if (DATE_TYPES.has(dataType)) {
3605
- const inputType = dataType === 'DATE' ? 'date' : 'time';
3606
- const dtdOp = pf.operator;
3607
- const noInput = dtdOp === 'isEmpty' || dtdOp === 'isNotEmpty';
3608
- const rangeMode = !noInput && (pf.from !== undefined || pf.to !== undefined);
3609
- return (index.h("div", { class: "mrd-table__filter-editor" }, index.h("select", { class: "mrd-table__filter-select", onChange: (e) => {
3610
- const val = e.target.value;
3611
- if (val === 'isEmpty' || val === 'isNotEmpty') {
3612
- this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined });
3613
- }
3614
- else {
3615
- this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined });
3616
- }
3617
- } }, index.h("option", { value: "", selected: !noInput }, t('filter_has_value', this.locale)), index.h("option", { value: "isEmpty", selected: dtdOp === 'isEmpty' }, t('filter_is_empty', this.locale)), index.h("option", { value: "isNotEmpty", selected: dtdOp === 'isNotEmpty' }, t('filter_is_not_empty', this.locale))), !noInput && (index.h("div", { class: "mrd-table__filter-editor" }, index.h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), index.h("label", { class: "mrd-table__filter-radio-label" }, index.h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (index.h("input", { type: inputType, class: "mrd-table__filter-input", value: String((_g = pf.value) !== null && _g !== void 0 ? _g : ''), onInput: (e) => this.setPending('value', e.target.value) })) : (index.h("div", { class: "mrd-table__filter-range" }, index.h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_from', this.locale), value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), index.h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_to', this.locale), value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))))));
3618
- }
3619
- return null;
3620
- }
3621
- renderFilterPopup() {
3622
- var _a;
3623
- if (!this.openFilterCol || !this.pendingFilter)
3624
- return null;
3625
- const col = this.columns.find(c => this.colName(c) === this.openFilterCol);
3626
- if (!col)
3627
- return null;
3628
- const label = (_a = col.label) !== null && _a !== void 0 ? _a : this.openFilterCol;
3629
- const sortActive = this.sortField === this.openFilterCol;
3630
- return (index.h("div", { class: "mrd-table__filter-popup", style: { top: `${this.popupPos.top}px`, left: `${this.popupPos.left}px` }, onClick: (e) => e.stopPropagation() }, index.h("div", { class: "mrd-table__filter-popup-header" }, index.h("span", { class: "mrd-table__filter-popup-title" }, label), index.h("button", { class: "mrd-table__filter-close", onClick: () => this.closeFilterPopup() }, "\u2715")), index.h("div", { class: "mrd-table__filter-section" }, index.h("div", { class: "mrd-table__filter-section-label" }, t('filter_sorting', this.locale)), index.h("div", { class: "mrd-table__filter-sort-buttons" }, index.h("button", { class: `mrd-table__filter-sort-btn${sortActive && this.sortDir === 'asc' ? ' mrd-table__filter-sort-btn--active' : ''}`, onClick: () => this.applySort(col, 'asc') }, "\u25B2 ", t('filter_ascending', this.locale)), index.h("button", { class: `mrd-table__filter-sort-btn${sortActive && this.sortDir === 'desc' ? ' mrd-table__filter-sort-btn--active' : ''}`, onClick: () => this.applySort(col, 'desc') }, "\u25BC ", t('filter_descending', this.locale)))), index.h("div", { class: "mrd-table__filter-divider" }), index.h("div", { class: "mrd-table__filter-section" }, index.h("div", { class: "mrd-table__filter-section-label" }, t('filter_section', this.locale)), this.renderFilterEditor(col)), index.h("div", { class: "mrd-table__filter-popup-footer" }, index.h("button", { class: "mrd-table__filter-btn mrd-table__filter-btn--clear", onClick: () => this.clearFilter() }, t('filter_clear', this.locale)), index.h("button", { class: "mrd-table__filter-btn mrd-table__filter-btn--apply", onClick: () => this.applyFilter() }, t('filter_apply', this.locale)))));
3631
- }
3632
- // ── Render: footer ────────────────────────────────────────────────────────
3633
- renderFooter(rowCount, effectiveTotal, isTotalKnown = true) {
3634
- // Non-paginated mode: totalElements=0 and no paginated data loaded yet
3635
- if (this.totalElements === 0 && this.loadedPages.size === 0) {
3636
- const count = rowCount !== null && rowCount !== void 0 ? rowCount : 0;
3637
- if (count === 0)
3638
- return null;
3639
- return (index.h("div", { class: "mrd-table__footer" }, count, " ", t('table_of', this.locale), " ", count));
3640
- }
3641
- // Paginated mode: only show once page 0 has loaded (avoids stale total during filter reset)
3642
- if (!this.loadedPages.has(0))
3643
- return null;
3644
- // effectiveTotal from render(); fall back to baseTotal when not provided.
3645
- const displayTotal = effectiveTotal !== null && effectiveTotal !== void 0 ? effectiveTotal : this.baseTotal;
3646
- // Compute from/to independently so partial rows at top/bottom are included.
3647
- const from = Math.min(Math.floor(this.scrollTop / this.rowHeight) + 1, displayTotal);
3648
- const to = Math.min(Math.ceil((this.scrollTop + this.tableHeight) / this.rowHeight), displayTotal);
3649
- // Show '…' for the total until we have a reliable count (aggregations or last page loaded).
3650
- const totalLabel = isTotalKnown ? String(displayTotal) : '…';
3651
- return (index.h("div", { class: "mrd-table__footer" }, from, "\u2013", to, " ", t('table_of', this.locale), " ", totalLabel));
3652
- }
3653
- // ── Render: cell ──────────────────────────────────────────────────────────
3654
- renderCell(col, row) {
3655
- var _a, _b, _c;
3656
- const numericTypes = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
3657
- const dataType = (_a = col.dataType) !== null && _a !== void 0 ? _a : '';
3658
- const isNumeric = col.type === 'FIELD' && numericTypes.has(dataType);
3659
- const isFile = col.type === 'FIELD' && (dataType === 'FILE' || dataType === 'IMAGE');
3660
- if (isFile) {
3661
- const name = (_b = col.name) !== null && _b !== void 0 ? _b : '';
3662
- const fileVal = row === null || row === void 0 ? void 0 : row[name];
3663
- const href = fileVal === null || fileVal === void 0 ? void 0 : fileVal.href;
3664
- const fileName = fileVal === null || fileVal === void 0 ? void 0 : fileVal.fileName;
3665
- return (index.h("td", { class: "mrd-table__cell" }, href && fileName ? (index.h("button", { class: "mrd-table__file-btn", title: fileName, onClick: (e) => {
3666
- e.stopPropagation();
3667
- this.mrdDownload.emit({ href, fileName });
3668
- } }, index.h("svg", { class: "mrd-table__file-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-3 8l-3-3 1.41-1.41L10 14.17l4.59-4.58L16 11l-6 6z" })), t('download', this.locale))) : ''));
3669
- }
3670
- if (dataType === 'JSON') {
3671
- const name = (_c = col.name) !== null && _c !== void 0 ? _c : '';
3672
- const rawValue = name ? row === null || row === void 0 ? void 0 : row[name] : undefined;
3673
- if (rawValue == null || rawValue === '')
3674
- return index.h("td", { class: "mrd-table__cell" });
3675
- const compactHtml = CellRenderer.formatJson(rawValue, true);
3676
- const prettyHtml = CellRenderer.formatJson(rawValue, false);
3677
- return (index.h("td", { class: "mrd-table__cell" }, index.h("span", { class: "mrd-table__json-preview", innerHTML: compactHtml }), index.h("button", { class: "mrd-table__textblock-btn", onClick: (e) => { e.stopPropagation(); this.openJsonModal(prettyHtml); }, "aria-label": t('textblock_show_more', this.locale) }, "\u22EF")));
3678
- }
3679
- const TEXTBLOCK_MAX = 200;
3680
- if (dataType === 'TEXTBLOCK') {
3681
- const full = CellRenderer.render(col, row, this.locale);
3682
- if (full.length <= TEXTBLOCK_MAX) {
3683
- return index.h("td", { class: "mrd-table__cell" }, full);
3684
- }
3685
- const preview = full.slice(0, TEXTBLOCK_MAX) + '…';
3686
- return (index.h("td", { class: "mrd-table__cell" }, preview, index.h("button", { class: "mrd-table__textblock-btn", onClick: (e) => { e.stopPropagation(); this.openTextblockModal(full); }, "aria-label": t('textblock_show_more', this.locale) }, "\u22EF")));
3687
- }
3688
- const value = CellRenderer.render(col, row, this.locale);
3689
- return (index.h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
3690
- }
3691
- // ── Render: totals row ────────────────────────────────────────────────────
3692
- renderTotalsRow() {
3693
- if (!this.aggregations)
3694
- return null;
3695
- if (!this.columns.some(c => c.type === 'FIELD' && c.aggregate))
3696
- return null;
3697
- return (index.h("tfoot", null, index.h("tr", { class: "mrd-table__totals-row" }, this.columns.map(col => {
3698
- var _a;
3699
- const val = this.renderAggregationValue(col);
3700
- const isNumeric = col.type === 'FIELD' && NUMERIC_TYPES.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');
3701
- return (index.h("td", { class: `mrd-table__totals-cell${isNumeric ? ' mrd-table__totals-cell--numeric' : ''}` }, val));
3702
- }))));
3703
- }
3704
- // ── Render ─────────────────────────────────────────────────────────────────
3705
- render() {
3706
- var _a, _b, _c;
3707
- if (!((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length))
3708
- return null;
3709
- // ── Non-paginated mode ──────────────────────────────────────────────────
3710
- // Only enter non-paginated mode when totalElements is 0 AND no paginated data
3711
- // has been loaded yet — prevents the wrong branch when the host omits totalElements.
3712
- if (this.totalElements === 0 && this.loadedPages.size === 0) {
3713
- return (index.h(index.Host, null, this.renderToolbar(), index.h("div", { class: "mrd-table" }, index.h("table", { class: "mrd-table__table" }, index.h("thead", null, index.h("tr", null, this.columns.map(col => {
3714
- var _a;
3715
- const name = this.colName(col);
3716
- const isFiltered = this.activeFilters.has(name);
3717
- const cls = [
3718
- 'mrd-table__header',
3719
- isFiltered ? 'mrd-table__header--filtered' : '',
3720
- this.filterMode ? 'mrd-table__header--sortable' : '',
3721
- ].filter(Boolean).join(' ');
3722
- return (index.h("th", { class: cls, onClick: this.filterMode ? (e) => this.handleFilterOpen(col, e) : undefined }, index.h("span", { class: "mrd-table__header-label" }, (_a = col.label) !== null && _a !== void 0 ? _a : ''), isFiltered && this.renderFilterIcon()));
3723
- }))), index.h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (index.h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(row) }, this.columns.map(col => this.renderCell(col, row)))))), this.renderTotalsRow()), (!this.rows || this.rows.length === 0) && (index.h("p", { class: "mrd-table__empty" }, t('no_results', this.locale)))), this.renderFooter((_c = this.rows) === null || _c === void 0 ? void 0 : _c.length), this.renderFilterPopup(), this.renderTextblockModal(), this.renderJsonModal()));
3724
- }
3725
- // ── Paginated / virtual-scroll mode ────────────────────────────────────
3726
- // Derive the authoritative row count from loaded pages:
3727
- // if any loaded page is shorter than pageSize it is the last page,
3728
- // so the true total cannot exceed (pageNum * pageSize + pageRows.length).
3729
- // aggregationsTotal (from setAggregations) takes priority over the totalElements prop.
3730
- let effectiveTotal = this.baseTotal;
3731
- for (const [pageNum, pageRows] of this.loadedPages) {
3732
- if (pageRows.length < this.pageSize) {
3733
- effectiveTotal = Math.min(effectiveTotal, pageNum * this.pageSize + pageRows.length);
3734
- }
3735
- }
3736
- // Clamp renderEnd to what we actually know exists (-1 when empty)
3737
- const clampedEnd = Math.min(this.renderEnd, effectiveTotal - 1);
3738
- const colCount = this.columns.length;
3739
- const topSpacerHeight = this.renderStart * this.rowHeight;
3740
- const bottomSpacerHeight = Math.max(0, (effectiveTotal - 1 - clampedEnd) * this.rowHeight);
3741
- const tableStyle = this.colWidths.length > 0
3742
- ? { tableLayout: 'fixed' }
3743
- : undefined;
3744
- const renderedRows = [];
3745
- for (let i = this.renderStart; i <= clampedEnd; i++) {
3746
- const row = this.getRow(i);
3747
- if (row === null) {
3748
- renderedRows.push(index.h("tr", { class: "mrd-table__row mrd-table__row--loading" }, index.h("td", { class: "mrd-table__cell--placeholder", colSpan: colCount }, index.h("span", { class: "mrd-table__placeholder-bar" }))));
3749
- }
3750
- else {
3751
- renderedRows.push(index.h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(row) }, this.columns.map(col => this.renderCell(col, row))));
3752
- }
3753
- }
3754
- return (index.h(index.Host, null, this.renderToolbar(), index.h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, index.h("table", { class: "mrd-table__table", style: tableStyle }, index.h("thead", null, index.h("tr", null, this.columns.map((col, idx) => {
3755
- var _a;
3756
- const name = this.colName(col);
3757
- const isActive = this.sortField === name;
3758
- const isFiltered = this.activeFilters.has(name);
3759
- const isInteractive = !NON_INTERACTIVE_TYPES.has(this.colDataType(col));
3760
- const cls = [
3761
- 'mrd-table__header',
3762
- isInteractive ? 'mrd-table__header--sortable' : '',
3763
- isActive ? `mrd-table__header--sorted-${this.sortDir}` : '',
3764
- isFiltered ? 'mrd-table__header--filtered' : '',
3765
- ].filter(Boolean).join(' ');
3766
- return (index.h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: isInteractive ? ((e) => this.filterMode ? this.handleFilterOpen(col, e) : this.handleSortClick(col)) : undefined }, index.h("span", { class: "mrd-table__header-label" }, (_a = col.label) !== null && _a !== void 0 ? _a : ''), isInteractive && isActive && (index.h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, this.sortDir === 'asc' ? '▲' : '▼')), isInteractive && !isActive && !this.filterMode && (index.h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, "\u21C5")), isInteractive && isFiltered && this.renderFilterIcon()));
3767
- }))), index.h("tbody", null, topSpacerHeight > 0 && (index.h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, index.h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (index.h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, index.h("td", { colSpan: colCount })))), this.renderTotalsRow())), effectiveTotal === 0 && this.loadedPages.has(0) && (index.h("p", { class: "mrd-table__empty" }, t('no_results', this.locale))), effectiveTotal > 0 && this.renderFooter(undefined, effectiveTotal, this.isTotalKnown()), this.renderFilterPopup(), this.renderTextblockModal()));
3768
- }
3769
- renderFilterIcon() {
3770
- return (index.h("span", { class: "mrd-table__filter-icon", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "currentColor" }, index.h("path", { d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" }))));
3771
- }
3772
- renderTextblockModal() {
3773
- if (this.textblockModal === null)
3774
- return null;
3775
- return (index.h("div", { class: "mrd-table__modal-backdrop", onClick: () => this.closeTextblockModal(), role: "dialog", "aria-modal": "true" }, index.h("div", { class: "mrd-table__modal", onClick: (e) => e.stopPropagation() }, index.h("button", { class: "mrd-table__modal-close", onClick: () => this.closeTextblockModal(), "aria-label": t('close', this.locale) }, "\u2715"), index.h("p", { class: "mrd-table__modal-text" }, this.textblockModal))));
3776
- }
3777
- renderJsonModal() {
3778
- if (this.jsonModal === null)
3779
- return null;
3780
- return (index.h("div", { class: "mrd-table__modal-backdrop", onClick: () => this.closeJsonModal(), role: "dialog", "aria-modal": "true" }, index.h("div", { class: "mrd-table__modal", onClick: (e) => e.stopPropagation() }, index.h("button", { class: "mrd-table__modal-close", onClick: () => this.closeJsonModal(), "aria-label": t('close', this.locale) }, "\u2715"), index.h("pre", { class: "mrd-table__modal-json", innerHTML: this.jsonModal }))));
3781
- }
3782
- get el() { return index.getElement(this); }
3783
- static get watchers() { return {
3784
- "totalElements": [{
3785
- "totalElementsChanged": 0
3786
- }],
3787
- "item": [{
3788
- "itemChanged": 0
3789
- }]
3790
- }; }
3791
- };
3792
- MrdTable.style = mrdTableScss();
3793
-
3794
- const mrdTextFieldScss = () => `.sc-mrd-text-field-h{display:block}.mrd-text-field.sc-mrd-text-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-text-field__label.sc-mrd-text-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-text-field__label--required.sc-mrd-text-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-text-field__input.sc-mrd-text-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box}.mrd-text-field__input.sc-mrd-text-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-text-field__input.sc-mrd-text-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-text-field__input.sc-mrd-text-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-text-field__input--error.sc-mrd-text-field{border-color:var(--mrd-border-color-error)}.mrd-text-field__input--error.sc-mrd-text-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-text-field__error.sc-mrd-text-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
3795
-
3796
- const MrdTextField = class {
3797
- constructor(hostRef) {
3798
- index.registerInstance(this, hostRef);
3799
- this.mrdChange = index.createEvent(this, "mrdChange");
3800
- this.mrdBlur = index.createEvent(this, "mrdBlur");
3801
- this.name = '';
3802
- this.label = '';
3803
- this.value = '';
3804
- this.placeholder = '';
3805
- this.required = false;
3806
- this.disabled = false;
3807
- this.locale = navigator.language;
3808
- this.error = '';
3809
- this.handleInput = (e) => {
3810
- const val = e.target.value;
3811
- this.mrdChange.emit({ name: this.name, value: val });
3812
- };
3813
- this.handleBlur = (e) => {
3814
- const val = e.target.value;
3815
- if (this.required && !validateRequired(val)) {
3816
- this.error = t('required', this.locale);
3817
- }
3818
- else {
3819
- this.error = '';
3820
- }
3821
- this.mrdBlur.emit({ name: this.name, value: val });
3822
- };
3823
- }
3824
- render() {
3825
- const hasError = !!this.error;
3826
- return (index.h(index.Host, { key: 'fd4e1f389cb452ab80a1e1c7295d884ca935999e' }, index.h("div", { key: '7b7bde7a18fcd9b8d5779daab88ddabb45dd8692', class: "mrd-text-field" }, this.label && (index.h("label", { key: '8e2ad4053473cfad4eae4c4634b863ac5ef32fea', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), index.h("input", { key: 'd32712a6dc2aee4691bc4a580d5ca2ad81e0ff9f', class: `mrd-text-field__input${hasError ? ' mrd-text-field__input--error' : ''}`, type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && index.h("span", { key: '31585dbf82020c81834e1eeada5cd9907a5ead56', class: "mrd-text-field__error" }, this.error))));
3827
- }
3828
- };
3829
- MrdTextField.style = mrdTextFieldScss();
3830
-
3831
- const mrdTextareaFieldScss = () => `.sc-mrd-textarea-field-h{display:block}.mrd-textarea-field.sc-mrd-textarea-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-textarea-field__label.sc-mrd-textarea-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-textarea-field__label--required.sc-mrd-textarea-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-textarea-field__container.sc-mrd-textarea-field{border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);overflow:hidden;background-color:var(--mrd-input-bg);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition)}.mrd-textarea-field__container.sc-mrd-textarea-field:focus-within{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-textarea-field__container--error.sc-mrd-textarea-field{border-color:var(--mrd-border-color-error)}.mrd-textarea-field__container--error.sc-mrd-textarea-field:focus-within{box-shadow:var(--mrd-shadow-focus-error)}.mrd-textarea-field__editor.sc-mrd-textarea-field{min-height:150px;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base)}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-toolbar.sc-mrd-textarea-field{border:none;border-bottom:var(--mrd-border-width) solid var(--mrd-border-color);font-family:var(--mrd-font-family)}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-container.sc-mrd-textarea-field{border:none;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base)}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.sc-mrd-textarea-field{min-height:120px;padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x)}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.ql-blank.sc-mrd-textarea-field::before{color:var(--mrd-input-placeholder-color);font-style:normal}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.sc-mrd-textarea-field p.sc-mrd-textarea-field{margin-bottom:0.75em}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.sc-mrd-textarea-field p.sc-mrd-textarea-field:last-child{margin-bottom:0}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.sc-mrd-textarea-field ul.sc-mrd-textarea-field{list-style:disc;padding-left:1.5em;margin-bottom:0.75em}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.sc-mrd-textarea-field ol.sc-mrd-textarea-field{list-style:decimal;padding-left:1.5em;margin-bottom:0.75em}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.sc-mrd-textarea-field li.sc-mrd-textarea-field{margin-bottom:0.25em}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.sc-mrd-textarea-field h1.sc-mrd-textarea-field{font-size:1.75em;font-weight:700;margin-bottom:0.5em}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.sc-mrd-textarea-field h2.sc-mrd-textarea-field{font-size:1.375em;font-weight:700;margin-bottom:0.5em}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.sc-mrd-textarea-field h3.sc-mrd-textarea-field{font-size:1.125em;font-weight:600;margin-bottom:0.5em}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.sc-mrd-textarea-field a.sc-mrd-textarea-field{color:var(--mrd-color-primary);text-decoration:underline}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.sc-mrd-textarea-field strong.sc-mrd-textarea-field{font-weight:700}.mrd-textarea-field__editor.sc-mrd-textarea-field .ql-editor.sc-mrd-textarea-field em.sc-mrd-textarea-field{font-style:italic}.mrd-textarea-field__error.sc-mrd-textarea-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
3832
-
3833
- const MrdTextareaField = class {
3834
- constructor(hostRef) {
3835
- index.registerInstance(this, hostRef);
3836
- this.mrdChange = index.createEvent(this, "mrdChange");
3837
- this.mrdBlur = index.createEvent(this, "mrdBlur");
3838
- this.name = '';
3839
- this.label = '';
3840
- this.value = '';
3841
- this.placeholder = '';
3842
- this.required = false;
3843
- this.disabled = false;
3844
- this.locale = navigator.language;
3845
- this.error = '';
3846
- this.editorReady = false;
3847
- }
3848
- componentDidLoad() {
3849
- this.initQuill();
3850
- }
3851
- async initQuill() {
3852
- try {
3853
- // Dynamically import Quill
3854
- const Quill = (await Promise.resolve().then(function () { return require('./quill-DmFfnC1f.js'); })).default;
3855
- this.editorEl = this.el.querySelector('.mrd-textarea-field__editor');
3856
- if (!this.editorEl)
3857
- return;
3858
- const quill = new Quill(this.editorEl, {
3859
- theme: 'snow',
3860
- placeholder: this.placeholder,
3861
- readOnly: this.disabled,
3862
- modules: {
3863
- toolbar: [
3864
- ['bold', 'italic', 'underline', 'strike'],
3865
- [{ list: 'ordered' }, { list: 'bullet' }],
3866
- [{ header: [1, 2, 3, false] }],
3867
- ['link'],
3868
- ['clean'],
3869
- ],
3870
- },
3871
- });
3872
- if (this.value) {
3873
- quill.clipboard.dangerouslyPasteHTML(this.value);
3874
- }
3875
- quill.on('text-change', () => {
3876
- var _a, _b;
3877
- const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
3878
- this.mrdChange.emit({ name: this.name, value: html });
3879
- });
3880
- quill.on('selection-change', (range) => {
3881
- var _a, _b;
3882
- if (!range) {
3883
- const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
3884
- if (this.required && !validateRequired(html)) {
3885
- this.error = t('required', this.locale);
3886
- }
3887
- else {
3888
- this.error = '';
3889
- }
3890
- this.mrdBlur.emit({ name: this.name, value: html });
3891
- }
3892
- });
3893
- this.editorReady = true;
3894
- }
3895
- catch (err) {
3896
- console.error('Failed to load Quill editor:', err);
3897
- }
3898
- }
3899
- render() {
3900
- return (index.h(index.Host, { key: 'e1fd819c598f01e3986946357ec18d608f2c7adc' }, index.h("div", { key: '20c28e54e61429655b2d4f297bd84e183ad7e971', class: "mrd-textarea-field" }, this.label && (index.h("label", { key: 'fa46a20badc35c931563600f24a32e0a8c8c07ad', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'ee928eca0a1b85401b346b7fae8adbe9214a7664', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, index.h("div", { key: '89b00f3c526623c47f0aff7ad862f70dfdc2fe15', class: "mrd-textarea-field__editor" })), this.error && index.h("span", { key: '458cf8fddee36ddbc384ce4d25765e5aacd3c9d5', class: "mrd-textarea-field__error" }, this.error))));
3901
- }
3902
- get el() { return index.getElement(this); }
3903
- };
3904
- MrdTextareaField.style = mrdTextareaFieldScss();
3905
-
3906
- const mrdTimeFieldScss = () => `.sc-mrd-time-field-h{display:block}.mrd-time-field.sc-mrd-time-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-time-field__label.sc-mrd-time-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-time-field__label--required.sc-mrd-time-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-time-field__input.sc-mrd-time-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;cursor:pointer}.mrd-time-field__input.sc-mrd-time-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-time-field__input.sc-mrd-time-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-time-field__input--error.sc-mrd-time-field{border-color:var(--mrd-border-color-error)}.mrd-time-field__input--error.sc-mrd-time-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-time-field__error.sc-mrd-time-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
3907
-
3908
- const MrdTimeField = class {
3909
- constructor(hostRef) {
3910
- index.registerInstance(this, hostRef);
3911
- this.mrdChange = index.createEvent(this, "mrdChange");
3912
- this.mrdBlur = index.createEvent(this, "mrdBlur");
3913
- this.name = '';
3914
- this.label = '';
3915
- this.value = '';
3916
- this.required = false;
3917
- this.disabled = false;
3918
- this.locale = navigator.language;
3919
- this.error = '';
3920
- this.handleChange = (e) => {
3921
- const val = e.target.value;
3922
- if (this.required && !validateRequired(val)) {
3923
- this.error = t('required', this.locale);
3924
- }
3925
- else {
3926
- this.error = '';
3927
- }
3928
- this.mrdChange.emit({ name: this.name, value: val });
3929
- };
3930
- this.handleBlur = (e) => {
3931
- const val = e.target.value;
3932
- this.mrdBlur.emit({ name: this.name, value: val });
3933
- };
3934
- }
3935
- render() {
3936
- const hasError = !!this.error;
3937
- return (index.h(index.Host, { key: 'c507996709437d8982f9175b286e25598997002d' }, index.h("div", { key: 'd5f1b7f14d26cae8298cd40491898b39044158f8', class: "mrd-time-field" }, this.label && (index.h("label", { key: '10976e18df09240e00b045314c4ddd3845d4bfdc', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), index.h("input", { key: 'bc557333f107a371a7005f9b56dd0395190e63d7', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && index.h("span", { key: 'b5a09c2aa063fa9e2fc3aba411e86b57d879c408', class: "mrd-time-field__error" }, this.error))));
3938
- }
3939
- };
3940
- MrdTimeField.style = mrdTimeFieldScss();
3941
-
3942
- exports.mrd_boolean_field = MrdBooleanField;
3943
- exports.mrd_currency_field = MrdCurrencyField;
3944
- exports.mrd_date_field = MrdDateField;
3945
- exports.mrd_datetime_field = MrdDatetimeField;
3946
- exports.mrd_email_field = MrdEmailField;
3947
- exports.mrd_field = MrdField;
3948
- exports.mrd_file_field = MrdFileField;
3949
- exports.mrd_form = MrdForm;
3950
- exports.mrd_hyperlink_field = MrdHyperlinkField;
3951
- exports.mrd_image_field = MrdImageField;
3952
- exports.mrd_layout_section = MrdLayoutSection;
3953
- exports.mrd_list_field = MrdListField;
3954
- exports.mrd_longtext_field = MrdLongtextField;
3955
- exports.mrd_number_field = MrdNumberField;
3956
- exports.mrd_relation_field = MrdRelationField;
3957
- exports.mrd_secret_field = MrdSecretField;
3958
- exports.mrd_table = MrdTable;
3959
- exports.mrd_text_field = MrdTextField;
3960
- exports.mrd_textarea_field = MrdTextareaField;
3961
- exports.mrd_time_field = MrdTimeField;