@mmlogic/components 0.1.23 → 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 (57) hide show
  1. package/dist/cjs/index.cjs.js +2 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/mosterdcomponents.cjs.js +1 -1
  4. package/dist/cjs/mrd-boolean-field_19.cjs.entry.js +3150 -0
  5. package/dist/collection/collection-manifest.json +2 -0
  6. package/dist/collection/components/mrd-field/mrd-field.js +5 -1
  7. package/dist/collection/components/mrd-layout-section/mrd-layout-section.js +715 -0
  8. package/dist/collection/components/mrd-layout-section/mrd-layout-section.scss +339 -0
  9. package/dist/collection/components/mrd-longtext-field/mrd-longtext-field.js +227 -0
  10. package/dist/collection/components/mrd-longtext-field/mrd-longtext-field.scss +78 -0
  11. package/dist/collection/components/mrd-number-field/mrd-number-field.js +2 -2
  12. package/dist/collection/components/mrd-table/mrd-table.js +41 -4
  13. package/dist/collection/components/mrd-table/mrd-table.scss +23 -0
  14. package/dist/collection/components/mrd-text-field/mrd-text-field.js +1 -1
  15. package/dist/collection/components/mrd-textarea-field/mrd-textarea-field.js +1 -1
  16. package/dist/collection/components/mrd-time-field/mrd-time-field.js +1 -1
  17. package/dist/collection/dev/app.js +109 -3
  18. package/dist/collection/dev/example-data.js +324 -0
  19. package/dist/collection/types/client-layout.js +2 -0
  20. package/dist/collection/utils/cell-renderer.js +32 -0
  21. package/dist/components/client-layout.js +1 -1
  22. package/dist/components/mrd-field2.js +1 -1
  23. package/dist/components/mrd-form.js +1 -1
  24. package/dist/components/mrd-layout-section.d.ts +11 -0
  25. package/dist/components/mrd-layout-section.js +1 -0
  26. package/dist/components/mrd-longtext-field.d.ts +11 -0
  27. package/dist/components/mrd-longtext-field.js +1 -0
  28. package/dist/components/mrd-longtext-field2.js +1 -0
  29. package/dist/components/mrd-number-field2.js +1 -1
  30. package/dist/components/mrd-table.js +1 -1
  31. package/dist/components/mrd-table2.js +1 -0
  32. package/dist/components/mrd-text-field2.js +1 -1
  33. package/dist/components/mrd-textarea-field2.js +1 -1
  34. package/dist/components/mrd-time-field2.js +1 -1
  35. package/dist/esm/index.js +2 -0
  36. package/dist/esm/loader.js +1 -1
  37. package/dist/esm/mosterdcomponents.js +1 -1
  38. package/dist/esm/mrd-boolean-field_19.entry.js +3130 -0
  39. package/dist/mosterdcomponents/index.esm.js +1 -1
  40. package/dist/mosterdcomponents/mosterdcomponents.esm.js +1 -1
  41. package/dist/mosterdcomponents/p-a3255fc4.entry.js +1 -0
  42. package/dist/types/components/mrd-layout-section/mrd-layout-section.d.ts +92 -0
  43. package/dist/types/components/mrd-longtext-field/mrd-longtext-field.d.ts +22 -0
  44. package/dist/types/components/mrd-table/mrd-table.d.ts +5 -0
  45. package/dist/types/components.d.ts +224 -8
  46. package/dist/types/types/client-layout.d.ts +22 -1
  47. package/dist/types/utils/cell-renderer.d.ts +9 -1
  48. package/package.json +1 -1
  49. package/dist/cjs/format-DExY8_nu.js +0 -328
  50. package/dist/cjs/mrd-boolean-field_16.cjs.entry.js +0 -1512
  51. package/dist/cjs/mrd-table.cjs.entry.js +0 -882
  52. package/dist/esm/format-CcRjWvcb.js +0 -319
  53. package/dist/esm/mrd-boolean-field_16.entry.js +0 -1495
  54. package/dist/esm/mrd-table.entry.js +0 -880
  55. package/dist/mosterdcomponents/p-16dcbcdf.entry.js +0 -1
  56. package/dist/mosterdcomponents/p-17e5a251.entry.js +0 -1
  57. package/dist/mosterdcomponents/p-CcRjWvcb.js +0 -1
