@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.
Files changed (82) hide show
  1. package/dist/cjs/index.cjs.js +8 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/mosterdcomponents.cjs.js +1 -1
  4. package/dist/cjs/{mrd-boolean-field_23.cjs.entry.js → mrd-boolean-field_24.cjs.entry.js} +269 -50
  5. package/dist/collection/collection-manifest.json +1 -0
  6. package/dist/collection/components/documents/mrd-document-container/mrd-document-container.css +14 -1
  7. package/dist/collection/components/documents/mrd-document-container/mrd-document-container.js +30 -8
  8. package/dist/collection/components/documents/mrd-document-list/mrd-document-list.css +8 -5
  9. package/dist/collection/components/documents/mrd-document-list/mrd-document-list.js +28 -11
  10. package/dist/collection/components/documents/mrd-document-list/tree-view.js +14 -2
  11. package/dist/collection/components/documents/mrd-document-view/mrd-document-view.css +39 -29
  12. package/dist/collection/components/documents/mrd-document-view/mrd-document-view.js +109 -8
  13. package/dist/collection/components/documents/mrd-file-preview/file-preview-kind.js +30 -0
  14. package/dist/collection/components/documents/mrd-file-preview/mrd-file-preview.css +59 -0
  15. package/dist/collection/components/documents/mrd-file-preview/mrd-file-preview.js +212 -0
  16. package/dist/collection/components/fields/mrd-boolean-field/mrd-boolean-field.js +1 -1
  17. package/dist/collection/components/fields/mrd-currency-field/mrd-currency-field.js +1 -1
  18. package/dist/collection/components/fields/mrd-date-field/mrd-date-field.js +1 -1
  19. package/dist/collection/components/fields/mrd-datetime-field/mrd-datetime-field.js +1 -1
  20. package/dist/collection/components/fields/mrd-email-field/mrd-email-field.js +1 -1
  21. package/dist/collection/components/fields/mrd-file-field/mrd-file-field.js +1 -1
  22. package/dist/collection/components/fields/mrd-image-field/mrd-image-field.js +1 -1
  23. package/dist/collection/components/fields/mrd-longtext-field/mrd-longtext-field.js +1 -1
  24. package/dist/collection/components/fields/mrd-number-field/mrd-number-field.js +1 -1
  25. package/dist/collection/components/fields/mrd-secret-field/mrd-secret-field.js +2 -2
  26. package/dist/collection/components/fields/mrd-text-field/mrd-text-field.js +1 -1
  27. package/dist/collection/components/fields/mrd-textarea-field/mrd-textarea-field.js +1 -1
  28. package/dist/collection/components/fields/mrd-time-field/mrd-time-field.js +1 -1
  29. package/dist/collection/components/layout/mrd-layout-section/mrd-layout-section.css +5 -0
  30. package/dist/collection/components/layout/mrd-layout-section/mrd-layout-section.js +99 -9
  31. package/dist/collection/components/table/mrd-table/mrd-table.js +19 -5
  32. package/dist/collection/dev/api.js +9 -0
  33. package/dist/collection/dev/app.js +105 -6
  34. package/dist/collection/dev/example-data.js +24 -0
  35. package/dist/collection/types/client-layout.js +8 -0
  36. package/dist/collection/utils/i18n.js +32 -0
  37. package/dist/collection/utils/query-params.js +0 -4
  38. package/dist/components/client-layout.js +1 -1
  39. package/dist/components/i18n.js +1 -1
  40. package/dist/components/index.js +1 -1
  41. package/dist/components/mrd-boolean-field2.js +1 -1
  42. package/dist/components/mrd-currency-field2.js +1 -1
  43. package/dist/components/mrd-date-field2.js +1 -1
  44. package/dist/components/mrd-datetime-field2.js +1 -1
  45. package/dist/components/mrd-document-container2.js +1 -1
  46. package/dist/components/mrd-document-list2.js +1 -1
  47. package/dist/components/mrd-document-view2.js +1 -1
  48. package/dist/components/mrd-email-field2.js +1 -1
  49. package/dist/components/mrd-file-field2.js +1 -1
  50. package/dist/components/mrd-file-preview.d.ts +11 -0
  51. package/dist/components/mrd-file-preview.js +1 -0
  52. package/dist/components/mrd-file-preview2.js +1 -0
  53. package/dist/components/mrd-image-field2.js +1 -1
  54. package/dist/components/mrd-layout-section.js +1 -1
  55. package/dist/components/mrd-longtext-field2.js +1 -1
  56. package/dist/components/mrd-number-field2.js +1 -1
  57. package/dist/components/mrd-secret-field2.js +1 -1
  58. package/dist/components/mrd-table2.js +1 -1
  59. package/dist/components/mrd-text-field2.js +1 -1
  60. package/dist/components/mrd-textarea-field2.js +1 -1
  61. package/dist/components/mrd-time-field2.js +1 -1
  62. package/dist/esm/index.js +9 -1
  63. package/dist/esm/loader.js +1 -1
  64. package/dist/esm/mosterdcomponents.js +1 -1
  65. package/dist/esm/{mrd-boolean-field_23.entry.js → mrd-boolean-field_24.entry.js} +270 -52
  66. package/dist/mosterdcomponents/index.esm.js +1 -1
  67. package/dist/mosterdcomponents/mosterdcomponents.esm.js +1 -1
  68. package/dist/mosterdcomponents/p-e816d459.entry.js +1 -0
  69. package/dist/types/components/documents/mrd-document-container/mrd-document-container.d.ts +8 -2
  70. package/dist/types/components/documents/mrd-document-list/mrd-document-list.d.ts +8 -1
  71. package/dist/types/components/documents/mrd-document-list/tree-view.d.ts +1 -1
  72. package/dist/types/components/documents/mrd-document-view/mrd-document-view.d.ts +29 -1
  73. package/dist/types/components/documents/mrd-file-preview/file-preview-kind.d.ts +9 -0
  74. package/dist/types/components/documents/mrd-file-preview/mrd-file-preview.d.ts +41 -0
  75. package/dist/types/components/layout/mrd-layout-section/mrd-layout-section.d.ts +19 -1
  76. package/dist/types/components/table/mrd-table/mrd-table.d.ts +8 -2
  77. package/dist/types/components.d.ts +186 -13
  78. package/dist/types/index.d.ts +1 -0
  79. package/dist/types/types/client-layout.d.ts +10 -0
  80. package/dist/types/utils/query-params.d.ts +14 -0
  81. package/package.json +1 -1
  82. package/dist/mosterdcomponents/p-b1a2e108.entry.js +0 -1
