vira 31.31.0 → 31.31.1
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/elements/pop-up/vira-menu-item.element.js +57 -55
- package/dist/elements/pop-up/vira-menu.element.js +33 -31
- package/dist/elements/pop-up/vira-pop-up-trigger.element.js +57 -55
- package/dist/elements/vira-absolute-time.element.d.ts +3 -3
- package/dist/elements/vira-bold-text.element.js +35 -33
- package/dist/elements/vira-button.element.js +6 -2
- package/dist/elements/vira-card.element.js +16 -14
- package/dist/elements/vira-checkbox.element.js +95 -93
- package/dist/elements/vira-collapsible-card.element.js +63 -61
- package/dist/elements/vira-collapsible-wrapper.element.js +38 -36
- package/dist/elements/vira-date-input.element.d.ts +3 -3
- package/dist/elements/vira-date-input.element.js +37 -35
- package/dist/elements/vira-drawer.element.js +93 -91
- package/dist/elements/vira-error.element.js +8 -6
- package/dist/elements/vira-icon.element.js +23 -21
- package/dist/elements/vira-image.element.js +44 -42
- package/dist/elements/vira-json-form.element.js +7 -3
- package/dist/elements/vira-link.element.js +26 -24
- package/dist/elements/vira-modal.element.js +84 -80
- package/dist/elements/vira-progress.element.js +23 -21
- package/dist/elements/vira-relative-time.element.d.ts +2 -2
- package/dist/elements/vira-select.element.js +127 -122
- package/dist/elements/vira-tabs.element.js +17 -7
- package/dist/elements/vira-tag.element.js +3 -1
- package/dist/elements/vira-text-area.element.js +92 -90
- package/dist/icons/lucide-icons.js +7 -5
- package/dist/util/shared-text-input-logic.js +6 -4
- package/dist/util/vira-form-fields.d.ts +2 -2
- package/dist/util/vira-json-schema.js +24 -16
- package/package.json +11 -11
|
@@ -28,126 +28,128 @@ export const ViraCheckbox = defineViraElement()({
|
|
|
28
28
|
'vira-checkbox-filled-checked': ({ inputs }) => !!inputs.fillWhenChecked,
|
|
29
29
|
'vira-checkbox-filled-unchecked': ({ inputs }) => !!inputs.fillWhenUnchecked,
|
|
30
30
|
},
|
|
31
|
-
styles: ({ hostClasses }) =>
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
.custom-checkbox {
|
|
37
|
-
height: 24px;
|
|
38
|
-
aspect-ratio: 1;
|
|
39
|
-
box-sizing: border-box;
|
|
40
|
-
}
|
|
31
|
+
styles: ({ hostClasses }) => {
|
|
32
|
+
return css `
|
|
33
|
+
:host {
|
|
34
|
+
display: inline-flex;
|
|
35
|
+
}
|
|
41
36
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
opacity: 0;
|
|
48
|
-
}
|
|
37
|
+
.custom-checkbox {
|
|
38
|
+
height: 24px;
|
|
39
|
+
aspect-ratio: 1;
|
|
40
|
+
box-sizing: border-box;
|
|
41
|
+
}
|
|
49
42
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
43
|
+
${ViraIcon} {
|
|
44
|
+
width: 100%;
|
|
45
|
+
height: 100%;
|
|
46
|
+
box-sizing: border-box;
|
|
47
|
+
${viraIconCssVars['vira-icon-stroke-width'].name}: 3px;
|
|
48
|
+
opacity: 0;
|
|
54
49
|
}
|
|
55
50
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
51
|
+
${hostClasses['vira-checkbox-filled-checked'].selector} {
|
|
52
|
+
& .custom-checkbox.checked {
|
|
53
|
+
color: ${viraFormCssVars['vira-form-background-color'].value};
|
|
54
|
+
background-color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
|
|
60
55
|
}
|
|
61
56
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
57
|
+
label {
|
|
58
|
+
&:not(.disabled):hover .custom-checkbox.checked {
|
|
59
|
+
background-color: ${viraFormCssVars['vira-form-accent-primary-hover-color']
|
|
60
|
+
.value};
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&:not(.disabled):active .custom-checkbox.checked {
|
|
64
|
+
background-color: ${viraFormCssVars['vira-form-accent-primary-active-color']
|
|
65
|
+
.value};
|
|
66
|
+
}
|
|
65
67
|
}
|
|
66
68
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
background-color: ${viraFormCssVars['vira-form-error-color'].value};
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
label {
|
|
75
|
-
&:not(.disabled):hover .custom-checkbox:not(.checked) {
|
|
76
|
-
background-color: ${viraFormCssVars['vira-form-error-hover-color'].value};
|
|
69
|
+
${hostClasses['vira-checkbox-filled-unchecked'].selector} {
|
|
70
|
+
& .custom-checkbox:not(.checked) {
|
|
71
|
+
color: ${viraFormCssVars['vira-form-background-color'].value};
|
|
72
|
+
background-color: ${viraFormCssVars['vira-form-error-color'].value};
|
|
77
73
|
}
|
|
78
74
|
|
|
79
|
-
|
|
80
|
-
|
|
75
|
+
label {
|
|
76
|
+
&:not(.disabled):hover .custom-checkbox:not(.checked) {
|
|
77
|
+
background-color: ${viraFormCssVars['vira-form-error-hover-color'].value};
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&:not(.disabled):active .custom-checkbox:not(.checked) {
|
|
81
|
+
background-color: ${viraFormCssVars['vira-form-error-active-color'].value};
|
|
82
|
+
}
|
|
81
83
|
}
|
|
82
84
|
}
|
|
83
|
-
}
|
|
84
85
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
86
|
+
label {
|
|
87
|
+
display: inline-flex;
|
|
88
|
+
flex-direction: column;
|
|
89
|
+
align-items: flex-start;
|
|
90
|
+
gap: 4px;
|
|
90
91
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
92
|
+
&.disabled {
|
|
93
|
+
cursor: not-allowed;
|
|
94
|
+
}
|
|
94
95
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
96
|
+
& .label-text {
|
|
97
|
+
cursor: pointer;
|
|
98
|
+
font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
|
|
98
99
|
|
|
99
|
-
|
|
100
|
-
|
|
100
|
+
&.empty {
|
|
101
|
+
display: none;
|
|
102
|
+
}
|
|
101
103
|
}
|
|
102
|
-
}
|
|
103
104
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
105
|
+
&:not(.disabled):hover .custom-checkbox {
|
|
106
|
+
background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
|
|
107
|
+
}
|
|
108
|
+
&:not(.disabled):active .custom-checkbox {
|
|
109
|
+
background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
|
|
110
|
+
}
|
|
109
111
|
}
|
|
110
|
-
}
|
|
111
112
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
113
|
+
/* The visible custom box */
|
|
114
|
+
.custom-checkbox {
|
|
115
|
+
flex-shrink: 0;
|
|
116
|
+
border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
|
|
117
|
+
color: ${viraFormCssVars['vira-form-foreground-color'].value};
|
|
118
|
+
border-radius: ${viraFormCssVars['vira-form-radius'].value};
|
|
119
|
+
display: inline-block;
|
|
120
|
+
position: relative;
|
|
121
|
+
cursor: pointer;
|
|
122
|
+
|
|
123
|
+
${createFocusStyles({
|
|
124
|
+
elementBorderSize: '1px',
|
|
125
|
+
})}
|
|
126
|
+
|
|
127
|
+
&.checked {
|
|
128
|
+
& ${ViraIcon} {
|
|
129
|
+
opacity: 1;
|
|
130
|
+
}
|
|
129
131
|
}
|
|
130
|
-
}
|
|
131
132
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
133
|
+
&.error {
|
|
134
|
+
border-color: ${viraFormCssVars['vira-form-error-color'].value};
|
|
135
|
+
}
|
|
135
136
|
|
|
136
|
-
|
|
137
|
-
|
|
137
|
+
&.disabled {
|
|
138
|
+
${viraDisabledStyles};
|
|
139
|
+
}
|
|
138
140
|
}
|
|
139
|
-
}
|
|
140
141
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
142
|
+
${hostClasses['vira-checkbox-horizontal'].selector} label {
|
|
143
|
+
flex-direction: row-reverse;
|
|
144
|
+
align-items: center;
|
|
145
|
+
gap: 8px;
|
|
145
146
|
|
|
146
|
-
|
|
147
|
-
|
|
147
|
+
& .label-text {
|
|
148
|
+
padding-block: calc((24px - 1em) / 2);
|
|
149
|
+
}
|
|
148
150
|
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
+
`;
|
|
152
|
+
},
|
|
151
153
|
events: {
|
|
152
154
|
valueChange: defineElementEvent(),
|
|
153
155
|
},
|
|
@@ -30,86 +30,88 @@ export const ViraCollapsibleCard = defineViraElement()({
|
|
|
30
30
|
cssVars: {
|
|
31
31
|
'vira-collapsible-card-content-gap': '16px',
|
|
32
32
|
},
|
|
33
|
-
styles: ({ hostClasses, cssVars }) =>
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
${hostClasses['vira-collapsible-card-expanded'].selector} .open-caret {
|
|
42
|
-
transform: rotate(180deg);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
${ViraCollapsibleWrapper} {
|
|
46
|
-
flex-grow: 1;
|
|
47
|
-
max-width: 100%;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
${hostClasses['vira-collapsible-card-card-styles'].selector} {
|
|
51
|
-
border-radius: ${viraFormCssVars['vira-form-wrapper-radius'].value};
|
|
52
|
-
|
|
53
|
-
& ${ViraCollapsibleWrapper} {
|
|
54
|
-
border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
|
|
55
|
-
border-radius: ${viraFormCssVars['vira-form-wrapper-radius'].value};
|
|
33
|
+
styles: ({ hostClasses, cssVars }) => {
|
|
34
|
+
return css `
|
|
35
|
+
:host {
|
|
36
|
+
display: inline-flex;
|
|
37
|
+
max-width: 100%;
|
|
38
|
+
box-sizing: border-box;
|
|
39
|
+
overflow: hidden;
|
|
56
40
|
}
|
|
57
41
|
|
|
58
|
-
|
|
59
|
-
|
|
42
|
+
${hostClasses['vira-collapsible-card-expanded'].selector} .open-caret {
|
|
43
|
+
transform: rotate(180deg);
|
|
60
44
|
}
|
|
61
45
|
|
|
62
|
-
|
|
63
|
-
|
|
46
|
+
${ViraCollapsibleWrapper} {
|
|
47
|
+
flex-grow: 1;
|
|
48
|
+
max-width: 100%;
|
|
64
49
|
}
|
|
65
|
-
}
|
|
66
50
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
cursor: default;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
51
|
+
${hostClasses['vira-collapsible-card-card-styles'].selector} {
|
|
52
|
+
border-radius: ${viraFormCssVars['vira-form-wrapper-radius'].value};
|
|
72
53
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
justify-content: space-between;
|
|
78
|
-
gap: 8px;
|
|
54
|
+
& ${ViraCollapsibleWrapper} {
|
|
55
|
+
border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
|
|
56
|
+
border-radius: ${viraFormCssVars['vira-form-wrapper-radius'].value};
|
|
57
|
+
}
|
|
79
58
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}
|
|
59
|
+
& .card-header {
|
|
60
|
+
padding: 8px 16px;
|
|
61
|
+
}
|
|
84
62
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
gap: ${cssVars['vira-collapsible-card-content-gap'].value};
|
|
90
|
-
overflow-x: auto;
|
|
91
|
-
overflow-y: hidden;
|
|
92
|
-
}
|
|
63
|
+
& .card-content {
|
|
64
|
+
padding: 8px 16px 8px 16px;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
93
67
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
68
|
+
${hostClasses['vira-collapsible-card-expansion-blocked'].selector} {
|
|
69
|
+
& .header-wrapper {
|
|
70
|
+
cursor: default;
|
|
71
|
+
}
|
|
97
72
|
}
|
|
98
73
|
|
|
99
74
|
.card-header {
|
|
100
|
-
|
|
75
|
+
font-weight: ${viraFontCssVars['vira-font-weight-bold'].value};
|
|
76
|
+
display: flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
justify-content: space-between;
|
|
79
|
+
gap: 8px;
|
|
80
|
+
|
|
81
|
+
& .header-filler {
|
|
82
|
+
flex-grow: 1;
|
|
83
|
+
}
|
|
101
84
|
}
|
|
102
85
|
|
|
103
86
|
.card-content {
|
|
104
|
-
|
|
105
|
-
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: column;
|
|
89
|
+
align-items: stretch;
|
|
90
|
+
gap: ${cssVars['vira-collapsible-card-content-gap'].value};
|
|
91
|
+
overflow-x: auto;
|
|
92
|
+
overflow-y: hidden;
|
|
106
93
|
}
|
|
107
94
|
|
|
108
|
-
|
|
109
|
-
|
|
95
|
+
@media print {
|
|
96
|
+
${ViraCollapsibleWrapper} {
|
|
97
|
+
border: none !important;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.card-header {
|
|
101
|
+
padding: 8px 0 !important;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.card-content {
|
|
105
|
+
overflow: visible !important;
|
|
106
|
+
padding: 8px 0 16px 0 !important;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.open-caret {
|
|
110
|
+
display: none;
|
|
111
|
+
}
|
|
110
112
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
+
`;
|
|
114
|
+
},
|
|
113
115
|
slotNames: [
|
|
114
116
|
'vira-collapsible-card-header',
|
|
115
117
|
],
|
|
@@ -34,52 +34,54 @@ export const ViraCollapsibleWrapper = defineViraElement()({
|
|
|
34
34
|
'vira-collapsible-wrapper-expand-on-print': ({ inputs }) => !!inputs.expandOnPrint,
|
|
35
35
|
},
|
|
36
36
|
slotNames: ['vira-collapsible-wrapper-header'],
|
|
37
|
-
styles: ({ hostClasses }) =>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
styles: ({ hostClasses }) => {
|
|
38
|
+
return css `
|
|
39
|
+
:host {
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-direction: column;
|
|
42
|
+
max-width: 100%;
|
|
43
|
+
box-sizing: border-box;
|
|
44
|
+
}
|
|
44
45
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
.header-wrapper {
|
|
47
|
+
${noNativeFormStyles};
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
}
|
|
49
50
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
51
|
+
.content-wrapper,
|
|
52
|
+
.collapsing-element {
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
box-sizing: border-box;
|
|
56
|
+
}
|
|
56
57
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
.collapsing-element {
|
|
59
|
+
transition: height ${viraAnimationDurations['vira-pretty-animation-duration'].value};
|
|
60
|
+
overflow: hidden;
|
|
60
61
|
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
&.collapsed {
|
|
63
|
+
${noUserSelect}
|
|
64
|
+
}
|
|
63
65
|
}
|
|
64
|
-
}
|
|
65
66
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
.content-wrapper.hidden-content {
|
|
68
|
+
display: none;
|
|
69
|
+
}
|
|
69
70
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
71
|
+
@media print {
|
|
72
|
+
:host(.${hostClasses['vira-collapsible-wrapper-expand-on-print'].name})
|
|
73
|
+
.collapsing-element {
|
|
74
|
+
height: auto !important;
|
|
75
|
+
overflow: visible !important;
|
|
76
|
+
transition: none !important;
|
|
76
77
|
|
|
77
|
-
|
|
78
|
-
|
|
78
|
+
& .content-wrapper.hidden-content {
|
|
79
|
+
display: flex !important;
|
|
80
|
+
}
|
|
79
81
|
}
|
|
80
82
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
+
`;
|
|
84
|
+
},
|
|
83
85
|
events: {
|
|
84
86
|
expandChange: defineElementEvent(),
|
|
85
87
|
},
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type PartialWithUndefined } from '@augment-vir/common';
|
|
2
|
-
import { type FullDate } from 'date-vir';
|
|
2
|
+
import { type FullDate, type Timezone } from 'date-vir';
|
|
3
3
|
/**
|
|
4
4
|
* A native date picker input that emits `FullDate` values. Fires `valueChange` whenever the user
|
|
5
5
|
* selects (or clears) a date.
|
|
@@ -24,7 +24,7 @@ export declare const ViraDateInput: import("element-vir").DeclarativeElementDefi
|
|
|
24
24
|
/** If true, the current value is rendered as plain text instead of an editable input. */
|
|
25
25
|
isReadonly: boolean;
|
|
26
26
|
/** Timezone used to interpret the selected date. Defaults to the user's timezone. */
|
|
27
|
-
timezone:
|
|
27
|
+
timezone: Timezone;
|
|
28
28
|
/** Only show the date part of the selected date when in readonly mode. */
|
|
29
29
|
showDateOnly: boolean;
|
|
30
30
|
/** Only show the time part of the selected date when in readonly mode. */
|
|
@@ -42,6 +42,6 @@ export declare const ViraDateInput: import("element-vir").DeclarativeElementDefi
|
|
|
42
42
|
month: import("date-vir").MonthNumber;
|
|
43
43
|
day: import("date-vir").DayOfMonth;
|
|
44
44
|
second: import("date-vir").Second;
|
|
45
|
-
timezone:
|
|
45
|
+
timezone: Timezone;
|
|
46
46
|
} | undefined>;
|
|
47
47
|
}, "vira-date-input-error" | "vira-date-input-disabled", "vira-date-input-", readonly [], readonly []>;
|
|
@@ -30,48 +30,50 @@ export const ViraDateInput = defineViraElement()({
|
|
|
30
30
|
'vira-date-input-error': ({ inputs }) => !!inputs.hasError,
|
|
31
31
|
'vira-date-input-disabled': ({ inputs }) => !!inputs.isDisabled,
|
|
32
32
|
},
|
|
33
|
-
styles: ({ hostClasses }) =>
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
33
|
+
styles: ({ hostClasses }) => {
|
|
34
|
+
return css `
|
|
35
|
+
:host {
|
|
36
|
+
display: inline-block;
|
|
37
|
+
width: 224px;
|
|
38
|
+
color: ${viraFormCssVars['vira-form-foreground-color'].value};
|
|
39
|
+
}
|
|
39
40
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
41
|
+
label {
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
gap: 2px;
|
|
45
|
+
width: 100%;
|
|
46
|
+
}
|
|
46
47
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
.input-label {
|
|
49
|
+
font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
|
|
50
|
+
text-align: left;
|
|
51
|
+
}
|
|
51
52
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
53
|
+
input {
|
|
54
|
+
box-sizing: border-box;
|
|
55
|
+
width: 100%;
|
|
56
|
+
padding: 4px 8px;
|
|
57
|
+
font-size: inherit;
|
|
58
|
+
border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
|
|
59
|
+
border-radius: ${viraFormCssVars['vira-form-radius'].value};
|
|
60
|
+
background-color: ${viraFormCssVars['vira-form-background-color'].value};
|
|
61
|
+
color: ${viraFormCssVars['vira-form-foreground-color'].value};
|
|
62
|
+
}
|
|
62
63
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
${hostClasses['vira-date-input-error'].selector} input {
|
|
65
|
+
border-color: ${viraFormCssVars['vira-form-error-color'].value};
|
|
66
|
+
}
|
|
66
67
|
|
|
67
|
-
|
|
68
|
-
|
|
68
|
+
${hostClasses['vira-date-input-disabled'].selector} {
|
|
69
|
+
cursor: not-allowed;
|
|
69
70
|
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
& input {
|
|
72
|
+
${viraDisabledStyles};
|
|
73
|
+
}
|
|
72
74
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
+
`;
|
|
76
|
+
},
|
|
75
77
|
render({ inputs, state, dispatch, events }) {
|
|
76
78
|
if (inputs.isReadonly) {
|
|
77
79
|
const readonlyTemplate = inputs.value
|