@@ -1,1512 +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;
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
- default:
364
- return index.h(index.Host, null);
365
- }
366
- }
367
- };
368
-
369
- 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)}`;
370
-
371
- const MrdFileField = class {
372
- constructor(hostRef) {
373
- index.registerInstance(this, hostRef);
374
- this.mrdChange = index.createEvent(this, "mrdChange");
375
- this.mrdBlur = index.createEvent(this, "mrdBlur");
376
- this.mrdUpload = index.createEvent(this, "mrdUpload");
377
- this.name = '';
378
- this.label = '';
379
- this.value = null;
380
- this.required = false;
381
- this.disabled = false;
382
- this.locale = navigator.language;
383
- this.accept = '';
384
- this.maxSize = 0; // bytes, 0 = no limit
385
- this.fileName = '';
386
- this.isDragging = false;
387
- this.uploading = false;
388
- this.error = '';
389
- this.handleInputChange = (e) => {
390
- var _a;
391
- const files = e.target.files;
392
- this.handleFile((_a = files === null || files === void 0 ? void 0 : files[0]) !== null && _a !== void 0 ? _a : null);
393
- };
394
- this.handleDragOver = (e) => {
395
- e.preventDefault();
396
- this.isDragging = true;
397
- };
398
- this.handleDragLeave = () => {
399
- this.isDragging = false;
400
- };
401
- this.handleDrop = (e) => {
402
- var _a, _b, _c;
403
- e.preventDefault();
404
- this.isDragging = false;
405
- 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;
406
- this.handleFile(file);
407
- };
408
- this.handleZoneClick = () => {
409
- var _a;
410
- if (!this.disabled && !this.uploading) {
411
- (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
412
- }
413
- };
414
- this.handleClear = (e) => {
415
- e.stopPropagation();
416
- this.fileName = '';
417
- this.error = '';
418
- this.uploading = false;
419
- if (this.fileInputRef)
420
- this.fileInputRef.value = '';
421
- this.mrdChange.emit({ name: this.name, value: null });
422
- };
423
- }
424
- /** When the host provides a URI back via setFieldValue, the upload is done. */
425
- valueChanged(newVal) {
426
- if (typeof newVal === 'string' && newVal) {
427
- this.uploading = false;
428
- }
429
- else if (!newVal) {
430
- this.uploading = false;
431
- this.fileName = '';
432
- }
433
- }
434
- handleFile(file) {
435
- if (!file) {
436
- this.fileName = '';
437
- this.uploading = false;
438
- this.mrdChange.emit({ name: this.name, value: null });
439
- return;
440
- }
441
- if (this.maxSize > 0 && file.size > this.maxSize) {
442
- this.error = format.t('file_too_large', this.locale);
443
- return;
444
- }
445
- this.error = '';
446
- this.fileName = file.name;
447
- this.uploading = true;
448
- this.mrdChange.emit({ name: this.name, value: file });
449
- this.mrdUpload.emit({ name: this.name, file });
450
- }
451
- render() {
452
- const hasFile = this.uploading || (typeof this.value === 'string' && this.value) || this.fileName;
453
- const hasError = !!this.error;
454
- const zoneClass = [
455
- 'mrd-file-field__zone',
456
- this.isDragging ? 'mrd-file-field__zone--dragging' : '',
457
- hasError ? 'mrd-file-field__zone--error' : '',
458
- this.disabled || this.uploading ? 'mrd-file-field__zone--disabled' : '',
459
- ].filter(Boolean).join(' ');
460
- 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))));
461
- }
462
- static get watchers() { return {
463
- "value": [{
464
- "valueChanged": 0
465
- }]
466
- }; }
467
- };
468
- MrdFileField.style = mrdFileFieldScss();
469
-
470
- 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)}`;
471
-
472
- const MrdForm = class {
473
- constructor(hostRef) {
474
- index.registerInstance(this, hostRef);
475
- this.mrdSubmit = index.createEvent(this, "mrdSubmit");
476
- this.mrdCancel = index.createEvent(this, "mrdCancel");
477
- this.mrdSearch = index.createEvent(this, "mrdSearch");
478
- this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
479
- this.mrdUpload = index.createEvent(this, "mrdUpload");
480
- this.locale = navigator.language;
481
- this.values = {};
482
- /**
483
- * Absolute href of the parent/reference object (e.g. the clientAgreement href
484
- * when creating an invoice from within a client agreement).
485
- * Combined with `referenceClass`, mrd-form will automatically pre-fill the
486
- * matching relation field so dependent DROPDOWN fields can be fetched on load
487
- * — without the host app needing to know anything about the form layout.
488
- */
489
- /**
490
- * Absolute href of the parent/reference object (e.g. the clientAgreement href
491
- * when creating an invoice from within a client agreement).
492
- * Combined with `referenceClass`, mrd-form will automatically pre-fill the
493
- * matching relation field so dependent DROPDOWN fields can be fetched on load.
494
- */
495
- this.referenceHref = '';
496
- /**
497
- * The `mostSignificantClass` of the parent/reference object
498
- * (e.g. `'clientAgreements'`). Used to locate the matching RELATION field.
499
- */
500
- this.referenceClass = '';
501
- /** When true, a cancel button is shown next to the submit button. */
502
- this.showCancel = false;
503
- this.formValues = {};
504
- this.errors = {};
505
- this.submitted = false;
506
- this.initialValues = {};
507
- this.handleFieldChange = (e) => {
508
- const { name, value } = e.detail;
509
- const prevHref = this.getHref(this.formValues[name]);
510
- this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
511
- if (this.errors[name]) {
512
- this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
513
- }
514
- // When a field changes, check if it is the commonRelation dependency for any
515
- // DROPDOWN relation. If so, reset the dependent field and re-fetch its options.
516
- // Skip when the effective href did not change (e.g. mrdBlur fires after mrdChange
517
- // with the same value, which would otherwise trigger a duplicate fetch).
518
- const newHref = this.getHref(value);
519
- if (newHref === prevHref)
520
- return;
521
- for (const rel of this.collectDependentDropdowns()) {
522
- if (rel.commonRelation !== name)
523
- continue;
524
- // Clear the dependent field's current selection (options have changed)
525
- this.formValues = Object.assign(Object.assign({}, this.formValues), { [rel.name]: null });
526
- this.mrdFetchAll.emit({
527
- name: rel.name,
528
- relatedClass: rel.relatedClass,
529
- mostSignificantClass: rel.mostSignificantClass,
530
- commonRelation: rel.commonRelation,
531
- filter: rel.commonRelation + '_href',
532
- filterValue: newHref, // empty string when dependency was cleared → host should clear the list
533
- });
534
- }
535
- };
536
- this.handleSearch = (e) => {
537
- e.stopPropagation();
538
- this.mrdSearch.emit(e.detail);
539
- };
540
- this.handleFetchAll = (e) => {
541
- e.stopPropagation();
542
- this.mrdFetchAll.emit(e.detail);
543
- };
544
- this.handleUpload = (e) => {
545
- e.stopPropagation();
546
- this.mrdUpload.emit(e.detail);
547
- };
548
- this.handleSubmit = (e) => {
549
- e.preventDefault();
550
- this.submitted = true;
551
- if (this.validate()) {
552
- this.mrdSubmit.emit(this.buildSubmitPayload());
553
- }
554
- };
555
- }
556
- componentWillLoad() {
557
- var _a, _b;
558
- this.initialValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
559
- this.formValues = Object.assign({}, ((_b = this.values) !== null && _b !== void 0 ? _b : {}));
560
- }
561
- componentDidLoad() {
562
- // Apply reference pre-fill and emit mrdFetchAll for dependent DROPDOWN fields.
563
- // Deferred so Angular/host prop bindings are settled before we read them.
564
- setTimeout(() => {
565
- this.applyReferenceValue();
566
- this.emitDependentFetchAll();
567
- }, 0);
568
- }
569
- /** Sync formValues when the values prop is set from outside after mount
570
- * (e.g. when pre-filling an existing record in edit mode). */
571
- valuesChanged(newValues) {
572
- this.initialValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
573
- this.formValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
574
- this.applyReferenceValue();
575
- this.errors = {};
576
- this.submitted = false;
577
- // Re-check DROPDOWN dependencies now that formValues are updated
578
- setTimeout(() => this.emitDependentFetchAll(), 0);
579
- }
580
- /**
581
- * When referenceHref + referenceClass are set, find the matching layout field
582
- * and inject its value into formValues. This allows dependent DROPDOWN fields
583
- * (those with commonRelation pointing to that field) to be fetched on load
584
- * without the host app doing any form-domain logic.
585
- *
586
- * Two lookup strategies:
587
- * 1. Find a RELATION whose mostSignificantClass matches referenceClass.
588
- * 2. Fallback: find a DROPDOWN whose commonRelation field is absent from the
589
- * layout (API omitted it because it is implied by the reference context).
590
- */
591
- applyReferenceValue() {
592
- if (!this.referenceHref || !this.referenceClass)
593
- return;
594
- const fieldName = this.resolveReferenceFieldName();
595
- if (!fieldName)
596
- return;
597
- // Only set when not already present (don't overwrite an explicit value)
598
- if (!this.formValues[fieldName]) {
599
- this.formValues = Object.assign(Object.assign({}, this.formValues), { [fieldName]: this.referenceHref });
600
- }
601
- }
602
- resolveReferenceFieldName() {
603
- var _a, _b;
604
- const allItems = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
605
- // Strategy 1: direct match on mostSignificantClass
606
- const direct = allItems.find(item => {
607
- var _a;
608
- return item.type === index$1.ClientLayoutItemType.RELATION &&
609
- ((_a = item.relation) === null || _a === void 0 ? void 0 : _a.mostSignificantClass) === this.referenceClass;
610
- });
611
- if (direct === null || direct === void 0 ? void 0 : direct.relation)
612
- return direct.relation.name;
613
- // Strategy 2: a DROPDOWN whose commonRelation field was omitted from the layout
614
- const layoutRelationNames = new Set(allItems
615
- .filter(item => item.type === index$1.ClientLayoutItemType.RELATION)
616
- .map(item => item.relation.name));
617
- for (const item of allItems) {
618
- const rel = item.relation;
619
- if (item.type === index$1.ClientLayoutItemType.RELATION &&
620
- (rel === null || rel === void 0 ? void 0 : rel.editBehavior) === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN &&
621
- rel.commonRelation &&
622
- !layoutRelationNames.has(rel.commonRelation)) {
623
- return rel.commonRelation;
624
- }
625
- }
626
- return null;
627
- }
628
- async setFieldValue(name, value) {
629
- this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
630
- if (this.errors[name]) {
631
- this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
632
- }
633
- }
634
- /** Collect all RELATION items that use editBehavior=DROPDOWN with a commonRelation. */
635
- collectDependentDropdowns() {
636
- var _a, _b;
637
- return this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : [])
638
- .filter(item => {
639
- var _a;
640
- return item.type === index$1.ClientLayoutItemType.RELATION &&
641
- ((_a = item.relation) === null || _a === void 0 ? void 0 : _a.editBehavior) === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN &&
642
- !!item.relation.commonRelation;
643
- })
644
- .map(item => item.relation);
645
- }
646
- /** Emit mrdFetchAll for every dependent DROPDOWN whose filter value is currently set. */
647
- emitDependentFetchAll() {
648
- for (const rel of this.collectDependentDropdowns()) {
649
- const filterValue = this.getHref(this.formValues[rel.commonRelation]);
650
- if (filterValue) {
651
- this.mrdFetchAll.emit({
652
- name: rel.name,
653
- relatedClass: rel.relatedClass,
654
- mostSignificantClass: rel.mostSignificantClass,
655
- commonRelation: rel.commonRelation,
656
- filter: rel.commonRelation + '_href',
657
- filterValue,
658
- });
659
- }
660
- }
661
- }
662
- /** Extract a plain href string from a form value, which can be a string or
663
- * a RelationSearchResult-like object with an `id` field. */
664
- getHref(value) {
665
- if (!value)
666
- return '';
667
- if (typeof value === 'string')
668
- return value;
669
- if (typeof value === 'object' && 'id' in value)
670
- return value.id;
671
- return '';
672
- }
673
- collectFields(items) {
674
- const fields = [];
675
- for (const item of items) {
676
- if (item.type === index$1.ClientLayoutItemType.FIELD || item.type === index$1.ClientLayoutItemType.RELATION) {
677
- fields.push(item);
678
- }
679
- if (item.items) {
680
- fields.push(...this.collectFields(item.items));
681
- }
682
- }
683
- return fields;
684
- }
685
- validate() {
686
- var _a, _b, _c;
687
- const newErrors = {};
688
- const allFields = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
689
- for (const item of allFields) {
690
- const def = (_c = item.field) !== null && _c !== void 0 ? _c : item.relation;
691
- if (!def)
692
- continue;
693
- if (def.required && !validateRequired(this.formValues[def.name])) {
694
- newErrors[def.name] = format.t('required', this.locale);
695
- }
696
- }
697
- this.errors = newErrors;
698
- return Object.keys(newErrors).length === 0;
699
- }
700
- normalizeFieldValue(value) {
701
- return (value === '' || value == null) ? null : value;
702
- }
703
- normalizeRelationValue(value) {
704
- if (value == null || value === '')
705
- return null;
706
- if (typeof value === 'string')
707
- return value || null;
708
- if (Array.isArray(value)) {
709
- return value.map(v => typeof v === 'object' && v !== null && 'id' in v ? v.id : String(v));
710
- }
711
- if (typeof value === 'object' && 'id' in value) {
712
- return value.id || null;
713
- }
714
- return null;
715
- }
716
- deepEqual(a, b) {
717
- if (a === b)
718
- return true;
719
- if (a == null && b == null)
720
- return true;
721
- if (a == null || b == null)
722
- return false;
723
- if (Array.isArray(a) && Array.isArray(b)) {
724
- if (a.length !== b.length)
725
- return false;
726
- const sa = [...a].sort();
727
- const sb = [...b].sort();
728
- return JSON.stringify(sa) === JSON.stringify(sb);
729
- }
730
- return JSON.stringify(a) === JSON.stringify(b);
731
- }
732
- /** Build a submit payload containing only fields that changed relative to
733
- * initialValues. For a new record (POST) initialValues is empty, so every
734
- * non-null field is included. For edit (PATCH) only modified fields are sent,
735
- * including fields explicitly cleared to null.
736
- */
737
- buildSubmitPayload() {
738
- var _a, _b;
739
- const payload = {};
740
- const allFields = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
741
- for (const item of allFields) {
742
- if (item.type === index$1.ClientLayoutItemType.FIELD && item.field) {
743
- const name = item.field.name;
744
- const value = this.formValues[name];
745
- if (value instanceof File)
746
- continue;
747
- const current = this.normalizeFieldValue(value);
748
- const initial = this.normalizeFieldValue(this.initialValues[name]);
749
- if (this.deepEqual(current, initial))
750
- continue;
751
- payload[name] = current;
752
- }
753
- else if (item.type === index$1.ClientLayoutItemType.RELATION && item.relation) {
754
- const name = item.relation.name;
755
- const current = this.normalizeRelationValue(this.formValues[name]);
756
- const initial = this.normalizeRelationValue(this.initialValues[name]);
757
- if (this.deepEqual(current, initial))
758
- continue;
759
- payload[name] = current;
760
- }
761
- }
762
- return payload;
763
- }
764
- renderItems(items) {
765
- return items.map(item => {
766
- var _a, _b, _c, _d;
767
- if (item.type === index$1.ClientLayoutItemType.SECTION) {
768
- 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))));
769
- }
770
- if (item.type === index$1.ClientLayoutItemType.GROUP) {
771
- 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))));
772
- }
773
- 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 : '';
774
- const fieldValue = this.formValues[fieldName];
775
- 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]))));
776
- });
777
- }
778
- render() {
779
- if (!this.layout) {
780
- return index.h(index.Host, null);
781
- }
782
- const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
783
- 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)))))));
784
- }
785
- static get watchers() { return {
786
- "values": [{
787
- "valuesChanged": 0
788
- }]
789
- }; }
790
- };
791
- MrdForm.style = mrdFormScss();
792
-
793
- 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)}`;
794
-
795
- const MrdHyperlinkField = class {
796
- constructor(hostRef) {
797
- index.registerInstance(this, hostRef);
798
- this.mrdChange = index.createEvent(this, "mrdChange");
799
- this.mrdBlur = index.createEvent(this, "mrdBlur");
800
- this.name = '';
801
- this.label = '';
802
- this.value = '';
803
- this.placeholder = '';
804
- this.required = false;
805
- this.disabled = false;
806
- this.locale = navigator.language;
807
- this.error = '';
808
- this.handleInput = (e) => {
809
- const val = e.target.value;
810
- this.mrdChange.emit({ name: this.name, value: val });
811
- };
812
- this.handleBlur = (e) => {
813
- const val = e.target.value;
814
- if (this.required && !validateRequired(val)) {
815
- this.error = format.t('required', this.locale);
816
- }
817
- else if (val && !validateUrl(val)) {
818
- this.error = format.t('invalid_url', this.locale);
819
- }
820
- else {
821
- this.error = '';
822
- }
823
- this.mrdBlur.emit({ name: this.name, value: val });
824
- };
825
- }
826
- render() {
827
- const hasError = !!this.error;
828
- 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))));
829
- }
830
- };
831
- MrdHyperlinkField.style = mrdHyperlinkFieldScss();
832
-
833
- 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)}`;
834
-
835
- const MrdImageField = class {
836
- constructor(hostRef) {
837
- index.registerInstance(this, hostRef);
838
- this.mrdChange = index.createEvent(this, "mrdChange");
839
- this.mrdBlur = index.createEvent(this, "mrdBlur");
840
- this.mrdUpload = index.createEvent(this, "mrdUpload");
841
- this.name = '';
842
- this.label = '';
843
- this.value = null;
844
- this.required = false;
845
- this.disabled = false;
846
- this.locale = navigator.language;
847
- this.accept = 'image/*';
848
- this.maxSize = 0;
849
- this.previewUrl = '';
850
- this.fileName = '';
851
- this.isDragging = false;
852
- this.uploading = false;
853
- this.error = '';
854
- this.handleInputChange = (e) => {
855
- var _a;
856
- const files = e.target.files;
857
- this.handleFile((_a = files === null || files === void 0 ? void 0 : files[0]) !== null && _a !== void 0 ? _a : null);
858
- };
859
- this.handleDragOver = (e) => {
860
- e.preventDefault();
861
- this.isDragging = true;
862
- };
863
- this.handleDragLeave = () => {
864
- this.isDragging = false;
865
- };
866
- this.handleDrop = (e) => {
867
- var _a, _b, _c;
868
- e.preventDefault();
869
- this.isDragging = false;
870
- 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;
871
- this.handleFile(file);
872
- };
873
- this.handleZoneClick = () => {
874
- var _a;
875
- if (!this.disabled && !this.uploading) {
876
- (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
877
- }
878
- };
879
- this.handleClear = (e) => {
880
- e.stopPropagation();
881
- this.previewUrl = '';
882
- this.fileName = '';
883
- this.error = '';
884
- this.uploading = false;
885
- if (this.fileInputRef)
886
- this.fileInputRef.value = '';
887
- this.mrdChange.emit({ name: this.name, value: null });
888
- };
889
- }
890
- /** When the host provides a URI back via setFieldValue, the upload is done. */
891
- valueChanged(newVal) {
892
- if (typeof newVal === 'string' && newVal) {
893
- this.uploading = false;
894
- }
895
- else if (!newVal) {
896
- this.uploading = false;
897
- this.previewUrl = '';
898
- this.fileName = '';
899
- }
900
- }
901
- handleFile(file) {
902
- if (!file) {
903
- this.previewUrl = '';
904
- this.fileName = '';
905
- this.uploading = false;
906
- this.mrdChange.emit({ name: this.name, value: null });
907
- return;
908
- }
909
- if (this.maxSize > 0 && file.size > this.maxSize) {
910
- this.error = format.t('file_too_large', this.locale);
911
- return;
912
- }
913
- if (!file.type.startsWith('image/')) {
914
- this.error = 'Please select an image file';
915
- return;
916
- }
917
- this.error = '';
918
- this.fileName = file.name;
919
- this.uploading = true;
920
- // Show local preview immediately while upload is in progress
921
- const reader = new FileReader();
922
- reader.onload = (ev) => {
923
- var _a;
924
- this.previewUrl = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.result;
925
- };
926
- reader.readAsDataURL(file);
927
- this.mrdChange.emit({ name: this.name, value: file });
928
- this.mrdUpload.emit({ name: this.name, file });
929
- }
930
- render() {
931
- const hasError = !!this.error;
932
- const zoneClass = [
933
- 'mrd-image-field__zone',
934
- this.isDragging ? 'mrd-image-field__zone--dragging' : '',
935
- hasError ? 'mrd-image-field__zone--error' : '',
936
- this.disabled || this.uploading ? 'mrd-image-field__zone--disabled' : '',
937
- ].filter(Boolean).join(' ');
938
- 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))));
939
- }
940
- static get watchers() { return {
941
- "value": [{
942
- "valueChanged": 0
943
- }]
944
- }; }
945
- };
946
- MrdImageField.style = mrdImageFieldScss();
947
-
948
- 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)}`;
949
-
950
- const MrdListField = class {
951
- constructor(hostRef) {
952
- index.registerInstance(this, hostRef);
953
- this.mrdChange = index.createEvent(this, "mrdChange");
954
- this.mrdBlur = index.createEvent(this, "mrdBlur");
955
- this.name = '';
956
- this.label = '';
957
- this.value = '';
958
- this.required = false;
959
- this.disabled = false;
960
- this.multiple = false;
961
- this.locale = navigator.language;
962
- /** List items from the API. Each item has a `key` (stored value) and `label`. */
963
- this.listItems = [];
964
- this.error = '';
965
- this.selected = [];
966
- this.handleSelectChange = (e) => {
967
- const select = e.target;
968
- if (this.multiple) {
969
- const vals = Array.from(select.selectedOptions).map(o => o.value);
970
- this.selected = vals;
971
- if (this.required && !validateRequired(vals)) {
972
- this.error = format.t('required', this.locale);
973
- }
974
- else {
975
- this.error = '';
976
- }
977
- this.mrdChange.emit({ name: this.name, value: vals });
978
- }
979
- else {
980
- const val = select.value;
981
- if (this.required && !validateRequired(val)) {
982
- this.error = format.t('required', this.locale);
983
- }
984
- else {
985
- this.error = '';
986
- }
987
- this.mrdChange.emit({ name: this.name, value: val });
988
- }
989
- };
990
- this.handleBlur = () => {
991
- const val = this.multiple ? this.selected : this.value;
992
- this.mrdBlur.emit({ name: this.name, value: val });
993
- };
994
- this.toggleCheckbox = (key) => {
995
- if (this.selected.includes(key)) {
996
- this.selected = this.selected.filter(v => v !== key);
997
- }
998
- else {
999
- this.selected = [...this.selected, key];
1000
- }
1001
- if (this.required && !validateRequired(this.selected)) {
1002
- this.error = format.t('required', this.locale);
1003
- }
1004
- else {
1005
- this.error = '';
1006
- }
1007
- this.mrdChange.emit({ name: this.name, value: this.selected });
1008
- };
1009
- }
1010
- componentWillLoad() {
1011
- if (this.multiple) {
1012
- this.selected = Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
1013
- }
1014
- }
1015
- getContrastColor(bgColor) {
1016
- if (!bgColor)
1017
- return '#000000';
1018
- const hex = bgColor.replace('#', '');
1019
- const r = parseInt(hex.substr(0, 2), 16);
1020
- const g = parseInt(hex.substr(2, 2), 16);
1021
- const b = parseInt(hex.substr(4, 2), 16);
1022
- const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
1023
- return luminance > 0.5 ? '#000000' : '#ffffff';
1024
- }
1025
- render() {
1026
- var _a, _b;
1027
- const hasError = !!this.error;
1028
- const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
1029
- if (this.multiple) {
1030
- 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 => {
1031
- var _a, _b;
1032
- 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)));
1033
- })), hasError && index.h("span", { class: "mrd-list-field__error" }, this.error))));
1034
- }
1035
- 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 => {
1036
- var _a, _b;
1037
- const bg = (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : null;
1038
- const style = bg ? { backgroundColor: bg, color: this.getContrastColor(bg) } : {};
1039
- return (index.h("option", { key: lv.key, value: lv.key, selected: lv.key === currentValue, style: style }, lv.label));
1040
- })), hasError && index.h("span", { class: "mrd-list-field__error" }, this.error))));
1041
- }
1042
- };
1043
- MrdListField.style = mrdListFieldScss();
1044
-
1045
- 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)}`;
1046
-
1047
- const MrdNumberField = class {
1048
- constructor(hostRef) {
1049
- index.registerInstance(this, hostRef);
1050
- this.mrdChange = index.createEvent(this, "mrdChange");
1051
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1052
- this.name = '';
1053
- this.label = '';
1054
- this.value = null;
1055
- this.placeholder = '';
1056
- this.required = false;
1057
- this.disabled = false;
1058
- this.locale = navigator.language;
1059
- this.dataType = index$1.ClientLayoutItemFieldDataType.INTEGER;
1060
- this.decimalPrecision = 2;
1061
- this.displayValue = '';
1062
- this.error = '';
1063
- this.handleInput = (e) => {
1064
- this.displayValue = e.target.value;
1065
- };
1066
- this.handleBlur = (e) => {
1067
- const raw = e.target.value;
1068
- const parsed = format.parseLocalizedNumber(raw, this.locale);
1069
- if (this.required && (parsed === null || raw === '')) {
1070
- this.error = format.t('required', this.locale);
1071
- }
1072
- else if (raw !== '' && !validateNumber(parsed, this.dataType)) {
1073
- this.error = format.t('invalid_number', this.locale);
1074
- }
1075
- else {
1076
- this.error = '';
1077
- }
1078
- if (parsed !== null && validateRequired(raw)) {
1079
- this.displayValue = this.formatForDisplay(parsed);
1080
- }
1081
- this.mrdChange.emit({ name: this.name, value: parsed });
1082
- this.mrdBlur.emit({ name: this.name, value: parsed });
1083
- };
1084
- this.handleFocus = () => {
1085
- // Show raw number on focus
1086
- if (this.value !== null && this.value !== undefined) {
1087
- const str = String(this.value);
1088
- this.displayValue = str;
1089
- }
1090
- };
1091
- }
1092
- componentWillLoad() {
1093
- if (this.value !== null && this.value !== undefined) {
1094
- this.displayValue = this.formatForDisplay(this.value);
1095
- }
1096
- }
1097
- formatForDisplay(val) {
1098
- if (this.dataType === index$1.ClientLayoutItemFieldDataType.PERCENTAGE) {
1099
- return format.formatNumber(val, this.locale, {
1100
- minimumFractionDigits: 0,
1101
- maximumFractionDigits: this.decimalPrecision,
1102
- }) + '%';
1103
- }
1104
- if (this.dataType === index$1.ClientLayoutItemFieldDataType.DECIMAL) {
1105
- return format.formatNumber(val, this.locale, {
1106
- minimumFractionDigits: this.decimalPrecision,
1107
- maximumFractionDigits: this.decimalPrecision,
1108
- });
1109
- }
1110
- return format.formatNumber(val, this.locale, { maximumFractionDigits: 0 });
1111
- }
1112
- render() {
1113
- const hasError = !!this.error;
1114
- const suffix = this.dataType === index$1.ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
1115
- this.dataType === index$1.ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
1116
- return (index.h(index.Host, { key: '68d81012d9180dde4160a507121b83f04698834a' }, index.h("div", { key: 'b8e46f6d23527b2c95ad2738fc63a07adfce4fda', class: "mrd-number-field" }, this.label && (index.h("label", { key: 'c3271c7a8adfd8bcb3b4f51e580239f928a354a5', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'c46b69affd1e22c539511f6743b6d23fe73fb079', class: "mrd-number-field__input-wrapper" }, index.h("input", { key: 'e68188829c2e03c947c5605332a2681de550a0d5', 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: 'bdc2723e2547517765bd64ad70c5103c7a2b363c', class: "mrd-number-field__error" }, this.error))));
1117
- }
1118
- };
1119
- MrdNumberField.style = mrdNumberFieldScss();
1120
-
1121
- 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)}`;
1122
-
1123
- const MrdRelationField = class {
1124
- constructor(hostRef) {
1125
- index.registerInstance(this, hostRef);
1126
- this.mrdChange = index.createEvent(this, "mrdChange");
1127
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1128
- this.mrdSearch = index.createEvent(this, "mrdSearch");
1129
- this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
1130
- this.name = '';
1131
- this.label = '';
1132
- this.required = false;
1133
- this.disabled = false;
1134
- this.locale = navigator.language;
1135
- this.relatedClass = '';
1136
- /** When set, used instead of relatedClass for search queries (mostSignificantClass from API). */
1137
- this.mostSignificantClass = '';
1138
- this.displayType = index$1.ClientLayoutItemRelationDisplayType.SEARCH;
1139
- this.multiple = false;
1140
- this.dropdownValues = [];
1141
- /** Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record. */
1142
- this.value = null;
1143
- this.searchQuery = '';
1144
- this.searchResults = [];
1145
- this.allRecords = [];
1146
- this.isLoading = false;
1147
- this.selectedItems = [];
1148
- this.showResults = false;
1149
- this.error = '';
1150
- this.highlightedIndex = -1;
1151
- this.searchDebounce = null;
1152
- this.handleKeyDown = (e) => {
1153
- if (!this.showResults || this.searchResults.length === 0) {
1154
- if (e.key === 'Escape') {
1155
- this.showResults = false;
1156
- this.highlightedIndex = -1;
1157
- }
1158
- return;
1159
- }
1160
- if (e.key === 'ArrowDown') {
1161
- e.preventDefault();
1162
- this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.searchResults.length - 1);
1163
- }
1164
- else if (e.key === 'ArrowUp') {
1165
- e.preventDefault();
1166
- this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
1167
- }
1168
- else if (e.key === 'Enter') {
1169
- e.preventDefault();
1170
- if (this.highlightedIndex >= 0) {
1171
- this.handleResultSelect(this.searchResults[this.highlightedIndex]);
1172
- }
1173
- }
1174
- else if (e.key === 'Escape') {
1175
- this.showResults = false;
1176
- this.highlightedIndex = -1;
1177
- }
1178
- };
1179
- this.clearSelection = () => {
1180
- this.selectedItems = [];
1181
- this.searchQuery = '';
1182
- this.searchResults = [];
1183
- this.showResults = false;
1184
- this.highlightedIndex = -1;
1185
- this.mrdChange.emit({ name: this.name, value: this.multiple ? [] : null });
1186
- };
1187
- this.handleSearchInput = (e) => {
1188
- const query = e.target.value;
1189
- this.searchQuery = query;
1190
- if (this.searchDebounce)
1191
- clearTimeout(this.searchDebounce);
1192
- if (query.trim().length >= 2) {
1193
- this.isLoading = true;
1194
- this.showResults = true;
1195
- this.searchDebounce = setTimeout(() => {
1196
- this.mrdSearch.emit({ name: this.name, query, relatedClass: this.mostSignificantClass });
1197
- }, 300);
1198
- }
1199
- else {
1200
- this.searchResults = [];
1201
- this.showResults = false;
1202
- this.isLoading = false;
1203
- }
1204
- };
1205
- this.handleResultSelect = (result) => {
1206
- if (this.multiple) {
1207
- if (!this.selectedItems.find(i => i.id === result.id)) {
1208
- this.selectedItems = [...this.selectedItems, result];
1209
- }
1210
- this.searchQuery = '';
1211
- this.searchResults = [];
1212
- this.showResults = false;
1213
- const ids = this.selectedItems.map(i => i.id);
1214
- this.mrdChange.emit({ name: this.name, value: ids });
1215
- }
1216
- else {
1217
- this.selectedItems = [result];
1218
- this.searchQuery = result.label;
1219
- this.showResults = false;
1220
- this.mrdChange.emit({ name: this.name, value: result.id });
1221
- }
1222
- if (this.required && !validateRequired(this.selectedItems)) {
1223
- this.error = format.t('required', this.locale);
1224
- }
1225
- else {
1226
- this.error = '';
1227
- }
1228
- };
1229
- this.handleRemoveSelected = (id) => {
1230
- this.selectedItems = this.selectedItems.filter(i => i.id !== id);
1231
- const ids = this.selectedItems.map(i => i.id);
1232
- this.mrdChange.emit({ name: this.name, value: this.multiple ? ids : null });
1233
- };
1234
- this.handleDropdownChange = (e) => {
1235
- const val = e.target.value;
1236
- if (this.required && !validateRequired(val)) {
1237
- this.error = format.t('required', this.locale);
1238
- }
1239
- else {
1240
- this.error = '';
1241
- }
1242
- this.mrdChange.emit({ name: this.name, value: val });
1243
- };
1244
- this.handleBlur = () => {
1245
- var _a, _b;
1246
- setTimeout(() => {
1247
- this.showResults = false;
1248
- this.highlightedIndex = -1;
1249
- }, 200);
1250
- 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);
1251
- this.mrdBlur.emit({ name: this.name, value: val });
1252
- };
1253
- }
1254
- async setAllRecords(records) {
1255
- this.allRecords = records;
1256
- }
1257
- getValueHref() {
1258
- var _a, _b, _c;
1259
- const v = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
1260
- if (!v)
1261
- return '';
1262
- if (typeof v === 'object')
1263
- return (_c = v.id) !== null && _c !== void 0 ? _c : '';
1264
- return v;
1265
- }
1266
- allRecordsChanged() {
1267
- if (this.editBehavior !== index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN)
1268
- return;
1269
- const current = this.getValueHref();
1270
- if (!current)
1271
- return;
1272
- // Defer past Stencil's async render cycle: options must exist in the DOM before
1273
- // select.value can be set. setAttribute('selected') alone is ignored by browsers
1274
- // when the select already has an established value.
1275
- setTimeout(() => {
1276
- var _a;
1277
- const select = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector('select');
1278
- if (select)
1279
- select.value = current;
1280
- }, 0);
1281
- }
1282
- async setSearchResults(results) {
1283
- this.searchResults = results;
1284
- this.isLoading = false;
1285
- this.showResults = true;
1286
- this.highlightedIndex = -1;
1287
- }
1288
- async setLoading(loading) {
1289
- this.isLoading = loading;
1290
- }
1291
- componentWillLoad() {
1292
- var _a;
1293
- // Pre-fill selectedItems when value is passed as { id, label } objects
1294
- // (e.g. when editing an existing record fetched from the API).
1295
- if (this.value) {
1296
- if (Array.isArray(this.value)) {
1297
- if (this.value.length > 0 && typeof this.value[0] === 'object') {
1298
- this.selectedItems = this.value;
1299
- this.searchQuery = '';
1300
- }
1301
- }
1302
- else if (typeof this.value === 'object') {
1303
- this.selectedItems = [this.value];
1304
- this.searchQuery = (_a = this.value.label) !== null && _a !== void 0 ? _a : '';
1305
- }
1306
- }
1307
- }
1308
- componentDidLoad() {
1309
- // Only emit when there is no commonRelation dependency — the form orchestrates those.
1310
- if (this.editBehavior === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN && !this.commonRelation) {
1311
- // Defer to next tick so parent event listeners are registered after DOM patching
1312
- setTimeout(() => {
1313
- this.mrdFetchAll.emit({
1314
- name: this.name,
1315
- relatedClass: this.relatedClass,
1316
- mostSignificantClass: this.mostSignificantClass || undefined,
1317
- });
1318
- }, 0);
1319
- }
1320
- }
1321
- render() {
1322
- var _a, _b;
1323
- const hasError = !!this.error;
1324
- if (this.editBehavior === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN) {
1325
- const currentValue = this.getValueHref();
1326
- 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))));
1327
- }
1328
- if (this.displayType === index$1.ClientLayoutItemRelationDisplayType.DROPDOWN) {
1329
- const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
1330
- 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))));
1331
- }
1332
- // SEARCH mode
1333
- const labelEl = this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label));
1334
- // Single selection: show selected value as a badge, hide the search input
1335
- if (!this.multiple && this.selectedItems.length > 0) {
1336
- 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))));
1337
- }
1338
- 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))));
1339
- }
1340
- get el() { return index.getElement(this); }
1341
- static get watchers() { return {
1342
- "allRecords": [{
1343
- "allRecordsChanged": 0
1344
- }]
1345
- }; }
1346
- };
1347
- MrdRelationField.style = mrdRelationFieldScss();
1348
-
1349
- 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)}`;
1350
-
1351
- const MrdTextField = class {
1352
- constructor(hostRef) {
1353
- index.registerInstance(this, hostRef);
1354
- this.mrdChange = index.createEvent(this, "mrdChange");
1355
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1356
- this.name = '';
1357
- this.label = '';
1358
- this.value = '';
1359
- this.placeholder = '';
1360
- this.required = false;
1361
- this.disabled = false;
1362
- this.locale = navigator.language;
1363
- this.error = '';
1364
- this.handleInput = (e) => {
1365
- const val = e.target.value;
1366
- this.mrdChange.emit({ name: this.name, value: val });
1367
- };
1368
- this.handleBlur = (e) => {
1369
- const val = e.target.value;
1370
- if (this.required && !validateRequired(val)) {
1371
- this.error = format.t('required', this.locale);
1372
- }
1373
- else {
1374
- this.error = '';
1375
- }
1376
- this.mrdBlur.emit({ name: this.name, value: val });
1377
- };
1378
- }
1379
- render() {
1380
- const hasError = !!this.error;
1381
- return (index.h(index.Host, { key: '4ddbcb2f8915235631c6f66449b28e664c24c0a4' }, index.h("div", { key: '91dbb52ed715c92d4ef2bc0924fd378d0dc839a8', class: "mrd-text-field" }, this.label && (index.h("label", { key: 'cf3278503107d313c08034273916a4b84a16febd', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), index.h("input", { key: '9ab992213bfaa372e453331e1b1e12a853c3ae6e', 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: 'a4ff2fdd2490f644eb97f66f15edc5af0b22e823', class: "mrd-text-field__error" }, this.error))));
1382
- }
1383
- };
1384
- MrdTextField.style = mrdTextFieldScss();
1385
-
1386
- 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)}`;
1387
-
1388
- const MrdTextareaField = class {
1389
- constructor(hostRef) {
1390
- index.registerInstance(this, hostRef);
1391
- this.mrdChange = index.createEvent(this, "mrdChange");
1392
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1393
- this.name = '';
1394
- this.label = '';
1395
- this.value = '';
1396
- this.placeholder = '';
1397
- this.required = false;
1398
- this.disabled = false;
1399
- this.locale = navigator.language;
1400
- this.error = '';
1401
- this.editorReady = false;
1402
- }
1403
- componentDidLoad() {
1404
- this.initQuill();
1405
- }
1406
- async initQuill() {
1407
- try {
1408
- // Dynamically import Quill
1409
- const Quill = (await Promise.resolve().then(function () { return require('./quill-DmFfnC1f.js'); })).default;
1410
- this.editorEl = this.el.querySelector('.mrd-textarea-field__editor');
1411
- if (!this.editorEl)
1412
- return;
1413
- const quill = new Quill(this.editorEl, {
1414
- theme: 'snow',
1415
- placeholder: this.placeholder,
1416
- readOnly: this.disabled,
1417
- modules: {
1418
- toolbar: [
1419
- ['bold', 'italic', 'underline', 'strike'],
1420
- [{ list: 'ordered' }, { list: 'bullet' }],
1421
- [{ header: [1, 2, 3, false] }],
1422
- ['link'],
1423
- ['clean'],
1424
- ],
1425
- },
1426
- });
1427
- if (this.value) {
1428
- quill.clipboard.dangerouslyPasteHTML(this.value);
1429
- }
1430
- quill.on('text-change', () => {
1431
- var _a, _b;
1432
- const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
1433
- this.mrdChange.emit({ name: this.name, value: html });
1434
- });
1435
- quill.on('selection-change', (range) => {
1436
- var _a, _b;
1437
- if (!range) {
1438
- const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
1439
- if (this.required && !validateRequired(html)) {
1440
- this.error = format.t('required', this.locale);
1441
- }
1442
- else {
1443
- this.error = '';
1444
- }
1445
- this.mrdBlur.emit({ name: this.name, value: html });
1446
- }
1447
- });
1448
- this.editorReady = true;
1449
- }
1450
- catch (err) {
1451
- console.error('Failed to load Quill editor:', err);
1452
- }
1453
- }
1454
- render() {
1455
- return (index.h(index.Host, { key: '8f7544745341ea2eca4450296db53ed8b41af0e2' }, index.h("div", { key: '62937448dd685071e0500b8f7f53fe22b10ffa15', class: "mrd-textarea-field" }, this.label && (index.h("label", { key: '4a7d807d78c2a9abeaf3ff94ee5e71b167475e25', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), index.h("div", { key: '599e28a45b1c161d7cfec3de138e386bf997f9b9', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, index.h("div", { key: '5824a225fa6ea29bf02dfd8e4b27a71e853f059e', class: "mrd-textarea-field__editor" })), this.error && index.h("span", { key: '1c7693269df8f3fe112a6df419e6cbace75bdaa9', class: "mrd-textarea-field__error" }, this.error))));
1456
- }
1457
- get el() { return index.getElement(this); }
1458
- };
1459
- MrdTextareaField.style = mrdTextareaFieldScss();
1460
-
1461
- 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)}`;
1462
-
1463
- const MrdTimeField = class {
1464
- constructor(hostRef) {
1465
- index.registerInstance(this, hostRef);
1466
- this.mrdChange = index.createEvent(this, "mrdChange");
1467
- this.mrdBlur = index.createEvent(this, "mrdBlur");
1468
- this.name = '';
1469
- this.label = '';
1470
- this.value = '';
1471
- this.required = false;
1472
- this.disabled = false;
1473
- this.locale = navigator.language;
1474
- this.error = '';
1475
- this.handleChange = (e) => {
1476
- const val = e.target.value;
1477
- if (this.required && !validateRequired(val)) {
1478
- this.error = format.t('required', this.locale);
1479
- }
1480
- else {
1481
- this.error = '';
1482
- }
1483
- this.mrdChange.emit({ name: this.name, value: val });
1484
- };
1485
- this.handleBlur = (e) => {
1486
- const val = e.target.value;
1487
- this.mrdBlur.emit({ name: this.name, value: val });
1488
- };
1489
- }
1490
- render() {
1491
- const hasError = !!this.error;
1492
- return (index.h(index.Host, { key: '0a6e3047eb409b50a7dfa46c724e0d9824bdbad9' }, index.h("div", { key: '1fdcaa9cc0e44edd514d3453df0cfb264989cbca', class: "mrd-time-field" }, this.label && (index.h("label", { key: 'ae53864761258ae56e29474c2da68c852fe8db57', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), index.h("input", { key: '60336f497545b61656756790cfb5ec096034ecf7', 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: 'f8409b690c67873f6e4fe10f1d404b57005f0557', class: "mrd-time-field__error" }, this.error))));
1493
- }
1494
- };
1495
- MrdTimeField.style = mrdTimeFieldScss();
1496
-
1497
- exports.mrd_boolean_field = MrdBooleanField;
1498
- exports.mrd_currency_field = MrdCurrencyField;
1499
- exports.mrd_date_field = MrdDateField;
1500
- exports.mrd_datetime_field = MrdDatetimeField;
1501
- exports.mrd_email_field = MrdEmailField;
1502
- exports.mrd_field = MrdField;
1503
- exports.mrd_file_field = MrdFileField;
1504
- exports.mrd_form = MrdForm;
1505
- exports.mrd_hyperlink_field = MrdHyperlinkField;
1506
- exports.mrd_image_field = MrdImageField;
1507
- exports.mrd_list_field = MrdListField;
1508
- exports.mrd_number_field = MrdNumberField;
1509
- exports.mrd_relation_field = MrdRelationField;
1510
- exports.mrd_text_field = MrdTextField;
1511
- exports.mrd_textarea_field = MrdTextareaField;
1512
- exports.mrd_time_field = MrdTimeField;