@@ -0,0 +1,212 @@
1
+ import { Host, h } from "@stencil/core";
2
+ import { t } from "../../../utils/i18n";
3
+ import { detectPreviewKind } from "./file-preview-kind";
4
+ /**
5
+ * Renders a signed URL inline as a PDF (native browser viewer, via `<iframe>`)
6
+ * or an image (`<img>`), picked from `mimeType`/`fileName`. Purely
7
+ * presentational: the signed URL is used directly as element `src` — a
8
+ * navigation, not a fetch/XHR, so no CORS handling is needed here. Fetching
9
+ * the signed URL itself is the host's responsibility, same as `mrdLoadImage` /
10
+ * `setImagePreview` on mrd-layout-section.
11
+ */
12
+ export class MrdFilePreview {
13
+ constructor() {
14
+ /** Signed URL to render. */
15
+ this.src = '';
16
+ /** Declared mime type (e.g. 'application/pdf', 'image/png'), when known.
17
+ * Authoritative over `fileName` when present. */
18
+ this.mimeType = '';
19
+ /** Original file name — used for extension-based detection when `mimeType`
20
+ * is absent, and as alt/title text. */
21
+ this.fileName = '';
22
+ /** The file's own reference href (not the signed preview URL in `src`).
23
+ * When set, an unsupported type falls back to the same download button
24
+ * used elsewhere in the library, so hosts need no new wiring. */
25
+ this.href = '';
26
+ this.locale = navigator.language;
27
+ this.imageFailed = false;
28
+ this.onImageError = () => {
29
+ this.imageFailed = true;
30
+ };
31
+ this.retry = () => {
32
+ this.imageFailed = false;
33
+ this.mrdPreviewReload.emit();
34
+ };
35
+ }
36
+ srcChanged() {
37
+ this.imageFailed = false;
38
+ }
39
+ render() {
40
+ const kind = detectPreviewKind(this.mimeType, this.fileName);
41
+ if (kind === 'pdf') {
42
+ return (h(Host, null, h("iframe", { class: "mrd-file-preview__frame", src: this.src, title: this.fileName || 'preview' })));
43
+ }
44
+ if (kind === 'image') {
45
+ if (this.imageFailed) {
46
+ 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)))));
47
+ }
48
+ return (h(Host, null, h("img", { class: "mrd-file-preview__image", src: this.src, alt: this.fileName || '', onError: this.onImageError })));
49
+ }
50
+ 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))))));
51
+ }
52
+ static get is() { return "mrd-file-preview"; }
53
+ static get encapsulation() { return "scoped"; }
54
+ static get originalStyleUrls() {
55
+ return {
56
+ "$": ["mrd-file-preview.scss"]
57
+ };
58
+ }
59
+ static get styleUrls() {
60
+ return {
61
+ "$": ["mrd-file-preview.css"]
62
+ };
63
+ }
64
+ static get properties() {
65
+ return {
66
+ "src": {
67
+ "type": "string",
68
+ "mutable": false,
69
+ "complexType": {
70
+ "original": "string",
71
+ "resolved": "string",
72
+ "references": {}
73
+ },
74
+ "required": false,
75
+ "optional": false,
76
+ "docs": {
77
+ "tags": [],
78
+ "text": "Signed URL to render."
79
+ },
80
+ "getter": false,
81
+ "setter": false,
82
+ "reflect": false,
83
+ "attribute": "src",
84
+ "defaultValue": "''"
85
+ },
86
+ "mimeType": {
87
+ "type": "string",
88
+ "mutable": false,
89
+ "complexType": {
90
+ "original": "string",
91
+ "resolved": "string",
92
+ "references": {}
93
+ },
94
+ "required": false,
95
+ "optional": false,
96
+ "docs": {
97
+ "tags": [],
98
+ "text": "Declared mime type (e.g. 'application/pdf', 'image/png'), when known.\nAuthoritative over `fileName` when present."
99
+ },
100
+ "getter": false,
101
+ "setter": false,
102
+ "reflect": false,
103
+ "attribute": "mime-type",
104
+ "defaultValue": "''"
105
+ },
106
+ "fileName": {
107
+ "type": "string",
108
+ "mutable": false,
109
+ "complexType": {
110
+ "original": "string",
111
+ "resolved": "string",
112
+ "references": {}
113
+ },
114
+ "required": false,
115
+ "optional": false,
116
+ "docs": {
117
+ "tags": [],
118
+ "text": "Original file name \u2014 used for extension-based detection when `mimeType`\nis absent, and as alt/title text."
119
+ },
120
+ "getter": false,
121
+ "setter": false,
122
+ "reflect": false,
123
+ "attribute": "file-name",
124
+ "defaultValue": "''"
125
+ },
126
+ "href": {
127
+ "type": "string",
128
+ "mutable": false,
129
+ "complexType": {
130
+ "original": "string",
131
+ "resolved": "string",
132
+ "references": {}
133
+ },
134
+ "required": false,
135
+ "optional": false,
136
+ "docs": {
137
+ "tags": [],
138
+ "text": "The file's own reference href (not the signed preview URL in `src`).\nWhen set, an unsupported type falls back to the same download button\nused elsewhere in the library, so hosts need no new wiring."
139
+ },
140
+ "getter": false,
141
+ "setter": false,
142
+ "reflect": false,
143
+ "attribute": "href",
144
+ "defaultValue": "''"
145
+ },
146
+ "locale": {
147
+ "type": "string",
148
+ "mutable": false,
149
+ "complexType": {
150
+ "original": "string",
151
+ "resolved": "string",
152
+ "references": {}
153
+ },
154
+ "required": false,
155
+ "optional": false,
156
+ "docs": {
157
+ "tags": [],
158
+ "text": ""
159
+ },
160
+ "getter": false,
161
+ "setter": false,
162
+ "reflect": false,
163
+ "attribute": "locale",
164
+ "defaultValue": "navigator.language"
165
+ }
166
+ };
167
+ }
168
+ static get states() {
169
+ return {
170
+ "imageFailed": {}
171
+ };
172
+ }
173
+ static get events() {
174
+ return [{
175
+ "method": "mrdPreviewReload",
176
+ "name": "mrdPreviewReload",
177
+ "bubbles": true,
178
+ "cancelable": true,
179
+ "composed": true,
180
+ "docs": {
181
+ "tags": [],
182
+ "text": "The image failed to load \u2014 most likely an expired signed URL. Host\nshould fetch a fresh signed URL and update `src`.\nNote: this is only raised for images. Browsers don't reliably surface\nHTTP-level failures (e.g. a 403 on an expired URL) through an iframe's\nload/error events, so the same detection isn't available for PDFs."
183
+ },
184
+ "complexType": {
185
+ "original": "void",
186
+ "resolved": "void",
187
+ "references": {}
188
+ }
189
+ }, {
190
+ "method": "mrdDownload",
191
+ "name": "mrdDownload",
192
+ "bubbles": true,
193
+ "cancelable": true,
194
+ "composed": true,
195
+ "docs": {
196
+ "tags": [],
197
+ "text": "Download the file. Same shape as mrd-document-view / mrd-layout-section's\nmrdDownload \u2014 host resolves `href` to a signed URL."
198
+ },
199
+ "complexType": {
200
+ "original": "{ href: string; fileName: string }",
201
+ "resolved": "{ href: string; fileName: string; }",
202
+ "references": {}
203
+ }
204
+ }];
205
+ }
206
+ static get watchers() {
207
+ return [{
208
+ "propName": "src",
209
+ "methodName": "srcChanged"
210
+ }];
211
+ }
212
+ }
@@ -20,7 +20,7 @@ export class MrdBooleanField {
20
20
  this.checked = !!this.value;
21
21
  }
