q2-tecton-elements 1.25.2 → 1.26.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-badge_2.cjs.entry.js +21 -21
- package/dist/cjs/q2-btn_2.cjs.entry.js +4 -4
- package/dist/cjs/q2-calendar.cjs.entry.js +2 -2
- package/dist/cjs/q2-carousel.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox.cjs.entry.js +4 -4
- package/dist/cjs/q2-dropdown-item.cjs.entry.js +1 -1
- package/dist/cjs/q2-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/q2-editable-field.cjs.entry.js +1 -1
- package/dist/cjs/q2-pill.cjs.entry.js +1 -1
- package/dist/cjs/q2-radio-group.cjs.entry.js +8 -6
- package/dist/cjs/q2-radio.cjs.entry.js +4 -4
- package/dist/cjs/q2-select.cjs.entry.js +1 -1
- package/dist/cjs/q2-tab-container.cjs.entry.js +14 -2
- package/dist/cjs/q2-tab-pane.cjs.entry.js +6 -1
- package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
- package/dist/cjs/q2-tooltip.cjs.entry.js +17 -2
- package/dist/cjs/tecton-tab-pane.cjs.entry.js +5 -0
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/q2-btn/index.js +52 -43
- package/dist/collection/components/q2-calendar/index.js +48 -39
- package/dist/collection/components/q2-carousel/index.js +21 -18
- package/dist/collection/components/q2-checkbox/index.js +42 -36
- package/dist/collection/components/q2-checkbox-group/index.js +1 -1
- package/dist/collection/components/q2-dropdown/index.js +25 -22
- package/dist/collection/components/q2-dropdown-item/index.js +11 -8
- package/dist/collection/components/q2-editable-field/index.js +32 -24
- package/dist/collection/components/q2-input/index.js +71 -49
- package/dist/collection/components/q2-loading/index.js +18 -15
- package/dist/collection/components/q2-pill/styles.css +1 -1
- package/dist/collection/components/q2-radio/index.js +24 -21
- package/dist/collection/components/q2-radio/styles.css +6 -6
- package/dist/collection/components/q2-radio-group/index.js +14 -9
- package/dist/collection/components/q2-select/index.js +21 -18
- package/dist/collection/components/q2-tab-container/index.js +18 -6
- package/dist/collection/components/q2-tab-pane/index.js +55 -0
- package/dist/collection/components/q2-tooltip/index.js +42 -3
- package/dist/collection/components/tecton-tab-pane/index.js +55 -0
- package/dist/components/index5.js +7 -7
- package/dist/components/index6.js +4 -4
- package/dist/components/index8.js +22 -22
- package/dist/components/index9.js +3 -3
- package/dist/components/q2-calendar.js +6 -6
- package/dist/components/q2-carousel.js +2 -2
- package/dist/components/q2-checkbox-group.js +1 -1
- package/dist/components/q2-checkbox.js +7 -7
- package/dist/components/q2-dropdown.js +4 -4
- package/dist/components/q2-editable-field.js +4 -4
- package/dist/components/q2-pill.js +1 -1
- package/dist/components/q2-radio-group.js +10 -8
- package/dist/components/q2-radio.js +7 -7
- package/dist/components/q2-select.js +2 -2
- package/dist/components/q2-tab-container.js +14 -2
- package/dist/components/q2-tab-pane.js +8 -1
- package/dist/components/q2-tooltip.js +19 -3
- package/dist/components/tecton-tab-pane.js +7 -0
- package/dist/docs.json +427 -40
- package/dist/esm/loader.js +1 -1
- package/dist/esm/q2-badge_2.entry.js +21 -21
- package/dist/esm/q2-btn_2.entry.js +4 -4
- package/dist/esm/q2-calendar.entry.js +2 -2
- package/dist/esm/q2-carousel.entry.js +1 -1
- package/dist/esm/q2-checkbox-group.entry.js +1 -1
- package/dist/esm/q2-checkbox.entry.js +4 -4
- package/dist/esm/q2-dropdown-item.entry.js +1 -1
- package/dist/esm/q2-dropdown.entry.js +1 -1
- package/dist/esm/q2-editable-field.entry.js +1 -1
- package/dist/esm/q2-pill.entry.js +1 -1
- package/dist/esm/q2-radio-group.entry.js +8 -6
- package/dist/esm/q2-radio.entry.js +4 -4
- package/dist/esm/q2-select.entry.js +1 -1
- package/dist/esm/q2-tab-container.entry.js +14 -2
- package/dist/esm/q2-tab-pane.entry.js +6 -1
- package/dist/esm/q2-tecton-elements.js +1 -1
- package/dist/esm/q2-tooltip.entry.js +17 -2
- package/dist/esm/tecton-tab-pane.entry.js +5 -0
- package/dist/q2-tecton-elements/p-09639e95.entry.js +1 -0
- package/dist/q2-tecton-elements/p-0b82891e.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-73c12774.entry.js → p-0cbad3bc.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-159d94cc.entry.js +1 -0
- package/dist/q2-tecton-elements/p-18808c27.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-0a394c3b.entry.js → p-4734a577.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-fa8cb091.entry.js → p-55d192b3.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-5878b8bd.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-d4909df7.entry.js → p-74ac19cd.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-f0a716dd.entry.js → p-87cecc80.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-8d703466.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-3fe98171.entry.js → p-a411f2f3.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-30069b63.entry.js → p-a7679912.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-b8420bfe.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-406f8ca9.entry.js → p-bc8a507b.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-f83d2df5.entry.js → p-bfaff58b.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-e43d437d.entry.js +1 -0
- package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
- package/dist/test/helpers.js +11 -0
- package/dist/types/components/q2-btn/index.d.ts +6 -3
- package/dist/types/components/q2-calendar/index.d.ts +5 -2
- package/dist/types/components/q2-carousel/index.d.ts +2 -1
- package/dist/types/components/q2-checkbox/index.d.ts +6 -4
- package/dist/types/components/q2-checkbox-group/index.d.ts +1 -1
- package/dist/types/components/q2-dropdown/index.d.ts +3 -2
- package/dist/types/components/q2-dropdown-item/index.d.ts +2 -1
- package/dist/types/components/q2-editable-field/index.d.ts +5 -3
- package/dist/types/components/q2-input/index.d.ts +31 -7
- package/dist/types/components/q2-loading/index.d.ts +4 -3
- package/dist/types/components/q2-radio/index.d.ts +3 -2
- package/dist/types/components/q2-radio-group/index.d.ts +3 -2
- package/dist/types/components/q2-select/index.d.ts +2 -1
- package/dist/types/components/q2-tab-container/index.d.ts +5 -2
- package/dist/types/components/q2-tab-pane/index.d.ts +3 -0
- package/dist/types/components/q2-tooltip/index.d.ts +4 -1
- package/dist/types/components/tecton-tab-pane/index.d.ts +3 -0
- package/dist/types/components.d.ts +140 -24
- package/dist/types/workspace/workspace/{tecton-production_release_1.25.x → Tecton_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +2 -1
- package/package.json +3 -3
- package/dist/q2-tecton-elements/p-18d9cea8.entry.js +0 -1
- package/dist/q2-tecton-elements/p-2313e9a9.entry.js +0 -1
- package/dist/q2-tecton-elements/p-2b9c1815.entry.js +0 -1
- package/dist/q2-tecton-elements/p-471e5d58.entry.js +0 -1
- package/dist/q2-tecton-elements/p-a6bfe392.entry.js +0 -1
- package/dist/q2-tecton-elements/p-c01d0332.entry.js +0 -1
- package/dist/q2-tecton-elements/p-df91e954.entry.js +0 -1
- package/dist/q2-tecton-elements/p-e8e113c2.entry.js +0 -1
|
@@ -8,6 +8,10 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
|
|
|
8
8
|
import { ActionSheetData, ActionSheetListCloseData } from "q2-tecton-common/lib/utility/action-sheet";
|
|
9
9
|
import { IChartData } from "src/utils/charting";
|
|
10
10
|
import { IDonutChartData } from "./components/q2-chart-donut/index";
|
|
11
|
+
import { Q2Input } from "./components/q2-input";
|
|
12
|
+
import { InputType } from "./components/q2-input/index";
|
|
13
|
+
import { Q2Icon } from "./components/q2-icon";
|
|
14
|
+
import { Q2Badge } from "./components/q2-badge";
|
|
11
15
|
import { IEventDetail } from "./components/q2-input/types";
|
|
12
16
|
import { IOptionValue } from "./components/q2-option-list/index";
|
|
13
17
|
import { IOptionValue as IOptionValue1 } from "./components/q2-option-list";
|
|
@@ -40,12 +44,21 @@ export namespace Components {
|
|
|
40
44
|
"ariaControls": string;
|
|
41
45
|
"ariaExpanded": string;
|
|
42
46
|
"ariaHasPopup": string;
|
|
47
|
+
/**
|
|
48
|
+
* @deprecated
|
|
49
|
+
*/
|
|
43
50
|
"ariaLabel": string;
|
|
44
51
|
"ariaSelected": string;
|
|
45
52
|
"badge": boolean;
|
|
46
53
|
"block": boolean;
|
|
54
|
+
/**
|
|
55
|
+
* @deprecated
|
|
56
|
+
*/
|
|
47
57
|
"color": string;
|
|
48
58
|
"disabled": boolean;
|
|
59
|
+
/**
|
|
60
|
+
* @deprecated
|
|
61
|
+
*/
|
|
49
62
|
"fab": boolean;
|
|
50
63
|
"hideLabel": boolean;
|
|
51
64
|
"intent": 'workflow-primary' | 'workflow-secondary' | 'neutral';
|
|
@@ -55,8 +68,14 @@ export namespace Components {
|
|
|
55
68
|
"type": string;
|
|
56
69
|
}
|
|
57
70
|
interface Q2Calendar {
|
|
71
|
+
/**
|
|
72
|
+
* @deprecated
|
|
73
|
+
*/
|
|
58
74
|
"ariaLabel": string;
|
|
59
75
|
"assume": 'current' | 'future' | 'past';
|
|
76
|
+
/**
|
|
77
|
+
* @deprecated
|
|
78
|
+
*/
|
|
60
79
|
"buttonLabel": string;
|
|
61
80
|
"calendarLabel": string;
|
|
62
81
|
"clearable": boolean;
|
|
@@ -72,6 +91,9 @@ export namespace Components {
|
|
|
72
91
|
"invalid": boolean;
|
|
73
92
|
"invalidDates": string[];
|
|
74
93
|
"label": string;
|
|
94
|
+
/**
|
|
95
|
+
* @deprecated
|
|
96
|
+
*/
|
|
75
97
|
"onsuccess": (e: CustomEvent) => void;
|
|
76
98
|
"optional": boolean;
|
|
77
99
|
"placeholder": string;
|
|
@@ -97,6 +119,9 @@ export namespace Components {
|
|
|
97
119
|
"url": string;
|
|
98
120
|
}
|
|
99
121
|
interface Q2Carousel {
|
|
122
|
+
/**
|
|
123
|
+
* @deprecated
|
|
124
|
+
*/
|
|
100
125
|
"ariaLabel": string;
|
|
101
126
|
"autoPlay": boolean;
|
|
102
127
|
"fullWidthPanes": boolean;
|
|
@@ -167,18 +192,24 @@ export namespace Components {
|
|
|
167
192
|
}
|
|
168
193
|
interface Q2Checkbox {
|
|
169
194
|
"alignment": string;
|
|
195
|
+
/**
|
|
196
|
+
* @deprecated
|
|
197
|
+
*/
|
|
170
198
|
"ariaLabel": string;
|
|
171
199
|
"checked": boolean;
|
|
172
200
|
"description": string;
|
|
173
201
|
"disabled": boolean;
|
|
174
202
|
"groupDisabled": boolean;
|
|
203
|
+
/**
|
|
204
|
+
* @deprecated
|
|
205
|
+
*/
|
|
175
206
|
"hasError": boolean;
|
|
176
207
|
"hideLabel": boolean;
|
|
177
208
|
"indeterminate": boolean;
|
|
178
209
|
"label": string;
|
|
179
210
|
"name": string;
|
|
180
211
|
"readonly": boolean;
|
|
181
|
-
"type":
|
|
212
|
+
"type": 'favorite' | 'toggle';
|
|
182
213
|
"value": string;
|
|
183
214
|
}
|
|
184
215
|
interface Q2CheckboxGroup {
|
|
@@ -190,6 +221,9 @@ export namespace Components {
|
|
|
190
221
|
"value": object;
|
|
191
222
|
}
|
|
192
223
|
interface Q2Dropdown {
|
|
224
|
+
/**
|
|
225
|
+
* @deprecated
|
|
226
|
+
*/
|
|
193
227
|
"ariaLabel": string;
|
|
194
228
|
"block": boolean;
|
|
195
229
|
"context": string;
|
|
@@ -201,9 +235,12 @@ export namespace Components {
|
|
|
201
235
|
"name": string;
|
|
202
236
|
"popDirection": 'up' | 'down';
|
|
203
237
|
"resolvedType": string;
|
|
204
|
-
"type":
|
|
238
|
+
"type": 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral';
|
|
205
239
|
}
|
|
206
240
|
interface Q2DropdownItem {
|
|
241
|
+
/**
|
|
242
|
+
* @deprecated
|
|
243
|
+
*/
|
|
207
244
|
"ariaLabel": string;
|
|
208
245
|
"disabled": boolean;
|
|
209
246
|
"label": string;
|
|
@@ -212,6 +249,9 @@ export namespace Components {
|
|
|
212
249
|
"value": string;
|
|
213
250
|
}
|
|
214
251
|
interface Q2EditableField {
|
|
252
|
+
/**
|
|
253
|
+
* @deprecated
|
|
254
|
+
*/
|
|
215
255
|
"ariaLabel": string;
|
|
216
256
|
"disabled": boolean;
|
|
217
257
|
"editing": boolean;
|
|
@@ -222,8 +262,8 @@ export namespace Components {
|
|
|
222
262
|
"label": string;
|
|
223
263
|
"maxlength": number;
|
|
224
264
|
"persistentLabel": boolean;
|
|
225
|
-
"truncated":
|
|
226
|
-
"type":
|
|
265
|
+
"truncated": boolean;
|
|
266
|
+
"type": Q2Input['type'];
|
|
227
267
|
"value": string;
|
|
228
268
|
}
|
|
229
269
|
interface Q2Icon {
|
|
@@ -236,12 +276,15 @@ export namespace Components {
|
|
|
236
276
|
"ariaControls": string;
|
|
237
277
|
"ariaExpanded": string;
|
|
238
278
|
"ariaHaspopup": string;
|
|
279
|
+
/**
|
|
280
|
+
* @deprecated
|
|
281
|
+
*/
|
|
239
282
|
"ariaLabel": string;
|
|
240
283
|
"ariaOwns": string;
|
|
241
284
|
"autocapitalize": string;
|
|
242
285
|
"autocomplete": string;
|
|
243
|
-
"autocorrect":
|
|
244
|
-
"badgeTheme": '
|
|
286
|
+
"autocorrect": 'on' | 'off';
|
|
287
|
+
"badgeTheme": Q2Badge['theme'];
|
|
245
288
|
"badgeValue": string;
|
|
246
289
|
"clearable": boolean;
|
|
247
290
|
"current": 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
|
|
@@ -251,8 +294,8 @@ export namespace Components {
|
|
|
251
294
|
"hideLabel": boolean;
|
|
252
295
|
"hideMessages": boolean;
|
|
253
296
|
"hints": string[];
|
|
254
|
-
"iconLeft":
|
|
255
|
-
"iconRight":
|
|
297
|
+
"iconLeft": Q2Icon['type'];
|
|
298
|
+
"iconRight": Q2Icon['type'];
|
|
256
299
|
"label": string;
|
|
257
300
|
"max": number;
|
|
258
301
|
"maxlength": number;
|
|
@@ -265,17 +308,20 @@ export namespace Components {
|
|
|
265
308
|
"showVisibilityToggle": boolean;
|
|
266
309
|
"step": number;
|
|
267
310
|
"textHidden": boolean;
|
|
268
|
-
"type":
|
|
311
|
+
"type": InputType;
|
|
269
312
|
"value": string;
|
|
270
313
|
}
|
|
271
314
|
interface Q2Loading {
|
|
315
|
+
/**
|
|
316
|
+
* @deprecated
|
|
317
|
+
*/
|
|
272
318
|
"ariaLabel": string;
|
|
273
319
|
"counts": string;
|
|
274
320
|
"inline": boolean;
|
|
275
321
|
"label": string;
|
|
276
322
|
"modifiers": string;
|
|
277
323
|
"shape": string;
|
|
278
|
-
"type":
|
|
324
|
+
"type": 'spinner' | 'skeleton';
|
|
279
325
|
}
|
|
280
326
|
interface Q2LoadingElement {
|
|
281
327
|
"borderRadius": string;
|
|
@@ -363,6 +409,9 @@ export namespace Components {
|
|
|
363
409
|
"toggle": () => Promise<void>;
|
|
364
410
|
}
|
|
365
411
|
interface Q2Radio {
|
|
412
|
+
/**
|
|
413
|
+
* @deprecated
|
|
414
|
+
*/
|
|
366
415
|
"ariaLabel": string;
|
|
367
416
|
"checked": boolean;
|
|
368
417
|
"disabled": boolean;
|
|
@@ -383,6 +432,9 @@ export namespace Components {
|
|
|
383
432
|
"readonly": boolean;
|
|
384
433
|
"tileAlignment": 'left' | 'center' | 'right';
|
|
385
434
|
"tileLayout": boolean;
|
|
435
|
+
/**
|
|
436
|
+
* @deprecated
|
|
437
|
+
*/
|
|
386
438
|
"tilelayout": boolean;
|
|
387
439
|
"value": string;
|
|
388
440
|
}
|
|
@@ -393,6 +445,9 @@ export namespace Components {
|
|
|
393
445
|
"noCollapseIcon": boolean;
|
|
394
446
|
}
|
|
395
447
|
interface Q2Select {
|
|
448
|
+
/**
|
|
449
|
+
* @deprecated
|
|
450
|
+
*/
|
|
396
451
|
"ariaLabel": string;
|
|
397
452
|
"disabled": boolean;
|
|
398
453
|
"errors": string[];
|
|
@@ -427,15 +482,17 @@ export namespace Components {
|
|
|
427
482
|
"currentStepId": string;
|
|
428
483
|
}
|
|
429
484
|
interface Q2TabContainer {
|
|
430
|
-
"color":
|
|
485
|
+
"color": 'alt' | undefined;
|
|
431
486
|
"name": string;
|
|
432
487
|
"noPrint": boolean;
|
|
433
|
-
"type":
|
|
488
|
+
"type": 'main' | 'section';
|
|
434
489
|
"value": string;
|
|
435
490
|
}
|
|
436
491
|
interface Q2TabPane {
|
|
437
492
|
"badgeCount": number;
|
|
438
493
|
"badgeDescription": string;
|
|
494
|
+
"badgeStatus": Q2Badge['status'];
|
|
495
|
+
"badgeTheme": Q2Badge['theme'];
|
|
439
496
|
"guid": number;
|
|
440
497
|
"index": number;
|
|
441
498
|
"label": string;
|
|
@@ -470,6 +527,7 @@ export namespace Components {
|
|
|
470
527
|
}
|
|
471
528
|
interface Q2Tooltip {
|
|
472
529
|
"block": boolean;
|
|
530
|
+
"focusable": boolean;
|
|
473
531
|
"immediate": boolean;
|
|
474
532
|
"label": string;
|
|
475
533
|
"multiline": boolean;
|
|
@@ -480,6 +538,8 @@ export namespace Components {
|
|
|
480
538
|
"authPayload": { key: string; value: string }[];
|
|
481
539
|
"badgeCount": number;
|
|
482
540
|
"badgeDescription": string;
|
|
541
|
+
"badgeStatus": Q2Badge['status'];
|
|
542
|
+
"badgeTheme": Q2Badge['theme'];
|
|
483
543
|
"guid": number;
|
|
484
544
|
"index": number;
|
|
485
545
|
"label": string;
|
|
@@ -943,12 +1003,21 @@ declare namespace LocalJSX {
|
|
|
943
1003
|
"ariaControls"?: string;
|
|
944
1004
|
"ariaExpanded"?: string;
|
|
945
1005
|
"ariaHasPopup"?: string;
|
|
1006
|
+
/**
|
|
1007
|
+
* @deprecated
|
|
1008
|
+
*/
|
|
946
1009
|
"ariaLabel"?: string;
|
|
947
1010
|
"ariaSelected"?: string;
|
|
948
1011
|
"badge"?: boolean;
|
|
949
1012
|
"block"?: boolean;
|
|
1013
|
+
/**
|
|
1014
|
+
* @deprecated
|
|
1015
|
+
*/
|
|
950
1016
|
"color"?: string;
|
|
951
1017
|
"disabled"?: boolean;
|
|
1018
|
+
/**
|
|
1019
|
+
* @deprecated
|
|
1020
|
+
*/
|
|
952
1021
|
"fab"?: boolean;
|
|
953
1022
|
"hideLabel"?: boolean;
|
|
954
1023
|
"intent"?: 'workflow-primary' | 'workflow-secondary' | 'neutral';
|
|
@@ -958,8 +1027,14 @@ declare namespace LocalJSX {
|
|
|
958
1027
|
"type"?: string;
|
|
959
1028
|
}
|
|
960
1029
|
interface Q2Calendar {
|
|
1030
|
+
/**
|
|
1031
|
+
* @deprecated
|
|
1032
|
+
*/
|
|
961
1033
|
"ariaLabel"?: string;
|
|
962
1034
|
"assume"?: 'current' | 'future' | 'past';
|
|
1035
|
+
/**
|
|
1036
|
+
* @deprecated
|
|
1037
|
+
*/
|
|
963
1038
|
"buttonLabel"?: string;
|
|
964
1039
|
"calendarLabel"?: string;
|
|
965
1040
|
"clearable"?: boolean;
|
|
@@ -978,6 +1053,9 @@ declare namespace LocalJSX {
|
|
|
978
1053
|
"onChange"?: (event: Q2CalendarCustomEvent<any>) => void;
|
|
979
1054
|
"onError"?: (event: Q2CalendarCustomEvent<any>) => void;
|
|
980
1055
|
"onSuccess"?: (event: Q2CalendarCustomEvent<any>) => void;
|
|
1056
|
+
/**
|
|
1057
|
+
* @deprecated
|
|
1058
|
+
*/
|
|
981
1059
|
"onsuccess"?: (e: CustomEvent) => void;
|
|
982
1060
|
"optional"?: boolean;
|
|
983
1061
|
"placeholder"?: string;
|
|
@@ -1004,6 +1082,9 @@ declare namespace LocalJSX {
|
|
|
1004
1082
|
"url"?: string;
|
|
1005
1083
|
}
|
|
1006
1084
|
interface Q2Carousel {
|
|
1085
|
+
/**
|
|
1086
|
+
* @deprecated
|
|
1087
|
+
*/
|
|
1007
1088
|
"ariaLabel"?: string;
|
|
1008
1089
|
"autoPlay"?: boolean;
|
|
1009
1090
|
"fullWidthPanes"?: boolean;
|
|
@@ -1076,11 +1157,17 @@ declare namespace LocalJSX {
|
|
|
1076
1157
|
}
|
|
1077
1158
|
interface Q2Checkbox {
|
|
1078
1159
|
"alignment"?: string;
|
|
1160
|
+
/**
|
|
1161
|
+
* @deprecated
|
|
1162
|
+
*/
|
|
1079
1163
|
"ariaLabel"?: string;
|
|
1080
1164
|
"checked"?: boolean;
|
|
1081
1165
|
"description"?: string;
|
|
1082
1166
|
"disabled"?: boolean;
|
|
1083
1167
|
"groupDisabled"?: boolean;
|
|
1168
|
+
/**
|
|
1169
|
+
* @deprecated
|
|
1170
|
+
*/
|
|
1084
1171
|
"hasError"?: boolean;
|
|
1085
1172
|
"hideLabel"?: boolean;
|
|
1086
1173
|
"indeterminate"?: boolean;
|
|
@@ -1088,7 +1175,7 @@ declare namespace LocalJSX {
|
|
|
1088
1175
|
"name"?: string;
|
|
1089
1176
|
"onChange"?: (event: Q2CheckboxCustomEvent<{ value: string; checked: boolean }>) => void;
|
|
1090
1177
|
"readonly"?: boolean;
|
|
1091
|
-
"type"?:
|
|
1178
|
+
"type"?: 'favorite' | 'toggle';
|
|
1092
1179
|
"value"?: string;
|
|
1093
1180
|
}
|
|
1094
1181
|
interface Q2CheckboxGroup {
|
|
@@ -1101,6 +1188,9 @@ declare namespace LocalJSX {
|
|
|
1101
1188
|
"value"?: object;
|
|
1102
1189
|
}
|
|
1103
1190
|
interface Q2Dropdown {
|
|
1191
|
+
/**
|
|
1192
|
+
* @deprecated
|
|
1193
|
+
*/
|
|
1104
1194
|
"ariaLabel"?: string;
|
|
1105
1195
|
"block"?: boolean;
|
|
1106
1196
|
"context"?: string;
|
|
@@ -1112,9 +1202,12 @@ declare namespace LocalJSX {
|
|
|
1112
1202
|
"name"?: string;
|
|
1113
1203
|
"popDirection"?: 'up' | 'down';
|
|
1114
1204
|
"resolvedType"?: string;
|
|
1115
|
-
"type"?:
|
|
1205
|
+
"type"?: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral';
|
|
1116
1206
|
}
|
|
1117
1207
|
interface Q2DropdownItem {
|
|
1208
|
+
/**
|
|
1209
|
+
* @deprecated
|
|
1210
|
+
*/
|
|
1118
1211
|
"ariaLabel"?: string;
|
|
1119
1212
|
"disabled"?: boolean;
|
|
1120
1213
|
"label"?: string;
|
|
@@ -1123,6 +1216,9 @@ declare namespace LocalJSX {
|
|
|
1123
1216
|
"value"?: string;
|
|
1124
1217
|
}
|
|
1125
1218
|
interface Q2EditableField {
|
|
1219
|
+
/**
|
|
1220
|
+
* @deprecated
|
|
1221
|
+
*/
|
|
1126
1222
|
"ariaLabel"?: string;
|
|
1127
1223
|
"disabled"?: boolean;
|
|
1128
1224
|
"editing"?: boolean;
|
|
@@ -1135,8 +1231,8 @@ declare namespace LocalJSX {
|
|
|
1135
1231
|
"onChange"?: (event: Q2EditableFieldCustomEvent<any>) => void;
|
|
1136
1232
|
"onInput"?: (event: Q2EditableFieldCustomEvent<any>) => void;
|
|
1137
1233
|
"persistentLabel"?: boolean;
|
|
1138
|
-
"truncated"?:
|
|
1139
|
-
"type"?:
|
|
1234
|
+
"truncated"?: boolean;
|
|
1235
|
+
"type"?: Q2Input['type'];
|
|
1140
1236
|
"value"?: string;
|
|
1141
1237
|
}
|
|
1142
1238
|
interface Q2Icon {
|
|
@@ -1149,12 +1245,15 @@ declare namespace LocalJSX {
|
|
|
1149
1245
|
"ariaControls"?: string;
|
|
1150
1246
|
"ariaExpanded"?: string;
|
|
1151
1247
|
"ariaHaspopup"?: string;
|
|
1248
|
+
/**
|
|
1249
|
+
* @deprecated
|
|
1250
|
+
*/
|
|
1152
1251
|
"ariaLabel"?: string;
|
|
1153
1252
|
"ariaOwns"?: string;
|
|
1154
1253
|
"autocapitalize"?: string;
|
|
1155
1254
|
"autocomplete"?: string;
|
|
1156
|
-
"autocorrect"?:
|
|
1157
|
-
"badgeTheme"?: '
|
|
1255
|
+
"autocorrect"?: 'on' | 'off';
|
|
1256
|
+
"badgeTheme"?: Q2Badge['theme'];
|
|
1158
1257
|
"badgeValue"?: string;
|
|
1159
1258
|
"clearable"?: boolean;
|
|
1160
1259
|
"current"?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
|
|
@@ -1164,8 +1263,8 @@ declare namespace LocalJSX {
|
|
|
1164
1263
|
"hideLabel"?: boolean;
|
|
1165
1264
|
"hideMessages"?: boolean;
|
|
1166
1265
|
"hints"?: string[];
|
|
1167
|
-
"iconLeft"?:
|
|
1168
|
-
"iconRight"?:
|
|
1266
|
+
"iconLeft"?: Q2Icon['type'];
|
|
1267
|
+
"iconRight"?: Q2Icon['type'];
|
|
1169
1268
|
"label"?: string;
|
|
1170
1269
|
"max"?: number;
|
|
1171
1270
|
"maxlength"?: number;
|
|
@@ -1181,17 +1280,20 @@ declare namespace LocalJSX {
|
|
|
1181
1280
|
"showVisibilityToggle"?: boolean;
|
|
1182
1281
|
"step"?: number;
|
|
1183
1282
|
"textHidden"?: boolean;
|
|
1184
|
-
"type"?:
|
|
1283
|
+
"type"?: InputType;
|
|
1185
1284
|
"value"?: string;
|
|
1186
1285
|
}
|
|
1187
1286
|
interface Q2Loading {
|
|
1287
|
+
/**
|
|
1288
|
+
* @deprecated
|
|
1289
|
+
*/
|
|
1188
1290
|
"ariaLabel"?: string;
|
|
1189
1291
|
"counts"?: string;
|
|
1190
1292
|
"inline"?: boolean;
|
|
1191
1293
|
"label"?: string;
|
|
1192
1294
|
"modifiers"?: string;
|
|
1193
1295
|
"shape"?: string;
|
|
1194
|
-
"type"?:
|
|
1296
|
+
"type"?: 'spinner' | 'skeleton';
|
|
1195
1297
|
}
|
|
1196
1298
|
interface Q2LoadingElement {
|
|
1197
1299
|
"borderRadius"?: string;
|
|
@@ -1280,6 +1382,9 @@ declare namespace LocalJSX {
|
|
|
1280
1382
|
"open"?: boolean;
|
|
1281
1383
|
}
|
|
1282
1384
|
interface Q2Radio {
|
|
1385
|
+
/**
|
|
1386
|
+
* @deprecated
|
|
1387
|
+
*/
|
|
1283
1388
|
"ariaLabel"?: string;
|
|
1284
1389
|
"checked"?: boolean;
|
|
1285
1390
|
"disabled"?: boolean;
|
|
@@ -1302,6 +1407,9 @@ declare namespace LocalJSX {
|
|
|
1302
1407
|
"readonly"?: boolean;
|
|
1303
1408
|
"tileAlignment"?: 'left' | 'center' | 'right';
|
|
1304
1409
|
"tileLayout"?: boolean;
|
|
1410
|
+
/**
|
|
1411
|
+
* @deprecated
|
|
1412
|
+
*/
|
|
1305
1413
|
"tilelayout"?: boolean;
|
|
1306
1414
|
"value"?: string;
|
|
1307
1415
|
}
|
|
@@ -1313,6 +1421,9 @@ declare namespace LocalJSX {
|
|
|
1313
1421
|
"onChange"?: (event: Q2SectionCustomEvent<any>) => void;
|
|
1314
1422
|
}
|
|
1315
1423
|
interface Q2Select {
|
|
1424
|
+
/**
|
|
1425
|
+
* @deprecated
|
|
1426
|
+
*/
|
|
1316
1427
|
"ariaLabel"?: string;
|
|
1317
1428
|
"disabled"?: boolean;
|
|
1318
1429
|
"errors"?: string[];
|
|
@@ -1353,17 +1464,19 @@ declare namespace LocalJSX {
|
|
|
1353
1464
|
"onChange"?: (event: Q2StepperVerticalCustomEvent<any>) => void;
|
|
1354
1465
|
}
|
|
1355
1466
|
interface Q2TabContainer {
|
|
1356
|
-
"color"?:
|
|
1467
|
+
"color"?: 'alt' | undefined;
|
|
1357
1468
|
"name"?: string;
|
|
1358
1469
|
"noPrint"?: boolean;
|
|
1359
1470
|
"onChange"?: (event: Q2TabContainerCustomEvent<any>) => void;
|
|
1360
1471
|
"onSettled"?: (event: Q2TabContainerCustomEvent<any>) => void;
|
|
1361
|
-
"type"?:
|
|
1472
|
+
"type"?: 'main' | 'section';
|
|
1362
1473
|
"value"?: string;
|
|
1363
1474
|
}
|
|
1364
1475
|
interface Q2TabPane {
|
|
1365
1476
|
"badgeCount"?: number;
|
|
1366
1477
|
"badgeDescription"?: string;
|
|
1478
|
+
"badgeStatus"?: Q2Badge['status'];
|
|
1479
|
+
"badgeTheme"?: Q2Badge['theme'];
|
|
1367
1480
|
"guid"?: number;
|
|
1368
1481
|
"index"?: number;
|
|
1369
1482
|
"label"?: string;
|
|
@@ -1402,6 +1515,7 @@ declare namespace LocalJSX {
|
|
|
1402
1515
|
}
|
|
1403
1516
|
interface Q2Tooltip {
|
|
1404
1517
|
"block"?: boolean;
|
|
1518
|
+
"focusable"?: boolean;
|
|
1405
1519
|
"immediate"?: boolean;
|
|
1406
1520
|
"label"?: string;
|
|
1407
1521
|
"multiline"?: boolean;
|
|
@@ -1412,6 +1526,8 @@ declare namespace LocalJSX {
|
|
|
1412
1526
|
"authPayload"?: { key: string; value: string }[];
|
|
1413
1527
|
"badgeCount"?: number;
|
|
1414
1528
|
"badgeDescription"?: string;
|
|
1529
|
+
"badgeStatus"?: Q2Badge['status'];
|
|
1530
|
+
"badgeTheme"?: Q2Badge['theme'];
|
|
1415
1531
|
"guid"?: number;
|
|
1416
1532
|
"index"?: number;
|
|
1417
1533
|
"label"?: string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { E2EPage } from '@stencil/core/testing';
|
|
2
2
|
import { IDict } from '../src/util';
|
|
3
|
-
import { NewE2EPageOptions } from '@stencil/core/testing/puppeteer/puppeteer-declarations';
|
|
3
|
+
import { E2EElement, NewE2EPageOptions } from '@stencil/core/testing/puppeteer/puppeteer-declarations';
|
|
4
4
|
import { SerializableOrJSHandle } from 'puppeteer';
|
|
5
5
|
export declare function dispatchEvent(page: E2EPage, selectors: string | string[], eventType: string, eventInit?: SerializableOrJSHandle): Promise<void>;
|
|
6
6
|
export declare function setTestStrings(page: E2EPage, strings: IDict<string>): Promise<void>;
|
|
@@ -14,3 +14,4 @@ export declare function getActiveElementTestId(page: E2EPage): Promise<string>;
|
|
|
14
14
|
export declare const getFocusedOptionValue: (page: E2EPage) => Promise<string>;
|
|
15
15
|
export declare const getFocusedTagName: (page: E2EPage) => Promise<string>;
|
|
16
16
|
export declare function getFocusedAttribute(page: E2EPage, attribute: string): Promise<string>;
|
|
17
|
+
export declare const testDeprecatedAriaLabel: (element: E2EElement, label?: string) => Promise<void>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "q2-tecton-elements",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.26.0",
|
|
4
4
|
"description": "Q2 Tecton Custom Elements",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -50,9 +50,9 @@
|
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@stencil/core": "2.19.2",
|
|
52
52
|
"puppeteer": "^10.4.0",
|
|
53
|
-
"q2-tecton-common": "^1.
|
|
53
|
+
"q2-tecton-common": "^1.26.0",
|
|
54
54
|
"smoothscroll-polyfill": "^0.4.4",
|
|
55
55
|
"swiper": "8.4.4"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "8b96b69cce0cd2fa1867728582159f8b0350c878"
|
|
58
58
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as a,h as e,F as i,g as r}from"./p-926a3e80.js";import{f as o,c as n,l as s,a as c,o as l}from"./p-839ef27d.js";o();const h=class{constructor(e){t(this,e),this.change=a(this,"change",7),this.settled=a(this,"settled",7),this.guid=n(),this.scheduledAfterRender=[],this.lastScrolled=new Date(null).getTime(),this.updateTabData=()=>{this.updateTabPaneProps(),this.setTabs()},this.updateTabPaneProps=()=>{this.tabPanes.forEach(((t,a)=>{t.selected=t.value===this.selectedTabValue,t.guid=this.guid,t.index=a}))},this.setTabs=()=>{this.tabs=this.tabPanes.map((({label:t,value:a,badgeCount:e,badgeDescription:i})=>({label:t&&s(t)||"",value:a,badgeCount:e,badgeDescription:i})))},this.onTabClick=t=>{const a=t.target.closest('button[role="tab"]').dataset.value;this.value===a||this.change.emit({value:a})},this.onTabKeyDown=t=>{const a=t.target.dataset.value;switch(t.key){case"ArrowRight":t.preventDefault(),this.moveToAdjacentTab(a,"next");break;case"ArrowLeft":t.preventDefault(),this.moveToAdjacentTab(a,"prev");break;case"Home":t.preventDefault(),this.moveToAdjacentTab(a,"first");break;case"End":t.preventDefault(),this.moveToAdjacentTab(a,"last");break;case"Space":case"Enter":t.preventDefault(),this.change.emit({value:a})}},this.moveToAdjacentTab=(t,a)=>{const e=this.tabs.map((({value:t})=>t)).indexOf(t);let i;switch(a){case"next":i=Math.min(e+1,this.tabs.length-1);break;case"prev":i=Math.max(e-1,0);break;case"first":i=0;break;case"last":i=this.tabs.length-1}e!==i&&this.moveFocus(i,!1)},this.moveFocus=(t,a=!0)=>{const e=this.listElement.querySelector(`[data-value="${this.tabs[t].value}"]`);return e.focus({preventScroll:a}),this.listElement.scrollTo({left:e.offsetLeft-this.listElement.clientWidth/2,behavior:"smooth"}),e},this.checkScrollState=()=>{if(!this.listElement)return;const{scrollLeft:t,scrollWidth:a,clientWidth:e}=this.listElement;this.scrollEnabled=a>e,this.showScrollLeft=!!t,this.showScrollRight=a!==t+e},this.onScrollBtnClick=t=>{const a=Math.floor(this.listElement.clientWidth/2);this.listElement.scrollBy({left:"left"===t?-a:a,behavior:"smooth"})},this.onSlotChange=()=>{this.checkScrollState()},this.value=void 0,this.type=void 0,this.name=void 0,this.color=void 0,this.noPrint=!1,this.hasLeft=!1,this.hasRight=!1,this.scrollEnabled=!1,this.showScrollLeft=!1,this.showScrollRight=!1,this.tabs=void 0}resizeIframe(){var t,a;return null===(a=null===(t=window.TectonElements)||void 0===t?void 0:t.resizeIframe)||void 0===a?void 0:a.call(t)}get tabPanes(){const t=this.hostElement.querySelectorAll("q2-tab-pane, tecton-tab-pane");return 0===t.length?[]:Array.from(t).filter((t=>t.name===this.name))}get selectedTabValue(){return this.value||this.tabPanes[0].value||""}get tabList(){return this.hostElement.shadowRoot.querySelector(".tab-list")}defaultChangeHandler(t){t.target!==this.hostElement||this.hostElement.onchange||(this.value=t.detail.value)}onResize(){this.checkScrollState()}onFocus(t){if(!c(t,this.hostElement))return;const a=this.tabs.findIndex((t=>t.value===this.selectedTabValue));this.moveFocus(a)}onBadge(){this.setTabs()}componentWillLoad(){const t=new MutationObserver(this.updateTabData);t.observe(this.hostElement,{childList:!0,attributes:!0}),this.mutationObserver=t,this.resizeObserver=new ResizeObserver((()=>this.checkScrollState())),this.updateTabData()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[],this.settled.emit()}componentDidLoad(){this.resizeObserver.observe(this.listElement),this.checkScrollState(),l(this.hostElement);const t=this.tabs.findIndex((t=>t.value===this.value));this.scheduledAfterRender.push((()=>{if(!(this.tabs.length>0))return;const a=this.moveFocus(Math.max(t,0));this.value=a.dataset.value,a.blur()}))}disconnectedCallback(){this.resizeObserver.disconnect(),this.mutationObserver.disconnect(),this.resizeObserver=null,this.mutationObserver=null}valueObserver(){this.updateTabData(),this.scheduledAfterRender.push(this.resizeIframe);const t=this.tabs.findIndex((t=>t.value===this.value));t>-1&&this.scheduledAfterRender.push((()=>this.moveFocus(t,!1)))}nameObserver(){this.updateTabData()}render(){return e(i,null,e("div",{class:"tab-container"},this.scrollEnabled&&e(i,null,e("div",{class:"gradient-left",hidden:!this.showScrollLeft}),e("div",{class:"gradient-right",hidden:!this.showScrollRight}),e("q2-btn",{class:"btn-left",hidden:!this.showScrollLeft,onClick:()=>this.onScrollBtnClick("left")},e("q2-icon",{type:"chevron-left"})),e("q2-btn",{class:"btn-right",hidden:!this.showScrollRight,onClick:()=>this.onScrollBtnClick("right")},e("q2-icon",{type:"chevron-right"}))),e("ul",{onScroll:this.checkScrollState,ref:t=>this.listElement=t,class:this.noPrint?"no-print":null,role:"tablist"},this.tabs.map(((t,a)=>this.generateTab(t,a))))),e("div",{class:"tab-content"},e("slot",{onSlotchange:()=>this.onSlotChange()})))}generateTab(t,a){const{label:i,value:r}=t,o=this.selectedTabValue===r;return e("li",{role:"presentation"},e("button",{id:`tab-${this.guid}-${a}`,"data-value":r,"test-id":"tabLink",tabIndex:o?0:-1,role:"tab","aria-selected":o?"true":"false","aria-controls":`tab-pane-${this.guid}-${a}`,onClick:this.onTabClick,onKeyDown:this.onTabKeyDown},void 0===t.badgeCount?i:this.generateTabWithBadge(t,o)))}generateTabWithBadge(t,a){return e("div",{class:"tab-pane-badge","aria-label":`${t.label}, ${t.badgeCount} ${t.badgeDescription||s("tecton.element.tab.pane.new")}`},t.label,e("q2-badge",{value:t.badgeCount,theme:a?"primary":void 0}))}get hostElement(){return r(this)}static get watchers(){return{value:["valueObserver"],name:["nameObserver"]}}};h.style="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom:1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentColor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}";export{h as q2_tab_container}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,g as r}from"./p-926a3e80.js";import{c as o,l as s}from"./p-839ef27d.js";const a=class{constructor(i){t(this,i),this.change=e(this,"change",7),this.id=`checkbox-group-${o()}`,this.onMutationObserved=()=>{this.valueUpdated(),this.disabledUpdated()},this.onInnerCheckboxChange=t=>{t.stopImmediatePropagation();const e={};this.checkboxElements.forEach((t=>{e[t.value]=!!t.checked})),this.change.emit(e)},this.label=void 0,this.value=void 0,this.disabled=!1,this.readonly=!1,this.optional=!1,this.hasError=!1}get checkboxElements(){return Array.from(this.hostElement.querySelectorAll("q2-checkbox"))}get protectedValue(){return this.value||{}}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:!0}),this.mutationObserver=t,this.onMutationObserved()}disconnectedCallback(){this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null)}valueUpdated(){this.readonly||this.checkboxElements.forEach((t=>{this.protectedValue.hasOwnProperty(t.value)&&(t.checked=this.value[t.value])}))}disabledUpdated(){this.checkboxElements.forEach((t=>{t.groupDisabled=this.disabled}))}onHostElementChange(t){t.target!==this.hostElement||this.hostElement.onchange||(this.value=t.detail)}render(){return i("div",null,this.label||this.optional?i("div",{class:"group-legend"},this.label&&s(this.label),this.optional?i("span",{class:"optional-tag"},s("tecton.element.input.optional")):""):"",i("fieldset",{class:"q2-checkbox-fieldset "+(this.hasError?"has-error":""),onChange:this.onInnerCheckboxChange,"aria-required":`${!this.optional}`},this.label||this.optional?i("legend",{class:"sr-only"},this.label&&s(this.label),this.optional?i("span",{class:"optional-tag"},s("tecton.element.input.optional")):""):"",this.hasError?i("div",{class:"error-icon-container "+(this.label||this.optional?"":"no-label")},i("q2-icon",{class:"h(4) w(4) mrg-b(2)",type:"error"})):"",this.inputDom()))}inputDom(){return i("slot",null)}get hostElement(){return r(this)}static get watchers(){return{value:["valueUpdated"],disabled:["disabledUpdated"]}}};a.style="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, white)))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";export{a as q2_checkbox_group}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as r,g as i}from"./p-926a3e80.js";import{c as o,h as a,o as c,l as s}from"./p-839ef27d.js";const n=class{constructor(r){t(this,r),this.change=e(this,"change",7),this.id=`radio-${o()}`,this.isLoaded=!1,this.inputChange=t=>{if(t.stopPropagation(),this.groupReadonly)return t.preventDefault(),!1;t.target instanceof HTMLInputElement&&(this.checked=t.target.checked)},this.label=void 0,this.hideLabel=void 0,this.value=void 0,this.disabled=!1,this.checked=!1,this.name=void 0,this.ariaLabel=void 0,this.groupDisabled=!1,this.groupReadonly=!1,this.groupTileLayout=!1}componentWillLoad(){a(this)}componentDidLoad(){this.isLoaded=!0,c(this.hostElement),this.hostElement.click=()=>this.inputField.click()}ariaLabelObserver(){a(this)}checkedObserver(){this.isLoaded&&this.checked&&this.change.emit({value:this.value})}onHostClick(t){this.disabled&&t.stopImmediatePropagation()}delegateFocus(t){t.target===this.hostElement&&this.inputField.focus()}render(){return r("div",{class:this.groupTileLayout?"radio-tile":"radio-container"},r("input",{ref:t=>this.inputField=t,class:"sr",id:this.id,type:"radio",name:this.name,value:this.value,disabled:this.disabled||this.groupDisabled,checked:this.checked,"aria-label":this.label&&this.hideLabel?s(this.label):void 0,onChange:this.inputChange,"test-id":"q2RadioInnerRadioBox"}),r("label",{htmlFor:this.id,"test-id":"radioButton"},!this.groupTileLayout&&r("svg",{viewBox:"0 0 18 18"},r("circle",{stroke:"none",fill:"none",cx:"9",cy:"9",r:"8"}),r("circle",{stroke:"none",fill:"none",cx:"9",cy:"9",r:"4"})),!this.hideLabel&&r("div",{class:"label-content"},this.label&&s(this.label)||"",r("slot",null))))}get hostElement(){return i(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"],checked:["checkedObserver"]}}};n.style='*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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}.radio-container{margin-top:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));margin-right:var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));margin-bottom:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px))}.radio-container label[for]{font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}.radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}.radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))}.radio-container input:focus+label svg{box-shadow:var(--const-double-focus-ring)}.radio-container input:focus+label circle:nth-child(1){stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:checked+label circle:nth-child(1){background-color:var(--tct-radio-checked-bg, transparent);stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.radio-container input:checked+label .label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}.radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));cursor:pointer;display:block;padding:10px;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}.radio-tile input:focus+label,.radio-tile input:focus:checked+label{border-color:#0079c1;box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff)}.radio-tile input:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e));box-shadow:inset 0 0 0 2px #ffffff}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid #0079c1;border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:"";height:0;left:50%;margin-left:-5px;position:absolute;width:0}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}';export{n as q2_radio}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as o,g as r}from"./p-926a3e80.js";import{r as e,o as a,l as n,a as c}from"./p-839ef27d.js";import{s,a as l}from"./p-a1926e65.js";const p=class{constructor(o){var r;t(this,o),this.change=i(this,"change",7),this.scheduledAfterRender=[],this.updateSelectedOptionElements=async()=>{var t;const{selectedOptions:i}=this,o=i.map((t=>t.value)),r=await(null===(t=this.optionList)||void 0===t?void 0:t.getOptions());this.selectedOptionElements=null==r?void 0:r.filter((t=>o.includes(t.value)))},this.determineHasOptions=()=>{const t=!!this.hostElement.querySelectorAll("q2-option").length;this.hasOptions=t},this.clearSelectedOptions=()=>{this.selectedOptions=[],this.active=!1,this.open=!1,this.primaryBtn.focus(),this.change.emit({value:null,values:[],active:!1}),this.scheduledAfterRender.push(e)},this.handleClick=async t=>{if(t.stopPropagation(),!this.disabled)if(this.hasOptions)s(this)?this.executeActionSheet(t):await this.popoverElement.toggle();else{const{value:t,label:i}=this,o=this.active=!this.active,r=o?[{value:t,display:i}]:[];this.selectedOptions=r,this.change.emit({value:t,values:r,active:o})}},this.handleKeydown=async t=>{t.preventDefault(),this.hasOptions&&!this.disabled&&(s(this,t)?this.executeActionSheet(t):this.optionList.handleExternalKeydown(t))},this.handleChange=t=>{t.stopPropagation(),this.hasOptions&&this.handleSelectionChanges(t.detail)},this.handleWrapperClick=()=>{this.primaryBtn.focus(),this.primaryBtn.click()},this.onClickElsewhere=t=>{"click-elsewhere"===t.target.localName&&(t.stopPropagation(),this.popoverElement.open=!1)},this.hoist=!!(null===(r=window.Tecton)||void 0===r?void 0:r.useActionSheets),this.disabled=void 0,this.active=void 0,this.open=void 0,this.multiple=void 0,this.maxLength=void 0,this.label=void 0,this.value=void 0,this.theme=void 0,this.selectedOptions=[],this.popoverMinHeight=150,this.popoverDirection=void 0,this.hasOptions=void 0,this.selectedOptionElements=[]}componentWillLoad(){const t=new MutationObserver(this.determineHasOptions);t.observe(this.hostElement,{childList:!0,attributes:!0}),this.mutationObserver=t}componentDidLoad(){a(this.hostElement)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[]}disconnectedCallback(){this.mutationObserver.disconnect(),this.mutationObserver=null}get buttonContent(){const{label:t,selectedOptions:i,selectedOptionElements:o,hasOptions:r}=this;return r&&0!==o.length?1===o.length?o[0].display:n("tecton.element.pill.activeCount",{count:i.length}):t}get truncatedButtonContent(){const{maxLength:t,buttonContent:i}=this;return t&&i.length>t?`${i.substring(0,t)}…`:i}async executeActionSheet(t){const i=await l(this,t);this.handleSelectionChanges(i)}handleSelectionChanges(t){const{value:i="",values:o=[]}=t,r=!!o.length;this.hostElement.onchange||(this.selectedOptions=o,this.active=r),this.change.emit({value:i,values:o,active:r})}selectedOptionsWatcher(){this.updateSelectedOptionElements()}delegateFocus(t){c(t,this.hostElement)&&this.primaryBtn.focus()}popoverStateHandler({detail:{open:t}}){this.open!==t&&(this.open=t),t||(this.optionList.setActiveElement(null),this.primaryBtn.focus())}generateIcon(){const{hasOptions:t,active:i}=this,r=t&&i,e=r||!t?"close":"chevron-down";return o(r?"button":"div",{class:"btn-close",onClick:r&&this.clearSelectedOptions,disabled:r&&this.disabled,"aria-label":r&&n("tecton.element.pill.clearSelection"),type:r&&"button"},o("q2-icon",{type:e}))}render(){const{hasOptions:t,active:i,open:r}=this,e=["btn-wrapper"];return(t||i)&&e.push("has-icon"),t&&e.push("has-options"),o("click-elsewhere",{onChange:this.onClickElsewhere},o("div",{class:e.join(" ")},o("div",{class:"btn-height-wrapper",ref:t=>this.primaryBtnWrapper=t,onClick:this.handleWrapperClick,tabIndex:-1},o("button",{class:"btn-primary","test-id":"btn-control",type:"button",ref:t=>this.primaryBtn=t,onClick:this.handleClick,onKeyDown:this.handleKeydown,disabled:this.disabled,"aria-selected":!t&&i?"true":"false","aria-roledescription":!t&&"filter","aria-controls":t&&"option-list","aria-haspopup":t&&"true","aria-expanded":t&&`${!!r}`||void 0,"aria-label":this.maxLength&&this.buttonContent},this.truncatedButtonContent,!t&&i&&o("span",{class:"sr"},"(",n("tecton.element.pill.active"),")"))),this.generateIcon()),this.hasOptions&&o("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.primaryBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:"right"},o("q2-option-list",{role:"menu",ref:t=>this.optionList=t,id:"option-list",onChange:this.handleChange,multiple:this.multiple,selectedOptions:this.selectedOptions,onReady:()=>this.updateSelectedOptionElements()},o("slot",null))))}get hostElement(){return r(this)}static get watchers(){return{selectedOptions:["selectedOptionsWatcher"]}}};p.style="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--compt-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--t-primary-l5, #61c4ff);--comp-active-btn-color:var(--t-primary-text, #ffffff);--comp-active-btn-border-color:var(--t-primary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-primary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-primary-l3, #21acff)}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--t-secondary-l5, #d9e1e6);--comp-active-btn-color:var(--t-secondary-text, #141414);--comp-active-btn-border-color:var(--t-secondary-l5, #d9e1e6);--comp-hover-active-btn-background:var(--t-secondary-l3, #c9d5db);--comp-hover-active-btn-border-color:var(--t-secondary-l3, #c9d5db)}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--t-tertiary-l5, #f4fafe);--comp-active-btn-color:var(--t-tertiary-text, #141414);--comp-active-btn-border-color:var(--t-tertiary-l5, #f4fafe);--comp-hover-active-btn-background:var(--t-tertiary-l3, #eff8fd);--comp-hover-active-btn-border-color:var(--t-tertiary-l3, #eff8fd)}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-gray-9, #999999)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";export{p as q2_pill}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as o,c as e,h as c,g as t}from"./p-926a3e80.js";import{c as r,h as i,o as a,a as h,l}from"./p-839ef27d.js";const s=class{constructor(c){o(this,c),this.change=e(this,"change",7),this.id=`checkbox-${r()}`,this.onInputClick=o=>{const e=this.disabled||this.readonly;if((e||!!this.hostElement.onchange)&&o.preventDefault(),e)return;if(!(o.target instanceof HTMLInputElement))return;const{value:c,checked:t}=o.target;this.change.emit({value:c,checked:t}),this.inputElement.focus()},this.checked=!1,this.type=void 0,this.label=void 0,this.hideLabel=void 0,this.ariaLabel=void 0,this.indeterminate=void 0,this.disabled=void 0,this.readonly=void 0,this.value=void 0,this.name=void 0,this.hasError=void 0,this.groupDisabled=void 0,this.alignment=void 0,this.description=void 0}componentWillLoad(){i(this)}componentDidLoad(){a(this.hostElement),this.hostElement.click=()=>this.inputElement.click()}defaultChangeHandler(o){this.readonly||o.target!==this.hostElement||this.hostElement.onchange||!o.detail||(this.checked=o.detail.checked)}delegateFocus(o){h(o,this.hostElement)&&this.hostElement.shadowRoot.querySelector("input").focus()}ariaLabelObserver(){i(this)}render(){const o=["label-text"];return this.hideLabel&&o.push("sr"),c("div",{class:"container"},c("input",{ref:o=>this.inputElement=o,id:this.id,type:"checkbox",checked:this.indeterminate||this.checked||!1,disabled:!!this.disabled||!!this.groupDisabled,class:"sr",value:this.value,name:this.name||this.id,"aria-describedby":this.description?"description":void 0,"test-id":"q2CheckboxInnerCheckBox",onClick:this.onInputClick}),c("label",{htmlFor:this.id,class:"label-control","test-id":"checkboxButton"},this.generateCheckboxSVG()),c("div",{class:o.join(" ")},c("label",{"test-id":"checkboxLabel",htmlFor:this.id},l(this.label),c("slot",null))),this.description&&c("div",{class:"description-text","test-id":"checkboxDescription",id:"description"},l(this.description)))}generateCheckboxSVG(){return"favorite"===this.type?c("q2-icon",{type:"star",class:"checkbox-icon"}):"toggle"===this.type?this.generateToggleSVG():c("svg",{"aria-hidden":"true",width:"20",height:"20",viewBox:"0 0 20 20",class:"checkbox-icon",focusable:"false"},c("rect",{x:"1",y:"1",width:"18",height:"18",rx:"3"}),(this.checked||this.indeterminate)&&this.generateCheckBoxSVGFill())}generateCheckBoxSVGFill(){return this.indeterminate?c("line",{class:"checkbox-fill indeterminate-fill",x1:"4",y1:"10",x2:"16",y2:"10"}):c("polyline",{class:"checkbox-fill checked-fill",points:"5 11 8.5 14.5 15 6"})}generateToggleSVG(){return c("div",{class:"toggle-svg"},c("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 46 14",class:"toggle-track"},c("rect",{width:"36",height:"14",rx:"7",x:"5"})),c("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 30 30",class:"toggle-indicator"},c("circle",{class:"toggle-circle",width:"20",height:"20",cx:"15",cy:"15",r:"10"}),c("line",{class:"off checked-fill",x1:"12",y1:"18",x2:"18",y2:"12"}),c("line",{class:"off checked-fill",x1:"12",y1:"12",x2:"18",y2:"18"}),c("polyline",{class:"on checked-fill",points:"11,16 14,19 18,12 14,19"})))}get hostElement(){return t(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};s.style='*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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;position:relative;padding:var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);display:grid;grid-template-areas:"svg label" "svg description";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg" "description svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}label{cursor:pointer}:host([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.checkbox-icon{--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-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);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}:host([checked]) .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)))}:host(:focus-within) .checkbox-icon{box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([type=favorite]:focus-within) .checkbox-icon,:host([type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);fill:var(--comp-checkbox-favorite-fill-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked][type=favorite]:focus-within) .checkbox-icon,:host([checked][type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);--tct-icon-fill-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-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([checked]) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:not([checked]):focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}';export{s as q2_checkbox}
|