@schukai/monster 4.125.3 → 4.126.0
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/CHANGELOG.md +19 -0
- package/package.json +1 -1
- package/source/components/form/style/field-layout.pcss +350 -0
- package/source/components/form/style/field-set.pcss +4 -0
- package/source/components/form/style/wizard.pcss +57 -0
- package/source/components/form/stylesheet/field-layout.mjs +38 -0
- package/source/components/form/stylesheet/field-set.mjs +1 -1
- package/source/components/form/stylesheet/wizard.mjs +38 -0
- package/source/components/form/wizard.mjs +1326 -0
- package/source/monster.mjs +1 -0
- package/test/cases/components/datatable/pagination.mjs +1 -1
- package/test/cases/components/form/wizard.mjs +153 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
+
## [4.126.0] - 2026-03-13
|
|
6
|
+
|
|
7
|
+
### Add Features
|
|
8
|
+
|
|
9
|
+
- Increase timeout for Pagination tests
|
|
10
|
+
- **conversion:** use field layout classes in wizard example ([#387](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/387))
|
|
11
|
+
- **conversion:** add reusable field layout classes ([#388](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/388))
|
|
12
|
+
- **conversion:** add reusable wizard control ([#387](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/387))
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
- **field-set:** remove border inside wizard panels
|
|
16
|
+
- **wizard:** hide back button on first panel
|
|
17
|
+
### Changes
|
|
18
|
+
|
|
19
|
+
- work in progress
|
|
20
|
+
- Close issue [#387](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/387) and move files
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
5
24
|
## [4.125.3] - 2026-03-11
|
|
6
25
|
|
|
7
26
|
### Bug Fixes
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.5","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.
|
|
1
|
+
{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.5","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.126.0"}
|
|
@@ -0,0 +1,350 @@
|
|
|
1
|
+
@import "../../style/color.pcss";
|
|
2
|
+
@import "../../style/theme.pcss";
|
|
3
|
+
@import "../../style/border.pcss";
|
|
4
|
+
@import "../../style/form.pcss";
|
|
5
|
+
@import "../../style/control.pcss";
|
|
6
|
+
@import "../../style/badge.pcss";
|
|
7
|
+
@import '../../style/mixin/typography.pcss';
|
|
8
|
+
|
|
9
|
+
.monster-field-layout {
|
|
10
|
+
container-type: inline-size;
|
|
11
|
+
container-name: field-layout;
|
|
12
|
+
display: grid;
|
|
13
|
+
grid-template-columns: auto 1fr;
|
|
14
|
+
grid-gap: 0.8rem;
|
|
15
|
+
accent-color: var(--monster-color-secondary-2);
|
|
16
|
+
--monster-field-set-h1-size: xx-large;
|
|
17
|
+
--monster-field-set-h2-size: x-large;
|
|
18
|
+
--monster-field-set-h3-size: large;
|
|
19
|
+
--monster-field-set-h4-size: medium;
|
|
20
|
+
--monster-field-set-h5-size: small;
|
|
21
|
+
--monster-field-set-h6-size: smaller;
|
|
22
|
+
--monster-field-set-heading-margin-top: 1rem;
|
|
23
|
+
--monster-field-set-heading-margin-top-first: 0.3rem;
|
|
24
|
+
--monster-field-set-heading-margin-top-1200: 2.2rem;
|
|
25
|
+
--monster-field-set-heading-margin-top-first-1200: 0.6rem;
|
|
26
|
+
--monster-field-set-heading-margin-top-900: 1.8rem;
|
|
27
|
+
--monster-field-set-heading-margin-top-first-900: 0.5rem;
|
|
28
|
+
--monster-field-set-heading-margin-top-500: 1.3rem;
|
|
29
|
+
--monster-field-set-heading-margin-top-first-500: 0.4rem;
|
|
30
|
+
@mixin text;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.monster-field-layout.multiple-columns {
|
|
34
|
+
grid-template-columns: auto 1fr auto 1fr auto 1fr;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.monster-field-layout > label,
|
|
38
|
+
.monster-field-layout > .label {
|
|
39
|
+
color: var(--monster-color-primary-1);
|
|
40
|
+
border-bottom: thin dotted var(--monster-color-primary-1);
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: flex-start;
|
|
43
|
+
gap: 0.4rem;
|
|
44
|
+
justify-content: space-between;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.monster-field-layout > hr,
|
|
48
|
+
.monster-field-layout > h1,
|
|
49
|
+
.monster-field-layout > h2,
|
|
50
|
+
.monster-field-layout > h3,
|
|
51
|
+
.monster-field-layout > h4,
|
|
52
|
+
.monster-field-layout > h5,
|
|
53
|
+
.monster-field-layout > h6 {
|
|
54
|
+
grid-column: 1 / -1;
|
|
55
|
+
margin: var(--monster-field-set-heading-margin-top, 1rem) 0 0.1rem;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.monster-field-layout > h1 {
|
|
59
|
+
font-size: var(--monster-field-set-h1-size, xx-large);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.monster-field-layout > h2 {
|
|
63
|
+
font-size: var(--monster-field-set-h2-size, x-large);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.monster-field-layout > h3 {
|
|
67
|
+
font-size: var(--monster-field-set-h3-size, large);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.monster-field-layout > h4 {
|
|
71
|
+
font-size: var(--monster-field-set-h4-size, medium);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.monster-field-layout > h5 {
|
|
75
|
+
font-size: var(--monster-field-set-h5-size, small);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.monster-field-layout > h6 {
|
|
79
|
+
font-size: var(--monster-field-set-h6-size, smaller);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.monster-field-layout > h1:first-of-type,
|
|
83
|
+
.monster-field-layout > h2:first-of-type,
|
|
84
|
+
.monster-field-layout > h3:first-of-type,
|
|
85
|
+
.monster-field-layout > h4:first-of-type,
|
|
86
|
+
.monster-field-layout > h5:first-of-type {
|
|
87
|
+
margin-top: var(--monster-field-set-heading-margin-top-first, 0.3rem);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.monster-field-layout > hr {
|
|
91
|
+
border: none;
|
|
92
|
+
border-top: thin dotted var(--monster-color-gray-3);
|
|
93
|
+
margin: 1rem 0;
|
|
94
|
+
padding: 0;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.monster-field-layout > hr.delimiter {
|
|
98
|
+
border: none;
|
|
99
|
+
margin: 0;
|
|
100
|
+
padding: 0;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.monster-field-layout > .grid-span-full {
|
|
104
|
+
grid-column-end: -1;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.monster-field-layout > .grid-start-1 {
|
|
108
|
+
grid-column-start: 1;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.monster-field-layout > .grid-start-2 {
|
|
112
|
+
grid-column-start: 2;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.monster-field-layout > .grid-start-3 {
|
|
116
|
+
grid-column-start: 3;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.monster-field-layout > .grid-start-4 {
|
|
120
|
+
grid-column-start: 4;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.monster-field-layout > .grid-double-span {
|
|
124
|
+
grid-column: span 3;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.monster-field-layout > .grid-to-end {
|
|
128
|
+
grid-column-end: -1;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.monster-field-layout > input[type="text"],
|
|
132
|
+
.monster-field-layout > input[type="password"],
|
|
133
|
+
.monster-field-layout > input[type="email"],
|
|
134
|
+
.monster-field-layout > input[type="number"],
|
|
135
|
+
.monster-field-layout > input[type="tel"] {
|
|
136
|
+
height: -webkit-fill-available;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.monster-field-layout > input:not([type="checkbox"]):not([type="radio"]) {
|
|
140
|
+
width: 100%;
|
|
141
|
+
border-radius: var(--monster-theme-control-border-radius);
|
|
142
|
+
border-width: var(--monster-theme-control-border-width);
|
|
143
|
+
border-color: var(--monster-theme-control-border-color);
|
|
144
|
+
border-style: var(--monster-theme-control-border-style);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.monster-field-layout > select {
|
|
148
|
+
width: 100%;
|
|
149
|
+
border-radius: var(--monster-theme-control-border-radius);
|
|
150
|
+
border-width: var(--monster-theme-control-border-width);
|
|
151
|
+
border-color: var(--monster-theme-control-border-color);
|
|
152
|
+
border-style: var(--monster-theme-control-border-style);
|
|
153
|
+
background-color: var(--monster-bg-color-primary-1);
|
|
154
|
+
color: var(--monster-color-primary-1);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.monster-field-layout > select[readonly],
|
|
158
|
+
.monster-field-layout > select:disabled {
|
|
159
|
+
background-color: var(--monster-bg-color-primary-2);
|
|
160
|
+
color: var(--monster-color-primary-2);
|
|
161
|
+
cursor: default;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.monster-field-layout > input:not([type="checkbox"]):not([type="radio"])[readonly] {
|
|
165
|
+
background-color: var(--monster-bg-color-primary-3);
|
|
166
|
+
color: var(--monster-color-primary-3);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.monster-field-layout > input[readonly]:not([type="checkbox"]):not([type="radio"]) {
|
|
170
|
+
background-color: var(--monster-bg-color-primary-2);
|
|
171
|
+
color: var(--monster-color-primary-2);
|
|
172
|
+
cursor: default;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.monster-field-layout > input,
|
|
176
|
+
.monster-field-layout > monster-toggle-switch,
|
|
177
|
+
.monster-field-layout > select {
|
|
178
|
+
min-height: 1.8rem;
|
|
179
|
+
padding: 0.5rem;
|
|
180
|
+
box-sizing: border-box;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.monster-field-layout > monster-password {
|
|
184
|
+
min-height: 1.8rem;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.monster-field-layout > input[type="color"] {
|
|
188
|
+
padding: 0 0.2rem;
|
|
189
|
+
min-height: calc(1.8rem + 0.4rem);
|
|
190
|
+
width: 100%;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.monster-field-layout > input[type="time"],
|
|
194
|
+
.monster-field-layout > input[type="date"] {
|
|
195
|
+
padding: 0 0.2rem;
|
|
196
|
+
min-height: calc(1.8rem + 0.4rem);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.monster-field-layout > input[type="checkbox"],
|
|
200
|
+
.monster-field-layout > input[type="radio"] {
|
|
201
|
+
width: 1.8rem;
|
|
202
|
+
min-height: calc(1.8rem + 0.4rem);
|
|
203
|
+
padding: 0 0.2rem;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.monster-field-layout > input[type="file"] {
|
|
207
|
+
padding: 0.4rem;
|
|
208
|
+
min-height: calc(1.2rem);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.monster-field-layout > input,
|
|
212
|
+
.monster-field-layout > monster-toggle-switch,
|
|
213
|
+
.monster-field-layout > monster-password,
|
|
214
|
+
.monster-field-layout > select,
|
|
215
|
+
.monster-field-layout > [data-monster-validation-wrapper] {
|
|
216
|
+
align-self: end;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.monster-field-layout > select[multiple],
|
|
220
|
+
.monster-field-layout > select[size]:not([size="1"]) {
|
|
221
|
+
min-height: calc(1.8rem * 4);
|
|
222
|
+
padding: 0.25rem 0.35rem;
|
|
223
|
+
align-self: stretch;
|
|
224
|
+
overflow-y: auto;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.monster-field-layout > select[multiple] option,
|
|
228
|
+
.monster-field-layout > select[size]:not([size="1"]) option {
|
|
229
|
+
padding-block: 0.15rem;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.monster-field-layout > monster-toggle-switch {
|
|
233
|
+
width: 3rem;
|
|
234
|
+
padding: 0;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
@container field-layout (max-width: 1200px) {
|
|
238
|
+
.monster-field-layout.multiple-columns {
|
|
239
|
+
grid-template-columns: auto 1fr auto 1fr;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.monster-field-layout > h1,
|
|
243
|
+
.monster-field-layout > h2,
|
|
244
|
+
.monster-field-layout > h3,
|
|
245
|
+
.monster-field-layout > h4,
|
|
246
|
+
.monster-field-layout > h5,
|
|
247
|
+
.monster-field-layout > h6 {
|
|
248
|
+
margin: var(--monster-field-set-heading-margin-top-1200, 2.2rem) 0 0.1rem;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.monster-field-layout > h1:first-of-type,
|
|
252
|
+
.monster-field-layout > h2:first-of-type,
|
|
253
|
+
.monster-field-layout > h3:first-of-type,
|
|
254
|
+
.monster-field-layout > h4:first-of-type,
|
|
255
|
+
.monster-field-layout > h5:first-of-type {
|
|
256
|
+
margin-top: var(--monster-field-set-heading-margin-top-first-1200, 0.6rem);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.monster-field-layout > .grid-double-span {
|
|
260
|
+
grid-column: span 1;
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
@container field-layout (max-width: 900px) {
|
|
265
|
+
.monster-field-layout.multiple-columns {
|
|
266
|
+
grid-template-columns: auto 1fr;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.monster-field-layout > h1,
|
|
270
|
+
.monster-field-layout > h2,
|
|
271
|
+
.monster-field-layout > h3,
|
|
272
|
+
.monster-field-layout > h4,
|
|
273
|
+
.monster-field-layout > h5,
|
|
274
|
+
.monster-field-layout > h6 {
|
|
275
|
+
margin: var(--monster-field-set-heading-margin-top-900, 1.8rem) 0 0.1rem;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.monster-field-layout > h1:first-of-type,
|
|
279
|
+
.monster-field-layout > h2:first-of-type,
|
|
280
|
+
.monster-field-layout > h3:first-of-type,
|
|
281
|
+
.monster-field-layout > h4:first-of-type,
|
|
282
|
+
.monster-field-layout > h5:first-of-type {
|
|
283
|
+
margin-top: var(--monster-field-set-heading-margin-top-first-900, 0.5rem);
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.monster-field-layout > .grid-double-span {
|
|
287
|
+
grid-column: span 1;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
@container field-layout (max-width: 500px) {
|
|
292
|
+
.monster-field-layout {
|
|
293
|
+
grid-template-columns: 1fr;
|
|
294
|
+
gap: 0;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.monster-field-layout > h1,
|
|
298
|
+
.monster-field-layout > h2,
|
|
299
|
+
.monster-field-layout > h3,
|
|
300
|
+
.monster-field-layout > h4,
|
|
301
|
+
.monster-field-layout > h5,
|
|
302
|
+
.monster-field-layout > h6 {
|
|
303
|
+
grid-column: 1;
|
|
304
|
+
margin: var(--monster-field-set-heading-margin-top-500, 1.3rem) 0 0.1rem;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.monster-field-layout > h1:first-of-type,
|
|
308
|
+
.monster-field-layout > h2:first-of-type,
|
|
309
|
+
.monster-field-layout > h3:first-of-type,
|
|
310
|
+
.monster-field-layout > h4:first-of-type,
|
|
311
|
+
.monster-field-layout > h5:first-of-type {
|
|
312
|
+
margin-top: var(--monster-field-set-heading-margin-top-first-500, 0.4rem);
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.monster-field-layout > div.wrapper,
|
|
316
|
+
.monster-field-layout > input,
|
|
317
|
+
.monster-field-layout > monster-toggle-switch,
|
|
318
|
+
.monster-field-layout > monster-password,
|
|
319
|
+
.monster-field-layout > textarea,
|
|
320
|
+
.monster-field-layout > select,
|
|
321
|
+
.monster-field-layout > monster-button,
|
|
322
|
+
.monster-field-layout > monster-action-button,
|
|
323
|
+
.monster-field-layout > monster-state-button,
|
|
324
|
+
.monster-field-layout > monster-api-button,
|
|
325
|
+
.monster-field-layout > monster-datasource-save-button {
|
|
326
|
+
grid-column: 1;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.monster-field-layout > label,
|
|
330
|
+
.monster-field-layout > .label {
|
|
331
|
+
padding-top: 1rem;
|
|
332
|
+
border-bottom: none;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.monster-field-layout.multiple-columns {
|
|
336
|
+
grid-template-columns: 1fr;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.monster-field-layout > .grid-start-1,
|
|
340
|
+
.monster-field-layout > .grid-start-2,
|
|
341
|
+
.monster-field-layout > .grid-start-3,
|
|
342
|
+
.monster-field-layout > .grid-start-4,
|
|
343
|
+
.monster-field-layout > .grid-span-full {
|
|
344
|
+
grid-column: 1 !important;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.monster-field-layout > .grid-double-span {
|
|
348
|
+
grid-column: span 1 !important;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
@import "../../style/typography.pcss";
|
|
2
|
+
@import "../../style/property.pcss";
|
|
3
|
+
@import "../../style/color.pcss";
|
|
4
|
+
@import "../../style/theme.pcss";
|
|
5
|
+
@import "../../style/control.pcss";
|
|
6
|
+
|
|
7
|
+
:host {
|
|
8
|
+
display: block;
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
[data-monster-role="control"] {
|
|
13
|
+
width: 100%;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
[data-monster-role="body"] {
|
|
17
|
+
display: grid;
|
|
18
|
+
grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
|
|
19
|
+
gap: 1.5rem;
|
|
20
|
+
align-items: start;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
[data-monster-role="content"] {
|
|
24
|
+
display: grid;
|
|
25
|
+
grid-template-columns: minmax(0, 1fr);
|
|
26
|
+
gap: 1rem;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
[data-monster-role="status"] {
|
|
30
|
+
color: var(--monster-color-primary-2);
|
|
31
|
+
font-size: 0.95rem;
|
|
32
|
+
justify-self: end;
|
|
33
|
+
text-align: right;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
monster-message-state-button {
|
|
37
|
+
min-width: 7rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
::slotted([hidden]) {
|
|
41
|
+
display: none !important;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
::slotted([data-monster-role="panel"]) {
|
|
45
|
+
box-sizing: border-box;
|
|
46
|
+
display: block;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@media (max-width: 820px) {
|
|
50
|
+
[data-monster-role="body"] {
|
|
51
|
+
grid-template-columns: minmax(0, 1fr);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
monster-message-state-button {
|
|
55
|
+
flex: 1 1 12rem;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright © Volker Schukai and all contributing authors, 2026. All rights reserved.
|
|
3
|
+
* Node module: @schukai/monster
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
|
|
6
|
+
* The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
|
|
7
|
+
*
|
|
8
|
+
* For those who do not wish to adhere to the AGPLv3, a commercial license is available.
|
|
9
|
+
* Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
|
|
10
|
+
* For more information about purchasing a commercial license, please contact Volker Schukai.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
import { addAttributeToken } from "../../../dom/attributes.mjs";
|
|
14
|
+
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
|
|
15
|
+
|
|
16
|
+
export { FieldLayoutStyleSheet };
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* @private
|
|
20
|
+
* @type {CSSStyleSheet}
|
|
21
|
+
*/
|
|
22
|
+
const FieldLayoutStyleSheet = new CSSStyleSheet();
|
|
23
|
+
|
|
24
|
+
try {
|
|
25
|
+
FieldLayoutStyleSheet.insertRule(
|
|
26
|
+
`
|
|
27
|
+
@layer fieldlayout {
|
|
28
|
+
:after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505;--monster-color-seashell-1:#f7f5ef;--monster-color-seashell-2:#e5e2d9;--monster-color-seashell-3:#cbc6b3;--monster-color-seashell-4:#a19d8a;--monster-color-seashell-5:#7a7566;--monster-color-seashell-6:#514d3f}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}.monster-field-layout{container-name:field-layout;container-type:inline-size;display:grid;grid-template-columns:auto 1fr;grid-gap:.8rem;accent-color:var(--monster-color-secondary-2);--monster-field-set-h1-size:xx-large;--monster-field-set-h2-size:x-large;--monster-field-set-h3-size:large;--monster-field-set-h4-size:medium;--monster-field-set-h5-size:small;--monster-field-set-h6-size:smaller;--monster-field-set-heading-margin-top:1rem;--monster-field-set-heading-margin-top-first:0.3rem;--monster-field-set-heading-margin-top-1200:2.2rem;--monster-field-set-heading-margin-top-first-1200:0.6rem;--monster-field-set-heading-margin-top-900:1.8rem;--monster-field-set-heading-margin-top-first-900:0.5rem;--monster-field-set-heading-margin-top-500:1.3rem;--monster-field-set-heading-margin-top-first-500:0.4rem;font-size:1rem;font-weight:400;line-height:1.6}.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr auto 1fr auto 1fr}.monster-field-layout>.label,.monster-field-layout>label{align-items:flex-start;border-bottom:thin dotted var(--monster-color-primary-1);color:var(--monster-color-primary-1);display:flex;gap:.4rem;justify-content:space-between}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6,.monster-field-layout>hr{grid-column:1/-1;margin:var(--monster-field-set-heading-margin-top,1rem) 0 .1rem}.monster-field-layout>h1{font-size:var(--monster-field-set-h1-size,xx-large)}.monster-field-layout>h2{font-size:var(--monster-field-set-h2-size,x-large)}.monster-field-layout>h3{font-size:var(--monster-field-set-h3-size,large)}.monster-field-layout>h4{font-size:var(--monster-field-set-h4-size,medium)}.monster-field-layout>h5{font-size:var(--monster-field-set-h5-size,small)}.monster-field-layout>h6{font-size:var(--monster-field-set-h6-size,smaller)}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first,.3rem)}.monster-field-layout>hr{border:none;border-top:thin dotted var(--monster-color-gray-3);margin:1rem 0;padding:0}.monster-field-layout>hr.delimiter{border:none;margin:0;padding:0}.monster-field-layout>.grid-span-full{grid-column-end:-1}.monster-field-layout>.grid-start-1{grid-column-start:1}.monster-field-layout>.grid-start-2{grid-column-start:2}.monster-field-layout>.grid-start-3{grid-column-start:3}.monster-field-layout>.grid-start-4{grid-column-start:4}.monster-field-layout>.grid-double-span{grid-column:span 3}.monster-field-layout>.grid-to-end{grid-column-end:-1}.monster-field-layout>input[type=email],.monster-field-layout>input[type=number],.monster-field-layout>input[type=password],.monster-field-layout>input[type=tel],.monster-field-layout>input[type=text]{height:-webkit-fill-available}.monster-field-layout>input:not([type=checkbox]):not([type=radio]),.monster-field-layout>select{border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);width:100%}.monster-field-layout>select{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-field-layout>select:disabled,.monster-field-layout>select[readonly]{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);cursor:default}.monster-field-layout>input:not([type=checkbox]):not([type=radio])[readonly]{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-field-layout>input[readonly]:not([type=checkbox]):not([type=radio]){background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);cursor:default}.monster-field-layout>input,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select{box-sizing:border-box;min-height:1.8rem;padding:.5rem}.monster-field-layout>monster-password{min-height:1.8rem}.monster-field-layout>input[type=color]{min-height:2.2rem;padding:0 .2rem;width:100%}.monster-field-layout>input[type=date],.monster-field-layout>input[type=time]{min-height:2.2rem;padding:0 .2rem}.monster-field-layout>input[type=checkbox],.monster-field-layout>input[type=radio]{min-height:2.2rem;padding:0 .2rem;width:1.8rem}.monster-field-layout>input[type=file]{min-height:1.2rem;padding:.4rem}.monster-field-layout>[data-monster-validation-wrapper],.monster-field-layout>input,.monster-field-layout>monster-password,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select{align-self:end}.monster-field-layout>select[multiple],.monster-field-layout>select[size]:not([size=\"1\"]){align-self:stretch;min-height:7.2rem;overflow-y:auto;padding:.25rem .35rem}.monster-field-layout>select[multiple] option,.monster-field-layout>select[size]:not([size=\"1\"]) option{padding-block:.15rem}.monster-field-layout>monster-toggle-switch{padding:0;width:3rem}@container field-layout (max-width: 1200px){.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr auto 1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{margin:var(--monster-field-set-heading-margin-top-1200,2.2rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-1200,.6rem)}.monster-field-layout>.grid-double-span{grid-column:span 1}}@container field-layout (max-width: 900px){.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{margin:var(--monster-field-set-heading-margin-top-900,1.8rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-900,.5rem)}.monster-field-layout>.grid-double-span{grid-column:span 1}}@container field-layout (max-width: 500px){.monster-field-layout{gap:0;grid-template-columns:1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{grid-column:1;margin:var(--monster-field-set-heading-margin-top-500,1.3rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-500,.4rem)}.monster-field-layout>div.wrapper,.monster-field-layout>input,.monster-field-layout>monster-action-button,.monster-field-layout>monster-api-button,.monster-field-layout>monster-button,.monster-field-layout>monster-datasource-save-button,.monster-field-layout>monster-password,.monster-field-layout>monster-state-button,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select,.monster-field-layout>textarea{grid-column:1}.monster-field-layout>.label,.monster-field-layout>label{border-bottom:none;padding-top:1rem}.monster-field-layout.multiple-columns{grid-template-columns:1fr}.monster-field-layout>.grid-span-full,.monster-field-layout>.grid-start-1,.monster-field-layout>.grid-start-2,.monster-field-layout>.grid-start-3,.monster-field-layout>.grid-start-4{grid-column:1!important}.monster-field-layout>.grid-double-span{grid-column:span 1!important}}
|
|
29
|
+
}`,
|
|
30
|
+
0,
|
|
31
|
+
);
|
|
32
|
+
} catch (e) {
|
|
33
|
+
addAttributeToken(
|
|
34
|
+
document.getRootNode().querySelector("html"),
|
|
35
|
+
ATTRIBUTE_ERRORMESSAGE,
|
|
36
|
+
e + "",
|
|
37
|
+
);
|
|
38
|
+
}
|