22
22
  render() {
23
- return (h(Host, { key: 'f7851813646d31c565c262bf3c8d4083177dd993' }, h("div", { key: '4b3c9f46e8b79bdc97ef5815afb85ba5ddde0c9a', class: "mrd-boolean-field" }, h("label", { key: 'f81fa28d5a79de0445c2c192352343f0807609a1', class: "mrd-boolean-field__toggle-label" }, h("input", { key: '510a4f5533cbe2741b8df34cb64fc739475a26cf', 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: '949e042c8af0f2872cf973a0d5407fce972eb240', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: 'e8c52b5820887b2a8ec9a20eb7e4116a528d27d4', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
23
+ 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))))));
24
24
  }
25
25
  static get is() { return "mrd-boolean-field"; }
26
26
  static get encapsulation() { return "scoped"; }
@@ -42,7 +42,7 @@ export class MrdCurrencyField {
42
42
  }
43
43
  render() {
44
44
  const hasError = !!this.error;
45
- return (h(Host, { key: '24c530db6e0420af39fa0a35b31e966286f2d00c' }, h("div", { key: '795bc336425fbf1b86828f4a8f5df93930169a3c', class: "mrd-currency-field" }, h(FieldLabel, { key: 'b302cd9296c29ed5719b1f768bd5d4eea86f6406', base: "mrd-currency-field", label: this.label, required: this.required }), h("div", { key: '7efca51615f405ffd660e120accae32f55a9b5a0', class: "mrd-currency-field__row" }, h("input", { key: '5c6fd3549d5631fba49a8a701e6c3a1d0a672890', 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: '83ad5e92b623c3c60d161b8828e780adb476682c', 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: 'b059290bb566b119c4f192e750b3e365446243e6', base: "mrd-currency-field", error: this.error }))));
45
+ 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 }))));
46
46
  }
