@mmlogic/components 0.1.24 → 0.1.25

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 (45) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/mosterdcomponents.cjs.js +1 -1
  3. package/dist/cjs/mrd-boolean-field_19.cjs.entry.js +3150 -0
  4. package/dist/collection/collection-manifest.json +1 -0
  5. package/dist/collection/components/mrd-layout-section/mrd-layout-section.js +715 -0
  6. package/dist/collection/components/mrd-layout-section/mrd-layout-section.scss +339 -0
  7. package/dist/collection/components/mrd-longtext-field/mrd-longtext-field.js +1 -1
  8. package/dist/collection/components/mrd-number-field/mrd-number-field.js +1 -1
  9. package/dist/collection/components/mrd-table/mrd-table.js +41 -4
  10. package/dist/collection/components/mrd-table/mrd-table.scss +23 -0
  11. package/dist/collection/components/mrd-text-field/mrd-text-field.js +1 -1
  12. package/dist/collection/components/mrd-textarea-field/mrd-textarea-field.js +1 -1
  13. package/dist/collection/components/mrd-time-field/mrd-time-field.js +1 -1
  14. package/dist/collection/dev/app.js +109 -3
  15. package/dist/collection/dev/example-data.js +324 -0
  16. package/dist/collection/utils/cell-renderer.js +26 -0
  17. package/dist/components/mrd-layout-section.d.ts +11 -0
  18. package/dist/components/mrd-layout-section.js +1 -0
  19. package/dist/components/mrd-longtext-field2.js +1 -1
  20. package/dist/components/mrd-number-field2.js +1 -1
  21. package/dist/components/mrd-table.js +1 -1
  22. package/dist/components/mrd-table2.js +1 -0
  23. package/dist/components/mrd-text-field2.js +1 -1
  24. package/dist/components/mrd-textarea-field2.js +1 -1
  25. package/dist/components/mrd-time-field2.js +1 -1
  26. package/dist/esm/loader.js +1 -1
  27. package/dist/esm/mosterdcomponents.js +1 -1
  28. package/dist/esm/mrd-boolean-field_19.entry.js +3130 -0
  29. package/dist/mosterdcomponents/mosterdcomponents.esm.js +1 -1
  30. package/dist/mosterdcomponents/p-a3255fc4.entry.js +1 -0
  31. package/dist/types/components/mrd-layout-section/mrd-layout-section.d.ts +92 -0
  32. package/dist/types/components/mrd-table/mrd-table.d.ts +5 -0
  33. package/dist/types/components.d.ts +128 -8
  34. package/dist/types/types/client-layout.d.ts +19 -0
  35. package/dist/types/utils/cell-renderer.d.ts +9 -1
  36. package/package.json +1 -1
  37. package/dist/cjs/format-DExY8_nu.js +0 -328
  38. package/dist/cjs/mrd-boolean-field_17.cjs.entry.js +0 -1554
  39. package/dist/cjs/mrd-table.cjs.entry.js +0 -888
  40. package/dist/esm/format-CcRjWvcb.js +0 -319
  41. package/dist/esm/mrd-boolean-field_17.entry.js +0 -1536
  42. package/dist/esm/mrd-table.entry.js +0 -886
  43. package/dist/mosterdcomponents/p-17fe94c6.entry.js +0 -1
  44. package/dist/mosterdcomponents/p-3d856b27.entry.js +0 -1
  45. package/dist/mosterdcomponents/p-CcRjWvcb.js +0 -1
