@utrecht/web-component-library-stencil 1.0.0-alpha.364 → 1.0.0-alpha.365
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/utrecht-custom-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/utrecht-form-field-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/utrecht-form-field-description.cjs.entry.js +1 -1
- package/dist/cjs/utrecht-form-field-textarea.cjs.entry.js +1 -1
- package/dist/cjs/utrecht-form-field-textbox.cjs.entry.js +3 -3
- package/dist/cjs/utrecht-html-content.cjs.entry.js +1 -1
- package/dist/collection/custom-checkbox/index.css +21 -1
- package/dist/collection/form-field-checkbox/index.css +86 -6
- package/dist/collection/form-field-description/index.css +4 -0
- package/dist/collection/form-field-textarea/index.css +88 -0
- package/dist/collection/form-field-textbox/index.css +0 -8
- package/dist/collection/form-field-textbox/index.stencil.js +3 -3
- package/dist/collection/html-content/index.css +2 -0
- package/dist/components/utrecht-custom-checkbox.js +1 -1
- package/dist/components/utrecht-form-field-checkbox.js +1 -1
- package/dist/components/utrecht-form-field-description.js +1 -1
- package/dist/components/utrecht-form-field-textarea.js +1 -1
- package/dist/components/utrecht-form-field-textbox.js +3 -3
- package/dist/components/utrecht-html-content.js +1 -1
- package/dist/esm/utrecht-custom-checkbox.entry.js +1 -1
- package/dist/esm/utrecht-form-field-checkbox.entry.js +1 -1
- package/dist/esm/utrecht-form-field-description.entry.js +1 -1
- package/dist/esm/utrecht-form-field-textarea.entry.js +1 -1
- package/dist/esm/utrecht-form-field-textbox.entry.js +3 -3
- package/dist/esm/utrecht-html-content.entry.js +1 -1
- package/dist/utrecht/p-1756e449.entry.js +1 -0
- package/dist/utrecht/p-3642d84d.entry.js +1 -0
- package/dist/utrecht/p-70d62149.entry.js +1 -0
- package/dist/utrecht/p-7201f969.entry.js +1 -0
- package/dist/utrecht/p-7aa78491.entry.js +1 -0
- package/dist/utrecht/p-a249efe3.entry.js +1 -0
- package/dist/utrecht/utrecht.esm.js +1 -1
- package/package.json +4 -4
- package/dist/utrecht/p-3a64cb7a.entry.js +0 -1
- package/dist/utrecht/p-713477c6.entry.js +0 -1
- package/dist/utrecht/p-8f2658f1.entry.js +0 -1
- package/dist/utrecht/p-b01a9e73.entry.js +0 -1
- package/dist/utrecht/p-d948a8a5.entry.js +0 -1
- package/dist/utrecht/p-f31c1fac.entry.js +0 -1
|
@@ -10,10 +10,7 @@
|
|
|
10
10
|
* @license EUPL-1.2
|
|
11
11
|
* Copyright (c) 2021 Robbert Broersma
|
|
12
12
|
*/
|
|
13
|
-
|
|
14
|
-
* @license EUPL-1.2
|
|
15
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
16
|
-
*/
|
|
13
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
17
14
|
.utrecht-form-field {
|
|
18
15
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
19
16
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
|
|
@@ -26,8 +23,91 @@
|
|
|
26
23
|
--utrecht-space-around: 1;
|
|
27
24
|
}
|
|
28
25
|
|
|
29
|
-
.utrecht-form-
|
|
30
|
-
|
|
26
|
+
.utrecht-form-field--invalid {
|
|
27
|
+
border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
|
|
28
|
+
border-inline-start-style: solid;
|
|
29
|
+
border-inline-start-width: var(--utrecht-form-field-invalid-border-inline-start-width);
|
|
30
|
+
padding-inline-start: var(--utrecht-form-field-invalid-padding-inline-start);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.utrecht-form-field--checkbox {
|
|
34
|
+
display: grid;
|
|
35
|
+
gap: 0 var(--utrecht-custom-checkbox-margin-inline-end, 12px);
|
|
36
|
+
grid-template-areas: "input label" "input description" "input description-invalid";
|
|
37
|
+
grid-template-columns: var(--utrecht-custom-checkbox-size) 100fr;
|
|
38
|
+
/*
|
|
39
|
+
.utrecht-form-field__label .utrecht-form-field__input {
|
|
40
|
+
margin-inline-start: calc(
|
|
41
|
+
-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
|
|
42
|
+
);
|
|
43
|
+
margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
|
|
44
|
+
}
|
|
45
|
+
*/
|
|
46
|
+
}
|
|
47
|
+
.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
|
|
48
|
+
margin-inline-start: calc(-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px)));
|
|
49
|
+
}
|
|
50
|
+
.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input {
|
|
51
|
+
margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.utrecht-form-field--radio {
|
|
55
|
+
display: grid;
|
|
56
|
+
gap: 0 var(--utrecht-custom-radio-button-margin-inline-end, 12px);
|
|
57
|
+
grid-template-areas: "input label" "input description" "input description-invalid";
|
|
58
|
+
grid-template-columns: var(--utrecht-custom-radio-button-size) 100fr;
|
|
59
|
+
/*
|
|
60
|
+
.utrecht-form-field__label .utrecht-form-field__input {
|
|
61
|
+
margin-inline-start: calc(
|
|
62
|
+
-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
|
|
63
|
+
);
|
|
64
|
+
margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
|
|
65
|
+
}
|
|
66
|
+
*/
|
|
67
|
+
}
|
|
68
|
+
.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
|
|
69
|
+
margin-inline-start: calc(-1 * (var(--utrecht-custom-radio-button-size) + var(--utrecht-custom-radio-button-margin-inline-end, 12px)));
|
|
70
|
+
}
|
|
71
|
+
.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input {
|
|
72
|
+
margin-inline-end: var(--utrecht-custom-radio-button-margin-inline-end, 12px);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.utrecht-form-field__input {
|
|
76
|
+
grid-area: input;
|
|
77
|
+
order: 5;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.utrecht-form-field__label {
|
|
81
|
+
/* Assign the margin-block-end to padding instead, so the clickable area of the label increases
|
|
82
|
+
and we avoid a small gap between the label and input that cannot be clicked to focus the input. */
|
|
83
|
+
grid-area: label;
|
|
84
|
+
margin-block-end: var(--utrecht-form-field-label-margin-block-end);
|
|
85
|
+
margin-block-start: 0;
|
|
86
|
+
order: 1;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.utrecht-form-field .utrecht-form-field-description {
|
|
90
|
+
grid-area: description;
|
|
91
|
+
margin-block-end: var(--utrecht-form-field-description-margin-block-end);
|
|
92
|
+
margin-block-start: var(--utrecht-form-field-description-margin-block-start);
|
|
93
|
+
order: 2;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.utrecht-form-field .utrecht-form-field-description--invalid {
|
|
97
|
+
grid-area: description-invalid;
|
|
98
|
+
order: 3;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.utrecht-form-field__description {
|
|
102
|
+
grid-area: description;
|
|
103
|
+
margin-block-end: var(--utrecht-form-field-description-margin-block-end);
|
|
104
|
+
margin-block-start: var(--utrecht-form-field-description-margin-block-start);
|
|
105
|
+
order: 2;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.utrecht-form-field__description--before {
|
|
109
|
+
grid-area: description-before;
|
|
110
|
+
order: 4;
|
|
31
111
|
}
|
|
32
112
|
|
|
33
113
|
/**
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
* Copyright (c) 2021 Robbert Broersma
|
|
12
12
|
*/
|
|
13
13
|
.utrecht-form-field-description {
|
|
14
|
+
--utrecht-document-color: currentColor;
|
|
14
15
|
color: var(--utrecht-form-field-description-color);
|
|
15
16
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
16
17
|
font-size: var(--utrecht-form-field-description-font-size, inherit);
|
|
@@ -18,6 +19,9 @@
|
|
|
18
19
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
|
|
19
20
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
|
|
20
21
|
}
|
|
22
|
+
.utrecht-form-field-description > * {
|
|
23
|
+
--utrecht-space-around: 1;
|
|
24
|
+
}
|
|
21
25
|
|
|
22
26
|
.utrecht-form-field-description--distanced {
|
|
23
27
|
--utrecht-space-around: 1;
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
* @license EUPL-1.2
|
|
46
46
|
* Copyright (c) 2021 Robbert Broersma
|
|
47
47
|
*/
|
|
48
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
48
49
|
.utrecht-form-field {
|
|
49
50
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
50
51
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
|
|
@@ -57,6 +58,93 @@
|
|
|
57
58
|
--utrecht-space-around: 1;
|
|
58
59
|
}
|
|
59
60
|
|
|
61
|
+
.utrecht-form-field--invalid {
|
|
62
|
+
border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
|
|
63
|
+
border-inline-start-style: solid;
|
|
64
|
+
border-inline-start-width: var(--utrecht-form-field-invalid-border-inline-start-width);
|
|
65
|
+
padding-inline-start: var(--utrecht-form-field-invalid-padding-inline-start);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.utrecht-form-field--checkbox {
|
|
69
|
+
display: grid;
|
|
70
|
+
gap: 0 var(--utrecht-custom-checkbox-margin-inline-end, 12px);
|
|
71
|
+
grid-template-areas: "input label" "input description" "input description-invalid";
|
|
72
|
+
grid-template-columns: var(--utrecht-custom-checkbox-size) 100fr;
|
|
73
|
+
/*
|
|
74
|
+
.utrecht-form-field__label .utrecht-form-field__input {
|
|
75
|
+
margin-inline-start: calc(
|
|
76
|
+
-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
|
|
77
|
+
);
|
|
78
|
+
margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
|
|
79
|
+
}
|
|
80
|
+
*/
|
|
81
|
+
}
|
|
82
|
+
.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
|
|
83
|
+
margin-inline-start: calc(-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px)));
|
|
84
|
+
}
|
|
85
|
+
.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input {
|
|
86
|
+
margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.utrecht-form-field--radio {
|
|
90
|
+
display: grid;
|
|
91
|
+
gap: 0 var(--utrecht-custom-radio-button-margin-inline-end, 12px);
|
|
92
|
+
grid-template-areas: "input label" "input description" "input description-invalid";
|
|
93
|
+
grid-template-columns: var(--utrecht-custom-radio-button-size) 100fr;
|
|
94
|
+
/*
|
|
95
|
+
.utrecht-form-field__label .utrecht-form-field__input {
|
|
96
|
+
margin-inline-start: calc(
|
|
97
|
+
-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
|
|
98
|
+
);
|
|
99
|
+
margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
|
|
100
|
+
}
|
|
101
|
+
*/
|
|
102
|
+
}
|
|
103
|
+
.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
|
|
104
|
+
margin-inline-start: calc(-1 * (var(--utrecht-custom-radio-button-size) + var(--utrecht-custom-radio-button-margin-inline-end, 12px)));
|
|
105
|
+
}
|
|
106
|
+
.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input {
|
|
107
|
+
margin-inline-end: var(--utrecht-custom-radio-button-margin-inline-end, 12px);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.utrecht-form-field__input {
|
|
111
|
+
grid-area: input;
|
|
112
|
+
order: 5;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.utrecht-form-field__label {
|
|
116
|
+
/* Assign the margin-block-end to padding instead, so the clickable area of the label increases
|
|
117
|
+
and we avoid a small gap between the label and input that cannot be clicked to focus the input. */
|
|
118
|
+
grid-area: label;
|
|
119
|
+
margin-block-end: var(--utrecht-form-field-label-margin-block-end);
|
|
120
|
+
margin-block-start: 0;
|
|
121
|
+
order: 1;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.utrecht-form-field .utrecht-form-field-description {
|
|
125
|
+
grid-area: description;
|
|
126
|
+
margin-block-end: var(--utrecht-form-field-description-margin-block-end);
|
|
127
|
+
margin-block-start: var(--utrecht-form-field-description-margin-block-start);
|
|
128
|
+
order: 2;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.utrecht-form-field .utrecht-form-field-description--invalid {
|
|
132
|
+
grid-area: description-invalid;
|
|
133
|
+
order: 3;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.utrecht-form-field__description {
|
|
137
|
+
grid-area: description;
|
|
138
|
+
margin-block-end: var(--utrecht-form-field-description-margin-block-end);
|
|
139
|
+
margin-block-start: var(--utrecht-form-field-description-margin-block-start);
|
|
140
|
+
order: 2;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.utrecht-form-field__description--before {
|
|
144
|
+
grid-area: description-before;
|
|
145
|
+
order: 4;
|
|
146
|
+
}
|
|
147
|
+
|
|
60
148
|
/**
|
|
61
149
|
* @license EUPL-1.2
|
|
62
150
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -2,14 +2,6 @@
|
|
|
2
2
|
* @license EUPL-1.2
|
|
3
3
|
* Copyright (c) 2021 Robbert Broersma
|
|
4
4
|
*/
|
|
5
|
-
/**
|
|
6
|
-
* @license EUPL-1.2
|
|
7
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8
|
-
*/
|
|
9
|
-
.utrecht-form-field-textbox {
|
|
10
|
-
font-family: var(--utrecht-document-font-family, inherit);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
5
|
/**
|
|
14
6
|
* @license EUPL-1.2
|
|
15
7
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -20,12 +20,12 @@ export class FormFieldTextbox {
|
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
22
|
const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
|
|
23
|
-
return (h("div", { class: "utrecht-form-field-textbox" },
|
|
24
|
-
h("input", { id: "input", class: clsx('utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, min: min ? min : null, max: max ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
|
|
23
|
+
return (h("div", { class: "utrecht-form-field-textbox utrecht-form-field--textbox" },
|
|
24
|
+
h("input", { id: "input", class: clsx('utrecht-form-field__input', 'utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, min: min ? min : null, max: max ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
|
|
25
25
|
this.value = evt.target.value;
|
|
26
26
|
this.utrechtInput.emit(evt);
|
|
27
27
|
} }),
|
|
28
|
-
h("label", { class: "utrecht-form-
|
|
28
|
+
h("label", { class: "utrecht-form-field__label utrecht-form-label", htmlFor: "input" },
|
|
29
29
|
h("slot", null))));
|
|
30
30
|
}
|
|
31
31
|
static get is() { return "utrecht-form-field-textbox"; }
|
|
@@ -705,6 +705,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
705
705
|
.utrecht-html fieldset {
|
|
706
706
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
|
|
707
707
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
|
|
708
|
+
all: revert;
|
|
708
709
|
border: 0;
|
|
709
710
|
margin-inline-end: 0;
|
|
710
711
|
margin-inline-start: 0;
|
|
@@ -736,6 +737,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
736
737
|
page-break-after: avoid;
|
|
737
738
|
page-break-inside: avoid;
|
|
738
739
|
text-transform: var(--utrecht-form-fieldset-legend-text-transform);
|
|
740
|
+
display: table;
|
|
739
741
|
inline-size: 100%;
|
|
740
742
|
padding-inline-end: 0;
|
|
741
743
|
padding-inline-start: 0;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as clsx } from './clsx.m.js';
|
|
3
3
|
|
|
4
|
-
const indexCss = ".utrecht-custom-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-position:center;background-repeat:no-repeat;background-size:contain;border-color:var(--utrecht-custom-checkbox-border-color);border-style:solid;border-width:var(--utrecht-custom-checkbox-border-width);cursor:var(--utrecht-action-activate-cursor, revert);height:var(--utrecht-custom-checkbox-size);margin-block-start:var(--utrecht-custom-checkbox-margin-block-start);-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:top;width:var(--utrecht-custom-checkbox-size)}.utrecht-custom-checkbox--checked{background-color:var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-custom-checkbox--disabled{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-custom-checkbox--disabled:checked{background-color:var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-custom-checkbox--disabled:active{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-custom-checkbox--indeterminate{background-color:var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color))}.utrecht-custom-checkbox--invalid{border-color:var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-custom-checkbox--active{background-color:var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color))}.utrecht-custom-checkbox--focus{background-color:var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-custom-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-custom-checkbox--html-input:disabled{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-custom-checkbox--html-input:disabled:checked{background-color:var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-custom-checkbox--html-input:disabled:active{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-custom-checkbox--html-input:focus{background-color:var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-custom-checkbox--html-input:focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-custom-checkbox--html-input:invalid,.utrecht-custom-checkbox--html-input[aria-invalid=true]{border-color:var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-custom-checkbox--html-input:active{background-color:var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color))}.utrecht-custom-checkbox--html-input:checked{background-color:var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-custom-checkbox--html-input:indeterminate{background-color:var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color))}:host{display:block}:host([hidden]){display:none !important}";
|
|
4
|
+
const indexCss = ".utrecht-checkbox--custom,.utrecht-custom-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-position:center;background-repeat:no-repeat;background-size:contain;border-color:var(--utrecht-custom-checkbox-border-color);border-style:solid;border-width:var(--utrecht-custom-checkbox-border-width);cursor:var(--utrecht-action-activate-cursor, revert);height:var(--utrecht-custom-checkbox-size);margin-block-start:var(--utrecht-custom-checkbox-margin-block-start);-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:top;width:var(--utrecht-custom-checkbox-size)}.utrecht-checkbox--custom.utrecht-checkbox--checked,.utrecht-custom-checkbox--checked{background-color:var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--disabled,.utrecht-custom-checkbox--disabled{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,.utrecht-custom-checkbox--disabled:checked{background-color:var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--disabled:active,.utrecht-custom-checkbox--disabled:active{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--indeterminate,.utrecht-custom-checkbox--indeterminate{background-color:var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--invalid,.utrecht-custom-checkbox--invalid{border-color:var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--active,.utrecht-custom-checkbox--active{background-color:var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--focus,.utrecht-custom-checkbox--focus{background-color:var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus-visible,.utrecht-custom-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,.utrecht-custom-checkbox--html-input:disabled{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,.utrecht-custom-checkbox--html-input:disabled:checked{background-color:var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,.utrecht-custom-checkbox--html-input:disabled:active{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,.utrecht-custom-checkbox--html-input:focus{background-color:var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,.utrecht-custom-checkbox--html-input:focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid,.utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],.utrecht-custom-checkbox--html-input:invalid,.utrecht-custom-checkbox--html-input[aria-invalid=true]{border-color:var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:active,.utrecht-custom-checkbox--html-input:active{background-color:var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,.utrecht-custom-checkbox--html-input:checked{background-color:var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,.utrecht-custom-checkbox--html-input:indeterminate{background-color:var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color))}:host{display:block}:host([hidden]){display:none !important}";
|
|
5
5
|
|
|
6
6
|
const CustomCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as clsx } from './clsx.m.js';
|
|
3
3
|
|
|
4
|
-
const indexCss = ".utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field__label--checkbox{margin-inline-start:
|
|
4
|
+
const indexCss = ".utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-custom-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-custom-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-custom-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-custom-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-custom-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-custom-radio-button-size) + var(--utrecht-custom-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-custom-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;cursor:var(--utrecht-action-activate-cursor, revert)}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--html-input:focus{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
|
|
5
5
|
|
|
6
6
|
const FormFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as clsx } from './clsx.m.js';
|
|
3
3
|
|
|
4
|
-
const indexCss = ".utrecht-form-field-description{color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}:host{display:block}:host([hidden]){display:none !important}";
|
|
4
|
+
const indexCss = ".utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}:host{display:block}:host([hidden]){display:none !important}";
|
|
5
5
|
|
|
6
6
|
const FormFieldDescription = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as clsx } from './clsx.m.js';
|
|
3
3
|
|
|
4
|
-
const indexCss = ".utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-textarea{background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));border-bottom-width:var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));border-color:var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));border-radius:var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textarea-color, var(--utrecht-form-input-color));font-family:var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));font-weight:initial;height:initial;line-height:var(--utrecht-textarea-line-height, initial);max-inline-size:var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));min-block-size:var(--utrecht-textarea-min-block-size);padding-block-end:var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end, 0));padding-block-start:var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start, 0));padding-inline-end:var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end, initial));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start, initial));resize:vertical;width:100%}.utrecht-textarea--invalid{background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textarea--disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textarea--focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textarea--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-textarea--read-only{border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textarea__placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textarea--html-textarea:disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textarea--html-textarea:focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-textarea--html-textarea:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-textarea--html-textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true]{background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textarea--html-textarea:read-only{border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textarea--html-textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
|
|
4
|
+
const indexCss = ".utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-custom-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-custom-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-custom-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-custom-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-custom-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-custom-radio-button-size) + var(--utrecht-custom-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-custom-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-textarea{background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));border-bottom-width:var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));border-color:var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));border-radius:var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textarea-color, var(--utrecht-form-input-color));font-family:var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));font-weight:initial;height:initial;line-height:var(--utrecht-textarea-line-height, initial);max-inline-size:var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));min-block-size:var(--utrecht-textarea-min-block-size);padding-block-end:var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end, 0));padding-block-start:var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start, 0));padding-inline-end:var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end, initial));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start, initial));resize:vertical;width:100%}.utrecht-textarea--invalid{background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textarea--disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textarea--focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textarea--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-textarea--read-only{border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textarea__placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textarea--html-textarea:disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textarea--html-textarea:focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-textarea--html-textarea:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-textarea--html-textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true]{background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textarea--html-textarea:read-only{border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textarea--html-textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
|
|
5
5
|
|
|
6
6
|
const FormFieldTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as clsx } from './clsx.m.js';
|
|
3
3
|
|
|
4
|
-
const indexCss = ".utrecht-form-
|
|
4
|
+
const indexCss = ".utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-textbox{background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));border-bottom-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));border-color:var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));border-radius:var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textbox-color, var(--utrecht-form-input-color));font-family:var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));font-size:var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));font-weight:initial;height:initial;line-height:initial;max-inline-size:var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));padding-block-end:var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end, 0));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start, 0));padding-inline-end:var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end, initial));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start, initial));width:100%}.utrecht-textbox--invalid{background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textbox--disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textbox--focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-textbox--read-only{border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))))}.utrecht-textbox__placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textbox--numeric{-moz-appearance:textfield;font-variant-numeric:lining-nums tabular-nums}.utrecht-textbox--password{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--url{font-variant-ligatures:none}.utrecht-textbox--html-input:disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textbox--html-input:focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-textbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-textbox--html-input:invalid,.utrecht-textbox--html-input[aria-invalid=true]{background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textbox--html-input:read-only{border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))))}.utrecht-textbox--html-input::placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textbox--html-input[type=password i]{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--html-input[type=url i],.utrecht-textbox--html-input[type=email i],.utrecht-textbox--html-input[inputMode=email i],.utrecht-textbox--html-input[inputMode=url i]{font-variant-ligatures:none}.utrecht-textbox--html-input[pattern=\"\\\\d*\"],.utrecht-textbox--html-input[pattern=\"[0-9]*\"],.utrecht-textbox--html-input[type=number i],.utrecht-textbox--html-input[type=tel i],.utrecht-textbox--html-input[inputMode=numeric i],.utrecht-textbox--html-input[inputMode=decimal i],.utrecht-textbox--html-input[inputMode=tel i]{-moz-appearance:textfield;font-variant-numeric:lining-nums tabular-nums}:host{display:block}:host([hidden]){display:none !important}";
|
|
5
5
|
|
|
6
6
|
const FormFieldTextbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -26,10 +26,10 @@ const FormFieldTextbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
28
28
|
const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
|
|
29
|
-
return (h("div", { class: "utrecht-form-field-textbox" }, h("input", { id: "input", class: clsx('utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, min: min ? min : null, max: max ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
|
|
29
|
+
return (h("div", { class: "utrecht-form-field-textbox utrecht-form-field--textbox" }, h("input", { id: "input", class: clsx('utrecht-form-field__input', 'utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, min: min ? min : null, max: max ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
|
|
30
30
|
this.value = evt.target.value;
|
|
31
31
|
this.utrechtInput.emit(evt);
|
|
32
|
-
} }), h("label", { class: "utrecht-form-
|
|
32
|
+
} }), h("label", { class: "utrecht-form-field__label utrecht-form-label", htmlFor: "input" }, h("slot", null))));
|
|
33
33
|
}
|
|
34
34
|
static get style() { return indexCss; }
|
|
35
35
|
}, [1, "utrecht-form-field-textbox", {
|