47
47
  static get is() { return "mrd-currency-field"; }
48
48
  static get encapsulation() { return "scoped"; }
@@ -20,7 +20,7 @@ export class MrdDateField {
20
20
  };
21
21
  }
22
22
  render() {
23
- return (h(Host, { key: '71be9e4bcc87b40cf3b777d3fe0bff23c1a0fa94' }, h("div", { key: '40ced03df5d4185264ba9d03c832b3870ce8ae19', class: "mrd-date-field" }, h(FieldLabel, { key: 'd85ec7c4617a22c8c5862253e8090c85484f8c41', base: "mrd-date-field", label: this.label, required: this.required }), h("input", { key: 'c9211fdefdd9527c7ff40ed9de33153303fc1742', 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: '9dd64475bf8a77bea5344faa71f20485b34b86f9', base: "mrd-date-field", error: this.error }))));
23
+ 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 }))));
24
24
  }
25
25
  static get is() { return "mrd-date-field"; }
26
26
  static get encapsulation() { return "scoped"; }
@@ -47,7 +47,7 @@ export class MrdDatetimeField {
47
47
  return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
48
48
  }
49
49
  render() {
50
- return (h(Host, { key: 'ac07ec2ba79cde998d1247e9d71de336c0e72a64' }, h("div", { key: '8144cf68c4b6b9cbc8396903b84bb355f380ceda', class: "mrd-datetime-field" }, h(FieldLabel, { key: '972686469f68c932e33b8d2c3806422553a3cce3', base: "mrd-datetime-field", label: this.label, required: this.required }), h("input", { key: '370b6032c38fbee22e662c1b2871f96b53b58956', 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: 'b7a812f82a6b0d2c938aa1f1c2494df685258555', base: "mrd-datetime-field", error: this.error }))));
50
+ 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 }))));
51
51
  }
52
52
  static get is() { return "mrd-datetime-field"; }
53
53
  static get encapsulation() { return "scoped"; }
@@ -24,7 +24,7 @@ export class MrdEmailField {
24
24
  };
25
25
  }
26
26
  render() {
27
- return (h(Host, { key: '93f7c4975c24e6001e772f2858344edec04cda10' }, h("div", { key: '4f49a2a1f68a4161762861c5d54fd3690c88ac5d', class: "mrd-email-field" }, h(FieldLabel, { key: '23b20799f3e7c04889b7bc3a271e61b0bb5d7537', base: "mrd-email-field", label: this.label, required: this.required }), h("input", { key: '0fc452bfb9295a80102eeed4b32bcc9475c9d17b', 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: '34945fff9c69cf2f0aeb56492c95052250514d5c', base: "mrd-email-field", error: this.error }))));
27
+ 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 }))));
28
28
  }
