@mmlogic/components 0.4.1 → 0.4.3
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/cjs/index.cjs.js +8 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mosterdcomponents.cjs.js +1 -1
- package/dist/cjs/{mrd-boolean-field_23.cjs.entry.js → mrd-boolean-field_24.cjs.entry.js} +269 -50
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/documents/mrd-document-container/mrd-document-container.css +14 -1
- package/dist/collection/components/documents/mrd-document-container/mrd-document-container.js +30 -8
- package/dist/collection/components/documents/mrd-document-list/mrd-document-list.css +8 -5
- package/dist/collection/components/documents/mrd-document-list/mrd-document-list.js +28 -11
- package/dist/collection/components/documents/mrd-document-list/tree-view.js +14 -2
- package/dist/collection/components/documents/mrd-document-view/mrd-document-view.css +39 -29
- package/dist/collection/components/documents/mrd-document-view/mrd-document-view.js +109 -8
- package/dist/collection/components/documents/mrd-file-preview/file-preview-kind.js +30 -0
- package/dist/collection/components/documents/mrd-file-preview/mrd-file-preview.css +59 -0
- package/dist/collection/components/documents/mrd-file-preview/mrd-file-preview.js +212 -0
- package/dist/collection/components/fields/mrd-boolean-field/mrd-boolean-field.js +1 -1
- package/dist/collection/components/fields/mrd-currency-field/mrd-currency-field.js +1 -1
- package/dist/collection/components/fields/mrd-date-field/mrd-date-field.js +1 -1
- package/dist/collection/components/fields/mrd-datetime-field/mrd-datetime-field.js +1 -1
- package/dist/collection/components/fields/mrd-email-field/mrd-email-field.js +1 -1
- package/dist/collection/components/fields/mrd-file-field/mrd-file-field.js +1 -1
- package/dist/collection/components/fields/mrd-image-field/mrd-image-field.js +1 -1
- package/dist/collection/components/fields/mrd-longtext-field/mrd-longtext-field.js +1 -1
- package/dist/collection/components/fields/mrd-number-field/mrd-number-field.js +1 -1
- package/dist/collection/components/fields/mrd-secret-field/mrd-secret-field.js +2 -2
- package/dist/collection/components/fields/mrd-text-field/mrd-text-field.js +1 -1
- package/dist/collection/components/fields/mrd-textarea-field/mrd-textarea-field.js +1 -1
- package/dist/collection/components/fields/mrd-time-field/mrd-time-field.js +1 -1
- package/dist/collection/components/layout/mrd-layout-section/mrd-layout-section.css +5 -0
- package/dist/collection/components/layout/mrd-layout-section/mrd-layout-section.js +99 -9
- package/dist/collection/components/table/mrd-table/mrd-table.js +19 -5
- package/dist/collection/dev/api.js +9 -0
- package/dist/collection/dev/app.js +105 -6
- package/dist/collection/dev/example-data.js +24 -0
- package/dist/collection/types/client-layout.js +8 -0
- package/dist/collection/utils/i18n.js +32 -0
- package/dist/collection/utils/query-params.js +0 -4
- package/dist/components/client-layout.js +1 -1
- package/dist/components/i18n.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/mrd-boolean-field2.js +1 -1
- package/dist/components/mrd-currency-field2.js +1 -1
- package/dist/components/mrd-date-field2.js +1 -1
- package/dist/components/mrd-datetime-field2.js +1 -1
- package/dist/components/mrd-document-container2.js +1 -1
- package/dist/components/mrd-document-list2.js +1 -1
- package/dist/components/mrd-document-view2.js +1 -1
- package/dist/components/mrd-email-field2.js +1 -1
- package/dist/components/mrd-file-field2.js +1 -1
- package/dist/components/mrd-file-preview.d.ts +11 -0
- package/dist/components/mrd-file-preview.js +1 -0
- package/dist/components/mrd-file-preview2.js +1 -0
- package/dist/components/mrd-image-field2.js +1 -1
- package/dist/components/mrd-layout-section.js +1 -1
- package/dist/components/mrd-longtext-field2.js +1 -1
- package/dist/components/mrd-number-field2.js +1 -1
- package/dist/components/mrd-secret-field2.js +1 -1
- package/dist/components/mrd-table2.js +1 -1
- package/dist/components/mrd-text-field2.js +1 -1
- package/dist/components/mrd-textarea-field2.js +1 -1
- package/dist/components/mrd-time-field2.js +1 -1
- package/dist/esm/index.js +9 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mosterdcomponents.js +1 -1
- package/dist/esm/{mrd-boolean-field_23.entry.js → mrd-boolean-field_24.entry.js} +270 -52
- package/dist/mosterdcomponents/index.esm.js +1 -1
- package/dist/mosterdcomponents/mosterdcomponents.esm.js +1 -1
- package/dist/mosterdcomponents/p-e816d459.entry.js +1 -0
- package/dist/types/components/documents/mrd-document-container/mrd-document-container.d.ts +8 -2
- package/dist/types/components/documents/mrd-document-list/mrd-document-list.d.ts +8 -1
- package/dist/types/components/documents/mrd-document-list/tree-view.d.ts +1 -1
- package/dist/types/components/documents/mrd-document-view/mrd-document-view.d.ts +29 -1
- package/dist/types/components/documents/mrd-file-preview/file-preview-kind.d.ts +9 -0
- package/dist/types/components/documents/mrd-file-preview/mrd-file-preview.d.ts +41 -0
- package/dist/types/components/layout/mrd-layout-section/mrd-layout-section.d.ts +19 -1
- package/dist/types/components/table/mrd-table/mrd-table.d.ts +8 -2
- package/dist/types/components.d.ts +186 -13
- package/dist/types/index.d.ts +1 -0
- package/dist/types/types/client-layout.d.ts +10 -0
- package/dist/types/utils/query-params.d.ts +14 -0
- package/package.json +1 -1
- package/dist/mosterdcomponents/p-b1a2e108.entry.js +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, w as writeTask } from './index-DiSEJMA8.js';
|
|
2
|
-
import { ClientLayoutItemFieldDataType, ClientLayoutItemType, ClientLayoutItemRelationDisplayType, ClientLayoutItemRelationEditBehavior, resolveArchetype, ARCHETYPE_DOCUMENT } from './index.js';
|
|
2
|
+
import { ClientLayoutItemFieldDataType, ClientLayoutNavigateBehaviour, ClientLayoutItemType, ClientLayoutItemRelationDisplayType, ClientLayoutItemRelationEditBehavior, resolveArchetype, ARCHETYPE_DOCUMENT } from './index.js';
|
|
3
3
|
|
|
4
4
|
const mrdBooleanFieldCss = () => `.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)}`;
|
|
5
5
|
|
|
@@ -27,7 +27,7 @@ const MrdBooleanField = class {
|
|
|
27
27
|
this.checked = !!this.value;
|
|
28
28
|
}
|
|
29
29
|
render() {
|
|
30
|
-
return (h(Host, { key: '
|
|
30
|
+
return (h(Host, { key: 'c0e92a50b1512d7b7f36f151b34bcb5b9497ca59' }, h("div", { key: 'e3f70c88321d8e72784b81092a9ebc0451ba330d', class: "mrd-boolean-field" }, h("label", { key: '3e6d907b72a5e1da7e268685c67811ebf264d5d8', class: "mrd-boolean-field__toggle-label" }, h("input", { key: '2b6df62a72cba19aa26374a2448c26666e28b03d', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h("span", { key: '77cbe5c1a25153de745f5e91eef589f40cb3237d', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: '34daaa269ed64ed3be71ecfd15d79eb42d746247', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
33
|
MrdBooleanField.style = mrdBooleanFieldCss();
|
|
@@ -179,6 +179,10 @@ const translations = {
|
|
|
179
179
|
folder_no_slash: "Een foldernaam mag geen '/' bevatten",
|
|
180
180
|
folder_duplicate: 'Er bestaat al een folder met deze naam',
|
|
181
181
|
doc_empty_drop: 'Nog geen documenten — sleep bestanden hierheen',
|
|
182
|
+
// mrd-file-preview
|
|
183
|
+
preview_unsupported: 'Geen voorbeeld beschikbaar voor dit bestandstype',
|
|
184
|
+
preview_error: 'Voorbeeld laden mislukt',
|
|
185
|
+
retry: 'Opnieuw proberen',
|
|
182
186
|
},
|
|
183
187
|
en: {
|
|
184
188
|
required: 'This field is required',
|
|
@@ -253,6 +257,10 @@ const translations = {
|
|
|
253
257
|
folder_no_slash: "A folder name cannot contain '/'",
|
|
254
258
|
folder_duplicate: 'A folder with this name already exists',
|
|
255
259
|
doc_empty_drop: 'No documents yet — drop files here',
|
|
260
|
+
// mrd-file-preview
|
|
261
|
+
preview_unsupported: 'No preview available for this file type',
|
|
262
|
+
preview_error: 'Failed to load preview',
|
|
263
|
+
retry: 'Retry',
|
|
256
264
|
},
|
|
257
265
|
ar: {
|
|
258
266
|
required: 'هذا الحقل مطلوب',
|
|
@@ -321,6 +329,10 @@ const translations = {
|
|
|
321
329
|
history_until: 'حتى',
|
|
322
330
|
history_badge_tooltip: 'القيم السابقة',
|
|
323
331
|
hyperlink_name: 'نص الرابط (اختياري)',
|
|
332
|
+
// mrd-file-preview
|
|
333
|
+
preview_unsupported: 'لا تتوفر معاينة لهذا النوع من الملفات',
|
|
334
|
+
preview_error: 'فشل تحميل المعاينة',
|
|
335
|
+
retry: 'إعادة المحاولة',
|
|
324
336
|
},
|
|
325
337
|
fr: {
|
|
326
338
|
required: 'Ce champ est obligatoire',
|
|
@@ -389,6 +401,10 @@ const translations = {
|
|
|
389
401
|
history_until: "jusqu'au",
|
|
390
402
|
history_badge_tooltip: 'Valeurs précédentes',
|
|
391
403
|
hyperlink_name: 'Texte du lien (optionnel)',
|
|
404
|
+
// mrd-file-preview
|
|
405
|
+
preview_unsupported: "Aucun aperçu disponible pour ce type de fichier",
|
|
406
|
+
preview_error: "Échec du chargement de l'aperçu",
|
|
407
|
+
retry: 'Réessayer',
|
|
392
408
|
},
|
|
393
409
|
de: {
|
|
394
410
|
required: 'Dieses Feld ist erforderlich',
|
|
@@ -457,6 +473,10 @@ const translations = {
|
|
|
457
473
|
history_until: 'bis',
|
|
458
474
|
history_badge_tooltip: 'Vorherige Werte',
|
|
459
475
|
hyperlink_name: 'Linktext (optional)',
|
|
476
|
+
// mrd-file-preview
|
|
477
|
+
preview_unsupported: 'Keine Vorschau für diesen Dateityp verfügbar',
|
|
478
|
+
preview_error: 'Vorschau konnte nicht geladen werden',
|
|
479
|
+
retry: 'Erneut versuchen',
|
|
460
480
|
},
|
|
461
481
|
es: {
|
|
462
482
|
required: 'Este campo es obligatorio',
|
|
@@ -525,6 +545,10 @@ const translations = {
|
|
|
525
545
|
history_until: 'hasta',
|
|
526
546
|
history_badge_tooltip: 'Valores anteriores',
|
|
527
547
|
hyperlink_name: 'Texto del enlace (opcional)',
|
|
548
|
+
// mrd-file-preview
|
|
549
|
+
preview_unsupported: 'Vista previa no disponible para este tipo de archivo',
|
|
550
|
+
preview_error: 'Error al cargar la vista previa',
|
|
551
|
+
retry: 'Reintentar',
|
|
528
552
|
},
|
|
529
553
|
it: {
|
|
530
554
|
required: 'Questo campo è obbligatorio',
|
|
@@ -593,6 +617,10 @@ const translations = {
|
|
|
593
617
|
history_until: 'fino a',
|
|
594
618
|
history_badge_tooltip: 'Valori precedenti',
|
|
595
619
|
hyperlink_name: 'Testo del collegamento (opzionale)',
|
|
620
|
+
// mrd-file-preview
|
|
621
|
+
preview_unsupported: 'Nessuna anteprima disponibile per questo tipo di file',
|
|
622
|
+
preview_error: "Impossibile caricare l'anteprima",
|
|
623
|
+
retry: 'Riprova',
|
|
596
624
|
},
|
|
597
625
|
uk: {
|
|
598
626
|
required: "Це поле обов'язкове",
|
|
@@ -661,6 +689,10 @@ const translations = {
|
|
|
661
689
|
history_until: 'до',
|
|
662
690
|
history_badge_tooltip: 'Попередні значення',
|
|
663
691
|
hyperlink_name: "Текст посилання (необов'язково)",
|
|
692
|
+
// mrd-file-preview
|
|
693
|
+
preview_unsupported: 'Попередній перегляд недоступний для цього типу файлу',
|
|
694
|
+
preview_error: 'Не вдалося завантажити попередній перегляд',
|
|
695
|
+
retry: 'Повторити',
|
|
664
696
|
},
|
|
665
697
|
};
|
|
666
698
|
function t(key, locale) {
|
|
@@ -781,7 +813,7 @@ const MrdCurrencyField = class {
|
|
|
781
813
|
}
|
|
782
814
|
render() {
|
|
783
815
|
const hasError = !!this.error;
|
|
784
|
-
return (h(Host, { key: '
|
|
816
|
+
return (h(Host, { key: '7265395c3b93c3b4daf4c4221da13e01b2fed2e8' }, h("div", { key: 'e644b67a7aba6e8f5b7175f5f79a4bf5e99cb611', class: "mrd-currency-field" }, h(FieldLabel, { key: 'd47a215c0684aea8a3253ae6edc4628d20733d90', base: "mrd-currency-field", label: this.label, required: this.required }), h("div", { key: 'b8f67f8188ad9cd8ba2b6869fcb2b4cd413dec32', class: "mrd-currency-field__row" }, h("input", { key: '8d643424d8932d11ceea0435353c54bc9399c187', class: controlClass('mrd-currency-field', hasError, 'amount'), 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 }), h("select", { key: '55b12e960646c2420883df848ae440d45f808300', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), h(FieldError, { key: 'd0a6adbb83af8fde047eff22c8efd9bbe1ae638f', base: "mrd-currency-field", error: this.error }))));
|
|
785
817
|
}
|
|
786
818
|
};
|
|
787
819
|
MrdCurrencyField.style = mrdCurrencyFieldCss();
|
|
@@ -811,7 +843,7 @@ const MrdDateField = class {
|
|
|
811
843
|
};
|
|
812
844
|
}
|
|
813
845
|
render() {
|
|
814
|
-
return (h(Host, { key: '
|
|
846
|
+
return (h(Host, { key: 'c0b9d684c5e0b5e3da785c383472ed5d6c13c39f' }, h("div", { key: '304c9b5c9570a369258f5f6fd0877a01a87d98d5', class: "mrd-date-field" }, h(FieldLabel, { key: '72c5ec21699a314920ea1217aee9a353bc8b4b7e', base: "mrd-date-field", label: this.label, required: this.required }), h("input", { key: 'be18df6c7e5fe89bf00cef38484711a9a685e0dc', class: controlClass('mrd-date-field', !!this.error), type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: 'f16ffb7e14f9ac9af4a34a96361a25dd4d738d68', base: "mrd-date-field", error: this.error }))));
|
|
815
847
|
}
|
|
816
848
|
};
|
|
817
849
|
MrdDateField.style = mrdDateFieldCss();
|
|
@@ -868,7 +900,7 @@ const MrdDatetimeField = class {
|
|
|
868
900
|
return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
|
|
869
901
|
}
|
|
870
902
|
render() {
|
|
871
|
-
return (h(Host, { key: '
|
|
903
|
+
return (h(Host, { key: '0ee285553f3d5e1a9984619795543d67d581c76f' }, h("div", { key: '2c93dffe3701da9099f4b34a9d7c1d0619fa824e', class: "mrd-datetime-field" }, h(FieldLabel, { key: 'ebda087fdcb2a956933758e6250a8e4dc0484ef9', base: "mrd-datetime-field", label: this.label, required: this.required }), h("input", { key: '06b012fc78c76e3b08ef24af5e134aa691975285', class: controlClass('mrd-datetime-field', !!this.error), type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '54e7acdd051c00893eb17cbf4911917fceddb54f', base: "mrd-datetime-field", error: this.error }))));
|
|
872
904
|
}
|
|
873
905
|
static get watchers() { return {
|
|
874
906
|
"value": [{
|
|
@@ -878,7 +910,7 @@ const MrdDatetimeField = class {
|
|
|
878
910
|
};
|
|
879
911
|
MrdDatetimeField.style = mrdDatetimeFieldCss();
|
|
880
912
|
|
|
881
|
-
const mrdDocumentContainerCss = () => `.sc-mrd-document-container-h{display:block}.mrd-document-container__toolbar.sc-mrd-document-container{display:flex;align-items:center;justify-content:flex-end;gap:var(--mrd-space-2);padding:var(--mrd-space-2) var(--mrd-
|
|
913
|
+
const mrdDocumentContainerCss = () => `.sc-mrd-document-container-h{display:block}.mrd-document-container__toolbar.sc-mrd-document-container{display:flex;align-items:center;justify-content:flex-end;gap:var(--mrd-space-2);padding:var(--mrd-space-2) 0;border-bottom:1px solid var(--mrd-color-neutral-100)}.mrd-document-container__body--tree.sc-mrd-document-container{border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);overflow:hidden}.mrd-document-container__action.sc-mrd-document-container{display:inline-flex;align-items:center;gap:var(--mrd-space-2);height:1.625rem;padding:0 var(--mrd-space-3);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-700);background:var(--mrd-color-white);border:1px solid var(--mrd-color-neutral-200);border-radius:var(--mrd-border-radius);cursor:pointer;transition:background var(--mrd-transition-fast), border-color var(--mrd-transition-fast)}.mrd-document-container__action.sc-mrd-document-container svg.sc-mrd-document-container{width:1rem;height:1rem;color:var(--mrd-color-folder)}.mrd-document-container__action.sc-mrd-document-container:hover:not(:disabled){background:var(--mrd-color-neutral-50);border-color:var(--mrd-color-neutral-300)}.mrd-document-container__action.sc-mrd-document-container:disabled{opacity:0.5;cursor:not-allowed}.mrd-document-container__seg.sc-mrd-document-container{display:inline-flex;gap:2px;padding:2px;background:var(--mrd-color-neutral-100);border-radius:var(--mrd-border-radius)}.mrd-document-container__seg-btn.sc-mrd-document-container{width:1.875rem;height:1.625rem;display:grid;place-items:center;border:none;background:none;border-radius:var(--mrd-border-radius-sm);color:var(--mrd-color-neutral-500);cursor:pointer;transition:color var(--mrd-transition-fast), background var(--mrd-transition-fast)}.mrd-document-container__seg-btn.sc-mrd-document-container:hover{color:var(--mrd-color-neutral-800)}.mrd-document-container__seg-btn[aria-pressed=true].sc-mrd-document-container{background:var(--mrd-color-white);color:var(--mrd-color-primary-dark);box-shadow:var(--mrd-shadow-sm)}.mrd-document-container__seg-btn.sc-mrd-document-container svg.sc-mrd-document-container{width:1rem;height:1rem}`;
|
|
882
914
|
|
|
883
915
|
const MrdDocumentContainer = class {
|
|
884
916
|
constructor(hostRef) {
|
|
@@ -949,7 +981,7 @@ const MrdDocumentContainer = class {
|
|
|
949
981
|
this.mrdLoadPage.emit(e.detail);
|
|
950
982
|
}, onMrdNavigate: (e) => {
|
|
951
983
|
e.stopPropagation();
|
|
952
|
-
this.mrdNavigate.emit(e.detail);
|
|
984
|
+
this.mrdNavigate.emit(Object.assign(Object.assign({}, e.detail), { navigateBehaviour: ClientLayoutNavigateBehaviour.OVERLAY_PAGE }));
|
|
953
985
|
}, onMrdCanCreate: (e) => {
|
|
954
986
|
e.stopPropagation();
|
|
955
987
|
this.canCreate = e.detail;
|
|
@@ -974,8 +1006,13 @@ const MrdDocumentContainer = class {
|
|
|
974
1006
|
}, onMrdRowClick: (e) => {
|
|
975
1007
|
var _a, _b, _c;
|
|
976
1008
|
e.stopPropagation();
|
|
977
|
-
const row = e.detail;
|
|
978
|
-
this.mrdNavigate.emit({
|
|
1009
|
+
const { row, listContext } = e.detail;
|
|
1010
|
+
this.mrdNavigate.emit({
|
|
1011
|
+
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,
|
|
1012
|
+
label: (_c = row === null || row === void 0 ? void 0 : row.name) !== null && _c !== void 0 ? _c : '',
|
|
1013
|
+
navigateBehaviour: ClientLayoutNavigateBehaviour.OVERLAY_PAGE,
|
|
1014
|
+
listContext,
|
|
1015
|
+
});
|
|
979
1016
|
}, onMrdAction: (e) => {
|
|
980
1017
|
e.stopPropagation();
|
|
981
1018
|
this.mrdAction.emit(e.detail);
|
|
@@ -983,16 +1020,15 @@ const MrdDocumentContainer = class {
|
|
|
983
1020
|
}
|
|
984
1021
|
render() {
|
|
985
1022
|
const treeMode = this.mode === 'tree';
|
|
986
|
-
return (h(Host, { key: '
|
|
1023
|
+
return (h(Host, { key: '7d0523d66f9a3d189dcc5517cd7281a57456977d' }, this.renderToolbar(), h("div", { key: '19b0f416d2ad1b093afd6f799670debf8c18b225', class: {
|
|
1024
|
+
'mrd-document-container__body': true,
|
|
1025
|
+
'mrd-document-container__body--tree': treeMode,
|
|
1026
|
+
}, style: treeMode ? { height: `${this.height}px`, overflowY: 'auto' } : {} }, treeMode ? this.renderTree() : this.renderList())));
|
|
987
1027
|
}
|
|
988
1028
|
get el() { return getElement(this); }
|
|
989
1029
|
};
|
|
990
1030
|
MrdDocumentContainer.style = mrdDocumentContainerCss();
|
|
991
1031
|
|
|
992
|
-
/**
|
|
993
|
-
* Shared path/query-param conventions for list requests,
|
|
994
|
-
* used by mrd-table and mrd-document-list.
|
|
995
|
-
*/
|
|
996
1032
|
/** Applies the view-level static filters to `params` using the API operator conventions. */
|
|
997
1033
|
function applyViewFilters(params, filters) {
|
|
998
1034
|
var _a, _b, _c;
|
|
@@ -1155,9 +1191,21 @@ function folderIcon() {
|
|
|
1155
1191
|
function docIcon() {
|
|
1156
1192
|
return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--doc", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("path", { d: "M14 2v6h6" })));
|
|
1157
1193
|
}
|
|
1194
|
+
/** Depth 0 renders no indent spacer at all — like Finder, the top-level
|
|
1195
|
+
* disclosure triangle sits in the row's own left margin instead of adding
|
|
1196
|
+
* an extra indent column before it. Nested levels still step in 18px each. */
|
|
1158
1197
|
function indent(depth) {
|
|
1198
|
+
if (depth === 0)
|
|
1199
|
+
return null;
|
|
1159
1200
|
return h("span", { class: "mrd-document-list__indent", style: { width: `${depth * 18}px` } });
|
|
1160
1201
|
}
|
|
1202
|
+
/** Pixel offset from the row's left edge to where the label text starts,
|
|
1203
|
+
* used to align the inline folder-name-error text under the label above it.
|
|
1204
|
+
* Mirrors the row's padding + (indent) + chevron + icon + gaps in tree-view.scss. */
|
|
1205
|
+
function labelOffset(depth) {
|
|
1206
|
+
const chevronAndIcon = 4 /* gap */ + 14 /* chevron */ + 4 /* gap */ + 17 /* icon */ + 4 /* gap */;
|
|
1207
|
+
return depth === 0 ? 8 + chevronAndIcon : 8 + depth * 18 + chevronAndIcon;
|
|
1208
|
+
}
|
|
1161
1209
|
function renderLoadingRow(ctx, depth) {
|
|
1162
1210
|
return (h("div", { class: "mrd-document-list__loading", key: "loading" }, indent(depth), h("span", { class: "mrd-document-list__spinner" }), t('loading', ctx.locale)));
|
|
1163
1211
|
}
|
|
@@ -1169,10 +1217,10 @@ function renderDocRow(ctx, doc, node, container, depth) {
|
|
|
1169
1217
|
const label = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc[ctx.titleField]) !== null && _a !== void 0 ? _a : doc === null || doc === void 0 ? void 0 : doc.name) !== null && _b !== void 0 ? _b : '';
|
|
1170
1218
|
const dateRaw = ctx.dateField ? doc === null || doc === void 0 ? void 0 : doc[ctx.dateField] : undefined;
|
|
1171
1219
|
const date = dateRaw ? formatDate(dateRaw, ctx.locale) : '';
|
|
1172
|
-
return (h("div", { class: "mrd-document-list__row mrd-document-list__row--doc", key: (_e = (_d = (_c = doc === null || doc === void 0 ? void 0 : doc._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : label, draggable: true, onClick: () => ctx.on.openDoc(doc), onDragStart: (e) => ctx.on.docDragStart(e, doc, node), onDragEnd: ctx.on.docDragEnd, onDragOver: (e) => ctx.on.nodeDragOver(e, node), onDragLeave: () => ctx.on.nodeDragLeave(node), onDrop: (e) => ctx.on.nodeDrop(e, node, container) }, indent(depth), chevron(false, true), docIcon(), h("span", { class: "mrd-document-list__label" }, label), date && h("span", { class: "mrd-document-list__date" }, date)));
|
|
1220
|
+
return (h("div", { class: "mrd-document-list__row mrd-document-list__row--doc", key: (_e = (_d = (_c = doc === null || doc === void 0 ? void 0 : doc._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : label, draggable: true, onClick: () => ctx.on.openDoc(doc, node, container), onDragStart: (e) => ctx.on.docDragStart(e, doc, node), onDragEnd: ctx.on.docDragEnd, onDragOver: (e) => ctx.on.nodeDragOver(e, node), onDragLeave: () => ctx.on.nodeDragLeave(node), onDrop: (e) => ctx.on.nodeDrop(e, node, container) }, indent(depth), chevron(false, true), docIcon(), h("span", { class: "mrd-document-list__label" }, label), date && h("span", { class: "mrd-document-list__date" }, date)));
|
|
1173
1221
|
}
|
|
1174
1222
|
function renderFolderEditRow(ctx, node, depth) {
|
|
1175
|
-
return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: "mrd-document-list__row mrd-document-list__row--edit" }, indent(depth), chevron(false, true), folderIcon(), h("input", { class: "mrd-document-list__name-input", type: "text", placeholder: t('folder_name_placeholder', ctx.locale), ref: el => ctx.on.setPendingInputEl(el), onInput: ctx.on.pendingInput, onKeyDown: ctx.on.pendingKeyDown, onBlur: () => ctx.on.cancelFolder() })), node.error && (h("div", { class: "mrd-document-list__error", style: { paddingLeft: `${depth
|
|
1223
|
+
return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: "mrd-document-list__row mrd-document-list__row--edit" }, indent(depth), chevron(false, true), folderIcon(), h("input", { class: "mrd-document-list__name-input", type: "text", placeholder: t('folder_name_placeholder', ctx.locale), ref: el => ctx.on.setPendingInputEl(el), onInput: ctx.on.pendingInput, onKeyDown: ctx.on.pendingKeyDown, onBlur: () => ctx.on.cancelFolder() })), node.error && (h("div", { class: "mrd-document-list__error", style: { paddingLeft: `${labelOffset(depth)}px` } }, node.error))));
|
|
1176
1224
|
}
|
|
1177
1225
|
function renderNodeChildren(ctx, container, node, depth) {
|
|
1178
1226
|
const out = [];
|
|
@@ -1216,7 +1264,7 @@ function renderContainerNode(ctx, node, depth) {
|
|
|
1216
1264
|
: renderNodeChildren(ctx, node, node, depth + 1)))));
|
|
1217
1265
|
}
|
|
1218
1266
|
|
|
1219
|
-
const mrdDocumentListCss = () => `@charset "UTF-8";.sc-mrd-document-list-h{display:block;height:100%}.mrd-document-list.sc-mrd-document-list{padding:var(--mrd-space-2) 0;min-height:100%;box-sizing:border-box}.mrd-document-list--drop-active.sc-mrd-document-list{outline:2px dashed var(--mrd-color-primary);outline-offset:-4px;background:var(--mrd-color-primary-50, rgba(22, 163, 74, 0.06))}.mrd-document-list__row.sc-mrd-document-list{display:flex;align-items:center;gap:var(--mrd-space-
|
|
1267
|
+
const mrdDocumentListCss = () => `@charset "UTF-8";.sc-mrd-document-list-h{display:block;height:100%}.mrd-document-list.sc-mrd-document-list{padding:var(--mrd-space-2) 0;min-height:100%;box-sizing:border-box}.mrd-document-list--drop-active.sc-mrd-document-list{outline:2px dashed var(--mrd-color-primary);outline-offset:-4px;background:var(--mrd-color-primary-50, rgba(22, 163, 74, 0.06))}.mrd-document-list__row.sc-mrd-document-list{display:flex;align-items:center;gap:var(--mrd-space-1);height:2.125rem;padding:0 var(--mrd-space-4) 0 var(--mrd-space-2);cursor:pointer;user-select:none;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-800)}.mrd-document-list__row.sc-mrd-document-list:hover{background:var(--mrd-color-neutral-50)}.mrd-document-list__row--selected.sc-mrd-document-list{background:var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1))}.mrd-document-list__row--selected.sc-mrd-document-list:hover{background:var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1))}.mrd-document-list__row--pending.sc-mrd-document-list .mrd-document-list__label.sc-mrd-document-list{font-style:italic;color:var(--mrd-color-neutral-500)}.mrd-document-list__row--doc.sc-mrd-document-list{cursor:grab}.mrd-document-list__row--doc.sc-mrd-document-list:active{cursor:grabbing}.mrd-document-list__row--drop.sc-mrd-document-list{background:var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1));box-shadow:inset 0 0 0 1px var(--mrd-color-primary)}.mrd-document-list__row--drop.sc-mrd-document-list:hover{background:var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1))}.mrd-document-list__row--edit.sc-mrd-document-list{cursor:default}.mrd-document-list__name-input.sc-mrd-document-list{flex:1;min-width:0;height:1.625rem;padding:0 var(--mrd-space-2);font-size:var(--mrd-font-size-sm);font-family:inherit;color:var(--mrd-color-neutral-800);border:1px solid var(--mrd-color-primary);border-radius:var(--mrd-border-radius);outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-document-list__error.sc-mrd-document-list{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-danger, #dc2626);padding-top:0.125rem;padding-bottom:0.25rem}.mrd-document-list__row--dossier.sc-mrd-document-list .mrd-document-list__label.sc-mrd-document-list{font-weight:var(--mrd-font-weight-semibold)}.mrd-document-list__indent.sc-mrd-document-list{flex:none}.mrd-document-list__chev.sc-mrd-document-list{width:0.875rem;height:1rem;flex:none;display:grid;place-items:center;color:var(--mrd-color-neutral-400);transition:transform var(--mrd-transition-fast)}.mrd-document-list__chev.sc-mrd-document-list svg.sc-mrd-document-list{width:0.6875rem;height:0.6875rem}.mrd-document-list__chev--open.sc-mrd-document-list{transform:rotate(90deg)}.mrd-document-list__chev--leaf.sc-mrd-document-list{visibility:hidden}.mrd-document-list__icon.sc-mrd-document-list{width:1.0625rem;height:1.0625rem;flex:none}.mrd-document-list__icon--dossier.sc-mrd-document-list{color:var(--mrd-color-primary)}.mrd-document-list__icon--folder.sc-mrd-document-list{color:var(--mrd-color-folder)}.mrd-document-list__icon--doc.sc-mrd-document-list{color:var(--mrd-color-neutral-400)}.mrd-document-list__label.sc-mrd-document-list{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mrd-document-list__count.sc-mrd-document-list{flex:none;font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);background:var(--mrd-color-neutral-100);border-radius:var(--mrd-border-radius-full);padding:0.0625rem 0.5rem}.mrd-document-list__date.sc-mrd-document-list{flex:none;font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-400);font-variant-numeric:tabular-nums}.mrd-document-list__loading.sc-mrd-document-list{display:flex;align-items:center;gap:var(--mrd-space-1);height:1.875rem;padding:0 var(--mrd-space-4) 0 var(--mrd-space-2);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-400)}.mrd-document-list__spinner.sc-mrd-document-list{width:0.75rem;height:0.75rem;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-document-list-spin 0.7s linear infinite}@keyframes mrd-document-list-spin{to{transform:rotate(360deg)}}.mrd-document-list__empty.sc-mrd-document-list{padding:var(--mrd-space-8) var(--mrd-space-4);text-align:center;color:var(--mrd-color-neutral-400);font-size:var(--mrd-font-size-sm)}`;
|
|
1220
1268
|
|
|
1221
1269
|
const MrdDocumentList = class {
|
|
1222
1270
|
constructor(hostRef) {
|
|
@@ -1525,18 +1573,24 @@ const MrdDocumentList = class {
|
|
|
1525
1573
|
qs: p.toString(),
|
|
1526
1574
|
});
|
|
1527
1575
|
}
|
|
1528
|
-
|
|
1576
|
+
/** Filter qs scoping a folder's documents: view-level filters + container/folder match.
|
|
1577
|
+
* Shared by emitDocuments() (the fetch) and openDoc() (prev/next list context), so both
|
|
1578
|
+
* always agree on exactly what query a document belongs to. */
|
|
1579
|
+
buildDocQs(container, node) {
|
|
1529
1580
|
var _a, _b;
|
|
1530
1581
|
const p = this.baseParams();
|
|
1531
1582
|
p.set(this.containerField + '_href', (_a = container.href) !== null && _a !== void 0 ? _a : '');
|
|
1532
1583
|
p.set(this.folderField, (_b = node.fullPath) !== null && _b !== void 0 ? _b : '');
|
|
1584
|
+
return p.toString();
|
|
1585
|
+
}
|
|
1586
|
+
emitDocuments(container, node) {
|
|
1533
1587
|
node.loading = true;
|
|
1534
1588
|
this.mrdLoadPage.emit({
|
|
1535
1589
|
nodeId: node.id,
|
|
1536
1590
|
page: 0,
|
|
1537
1591
|
sort: '',
|
|
1538
1592
|
path: this.buildDataPath(),
|
|
1539
|
-
qs:
|
|
1593
|
+
qs: this.buildDocQs(container, node),
|
|
1540
1594
|
});
|
|
1541
1595
|
}
|
|
1542
1596
|
// ── Public injection API ─────────────────────────────────────────────────
|
|
@@ -1805,11 +1859,15 @@ const MrdDocumentList = class {
|
|
|
1805
1859
|
container.totalCount = Math.max(0, container.totalCount + delta);
|
|
1806
1860
|
}
|
|
1807
1861
|
}
|
|
1808
|
-
openDoc(doc) {
|
|
1862
|
+
openDoc(doc, node, container) {
|
|
1809
1863
|
var _a, _b, _c, _d;
|
|
1810
1864
|
const href = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href;
|
|
1811
1865
|
const label = (_d = (_c = doc === null || doc === void 0 ? void 0 : doc[this.titleField]) !== null && _c !== void 0 ? _c : doc === null || doc === void 0 ? void 0 : doc.name) !== null && _d !== void 0 ? _d : '';
|
|
1812
|
-
|
|
1866
|
+
const index = node.docs.indexOf(doc);
|
|
1867
|
+
const listContext = index >= 0
|
|
1868
|
+
? { index, sort: '', path: this.buildDataPath(), qs: this.buildDocQs(container, node) }
|
|
1869
|
+
: undefined;
|
|
1870
|
+
this.mrdNavigate.emit({ href, label, listContext });
|
|
1813
1871
|
}
|
|
1814
1872
|
// ── Render ───────────────────────────────────────────────────────────────
|
|
1815
1873
|
treeCtx() {
|
|
@@ -1823,7 +1881,7 @@ const MrdDocumentList = class {
|
|
|
1823
1881
|
on: {
|
|
1824
1882
|
toggleContainer: node => this.toggleContainer(node),
|
|
1825
1883
|
toggleFolder: (container, node) => this.toggleFolder(container, node),
|
|
1826
|
-
openDoc: doc => this.openDoc(doc),
|
|
1884
|
+
openDoc: (doc, node, container) => this.openDoc(doc, node, container),
|
|
1827
1885
|
docDragStart: this.onDocDragStart,
|
|
1828
1886
|
docDragEnd: this.onDocDragEnd,
|
|
1829
1887
|
nodeDragOver: this.onNodeDragOver,
|
|
@@ -1843,7 +1901,7 @@ const MrdDocumentList = class {
|
|
|
1843
1901
|
body = renderLoadingRow(ctx, 0);
|
|
1844
1902
|
}
|
|
1845
1903
|
else if (this.containers.length === 0) {
|
|
1846
|
-
body = h("div", { key: '
|
|
1904
|
+
body = h("div", { key: '49157721108db3b03c8c5e6550692b42dfc2e113', class: "mrd-document-list__empty" }, t('no_results', this.locale));
|
|
1847
1905
|
}
|
|
1848
1906
|
else if (this.singleContainer) {
|
|
1849
1907
|
// Dossier context: render the single container's folder tree at the root.
|
|
@@ -1861,7 +1919,7 @@ const MrdDocumentList = class {
|
|
|
1861
1919
|
else {
|
|
1862
1920
|
body = this.containers.map(c => renderContainerNode(ctx, c, 0));
|
|
1863
1921
|
}
|
|
1864
|
-
return (h(Host, { key: '
|
|
1922
|
+
return (h(Host, { key: 'b6d3dd44036a9215979a0dbec699902f308fbeb5' }, h("div", { key: '8ec0e58cb5e7192f7a9af9062dd5bc7f7bb00713', class: 'mrd-document-list' + (this.rootDropActive ? ' mrd-document-list--drop-active' : ''), onDragOver: this.onRootDragOver, onDragLeave: this.onRootDragLeave, onDrop: this.onRootDrop }, body)));
|
|
1865
1923
|
}
|
|
1866
1924
|
get el() { return getElement(this); }
|
|
1867
1925
|
};
|
|
@@ -1869,16 +1927,43 @@ const MrdDocumentList = class {
|
|
|
1869
1927
|
MrdDocumentList.ROOT = '__root__';
|
|
1870
1928
|
MrdDocumentList.style = mrdDocumentListCss();
|
|
1871
1929
|
|
|
1872
|
-
const mrdDocumentViewCss = () => `.sc-mrd-document-view-h{display:block}.mrd-document-view.sc-mrd-document-view{max-width:
|
|
1930
|
+
const mrdDocumentViewCss = () => `.sc-mrd-document-view-h{display:block;container-type:inline-size;container-name:mrd-document-view}.mrd-document-view.sc-mrd-document-view{max-width:1200px}.mrd-document-view__body.sc-mrd-document-view{display:grid;grid-template-columns:1fr;gap:var(--mrd-space-6)}@container mrd-document-view (min-width: 640px){.mrd-document-view__body{grid-template-columns:minmax(220px, 320px) 1fr !important;align-items:stretch !important}.mrd-document-view__crumb{margin-bottom:var(--mrd-space-2) !important}}.mrd-document-view__crumb.sc-mrd-document-view{display:inline-flex;align-items:center;gap:var(--mrd-space-2);margin-bottom:var(--mrd-space-4);padding:var(--mrd-space-1) var(--mrd-space-3);background:var(--mrd-color-primary-light);border:1px solid transparent;border-radius:var(--mrd-border-radius);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary-dark);cursor:pointer}.mrd-document-view__crumb.sc-mrd-document-view:hover{border-color:var(--mrd-color-primary)}.mrd-document-view__crumb-icon.sc-mrd-document-view{width:0.875rem;height:0.875rem;flex-shrink:0}.mrd-document-view__title.sc-mrd-document-view{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);letter-spacing:-0.02em;margin:0 0 var(--mrd-space-1) 0}.mrd-document-view__date.sc-mrd-document-view{font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-400);font-variant-numeric:tabular-nums;margin:0 0 var(--mrd-space-6) 0}.mrd-document-view__file-meta.sc-mrd-document-view{display:flex;align-items:center;gap:var(--mrd-space-4);margin-bottom:var(--mrd-space-2)}.mrd-document-view__file-name.sc-mrd-document-view{flex:1;min-width:0;font-weight:var(--mrd-font-weight-semibold);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-800);word-break:break-word}.mrd-document-view__preview.sc-mrd-document-view{width:100%;overflow:hidden;border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background:var(--mrd-color-neutral-50)}.mrd-document-view__preview-loading.sc-mrd-document-view{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--mrd-color-neutral-500);font-size:var(--mrd-font-size-sm)}.mrd-document-view__download.sc-mrd-document-view{display:inline-flex;align-items:center;gap:var(--mrd-space-2);flex-shrink:0;height:2rem;padding:0 var(--mrd-space-3);background:var(--mrd-color-white);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);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-700);cursor:pointer}.mrd-document-view__download.sc-mrd-document-view:hover{background:var(--mrd-color-neutral-100);color:var(--mrd-color-neutral-900)}.mrd-document-view__download.sc-mrd-document-view svg.sc-mrd-document-view{width:0.9375rem;height:0.9375rem}.mrd-document-view__summary-body.sc-mrd-document-view{font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-700);line-height:var(--mrd-line-height-relaxed)}`;
|
|
1873
1931
|
|
|
1874
1932
|
const MrdDocumentView = class {
|
|
1875
1933
|
constructor(hostRef) {
|
|
1876
1934
|
registerInstance(this, hostRef);
|
|
1877
1935
|
this.mrdNavigate = createEvent(this, "mrdNavigate");
|
|
1878
1936
|
this.mrdDownload = createEvent(this, "mrdDownload");
|
|
1937
|
+
this.mrdLoadPreview = createEvent(this, "mrdLoadPreview");
|
|
1879
1938
|
/** The data record from the /data endpoint. Fields keyed by name; relations under `_links`. */
|
|
1880
1939
|
this.data = {};
|
|
1881
1940
|
this.locale = navigator.language;
|
|
1941
|
+
/** Signed URL for the file's inline preview (mrd-file-preview), resolved by
|
|
1942
|
+
* the host in response to mrdLoadPreview. Empty while unresolved — the
|
|
1943
|
+
* preview area shows a loading state until the host injects a value. */
|
|
1944
|
+
this.previewUrl = '';
|
|
1945
|
+
/** Minimum height (px) of the inline preview area — it stretches to fill the
|
|
1946
|
+
* available row height in the wide side-by-side layout (see mrd-document-view.scss),
|
|
1947
|
+
* and falls back to this height when stacked. Overlay hosts typically pass a
|
|
1948
|
+
* smaller value than the full-page default to fit available chrome. */
|
|
1949
|
+
this.previewHeight = 640;
|
|
1950
|
+
/** Tracks the href a preview was last requested for, so componentDidLoad and
|
|
1951
|
+
* the data watcher don't emit duplicate requests for the same file. */
|
|
1952
|
+
this.lastPreviewHref = null;
|
|
1953
|
+
}
|
|
1954
|
+
componentDidLoad() {
|
|
1955
|
+
this.requestPreviewIfNeeded();
|
|
1956
|
+
}
|
|
1957
|
+
dataChanged() {
|
|
1958
|
+
this.requestPreviewIfNeeded();
|
|
1959
|
+
}
|
|
1960
|
+
requestPreviewIfNeeded() {
|
|
1961
|
+
var _a, _b;
|
|
1962
|
+
const href = (_b = (_a = this.slotValue('file')) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : null;
|
|
1963
|
+
if (href && href !== this.lastPreviewHref) {
|
|
1964
|
+
this.lastPreviewHref = href;
|
|
1965
|
+
this.mrdLoadPreview.emit({ href });
|
|
1966
|
+
}
|
|
1882
1967
|
}
|
|
1883
1968
|
/** Value of a value-slot: reads data[field] via the slot→field map. */
|
|
1884
1969
|
slotValue(slot) {
|
|
@@ -1903,24 +1988,43 @@ const MrdDocumentView = class {
|
|
|
1903
1988
|
return null;
|
|
1904
1989
|
return (h("button", { class: "mrd-document-view__crumb", onClick: () => this.mrdNavigate.emit({ href: link.href, label: link.name }) }, h("svg", { class: "mrd-document-view__crumb-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M19 12H5M12 19l-7-7 7-7" })), link.name));
|
|
1905
1990
|
}
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1991
|
+
/** Filename + download button — part of the metadata column, not the preview
|
|
1992
|
+
* panel, so it stays next to the title/summary in the wide side-by-side layout. */
|
|
1993
|
+
renderFileMeta(fileName, href) {
|
|
1994
|
+
return (h("div", { class: "mrd-document-view__file-meta" }, h("span", { class: "mrd-document-view__file-name" }, fileName), href && (h("button", { type: "button", class: "mrd-document-view__download", onClick: () => this.mrdDownload.emit({ href, fileName }) }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M12 3v12m0 0l-4-4m4 4l4-4M4 21h16" })), t('download', this.locale)))));
|
|
1995
|
+
}
|
|
1996
|
+
/** The preview panel itself (iframe/image/loading state) — its own grid
|
|
1997
|
+
* column in the wide layout, so it can take the full available height. */
|
|
1998
|
+
renderPreviewPanel(fileName, href, mimeType) {
|
|
1999
|
+
if (!href)
|
|
1910
2000
|
return null;
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
2001
|
+
return (h("div", { class: "mrd-document-view__preview", style: { minHeight: `${this.previewHeight}px` } }, this.previewUrl ? (h("mrd-file-preview", { src: this.previewUrl, mimeType: mimeType, fileName: fileName, href: href, locale: this.locale, onMrdDownload: (e) => {
|
|
2002
|
+
e.stopPropagation();
|
|
2003
|
+
this.mrdDownload.emit(e.detail);
|
|
2004
|
+
}, onMrdPreviewReload: (e) => {
|
|
2005
|
+
e.stopPropagation();
|
|
2006
|
+
this.mrdLoadPreview.emit({ href });
|
|
2007
|
+
} })) : (h("div", { class: "mrd-document-view__preview-loading" }, t('loading', this.locale)))));
|
|
1914
2008
|
}
|
|
1915
2009
|
render() {
|
|
2010
|
+
var _a, _b, _c, _d;
|
|
1916
2011
|
const titleRaw = this.slotValue('title');
|
|
1917
2012
|
const title = titleRaw != null && titleRaw !== '' ? String(titleRaw) : null;
|
|
1918
2013
|
const dateRaw = this.slotValue('date');
|
|
1919
2014
|
const date = dateRaw != null && dateRaw !== '' ? formatDate(dateRaw, this.locale) : null;
|
|
1920
2015
|
const summaryRaw = this.slotValue('summary');
|
|
1921
2016
|
const summary = summaryRaw != null && summaryRaw !== '' ? String(summaryRaw) : null;
|
|
1922
|
-
|
|
2017
|
+
const fileRaw = this.slotValue('file');
|
|
2018
|
+
const fileHref = (_a = fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.href) !== null && _a !== void 0 ? _a : '';
|
|
2019
|
+
const fileName = (_b = fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.fileName) !== null && _b !== void 0 ? _b : (fileRaw ? String(fileRaw) : '');
|
|
2020
|
+
const mimeType = (_d = (_c = fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.mimeType) !== null && _c !== void 0 ? _c : fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.contentType) !== null && _d !== void 0 ? _d : '';
|
|
2021
|
+
return (h(Host, { key: '6023c8c6ca3d780fd4a9cca41189cb05a151221e' }, h("div", { key: 'd7d39d62964583da0ca6c1494e75321e6bab9ac8', class: "mrd-document-view" }, h("div", { key: '9aa14569c9ffc785ffb4f2b3d5930cf3e822e246', class: "mrd-document-view__body" }, h("div", { key: 'e00f3b55551429d8522fb97e7ccb43d56e98042d', class: "mrd-document-view__meta" }, this.renderContainer(), title && h("h1", { key: '9860273878b245fc757eb690c6cd7006b13045c4', class: "mrd-document-view__title" }, title), date && h("p", { key: '84c60b0b6feb6678d661000c26050e42eaaa8399', class: "mrd-document-view__date" }, date), fileRaw && this.renderFileMeta(fileName, fileHref), summary && (h("div", { key: 'd1cff0cc1b9376409c8e04a785deba93c986ba47', class: "mrd-document-view__summary" }, h("div", { key: 'fc9c4b986afc8c4f50486caf85bf58860d641a2b', class: "mrd-document-view__summary-body", innerHTML: summary })))), fileRaw && this.renderPreviewPanel(fileName, fileHref, mimeType)))));
|
|
1923
2022
|
}
|
|
2023
|
+
static get watchers() { return {
|
|
2024
|
+
"data": [{
|
|
2025
|
+
"dataChanged": 0
|
|
2026
|
+
}]
|
|
2027
|
+
}; }
|
|
1924
2028
|
};
|
|
1925
2029
|
MrdDocumentView.style = mrdDocumentViewCss();
|
|
1926
2030
|
|
|
@@ -1951,7 +2055,7 @@ const MrdEmailField = class {
|
|
|
1951
2055
|
};
|
|
1952
2056
|
}
|
|
1953
2057
|
render() {
|
|
1954
|
-
return (h(Host, { key: '
|
|
2058
|
+
return (h(Host, { key: 'e113fb3958c06ee4d4e870b6005e07b1793835a1' }, h("div", { key: '9393b859167f1474d944575f464e1523f1dcf469', class: "mrd-email-field" }, h(FieldLabel, { key: '57c134921adb7f941c19d2fa36cce213bc12ae1e', base: "mrd-email-field", label: this.label, required: this.required }), h("input", { key: '67496689526d2fa96a087b00a9436e9de4d69415', class: controlClass('mrd-email-field', !!this.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 }), h(FieldError, { key: '5a151c2995db77771fe8f98a24c627b0060f655a', base: "mrd-email-field", error: this.error }))));
|
|
1955
2059
|
}
|
|
1956
2060
|
};
|
|
1957
2061
|
MrdEmailField.style = mrdEmailFieldCss();
|
|
@@ -2259,7 +2363,7 @@ const MrdFileField = class {
|
|
|
2259
2363
|
error: hasError,
|
|
2260
2364
|
disabled: this.disabled || this.uploading,
|
|
2261
2365
|
});
|
|
2262
|
-
return (h(Host, { key: '
|
|
2366
|
+
return (h(Host, { key: '6410e945bb873a05d0a1b3be45bc879b5e153a05' }, h("div", { key: '4d1d69d768b383f0d9190f88a50a87de8679d3d2', class: "mrd-file-field" }, h(FieldLabel, { key: '7e0009908fb4c087de16cf08251ab398199dae60', base: "mrd-file-field", label: this.label, required: this.required }), h("div", { key: '88dfc0d1c34670f7de8f3cf2dea4c95b0ae66f4c', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: 'b6d678b5582a58721c928cef47dd8d6645b26a86', 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 ? (h("div", { class: "mrd-file-field__selected" }, this.uploading ? (h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" }))), h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), h(FieldError, { key: '80f1698819c60b15476b953f5f3216f195430b84', base: "mrd-file-field", error: this.error }))));
|
|
2263
2367
|
}
|
|
2264
2368
|
static get watchers() { return {
|
|
2265
2369
|
"value": [{
|
|
@@ -2269,6 +2373,90 @@ const MrdFileField = class {
|
|
|
2269
2373
|
};
|
|
2270
2374
|
MrdFileField.style = mrdFileFieldCss();
|
|
2271
2375
|
|
|
2376
|
+
/** Pure classification logic for mrd-file-preview — no Stencil dependency. */
|
|
2377
|
+
const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp']);
|
|
2378
|
+
function extensionOf(fileName) {
|
|
2379
|
+
if (!fileName)
|
|
2380
|
+
return null;
|
|
2381
|
+
const match = /\.([a-z0-9]+)$/i.exec(fileName);
|
|
2382
|
+
return match ? match[1].toLowerCase() : null;
|
|
2383
|
+
}
|
|
2384
|
+
/**
|
|
2385
|
+
* Decide how to render a file given its declared mime type and/or file name.
|
|
2386
|
+
* A declared mime type is authoritative when present (a mismatched file name
|
|
2387
|
+
* extension is ignored); the file name extension is only consulted as a
|
|
2388
|
+
* fallback when no mime type is known.
|
|
2389
|
+
*/
|
|
2390
|
+
function detectPreviewKind(mimeType, fileName) {
|
|
2391
|
+
const mime = (mimeType !== null && mimeType !== void 0 ? mimeType : '').toLowerCase().trim();
|
|
2392
|
+
if (mime) {
|
|
2393
|
+
if (mime === 'application/pdf')
|
|
2394
|
+
return 'pdf';
|
|
2395
|
+
if (mime.startsWith('image/'))
|
|
2396
|
+
return 'image';
|
|
2397
|
+
return 'unsupported';
|
|
2398
|
+
}
|
|
2399
|
+
const ext = extensionOf(fileName);
|
|
2400
|
+
if (ext === 'pdf')
|
|
2401
|
+
return 'pdf';
|
|
2402
|
+
if (ext && IMAGE_EXTENSIONS.has(ext))
|
|
2403
|
+
return 'image';
|
|
2404
|
+
return 'unsupported';
|
|
2405
|
+
}
|
|
2406
|
+
|
|
2407
|
+
const mrdFilePreviewCss = () => `.sc-mrd-file-preview-h{display:block;width:100%;height:100%}.mrd-file-preview__frame.sc-mrd-file-preview{display:block;width:100%;height:100%;border:none}.mrd-file-preview__image.sc-mrd-file-preview{display:block;max-width:100%;max-height:100%;margin:0 auto;object-fit:contain}.mrd-file-preview__error.sc-mrd-file-preview,.mrd-file-preview__unsupported.sc-mrd-file-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mrd-space-3);width:100%;height:100%;min-height:8rem;padding:var(--mrd-space-6);color:var(--mrd-color-neutral-500);font-size:var(--mrd-font-size-sm);text-align:center}.mrd-file-preview__error-text.sc-mrd-file-preview{color:var(--mrd-color-danger)}.mrd-file-preview__retry.sc-mrd-file-preview,.mrd-file-preview__download.sc-mrd-file-preview{display:inline-flex;align-items:center;gap:var(--mrd-space-2);height:2rem;padding:0 var(--mrd-space-3);border:var(--mrd-border-width) solid var(--mrd-color-neutral-300);border-radius:var(--mrd-border-radius);background:var(--mrd-color-white);color:var(--mrd-color-neutral-700);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);cursor:pointer}.mrd-file-preview__retry.sc-mrd-file-preview:hover,.mrd-file-preview__download.sc-mrd-file-preview:hover{background:var(--mrd-color-neutral-100);color:var(--mrd-color-neutral-900)}.mrd-file-preview__download.sc-mrd-file-preview svg.sc-mrd-file-preview{width:0.9375rem;height:0.9375rem}`;
|
|
2408
|
+
|
|
2409
|
+
const MrdFilePreview = class {
|
|
2410
|
+
constructor(hostRef) {
|
|
2411
|
+
registerInstance(this, hostRef);
|
|
2412
|
+
this.mrdPreviewReload = createEvent(this, "mrdPreviewReload");
|
|
2413
|
+
this.mrdDownload = createEvent(this, "mrdDownload");
|
|
2414
|
+
/** Signed URL to render. */
|
|
2415
|
+
this.src = '';
|
|
2416
|
+
/** Declared mime type (e.g. 'application/pdf', 'image/png'), when known.
|
|
2417
|
+
* Authoritative over `fileName` when present. */
|
|
2418
|
+
this.mimeType = '';
|
|
2419
|
+
/** Original file name — used for extension-based detection when `mimeType`
|
|
2420
|
+
* is absent, and as alt/title text. */
|
|
2421
|
+
this.fileName = '';
|
|
2422
|
+
/** The file's own reference href (not the signed preview URL in `src`).
|
|
2423
|
+
* When set, an unsupported type falls back to the same download button
|
|
2424
|
+
* used elsewhere in the library, so hosts need no new wiring. */
|
|
2425
|
+
this.href = '';
|
|
2426
|
+
this.locale = navigator.language;
|
|
2427
|
+
this.imageFailed = false;
|
|
2428
|
+
this.onImageError = () => {
|
|
2429
|
+
this.imageFailed = true;
|
|
2430
|
+
};
|
|
2431
|
+
this.retry = () => {
|
|
2432
|
+
this.imageFailed = false;
|
|
2433
|
+
this.mrdPreviewReload.emit();
|
|
2434
|
+
};
|
|
2435
|
+
}
|
|
2436
|
+
srcChanged() {
|
|
2437
|
+
this.imageFailed = false;
|
|
2438
|
+
}
|
|
2439
|
+
render() {
|
|
2440
|
+
const kind = detectPreviewKind(this.mimeType, this.fileName);
|
|
2441
|
+
if (kind === 'pdf') {
|
|
2442
|
+
return (h(Host, null, h("iframe", { class: "mrd-file-preview__frame", src: this.src, title: this.fileName || 'preview' })));
|
|
2443
|
+
}
|
|
2444
|
+
if (kind === 'image') {
|
|
2445
|
+
if (this.imageFailed) {
|
|
2446
|
+
return (h(Host, null, h("div", { class: "mrd-file-preview__error" }, h("span", { class: "mrd-file-preview__error-text" }, t('preview_error', this.locale)), h("button", { type: "button", class: "mrd-file-preview__retry", onClick: this.retry }, t('retry', this.locale)))));
|
|
2447
|
+
}
|
|
2448
|
+
return (h(Host, null, h("img", { class: "mrd-file-preview__image", src: this.src, alt: this.fileName || '', onError: this.onImageError })));
|
|
2449
|
+
}
|
|
2450
|
+
return (h(Host, null, h("div", { class: "mrd-file-preview__unsupported" }, h("span", null, t('preview_unsupported', this.locale)), this.href && (h("button", { type: "button", class: "mrd-file-preview__download", onClick: () => this.mrdDownload.emit({ href: this.href, fileName: this.fileName }) }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M12 3v12m0 0l-4-4m4 4l4-4M4 21h16" })), t('download', this.locale))))));
|
|
2451
|
+
}
|
|
2452
|
+
static get watchers() { return {
|
|
2453
|
+
"src": [{
|
|
2454
|
+
"srcChanged": 0
|
|
2455
|
+
}]
|
|
2456
|
+
}; }
|
|
2457
|
+
};
|
|
2458
|
+
MrdFilePreview.style = mrdFilePreviewCss();
|
|
2459
|
+
|
|
2272
2460
|
const mrdFormCss = () => `.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)}`;
|
|
2273
2461
|
|
|
2274
2462
|
const MrdForm = class {
|
|
@@ -2796,7 +2984,7 @@ const MrdImageField = class {
|
|
|
2796
2984
|
error: hasError,
|
|
2797
2985
|
disabled: this.disabled || this.uploading,
|
|
2798
2986
|
});
|
|
2799
|
-
return (h(Host, { key: '
|
|
2987
|
+
return (h(Host, { key: '700310af716dcc167f98bc7ae7024bb44e1285b6' }, h("div", { key: '95d29a82751249e560404488fb279138eee0c1be', class: "mrd-image-field" }, h(FieldLabel, { key: 'f53f040257a4b65d8435c836846adab137b91a5e', base: "mrd-image-field", label: this.label, required: this.required }), h("div", { key: 'a9cc7a0861b1457d8e4abb11b380b6eeb519a863', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: '7112030bc2b80b4c3b31a4421656da4c926a2fe1', 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 ? (h("div", { class: "mrd-image-field__preview-container" }, h("div", { class: "mrd-image-field__preview-thumb" }, h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && h("div", { class: "mrd-image-field__preview-overlay" }, h("span", { class: "mrd-image-field__spinner" }))), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (h("div", { class: "mrd-image-field__prompt" }, h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), h(FieldError, { key: '0cf5346ecb1a5d110822b087081b4b5f05255381', base: "mrd-image-field", error: this.error }))));
|
|
2800
2988
|
}
|
|
2801
2989
|
static get watchers() { return {
|
|
2802
2990
|
"value": [{
|
|
@@ -3046,7 +3234,7 @@ function renderField(ctx, item) {
|
|
|
3046
3234
|
return (h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, renderedValue, renderHistoryBadge(ctx, item, raw))));
|
|
3047
3235
|
}
|
|
3048
3236
|
|
|
3049
|
-
const mrdLayoutSectionCss = () => `.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(15 * 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-xs);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);margin:0 0 var(--mrd-space-2) 0;padding-bottom:0;letter-spacing:0.01em}.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:var(--mrd-color-white);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:var(--mrd-color-white);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}`;
|
|
3237
|
+
const mrdLayoutSectionCss = () => `.sc-mrd-layout-section-h{display:block;width:100%}.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(15 * 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-xs);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);margin:0 0 var(--mrd-space-2) 0;padding-bottom:0;letter-spacing:0.01em}.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:var(--mrd-color-white);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:var(--mrd-color-white);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}`;
|
|
3050
3238
|
|
|
3051
3239
|
const MrdLayoutSection = class {
|
|
3052
3240
|
constructor(hostRef) {
|
|
@@ -3056,6 +3244,7 @@ const MrdLayoutSection = class {
|
|
|
3056
3244
|
this.mrdDownload = createEvent(this, "mrdDownload");
|
|
3057
3245
|
this.mrdLoadViewPage = createEvent(this, "mrdLoadViewPage");
|
|
3058
3246
|
this.mrdLoadImage = createEvent(this, "mrdLoadImage");
|
|
3247
|
+
this.mrdLoadDocumentPreview = createEvent(this, "mrdLoadDocumentPreview");
|
|
3059
3248
|
this.mrdViewAction = createEvent(this, "mrdViewAction");
|
|
3060
3249
|
this.mrdLoadViewAggregations = createEvent(this, "mrdLoadViewAggregations");
|
|
3061
3250
|
this.mrdLoadViewDistinct = createEvent(this, "mrdLoadViewDistinct");
|
|
@@ -3074,11 +3263,17 @@ const MrdLayoutSection = class {
|
|
|
3074
3263
|
/** Top-level archetypes on the object dashboard. When it contains commons.document,
|
|
3075
3264
|
* the record is rendered as a single-document view instead of generic fields. */
|
|
3076
3265
|
this.archetypes = [];
|
|
3266
|
+
/** Minimum height (px) of the commons.document inline file preview — it
|
|
3267
|
+
* stretches taller in the wide side-by-side layout. Pass a smaller value
|
|
3268
|
+
* when embedding the record in an overlay with limited height. */
|
|
3269
|
+
this.documentPreviewHeight = 640;
|
|
3077
3270
|
this.searchQueryMap = {};
|
|
3078
3271
|
this.searchResultsMap = {};
|
|
3079
3272
|
this.imagePreviewUrl = null;
|
|
3080
3273
|
this.imagePreviews = {};
|
|
3081
3274
|
this.openHistoryField = null;
|
|
3275
|
+
/** Signed URL for the commons.document archetype's inline file preview. */
|
|
3276
|
+
this.documentPreviewUrl = null;
|
|
3082
3277
|
this.historyClickOutside = null;
|
|
3083
3278
|
this.searchTimers = {};
|
|
3084
3279
|
this.handleViewLoadPage = (e, name) => {
|
|
@@ -3202,6 +3397,11 @@ const MrdLayoutSection = class {
|
|
|
3202
3397
|
async openImagePreview(url) {
|
|
3203
3398
|
this.imagePreviewUrl = url;
|
|
3204
3399
|
}
|
|
3400
|
+
/** Provide a resolved signed URL for the commons.document archetype's inline
|
|
3401
|
+
* file preview, in response to mrdLoadDocumentPreview. */
|
|
3402
|
+
async setDocumentPreviewUrl(url) {
|
|
3403
|
+
this.documentPreviewUrl = url;
|
|
3404
|
+
}
|
|
3205
3405
|
resolveSearchKey() {
|
|
3206
3406
|
var _a;
|
|
3207
3407
|
const items = flattenItems(this.items).filter(i => i.type === ClientLayoutItemType.SEARCH);
|
|
@@ -3291,6 +3491,10 @@ const MrdLayoutSection = class {
|
|
|
3291
3491
|
e.stopPropagation();
|
|
3292
3492
|
this.mrdLoadViewAggregations.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
|
|
3293
3493
|
}, onMrdNavigate: (e) => {
|
|
3494
|
+
// mrd-document-container already hardcodes navigateBehaviour to
|
|
3495
|
+
// OVERLAY_PAGE (documents are always the quick-look use case) —
|
|
3496
|
+
// relay as-is, unlike the generic table path below which takes it
|
|
3497
|
+
// from the item's configuration.
|
|
3294
3498
|
e.stopPropagation();
|
|
3295
3499
|
this.mrdNavigate.emit(e.detail);
|
|
3296
3500
|
}, onMrdAction: (e) => {
|
|
@@ -3314,10 +3518,15 @@ const MrdLayoutSection = class {
|
|
|
3314
3518
|
e.stopPropagation();
|
|
3315
3519
|
this.mrdLoadViewAggregations.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
|
|
3316
3520
|
}, onMrdRowClick: (e) => {
|
|
3317
|
-
var _a, _b, _c;
|
|
3521
|
+
var _a, _b, _c, _d;
|
|
3318
3522
|
e.stopPropagation();
|
|
3319
|
-
const row = e.detail;
|
|
3320
|
-
this.mrdNavigate.emit({
|
|
3523
|
+
const { row, listContext } = e.detail;
|
|
3524
|
+
this.mrdNavigate.emit({
|
|
3525
|
+
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,
|
|
3526
|
+
label: (_c = row === null || row === void 0 ? void 0 : row.name) !== null && _c !== void 0 ? _c : '',
|
|
3527
|
+
navigateBehaviour: (_d = item.navigateBehaviour) !== null && _d !== void 0 ? _d : ClientLayoutNavigateBehaviour.PAGE,
|
|
3528
|
+
listContext,
|
|
3529
|
+
});
|
|
3321
3530
|
}, onMrdAction: (e) => {
|
|
3322
3531
|
var _a;
|
|
3323
3532
|
e.stopPropagation();
|
|
@@ -3366,17 +3575,18 @@ const MrdLayoutSection = class {
|
|
|
3366
3575
|
* a recognisable document instead of generic fields, keeping any related views/
|
|
3367
3576
|
* searches below it. */
|
|
3368
3577
|
renderDocumentObject(archetype) {
|
|
3578
|
+
var _a;
|
|
3369
3579
|
const related = this.items.filter(it => it.type === ClientLayoutItemType.VIEW ||
|
|
3370
3580
|
it.type === ClientLayoutItemType.RELATED_VIEW ||
|
|
3371
3581
|
it.type === ClientLayoutItemType.SEARCH);
|
|
3372
3582
|
return [
|
|
3373
|
-
h("mrd-document-view", { archetype: archetype, data: this.data, locale: this.locale, onMrdNavigate: (e) => { e.stopPropagation(); this.mrdNavigate.emit(e.detail); }, onMrdDownload: (e) => { e.stopPropagation(); this.mrdDownload.emit(e.detail); } }),
|
|
3583
|
+
h("mrd-document-view", { archetype: archetype, data: this.data, locale: this.locale, previewUrl: (_a = this.documentPreviewUrl) !== null && _a !== void 0 ? _a : '', previewHeight: this.documentPreviewHeight, onMrdNavigate: (e) => { e.stopPropagation(); this.mrdNavigate.emit(e.detail); }, onMrdDownload: (e) => { e.stopPropagation(); this.mrdDownload.emit(e.detail); }, onMrdLoadPreview: (e) => { e.stopPropagation(); this.mrdLoadDocumentPreview.emit(e.detail); } }),
|
|
3374
3584
|
...related.map(it => this.renderItem(it)),
|
|
3375
3585
|
];
|
|
3376
3586
|
}
|
|
3377
3587
|
render() {
|
|
3378
3588
|
const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
|
|
3379
|
-
return (h(Host, { key: '
|
|
3589
|
+
return (h(Host, { key: '9b79e194ab3fc37bd9e97e69d06df37a5f26dfab' }, h("div", { key: '15db5e082ccfbe4b0b5b75e11a4eaac117c5d577', class: "mrd-layout-section" }, docArchetype
|
|
3380
3590
|
? this.renderDocumentObject(docArchetype)
|
|
3381
3591
|
: this.items.map(item => this.renderItem(item))), this.renderImageModal()));
|
|
3382
3592
|
}
|
|
@@ -3497,7 +3707,7 @@ const MrdLongtextField = class {
|
|
|
3497
3707
|
};
|
|
3498
3708
|
}
|
|
3499
3709
|
render() {
|
|
3500
|
-
return (h(Host, { key: '
|
|
3710
|
+
return (h(Host, { key: 'b27d14772f5184d41c178606629a9945120296ef' }, h("div", { key: '206b1b9ee1d37e05680e31bf8b324455867fd93b', class: "mrd-longtext-field" }, h(FieldLabel, { key: '0b6f4959f32a097907965753ed8708d7580aee53', base: "mrd-longtext-field", label: this.label, required: this.required }), this.disabled ? (h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (h("textarea", { class: controlClass('mrd-longtext-field', !!this.error), name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), h(FieldError, { key: '0803cf0c1b6409e6c8a65121efef97d28d870119', base: "mrd-longtext-field", error: this.error }))));
|
|
3501
3711
|
}
|
|
3502
3712
|
};
|
|
3503
3713
|
MrdLongtextField.style = mrdLongtextFieldCss();
|
|
@@ -3573,7 +3783,7 @@ const MrdNumberField = class {
|
|
|
3573
3783
|
const hasError = !!this.error;
|
|
3574
3784
|
const suffix = this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
|
|
3575
3785
|
this.dataType === ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
|
|
3576
|
-
return (h(Host, { key: '
|
|
3786
|
+
return (h(Host, { key: '90cae99b332f9554bc80d4044fce892ae37a48cf' }, h("div", { key: '26a9cfcc662eaeb571d17785f10f74269cf78537', class: "mrd-number-field" }, h(FieldLabel, { key: '0d9e70c1591f309ad2875d9e9fe6dbb8aa910323', base: "mrd-number-field", label: this.label, required: this.required }), h("div", { key: '95e9b53fa73c452491f65355915bf04912900ded', class: "mrd-number-field__input-wrapper" }, h("input", { key: '1d341c270a21b1a10c51757e90257e48e741abd7', class: controlClass('mrd-number-field', hasError), 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 })), h(FieldError, { key: '0dba75e0f7355b71bfa71dab16cd1a6fcc36922f', base: "mrd-number-field", error: this.error }))));
|
|
3577
3787
|
}
|
|
3578
3788
|
};
|
|
3579
3789
|
MrdNumberField.style = mrdNumberFieldCss();
|
|
@@ -3851,9 +4061,9 @@ const MrdSecretField = class {
|
|
|
3851
4061
|
};
|
|
3852
4062
|
}
|
|
3853
4063
|
render() {
|
|
3854
|
-
return (h(Host, { key: '
|
|
4064
|
+
return (h(Host, { key: '9883a87b7fcc840aa4bbe0a3cde163cc58bda65d' }, h("div", { key: '3c7ec45d59a1a17863daa39b7c115db5c58815ee', class: "mrd-secret-field" }, h(FieldLabel, { key: '2dda66c7e6d4946661bff5a5a46589a7e17f569a', base: "mrd-secret-field", label: this.label, required: this.required }), this.disabled
|
|
3855
4065
|
? (h("span", { class: "mrd-secret-field__masked", "aria-label": this.label }, this.value ? '••••••••' : ''))
|
|
3856
|
-
: (h("input", { class: controlClass('mrd-secret-field', !!this.error), type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), h(FieldError, { key: '
|
|
4066
|
+
: (h("input", { class: controlClass('mrd-secret-field', !!this.error), type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), h(FieldError, { key: 'ad8f54a7c76c59591fee77e11a12bbd62c392d91', base: "mrd-secret-field", error: this.error }))));
|
|
3857
4067
|
}
|
|
3858
4068
|
};
|
|
3859
4069
|
MrdSecretField.style = mrdSecretFieldCss();
|
|
@@ -5087,7 +5297,7 @@ const MrdTable = class {
|
|
|
5087
5297
|
this.filterMode ? 'mrd-table__header--sortable' : '',
|
|
5088
5298
|
].filter(Boolean).join(' ');
|
|
5089
5299
|
return (h("th", { class: cls, onClick: this.filterMode ? (e) => this.handleFilterOpen(col, e) : undefined }, h("span", { class: "mrd-table__header-label" }, (_a = col.label) !== null && _a !== void 0 ? _a : ''), isFiltered && h(FilterIcon, null)));
|
|
5090
|
-
}))), h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (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) && (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()));
|
|
5300
|
+
}))), h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (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) && (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()));
|
|
5091
5301
|
}
|
|
5092
5302
|
// ── Paginated / virtual-scroll mode ────────────────────────────────────
|
|
5093
5303
|
// Derive the authoritative row count from loaded pages:
|
|
@@ -5116,7 +5326,15 @@ const MrdTable = class {
|
|
|
5116
5326
|
}
|
|
5117
5327
|
}
|
|
5118
5328
|
else {
|
|
5119
|
-
renderedRows.push(h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(
|
|
5329
|
+
renderedRows.push(h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit({
|
|
5330
|
+
row,
|
|
5331
|
+
listContext: {
|
|
5332
|
+
index: i,
|
|
5333
|
+
sort: this.sortParam(),
|
|
5334
|
+
path: this.buildDataPath(),
|
|
5335
|
+
qs: this.buildQueryParams(0),
|
|
5336
|
+
},
|
|
5337
|
+
}) }, this.columns.map(col => this.renderCell(col, row))));
|
|
5120
5338
|
}
|
|
5121
5339
|
}
|
|
5122
5340
|
return (h(Host, null, this.renderToolbar(), h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, h("table", { class: "mrd-table__table", style: tableStyle }, h("thead", null, h("tr", null, this.columns.map((col, idx) => {
|
|
@@ -5178,7 +5396,7 @@ const MrdTextField = class {
|
|
|
5178
5396
|
};
|
|
5179
5397
|
}
|
|
5180
5398
|
render() {
|
|
5181
|
-
return (h(Host, { key: '
|
|
5399
|
+
return (h(Host, { key: 'd2a6fb5735a3a01887cc467274a0ff9d71312124' }, h("div", { key: '7864bf852d43f93ebd0120a3ec1b72e54837d1ba', class: "mrd-text-field" }, h(FieldLabel, { key: 'bdad112197b44a643a58dd79c4648e284311199d', base: "mrd-text-field", label: this.label, required: this.required }), h("input", { key: '1d3e1cf3374ea2e5a83794b5110205964fff86e1', class: controlClass('mrd-text-field', !!this.error), type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: 'bb4ec51de7b6d360fdb3d46dd53e85a5d497bcce', base: "mrd-text-field", error: this.error }))));
|
|
5182
5400
|
}
|
|
5183
5401
|
};
|
|
5184
5402
|
MrdTextField.style = mrdTextFieldCss();
|
|
@@ -5247,7 +5465,7 @@ const MrdTextareaField = class {
|
|
|
5247
5465
|
}
|
|
5248
5466
|
}
|
|
5249
5467
|
render() {
|
|
5250
|
-
return (h(Host, { key: '
|
|
5468
|
+
return (h(Host, { key: 'de39890fc23146b880e69be7a8f04c91786ae9c9' }, h("div", { key: '0ccc855f3ee44553559a9ea8a70690466789f76d', class: "mrd-textarea-field" }, h(FieldLabel, { key: '2a16dcbeedbba8b5d8d1e8e8c0f021f14813f609', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: '979ecb0ed163e3f753d75635452eea49d76edf29', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: '8ea96a080086b68df55017a1464f6bce502f9a58', class: "mrd-textarea-field__editor" })), h(FieldError, { key: 'd6ac1a12f7be3594ed8cdb6d94b304c46dc8285b', base: "mrd-textarea-field", error: this.error }))));
|
|
5251
5469
|
}
|
|
5252
5470
|
get el() { return getElement(this); }
|
|
5253
5471
|
};
|
|
@@ -5278,9 +5496,9 @@ const MrdTimeField = class {
|
|
|
5278
5496
|
};
|
|
5279
5497
|
}
|
|
5280
5498
|
render() {
|
|
5281
|
-
return (h(Host, { key: '
|
|
5499
|
+
return (h(Host, { key: '588e298c4f52aa4e65d87bfdc6918282ed97b3ae' }, h("div", { key: 'eed7332ca78747d4ff8b6c8d06ad4674e1c37e69', class: "mrd-time-field" }, h(FieldLabel, { key: '6383beb79fd05dabdc408256e3326f9637e4c993', base: "mrd-time-field", label: this.label, required: this.required }), h("input", { key: 'b372d8b5dd523ee6182fe302450ce904ac17cc3c', class: controlClass('mrd-time-field', !!this.error), type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '7d8ce1e557bf583c0409e8f02893a15fadeab634', base: "mrd-time-field", error: this.error }))));
|
|
5282
5500
|
}
|
|
5283
5501
|
};
|
|
5284
5502
|
MrdTimeField.style = mrdTimeFieldCss();
|
|
5285
5503
|
|
|
5286
|
-
export { MrdBooleanField as mrd_boolean_field, MrdCurrencyField as mrd_currency_field, MrdDateField as mrd_date_field, MrdDatetimeField as mrd_datetime_field, MrdDocumentContainer as mrd_document_container, MrdDocumentList as mrd_document_list, MrdDocumentView as mrd_document_view, MrdEmailField as mrd_email_field, MrdField as mrd_field, MrdFileField as mrd_file_field, MrdForm as mrd_form, MrdHyperlinkField as mrd_hyperlink_field, MrdImageField as mrd_image_field, MrdLayoutSection as mrd_layout_section, MrdListField as mrd_list_field, MrdLongtextField as mrd_longtext_field, MrdNumberField as mrd_number_field, MrdRelationField as mrd_relation_field, MrdSecretField as mrd_secret_field, MrdTable as mrd_table, MrdTextField as mrd_text_field, MrdTextareaField as mrd_textarea_field, MrdTimeField as mrd_time_field };
|
|
5504
|
+
export { MrdBooleanField as mrd_boolean_field, MrdCurrencyField as mrd_currency_field, MrdDateField as mrd_date_field, MrdDatetimeField as mrd_datetime_field, MrdDocumentContainer as mrd_document_container, MrdDocumentList as mrd_document_list, MrdDocumentView as mrd_document_view, MrdEmailField as mrd_email_field, MrdField as mrd_field, MrdFileField as mrd_file_field, MrdFilePreview as mrd_file_preview, MrdForm as mrd_form, MrdHyperlinkField as mrd_hyperlink_field, MrdImageField as mrd_image_field, MrdLayoutSection as mrd_layout_section, MrdListField as mrd_list_field, MrdLongtextField as mrd_longtext_field, MrdNumberField as mrd_number_field, MrdRelationField as mrd_relation_field, MrdSecretField as mrd_secret_field, MrdTable as mrd_table, MrdTextField as mrd_text_field, MrdTextareaField as mrd_textarea_field, MrdTimeField as mrd_time_field };
|