q2-tecton-elements 1.10.9 → 1.11.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/q2-btn_2.cjs.entry.js +1 -1
- package/dist/cjs/q2-calendar.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox.cjs.entry.js +14 -5
- package/dist/cjs/q2-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/q2-editable-field.cjs.entry.js +22 -17
- package/dist/cjs/q2-input.cjs.entry.js +1 -1
- package/dist/cjs/q2-radio-group.cjs.entry.js +20 -1
- package/dist/cjs/q2-radio.cjs.entry.js +1 -1
- package/dist/cjs/q2-select.cjs.entry.js +6 -4
- package/dist/cjs/q2-stepper.cjs.entry.js +3 -1
- package/dist/cjs/q2-tab-container.cjs.entry.js +3 -1
- package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
- package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
- package/dist/collection/components/q2-calendar/styles.css +1 -1
- package/dist/collection/components/q2-checkbox/index.js +15 -6
- package/dist/collection/components/q2-checkbox/styles.css +7 -3
- package/dist/collection/components/q2-dropdown/styles.css +3 -3
- package/dist/collection/components/q2-editable-field/index.js +27 -20
- package/dist/collection/components/q2-input/styles.css +95 -119
- package/dist/collection/components/q2-loading/styles.css +1 -1
- package/dist/collection/components/q2-radio/index.js +1 -0
- package/dist/collection/components/q2-radio/styles.css +16 -16
- package/dist/collection/components/q2-radio-group/index.js +25 -0
- package/dist/collection/components/q2-radio-group/styles.css +4 -9
- package/dist/collection/components/q2-select/index.js +5 -3
- package/dist/collection/components/q2-select/styles.css +4 -4
- package/dist/collection/components/q2-stepper/index.js +2 -0
- package/dist/collection/components/q2-stepper/styles.css +3 -3
- package/dist/collection/components/q2-tab-container/index.js +3 -1
- package/dist/collection/components/q2-textarea/styles.css +72 -109
- package/dist/collection/components/tecton-tab-pane/index.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/q2-btn_2.entry.js +1 -1
- package/dist/esm/q2-calendar.entry.js +1 -1
- package/dist/esm/q2-checkbox.entry.js +14 -5
- package/dist/esm/q2-dropdown.entry.js +1 -1
- package/dist/esm/q2-editable-field.entry.js +22 -17
- package/dist/esm/q2-input.entry.js +1 -1
- package/dist/esm/q2-radio-group.entry.js +20 -1
- package/dist/esm/q2-radio.entry.js +1 -1
- package/dist/esm/q2-select.entry.js +6 -4
- package/dist/esm/q2-stepper.entry.js +3 -1
- package/dist/esm/q2-tab-container.entry.js +3 -1
- package/dist/esm/q2-tecton-elements.js +1 -1
- package/dist/esm/q2-textarea.entry.js +1 -1
- package/dist/q2-tecton-elements/{p-8509b171.entry.js → p-06fff43d.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-29a37091.entry.js +1 -0
- package/dist/q2-tecton-elements/p-50967020.entry.js +1 -0
- package/dist/q2-tecton-elements/p-75e87cca.entry.js +1 -0
- package/dist/q2-tecton-elements/p-768e3a5d.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-bbacb804.entry.js → p-7e030e92.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-fc804ebd.entry.js → p-943c7745.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-5559f126.entry.js → p-9a977ee6.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-ac859fcc.entry.js +1 -0
- package/dist/q2-tecton-elements/p-b281c349.entry.js +1 -0
- package/dist/q2-tecton-elements/p-ccbe9158.entry.js +1 -0
- package/dist/q2-tecton-elements/p-db6f90ac.entry.js +1 -0
- package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
- package/dist/test/helpers.js +3 -0
- package/dist/types/components/q2-checkbox/index.d.ts +2 -0
- package/dist/types/components/q2-editable-field/index.d.ts +2 -0
- package/dist/types/components/q2-radio-group/index.d.ts +1 -0
- package/dist/types/components/q2-select/index.d.ts +1 -0
- package/dist/types/workspace/workspace/{tecton-production_release_1.10.x → _production_release_1.11.0-alpha}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +1 -0
- package/package.json +2 -2
- package/dist/q2-tecton-elements/p-4ae9d1f3.entry.js +0 -1
- package/dist/q2-tecton-elements/p-52f53e07.entry.js +0 -1
- package/dist/q2-tecton-elements/p-78642b7b.entry.js +0 -1
- package/dist/q2-tecton-elements/p-7eb39c90.entry.js +0 -1
- package/dist/q2-tecton-elements/p-81df91a1.entry.js +0 -1
- package/dist/q2-tecton-elements/p-96c9eb75.entry.js +0 -1
- package/dist/q2-tecton-elements/p-ab977515.entry.js +0 -1
- package/dist/q2-tecton-elements/p-c555f1de.entry.js +0 -1
|
@@ -97,6 +97,8 @@ export class Q2TabContainer {
|
|
|
97
97
|
return focusedTab;
|
|
98
98
|
};
|
|
99
99
|
this.checkScrollState = () => {
|
|
100
|
+
if (!this.listElement)
|
|
101
|
+
return;
|
|
100
102
|
const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
|
|
101
103
|
this.scrollEnabled = scrollWidth > clientWidth;
|
|
102
104
|
this.showScrollLeft = !!scrollLeft;
|
|
@@ -164,7 +166,7 @@ export class Q2TabContainer {
|
|
|
164
166
|
overrideFocus(this.hostElement);
|
|
165
167
|
const index = this.tabs.findIndex(el => el.value === this.value);
|
|
166
168
|
this.scheduledAfterRender.push(() => {
|
|
167
|
-
const tab = this.moveFocus(Math.max(index, 0)
|
|
169
|
+
const tab = this.moveFocus(Math.max(index, 0));
|
|
168
170
|
this.value = tab.dataset.value;
|
|
169
171
|
tab.blur();
|
|
170
172
|
});
|
|
@@ -66,9 +66,9 @@ button {
|
|
|
66
66
|
|
|
67
67
|
:host {
|
|
68
68
|
display: block;
|
|
69
|
-
margin-top: var(--tct-textarea-margin-top, var(--app-scale-6x, 30px));
|
|
70
|
-
margin-bottom: var(--tct-textarea-margin-bottom, var(--app-scale-6x, 30px));
|
|
71
|
-
font-size: var(--tct-textarea-font-size, var(--app-font-size, inherit));
|
|
69
|
+
margin-top: var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-6x, 30px)));
|
|
70
|
+
margin-bottom: var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-6x, 30px)));
|
|
71
|
+
font-size: var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)));
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
:host([hidden]) {
|
|
@@ -77,66 +77,53 @@ button {
|
|
|
77
77
|
|
|
78
78
|
label {
|
|
79
79
|
display: block;
|
|
80
|
-
padding-left: var(--tct-textarea-label-padding-left, 0);
|
|
81
|
-
padding-right: var(--tct-textarea-label-padding-right, 0);
|
|
82
|
-
margin-top: var(--tct-textarea-label-margin-top, 0);
|
|
83
|
-
margin-bottom: var(--tct-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)));
|
|
84
|
-
color: var(--tct-textarea-label-font-color, inherit);
|
|
85
|
-
font-size: var(--tct-textarea-label-font-size, inherit);
|
|
86
|
-
font-weight: var(--tct-textarea-label-font-weight, 600);
|
|
87
|
-
text-transform: var(--tct-textarea-label-text-transform, none);
|
|
88
|
-
letter-spacing: var(--tct-textarea-label-letter-spacing, normal);
|
|
89
|
-
transition: color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
|
|
80
|
+
padding-left: var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0));
|
|
81
|
+
padding-right: var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0));
|
|
82
|
+
margin-top: var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0));
|
|
83
|
+
margin-bottom: var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px))));
|
|
84
|
+
color: var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit));
|
|
85
|
+
font-size: var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit));
|
|
86
|
+
font-weight: var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600));
|
|
87
|
+
text-transform: var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none));
|
|
88
|
+
letter-spacing: var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal));
|
|
89
|
+
transition: color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
.optional-tag {
|
|
93
|
-
margin-left: var(--tct-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)));
|
|
94
|
-
color: var(--tct-textarea-label-optional-font-color, var(--
|
|
95
|
-
font-size: var(--tct-textarea-label-optional-font-size, 12px);
|
|
96
|
-
font-weight: var(--tct-textarea-label-optional-font-weight, 400);
|
|
93
|
+
margin-left: var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px))));
|
|
94
|
+
color: var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));
|
|
95
|
+
font-size: var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, 12px));
|
|
96
|
+
font-weight: var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400));
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
.input-container {
|
|
100
|
-
min-height: var(--
|
|
100
|
+
min-height: var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));
|
|
101
101
|
height: 100%;
|
|
102
|
-
--comp-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
);
|
|
106
|
-
--comp-textarea-border-
|
|
107
|
-
--tct-textarea-border-top-right-radius,
|
|
108
|
-
var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
|
|
109
|
-
);
|
|
110
|
-
--comp-textarea-border-bottom-right-radius: var(
|
|
111
|
-
--tct-textarea-border-bottom-right-radius,
|
|
112
|
-
var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
|
|
113
|
-
);
|
|
114
|
-
--comp-textarea-border-bottom-left-radius: var(
|
|
115
|
-
--tct-textarea-border-bottom-left-radius,
|
|
116
|
-
var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
|
|
117
|
-
);
|
|
102
|
+
--comp-default-border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 3px));
|
|
103
|
+
--comp-textarea-border-top-left-radius: var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));
|
|
104
|
+
--comp-textarea-border-top-right-radius: var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));
|
|
105
|
+
--comp-textarea-border-bottom-right-radius: var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));
|
|
106
|
+
--comp-textarea-border-bottom-left-radius: var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));
|
|
118
107
|
--comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)
|
|
119
108
|
var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)
|
|
120
109
|
var(--comp-textarea-border-bottom-left-radius);
|
|
121
|
-
--comp-textarea-border-width: var(--tct-textarea-border-top-width, 1px)
|
|
122
|
-
|
|
123
|
-
var(--tct-textarea-border-left-width, 1px);
|
|
124
|
-
--comp-textarea-focus-border-width: var(--tct-textarea-focus-border-top-width, 1px)
|
|
125
|
-
var(--tct-textarea-focus-border-right-width, 1px)
|
|
126
|
-
var(--tct-textarea-focus-border-bottom-width, 1px)
|
|
127
|
-
var(--tct-textarea-focus-border-left-width, 1px);
|
|
110
|
+
--comp-textarea-border-width: var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));
|
|
111
|
+
--comp-textarea-focus-border-width: var(--tct-textarea-focus-border-top-width, var(--t-textarea-focus-border-top-width, 1px)) var(--tct-textarea-focus-border-right-width, var(--t-textarea-focus-border-right-width, 1px)) var(--tct-textarea-focus-border-bottom-width, var(--t-textarea-focus-border-bottom-width, 1px)) var(--tct-textarea-focus-border-left-width, var(--t-textarea-focus-border-left-width, 1px));
|
|
128
112
|
--comp-textarea-icon-clearance: 34px;
|
|
129
113
|
}
|
|
114
|
+
:host([disabled]) .input-container {
|
|
115
|
+
cursor: not-allowed;
|
|
116
|
+
opacity: var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
|
|
117
|
+
}
|
|
130
118
|
|
|
131
119
|
.content-container {
|
|
132
120
|
--comp-textarea-min-height: 44px;
|
|
133
121
|
--comp-textarea-min-width: 150px;
|
|
134
122
|
position: relative;
|
|
135
123
|
display: inline-block;
|
|
136
|
-
min-height: var(--
|
|
137
|
-
min-width: var(--
|
|
124
|
+
min-height: var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));
|
|
125
|
+
min-width: var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)));
|
|
138
126
|
}
|
|
139
|
-
|
|
140
127
|
:host(:not([cols])) .content-container {
|
|
141
128
|
width: 100%;
|
|
142
129
|
}
|
|
@@ -148,66 +135,64 @@ textarea {
|
|
|
148
135
|
appearance: none;
|
|
149
136
|
display: block;
|
|
150
137
|
box-sizing: border-box;
|
|
151
|
-
min-height: var(--
|
|
152
|
-
padding: var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))) var(--tct-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));
|
|
153
|
-
background-color: var(--tct-textarea-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2))));
|
|
154
|
-
color: var(--tct-textarea-font-color, var(--t-input-font-color, inherit));
|
|
138
|
+
min-height: var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));
|
|
139
|
+
padding: var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))) var(--tct-textarea-horizontal-padding, var(--t-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));
|
|
140
|
+
background-color: var(--tct-textarea-bg, var(--t-textarea-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2)))));
|
|
141
|
+
color: var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));
|
|
155
142
|
border-width: var(--comp-textarea-border-width);
|
|
156
143
|
border-style: solid;
|
|
157
|
-
border-color: var(--tct-textarea-border-color, var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc))));
|
|
144
|
+
border-color: var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc)))));
|
|
158
145
|
border-radius: var(--comp-textarea-border-radius);
|
|
159
|
-
box-shadow: var(--tct-textarea-box-shadow, none);
|
|
146
|
+
box-shadow: var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none));
|
|
160
147
|
scrollbar-width: thin;
|
|
161
148
|
scrollbar-color: var(--t-a11y-gray-color) transparent;
|
|
162
|
-
|
|
149
|
+
--comp-textarea-tween: var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));
|
|
150
|
+
transition: border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween), box-shadow var(--comp-textarea-tween);
|
|
163
151
|
}
|
|
164
|
-
|
|
165
152
|
textarea::-webkit-scrollbar {
|
|
166
153
|
width: var(--app-scale-1x);
|
|
167
154
|
height: var(--app-scale-1x);
|
|
168
155
|
margin: var(--app-scale-1x);
|
|
169
156
|
}
|
|
170
|
-
|
|
171
157
|
textarea::-webkit-scrollbar-thumb {
|
|
172
158
|
background: var(--t-a11y-gray-color);
|
|
173
159
|
border-radius: 2px;
|
|
174
160
|
}
|
|
175
|
-
|
|
176
161
|
textarea::-webkit-scrollbar-track {
|
|
177
162
|
background: transparent;
|
|
178
163
|
}
|
|
179
|
-
|
|
180
164
|
textarea:not([cols]) {
|
|
181
165
|
width: 100%;
|
|
182
166
|
}
|
|
183
|
-
|
|
184
167
|
textarea:focus {
|
|
185
168
|
border-width: var(--comp-textarea-focus-border-width, 1px);
|
|
186
|
-
border-color: var(--tct-textarea-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999))));
|
|
187
|
-
box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-textarea-focus-box-shadow, 0 0 transparent);
|
|
169
|
+
border-color: var(--tct-textarea-focus-border-color, var(--t-textarea-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999)))));
|
|
170
|
+
box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-textarea-focus-box-shadow, var(--t-textarea-focus-box-shadow, 0 0 transparent));
|
|
188
171
|
}
|
|
189
|
-
|
|
190
172
|
textarea::placeholder {
|
|
191
|
-
color: var(--tct-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))));
|
|
173
|
+
color: var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));
|
|
174
|
+
}
|
|
175
|
+
textarea[disabled] {
|
|
176
|
+
cursor: not-allowed;
|
|
177
|
+
}
|
|
178
|
+
.has-error textarea {
|
|
179
|
+
padding-right: var(--comp-textarea-icon-clearance);
|
|
180
|
+
}
|
|
181
|
+
.has-error textarea:not(:focus) {
|
|
182
|
+
border-color: var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #c30000)));
|
|
192
183
|
}
|
|
193
184
|
|
|
194
185
|
q2-icon {
|
|
195
|
-
margin-top: calc(var(--tct-textarea-border-top-width, 1px) / 2);
|
|
196
|
-
margin-bottom: calc(var(--tct-textarea-border-bottom-width, 1px) / 2);
|
|
186
|
+
margin-top: calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);
|
|
187
|
+
margin-bottom: calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);
|
|
197
188
|
pointer-events: none;
|
|
198
189
|
position: absolute;
|
|
199
|
-
top: var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));
|
|
200
|
-
color: var(--tct-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))));
|
|
190
|
+
top: var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));
|
|
191
|
+
color: var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));
|
|
201
192
|
right: 0;
|
|
202
193
|
margin-right: var(--tct-scale-2x, var(--app-scale-2x, 10px));
|
|
203
|
-
--tct-icon-stroke-primary: var(
|
|
204
|
-
|
|
205
|
-
var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))
|
|
206
|
-
);
|
|
207
|
-
--t-icon-stroke-primary: var(
|
|
208
|
-
--tct-textarea-icon-stroke-primary,
|
|
209
|
-
var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))
|
|
210
|
-
);
|
|
194
|
+
--tct-icon-stroke-primary: var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));
|
|
195
|
+
--t-icon-stroke-primary: var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));
|
|
211
196
|
}
|
|
212
197
|
|
|
213
198
|
.icon-error {
|
|
@@ -219,40 +204,23 @@ q2-icon {
|
|
|
219
204
|
.messages-container {
|
|
220
205
|
height: 0px;
|
|
221
206
|
overflow: hidden;
|
|
222
|
-
background-color: var(--tct-message-bg, var(--tct-gray-14, var(--
|
|
223
|
-
box-shadow: var(--tct-textarea-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
|
|
224
|
-
transition: height var(--tct-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));
|
|
207
|
+
background-color: var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
|
|
208
|
+
box-shadow: var(--tct-textarea-message-box-shadow, var(--t-textarea-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))));
|
|
209
|
+
transition: height var(--tct-textarea-messages-tween, var(--t-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));
|
|
225
210
|
margin-top: 2px;
|
|
226
211
|
z-index: 1;
|
|
227
212
|
position: absolute;
|
|
228
213
|
width: 100%;
|
|
229
|
-
color: var(--tct-textarea-messages-font-color, inherit);
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
:host([disabled]) .input-container {
|
|
233
|
-
cursor: not-allowed;
|
|
234
|
-
opacity: var(--tct-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
textarea[disabled] {
|
|
238
|
-
cursor: not-allowed;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
.has-error textarea {
|
|
242
|
-
padding-right: var(--comp-textarea-icon-clearance);
|
|
214
|
+
color: var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit));
|
|
243
215
|
}
|
|
244
216
|
|
|
245
217
|
.has-error label {
|
|
246
|
-
color: var(--tct-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit));
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.has-error textarea:not(:focus) {
|
|
250
|
-
border-color: var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #c30000));
|
|
218
|
+
color: var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)));
|
|
251
219
|
}
|
|
252
220
|
|
|
253
221
|
.max-length {
|
|
254
|
-
color: var(--tct-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77)));
|
|
255
|
-
font-size: var(--tct-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px)));
|
|
222
|
+
color: var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
|
|
223
|
+
font-size: var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));
|
|
256
224
|
position: absolute;
|
|
257
225
|
right: 0;
|
|
258
226
|
}
|
|
@@ -260,36 +228,31 @@ textarea[disabled] {
|
|
|
260
228
|
.btn-resize {
|
|
261
229
|
--tct-textarea-resize-icon-padding: calc(
|
|
262
230
|
calc(
|
|
263
|
-
var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)) -
|
|
264
|
-
var(--tct-textarea-resize-icon-size, 12px)
|
|
231
|
+
var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px))) - var(--tct-textarea-resize-icon-size, var(--t-textarea-resize-icon-size, 12px))
|
|
265
232
|
) / 2
|
|
266
233
|
);
|
|
267
|
-
width: var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px));
|
|
268
|
-
height: var(--tct-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px));
|
|
269
|
-
background: var(--tct-textarea-resize-btn-background, transparent);
|
|
270
|
-
stroke: var(--tct-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77)));
|
|
234
|
+
width: var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)));
|
|
235
|
+
height: var(--tct-textarea-resize-btn-height, var(--t-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px)));
|
|
236
|
+
background: var(--tct-textarea-resize-btn-background, var(--t-textarea-resize-btn-background, transparent));
|
|
237
|
+
stroke: var(--tct-textarea-resize-color, var(--t-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
|
|
271
238
|
border: 0;
|
|
272
239
|
position: absolute;
|
|
273
|
-
right: calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);
|
|
274
|
-
bottom: calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);
|
|
240
|
+
right: calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);
|
|
241
|
+
bottom: calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);
|
|
275
242
|
display: block;
|
|
276
|
-
padding: var(--tct-textarea-resize-icon-padding);
|
|
243
|
+
padding: var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));
|
|
277
244
|
font-size: 0;
|
|
278
245
|
}
|
|
279
|
-
|
|
280
246
|
.btn-resize:focus {
|
|
281
247
|
outline: none;
|
|
282
248
|
box-shadow: none;
|
|
283
249
|
}
|
|
284
|
-
|
|
285
250
|
:host([resize=both]) .btn-resize {
|
|
286
251
|
cursor: se-resize;
|
|
287
252
|
}
|
|
288
|
-
|
|
289
253
|
:host([resize=vertical]) .btn-resize {
|
|
290
254
|
cursor: s-resize;
|
|
291
255
|
}
|
|
292
|
-
|
|
293
256
|
:host([resize=horizontal]) .btn-resize {
|
|
294
257
|
cursor: e-resize;
|
|
295
258
|
}
|
package/dist/esm/loader.js
CHANGED
|
@@ -10,7 +10,7 @@ const patchEsm = () => {
|
|
|
10
10
|
const defineCustomElements = (win, options) => {
|
|
11
11
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
12
12
|
return patchEsm().then(() => {
|
|
13
|
-
return bootstrapLazy([["q2-icon",[[1,"q2-icon",{"type":[513],"label":[513]}]]],["q2-calendar",[[1,"q2-calendar",{"value":[1537],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"optional":[516],"disabled":[516],"invalid":[1540],"typeable":[516],"placeholder":[513],"buttonLabel":[513,"button-label"],"disabledMsg":[513,"disabled-msg"],"calendarLabel":[513,"calendar-label"],"disclaimer":[513],"displayFormat":[513,"display-format"],"startDate":[513,"start-date"],"endDate":[513,"end-date"],"cutoffTime":[513,"cutoff-time"],"daysOfWeekChecksum":[514,"days-of-week-checksum"],"popDirection":[513,"pop-direction"],"assume":[513],"errors":[1040],"invalidDates":[16],"validDates":[16],"onsuccess":[16],"dropdownOpen":[32],"keyboardSelection":[32],"typedValue":[32],"dateList":[32],"hintMessage":[32],"hintMessageType":[32]},[[0,"change","defaultChangeHandler"],[0,"error","defaultErrorHandler"],[0,"success","defaultSuccessHandler"],[0,"focus","delegateFocus"]]]]],["q2-dropdown",[[1,"q2-dropdown",{"type":[513],"icon":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"disabled":[516],"popDirection":[513,"pop-direction"],"name":[513],"context":[513],"contextValue":[513,"context-value"],"resolvedType":[513,"resolved-type"],"dropdownOpen":[32]},[[0,"focus","delegateFocus"]]]]],["q2-select",[[1,"q2-select",{"label":[513],"hideLabel":[516,"hide-label"],"value":[1025],"ariaLabel":[513,"aria-label"],"selectedOptions":[1032,"selected-options"],"disabled":[516],"invalid":[516],"errors":[16],"multiple":[516],"minRows":[2,"min-rows"],"popDirection":[513,"pop-direction"],"searchable":[516],"multilineOptions":[516,"multiline-options"],"optional":[516],"dropdownOpen":[32],"onlyShowingSelected":[32],"activeOptionId":[32],"searchText":[32],"hasCustomDisplay":[32],"inputFocused":[32],"statusMessage":[32]},[[0,"change","onHostElementChange"],[0,"input","onHostElementInput"],[0,"focus","delegateFocus"],[0,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["q2-editable-field",[[1,"q2-editable-field",{"value":[1537],"editing":[1540],"label":[
|
|
13
|
+
return bootstrapLazy([["q2-icon",[[1,"q2-icon",{"type":[513],"label":[513]}]]],["q2-calendar",[[1,"q2-calendar",{"value":[1537],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"optional":[516],"disabled":[516],"invalid":[1540],"typeable":[516],"placeholder":[513],"buttonLabel":[513,"button-label"],"disabledMsg":[513,"disabled-msg"],"calendarLabel":[513,"calendar-label"],"disclaimer":[513],"displayFormat":[513,"display-format"],"startDate":[513,"start-date"],"endDate":[513,"end-date"],"cutoffTime":[513,"cutoff-time"],"daysOfWeekChecksum":[514,"days-of-week-checksum"],"popDirection":[513,"pop-direction"],"assume":[513],"errors":[1040],"invalidDates":[16],"validDates":[16],"onsuccess":[16],"dropdownOpen":[32],"keyboardSelection":[32],"typedValue":[32],"dateList":[32],"hintMessage":[32],"hintMessageType":[32]},[[0,"change","defaultChangeHandler"],[0,"error","defaultErrorHandler"],[0,"success","defaultSuccessHandler"],[0,"focus","delegateFocus"]]]]],["q2-dropdown",[[1,"q2-dropdown",{"type":[513],"icon":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"disabled":[516],"popDirection":[513,"pop-direction"],"name":[513],"context":[513],"contextValue":[513,"context-value"],"resolvedType":[513,"resolved-type"],"dropdownOpen":[32]},[[0,"focus","delegateFocus"]]]]],["q2-select",[[1,"q2-select",{"label":[513],"hideLabel":[516,"hide-label"],"value":[1025],"ariaLabel":[513,"aria-label"],"selectedOptions":[1032,"selected-options"],"disabled":[516],"invalid":[516],"errors":[16],"multiple":[516],"minRows":[2,"min-rows"],"popDirection":[513,"pop-direction"],"searchable":[516],"multilineOptions":[516,"multiline-options"],"optional":[516],"dropdownOpen":[32],"onlyShowingSelected":[32],"activeOptionId":[32],"searchText":[32],"hasCustomDisplay":[32],"inputFocused":[32],"statusMessage":[32]},[[0,"change","onHostElementChange"],[0,"input","onHostElementInput"],[0,"focus","delegateFocus"],[0,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["q2-editable-field",[[1,"q2-editable-field",{"value":[1537],"editing":[1540],"label":[1537],"hideLabel":[1540,"hide-label"],"ariaLabel":[1537,"aria-label"],"type":[513],"formatModifier":[513,"format-modifier"],"truncated":[513],"maxlength":[514],"persistentLabel":[516,"persistent-label"],"hints":[16],"errors":[16]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"]]]]],["q2-carousel",[[4,"q2-carousel",{"autoPlay":[516,"auto-play"],"fullWidthPanes":[516,"full-width-panes"],"hidePagination":[516,"hide-pagination"],"showNavigationArrows":[516,"show-navigation-arrows"],"ariaLabel":[513,"aria-label"],"label":[513],"index":[1538],"universalCarouselOptions":[32],"fullWidthDisplayOptions":[32],"activePaneIndex":[32],"applyFocus":[32],"applyPaginationFocus":[32],"autoPlayInProgress":[32],"compactMode":[32],"carouselWrapperWidth":[32]},[[0,"change","onHostElementChange"],[0,"clickCarouselPane","carouselPaneClicked"],[0,"focus","delegateFocus"]]]]],["q2-section",[[1,"q2-section",{"label":[513],"collapsible":[516],"noCollapseIcon":[516,"no-collapse-icon"],"expanded":[1540],"contentHeight":[32],"hasYieldedHeader":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-stepper",[[1,"q2-stepper",{"currentStep":[1538,"current-step"],"stepCount":[1026,"step-count"],"lastEnabledStep":[1026,"last-enabled-step"],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-tab-container",[[1,"q2-tab-container",{"value":[1537],"type":[513],"name":[513],"color":[513],"noPrint":[516,"no-print"],"hasLeft":[32],"hasRight":[32],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32],"tabs":[32]},[[0,"change","defaultChangeHandler"],[9,"resize","onResize"],[0,"focus","onFocus"]]]]],["q2-avatar",[[1,"q2-avatar",{"name":[513],"initials":[513],"src":[513],"icon":[1],"badSrc":[32]}]]],["q2-checkbox",[[1,"q2-checkbox",{"checked":[1540],"type":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"indeterminate":[516],"disabled":[516],"value":[513],"name":[513],"hasError":[516,"has-error"],"groupDisabled":[516,"group-disabled"],"alignment":[513]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-checkbox-group",[[1,"q2-checkbox-group",{"label":[513],"value":[1040],"disabled":[516],"optional":[516],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["q2-option",[[1,"q2-option",{"role":[513],"tabindex":[513],"display":[513],"value":[513],"disabled":[516],"optionId":[513,"option-id"],"disabledGroup":[516,"disabled-group"],"selected":[516],"hidden":[516],"multiline":[516],"active":[516],"_multiSelectHidden":[516,"_multiselecthidden"]}]]],["q2-radio-group",[[1,"q2-radio-group",{"label":[513],"value":[1025],"disabled":[516],"name":[513],"optional":[516],"tilelayout":[516],"tileAlignment":[513,"tile-alignment"],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"],[0,"keydown","keydownHandler"]]]]],["q2-textarea",[[1,"q2-textarea",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"hideMessages":[516,"hide-messages"],"optional":[516],"placeholder":[513],"disabled":[516],"readonly":[516],"spellcheck":[516],"maxlength":[1538],"rows":[514],"cols":[514],"resize":[513],"errors":[16],"hints":[16],"hasFocus":[32],"downParams":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["q2-carousel-pane",[[4,"q2-carousel-pane",{"index":[2],"siblingCount":[2,"sibling-count"],"isActivePane":[516,"is-active-pane"],"label":[513]}]]],["q2-loading-element",[[0,"q2-loading-element",{"shape":[513],"width":[513],"height":[513],"borderRadius":[513,"border-radius"]}]]],["q2-loc",[[1,"q2-loc",{"value":[513],"substitutions":[16]}]]],["q2-optgroup",[[1,"q2-optgroup",{"disabled":[516],"label":[513],"hidden":[32]}]]],["q2-radio",[[1,"q2-radio",{"label":[513],"hideLabel":[516,"hide-label"],"value":[513],"disabled":[516],"checked":[516],"name":[513],"ariaLabel":[513,"aria-label"],"groupDisabled":[4,"group-disabled"],"groupTileLayout":[4,"group-tile-layout"]},[[0,"click","onHostClick"],[0,"focus","delegateFocus"]]]]],["q2-stepper-pane",[[1,"q2-stepper-pane",{"label":[513],"description":[513],"isActive":[516,"is-active"]}]]],["q2-tab-pane",[[1,"q2-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2]}]]],["tecton-tab-pane",[[1,"tecton-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2],"provided":[516],"url":[513],"moduleId":[513,"module-id"],"minHeight":[513,"min-height"],"authPayload":[16],"showForm":[4,"show-form"],"_showForm":[32]}]]],["q2-dropdown-item",[[1,"q2-dropdown-item",{"disabled":[516],"removable":[516],"separator":[516],"label":[513],"ariaLabel":[513,"aria-label"],"value":[513]},[[0,"focus","onHostElementFocus"]]]]],["q2-message",[[1,"q2-message",{"type":[513],"appearance":[513],"description":[516],"presentToggle":[32],"present":[64]},[[0,"focus","delegateFocus"]]]]],["q2-input",[[1,"q2-input",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"type":[513],"placeholder":[513],"disabled":[516],"autocomplete":[513],"autocorrect":[513],"autocapitalize":[513],"hideMessages":[516,"hide-messages"],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"readonly":[516],"clearable":[516],"optional":[516],"formatModifier":[513,"format-modifier"],"maxlength":[1538],"pseudo":[516],"showVisibilityToggle":[516,"show-visibility-toggle"],"textHidden":[1540,"text-hidden"],"ariaControls":[1,"aria-controls"],"role":[1],"ariaOwns":[1,"aria-owns"],"ariaLabel":[513,"aria-label"],"ariaHaspopup":[1,"aria-haspopup"],"ariaExpanded":[4,"aria-expanded"],"ariaActivedescendant":[8,"aria-activedescendant"],"errors":[16],"hints":[16],"formattedValueObject":[32],"hasFocus":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["click-elsewhere",[[0,"click-elsewhere"]]],["q2-btn_2",[[1,"q2-btn",{"ariaExpanded":[4,"aria-expanded"],"ariaHasPopup":[8,"aria-has-popup"],"ariaControls":[1,"aria-controls"],"ariaSelected":[4,"aria-selected"],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"tabIndex":[2,"tab-index"],"intent":[513],"disabled":[516],"type":[513],"loading":[516],"badge":[516],"active":[516],"fab":[516],"iconPosition":[32]},[[2,"click","disable"],[0,"focus","delegateFocus"]]],[1,"q2-loading",{"type":[513],"shape":[513],"modifiers":[513],"counts":[513],"label":[513],"ariaLabel":[513,"aria-label"],"inline":[516]}]]]], options);
|
|
14
14
|
});
|
|
15
15
|
};
|
|
16
16
|
|
|
@@ -83,7 +83,7 @@ const Q2Btn = class {
|
|
|
83
83
|
};
|
|
84
84
|
Q2Btn.style = stylesCss$1;
|
|
85
85
|
|
|
86
|
-
const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--tct-scale-5, var(--app-scale-5, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:
|
|
86
|
+
const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--tct-scale-5, var(--app-scale-5, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, #2e2e2e));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #cccccc));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background-color:var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)))}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";
|
|
87
87
|
|
|
88
88
|
const Q2Loading = class {
|
|
89
89
|
constructor(hostRef) {
|
|
@@ -3129,7 +3129,7 @@ function addEmptyDates(from, to) {
|
|
|
3129
3129
|
return [...Array(to - from).keys()].map(() => (Object.assign({}, emptyDate)));
|
|
3130
3130
|
}
|
|
3131
3131
|
|
|
3132
|
-
const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:block}:host[hidden]{display:none}.calendar-container{position:relative;display:block}q2-input{margin:0;cursor:pointer}.q2-element-dropdown{text-align:center;min-width:308px}.q2-element-dropdown.dropup{bottom:var(--comp-input-min-height, 44px);margin-bottom:0px}.calendar-label{font-size:var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, 16px));flex:1 1;flex-basis:calc(100% - var
|
|
3132
|
+
const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:block}:host[hidden]{display:none}.calendar-container{position:relative;display:block}q2-input{margin:0;cursor:pointer}.q2-element-dropdown{text-align:center;min-width:308px}.q2-element-dropdown.dropup{bottom:var(--comp-input-min-height, 44px);margin-bottom:0px}.calendar-label{font-size:var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, 16px));flex:1 1;flex-basis:calc(100% - var(--tct-btn-icon-width, 44px));margin:0;padding:var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))) 0}.calendar-hint{text-align:left;margin:0}.cal-month-heading{padding:0 0 0.75rem;display:flex;justify-content:center;align-items:center;font-size:var(--tct-calendar-month-font-size, var(--t-calendar-month-font-size, 16px));font-weight:var(--tct-calendar-month-font-weight, var(--t-calendar-month-font-weight, 600))}.cal-month-text{min-width:82px;display:inline-block}.cal-year-text{min-width:50px;display:inline-block}table{width:100%;margin-bottom:2px}th{font-size:var(--tct-calendar-day-heading-font-size, var(--t-calendar-day-heading-font-size, inherit));font-weight:var(--tct-calendar-day-heading-font-weight, var(--t-calendar-day-heading-font-weight, 600));width:14.285714%}td{height:44px;cursor:pointer}td.is-unavailable{border:1px solid var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}td.is-valid:hover{background-color:var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--app-gray14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2))))));color:var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))}td[aria-hidden],td[aria-disabled]{pointer-events:none;cursor:not-allowed}td[aria-disabled]{opacity:var(--tct-calendar-day-disabled-opacity, var(--t-calendar-day-disabled-opacity, var(--app-disabled-opacity, 0.4)))}td[aria-selected]{background-color:var(--tct-calendar-day-selected-bg, var(--t-calendar-day-selected-bg, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2))))))));color:var(--tct-calendar-day-selected-font-color, var(--t-calendar-day-selected-font-color, var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))));box-shadow:inset 2px 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1)))), inset -2px -2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}.today-decorator{text-transform:uppercase;font-weight:700;font-size:10px;height:12px}.calendar-disclaimer{font-size:var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));border-top:1px solid var(--tct-calendar-disclaimer-border-color, var(--t-calendar-disclaimer-border-color, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6))))));padding:var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));text-align:left}";
|
|
3133
3133
|
|
|
3134
3134
|
const Q2Calendar = class {
|
|
3135
3135
|
constructor(hostRef) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
|
|
2
2
|
import { c as createGuid, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, l as loc } from './index-ec6660af.js';
|
|
3
3
|
|
|
4
|
-
const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;padding:var(--tct-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px))) 0}label{display:flex;align-items:center
|
|
4
|
+
const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;padding:var(--tct-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px))) 0}label{display:flex;align-items:center;--comp-checkbox-outer-stroke-color:var(\n --tct-checkbox-outer-stroke-color,\n var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))\n );--comp-checkbox-outer-fill-color:var(\n --tct-checkbox-outer-fill-color,\n var(--tct-white, var(--app-white, #ffffff))\n );--comp-checkbox-checked-color:var(\n --tct-checkbox-check-stroke-color,\n var(\n --t-checkbox-fill,\n var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))\n )\n )}input:disabled+label{opacity:var(--tct-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)))}.checkbox-icon{height:var(--tct-checkbox-size, 20px);width:var(--tct-checkbox-size, 20px);border-radius:var(--tct-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));stroke:var(--comp-checkbox-outer-stroke-color);color:var(--comp-checkbox-outer-stroke-color);--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, 2);fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}.checkbox-icon,.label-text{cursor:pointer}input:focus+label .checkbox-icon{box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}input:checked+label .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))}input:focus+label .checkbox-icon{stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color))}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, 2.5);stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, 3.5)}.q2-checkbox-label-content{font-weight:var(--tct-checkbox-font-weight, 400);width:calc(100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px)));cursor:inherit}input:checked+label .q2-checkbox-label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}:host([type=favorite]){--scoped-checkbox-favorite-stroke-color:var(\n --tct-checkbox-favorite-stroke-color,\n var(--t-textA, rgba(77, 77, 77, 0.77))\n );--scoped-checkbox-favorite-fill-color:var(\n --tct-checkbox-favorite-fill-color,\n var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))\n )}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, 1);--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-stroke-color);width:var(--tct-checkbox-size, 20px);height:var(--tct-checkbox-size, 20px);transition:fill var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), stroke var(--tct-tween-2, var(--app-tween-2, 0.4s ease))}:host([type=favorite]:focus-within) input+label .checkbox-icon,:host([type=favorite]:hover) input+label .checkbox-icon{--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, 2)}:host([type=favorite]) input:checked+label .checkbox-icon{--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-fill-color);fill:var(--scoped-checkbox-favorite-fill-color);transition:fill var(--tct-tween-1, var(--app-tween-1, 0.2s ease)), color var(--tct-tween-1, var(--app-tween-1, 0.2s ease)), stroke var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=favorite]:focus-within) input:checked+label .checkbox-icon,:host([type=favorite]:hover) input:checked+label .checkbox-icon{--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-stroke-color)}:host([alignment=right]) label,:host([type=toggle]:not([alignment=left])) label{flex-flow:row-reverse}.checkbox-icon,:host([type=toggle][alignment=left]) .toggle-svg{margin-right:var(--tct-scale-2, var(--app-scale-2, 10px));margin-left:0}:host([alignment=right]) .checkbox-icon,.toggle-svg{cursor:pointer;margin-right:0;margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}:host([type=toggle]) .toggle-svg{height:30px;width:46px;position:relative}:host([type=toggle]) .toggle-track,:host([type=toggle]) .toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}:host([type=toggle]) .toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));height:14px;width:46px}:host([type=toggle]) input:checked+label .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));opacity:0.5}:host([type=toggle]) .toggle-indicator{transition:left var(--tct-tween-1, var(--app-tween-1, 0.2s ease));height:30px;width:30px;left:0;border-radius:50%}:host([type=toggle]) input:checked+label .toggle-indicator{left:21px}:host([type=toggle]) .toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))))}:host([type=toggle]) input:checked+label .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color))}:host([type=toggle]) input:checked+label .off,:host([type=toggle]) input:not(:checked)+label .on{opacity:0}:host([type=toggle]) input:focus+label .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));stroke-width:10px;stroke-opacity:0.5}:host([type=toggle]) input:not(:checked):focus+label .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))))}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff)));transition:opacity var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=toggle]) input:checked+label .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff))))}";
|
|
5
5
|
|
|
6
6
|
const Q2Checkbox = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -12,10 +12,19 @@ const Q2Checkbox = class {
|
|
|
12
12
|
///// Actions ////////
|
|
13
13
|
this.onInputChange = (event) => {
|
|
14
14
|
event.stopPropagation();
|
|
15
|
+
if (this.disabled)
|
|
16
|
+
return;
|
|
17
|
+
if (!(event.target instanceof HTMLInputElement))
|
|
18
|
+
return;
|
|
15
19
|
this.change.emit({
|
|
16
20
|
value: event.target.value,
|
|
17
21
|
checked: event.target.checked
|
|
18
22
|
});
|
|
23
|
+
this.inputElement.focus();
|
|
24
|
+
};
|
|
25
|
+
this.onControlClick = (event) => {
|
|
26
|
+
event.stopPropagation();
|
|
27
|
+
this.inputElement.click();
|
|
19
28
|
};
|
|
20
29
|
}
|
|
21
30
|
////////// LIFECYCLE HOOKS ////////
|
|
@@ -42,16 +51,16 @@ const Q2Checkbox = class {
|
|
|
42
51
|
}
|
|
43
52
|
/////// View Methods ///////
|
|
44
53
|
render() {
|
|
45
|
-
return (h("div", { class: "checkbox-container" }, h("input", { id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined,
|
|
54
|
+
return (h("div", { class: "checkbox-container" }, h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, "test-id": "q2CheckboxInnerCheckBox", onChange: this.onInputChange }), h("label", { "test-id": "checkboxButton" }, this.generateCheckboxSVG(), !this.hideLabel && (h("div", { class: "q2-checkbox-label-content" }, h("span", { class: "label-text", onClick: this.onControlClick }, loc(this.label)), h("slot", null))))));
|
|
46
55
|
}
|
|
47
56
|
generateCheckboxSVG() {
|
|
48
57
|
if (this.type === 'favorite') {
|
|
49
|
-
return h("q2-icon", { type: "star", class: "checkbox-icon" });
|
|
58
|
+
return h("q2-icon", { type: "star", class: "checkbox-icon", onClick: this.onControlClick });
|
|
50
59
|
}
|
|
51
60
|
if (this.type === 'toggle') {
|
|
52
61
|
return this.generateToggleSVG();
|
|
53
62
|
}
|
|
54
|
-
return (h("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 20 20", class: "checkbox-icon", focusable: "false" }, h("rect", { x: "1", y: "1", width: "18", height: "18", rx: "3" }), (this.checked || this.indeterminate) && this.generateCheckBoxSVGFill()));
|
|
63
|
+
return (h("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 20 20", class: "checkbox-icon", focusable: "false", onClick: this.onControlClick }, h("rect", { x: "1", y: "1", width: "18", height: "18", rx: "3" }), (this.checked || this.indeterminate) && this.generateCheckBoxSVGFill()));
|
|
55
64
|
}
|
|
56
65
|
generateCheckBoxSVGFill() {
|
|
57
66
|
if (this.indeterminate) {
|
|
@@ -60,7 +69,7 @@ const Q2Checkbox = class {
|
|
|
60
69
|
return h("polyline", { class: "checkbox-fill checked-fill", points: "5 11 8.5 14.5 15 6" });
|
|
61
70
|
}
|
|
62
71
|
generateToggleSVG() {
|
|
63
|
-
return (h("div", { class: "toggle-svg" }, h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 46 14", class: "toggle-track" }, h("rect", { width: "36", height: "14", rx: "7", x: "5" })), h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 30 30", class: "toggle-indicator" }, h("circle", { class: "toggle-circle", width: "20", height: "20", cx: "15", cy: "15", r: "10" }), h("line", { class: "off checked-fill", x1: "12", y1: "18", x2: "18", y2: "12" }), h("line", { class: "off checked-fill", x1: "12", y1: "12", x2: "18", y2: "18" }), h("polyline", { class: "on checked-fill", points: "11,16 14,19 18,12 14,19" }))));
|
|
72
|
+
return (h("div", { class: "toggle-svg", onClick: this.onControlClick }, h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 46 14", class: "toggle-track" }, h("rect", { width: "36", height: "14", rx: "7", x: "5" })), h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 30 30", class: "toggle-indicator" }, h("circle", { class: "toggle-circle", width: "20", height: "20", cx: "15", cy: "15", r: "10" }), h("line", { class: "off checked-fill", x1: "12", y1: "18", x2: "18", y2: "12" }), h("line", { class: "off checked-fill", x1: "12", y1: "12", x2: "18", y2: "18" }), h("polyline", { class: "on checked-fill", points: "11,16 14,19 18,12 14,19" }))));
|
|
64
73
|
}
|
|
65
74
|
get hostElement() { return getElement(this); }
|
|
66
75
|
static get watchers() { return {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, F as Fragment, g as getElement } from './index-be8376c0.js';
|
|
2
2
|
import { s as setPopProperties, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus, l as loc } from './index-ec6660af.js';
|
|
3
3
|
|
|
4
|
-
const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:inline-flex}.dropdown-container{position:relative;display:block}.dropdown-button-content{display:flex;align-items:center}.dropdown-button.unstyled .dropdown-button-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px))}.q2-element-dropdown{width:var(--tct-dropdown-width, var(--t-dropdown-width, 175px))}.q2-element-dropdown.dropup{bottom:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px))}q2-btn[color=primary]~.q2-element-dropdown.dropup,q2-btn[intent=workflow-primary]~.q2-element-dropdown.dropup{bottom:calc( var
|
|
4
|
+
const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:inline-flex}.dropdown-container{position:relative;display:block}.dropdown-button-content{display:flex;align-items:center}.dropdown-button.unstyled .dropdown-button-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px))}.q2-element-dropdown{width:var(--tct-dropdown-width, var(--t-dropdown-width, 175px))}.q2-element-dropdown.dropup{bottom:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px))}q2-btn[color=primary]~.q2-element-dropdown.dropup,q2-btn[intent=workflow-primary]~.q2-element-dropdown.dropup{bottom:calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0)))}q2-btn[color=secondary]~.q2-element-dropdown.dropup,q2-btn[intent=workflow-secondary]~.q2-element-dropdown.dropup{bottom:calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0)))}q2-btn[intent=neutral]~.q2-element-dropdown.dropup{bottom:calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0)))}";
|
|
5
5
|
|
|
6
6
|
const Q2Dropdown = class {
|
|
7
7
|
constructor(hostRef) {
|