29
29
  static get is() { return "mrd-email-field"; }
30
30
  static get encapsulation() { return "scoped"; }
@@ -74,7 +74,7 @@ export class MrdFileField {
74
74
  error: hasError,
75
75
  disabled: this.disabled || this.uploading,
76
76
  });
77
- return (h(Host, { key: '2c4cee79cd0f95ed3750dfc86007a2b36aa3da15' }, h("div", { key: '5b47d0f83e8e38b22bb04409544ec2af580274f1', class: "mrd-file-field" }, h(FieldLabel, { key: '47a92d5680670bf750854fa6e7883da54a40baec', base: "mrd-file-field", label: this.label, required: this.required }), h("div", { key: '684f6ab39c32635fb5ca966ccab4a061d8682f89', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: 'a47231d8c68280623daf0c5a2e4341417e7a88d0', 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: '5f18e91aa94319a5571c368e745c108fb0d371a7', base: "mrd-file-field", error: this.error }))));
77
+ 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 }))));
78
78
  }
79
79
  static get is() { return "mrd-file-field"; }
80
80
  static get encapsulation() { return "scoped"; }
@@ -84,7 +84,7 @@ export class MrdImageField {
84
84
  error: hasError,
85
85
  disabled: this.disabled || this.uploading,
86
86
  });
87
- return (h(Host, { key: 'ab78d93ab6c810363a8993bea4545f7406680e58' }, h("div", { key: '727ae5d9c1cce22d90d26229a9ea5d677abb4b07', class: "mrd-image-field" }, h(FieldLabel, { key: 'aab0e9fcc0204e8ea617453b5ca458f683194125', base: "mrd-image-field", label: this.label, required: this.required }), h("div", { key: '1241faff26c47a303fd0431201f490c6b8725987', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: '70e3b8f869927ad525465ace96ed3ea24f5b7555', 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: '01552a994c1e5a9f25129586a95562c32a377046', base: "mrd-image-field", error: this.error }))));
87
+ 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 }))));
88
88
  }
89
89
  static get is() { return "mrd-image-field"; }
90
90
  static get encapsulation() { return "scoped"; }
@@ -21,7 +21,7 @@ export class MrdLongtextField {
21
21
  };
22
22
  }
23
23
  render() {
24
- return (h(Host, { key: '1d23db1324fa0fc97a07fdae65f2d84e43419a72' }, h("div", { key: '0ad2b262088aa3745f088a44af26649593805840', class: "mrd-longtext-field" }, h(FieldLabel, { key: '5a78739d6ced4e2df77589b64c66401819c4b5c7', 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: '5b870a75b518e2808518b83c9abebf8589a86108', base: "mrd-longtext-field", error: this.error }))));
24
+ 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 }))));
25
25
  }
26
26
  static get is() { return "mrd-longtext-field"; }
27
27
  static get encapsulation() { return "scoped"; }
@@ -70,7 +70,7 @@ export class MrdNumberField {
70
70
  const hasError = !!this.error;
71
71
  const suffix = this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
72
72
  this.dataType === ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
73
- return (h(Host, { key: 'fd7220e0a7f574ab0c61094a9ba7fd764e1adafd' }, h("div", { key: 'ef6118a339c9766f187cd2b1fa3fcc85ef8cb69f', class: "mrd-number-field" }, h(FieldLabel, { key: '015207ae65df07f7ee7bbc24ccab45524176dbf7', base: "mrd-number-field", label: this.label, required: this.required }), h("div", { key: '954b99cbcf4002b0336810e354f1a46d39cb8076', class: "mrd-number-field__input-wrapper" }, h("input", { key: 'dddc08e090b200736d186960db1436e44f42703c', 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: '87e12bd737aed0a845470cef66d7a6d61d11de0b', base: "mrd-number-field", error: this.error }))));
73
+ 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 }))));
74
74
  }
75
75
  static get is() { return "mrd-number-field"; }
76
76
  static get encapsulation() { return "scoped"; }
@@ -21,9 +21,9 @@ export class MrdSecretField {
21
21
  };
22
22
  }
23
23
  render() {
24
- return (h(Host, { key: 'acb865b235652feba713aedda7a7fccbdc01ad20' }, h("div", { key: 'e7471ade9c683cac9469ec89778c967badb046f9', class: "mrd-secret-field" }, h(FieldLabel, { key: '2f9b864779ead352fda53af8597ddcd31377249d', base: "mrd-secret-field", label: this.label, required: this.required }), this.disabled
24
+ 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
25
25
  ? (h("span", { class: "mrd-secret-field__masked", "aria-label": this.label }, this.value ? '••••••••' : ''))
26
- : (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: '438418e2cf0f53a6c247d5f332aae8e8978b94ea', base: "mrd-secret-field", error: this.error }))));
26
+ : (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 }))));
27
27
  }
