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