q2-tecton-elements 1.59.0 → 1.60.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/bundle-report.json +583 -525
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/q2-badge.q2-btn.q2-icon.q2-input.q2-loading.q2-tab-container.q2-tab-pane.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-badge_7.cjs.entry.js +119 -61
- package/dist/cjs/q2-badge_7.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-calendar.cjs.entry.js +11 -3
- package/dist/cjs/q2-calendar.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-calendar.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-card.cjs.entry.js +1 -1
- package/dist/cjs/q2-card.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-card.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-checkbox-group.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-checkbox.cjs.entry.js +3 -3
- package/dist/cjs/q2-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-checkbox.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-context.cjs.entry.js +1 -1
- package/dist/cjs/q2-context.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-context.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-data-table.cjs.entry.js +3 -3
- package/dist/cjs/q2-data-table.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-data-table.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-dropdown.cjs.entry.js +5 -3
- package/dist/cjs/q2-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-dropdown.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-file-picker.cjs.entry.js +1 -1
- package/dist/cjs/q2-file-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-file-picker.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-form.cjs.entry.js +4 -4
- package/dist/cjs/q2-form.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-form.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-item.cjs.entry.js +1 -1
- package/dist/cjs/q2-item.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-item.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-loading-element.cjs.entry.js +1 -1
- package/dist/cjs/q2-optgroup.cjs.entry.js +1 -1
- package/dist/cjs/q2-optgroup.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-optgroup.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-option-list.q2-popover.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-option-list_2.cjs.entry.js +1 -1
- package/dist/cjs/q2-option-list_2.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-pill.cjs.entry.js +11 -9
- package/dist/cjs/q2-pill.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-pill.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/q2-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-radio-group.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-radio.cjs.entry.js +1 -1
- package/dist/cjs/q2-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-radio.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-select.cjs.entry.js +9 -4
- package/dist/cjs/q2-select.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-select.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-stepper-vertical.cjs.entry.js +1 -1
- package/dist/cjs/q2-stepper-vertical.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-stepper-vertical.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-stepper.cjs.entry.js +1 -1
- package/dist/cjs/q2-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-stepper.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-tag.cjs.entry.js +1 -1
- package/dist/cjs/q2-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-tag.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
- package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
- package/dist/cjs/q2-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-textarea.entry.cjs.js.map +1 -1
- package/dist/cjs/{shapes-CUFxQAvI.js → shapes-CmBHp0YP.js} +10 -4
- package/dist/cjs/shapes-CmBHp0YP.js.map +1 -0
- package/dist/collection/components/q2-btn/q2-btn.css +71 -33
- package/dist/collection/components/q2-calendar/q2-calendar.js +11 -3
- package/dist/collection/components/q2-calendar/q2-calendar.js.map +1 -1
- package/dist/collection/components/q2-card/q2-card.css +8 -6
- package/dist/collection/components/q2-checkbox/q2-checkbox.css +24 -10
- package/dist/collection/components/q2-checkbox/q2-checkbox.js +2 -2
- package/dist/collection/components/q2-checkbox/q2-checkbox.js.map +1 -1
- package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.css +8 -2
- package/dist/collection/components/q2-context/q2-context.css +7 -71
- package/dist/collection/components/q2-data-table/q2-data-table.css +3 -2
- package/dist/collection/components/q2-data-table/q2-data-table.js +9 -9
- package/dist/collection/components/q2-data-table/q2-data-table.js.map +1 -1
- package/dist/collection/components/q2-dropdown/q2-dropdown.js +5 -3
- package/dist/collection/components/q2-dropdown/q2-dropdown.js.map +1 -1
- package/dist/collection/components/q2-file-picker/q2-file-picker.css +1 -1
- package/dist/collection/components/q2-file-picker/q2-file-picker.js +3 -3
- package/dist/collection/components/q2-form/q2-form.js +2 -2
- package/dist/collection/components/q2-form/q2-form.js.map +1 -1
- package/dist/collection/components/q2-grid/q2-grid.js +30 -30
- package/dist/collection/components/q2-grid-area/q2-grid-area.js +42 -42
- package/dist/collection/components/q2-icon/q2-icon.css +5 -0
- package/dist/collection/components/q2-input/q2-input.css +13 -4
- package/dist/collection/components/q2-input/q2-input.js +18 -8
- package/dist/collection/components/q2-input/q2-input.js.map +1 -1
- package/dist/collection/components/q2-item/q2-item.css +5 -2
- package/dist/collection/components/q2-loading/q2-loading.js +90 -33
- package/dist/collection/components/q2-loading/q2-loading.js.map +1 -1
- package/dist/collection/components/q2-loading/skeleton/shapes.js +8 -2
- package/dist/collection/components/q2-loading/skeleton/shapes.js.map +1 -1
- package/dist/collection/components/q2-optgroup/q2-optgroup.js +3 -3
- package/dist/collection/components/q2-optgroup/q2-optgroup.js.map +1 -1
- package/dist/collection/components/q2-option-list/q2-option-list.js +4 -4
- package/dist/collection/components/q2-pill/q2-pill.css +23 -7
- package/dist/collection/components/q2-pill/q2-pill.js +11 -7
- package/dist/collection/components/q2-pill/q2-pill.js.map +1 -1
- package/dist/collection/components/q2-popover/q2-popover.css +1 -0
- package/dist/collection/components/q2-radio/q2-radio.css +5 -3
- package/dist/collection/components/q2-radio-group/q2-radio-group.css +5 -0
- package/dist/collection/components/q2-select/q2-select.js +9 -4
- package/dist/collection/components/q2-select/q2-select.js.map +1 -1
- package/dist/collection/components/q2-stepper/q2-stepper.css +16 -4
- package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js +2 -2
- package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.css +2 -0
- package/dist/collection/components/q2-tab-container/q2-tab-container.css +4 -2
- package/dist/collection/components/q2-tab-container/q2-tab-container.js +27 -19
- package/dist/collection/components/q2-tab-container/q2-tab-container.js.map +1 -1
- package/dist/collection/components/q2-tag/q2-tag.css +7 -0
- package/dist/collection/components/q2-textarea/q2-textarea.css +13 -3
- package/dist/components/q2-btn2.js +1 -1
- package/dist/components/q2-btn2.js.map +1 -1
- package/dist/components/q2-calendar.js +11 -3
- package/dist/components/q2-calendar.js.map +1 -1
- package/dist/components/q2-card.js +1 -1
- package/dist/components/q2-card.js.map +1 -1
- package/dist/components/q2-checkbox-group.js +1 -1
- package/dist/components/q2-checkbox-group.js.map +1 -1
- package/dist/components/q2-checkbox2.js +3 -3
- package/dist/components/q2-checkbox2.js.map +1 -1
- package/dist/components/q2-context.js +1 -1
- package/dist/components/q2-context.js.map +1 -1
- package/dist/components/q2-data-table.js +3 -3
- package/dist/components/q2-data-table.js.map +1 -1
- package/dist/components/q2-dropdown.js +5 -3
- package/dist/components/q2-dropdown.js.map +1 -1
- package/dist/components/q2-file-picker.js +1 -1
- package/dist/components/q2-file-picker.js.map +1 -1
- package/dist/components/q2-form.js +4 -4
- package/dist/components/q2-form.js.map +1 -1
- package/dist/components/q2-icon2.js +1 -1
- package/dist/components/q2-icon2.js.map +1 -1
- package/dist/components/q2-input2.js +18 -8
- package/dist/components/q2-input2.js.map +1 -1
- package/dist/components/q2-item2.js +1 -1
- package/dist/components/q2-item2.js.map +1 -1
- package/dist/components/q2-loading2.js +71 -32
- package/dist/components/q2-loading2.js.map +1 -1
- package/dist/components/q2-optgroup2.js +1 -1
- package/dist/components/q2-optgroup2.js.map +1 -1
- package/dist/components/q2-pill.js +13 -10
- package/dist/components/q2-pill.js.map +1 -1
- package/dist/components/q2-popover2.js +1 -1
- package/dist/components/q2-popover2.js.map +1 -1
- package/dist/components/q2-radio-group.js +1 -1
- package/dist/components/q2-radio-group.js.map +1 -1
- package/dist/components/q2-radio.js +1 -1
- package/dist/components/q2-radio.js.map +1 -1
- package/dist/components/q2-select2.js +9 -4
- package/dist/components/q2-select2.js.map +1 -1
- package/dist/components/q2-stepper-vertical.js +1 -1
- package/dist/components/q2-stepper-vertical.js.map +1 -1
- package/dist/components/q2-stepper.js +1 -1
- package/dist/components/q2-stepper.js.map +1 -1
- package/dist/components/q2-tab-container.js +28 -20
- package/dist/components/q2-tab-container.js.map +1 -1
- package/dist/components/q2-tag.js +1 -1
- package/dist/components/q2-tag.js.map +1 -1
- package/dist/components/q2-textarea.js +1 -1
- package/dist/components/q2-textarea.js.map +1 -1
- package/dist/components/shapes.js +8 -2
- package/dist/components/shapes.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/q2-badge.q2-btn.q2-icon.q2-input.q2-loading.q2-tab-container.q2-tab-pane.entry.js.map +1 -1
- package/dist/esm/q2-badge_7.entry.js +119 -61
- package/dist/esm/q2-badge_7.entry.js.map +1 -1
- package/dist/esm/q2-calendar.entry.js +11 -3
- package/dist/esm/q2-calendar.entry.js.map +1 -1
- package/dist/esm/q2-card.entry.js +1 -1
- package/dist/esm/q2-card.entry.js.map +1 -1
- package/dist/esm/q2-checkbox-group.entry.js +1 -1
- package/dist/esm/q2-checkbox-group.entry.js.map +1 -1
- package/dist/esm/q2-checkbox.entry.js +3 -3
- package/dist/esm/q2-checkbox.entry.js.map +1 -1
- package/dist/esm/q2-context.entry.js +1 -1
- package/dist/esm/q2-context.entry.js.map +1 -1
- package/dist/esm/q2-data-table.entry.js +3 -3
- package/dist/esm/q2-data-table.entry.js.map +1 -1
- package/dist/esm/q2-dropdown.entry.js +5 -3
- package/dist/esm/q2-dropdown.entry.js.map +1 -1
- package/dist/esm/q2-file-picker.entry.js +1 -1
- package/dist/esm/q2-file-picker.entry.js.map +1 -1
- package/dist/esm/q2-form.entry.js +4 -4
- package/dist/esm/q2-form.entry.js.map +1 -1
- package/dist/esm/q2-item.entry.js +1 -1
- package/dist/esm/q2-item.entry.js.map +1 -1
- package/dist/esm/q2-loading-element.entry.js +1 -1
- package/dist/esm/q2-optgroup.entry.js +1 -1
- package/dist/esm/q2-optgroup.entry.js.map +1 -1
- package/dist/esm/q2-option-list.q2-popover.entry.js.map +1 -1
- package/dist/esm/q2-option-list_2.entry.js +1 -1
- package/dist/esm/q2-option-list_2.entry.js.map +1 -1
- package/dist/esm/q2-pill.entry.js +11 -9
- package/dist/esm/q2-pill.entry.js.map +1 -1
- package/dist/esm/q2-radio-group.entry.js +1 -1
- package/dist/esm/q2-radio-group.entry.js.map +1 -1
- package/dist/esm/q2-radio.entry.js +1 -1
- package/dist/esm/q2-radio.entry.js.map +1 -1
- package/dist/esm/q2-select.entry.js +9 -4
- package/dist/esm/q2-select.entry.js.map +1 -1
- package/dist/esm/q2-stepper-vertical.entry.js +1 -1
- package/dist/esm/q2-stepper-vertical.entry.js.map +1 -1
- package/dist/esm/q2-stepper.entry.js +1 -1
- package/dist/esm/q2-stepper.entry.js.map +1 -1
- package/dist/esm/q2-tag.entry.js +1 -1
- package/dist/esm/q2-tag.entry.js.map +1 -1
- package/dist/esm/q2-tecton-elements.js +1 -1
- package/dist/esm/q2-textarea.entry.js +1 -1
- package/dist/esm/q2-textarea.entry.js.map +1 -1
- package/dist/esm/{shapes-BrIjALih.js → shapes-ElQYMSyu.js} +10 -4
- package/dist/esm/shapes-ElQYMSyu.js.map +1 -0
- package/dist/jest.setup.js +33 -0
- package/dist/jest.setup.js.map +1 -1
- package/dist/q2-tecton-elements/q2-badge.q2-btn.q2-icon.q2-input.q2-loading.q2-tab-container.q2-tab-pane.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-badge_7.entry.js +204 -146
- package/dist/q2-tecton-elements/q2-badge_7.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-calendar.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-calendar.entry.js +104 -97
- package/dist/q2-tecton-elements/q2-calendar.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-card.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-card.entry.js +44 -44
- package/dist/q2-tecton-elements/q2-card.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-checkbox-group.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-checkbox-group.entry.js +5 -5
- package/dist/q2-tecton-elements/q2-checkbox-group.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-checkbox.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-checkbox.entry.js +28 -23
- package/dist/q2-tecton-elements/q2-checkbox.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-context.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-context.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-context.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-data-table.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-data-table.entry.js +27 -27
- package/dist/q2-tecton-elements/q2-data-table.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-dropdown.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-dropdown.entry.js +18 -17
- package/dist/q2-tecton-elements/q2-dropdown.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-file-picker.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-file-picker.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-file-picker.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-form.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-form.entry.js +2 -2
- package/dist/q2-tecton-elements/q2-form.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-item.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-item.entry.js +8 -8
- package/dist/q2-tecton-elements/q2-loading-element.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-optgroup.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-optgroup.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-optgroup.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-option-list.q2-popover.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-option-list_2.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-option-list_2.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-pill.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-pill.entry.js +39 -37
- package/dist/q2-tecton-elements/q2-pill.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-radio-group.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-radio-group.entry.js +47 -47
- package/dist/q2-tecton-elements/q2-radio-group.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-radio.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-radio.entry.js +16 -16
- package/dist/q2-tecton-elements/q2-radio.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-select.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-select.entry.js +13 -9
- package/dist/q2-tecton-elements/q2-select.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-stepper-vertical.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-stepper.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-stepper.entry.js +39 -39
- package/dist/q2-tecton-elements/q2-stepper.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-tag.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-tag.entry.js +38 -38
- package/dist/q2-tecton-elements/q2-tag.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
- package/dist/q2-tecton-elements/q2-textarea.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-textarea.entry.js +17 -17
- package/dist/q2-tecton-elements/q2-textarea.entry.js.map +1 -1
- package/dist/q2-tecton-elements/{shapes-BrIjALih.js → shapes-ElQYMSyu.js} +40 -39
- package/dist/q2-tecton-elements/shapes-ElQYMSyu.js.map +1 -0
- package/dist/types/components/q2-form/q2-form.d.ts +1 -1
- package/dist/types/components/q2-input/q2-input.d.ts +2 -0
- package/dist/types/components/q2-loading/q2-loading.d.ts +17 -6
- package/dist/types/components/q2-optgroup/q2-optgroup.d.ts +2 -2
- package/dist/types/components/q2-pill/q2-pill.d.ts +1 -1
- package/dist/types/components/q2-select/q2-select.d.ts +6 -1
- package/dist/types/components/q2-tab-container/q2-tab-container.d.ts +4 -2
- package/dist/types/components.d.ts +14 -4
- package/package.json +4 -3
- package/dist/cjs/shapes-CUFxQAvI.js.map +0 -1
- package/dist/esm/shapes-BrIjALih.js.map +0 -1
- package/dist/q2-tecton-elements/shapes-BrIjALih.js.map +0 -1
- /package/dist/types/{builds → home/gitlab-runner/builds}/q2e/development/tecton/tecton/packages/q2-tecton-elements/.stencil/jest.setup.d.ts +0 -0
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-JnAD7tEB.js');
|
|
4
4
|
var index$1 = require('./index-B6mUspT0.js');
|
|
5
|
-
var shapes = require('./shapes-
|
|
5
|
+
var shapes = require('./shapes-CmBHp0YP.js');
|
|
6
6
|
|
|
7
7
|
const q2BadgeCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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;line-height:0;--comp-badge-font-size:var(--app-font-size-small, 12px);--comp-badge-large-font-size:var(--app-font-size-medium, 14px);--comp-badge-background:var(--tct-badge-background, var(--t-a11y-gray-color-AAA, #6c6c6c));--comp-badge-color:var(--tct-badge-color, var(--t-base, #ffffff))}:host:host([status=info]){--comp-badge-background:var(--tct-badge-info-background, var(--const-stoplight-info, #0079c1));--comp-badge-color:var(--tct-badge-info-color, var(--const-stoplight-info-text, #ffffff))}:host:host([status=alert]){--comp-badge-background:var(--tct-badge-alert-background, var(--const-stoplight-alert, #d20a0a));--comp-badge-color:var(--tct-badge-alert-color, var(--const-stoplight-alert-text, #ffffff))}:host:host([status=warning]){--comp-badge-background:var(--tct-badge-warning-background, var(--const-stoplight-warning, #c35500));--comp-badge-color:var(--tct-badge-warning-color, var(--const-stoplight-warning-text, #ffffff))}:host:host([status=success]){--comp-badge-background:var(--tct-badge-success-background, var(--const-stoplight-success, #0e8a00));--comp-badge-color:var(--tct-badge-success-color, var(--const-stoplight-success-text, #ffffff))}:host:host([theme=primary]){--comp-badge-background:var(--tct-badge-primary-background, var(--t-primary, #6a4a9e));--comp-badge-color:var(--tct-badge-primary-color, var(--t-primary-text, #ffffff))}:host:host([theme=secondary]){--comp-badge-background:var(--tct-badge-secondary-background, var(--t-secondary, #b3c2cc));--comp-badge-color:var(--tct-badge-secondary-color, var(--t-secondary-text, #141414))}:host:host([theme=tertiary]){--comp-badge-background:var(--tct-badge-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-badge-color:var(--tct-badge-tertiary-color, var(--t-tertiary-text, #141414))}.badge-container{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;height:var(--tct-badge-height, 16px);min-width:var(--tct-badge-min-width, 16px);text-align:center;padding:var(--tct-badge-padding, 0 5px);color:var(--comp-badge-color);background:var(--comp-badge-background);border-radius:var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px));border:var(--tct-badge-border);backdrop-filter:var(--tct-badge-backdrop-filter)}.badge-container .badge-text{font-size:var(--comp-badge-font-size);line-height:var(--tct-badge-line-height, 14px)}.badge-container .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-font-size) !important}.badge-container.size-large{height:var(--tct-badge-large-height, 22px);min-width:var(--tct-badge-large-min-width, 22px);border-radius:var(--tct-badge-large-border-radius, 11px);padding:var(--tct-badge-large-padding, 0 6px)}.badge-container.size-large .badge-text{font-size:var(--comp-badge-large-font-size);line-height:var(--tct-badge-large-line-height, 20px)}.badge-container.size-large .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-large-font-size) !important}.empty-variant{min-width:unset;width:16px;height:16px;padding:0}.empty-variant.size-large{min-width:unset;width:22px;height:22px;padding:0}";
|
|
8
8
|
|
|
@@ -77,7 +77,7 @@ const Q2Badge = class {
|
|
|
77
77
|
};
|
|
78
78
|
Q2Badge.style = q2BadgeCss;
|
|
79
79
|
|
|
80
|
-
const q2BtnCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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}q2-loading{--tct-loading-primary-color:currentcolor;--tct-loading-secondary-color:currentcolor;--tct-loading-spinner-size:24px}.slot-container{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);pointer-events:none}:host([loading]) .icon-right .slot-container{flex-direction:row-reverse}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]:not([loading=false])) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}::slotted(q2-icon){pointer-events:none;margin-block:-100px}:host{--comp-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-background-alternative:#ebf8ff}:host .btn-height-wrapper{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host .btn-height-wrapper:active{box-shadow:none}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:var(--tct-btn-border);background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}button.has-color,button.has-intent{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit));border-radius:var(--tct-btn-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-text-transform);letter-spacing:var(--tct-btn-letter-spacing, inherit)}button.has-color:not(.has-size),button.has-intent:not(.has-size){padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}button:not(.has-size):not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size, 18px)}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size=\"4x\"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size=\"4\"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([size=small]) button{padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 14px))}:host([size=small]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-small, 16px)}:host([size=medium]) button{padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));font-size:var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, 16px))}:host([size=medium]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-medium, unset)}:host([size=large]) button{padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));font-size:var(--tct-btn-font-size-large, var(--t-btn-font-size-large, 20px))}:host([size=large]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-large, unset)}:host([color=primary]) button,:host([intent=workflow-primary]) button{backdrop-filter:var(--tct-btn-primary-backdrop-filter);--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-background:var(--tct-btn-primary-active-background, #0063a0);--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:hover{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:focus{border-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-primary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=primary]) button:enabled:focus-visible,:host([intent=workflow-primary]) button:enabled:focus-visible{border-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:active{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:focus-visible,:host([color=primary]) button:focus-visible:hover:enabled,:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus-visible,:host([intent=workflow-primary]) button:focus-visible:hover:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:focus-visible:active:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus-visible:active:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{border-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-primary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=primary]) button ::slotted(q2-icon),:host([intent=workflow-primary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentcolor)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{backdrop-filter:var(--tct-btn-secondary-backdrop-filter);--comp-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-hover-background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-font-color:var(--app-white, #ffffff);--comp-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-hover-background));--comp-hover-inner-ring-color:var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:hover{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:focus{border-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=secondary]) button:enabled:focus-visible,:host([intent=workflow-secondary]) button:enabled:focus-visible{border-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:active{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:focus-visible,:host([color=secondary]) button:focus-visible:hover:enabled,:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus-visible,:host([intent=workflow-secondary]) button:focus-visible:hover:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:focus-visible:active:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus-visible:active:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{border-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-secondary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=secondary]) button ::slotted(q2-icon),:host([intent=workflow-secondary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-destroy]) button{backdrop-filter:var(--tct-btn-destroy-backdrop-filter);--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #d20a0a));--comp-font-color:var(--tct-btn-destroy-font-color, var(--app-white));--comp-box-shadow:var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-destroy]) button:enabled:hover{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus{border-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus-visible{border-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-destroy]) button:enabled:active{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible,:host([intent=workflow-destroy]) button:focus-visible:hover:enabled,:host([intent=workflow-destroy]) button:focus,:host([intent=workflow-destroy]) button:focus:hover:enabled{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible:active:enabled,:host([intent=workflow-destroy]) button:focus:active:enabled{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:disabled{border-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-destroy-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-destroy]) button ::slotted(q2-icon){--t-text:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-escape]) button{backdrop-filter:var(--tct-btn-escape-backdrop-filter);--comp-background:var(--tct-btn-escape-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-box-shadow:var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-background:var(--tct-btn-escape-hover-background, var(--comp-background-alternative));--comp-active-background:var(--tct-btn-escape-active-background, var(--comp-background-alternative));--comp-focus-background:var(--tct-btn-escape-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-escape-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-escape]) button:enabled:hover{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus{border-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-escape-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus-visible{border-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-escape-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-escape]) button:enabled:active{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:focus-visible,:host([intent=workflow-escape]) button:focus-visible:hover:enabled,:host([intent=workflow-escape]) button:focus,:host([intent=workflow-escape]) button:focus:hover:enabled{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:focus-visible:active:enabled,:host([intent=workflow-escape]) button:focus:active:enabled{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:disabled{border-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-escape-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-escape]) button ::slotted(q2-icon){--t-text:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral]) button{backdrop-filter:var(--tct-btn-neutral-backdrop-filter);--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-border-width:1px;--comp-border-style:solid;--comp-border-color:var(--comp-font-color);--comp-hover-outer-ring-color:var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral]) button:enabled:hover{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:enabled:focus{border-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral]) button:enabled:active{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:focus-visible,:host([intent=neutral]) button:focus-visible:hover:enabled,:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:focus-visible:active:enabled,:host([intent=neutral]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:disabled{border-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral-text]) button{backdrop-filter:var(--tct-btn-neutral-text-backdrop-filter);--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-font-color:var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-text-box-shadow);--comp-hover-text-decoration:underline;--comp-focus-background:var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-text-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-text-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral-text]) button:enabled:hover{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:enabled:focus{border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral-text]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral-text]) button:enabled:active{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:focus-visible,:host([intent=neutral-text]) button:focus-visible:hover:enabled,:host([intent=neutral-text]) button:focus,:host([intent=neutral-text]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:focus-visible:active:enabled,:host([intent=neutral-text]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:disabled{border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral-text]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentcolor)))}button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)));padding:var(--tct-btn-icon-padding, 0px)}button.icon-only ::slotted(q2-icon){--tct-icon-size:unset}button.icon-only.has-size{padding:var(--tct-btn-icon-padding, 0px)}button.icon-only.has-intent{padding:var(--tct-btn-icon-padding, 10px);border-radius:var(--tct-btn-icon-border-radius, var(--comp-border-radius))}button:not(.has-color):not(.has-intent):hover,button:not(.has-color):not(.has-intent):focus,button.icon-only:hover,button.icon-only:focus{background:var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}button:not(.has-intent).is-active.icon-only{background-color:var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}button:not(.has-intent).icon-only:hover *,button:not(.has-intent).icon-only:focus *,button:not(.has-intent).is-active.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}button:not(.has-intent):not(.icon-only){height:var(--tct-btn-height, auto);padding-inline:var(--tct-btn-padding-inline, 0);font-weight:var(--tct-btn-font-weight);border-radius:var(--tct-btn-border-radius, 0)}button:not(.has-intent):not(.icon-only):hover,button:not(.has-intent):not(.icon-only):focus{background:var(--tct-btn-hover-background)}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));background-color:var(--tct-btn-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent)));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-background, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-background, var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}button.intent-coin{--tct-avatar-background:var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));--tct-avatar-height:var(--tct-btn-coin-height, 44px);--tct-avatar-width:var(--tct-btn-coin-width, 44px);--tct-avatar-fallback-background:var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-text, #4d4d4d));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-text, #4d4d4d));--tct-icon-stroke-width:var(--tct-btn-coin-icon-stroke-width, 1px);--tct-btn-padding:0;--tct-btn-border-radius:50%;--tct-avatar-border:var(--tct-btn-coin-border, 0);width:auto;backdrop-filter:var(--tct-btn-coin-backdrop-filter)}button.intent-coin:focus{--const-double-focus-ring:0;box-shadow:0}button.intent-coin:focus-visible{--const-double-focus-ring:0 0 0 2px #ffffff,\n 0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e))}button.intent-coin:hover:not([disabled]){--const-double-focus-ring:0 0 0 2px #ffffff,\n 0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));--tct-avatar-background:var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1));--tct-avatar-fallback-background:var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-base, #ffffff));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-base, #ffffff));box-shadow:var(--const-double-focus-ring)}button.intent-coin:active:not([disabled]){box-shadow:none}.coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));max-width:100px;text-align:center;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}.coin-wrapper{--tct-avatar-display:block;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);flex-direction:column;width:var(--tct-btn-coin-container-width, 95px)}.coin-wrapper ::slotted(:not(q2-avatar,[slot=coin-label])){display:none}.coin-wrapper .coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));margin-top:var(--tct-btn-coin-gap, var(--app-scale-2x, 10px));max-width:100px;text-align:center;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.coin-wrapper .coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}";
|
|
80
|
+
const q2BtnCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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}q2-loading{--tct-loading-primary-color:currentcolor;--tct-loading-secondary-color:currentcolor;--tct-loading-spinner-size:24px}.slot-container{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);pointer-events:none}:host([loading]) .icon-right .slot-container{flex-direction:row-reverse}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]:not([loading=false])) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}::slotted(q2-icon){pointer-events:none;margin-block:-100px}:host{--comp-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-background-alternative:#ebf8ff}:host .btn-height-wrapper{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host .btn-height-wrapper:active{box-shadow:none}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:var(--tct-btn-border);background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}button.has-color,button.has-intent{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit));border-radius:var(--tct-btn-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-text-transform);letter-spacing:var(--tct-btn-letter-spacing, inherit)}button.has-color:not(.has-size),button.has-intent:not(.has-size){padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}button:not(.has-size):not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size, 18px)}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size=\"4x\"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size=\"4\"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([size=small]) button{padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 14px))}:host([size=small]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-small, 16px)}:host([size=medium]) button{padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));font-size:var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, 16px))}:host([size=medium]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-medium, unset)}:host([size=large]) button{padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));font-size:var(--tct-btn-font-size-large, var(--t-btn-font-size-large, 20px))}:host([size=large]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-large, unset)}:host([color=primary]) button,:host([intent=workflow-primary]) button{backdrop-filter:var(--tct-btn-primary-backdrop-filter);--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-background:var(--tct-btn-primary-active-background, #0063a0);--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:var(\n --tct-btn-primary-hover-box-shadow,\n 0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color)\n );--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:var(\n --tct-btn-primary-focus-visible-box-shadow,\n 0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n );border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:hover{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:focus{border-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-primary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=primary]) button:enabled:focus-visible,:host([intent=workflow-primary]) button:enabled:focus-visible{border-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:active{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:focus-visible,:host([color=primary]) button:focus-visible:hover:enabled,:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus-visible,:host([intent=workflow-primary]) button:focus-visible:hover:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:focus-visible:active:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus-visible:active:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{border-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-primary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=primary]) button ::slotted(q2-icon),:host([intent=workflow-primary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentcolor)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{backdrop-filter:var(--tct-btn-secondary-backdrop-filter);--comp-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-hover-background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-font-color:var(--app-white, #ffffff);--comp-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-hover-background));--comp-hover-inner-ring-color:var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:var(\n --tct-btn-secondary-hover-box-shadow,\n 0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color)\n );--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:var(\n --tct-btn-secondary-focus-visible-box-shadow,\n 0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n );border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:hover{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:focus{border-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=secondary]) button:enabled:focus-visible,:host([intent=workflow-secondary]) button:enabled:focus-visible{border-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:active{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:focus-visible,:host([color=secondary]) button:focus-visible:hover:enabled,:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus-visible,:host([intent=workflow-secondary]) button:focus-visible:hover:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:focus-visible:active:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus-visible:active:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{border-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-secondary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=secondary]) button ::slotted(q2-icon),:host([intent=workflow-secondary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-destroy]) button{backdrop-filter:var(--tct-btn-destroy-backdrop-filter);--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #d20a0a));--comp-font-color:var(--tct-btn-destroy-font-color, var(--app-white));--comp-box-shadow:var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:var(\n --tct-btn-destroy-hover-box-shadow,\n 0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color)\n );--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:var(\n --tct-btn-destroy-focus-visible-box-shadow,\n 0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n );border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-destroy]) button:enabled:hover{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus{border-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus-visible{border-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-destroy]) button:enabled:active{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible,:host([intent=workflow-destroy]) button:focus-visible:hover:enabled,:host([intent=workflow-destroy]) button:focus,:host([intent=workflow-destroy]) button:focus:hover:enabled{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible:active:enabled,:host([intent=workflow-destroy]) button:focus:active:enabled{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:disabled{border-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-destroy-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-destroy]) button ::slotted(q2-icon){--t-text:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-escape]) button{backdrop-filter:var(--tct-btn-escape-backdrop-filter);--comp-background:var(--tct-btn-escape-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-box-shadow:var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-background:var(--tct-btn-escape-hover-background, var(--comp-background-alternative));--comp-active-background:var(--tct-btn-escape-active-background, var(--comp-background-alternative));--comp-focus-background:var(--tct-btn-escape-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-escape-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:var(\n --tct-btn-escape-hover-box-shadow,\n 0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color)\n );--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:var(\n --tct-btn-escape-focus-visible-box-shadow,\n 0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n );border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-escape]) button:enabled:hover{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus{border-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-escape-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus-visible{border-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-escape-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-escape]) button:enabled:active{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:focus-visible,:host([intent=workflow-escape]) button:focus-visible:hover:enabled,:host([intent=workflow-escape]) button:focus,:host([intent=workflow-escape]) button:focus:hover:enabled{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:focus-visible:active:enabled,:host([intent=workflow-escape]) button:focus:active:enabled{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:disabled{border-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-escape-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-escape]) button ::slotted(q2-icon){--t-text:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral]) button{backdrop-filter:var(--tct-btn-neutral-backdrop-filter);--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-border-width:1px;--comp-border-style:solid;--comp-border-color:var(--comp-font-color);--comp-hover-outer-ring-color:var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:var(\n --tct-btn-neutral-hover-box-shadow,\n 0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color)\n );--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:var(\n --tct-btn-neutral-focus-visible-box-shadow,\n 0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n );border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral]) button:enabled:hover{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:enabled:focus{border-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral]) button:enabled:active{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:focus-visible,:host([intent=neutral]) button:focus-visible:hover:enabled,:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:focus-visible:active:enabled,:host([intent=neutral]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:disabled{border-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral-text]) button{backdrop-filter:var(--tct-btn-neutral-text-backdrop-filter);--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-font-color:var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-text-box-shadow);--comp-hover-text-decoration:underline;--comp-focus-background:var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:var(\n --tct-btn-neutral-text-hover-box-shadow,\n 0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color)\n );--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:var(\n --tct-btn-neutral-text-focus-visible-box-shadow,\n 0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color)\n );border-style:var(--tct-btn-neutral-text-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-text-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral-text]) button:enabled:hover{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:enabled:focus{border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral-text]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral-text]) button:enabled:active{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:focus-visible,:host([intent=neutral-text]) button:focus-visible:hover:enabled,:host([intent=neutral-text]) button:focus,:host([intent=neutral-text]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:focus-visible:active:enabled,:host([intent=neutral-text]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:disabled{border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral-text]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentcolor)))}button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)));padding:var(--tct-btn-icon-padding, 0px)}button.icon-only ::slotted(q2-icon){--tct-icon-size:unset}button.icon-only.has-size{padding:var(--tct-btn-icon-padding, 0px)}button.icon-only.has-intent{padding:var(--tct-btn-icon-padding, 10px);border-radius:var(--tct-btn-icon-border-radius, var(--comp-border-radius))}button:not(.has-color):not(.has-intent):hover,button:not(.has-color):not(.has-intent):focus,button.icon-only:hover,button.icon-only:focus{background:var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}button:not(.has-intent).is-active.icon-only{background-color:var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}button:not(.has-intent).icon-only:hover *,button:not(.has-intent).icon-only:focus *,button:not(.has-intent).is-active.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}button:not(.has-intent):not(.icon-only){height:var(--tct-btn-height, auto);padding-inline:var(--tct-btn-padding-inline, 0);font-weight:var(--tct-btn-font-weight);border-radius:var(--tct-btn-border-radius, 0)}button:not(.has-intent):not(.icon-only):hover,button:not(.has-intent):not(.icon-only):focus{background:var(--tct-btn-hover-background)}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));background-color:var(--tct-btn-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent)));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-background, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-background, var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}button.intent-coin{--tct-avatar-background:var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));--tct-avatar-height:var(--tct-btn-coin-height, 44px);--tct-avatar-width:var(--tct-btn-coin-width, 44px);--tct-avatar-fallback-background:var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-text, #4d4d4d));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-text, #4d4d4d));--tct-icon-stroke-width:var(--tct-btn-coin-icon-stroke-width, 1px);--tct-btn-padding:0;--tct-btn-border-radius:50%;--tct-avatar-border:var(--tct-btn-coin-border, 0);width:auto;backdrop-filter:var(--tct-btn-coin-backdrop-filter);box-shadow:var(--tct-btn-coin-box-shadow)}button.intent-coin:hover:not([disabled]){--const-double-focus-ring:0 0 0 2px #ffffff,\n 0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));--tct-avatar-background:var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1));--tct-avatar-fallback-background:var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-base, #ffffff));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-base, #ffffff));box-shadow:var(--tct-btn-coin-hover-box-shadow, var(--tct-btn-coin-box-shadow, var(--const-double-focus-ring)))}button.intent-coin:focus:not([disabled]){--const-double-focus-ring:0;box-shadow:var(--tct-btn-coin-focus-box-shadow, var(--tct-btn-coin-box-shadow, 0))}button.intent-coin:focus-visible:not([disabled]){--const-double-focus-ring:0 0 0 2px #ffffff,\n 0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));box-shadow:var(--tct-btn-coin-focus-visible-box-shadow, var(--tct-btn-coin-focus-box-shadow, var(--tct-btn-coin-box-shadow, var(--const-double-focus-ring))))}button.intent-coin:active:not([disabled]){box-shadow:none}.coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));max-width:100px;text-align:center;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}.coin-wrapper{--tct-avatar-display:block;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);flex-direction:column;width:var(--tct-btn-coin-container-width, 95px)}.coin-wrapper ::slotted(:not(q2-avatar,[slot=coin-label])){display:none}.coin-wrapper .coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));margin-top:var(--tct-btn-coin-gap, var(--app-scale-2x, 10px));max-width:100px;text-align:center;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.coin-wrapper .coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}";
|
|
81
81
|
|
|
82
82
|
const Q2Btn = class {
|
|
83
83
|
constructor(hostRef) {
|
|
@@ -784,7 +784,7 @@ var iconMap = {
|
|
|
784
784
|
"zoom-out": "standard"
|
|
785
785
|
};
|
|
786
786
|
|
|
787
|
-
const q2IconCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, var(--tct-icon-group-stroke-width, 2)));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round));transition:var(--tct-icon-transition, none)}svg.brand{stroke-width:var(--tct-icon-group-brand-stroke-width, 1)}svg.browsersos{stroke-width:var(--tct-icon-group-browsersos-stroke-width, 1)}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.fill-secondary{fill:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)));transition:var(--tct-icon-fill-transition, none)}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentcolor));transition:var(--tct-icon-stroke-primary-transition, none)}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a))}";
|
|
787
|
+
const q2IconCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, var(--tct-icon-group-stroke-width, 2)));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round));transition:var(--tct-icon-transition, none)}svg.brand{stroke-width:var(--tct-icon-group-brand-stroke-width, 1)}svg.browsersos{stroke-width:var(--tct-icon-group-browsersos-stroke-width, 1)}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.fill-secondary{fill:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)));transition:var(--tct-icon-fill-transition, none)}.brand-filled{fill:var(--tct-brand-icon-fill, var(--tct-icon-fill, currentColor));transition:var(--tct-icon-fill-transition, none)}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentcolor));transition:var(--tct-icon-stroke-primary-transition, none)}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a))}";
|
|
788
788
|
|
|
789
789
|
const Q2Icon = class {
|
|
790
790
|
constructor(hostRef) {
|
|
@@ -3829,7 +3829,7 @@ const formatCreditCard = {
|
|
|
3829
3829
|
unknownFormatter,
|
|
3830
3830
|
};
|
|
3831
3831
|
|
|
3832
|
-
const q2InputCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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{--comp-default-input-margin:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-input-margin, var(--comp-default-input-margin));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}.field-container,.input-container{position:relative}.field-container{--comp-input-tween:var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.field-container.is-small .btn-clear{--tct-btn-icon-width:20px;--tct-icon-size:17px}.input-label{--comp-label-padding:var(--tct-input-label-padding, 0 var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0)) 0 var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0)));display:block;padding:var(--comp-label-padding);color:var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));font-size:var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));font-weight:var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, inherit));transition:color var(--comp-input-tween)}.optional-tag{--comp-label-optional-margin:var(--tct-input-label-optional-margin, 0 0 0 var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, var(--app-font-size-small, 12px)));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));line-height:1em}.count-tag{color:var(--tct-input-count-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-input-count-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-input-count-font-weight, 400);text-align:right;width:var(--tct-input-count-width, auto)}.label-wrapper{--comp-label-margin:var(--tct-input-label-margin, var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0)) 0 var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1x, 5px)))));display:flex;gap:var(--tct-input-label-gap, var(--app-scale-2x, 10px));justify-content:space-between;align-items:end;margin:var(--comp-label-margin);line-height:var(--tct-input-label-line-height, var(--t-input-label-line-height, inherit))}.label-wrapper:has(label.sr){margin:0}.input-container{--comp-input-background:var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd))));--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 0));--comp-input-border-top-left-radius:var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-top-right-radius:var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-right-radius:var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-left-radius:var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-radius:var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)\n var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)\n var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);--comp-input-border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)));--comp-input-prefix-clearance:calc(3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px));--comp-input-icon-clearance:34px;--comp-input-min-height:var(--tct-input-min-height, var(--t-input-min-height, 44px));--comp-input-max-height:var(--tct-input-max-height, var(--t-input-max-height));--comp-input-hover-ring-color:var(--tct-input-hover-ring-color, var(--t-input-hover-ring-color));--comp-input-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent));background:var(--comp-input-background);display:flex;align-items:center;gap:var(--tct-input-container-gap, var(--app-scale-2x, 10px));padding-inline:var(--tct-input-container-padding-inline);border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--comp-input-border-color);border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, var(--t-input-box-shadow, none));transition:border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.has-error .input-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));background:var(--tct-input-error-background, var(--comp-input-background));box-shadow:var(--tct-input-error-box-shadow, var(--comp-input-hover-ring))}.input-container:hover{border-color:var(--tct-input-hover-border-color, var(--comp-input-border-color));background:var(--tct-input-hover-background, var(--comp-input-background));box-shadow:var(--tct-input-hover-box-shadow, var(--comp-input-hover-ring))}.has-error .input-container:hover{border-color:var(--tct-input-error-hover-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-input-error-hover-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-hover-box-shadow, var(--tct-input-error-box-shadow, var(--comp-input-hover-ring)))}.has-focus .input-container{border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--comp-input-border-color)));background:var(--tct-input-focus-background, var(--comp-input-background));box-shadow:var(--tct-input-focus-box-shadow, var(--const-double-focus-ring))}.has-focus.has-error .input-container,.has-focus.has-error .input-container:hover{border-color:var(--tct-input-error-focus-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-input-error-focus-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-focus-box-shadow, var(--tct-input-error-box-shadow, var(--const-double-focus-ring)))}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)){background:var(--tct-input-autofill-background, #faffbc);color:var(--tct-input-autofill-font-color, --t-text, inherit)}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)) .input-field{box-shadow:0 0 0 1000px var(--tct-input-autofill-background, #faffbc) inset;color:var(--tct-input-autofill-font-color, --t-text, inherit);-webkit-text-fill-color:var(--tct-input-autofill-font-color, --t-text, inherit)}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);overflow-y:hidden;height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:var(--tct-input-padding, 0);background:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));display:inline-block;text-align:var(--tct-input-align, \"start\");font-weight:var(--tct-input-font-weight, var(--t-input-font-weight, 400));letter-spacing:var(--tct-input-letter-spacing, var(--t-input-letter-spacing, inherit));}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-field::-ms-reveal,.input-field::-ms-clear{display:none}.input-field[type=search]::-webkit-search-decoration,.input-field[type=search]::-webkit-search-cancel-button,.input-field[type=search]::-webkit-search-results-button,.input-field[type=search]::-webkit-search-results-decoration{display:none}.input-field[disabled]:not([disabled=false]){cursor:not-allowed}.right-aligned .input-field{text-align:right}.input-field:is(input){flex:1}.input-field:is(button){display:inline-flex;align-items:center}.has-custom-display .input-field:is(button){height:auto;padding:0}.input-field:is(button) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.custom-display-container{max-width:100%}.has-custom-display .custom-display-container{--comp-default-padding:var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)));width:100%}.input-field::placeholder,.placeholder-text{color:var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))))}.pseudo-input-container{min-width:0;flex:1}.input-icons-container-left,.input-icons-container-right{--tct-btn-icon-hover-background:var(--tct-input-btn-hover-background);--tct-btn-hover-background:var(--tct-input-btn-hover-background);display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap)}.input-icons-container-left>div:not(.vertical-separator),.input-icons-container-right>div:not(.vertical-separator){min-width:var(--tct-input-icon-container-icon-min-width, 44px);display:flex;justify-content:center;align-items:center;font-size:var(--tct-input-icon-container-font-size, inherit)}.input-icons-container-left:empty,.input-icons-container-right:empty{display:var(--tct-input-icon-container-empty-display, block)}.input-icons-container-left{padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right{padding-right:var(--comp-input-horizontal-gap);--comp-visibility-toggle-padding:0px var(--app-scale-2x, 10px)}.input-icons-container-right .btn-visibility-toggle{--tct-btn-height:var(--comp-input-min-height);--tct-btn-padding-inline:var(--tct-input-visibility-toggle-padding, var(--app-scale-2x, 10px));--tct-btn-font-weight:var(--tct-input-visibility-toggle-font-weight, 400);color:var(--tct-input-visibility-toggle-font-color, var(--t-primary, #0079c1));font-size:var(--tct-input-visibility-toggle-font-size, var(--app-font-size-small, 12px))}q2-icon{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);height:var(--tct-input-height, var(--t-input-height, 44px));font-size:var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));color:var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));background:var(--tct-input-prefix-background, var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))))));transition:color var(--comp-input-tween), background var(--comp-input-tween)}.input-prefix{border-top-left-radius:calc(\n var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n );border-bottom-left-radius:calc(\n var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n );pointer-events:none;}.input-suffix{border-top-right-radius:calc(\n var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n );border-bottom-right-radius:calc(\n var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n )}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));box-shadow:var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));transition:height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:var(--tct-input-messages-margin-top, 2px);z-index:var(--tct-input-messages-z-index, 5);position:absolute;width:100%;color:var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));border-radius:var(--tct-message-border-radius, --app-border-radius-1, inherit)}.has-error label{color:var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));background:var(--tct-input-error-prefix-background, var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))))))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right-width:var(--tct-input-prefix-border-width, 1px);border-right-style:solid;border-right-color:var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)))))}";
|
|
3832
|
+
const q2InputCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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{--comp-default-input-margin:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-input-margin, var(--comp-default-input-margin));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}.field-container,.input-container{position:relative}.field-container{--comp-input-tween:var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.field-container.is-small .btn-clear{--tct-btn-icon-width:20px;--tct-icon-size:17px}.input-label{--comp-label-padding:var(--tct-input-label-padding, 0 var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0)) 0 var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0)));display:block;padding:var(--comp-label-padding);color:var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));font-size:var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));font-weight:var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, inherit));transition:color var(--comp-input-tween)}.optional-tag{--comp-label-optional-margin:var(--tct-input-label-optional-margin, 0 0 0 var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, var(--app-font-size-small, 12px)));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));line-height:1em}.count-tag{color:var(--tct-input-count-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-input-count-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-input-count-font-weight, 400);text-align:right;width:var(--tct-input-count-width, auto)}.label-wrapper{--comp-label-margin:var(--tct-input-label-margin, var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0)) 0 var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1x, 5px)))));display:flex;gap:var(--tct-input-label-gap, var(--app-scale-2x, 10px));justify-content:space-between;align-items:end;margin:var(--comp-label-margin);line-height:var(--tct-input-label-line-height, var(--t-input-label-line-height, inherit))}.label-wrapper:has(label.sr){margin:0}.input-container{--comp-input-background:var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd))));--comp-input-backdrop-filter:var(--tct-input-backdrop-filter, none);--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 0));--comp-input-border-top-left-radius:var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-top-right-radius:var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-right-radius:var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-left-radius:var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-radius:var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)\n var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)\n var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);--comp-input-border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)));--comp-input-prefix-clearance:calc(3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px));--comp-input-icon-clearance:34px;--comp-input-min-height:var(--tct-input-min-height, var(--t-input-min-height, 44px));--comp-input-max-height:var(--tct-input-max-height, var(--t-input-max-height));--comp-input-hover-ring-color:var(--tct-input-hover-ring-color, var(--t-input-hover-ring-color));--comp-input-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent));background:var(--comp-input-background);backdrop-filter:var(--comp-input-backdrop-filter);display:flex;align-items:center;gap:var(--tct-input-container-gap, var(--app-scale-2x, 10px));padding-inline:var(--tct-input-container-padding-inline);border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--comp-input-border-color);border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, var(--t-input-box-shadow, none));transition:background var(--comp-input-tween), backdrop-filter var(--comp-input-tween), border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));backdrop-filter:var(--tct-input-disabled-backdrop-filter, var(--comp-input-backdrop-filter))}.has-error .input-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));backdrop-filter:var(--tct-input-error-backdrop-filter, var(--comp-input-backdrop-filter));background:var(--tct-input-error-background, var(--comp-input-background));box-shadow:var(--tct-input-error-box-shadow, var(--comp-input-hover-ring))}.input-container:hover{border-color:var(--tct-input-hover-border-color, var(--comp-input-border-color));background:var(--tct-input-hover-background, var(--comp-input-background));backdrop-filter:var(--tct-input-hover-backdrop-filter, var(--comp-input-backdrop-filter));box-shadow:var(--tct-input-hover-box-shadow, var(--comp-input-hover-ring))}.has-error .input-container:hover{border-color:var(--tct-input-error-hover-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-input-error-hover-backdrop-filter, var(--tct-input-error-backdrop-filter, var(--tct-input-hover-backdrop-filter, var(--comp-input-backdrop-filter))));background:var(--tct-input-error-hover-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-hover-box-shadow, var(--tct-input-error-box-shadow, var(--comp-input-hover-ring)))}.has-focus .input-container{border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--comp-input-border-color)));background:var(--tct-input-focus-background, var(--comp-input-background));backdrop-filter:var(--tct-input-focus-backdrop-filter, var(--comp-input-backdrop-filter));box-shadow:var(--tct-input-focus-box-shadow, var(--const-double-focus-ring))}.has-focus.has-error .input-container,.has-focus.has-error .input-container:hover{border-color:var(--tct-input-error-focus-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-input-error-focus-backdrop-filter, var(--tct-input-error-backdrop-filter, var(--tct-input-focus-backdrop-filter, var(--comp-input-backdrop-filter))));background:var(--tct-input-error-focus-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-focus-box-shadow, var(--tct-input-error-box-shadow, var(--const-double-focus-ring)))}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)){background:var(--tct-input-autofill-background, #faffbc);color:var(--tct-input-autofill-font-color, var(--t-text, inherit))}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)) .input-field{box-shadow:0 0 0 1000px var(--tct-input-autofill-background, #faffbc) inset;color:var(--tct-input-autofill-font-color, var(--t-text, inherit));-webkit-text-fill-color:var(--tct-input-autofill-font-color, var(--t-text, inherit))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);overflow-y:hidden;height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:var(--tct-input-padding, 0);background:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));display:inline-block;text-align:var(--tct-input-align, \"start\");font-weight:var(--tct-input-font-weight, var(--t-input-font-weight, 400));letter-spacing:var(--tct-input-letter-spacing, var(--t-input-letter-spacing, inherit));}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-field::-ms-reveal,.input-field::-ms-clear{display:none}.input-field[type=search]::-webkit-search-decoration,.input-field[type=search]::-webkit-search-cancel-button,.input-field[type=search]::-webkit-search-results-button,.input-field[type=search]::-webkit-search-results-decoration{display:none}.input-field[disabled]:not([disabled=false]){cursor:not-allowed}.right-aligned .input-field{text-align:right}.input-field:is(input){flex:1}.input-field:is(button){display:inline-flex;align-items:center}.has-custom-display .input-field:is(button){height:auto;padding:0}.input-field:is(button) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.custom-display-container{max-width:100%}.has-custom-display .custom-display-container{--comp-default-padding:var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)));width:100%}.input-field::placeholder,.placeholder-text{color:var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))))}.pseudo-input-container{min-width:0;flex:1}.input-icons-container-left,.input-icons-container-right{--tct-btn-icon-hover-background:var(--tct-input-btn-hover-background);--tct-btn-hover-background:var(--tct-input-btn-hover-background);display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap)}.input-icons-container-left>div:not(.vertical-separator),.input-icons-container-right>div:not(.vertical-separator){min-width:var(--tct-input-icon-container-icon-min-width, 44px);display:flex;justify-content:center;align-items:center;font-size:var(--tct-input-icon-container-font-size, inherit)}.input-icons-container-left:empty,.input-icons-container-right:empty{display:var(--tct-input-icon-container-empty-display, block)}.input-icons-container-left{padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right{padding-right:var(--comp-input-horizontal-gap);--comp-visibility-toggle-padding:0px var(--app-scale-2x, 10px)}.input-icons-container-right .btn-visibility-toggle{--tct-btn-height:var(--comp-input-min-height);--tct-btn-padding-inline:var(--tct-input-visibility-toggle-padding, var(--app-scale-2x, 10px));--tct-btn-font-weight:var(--tct-input-visibility-toggle-font-weight, 400);color:var(--tct-input-visibility-toggle-font-color, var(--t-primary, #0079c1));font-size:var(--tct-input-visibility-toggle-font-size, var(--app-font-size-small, 12px))}q2-icon{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);height:var(--tct-input-height, var(--t-input-height, 44px));font-size:var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));font-weight:var(--tct-input-prefix-font-weight, 400);color:var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));background:var(--tct-input-prefix-background, var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))))));transition:color var(--comp-input-tween), background var(--comp-input-tween)}.input-prefix{border-top-left-radius:calc(\n var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n );border-bottom-left-radius:calc(\n var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n );pointer-events:none;}.input-suffix{border-top-right-radius:calc(\n var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n );border-bottom-right-radius:calc(\n var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n )}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));box-shadow:var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));transition:height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:var(--tct-input-messages-margin-top, 2px);z-index:var(--tct-input-messages-z-index, 5);position:absolute;width:100%;color:var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));border-radius:var(--tct-message-border-radius, --app-border-radius-1, inherit)}.has-error label{color:var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));background:var(--tct-input-error-prefix-background, var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))))))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right-width:var(--tct-input-prefix-border-width, 1px);border-right-style:solid;border-right-color:var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)))))}";
|
|
3833
3833
|
|
|
3834
3834
|
const inputTypeMap = {
|
|
3835
3835
|
text: 'text',
|
|
@@ -3860,6 +3860,7 @@ const Q2Input = class {
|
|
|
3860
3860
|
this.invalid = index.createEvent(this, "invalid", 7);
|
|
3861
3861
|
// #region Own Properties
|
|
3862
3862
|
this.guid = index$1.createGuid();
|
|
3863
|
+
this.isClickEvent = false;
|
|
3863
3864
|
this.isMobile = index$1.isMobile();
|
|
3864
3865
|
this.scheduledAfterRender = [];
|
|
3865
3866
|
// #endregion
|
|
@@ -3897,7 +3898,7 @@ const Q2Input = class {
|
|
|
3897
3898
|
* This is used to prevent other logic from running when text is deleted
|
|
3898
3899
|
*/
|
|
3899
3900
|
this.handleCurrencyKeydown = (event) => {
|
|
3900
|
-
if (
|
|
3901
|
+
if (!['Backspace', 'Delete'].includes(event.key))
|
|
3901
3902
|
return;
|
|
3902
3903
|
const inputElement = this.inputField;
|
|
3903
3904
|
this.textSelectedForDeletion = inputElement.selectionStart !== inputElement.selectionEnd;
|
|
@@ -3946,9 +3947,15 @@ const Q2Input = class {
|
|
|
3946
3947
|
};
|
|
3947
3948
|
this.onInputFocus = () => {
|
|
3948
3949
|
if (this.inputField.tagName === 'INPUT') {
|
|
3949
|
-
this.scheduledAfterRender.push(() =>
|
|
3950
|
-
|
|
3951
|
-
|
|
3950
|
+
this.scheduledAfterRender.push(() => {
|
|
3951
|
+
if (this.isClickEvent && this.shouldCursorStartAtEnd) {
|
|
3952
|
+
this.placeCursorAtEnd();
|
|
3953
|
+
}
|
|
3954
|
+
else {
|
|
3955
|
+
this.setCursorPosition(this.calculateCursorPositionOnFocus());
|
|
3956
|
+
}
|
|
3957
|
+
this.isClickEvent = false;
|
|
3958
|
+
});
|
|
3952
3959
|
}
|
|
3953
3960
|
this.hasFocus = true;
|
|
3954
3961
|
index$1.setMessageHeight(this);
|
|
@@ -3974,6 +3981,9 @@ const Q2Input = class {
|
|
|
3974
3981
|
this.change.emit(Object.assign({ value: this.formattedValueObject.value, formattedValue: this.formattedValueObject.fullyFormattedValue, minFormattedLength: this.formattedValueObject.minFormattedLength }, (this.formattedValueObject.type && { type: this.formattedValueObject.type })));
|
|
3975
3982
|
}
|
|
3976
3983
|
};
|
|
3984
|
+
this.onInputMousedown = () => {
|
|
3985
|
+
this.isClickEvent = true;
|
|
3986
|
+
};
|
|
3977
3987
|
this.onInputPaste = (event) => {
|
|
3978
3988
|
if (this.type === 'currency') {
|
|
3979
3989
|
const clipboardData = event.clipboardData.getData('text');
|
|
@@ -4371,7 +4381,7 @@ const Q2Input = class {
|
|
|
4371
4381
|
return;
|
|
4372
4382
|
}
|
|
4373
4383
|
// We only care about "Backspace" and "Delete" events
|
|
4374
|
-
if (
|
|
4384
|
+
if (!['deleteContentBackward', 'deleteContentForward'].includes(event.inputType))
|
|
4375
4385
|
return;
|
|
4376
4386
|
const input = event.target;
|
|
4377
4387
|
const cursorPosition = input.selectionStart;
|
|
@@ -4478,11 +4488,11 @@ const Q2Input = class {
|
|
|
4478
4488
|
const { ariaOwns, ariaHaspopup, ariaActivedescendant } = this.ariaAttributes;
|
|
4479
4489
|
if (hasCustomDisplaySlot)
|
|
4480
4490
|
inputClasses.push('sr');
|
|
4481
|
-
return (index.h(index.Fragment, null, hasCustomDisplaySlot && (index.h("div", { class: "custom-display-container" }, index.h("slot", { name: "custom-display" }))), index.h("input", { ref: el => (this.inputRef = el), class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, maxlength: ['date', 'currency'].includes(this.type) ? undefined : this.maxlength || undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-owns": ariaOwns, "aria-haspopup": ariaHaspopup, "aria-activedescendant": ariaActivedescendant, autocomplete: this.computedAutocomplete, autocapitalize: this.autocapitalize, autocorrect: this.autocorrect === 'on' ? 'on' : 'off', autofocus: this.autofocus, placeholder: (this.placeholder && index$1.loc(this.placeholder)) || undefined, "test-id": "inputField", readonly: this.readonly || this._preventEntry, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode, pattern: this.pattern || undefined })));
|
|
4491
|
+
return (index.h(index.Fragment, null, hasCustomDisplaySlot && (index.h("div", { class: "custom-display-container" }, index.h("slot", { name: "custom-display" }))), index.h("input", { ref: el => (this.inputRef = el), class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, maxlength: ['date', 'currency'].includes(this.type) ? undefined : this.maxlength || undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-owns": ariaOwns, "aria-haspopup": ariaHaspopup, "aria-activedescendant": ariaActivedescendant, autocomplete: this.computedAutocomplete, autocapitalize: this.autocapitalize, autocorrect: this.autocorrect === 'on' ? 'on' : 'off', autofocus: this.autofocus, placeholder: (this.placeholder && index$1.loc(this.placeholder)) || undefined, "test-id": "inputField", readonly: this.readonly || this._preventEntry, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onMouseDown: this.onInputMousedown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode, pattern: this.pattern || undefined })));
|
|
4482
4492
|
}
|
|
4483
4493
|
render() {
|
|
4484
4494
|
const { ariaControls, ariaExpanded } = this.ariaAttributes;
|
|
4485
|
-
return (index.h(index.Host, { key: '
|
|
4495
|
+
return (index.h(index.Host, { key: 'ac1668b4b57fe26794243fdac33d3cb9ba74d7c7', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, index.h("div", { key: 'aaa97e165fdda3dfb95326bcdc635e8ad56a791a', class: this.wrapperClasses }, index.h("div", { key: '7c8fe4e94bc2e0b22465b794aaa773ebb53ec83f', class: "label-wrapper" }, index$1.renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), index$1.renderMessages(this))));
|
|
4486
4496
|
}
|
|
4487
4497
|
get hostElement() { return index.getElement(this); }
|
|
4488
4498
|
static get watchers() { return {
|
|
@@ -4503,25 +4513,35 @@ const q2LoadingCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visi
|
|
|
4503
4513
|
const Q2Loading = class {
|
|
4504
4514
|
constructor(hostRef) {
|
|
4505
4515
|
index.registerInstance(this, hostRef);
|
|
4506
|
-
this.
|
|
4507
|
-
|
|
4516
|
+
this.dontUpdateScreenReaderLabel = false;
|
|
4517
|
+
this.liveRegionChangeIndicatorToggle = false;
|
|
4518
|
+
/** Hides the loading element from screen readers. */
|
|
4519
|
+
this.hideFromScreenReaders = false;
|
|
4520
|
+
// #endregion
|
|
4521
|
+
// #region Render Methods
|
|
4522
|
+
this.renderHalfCircleSpinner = () => {
|
|
4523
|
+
return (index.h("div", { class: "q2-loading-animation half-circle-spinner", "aria-hidden": this.hideFromScreenReaders ? 'true' : undefined, "aria-live": !this.hideFromScreenReaders ? 'polite' : undefined, role: !this.hideFromScreenReaders ? 'status' : undefined }, index.h("div", { class: "circle circle-1" }), index.h("div", { class: "circle circle-2" }), !this.hideFromScreenReaders && (index.h("div", { class: "sr", ref: el => (this.screenReaderElement = el) }))));
|
|
4508
4524
|
};
|
|
4509
|
-
this.
|
|
4510
|
-
return (index.h("div", { class: "q2-loading-skeleton", "aria-
|
|
4525
|
+
this.renderSkeletonLoader = () => {
|
|
4526
|
+
return (index.h("div", { class: "q2-loading-skeleton", "aria-hidden": this.hideFromScreenReaders ? 'true' : undefined, "aria-live": !this.hideFromScreenReaders ? 'polite' : undefined, role: !this.hideFromScreenReaders ? 'status' : undefined }, this.shape === 'custom' ? index.h("slot", null) : this.skeletonShape, index.h("div", { class: "q2-loading-skeleton-shimmer" }), !this.hideFromScreenReaders && (index.h("div", { class: "sr", ref: el => (this.screenReaderElement = el) }))));
|
|
4511
4527
|
};
|
|
4512
|
-
this.
|
|
4513
|
-
return this.
|
|
4528
|
+
this.renderSpinner = () => {
|
|
4529
|
+
return this.renderHalfCircleSpinner();
|
|
4514
4530
|
};
|
|
4515
4531
|
}
|
|
4516
4532
|
// #endregion
|
|
4517
4533
|
// #region Component Lifecycle Events
|
|
4534
|
+
disconnectedCallback() {
|
|
4535
|
+
this.cleanupLiveRegionDelay();
|
|
4536
|
+
}
|
|
4518
4537
|
componentWillLoad() {
|
|
4519
4538
|
index$1.handleAriaLabel(this);
|
|
4520
4539
|
}
|
|
4521
|
-
|
|
4522
|
-
|
|
4523
|
-
|
|
4524
|
-
|
|
4540
|
+
componentDidLoad() {
|
|
4541
|
+
this.setupLiveRegionDelay();
|
|
4542
|
+
}
|
|
4543
|
+
componentDidUpdate() {
|
|
4544
|
+
this.updateScreenReaderLabel();
|
|
4525
4545
|
}
|
|
4526
4546
|
// #endregion
|
|
4527
4547
|
// #region Local Methods
|
|
@@ -4531,16 +4551,8 @@ const Q2Loading = class {
|
|
|
4531
4551
|
}
|
|
4532
4552
|
return this.counts.split('x').map(Number);
|
|
4533
4553
|
}
|
|
4534
|
-
get loader() {
|
|
4535
|
-
const loaderMap = {
|
|
4536
|
-
default: this.spinner,
|
|
4537
|
-
spinner: this.spinner,
|
|
4538
|
-
skeleton: this.skeletonLoader,
|
|
4539
|
-
};
|
|
4540
|
-
return loaderMap[this.type] || loaderMap.default;
|
|
4541
|
-
}
|
|
4542
4554
|
get localizedLabel() {
|
|
4543
|
-
return index$1.loc(this.label || 'tecton.element.loading.ariaLabel');
|
|
4555
|
+
return index$1.loc(this.label || this.ariaLabel || 'tecton.element.loading.ariaLabel');
|
|
4544
4556
|
}
|
|
4545
4557
|
get modifiersSet() {
|
|
4546
4558
|
if (this.type !== 'skeleton' || !this.modifiers) {
|
|
@@ -4552,26 +4564,64 @@ const Q2Loading = class {
|
|
|
4552
4564
|
var _a, _b;
|
|
4553
4565
|
return (_b = (_a = shapes.shapes[this.shape]) === null || _a === void 0 ? void 0 : _a.call(shapes.shapes, this.countsArray, this.modifiersSet)) !== null && _b !== void 0 ? _b : '';
|
|
4554
4566
|
}
|
|
4555
|
-
|
|
4556
|
-
|
|
4557
|
-
|
|
4558
|
-
|
|
4567
|
+
cleanupLiveRegionDelay() {
|
|
4568
|
+
if (this.hideFromScreenReaders)
|
|
4569
|
+
return;
|
|
4570
|
+
clearTimeout(this.ariaLiveTimer);
|
|
4571
|
+
this.observer.disconnect();
|
|
4572
|
+
this.observer = null;
|
|
4573
|
+
}
|
|
4574
|
+
setupLiveRegionDelay() {
|
|
4575
|
+
if (this.hideFromScreenReaders)
|
|
4576
|
+
return;
|
|
4577
|
+
// The screen reader element starts out empty and is then populated by the
|
|
4578
|
+
// label text after a delay to ensure that it is announced by screen
|
|
4579
|
+
// readers.
|
|
4580
|
+
const options = {
|
|
4581
|
+
root: null,
|
|
4582
|
+
rootMargin: '0px',
|
|
4583
|
+
threshold: [1],
|
|
4559
4584
|
};
|
|
4560
|
-
|
|
4585
|
+
this.observer = new IntersectionObserver(entries => {
|
|
4586
|
+
entries.forEach(entry => {
|
|
4587
|
+
if (entry.isIntersecting) {
|
|
4588
|
+
clearTimeout(this.ariaLiveTimer);
|
|
4589
|
+
this.ariaLiveTimer = setTimeout(() => {
|
|
4590
|
+
this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;
|
|
4591
|
+
this.liveRegionChangeIndicatorToggle = !this.liveRegionChangeIndicatorToggle;
|
|
4592
|
+
this.dontUpdateScreenReaderLabel = false;
|
|
4593
|
+
}, 2000);
|
|
4594
|
+
}
|
|
4595
|
+
else {
|
|
4596
|
+
clearTimeout(this.ariaLiveTimer);
|
|
4597
|
+
this.screenReaderElement.textContent = '';
|
|
4598
|
+
this.dontUpdateScreenReaderLabel = true;
|
|
4599
|
+
}
|
|
4600
|
+
});
|
|
4601
|
+
}, options);
|
|
4602
|
+
this.observer.observe(this.hostElement);
|
|
4603
|
+
}
|
|
4604
|
+
updateScreenReaderLabel() {
|
|
4605
|
+
if (this.dontUpdateScreenReaderLabel)
|
|
4606
|
+
return;
|
|
4607
|
+
this.screenReaderElement.textContent = this.localizedLabel;
|
|
4608
|
+
}
|
|
4609
|
+
get renderLoader() {
|
|
4610
|
+
const loaderMap = {
|
|
4611
|
+
default: this.renderSpinner,
|
|
4612
|
+
spinner: this.renderSpinner,
|
|
4613
|
+
skeleton: this.renderSkeletonLoader,
|
|
4614
|
+
};
|
|
4615
|
+
return loaderMap[this.type] || loaderMap.default;
|
|
4561
4616
|
}
|
|
4562
|
-
// #endregion
|
|
4563
|
-
// #region Render Methods
|
|
4564
4617
|
render() {
|
|
4565
|
-
return this.
|
|
4618
|
+
return this.renderLoader();
|
|
4566
4619
|
}
|
|
4567
4620
|
get hostElement() { return index.getElement(this); }
|
|
4568
|
-
static get watchers() { return {
|
|
4569
|
-
"ariaLabel": ["ariaLabelObserver"]
|
|
4570
|
-
}; }
|
|
4571
4621
|
};
|
|
4572
4622
|
Q2Loading.style = q2LoadingCss;
|
|
4573
4623
|
|
|
4574
|
-
const q2TabContainerCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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, 0));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
|
|
4624
|
+
const q2TabContainerCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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, 0));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-width:var(--tct-tab-container-border-width, 1px);border-bottom-style:var(--tct-tab-container-border-style, solid);border-bottom-color: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-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:background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs)}: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:var(--tct-tab-section-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:var(--tct-tab-hover-background, 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:var(--tct-tab-active-background, 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-container-content-padding, var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding))));background:var(--tct-tab-container-content-backgrond, none)}.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-background: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}";
|
|
4575
4625
|
|
|
4576
4626
|
const Q2TabContainer = class {
|
|
4577
4627
|
constructor(hostRef) {
|
|
@@ -4580,6 +4630,7 @@ const Q2TabContainer = class {
|
|
|
4580
4630
|
this.settled = index.createEvent(this, "settled", 7);
|
|
4581
4631
|
// #region Own Properties
|
|
4582
4632
|
this.guid = index$1.createGuid();
|
|
4633
|
+
this.hasValidTab = false;
|
|
4583
4634
|
this.lastScrolled = new Date(null).getTime();
|
|
4584
4635
|
this.scheduledAfterRender = [];
|
|
4585
4636
|
// #endregion
|
|
@@ -4631,7 +4682,6 @@ const Q2TabContainer = class {
|
|
|
4631
4682
|
left,
|
|
4632
4683
|
behavior: 'smooth',
|
|
4633
4684
|
});
|
|
4634
|
-
return focusedTab;
|
|
4635
4685
|
};
|
|
4636
4686
|
this.onScrollBtnClick = (direction) => {
|
|
4637
4687
|
const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
|
|
@@ -4694,10 +4744,6 @@ const Q2TabContainer = class {
|
|
|
4694
4744
|
badgeStatus,
|
|
4695
4745
|
}));
|
|
4696
4746
|
};
|
|
4697
|
-
this.updateTabData = () => {
|
|
4698
|
-
this.updateTabPaneProps();
|
|
4699
|
-
this.setTabs();
|
|
4700
|
-
};
|
|
4701
4747
|
this.updateTabPaneProps = () => {
|
|
4702
4748
|
this.tabPanes.forEach((tab, index) => {
|
|
4703
4749
|
tab.selected = tab.value === this.selectedTabValue;
|
|
@@ -4705,6 +4751,17 @@ const Q2TabContainer = class {
|
|
|
4705
4751
|
tab.index = index;
|
|
4706
4752
|
});
|
|
4707
4753
|
};
|
|
4754
|
+
this.updateTabs = () => {
|
|
4755
|
+
const validTabPreUpdate = this.hasValidTab;
|
|
4756
|
+
this.updateTabPaneProps();
|
|
4757
|
+
this.setTabs();
|
|
4758
|
+
// Check if we now have a valid tab
|
|
4759
|
+
this.hasValidTab = this.tabs.some(tab => tab.value === this.value);
|
|
4760
|
+
// Only move if we didn't have a valid tab before but do now
|
|
4761
|
+
if (!validTabPreUpdate && this.hasValidTab) {
|
|
4762
|
+
this.scheduledAfterRender.push(() => this.determineTabMove());
|
|
4763
|
+
}
|
|
4764
|
+
};
|
|
4708
4765
|
}
|
|
4709
4766
|
// #endregion
|
|
4710
4767
|
// #region Component Lifecycle Events
|
|
@@ -4716,25 +4773,18 @@ const Q2TabContainer = class {
|
|
|
4716
4773
|
this.mutationObserver = null;
|
|
4717
4774
|
}
|
|
4718
4775
|
componentWillLoad() {
|
|
4719
|
-
const observer = new MutationObserver(this.
|
|
4776
|
+
const observer = new MutationObserver(() => this.updateTabs());
|
|
4720
4777
|
observer.observe(this.hostElement, { childList: true, attributes: true });
|
|
4721
4778
|
this.mutationObserver = observer;
|
|
4722
4779
|
this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
|
|
4723
|
-
this.
|
|
4780
|
+
this.updateTabs();
|
|
4724
4781
|
}
|
|
4725
4782
|
componentDidLoad() {
|
|
4726
4783
|
var _a;
|
|
4727
4784
|
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.listElement);
|
|
4728
4785
|
this.checkScrollState();
|
|
4729
4786
|
index$1.overrideFocus(this.hostElement);
|
|
4730
|
-
|
|
4731
|
-
this.scheduledAfterRender.push(() => {
|
|
4732
|
-
const hasTabs = this.tabs.length > 0;
|
|
4733
|
-
if (!hasTabs)
|
|
4734
|
-
return;
|
|
4735
|
-
const tab = this.moveToTab(Math.max(index, 0), false);
|
|
4736
|
-
this.value = tab.dataset.value;
|
|
4737
|
-
});
|
|
4787
|
+
this.scheduledAfterRender.push(() => this.determineTabMove());
|
|
4738
4788
|
}
|
|
4739
4789
|
componentDidRender() {
|
|
4740
4790
|
this.scheduledAfterRender.forEach(fn => fn());
|
|
@@ -4774,10 +4824,10 @@ const Q2TabContainer = class {
|
|
|
4774
4824
|
// #endregion
|
|
4775
4825
|
// #region Watchers
|
|
4776
4826
|
nameObserver() {
|
|
4777
|
-
this.
|
|
4827
|
+
this.updateTabs();
|
|
4778
4828
|
}
|
|
4779
4829
|
valueObserver() {
|
|
4780
|
-
this.
|
|
4830
|
+
this.updateTabs();
|
|
4781
4831
|
this.scheduledAfterRender.push(this.resizeIframe);
|
|
4782
4832
|
const index = this.tabs.findIndex(el => el.value === this.value);
|
|
4783
4833
|
if (index > -1) {
|
|
@@ -4787,7 +4837,7 @@ const Q2TabContainer = class {
|
|
|
4787
4837
|
// #endregion
|
|
4788
4838
|
// #region Local Methods
|
|
4789
4839
|
get selectedTabValue() {
|
|
4790
|
-
return this.value ||
|
|
4840
|
+
return this.value || '';
|
|
4791
4841
|
}
|
|
4792
4842
|
get tabList() {
|
|
4793
4843
|
return this.hostElement.shadowRoot.querySelector('.tab-list');
|
|
@@ -4799,6 +4849,14 @@ const Q2TabContainer = class {
|
|
|
4799
4849
|
}
|
|
4800
4850
|
return Array.from(tabPanes).filter(pane => pane.name === this.name);
|
|
4801
4851
|
}
|
|
4852
|
+
determineTabMove() {
|
|
4853
|
+
if (!this.tabs)
|
|
4854
|
+
return;
|
|
4855
|
+
const index = this.tabs.findIndex(el => el.value === this.value);
|
|
4856
|
+
if (index === -1)
|
|
4857
|
+
return;
|
|
4858
|
+
this.moveToTab(index, false);
|
|
4859
|
+
}
|
|
4802
4860
|
resizeIframe() {
|
|
4803
4861
|
var _a, _b;
|
|
4804
4862
|
return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
@@ -4824,7 +4882,7 @@ const Q2TabContainer = class {
|
|
|
4824
4882
|
return (index.h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, index.h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
|
|
4825
4883
|
}
|
|
4826
4884
|
render() {
|
|
4827
|
-
return (index.h(index.Fragment, { key: '
|
|
4885
|
+
return (index.h(index.Fragment, { key: 'e03b4a6d1d29b5579d29248df2dbdc2a4aed4d2a' }, index.h("div", { key: '12905c68622fea509875e0d40455c910dd3997e4', class: "tab-container" }, this.scrollEnabled && (index.h(index.Fragment, { key: 'e01f6d12a0d4dc0aee7e04e92d0541f58d6e7327' }, index.h("div", { key: '063ee476f8279e96d0678819a49c9f934a287079', class: "gradient-left", hidden: !this.showScrollLeft }), index.h("div", { key: 'eb52c84cb097acceca241e5dd5dbf408b49cf3b1', class: "gradient-right", hidden: !this.showScrollRight }), index.h("q2-btn", { key: '03c59516ae777fc42005feb8db7ecb78de9c7413', class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, index.h("q2-icon", { key: '4d5539587ae4e73fc0003adfc97201e4ea962562', type: "chevron-left", label: "scroll left" })), index.h("q2-btn", { key: '329d9a3fd4d1e3936e9886164386432d6782d2e3', class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, index.h("q2-icon", { key: 'd5863767db36cb92eca86e5347a55c3b5fbced97', type: "chevron-right", label: "scroll right" })))), index.h("ul", { key: 'ebe0f7d4e03987e4b1bdfeff624fe9af18560798', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), index.h("div", { key: 'a621250c6396e18966fc2dfe649d3212d6ffb014', class: "tab-content" }, index.h("slot", { key: 'f552f833e31fffeacdf494abaf3d639da63efbfc', onSlotchange: () => this.onSlotChange() }))));
|
|
4828
4886
|
}
|
|
4829
4887
|
get hostElement() { return index.getElement(this); }
|
|
4830
4888
|
static get watchers() { return {
|