28
28
  static get is() { return "mrd-secret-field"; }
29
29
  static get encapsulation() { return "scoped"; }
@@ -21,7 +21,7 @@ export class MrdTextField {
21
21
  };
22
22
  }
23
23
  render() {
24
- return (h(Host, { key: '71de1ae949941820574fc2d45cac6cca8264d8f9' }, h("div", { key: 'a63d3dd0811e012ae3d5a9f02c1a2ad1fcc0af86', class: "mrd-text-field" }, h(FieldLabel, { key: '1a6db878b634364f47522209344540a9cdc20635', base: "mrd-text-field", label: this.label, required: this.required }), h("input", { key: 'b3cd0338f13c5c2c8b744df62d3d02f3bc380aa1', 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: '1530066fefbda722df0c37871978995a139fcef0', base: "mrd-text-field", error: this.error }))));
24
+ 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 }))));
25
25
  }
26
26
  static get is() { return "mrd-text-field"; }
27
27
  static get encapsulation() { return "scoped"; }
@@ -60,7 +60,7 @@ export class MrdTextareaField {
60
60
  }
61
61
  }
62
62
  render() {
63
- return (h(Host, { key: '464c1edde8447043d9352f1b5f9757bba97e9b17' }, h("div", { key: '8d06728214f54feeb1063700e5aaf7c439eb5473', class: "mrd-textarea-field" }, h(FieldLabel, { key: 'dbf93ecf41bd704706b49f8c455262798fbbe10b', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: '9c39ccfa38ee01b880973966e910ee32aa60b144', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: '0217cd4350c1933018b2b8f489516b6d43a52538', class: "mrd-textarea-field__editor" })), h(FieldError, { key: '62d2a5db053ea6e4ec6868440f3ab31e1c05e633', base: "mrd-textarea-field", error: this.error }))));
63
+ 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 }))));
64
64
  }
65
65
  static get is() { return "mrd-textarea-field"; }
66
66
  static get encapsulation() { return "scoped"; }
@@ -20,7 +20,7 @@ export class MrdTimeField {
20
20
  };
21
21
  }
22
22
  render() {
23
- return (h(Host, { key: 'fc30bdeb7c8d37bebc67a768f48013602879fb3d' }, h("div", { key: '52f899a889376773c1948f0c116670684db25cf4', class: "mrd-time-field" }, h(FieldLabel, { key: '3aba58f122fa4bb9f0ba4ad0b56fc3b29f03d4a3', base: "mrd-time-field", label: this.label, required: this.required }), h("input", { key: 'e39718394a195eafaf47aa2e62d560341bb0daed', 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: '07ad4ccbc5188e129d8bd3085e856839ec6a81c9', base: "mrd-time-field", error: this.error }))));
23
+ 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 }))));
24
24
  }
25
25
  static get is() { return "mrd-time-field"; }
26
26
  static get encapsulation() { return "scoped"; }
@@ -1,3 +1,8 @@
1
+ :host {
2
+ display: block;
3
+ width: 100%;
4
+ }
5
+
1
6
  .mrd-layout-section {
2
7
  font-family: var(--mrd-font-family);
3
8
  font-size: var(--mrd-font-size-base);
@@ -1,5 +1,5 @@
1
1
  import { Host, h } from "@stencil/core";
2
- import { ClientLayoutItemType, ClientLayoutItemFieldDataType, resolveArchetype, ARCHETYPE_DOCUMENT, } from "../../../types/client-layout";
2
+ import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutNavigateBehaviour, resolveArchetype, ARCHETYPE_DOCUMENT, } from "../../../types/client-layout";
3
3
  import { viewKeyFor, flattenItems, buildContainerHref } from "./layout-helpers";
4
4
  import { renderField } from "./field-value";