@@ -1,1554 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-BPj2cBXs.js');
4
- var format = require('./format-DExY8_nu.js');
5
- var index$1 = require('./index.cjs.js');
6
-
7
- 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)}`;
8
-
9
- const MrdBooleanField = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.mrdChange = index.createEvent(this, "mrdChange");
13
- this.mrdBlur = index.createEvent(this, "mrdBlur");
14
- this.name = '';
15
- this.label = '';
16
- this.value = false;
17
- this.required = false;
18
- this.disabled = false;
19
- this.locale = navigator.language;
20
- this.checked = false;
21
- this.handleChange = (e) => {
22
- this.checked = e.target.checked;
23
- this.mrdChange.emit({ name: this.name, value: this.checked });
24
- };
25
- this.handleBlur = () => {
26
- this.mrdBlur.emit({ name: this.name, value: this.checked });
27
- };
28
- }
29
- componentWillLoad() {
30
- this.checked = !!this.value;
31
- }
32
- render() {
33
- 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))))));
34
- }
35
- };
36
- MrdBooleanField.style = mrdBooleanFieldScss();
37
-
38
- function validateRequired(value) {
39
- if (value === null || value === undefined)
40
- return false;
41
- if (typeof value === 'string')
42
- return value.trim().length > 0;
43
- if (Array.isArray(value))
44
- return value.length > 0;
45
- if (typeof value === 'object') {
46
- // CurrencyValue check
47
- const cv = value;
48
- if ('amount' in cv)
49
- return cv.amount !== null && cv.amount !== undefined && cv.amount !== '';
50
- }
51
- return true;
52
- }
53
- function validateEmail(value) {
54
- if (!value)
55
- return true;
56
- return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
57
- }
58
- function validateUrl(value) {
59
- if (!value)
60
- return true;
61
- try {
62
- new URL(value);
63
- return true;
64
- }
65
- catch (_a) {
66
- return false;
67
- }
68
- }
69
- function validateNumber(value, dataType) {
70
- if (value === null || value === undefined || value === '')
71
- return true;
72
- const num = Number(value);
73
- if (isNaN(num))
74
- return false;
75
- if (dataType === index$1.ClientLayoutItemFieldDataType.INTEGER) {
76
- return Number.isInteger(num);
77
- }
78
- if (dataType === index$1.ClientLayoutItemFieldDataType.PERCENTAGE) {
79
- return num >= 0 && num <= 100;
80
- }
81
- return true;
82
- }
83
-
84
- 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)}`;
85
-
86
- const COMMON_CURRENCIES = [
87
- 'EUR', 'USD', 'GBP', 'CHF', 'JPY', 'CNY', 'AUD', 'CAD',
88
- 'SEK', 'NOK', 'DKK', 'NZD', 'SGD', 'HKD', 'PLN', 'CZK',
89
- 'HUF', 'MXN', 'BRL', 'INR', 'TRY', 'ZAR', 'AED', 'SAR',
90
- ];
91
- const MrdCurrencyField = class {
92
- constructor(hostRef) {
93
- index.registerInstance(this, hostRef);
94
- this.mrdChange = index.createEvent(this, "mrdChange");
95
- this.mrdBlur = index.createEvent(this, "mrdBlur");
96
- this.name = '';
97
- this.label = '';
98
- this.value = { amount: null, currency: 'EUR' };
99
- this.required = false;
100
- this.disabled = false;
101
- this.locale = navigator.language;
102
- this.amountDisplay = '';
103
- this.currency = 'EUR';
104
- this.error = '';
105
- this.handleAmountInput = (e) => {
106
- this.amountDisplay = e.target.value;
107
- };
108
- this.handleAmountBlur = (e) => {
109
- const raw = e.target.value;
110
- const parsed = format.parseLocalizedNumber(raw, this.locale);
111
- if (this.required && !validateRequired(raw)) {
112
- this.error = format.t('required', this.locale);
113
- }
114
- else {
115
- this.error = '';
116
- }
117
- const val = { amount: parsed, currency: this.currency };
118
- this.mrdChange.emit({ name: this.name, value: val });
119
- this.mrdBlur.emit({ name: this.name, value: val });
120
- };
121
- this.handleCurrencyChange = (e) => {
122
- this.currency = e.target.value;
123
- const parsed = format.parseLocalizedNumber(this.amountDisplay, this.locale);
124
- this.mrdChange.emit({ name: this.name, value: { amount: parsed, currency: this.currency } });
125
- };
126
- }
127
- componentWillLoad() {
128
- if (this.value) {
129
- this.currency = this.value.currency || 'EUR';
130
- this.amountDisplay = this.value.amount !== null ? String(this.value.amount) : '';
131
- }
132
- }
133
- render() {
134
- const hasError = !!this.error;
135
- 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))));
136
- }
137
- };
138
- MrdCurrencyField.style = mrdCurrencyFieldScss();
139
-
140
- 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)}`;
141
-
142
- const MrdDateField = class {
143
- constructor(hostRef) {
144
- index.registerInstance(this, hostRef);
145
- this.mrdChange = index.createEvent(this, "mrdChange");
146
- this.mrdBlur = index.createEvent(this, "mrdBlur");
147
- this.name = '';
148
- this.label = '';
149
- this.value = '';
150
- this.required = false;
151
- this.disabled = false;
152
- this.locale = navigator.language;
153
- this.error = '';
154
- this.handleChange = (e) => {
155
- const val = e.target.value;
156
- if (this.required && !validateRequired(val)) {
157
- this.error = format.t('required', this.locale);
158
- }
159
- else {
160
- this.error = '';
161
- }
162
- this.mrdChange.emit({ name: this.name, value: val });
163
- };
164
- this.handleBlur = (e) => {
165
- const val = e.target.value;
166
- this.mrdBlur.emit({ name: this.name, value: val });
167
- };
168
- }
169
- render() {
170
- const hasError = !!this.error;
171
- 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))));
172
- }
173
- };
174
- MrdDateField.style = mrdDateFieldScss();
175
-
176
- 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)}`;
177
-
178
- const MrdDatetimeField = class {
179
- constructor(hostRef) {
180
- index.registerInstance(this, hostRef);
181
- this.mrdChange = index.createEvent(this, "mrdChange");
182
- this.mrdBlur = index.createEvent(this, "mrdBlur");
183
- this.name = '';
184
- this.label = '';
185
- this.value = '';
186
- this.required = false;
187
- this.disabled = false;
188
- this.locale = navigator.language;
189
- this.error = '';
190
- this.localValue = '';
191
- this.handleChange = (e) => {
192
- const localVal = e.target.value;
193
- this.localValue = localVal;
194
- if (this.required && !validateRequired(localVal)) {
195
- this.error = format.t('required', this.locale);
196
- }
197
- else {
198
- this.error = '';
199
- }
200
- this.mrdChange.emit({ name: this.name, value: this.localToUtc(localVal) });
201
- };
202
- this.handleBlur = (e) => {
203
- const localVal = e.target.value;
204
- this.mrdBlur.emit({ name: this.name, value: this.localToUtc(localVal) });
205
- };
206
- }
207
- componentWillLoad() {
208
- this.localValue = this.utcToLocal(this.value);
209
- }
210
- valueChanged(newVal) {
211
- this.localValue = this.utcToLocal(newVal);
212
- }
213
- // UTC ISO string → "YYYY-MM-DDTHH:mm" in local timezone (for datetime-local input)
214
- utcToLocal(utcStr) {
215
- if (!utcStr)
216
- return '';
217
- const d = new Date(utcStr);
218
- if (isNaN(d.getTime()))
219
- return '';
220
- const pad = (n) => String(n).padStart(2, '0');
221
- return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
222
- }
223
- // "YYYY-MM-DDTHH:mm" local time → UTC ISO string (for API)
224
- localToUtc(localStr) {
225
- if (!localStr)
226
- return '';
227
- const d = new Date(localStr);
228
- if (isNaN(d.getTime()))
229
- return '';
230
- return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
231
- }
232
- render() {
233
- const hasError = !!this.error;
234
- 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))));
235
- }
236
- static get watchers() { return {
237
- "value": [{
238
- "valueChanged": 0
239
- }]
240
- }; }
241
- };
242
- MrdDatetimeField.style = mrdDatetimeFieldScss();
243
-
244
- 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)}`;
245
-
246
- const MrdEmailField = class {
247
- constructor(hostRef) {
248
- index.registerInstance(this, hostRef);
249
- this.mrdChange = index.createEvent(this, "mrdChange");
250
- this.mrdBlur = index.createEvent(this, "mrdBlur");
251
- this.name = '';
252
- this.label = '';
253
- this.value = '';
254
- this.placeholder = '';
255
- this.required = false;
256
- this.disabled = false;
257
- this.locale = navigator.language;
258
- this.error = '';
259
- this.handleInput = (e) => {
260
- const val = e.target.value;
261
- this.mrdChange.emit({ name: this.name, value: val });
262
- };
263
- this.handleBlur = (e) => {
264
- const val = e.target.value;
265
- if (this.required && !validateRequired(val)) {
266
- this.error = format.t('required', this.locale);
267
- }
268
- else if (val && !validateEmail(val)) {
269
- this.error = format.t('invalid_email', this.locale);
270
- }
271
- else {
272
- this.error = '';
273
- }
274
- this.mrdBlur.emit({ name: this.name, value: val });
275
- };
276
- }
277
- render() {
278
- const hasError = !!this.error;
279
- 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))));
280
- }
281
- };
282
- MrdEmailField.style = mrdEmailFieldScss();
283
-
284
- const MrdField = class {
285
- constructor(hostRef) {
286
- index.registerInstance(this, hostRef);
287
- this.mrdChange = index.createEvent(this, "mrdChange");
288
- this.mrdBlur = index.createEvent(this, "mrdBlur");
289
- this.mrdSearch = index.createEvent(this, "mrdSearch");
290
- this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
291
- this.mrdUpload = index.createEvent(this, "mrdUpload");
292
- this.locale = navigator.language;
293
- this.handleChange = (e) => {
294
- e.stopPropagation();
295
- this.mrdChange.emit(e.detail);
296
- };
297
- this.handleBlur = (e) => {
298
- e.stopPropagation();
299
- this.mrdBlur.emit(e.detail);
300
- };
301
- this.handleSearch = (e) => {
302
- e.stopPropagation();
303
- this.mrdSearch.emit(e.detail);
304
- };
305
- this.handleFetchAll = (e) => {
306
- e.stopPropagation();
307
- this.mrdFetchAll.emit(e.detail);
308
- };
309
- this.handleUpload = (e) => {
310
- e.stopPropagation();
311
- this.mrdUpload.emit(e.detail);
312
- };
313
- }
314
- render() {
315
- 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, _5, _6, _7, _8;
316
- const { item, locale, value } = this;
317
- if (item.type === index$1.ClientLayoutItemType.RELATION && item.relation) {
318
- const rel = item.relation;
319
- return (index.h(index.Host, null, index.h("mrd-relation-field", { name: rel.name, label: rel.label, required: rel.required, disabled: (_a = rel.disabled) !== null && _a !== void 0 ? _a : false, locale: locale, relatedClass: rel.relatedClass, mostSignificantClass: (_b = rel.mostSignificantClass) !== null && _b !== void 0 ? _b : '', displayType: (_c = rel.displayType) !== null && _c !== void 0 ? _c : index$1.ClientLayoutItemRelationDisplayType.SEARCH, editBehavior: (_d = rel.editBehavior) !== null && _d !== void 0 ? _d : null, commonRelation: rel.commonRelation, multiple: (_e = rel.multiple) !== null && _e !== void 0 ? _e : false, dropdownValues: (_f = rel.dropdownValues) !== null && _f !== void 0 ? _f : [], value: value, onMrdChange: this.handleChange, onMrdBlur: this.handleBlur, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll })));
320
- }
321
- if (item.type !== index$1.ClientLayoutItemType.FIELD || !item.field) {
322
- return index.h(index.Host, null);
323
- }
324
- const field = item.field;
325
- const commonProps = {
326
- name: field.name,
327
- label: field.label,
328
- required: field.required,
329
- disabled: (_g = field.disabled) !== null && _g !== void 0 ? _g : false,
330
- locale,
331
- onMrdChange: this.handleChange,
332
- onMrdBlur: this.handleBlur,
333
- };
334
- switch (field.dataType) {
335
- case index$1.ClientLayoutItemFieldDataType.TEXT:
336
- return (index.h(index.Host, null, index.h("mrd-text-field", Object.assign({}, commonProps, { value: (_h = value) !== null && _h !== void 0 ? _h : '', placeholder: (_j = field.placeholder) !== null && _j !== void 0 ? _j : '' }))));
337
- case index$1.ClientLayoutItemFieldDataType.TEXTBLOCK:
338
- return (index.h(index.Host, null, index.h("mrd-textarea-field", Object.assign({}, commonProps, { value: (_k = value) !== null && _k !== void 0 ? _k : '', placeholder: (_l = field.placeholder) !== null && _l !== void 0 ? _l : '' }))));
339
- case index$1.ClientLayoutItemFieldDataType.INTEGER:
340
- case index$1.ClientLayoutItemFieldDataType.DECIMAL:
341
- case index$1.ClientLayoutItemFieldDataType.PERCENTAGE:
342
- return (index.h(index.Host, null, index.h("mrd-number-field", Object.assign({}, commonProps, { value: (_m = value) !== null && _m !== void 0 ? _m : null, dataType: field.dataType, decimalPrecision: (_o = field.decimalPrecision) !== null && _o !== void 0 ? _o : 2, placeholder: (_p = field.placeholder) !== null && _p !== void 0 ? _p : '' }))));
343
- case index$1.ClientLayoutItemFieldDataType.CURRENCY:
344
- return (index.h(index.Host, null, index.h("mrd-currency-field", Object.assign({}, commonProps, { value: (_q = value) !== null && _q !== void 0 ? _q : { amount: null, currency: (_r = field.currencyCode) !== null && _r !== void 0 ? _r : 'EUR' } }))));
345
- case index$1.ClientLayoutItemFieldDataType.BOOLEAN:
346
- return (index.h(index.Host, null, index.h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_s = value) !== null && _s !== void 0 ? _s : false }))));
347
- case index$1.ClientLayoutItemFieldDataType.DATE:
348
- return (index.h(index.Host, null, index.h("mrd-date-field", Object.assign({}, commonProps, { value: (_t = value) !== null && _t !== void 0 ? _t : '' }))));
349
- case index$1.ClientLayoutItemFieldDataType.DATETIME:
350
- return (index.h(index.Host, null, index.h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_u = value) !== null && _u !== void 0 ? _u : '' }))));
351
- case index$1.ClientLayoutItemFieldDataType.TIME:
352
- return (index.h(index.Host, null, index.h("mrd-time-field", Object.assign({}, commonProps, { value: (_v = value) !== null && _v !== void 0 ? _v : '' }))));
353
- case index$1.ClientLayoutItemFieldDataType.EMAIL:
354
- return (index.h(index.Host, null, index.h("mrd-email-field", Object.assign({}, commonProps, { value: (_w = value) !== null && _w !== void 0 ? _w : '', placeholder: (_x = field.placeholder) !== null && _x !== void 0 ? _x : '' }))));
355
- case index$1.ClientLayoutItemFieldDataType.HYPERLINK:
356
- return (index.h(index.Host, null, index.h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_y = value) !== null && _y !== void 0 ? _y : '', placeholder: (_z = field.placeholder) !== null && _z !== void 0 ? _z : '' }))));
357
- case index$1.ClientLayoutItemFieldDataType.LIST:
358
- return (index.h(index.Host, null, index.h("mrd-list-field", Object.assign({}, commonProps, { value: (_0 = value) !== null && _0 !== void 0 ? _0 : '', multiple: (_1 = field.multiple) !== null && _1 !== void 0 ? _1 : false, listItems: (_2 = field.listItems) !== null && _2 !== void 0 ? _2 : [] }))));
359
- case index$1.ClientLayoutItemFieldDataType.FILE:
360
- return (index.h(index.Host, null, index.h("mrd-file-field", Object.assign({}, commonProps, { value: value, accept: (_3 = field.accept) !== null && _3 !== void 0 ? _3 : '', maxSize: (_4 = field.maxSize) !== null && _4 !== void 0 ? _4 : 0, onMrdUpload: this.handleUpload }))));
361
- case index$1.ClientLayoutItemFieldDataType.IMAGE:
362
- return (index.h(index.Host, null, index.h("mrd-image-field", Object.assign({}, commonProps, { value: value, accept: (_5 = field.accept) !== null && _5 !== void 0 ? _5 : 'image/*', maxSize: (_6 = field.maxSize) !== null && _6 !== void 0 ? _6 : 0, onMrdUpload: this.handleUpload }))));
363
- case index$1.ClientLayoutItemFieldDataType.LONGTEXT:
364
- return (index.h(index.Host, null, index.h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_7 = value) !== null && _7 !== void 0 ? _7 : '', placeholder: (_8 = field.placeholder) !== null && _8 !== void 0 ? _8 : '' }))));
365
- case index$1.ClientLayoutItemFieldDataType.JSON:
366
- return index.h(index.Host, null);
367
- default:
368
- return index.h(index.Host, null);
369
- }
370
- }
371
- };
372
-
373
- 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)}`;
374
-
375
- const MrdFileField = class {
376
- constructor(hostRef) {
377
- index.registerInstance(this, hostRef);
378
- this.mrdChange = index.createEvent(this, "mrdChange");
379
- this.mrdBlur = index.createEvent(this, "mrdBlur");
380
- this.mrdUpload = index.createEvent(this, "mrdUpload");
381
- this.name = '';
382
- this.label = '';
383
- this.value = null;
384
- this.required = false;
385
- this.disabled = false;
386
- this.locale = navigator.language;
387
- this.accept = '';
388
- this.maxSize = 0; // bytes, 0 = no limit
389
- this.fileName = '';
390
- this.isDragging = false;
391
- this.uploading = false;
392
- this.error = '';
393
- this.handleInputChange = (e) => {
394
- var _a;
395
- const files = e.target.files;
396
- this.handleFile((_a = files === null || files === void 0 ? void 0 : files[0]) !== null && _a !== void 0 ? _a : null);
397
- };
398
- this.handleDragOver = (e) => {
399
- e.preventDefault();
400
- this.isDragging = true;
401
- };
402
- this.handleDragLeave = () => {
403
- this.isDragging = false;
404
- };
405
- this.handleDrop = (e) => {
406
- var _a, _b, _c;
407
- e.preventDefault();
408
- this.isDragging = false;
409
- 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;
410
- this.handleFile(file);
411
- };
412
- this.handleZoneClick = () => {
413
- var _a;
414
- if (!this.disabled && !this.uploading) {
415
- (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
416
- }
417
- };
418
- this.handleClear = (e) => {
419
- e.stopPropagation();
420
- this.fileName = '';
421
- this.error = '';
422
- this.uploading = false;
423
- if (this.fileInputRef)
424
- this.fileInputRef.value = '';
425
- this.mrdChange.emit({ name: this.name, value: null });
426
- };
427
- }
428
- /** When the host provides a URI back via setFieldValue, the upload is done. */
429
- valueChanged(newVal) {
430
- if (typeof newVal === 'string' && newVal) {
431
- this.uploading = false;
432
- }
433
- else if (!newVal) {
434
- this.uploading = false;
435
- this.fileName = '';
436
- }
437
- }
438
- handleFile(file) {
439
- if (!file) {
440
- this.fileName = '';
441
- this.uploading = false;
442
- this.mrdChange.emit({ name: this.name, value: null });
443
- return;
444
- }
445
- if (this.maxSize > 0 && file.size > this.maxSize) {
446
- this.error = format.t('file_too_large', this.locale);
447
- return;
448
- }
449
- this.error = '';
450
- this.fileName = file.name;
451
- this.uploading = true;
452
- this.mrdChange.emit({ name: this.name, value: file });
453
- this.mrdUpload.emit({ name: this.name, file });
454
- }
455
- render() {
456
- const hasFile = this.uploading || (typeof this.value === 'string' && this.value) || this.fileName;
457
- const hasError = !!this.error;
458
- const zoneClass = [
459
- 'mrd-file-field__zone',
460
- this.isDragging ? 'mrd-file-field__zone--dragging' : '',
461
- hasError ? 'mrd-file-field__zone--error' : '',
462
- this.disabled || this.uploading ? 'mrd-file-field__zone--disabled' : '',
463
- ].filter(Boolean).join(' ');
464
- 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": format.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": format.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, format.t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-file-field__browse" }, format.t('browse', this.locale)))))), hasError && index.h("span", { key: 'a6020e63bebb01e31a980a903f81badd486585aa', class: "mrd-file-field__error" }, this.error))));
465
- }
466
- static get watchers() { return {
467
- "value": [{
468
- "valueChanged": 0
469
- }]
470
- }; }
471
- };
472
- MrdFileField.style = mrdFileFieldScss();
473
-
474
- 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)}`;
475
-
476
- const MrdForm = class {
477
- constructor(hostRef) {
478
- index.registerInstance(this, hostRef);
479
- this.mrdSubmit = index.createEvent(this, "mrdSubmit");
480
- this.mrdCancel = index.createEvent(this, "mrdCancel");
481
- this.mrdSearch = index.createEvent(this, "mrdSearch");
482
- this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
483
- this.mrdUpload = index.createEvent(this, "mrdUpload");
484
- this.locale = navigator.language;
485
- this.values = {};
486
- /**
487
- * Absolute href of the parent/reference object (e.g. the clientAgreement href
488
- * when creating an invoice from within a client agreement).
489
- * Combined with `referenceClass`, mrd-form will automatically pre-fill the
490
- * matching relation field so dependent DROPDOWN fields can be fetched on load
491
- * — without the host app needing to know anything about the form layout.
492
- */
493
- /**
494
- * Absolute href of the parent/reference object (e.g. the clientAgreement href
495
- * when creating an invoice from within a client agreement).
496
- * Combined with `referenceClass`, mrd-form will automatically pre-fill the
497
- * matching relation field so dependent DROPDOWN fields can be fetched on load.
498
- */
499
- this.referenceHref = '';
500
- /**
501
- * The `mostSignificantClass` of the parent/reference object
502
- * (e.g. `'clientAgreements'`). Used to locate the matching RELATION field.
503
- */
504
- this.referenceClass = '';
505
- /** When true, a cancel button is shown next to the submit button. */
506
- this.showCancel = false;
507
- this.formValues = {};
508
- this.errors = {};
509
- this.submitted = false;
510
- this.initialValues = {};
511
- this.handleFieldChange = (e) => {
512
- const { name, value } = e.detail;
513
- const prevHref = this.getHref(this.formValues[name]);
514
- this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
515
- if (this.errors[name]) {
516
- this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
517
- }
518
- // When a field changes, check if it is the commonRelation dependency for any
519
- // DROPDOWN relation. If so, reset the dependent field and re-fetch its options.
520
- // Skip when the effective href did not change (e.g. mrdBlur fires after mrdChange
521
- // with the same value, which would otherwise trigger a duplicate fetch).
522
- const newHref = this.getHref(value);
523
- if (newHref === prevHref)
524
- return;
525
- for (const rel of this.collectDependentDropdowns()) {
526
- if (rel.commonRelation !== name)
527
- continue;
528
- // Clear the dependent field's current selection (options have changed)
529
- this.formValues = Object.assign(Object.assign({}, this.formValues), { [rel.name]: null });
530
- this.mrdFetchAll.emit({
531
- name: rel.name,
532
- relatedClass: rel.relatedClass,
533
- mostSignificantClass: rel.mostSignificantClass,
534
- commonRelation: rel.commonRelation,
535
- filter: rel.commonRelation + '_href',
536
- filterValue: newHref, // empty string when dependency was cleared → host should clear the list
537
- });
538
- }
539
- };
540
- this.handleSearch = (e) => {
541
- e.stopPropagation();
542
- this.mrdSearch.emit(e.detail);
543
- };
544
- this.handleFetchAll = (e) => {
545
- e.stopPropagation();
546
- this.mrdFetchAll.emit(e.detail);
547
- };
548
- this.handleUpload = (e) => {
549
- e.stopPropagation();
550
- this.mrdUpload.emit(e.detail);
551
- };
552
- this.handleSubmit = (e) => {
553
- e.preventDefault();
554
- this.submitted = true;
555
- if (this.validate()) {
556
- this.mrdSubmit.emit(this.buildSubmitPayload());
557
- }
558
- };
559
- }
560
- componentWillLoad() {
561
- var _a, _b;
562
- this.initialValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
563
- this.formValues = Object.assign({}, ((_b = this.values) !== null && _b !== void 0 ? _b : {}));
564
- }
565
- componentDidLoad() {
566
- // Apply reference pre-fill and emit mrdFetchAll for dependent DROPDOWN fields.
567
- // Deferred so Angular/host prop bindings are settled before we read them.
568
- setTimeout(() => {
569
- this.applyReferenceValue();
570
- this.emitDependentFetchAll();
571
- }, 0);
572
- }
573
- /** Sync formValues when the values prop is set from outside after mount
574
- * (e.g. when pre-filling an existing record in edit mode). */
575
- valuesChanged(newValues) {
576
- this.initialValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
577
- this.formValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
578
- this.applyReferenceValue();
579
- this.errors = {};
580
- this.submitted = false;
581
- // Re-check DROPDOWN dependencies now that formValues are updated
582
- setTimeout(() => this.emitDependentFetchAll(), 0);
583
- }
584
- /**
585
- * When referenceHref + referenceClass are set, find the matching layout field
586
- * and inject its value into formValues. This allows dependent DROPDOWN fields
587
- * (those with commonRelation pointing to that field) to be fetched on load
588
- * without the host app doing any form-domain logic.
589
- *
590
- * Two lookup strategies:
591
- * 1. Find a RELATION whose mostSignificantClass matches referenceClass.
592
- * 2. Fallback: find a DROPDOWN whose commonRelation field is absent from the
593
- * layout (API omitted it because it is implied by the reference context).
594
- */
595
- applyReferenceValue() {
596
- if (!this.referenceHref || !this.referenceClass)
597
- return;
598
- const fieldName = this.resolveReferenceFieldName();
599
- if (!fieldName)
600
- return;
601
- // Only set when not already present (don't overwrite an explicit value)
602
- if (!this.formValues[fieldName]) {
603
- this.formValues = Object.assign(Object.assign({}, this.formValues), { [fieldName]: this.referenceHref });
604
- }
605
- }
606
- resolveReferenceFieldName() {
607
- var _a, _b;
608
- const allItems = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
609
- // Strategy 1: direct match on mostSignificantClass
610
- const direct = allItems.find(item => {
611
- var _a;
612
- return item.type === index$1.ClientLayoutItemType.RELATION &&
613
- ((_a = item.relation) === null || _a === void 0 ? void 0 : _a.mostSignificantClass) === this.referenceClass;
614
- });
615
- if (direct === null || direct === void 0 ? void 0 : direct.relation)
616
- return direct.relation.name;
617
- // Strategy 2: a DROPDOWN whose commonRelation field was omitted from the layout
618
- const layoutRelationNames = new Set(allItems
619
- .filter(item => item.type === index$1.ClientLayoutItemType.RELATION)
620
- .map(item => item.relation.name));
621
- for (const item of allItems) {
622
- const rel = item.relation;
623
- if (item.type === index$1.ClientLayoutItemType.RELATION &&
624
- (rel === null || rel === void 0 ? void 0 : rel.editBehavior) === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN &&
625
- rel.commonRelation &&
626
- !layoutRelationNames.has(rel.commonRelation)) {
627
- return rel.commonRelation;
628
- }
629
- }
630
- return null;
631
- }
632
- async setFieldValue(name, value) {
633
- this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
634
- if (this.errors[name]) {
635
- this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
636
- }
637
- }
638
- /** Collect all RELATION items that use editBehavior=DROPDOWN with a commonRelation. */
639
- collectDependentDropdowns() {
640
- var _a, _b;
641
- return this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : [])
642
- .filter(item => {
643
- var _a;
644
- return item.type === index$1.ClientLayoutItemType.RELATION &&
645
- ((_a = item.relation) === null || _a === void 0 ? void 0 : _a.editBehavior) === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN &&
646
- !!item.relation.commonRelation;
647
- })
648
- .map(item => item.relation);
649
- }
650
- /** Emit mrdFetchAll for every dependent DROPDOWN whose filter value is currently set. */
651
- emitDependentFetchAll() {
652
- for (const rel of this.collectDependentDropdowns()) {
653
- const filterValue = this.getHref(this.formValues[rel.commonRelation]);
654
- if (filterValue) {
655
- this.mrdFetchAll.emit({
656
- name: rel.name,
657
- relatedClass: rel.relatedClass,
658
- mostSignificantClass: rel.mostSignificantClass,
659
- commonRelation: rel.commonRelation,
660
- filter: rel.commonRelation + '_href',
661
- filterValue,
662
- });
663
- }
664
- }
665
- }
666
- /** Extract a plain href string from a form value, which can be a string or
667
- * a RelationSearchResult-like object with an `id` field. */
668
- getHref(value) {
669
- if (!value)
670
- return '';
671
- if (typeof value === 'string')
672
- return value;
673
- if (typeof value === 'object' && 'id' in value)
674
- return value.id;
675
- return '';
676
- }
677
- collectFields(items) {
678
- const fields = [];
679
- for (const item of items) {
680
- if (item.type === index$1.ClientLayoutItemType.FIELD || item.type === index$1.ClientLayoutItemType.RELATION) {
681
- fields.push(item);
682
- }
683
- if (item.items) {
684
- fields.push(...this.collectFields(item.items));
685
- }
686
- }
687
- return fields;
688
- }
689
- validate() {
690
- var _a, _b, _c;
691
- const newErrors = {};
692
- const allFields = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
693
- for (const item of allFields) {
694
- const def = (_c = item.field) !== null && _c !== void 0 ? _c : item.relation;
695
- if (!def)
696
- continue;
697
- if (def.required && !validateRequired(this.formValues[def.name])) {
698
- newErrors[def.name] = format.t('required', this.locale);
699
- }
700
- }
701
- this.errors = newErrors;
702
- return Object.keys(newErrors).length === 0;
703
- }
704
- normalizeFieldValue(value) {
705
- return (value === '' || value == null) ? null : value;
706
- }
707
- normalizeRelationValue(value) {
708
- if (value == null || value === '')
709
- return null;
710
- if (typeof value === 'string')
711
- return value || null;
712
- if (Array.isArray(value)) {
713
- return value.map(v => typeof v === 'object' && v !== null && 'id' in v ? v.id : String(v));
714
- }
715
- if (typeof value === 'object' && 'id' in value) {
716
- return value.id || null;
717
- }
718
- return null;
719
- }
720
- deepEqual(a, b) {
721
- if (a === b)
722
- return true;
723
- if (a == null && b == null)
724
- return true;
725
- if (a == null || b == null)
726
- return false;
727
- if (Array.isArray(a) && Array.isArray(b)) {
728
- if (a.length !== b.length)
729
- return false;
730
- const sa = [...a].sort();
731
- const sb = [...b].sort();
732
- return JSON.stringify(sa) === JSON.stringify(sb);
733
- }
734
- return JSON.stringify(a) === JSON.stringify(b);
735
- }
736
- /** Build a submit payload containing only fields that changed relative to
737
- * initialValues. For a new record (POST) initialValues is empty, so every
738
- * non-null field is included. For edit (PATCH) only modified fields are sent,
739
- * including fields explicitly cleared to null.
740
- */
741
- buildSubmitPayload() {
742
- var _a, _b;
743
- const payload = {};
744
- const allFields = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
745
- for (const item of allFields) {
746
- if (item.type === index$1.ClientLayoutItemType.FIELD && item.field) {
747
- const name = item.field.name;
748
- const value = this.formValues[name];
749
- if (value instanceof File)
750
- continue;
751
- const current = this.normalizeFieldValue(value);
752
- const initial = this.normalizeFieldValue(this.initialValues[name]);
753
- if (this.deepEqual(current, initial))
754
- continue;
755
- payload[name] = current;
756
- }
757
- else if (item.type === index$1.ClientLayoutItemType.RELATION && item.relation) {
758
- const name = item.relation.name;
759
- const current = this.normalizeRelationValue(this.formValues[name]);
760
- const initial = this.normalizeRelationValue(this.initialValues[name]);
761
- if (this.deepEqual(current, initial))
762
- continue;
763
- payload[name] = current;
764
- }
765
- }
766
- return payload;
767
- }
768
- renderItems(items) {
769
- return items.map(item => {
770
- var _a, _b, _c, _d;
771
- if (item.type === index$1.ClientLayoutItemType.SECTION) {
772
- 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))));
773
- }
774
- if (item.type === index$1.ClientLayoutItemType.GROUP) {
775
- 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))));
776
- }
777
- const fieldName = (_d = (_b = (_a = item.field) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = item.relation) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
778
- const fieldValue = this.formValues[fieldName];
779
- 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]))));
780
- });
781
- }
782
- render() {
783
- if (!this.layout) {
784
- return index.h(index.Host, null);
785
- }
786
- const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
787
- 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" }, format.t('submit', this.locale)), this.showCancel && (index.h("button", { type: "button", class: "mrd-form__cancel", onClick: () => this.mrdCancel.emit() }, format.t('cancel', this.locale)))))));
788
- }
789
- static get watchers() { return {
790
- "values": [{
791
- "valuesChanged": 0
792
- }]
793
- }; }
794
- };
795
- MrdForm.style = mrdFormScss();
796
-
797
- 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__error.sc-mrd-hyperlink-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
798
-
799
- const MrdHyperlinkField = class {
800
- constructor(hostRef) {
801
- index.registerInstance(this, hostRef);
802
- this.mrdChange = index.createEvent(this, "mrdChange");
803
- this.mrdBlur = index.createEvent(this, "mrdBlur");
804
- this.name = '';
805
- this.label = '';
806
- this.value = '';
807
- this.placeholder = '';
808
- this.required = false;
809
- this.disabled = false;
810
- this.locale = navigator.language;
811
- this.error = '';
812
- this.handleInput = (e) => {
813
- const val = e.target.value;
814
- this.mrdChange.emit({ name: this.name, value: val });
815
- };
816
- this.handleBlur = (e) => {
817
- const val = e.target.value;
818
- if (this.required && !validateRequired(val)) {
819
- this.error = format.t('required', this.locale);
820
- }
821
- else if (val && !validateUrl(val)) {
822
- this.error = format.t('invalid_url', this.locale);
823
- }
824
- else {
825
- this.error = '';
826
- }
827
- this.mrdBlur.emit({ name: this.name, value: val });
828
- };
829
- }
830
- render() {
831
- const hasError = !!this.error;
832
- return (index.h(index.Host, { key: '4f642cb037c6e25786593dbf0cbead71ce34580c' }, index.h("div", { key: 'c679d95924bc2d22089c435ec15a35132a4a062d', class: "mrd-hyperlink-field" }, this.label && (index.h("label", { key: 'b391dd2d152c68fe75517926c40779313a23b9d9', class: `mrd-hyperlink-field__label${this.required ? ' mrd-hyperlink-field__label--required' : ''}` }, this.label)), index.h("input", { key: 'ea0d2aba8520ecbde4df8e4507e0f16bd497baa9', class: `mrd-hyperlink-field__input${hasError ? ' mrd-hyperlink-field__input--error' : ''}`, type: "url", name: this.name, value: this.value, placeholder: this.placeholder || 'https://', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && index.h("span", { key: 'fab1d90c726b69c6c43c7997fd1b7480678c2c78', class: "mrd-hyperlink-field__error" }, this.error))));
833
- }
834
- };
835
- MrdHyperlinkField.style = mrdHyperlinkFieldScss();
836
-
837
- 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)}`;
838
-
839
- const MrdImageField = class {
840
- constructor(hostRef) {
841
- index.registerInstance(this, hostRef);
842
- this.mrdChange = index.createEvent(this, "mrdChange");
843
- this.mrdBlur = index.createEvent(this, "mrdBlur");
844
- this.mrdUpload = index.createEvent(this, "mrdUpload");
845
- this.name = '';
846
- this.label = '';
847
- this.value = null;
848
- this.required = false;
849
- this.disabled = false;
850
- this.locale = navigator.language;
851
- this.accept = 'image/*';
852
- this.maxSize = 0;
853
- this.previewUrl = '';
854
- this.fileName = '';
855
- this.isDragging = false;
856
- this.uploading = false;
857
- this.error = '';
858
- this.handleInputChange = (e) => {
859
- var _a;
860
- const files = e.target.files;
861
- this.handleFile((_a = files === null || files === void 0 ? void 0 : files[0]) !== null && _a !== void 0 ? _a : null);
862
- };
863
- this.handleDragOver = (e) => {
864
- e.preventDefault();
865
- this.isDragging = true;
866
- };
867
- this.handleDragLeave = () => {
868
- this.isDragging = false;
869
- };
870
- this.handleDrop = (e) => {
871
- var _a, _b, _c;
872
- e.preventDefault();
873
- this.isDragging = false;
874
- 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;
875
- this.handleFile(file);
876
- };
877
- this.handleZoneClick = () => {
878
- var _a;
879
- if (!this.disabled && !this.uploading) {
880
- (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
881
- }
882
- };
883
- this.handleClear = (e) => {
884
- e.stopPropagation();
885
- this.previewUrl = '';
886
- this.fileName = '';
887
- this.error = '';
888
- this.uploading = false;
889
- if (this.fileInputRef)
890
- this.fileInputRef.value = '';
891
- this.mrdChange.emit({ name: this.name, value: null });
892
- };
893
- }
894
- /** When the host provides a URI back via setFieldValue, the upload is done. */
895
- valueChanged(newVal) {
896
- if (typeof newVal === 'string' && newVal) {
897
- this.uploading = false;
898
- }
899
- else if (!newVal) {
900
- this.uploading = false;
901
- this.previewUrl = '';
902
- this.fileName = '';
903
- }
904
- }
905
- handleFile(file) {
906
- if (!file) {
907
- this.previewUrl = '';
908
- this.fileName = '';
909
- this.uploading = false;
910
- this.mrdChange.emit({ name: this.name, value: null });
911
- return;
912
- }
913
- if (this.maxSize > 0 && file.size > this.maxSize) {
914
- this.error = format.t('file_too_large', this.locale);
915
- return;
916
- }
917
- if (!file.type.startsWith('image/')) {
918
- this.error = 'Please select an image file';
919
- return;
920
- }
921
- this.error = '';
922
- this.fileName = file.name;
923
- this.uploading = true;
924
- // Show local preview immediately while upload is in progress
925
- const reader = new FileReader();
926
- reader.onload = (ev) => {
927
- var _a;
928
- this.previewUrl = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.result;
929
- };
930
- reader.readAsDataURL(file);
931
- this.mrdChange.emit({ name: this.name, value: file });
932
- this.mrdUpload.emit({ name: this.name, file });
933
- }
934
- render() {
935
- const hasError = !!this.error;
936
- const zoneClass = [
937
- 'mrd-image-field__zone',
938
- this.isDragging ? 'mrd-image-field__zone--dragging' : '',
939
- hasError ? 'mrd-image-field__zone--error' : '',
940
- this.disabled || this.uploading ? 'mrd-image-field__zone--disabled' : '',
941
- ].filter(Boolean).join(' ');
942
- return (index.h(index.Host, { key: '76b5a36a7f5a420ded3400c8a1481843363d1cbe' }, index.h("div", { key: '3544df84aaf427a25518bafe13d60cf89ed28537', class: "mrd-image-field" }, this.label && (index.h("label", { key: 'dca64c1600cb98526eb4b91a908106087f099ad1', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'ce07f32126f0956e47ff6fc41ff231590e0503d3', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("input", { key: '660fbae5f730834c465522a11dd674fc8e50a54e', 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" }, format.t('loading', this.locale)))), !this.uploading && (index.h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": format.t('clear', this.locale) }, format.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, format.t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-image-field__browse" }, format.t('browse', this.locale)))))), hasError && index.h("span", { key: '9b8f9563fea63bd12c38f5c480e9cbd24106c3af', class: "mrd-image-field__error" }, this.error))));
943
- }
944
- static get watchers() { return {
945
- "value": [{
946
- "valueChanged": 0
947
- }]
948
- }; }
949
- };
950
- MrdImageField.style = mrdImageFieldScss();
951
-
952
- 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)}`;
953
-
954
- const MrdListField = class {
955
- constructor(hostRef) {
956
- index.registerInstance(this, hostRef);
957
- this.mrdChange = index.createEvent(this, "mrdChange");
958
- this.mrdBlur = index.createEvent(this, "mrdBlur");
959
- this.name = '';
960
- this.label = '';
961
- this.value = '';
962
- this.required = false;
963
- this.disabled = false;
964
- this.multiple = false;
965
- this.locale = navigator.language;
966
- /** List items from the API. Each item has a `key` (stored value) and `label`. */
967
- this.listItems = [];
968
- this.error = '';
969
- this.selected = [];
970
- this.handleSelectChange = (e) => {
971
- const select = e.target;
972
- if (this.multiple) {
973
- const vals = Array.from(select.selectedOptions).map(o => o.value);
974
- this.selected = vals;
975
- if (this.required && !validateRequired(vals)) {
976
- this.error = format.t('required', this.locale);
977
- }
978
- else {
979
- this.error = '';
980
- }
981
- this.mrdChange.emit({ name: this.name, value: vals });
982
- }
983
- else {
984
- const val = select.value;
985
- if (this.required && !validateRequired(val)) {
986
- this.error = format.t('required', this.locale);
987
- }
988
- else {
989
- this.error = '';
990
- }
991
- this.mrdChange.emit({ name: this.name, value: val });
992
- }
993
- };
994
- this.handleBlur = () => {
995
- const val = this.multiple ? this.selected : this.value;
996
- this.mrdBlur.emit({ name: this.name, value: val });
997
- };
998
- this.toggleCheckbox = (key) => {
999
- if (this.selected.includes(key)) {
1000
- this.selected = this.selected.filter(v => v !== key);
1001
- }
1002
- else {
1003
- this.selected = [...this.selected, key];
1004
- }
1005
- if (this.required && !validateRequired(this.selected)) {
1006
- this.error = format.t('required', this.locale);
1007
- }
1008
- else {
1009
- this.error = '';
1010
- }
1011
- this.mrdChange.emit({ name: this.name, value: this.selected });
1012
- };
1013
- }
1014
- componentWillLoad() {
1015
- if (this.multiple) {
1016
- this.selected = Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
1017
- }
1018
- }
1019
- getContrastColor(bgColor) {
1020
- if (!bgColor)
1021
- return '#000000';
1022
- const hex = bgColor.replace('#', '');
1023
- const r = parseInt(hex.substr(0, 2), 16);
1024
- const g = parseInt(hex.substr(2, 2), 16);
1025
- const b = parseInt(hex.substr(4, 2), 16);
1026
- const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
1027
- return luminance > 0.5 ? '#000000' : '#ffffff';
1028
- }
1029
- render() {
1030
- var _a, _b;
1031
- const hasError = !!this.error;
1032
- const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
1033
- if (this.multiple) {
1034
- 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 => {
1035
- var _a, _b;
1036
- 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)));
1037
- })), hasError && index.h("span", { class: "mrd-list-field__error" }, this.error))));
1038
- }
1039
- 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: "" }, format.t('select_placeholder', this.locale)), this.listItems.map(lv => {
1040
- var _a, _b;
1041
- const bg = (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : null;
1042
- const style = bg ? { backgroundColor: bg, color: this.getContrastColor(bg) } : {};
1043
- return (index.h("option", { key: lv.key, value: lv.key, selected: lv.key === currentValue, style: style }, lv.label));
1044
- })), hasError && index.h("span", { class: "mrd-list-field__error" }, this.error))));
1045
- }
1046
- };
1047
- MrdListField.style = mrdListFieldScss();
1048
-
1049
- 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)}`;
1050
-
1051
- const MrdLongtextField = class {
1052
- constructor(hostRef) {
1053
- index.registerInstance(this, hostRef);
1054
- this.mrdChange = index.createEvent(this, "mrdChange");
1055
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1056
- this.name = '';
1057
- this.label = '';
1058
- this.value = '';
1059
- this.placeholder = '';
1060
- this.required = false;
1061
- this.disabled = false;
1062
- this.locale = navigator.language;
1063
- this.error = '';
1064
- this.handleInput = (e) => {
1065
- const val = e.target.value;
1066
- this.mrdChange.emit({ name: this.name, value: val });
1067
- };
1068
- this.handleBlur = (e) => {
1069
- const val = e.target.value;
1070
- if (this.required && !validateRequired(val)) {
1071
- this.error = format.t('required', this.locale);
1072
- }
1073
- else {
1074
- this.error = '';
1075
- }
1076
- this.mrdBlur.emit({ name: this.name, value: val });
1077
- };
1078
- }
1079
- render() {
1080
- const hasError = !!this.error;
1081
- return (index.h(index.Host, { key: '0b1764adfb7ddce8c5e645a5d96c69c715652365' }, index.h("div", { key: '3c0c6bf77bfcd3f1bc97103baf9e5f6588f541f2', class: "mrd-longtext-field" }, this.label && (index.h("label", { key: 'f096b24c785a8c4b473fe0491a8cfdd7da4770bc', 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: '74b6bcecf81ca86172015abd5e3512ad288ae88e', class: "mrd-longtext-field__error" }, this.error))));
1082
- }
1083
- };
1084
- MrdLongtextField.style = mrdLongtextFieldScss();
1085
-
1086
- 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)}`;
1087
-
1088
- const MrdNumberField = class {
1089
- constructor(hostRef) {
1090
- index.registerInstance(this, hostRef);
1091
- this.mrdChange = index.createEvent(this, "mrdChange");
1092
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1093
- this.name = '';
1094
- this.label = '';
1095
- this.value = null;
1096
- this.placeholder = '';
1097
- this.required = false;
1098
- this.disabled = false;
1099
- this.locale = navigator.language;
1100
- this.dataType = index$1.ClientLayoutItemFieldDataType.INTEGER;
1101
- this.decimalPrecision = 2;
1102
- this.displayValue = '';
1103
- this.error = '';
1104
- this.handleInput = (e) => {
1105
- this.displayValue = e.target.value;
1106
- };
1107
- this.handleBlur = (e) => {
1108
- const raw = e.target.value;
1109
- const parsed = format.parseLocalizedNumber(raw, this.locale);
1110
- if (this.required && (parsed === null || raw === '')) {
1111
- this.error = format.t('required', this.locale);
1112
- }
1113
- else if (raw !== '' && !validateNumber(parsed, this.dataType)) {
1114
- this.error = format.t('invalid_number', this.locale);
1115
- }
1116
- else {
1117
- this.error = '';
1118
- }
1119
- if (parsed !== null && validateRequired(raw)) {
1120
- this.displayValue = this.formatForDisplay(parsed);
1121
- }
1122
- this.mrdChange.emit({ name: this.name, value: parsed });
1123
- this.mrdBlur.emit({ name: this.name, value: parsed });
1124
- };
1125
- this.handleFocus = () => {
1126
- // Show raw number on focus
1127
- if (this.value !== null && this.value !== undefined) {
1128
- const str = String(this.value);
1129
- this.displayValue = str;
1130
- }
1131
- };
1132
- }
1133
- componentWillLoad() {
1134
- if (this.value !== null && this.value !== undefined) {
1135
- this.displayValue = this.formatForDisplay(this.value);
1136
- }
1137
- }
1138
- formatForDisplay(val) {
1139
- if (this.dataType === index$1.ClientLayoutItemFieldDataType.PERCENTAGE) {
1140
- return format.formatNumber(val, this.locale, {
1141
- minimumFractionDigits: 0,
1142
- maximumFractionDigits: this.decimalPrecision,
1143
- }) + '%';
1144
- }
1145
- if (this.dataType === index$1.ClientLayoutItemFieldDataType.DECIMAL) {
1146
- return format.formatNumber(val, this.locale, {
1147
- minimumFractionDigits: this.decimalPrecision,
1148
- maximumFractionDigits: this.decimalPrecision,
1149
- });
1150
- }
1151
- return format.formatNumber(val, this.locale, { maximumFractionDigits: 0 });
1152
- }
1153
- render() {
1154
- const hasError = !!this.error;
1155
- const suffix = this.dataType === index$1.ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
1156
- this.dataType === index$1.ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
1157
- return (index.h(index.Host, { key: '676e773fd4cc22936e64626b16e58c76f74ad8a7' }, index.h("div", { key: 'c646eab29793326f439d9838ecdab68249c487f1', class: "mrd-number-field" }, this.label && (index.h("label", { key: 'fb4fdac8f71b513fed52262ed8f5b5a5258f8f0b', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), index.h("div", { key: '5f7540318761da01f9793430ca709ba014204a11', class: "mrd-number-field__input-wrapper" }, index.h("input", { key: 'a102a89f9b7d91b29cf65afd5772552002d4c4cc', 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: 'eb00631f61d2c9ee6a94343a0c79847a21e8316c', class: "mrd-number-field__error" }, this.error))));
1158
- }
1159
- };
1160
- MrdNumberField.style = mrdNumberFieldScss();
1161
-
1162
- 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)}`;
1163
-
1164
- const MrdRelationField = class {
1165
- constructor(hostRef) {
1166
- index.registerInstance(this, hostRef);
1167
- this.mrdChange = index.createEvent(this, "mrdChange");
1168
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1169
- this.mrdSearch = index.createEvent(this, "mrdSearch");
1170
- this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
1171
- this.name = '';
1172
- this.label = '';
1173
- this.required = false;
1174
- this.disabled = false;
1175
- this.locale = navigator.language;
1176
- this.relatedClass = '';
1177
- /** When set, used instead of relatedClass for search queries (mostSignificantClass from API). */
1178
- this.mostSignificantClass = '';
1179
- this.displayType = index$1.ClientLayoutItemRelationDisplayType.SEARCH;
1180
- this.multiple = false;
1181
- this.dropdownValues = [];
1182
- /** Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record. */
1183
- this.value = null;
1184
- this.searchQuery = '';
1185
- this.searchResults = [];
1186
- this.allRecords = [];
1187
- this.isLoading = false;
1188
- this.selectedItems = [];
1189
- this.showResults = false;
1190
- this.error = '';
1191
- this.highlightedIndex = -1;
1192
- this.searchDebounce = null;
1193
- this.handleKeyDown = (e) => {
1194
- if (!this.showResults || this.searchResults.length === 0) {
1195
- if (e.key === 'Escape') {
1196
- this.showResults = false;
1197
- this.highlightedIndex = -1;
1198
- }
1199
- return;
1200
- }
1201
- if (e.key === 'ArrowDown') {
1202
- e.preventDefault();
1203
- this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.searchResults.length - 1);
1204
- }
1205
- else if (e.key === 'ArrowUp') {
1206
- e.preventDefault();
1207
- this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
1208
- }
1209
- else if (e.key === 'Enter') {
1210
- e.preventDefault();
1211
- if (this.highlightedIndex >= 0) {
1212
- this.handleResultSelect(this.searchResults[this.highlightedIndex]);
1213
- }
1214
- }
1215
- else if (e.key === 'Escape') {
1216
- this.showResults = false;
1217
- this.highlightedIndex = -1;
1218
- }
1219
- };
1220
- this.clearSelection = () => {
1221
- this.selectedItems = [];
1222
- this.searchQuery = '';
1223
- this.searchResults = [];
1224
- this.showResults = false;
1225
- this.highlightedIndex = -1;
1226
- this.mrdChange.emit({ name: this.name, value: this.multiple ? [] : null });
1227
- };
1228
- this.handleSearchInput = (e) => {
1229
- const query = e.target.value;
1230
- this.searchQuery = query;
1231
- if (this.searchDebounce)
1232
- clearTimeout(this.searchDebounce);
1233
- if (query.trim().length >= 2) {
1234
- this.isLoading = true;
1235
- this.showResults = true;
1236
- this.searchDebounce = setTimeout(() => {
1237
- this.mrdSearch.emit({ name: this.name, query, relatedClass: this.mostSignificantClass });
1238
- }, 300);
1239
- }
1240
- else {
1241
- this.searchResults = [];
1242
- this.showResults = false;
1243
- this.isLoading = false;
1244
- }
1245
- };
1246
- this.handleResultSelect = (result) => {
1247
- if (this.multiple) {
1248
- if (!this.selectedItems.find(i => i.id === result.id)) {
1249
- this.selectedItems = [...this.selectedItems, result];
1250
- }
1251
- this.searchQuery = '';
1252
- this.searchResults = [];
1253
- this.showResults = false;
1254
- const ids = this.selectedItems.map(i => i.id);
1255
- this.mrdChange.emit({ name: this.name, value: ids });
1256
- }
1257
- else {
1258
- this.selectedItems = [result];
1259
- this.searchQuery = result.label;
1260
- this.showResults = false;
1261
- this.mrdChange.emit({ name: this.name, value: result.id });
1262
- }
1263
- if (this.required && !validateRequired(this.selectedItems)) {
1264
- this.error = format.t('required', this.locale);
1265
- }
1266
- else {
1267
- this.error = '';
1268
- }
1269
- };
1270
- this.handleRemoveSelected = (id) => {
1271
- this.selectedItems = this.selectedItems.filter(i => i.id !== id);
1272
- const ids = this.selectedItems.map(i => i.id);
1273
- this.mrdChange.emit({ name: this.name, value: this.multiple ? ids : null });
1274
- };
1275
- this.handleDropdownChange = (e) => {
1276
- const val = e.target.value;
1277
- if (this.required && !validateRequired(val)) {
1278
- this.error = format.t('required', this.locale);
1279
- }
1280
- else {
1281
- this.error = '';
1282
- }
1283
- this.mrdChange.emit({ name: this.name, value: val });
1284
- };
1285
- this.handleBlur = () => {
1286
- var _a, _b;
1287
- setTimeout(() => {
1288
- this.showResults = false;
1289
- this.highlightedIndex = -1;
1290
- }, 200);
1291
- 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);
1292
- this.mrdBlur.emit({ name: this.name, value: val });
1293
- };
1294
- }
1295
- async setAllRecords(records) {
1296
- this.allRecords = records;
1297
- }
1298
- getValueHref() {
1299
- var _a, _b, _c;
1300
- const v = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
1301
- if (!v)
1302
- return '';
1303
- if (typeof v === 'object')
1304
- return (_c = v.id) !== null && _c !== void 0 ? _c : '';
1305
- return v;
1306
- }
1307
- allRecordsChanged() {
1308
- if (this.editBehavior !== index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN)
1309
- return;
1310
- const current = this.getValueHref();
1311
- if (!current)
1312
- return;
1313
- // Defer past Stencil's async render cycle: options must exist in the DOM before
1314
- // select.value can be set. setAttribute('selected') alone is ignored by browsers
1315
- // when the select already has an established value.
1316
- setTimeout(() => {
1317
- var _a;
1318
- const select = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector('select');
1319
- if (select)
1320
- select.value = current;
1321
- }, 0);
1322
- }
1323
- async setSearchResults(results) {
1324
- this.searchResults = results;
1325
- this.isLoading = false;
1326
- this.showResults = true;
1327
- this.highlightedIndex = -1;
1328
- }
1329
- async setLoading(loading) {
1330
- this.isLoading = loading;
1331
- }
1332
- componentWillLoad() {
1333
- var _a;
1334
- // Pre-fill selectedItems when value is passed as { id, label } objects
1335
- // (e.g. when editing an existing record fetched from the API).
1336
- if (this.value) {
1337
- if (Array.isArray(this.value)) {
1338
- if (this.value.length > 0 && typeof this.value[0] === 'object') {
1339
- this.selectedItems = this.value;
1340
- this.searchQuery = '';
1341
- }
1342
- }
1343
- else if (typeof this.value === 'object') {
1344
- this.selectedItems = [this.value];
1345
- this.searchQuery = (_a = this.value.label) !== null && _a !== void 0 ? _a : '';
1346
- }
1347
- }
1348
- }
1349
- componentDidLoad() {
1350
- // Only emit when there is no commonRelation dependency — the form orchestrates those.
1351
- if (this.editBehavior === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN && !this.commonRelation) {
1352
- // Defer to next tick so parent event listeners are registered after DOM patching
1353
- setTimeout(() => {
1354
- this.mrdFetchAll.emit({
1355
- name: this.name,
1356
- relatedClass: this.relatedClass,
1357
- mostSignificantClass: this.mostSignificantClass || undefined,
1358
- });
1359
- }, 0);
1360
- }
1361
- }
1362
- render() {
1363
- var _a, _b;
1364
- const hasError = !!this.error;
1365
- if (this.editBehavior === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN) {
1366
- const currentValue = this.getValueHref();
1367
- 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: "" }, format.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))));
1368
- }
1369
- if (this.displayType === index$1.ClientLayoutItemRelationDisplayType.DROPDOWN) {
1370
- const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
1371
- 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: "" }, format.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))));
1372
- }
1373
- // SEARCH mode
1374
- const labelEl = this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label));
1375
- // Single selection: show selected value as a badge, hide the search input
1376
- if (!this.multiple && this.selectedItems.length > 0) {
1377
- 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": format.t('remove', this.locale) }, "\u2715")), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
1378
- }
1379
- 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": format.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: format.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": format.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" }, format.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))));
1380
- }
1381
- get el() { return index.getElement(this); }
1382
- static get watchers() { return {
1383
- "allRecords": [{
1384
- "allRecordsChanged": 0
1385
- }]
1386
- }; }
1387
- };
1388
- MrdRelationField.style = mrdRelationFieldScss();
1389
-
1390
- 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)}`;
1391
-
1392
- const MrdTextField = class {
1393
- constructor(hostRef) {
1394
- index.registerInstance(this, hostRef);
1395
- this.mrdChange = index.createEvent(this, "mrdChange");
1396
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1397
- this.name = '';
1398
- this.label = '';
1399
- this.value = '';
1400
- this.placeholder = '';
1401
- this.required = false;
1402
- this.disabled = false;
1403
- this.locale = navigator.language;
1404
- this.error = '';
1405
- this.handleInput = (e) => {
1406
- const val = e.target.value;
1407
- this.mrdChange.emit({ name: this.name, value: val });
1408
- };
1409
- this.handleBlur = (e) => {
1410
- const val = e.target.value;
1411
- if (this.required && !validateRequired(val)) {
1412
- this.error = format.t('required', this.locale);
1413
- }
1414
- else {
1415
- this.error = '';
1416
- }
1417
- this.mrdBlur.emit({ name: this.name, value: val });
1418
- };
1419
- }
1420
- render() {
1421
- const hasError = !!this.error;
1422
- return (index.h(index.Host, { key: '8909be24f6452fd4f485b209b226edd4a7718d6b' }, index.h("div", { key: '18680ffdd64384b8725c408360da8f0f288ee6fc', class: "mrd-text-field" }, this.label && (index.h("label", { key: 'c4d014056181d4a92ca74a505ae48cb2cb81236d', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), index.h("input", { key: '76f862523928100f1f1089fc747b2964312d77a2', 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: 'd0a1e04caea7a2d5058bc753e0885f25db302575', class: "mrd-text-field__error" }, this.error))));
1423
- }
1424
- };
1425
- MrdTextField.style = mrdTextFieldScss();
1426
-
1427
- 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__error.sc-mrd-textarea-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
1428
-
1429
- const MrdTextareaField = class {
1430
- constructor(hostRef) {
1431
- index.registerInstance(this, hostRef);
1432
- this.mrdChange = index.createEvent(this, "mrdChange");
1433
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1434
- this.name = '';
1435
- this.label = '';
1436
- this.value = '';
1437
- this.placeholder = '';
1438
- this.required = false;
1439
- this.disabled = false;
1440
- this.locale = navigator.language;
1441
- this.error = '';
1442
- this.editorReady = false;
1443
- }
1444
- componentDidLoad() {
1445
- this.initQuill();
1446
- }
1447
- async initQuill() {
1448
- try {
1449
- // Dynamically import Quill
1450
- const Quill = (await Promise.resolve().then(function () { return require('./quill-DmFfnC1f.js'); })).default;
1451
- this.editorEl = this.el.querySelector('.mrd-textarea-field__editor');
1452
- if (!this.editorEl)
1453
- return;
1454
- const quill = new Quill(this.editorEl, {
1455
- theme: 'snow',
1456
- placeholder: this.placeholder,
1457
- readOnly: this.disabled,
1458
- modules: {
1459
- toolbar: [
1460
- ['bold', 'italic', 'underline', 'strike'],
1461
- [{ list: 'ordered' }, { list: 'bullet' }],
1462
- [{ header: [1, 2, 3, false] }],
1463
- ['link'],
1464
- ['clean'],
1465
- ],
1466
- },
1467
- });
1468
- if (this.value) {
1469
- quill.clipboard.dangerouslyPasteHTML(this.value);
1470
- }
1471
- quill.on('text-change', () => {
1472
- var _a, _b;
1473
- const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
1474
- this.mrdChange.emit({ name: this.name, value: html });
1475
- });
1476
- quill.on('selection-change', (range) => {
1477
- var _a, _b;
1478
- if (!range) {
1479
- const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
1480
- if (this.required && !validateRequired(html)) {
1481
- this.error = format.t('required', this.locale);
1482
- }
1483
- else {
1484
- this.error = '';
1485
- }
1486
- this.mrdBlur.emit({ name: this.name, value: html });
1487
- }
1488
- });
1489
- this.editorReady = true;
1490
- }
1491
- catch (err) {
1492
- console.error('Failed to load Quill editor:', err);
1493
- }
1494
- }
1495
- render() {
1496
- return (index.h(index.Host, { key: '41b9f19dc589c26545a11db883c00b7ffe5d1c04' }, index.h("div", { key: '62b01e407efe1d5b8885e769f62705938f931817', class: "mrd-textarea-field" }, this.label && (index.h("label", { key: '284e3355dfe15c0aedcb9bafdd829269a0eea93a', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), index.h("div", { key: '0dba936a6eba64457f5cc69164d0f0eaf4563698', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, index.h("div", { key: '0c47c25bd86d5002575a1f19848b0b0af2e87982', class: "mrd-textarea-field__editor" })), this.error && index.h("span", { key: 'e678046a6c27544dd9007a6c66083cce089cb991', class: "mrd-textarea-field__error" }, this.error))));
1497
- }
1498
- get el() { return index.getElement(this); }
1499
- };
1500
- MrdTextareaField.style = mrdTextareaFieldScss();
1501
-
1502
- 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)}`;
1503
-
1504
- const MrdTimeField = class {
1505
- constructor(hostRef) {
1506
- index.registerInstance(this, hostRef);
1507
- this.mrdChange = index.createEvent(this, "mrdChange");
1508
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1509
- this.name = '';
1510
- this.label = '';
1511
- this.value = '';
1512
- this.required = false;
1513
- this.disabled = false;
1514
- this.locale = navigator.language;
1515
- this.error = '';
1516
- this.handleChange = (e) => {
1517
- const val = e.target.value;
1518
- if (this.required && !validateRequired(val)) {
1519
- this.error = format.t('required', this.locale);
1520
- }
1521
- else {
1522
- this.error = '';
1523
- }
1524
- this.mrdChange.emit({ name: this.name, value: val });
1525
- };
1526
- this.handleBlur = (e) => {
1527
- const val = e.target.value;
1528
- this.mrdBlur.emit({ name: this.name, value: val });
1529
- };
1530
- }
1531
- render() {
1532
- const hasError = !!this.error;
1533
- return (index.h(index.Host, { key: 'f5325429315ff23757f2a575b8d317c76e23f579' }, index.h("div", { key: '2c2a4a49984d61cf62f94f1923d6a2a1e550fb1c', class: "mrd-time-field" }, this.label && (index.h("label", { key: '3ef4da8ecc8406eacf3e91e188a1ea20f8eb8779', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), index.h("input", { key: '284527457812d72f5341128d3ba7873f52d5694f', 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: '7563dcb10e813c583a0fb29e07f6e7f2340609bf', class: "mrd-time-field__error" }, this.error))));
1534
- }
1535
- };
1536
- MrdTimeField.style = mrdTimeFieldScss();
1537
-
1538
- exports.mrd_boolean_field = MrdBooleanField;
1539
- exports.mrd_currency_field = MrdCurrencyField;
1540
- exports.mrd_date_field = MrdDateField;
1541
- exports.mrd_datetime_field = MrdDatetimeField;
1542
- exports.mrd_email_field = MrdEmailField;
1543
- exports.mrd_field = MrdField;
1544
- exports.mrd_file_field = MrdFileField;
1545
- exports.mrd_form = MrdForm;
1546
- exports.mrd_hyperlink_field = MrdHyperlinkField;
1547
- exports.mrd_image_field = MrdImageField;
1548
- exports.mrd_list_field = MrdListField;
1549
- exports.mrd_longtext_field = MrdLongtextField;
1550
- exports.mrd_number_field = MrdNumberField;
1551
- exports.mrd_relation_field = MrdRelationField;
1552
- exports.mrd_text_field = MrdTextField;
1553
- exports.mrd_textarea_field = MrdTextareaField;
1554
- exports.mrd_time_field = MrdTimeField;