5
5
  export class MrdLayoutSection {
@@ -16,11 +16,17 @@ export class MrdLayoutSection {
16
16
  /** Top-level archetypes on the object dashboard. When it contains commons.document,
17
17
  * the record is rendered as a single-document view instead of generic fields. */
18
18
  this.archetypes = [];
19
+ /** Minimum height (px) of the commons.document inline file preview — it
20
+ * stretches taller in the wide side-by-side layout. Pass a smaller value
21
+ * when embedding the record in an overlay with limited height. */
22
+ this.documentPreviewHeight = 640;
19
23
  this.searchQueryMap = {};
20
24
  this.searchResultsMap = {};
21
25
  this.imagePreviewUrl = null;
22
26
  this.imagePreviews = {};
23
27
  this.openHistoryField = null;
28
+ /** Signed URL for the commons.document archetype's inline file preview. */
29
+ this.documentPreviewUrl = null;
24
30
  this.historyClickOutside = null;
25
31
  this.searchTimers = {};
26
32
  this.handleViewLoadPage = (e, name) => {
@@ -144,6 +150,11 @@ export class MrdLayoutSection {
144
150
  async openImagePreview(url) {
145
151
  this.imagePreviewUrl = url;
146
152
  }
153
+ /** Provide a resolved signed URL for the commons.document archetype's inline
154
+ * file preview, in response to mrdLoadDocumentPreview. */
155
+ async setDocumentPreviewUrl(url) {
156
+ this.documentPreviewUrl = url;
157
+ }
147
158
  resolveSearchKey() {
148
159
  var _a;
149
160
  const items = flattenItems(this.items).filter(i => i.type === ClientLayoutItemType.SEARCH);
@@ -233,6 +244,10 @@ export class MrdLayoutSection {
233
244
  e.stopPropagation();
234
245
  this.mrdLoadViewAggregations.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
235
246
  }, onMrdNavigate: (e) => {
247
+ // mrd-document-container already hardcodes navigateBehaviour to
248
+ // OVERLAY_PAGE (documents are always the quick-look use case) —
249
+ // relay as-is, unlike the generic table path below which takes it
250
+ // from the item's configuration.
236
251
  e.stopPropagation();
237
252
  this.mrdNavigate.emit(e.detail);
238
253
  }, onMrdAction: (e) => {
@@ -256,10 +271,15 @@ export class MrdLayoutSection {
256
271
  e.stopPropagation();
257
272
  this.mrdLoadViewAggregations.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
258
273
  }, onMrdRowClick: (e) => {
259
- var _a, _b, _c;
274
+ var _a, _b, _c, _d;
260
275
  e.stopPropagation();
261
- const row = e.detail;
262
- this.mrdNavigate.emit({ href: (_b = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href, label: (_c = row === null || row === void 0 ? void 0 : row.name) !== null && _c !== void 0 ? _c : '' });
276
+ const { row, listContext } = e.detail;
277
+ this.mrdNavigate.emit({
278
+ 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,
279
+ label: (_c = row === null || row === void 0 ? void 0 : row.name) !== null && _c !== void 0 ? _c : '',
280
+ navigateBehaviour: (_d = item.navigateBehaviour) !== null && _d !== void 0 ? _d : ClientLayoutNavigateBehaviour.PAGE,
281
+ listContext,
282
+ });
263
283
  }, onMrdAction: (e) => {
264
284
  var _a;
265
285
  e.stopPropagation();
@@ -308,17 +328,18 @@ export class MrdLayoutSection {
308
328
  * a recognisable document instead of generic fields, keeping any related views/
309
329
  * searches below it. */
310
330
  renderDocumentObject(archetype) {
331
+ var _a;
311
332
  const related = this.items.filter(it => it.type === ClientLayoutItemType.VIEW ||
312
333
  it.type === ClientLayoutItemType.RELATED_VIEW ||
313
334
  it.type === ClientLayoutItemType.SEARCH);
314
335
  return [
315
- 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); } }),
336
+ 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); } }),
316
337
  ...related.map(it => this.renderItem(it)),
317
338
  ];
318
339
  }
319
340
  render() {
320
341
  const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
321
- return (h(Host, { key: '5d778188356a25ea13d45745dc5ed573ab2b2ef0' }, h("div", { key: '0b673a4bcf8b36cd21662bb8a3506cc3f30edb04', class: "mrd-layout-section" }, docArchetype
342
+ return (h(Host, { key: '9b79e194ab3fc37bd9e97e69d06df37a5f26dfab' }, h("div", { key: '15db5e082ccfbe4b0b5b75e11a4eaac117c5d577', class: "mrd-layout-section" }, docArchetype
322
343
  ? this.renderDocumentObject(docArchetype)
323
344
  : this.items.map(item => this.renderItem(item))), this.renderImageModal()));
324
345
  }
@@ -480,6 +501,26 @@ export class MrdLayoutSection {
480
501
  "getter": false,
481
502
  "setter": false,
482
503
  "defaultValue": "[]"
504
+ },
505
+ "documentPreviewHeight": {
506
+ "type": "number",
507
+ "mutable": false,
508
+ "complexType": {
509
+ "original": "number",
510
+ "resolved": "number",
511
+ "references": {}
512
+ },
513
+ "required": false,
514
+ "optional": false,
515
+ "docs": {
516
+ "tags": [],
517
+ "text": "Minimum height (px) of the commons.document inline file preview \u2014 it\nstretches taller in the wide side-by-side layout. Pass a smaller value\nwhen embedding the record in an overlay with limited height."
518
+ },
519
+ "getter": false,
520
+ "setter": false,
521
+ "reflect": false,
522
+ "attribute": "document-preview-height",
523
+ "defaultValue": "640"
483
524
  }
484
525
  };
485
526
  }
@@ -489,7 +530,8 @@ export class MrdLayoutSection {
489
530
  "searchResultsMap": {},
490
531
  "imagePreviewUrl": {},
491
532
  "imagePreviews": {},
492
- "openHistoryField": {}
533
+ "openHistoryField": {},
534
+ "documentPreviewUrl": {}
493
535
  };
494
536
  }
495
537
  static get events() {
@@ -504,14 +546,26 @@ export class MrdLayoutSection {
504
546
  "text": ""
505
547
  },
506
548
  "complexType": {
507
- "original": "{ href?: string; label: string; navigate?: ClientLayoutItemNavigate }",
508
- "resolved": "{ href?: string | undefined; label: string; navigate?: ClientLayoutItemNavigate | undefined; }",
549
+ "original": "{ href?: string; label: string; navigate?: ClientLayoutItemNavigate; navigateBehaviour?: ClientLayoutNavigateBehaviour; listContext?: ListNavigationContext }",
550
+ "resolved": "{ href?: string | undefined; label: string; navigate?: ClientLayoutItemNavigate | undefined; navigateBehaviour?: ClientLayoutNavigateBehaviour | undefined; listContext?: ListNavigationContext | undefined; }",
509
551
  "references": {
510
552
  "ClientLayoutItemNavigate": {
511
553
  "location": "import",
512
554
  "path": "../../../types/client-layout",
513
555
  "id": "src/types/client-layout.ts::ClientLayoutItemNavigate",
514
556
  "referenceLocation": "ClientLayoutItemNavigate"
557
+ },
558
+ "ClientLayoutNavigateBehaviour": {
559
+ "location": "import",
560
+ "path": "../../../types/client-layout",
561
+ "id": "src/types/client-layout.ts::ClientLayoutNavigateBehaviour",
562
+ "referenceLocation": "ClientLayoutNavigateBehaviour"
563
+ },
564
+ "ListNavigationContext": {
565
+ "location": "import",
566
+ "path": "../../../utils/query-params",
567
+ "id": "src/utils/query-params.ts::ListNavigationContext",
568
+ "referenceLocation": "ListNavigationContext"
515
569
  }
516
570
  }
517
571
  }
@@ -575,6 +629,21 @@ export class MrdLayoutSection {
575
629
  "resolved": "{ fieldName: string; href: string; }",
576
630
  "references": {}
577
631
  }
632
+ }, {
633
+ "method": "mrdLoadDocumentPreview",
634
+ "name": "mrdLoadDocumentPreview",
635
+ "bubbles": true,
636
+ "cancelable": true,
637
+ "composed": true,
638
+ "docs": {
639
+ "tags": [],
640
+ "text": "Re-emitted from an embedded mrd-document-view's mrdLoadPreview (commons.document\nsingle-object view); host resolves the file href to a signed URL and calls\nsetDocumentPreviewUrl()."
641
+ },
642
+ "complexType": {
643
+ "original": "{ href: string }",
644
+ "resolved": "{ href: string; }",
645
+ "references": {}
646
+ }
578
647
  }, {
579
648
  "method": "mrdViewAction",
580
649
  "name": "mrdViewAction",
@@ -935,6 +1004,27 @@ export class MrdLayoutSection {
935
1004
  "text": "Open the lightbox directly with a URL (e.g. after mrdDownload on a FILE field).",
936
1005
  "tags": []
937
1006
  }
1007
+ },
1008
+ "setDocumentPreviewUrl": {
1009
+ "complexType": {
1010
+ "signature": "(url: string) => Promise<void>",
1011
+ "parameters": [{
1012
+ "name": "url",
1013
+ "type": "string",
1014
+ "docs": ""
1015
+ }],
1016
+ "references": {
1017
+ "Promise": {
1018
+ "location": "global",
1019
+ "id": "global::Promise"
1020
+ }
1021
+ },
1022
+ "return": "Promise<void>"
1023
+ },
1024
+ "docs": {
1025
+ "text": "Provide a resolved signed URL for the commons.document archetype's inline\nfile preview, in response to mrdLoadDocumentPreview.",
1026
+ "tags": []
1027
+ }
938
1028
  }
939
1029
  };
940
1030
  }