@koobiq/components 20.4.1 → 21.0.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/accordion/accordion-trigger.scss +3 -10
- package/accordion/accordion.scss +4 -6
- package/actions-panel/actions-panel-container.scss +45 -1
- package/alert/alert.component.scss +3 -2
- package/app-switcher/_app-switcher-theme.scss +0 -4
- package/app-switcher/app-switcher-dropdown-app.scss +3 -2
- package/app-switcher/app-switcher-dropdown-site.scss +2 -1
- package/app-switcher/{kbq-app-switcher-list-item.scss → app-switcher-list-item.scss} +18 -4
- package/app-switcher/app-switcher-tokens.scss +15 -0
- package/app-switcher/app-switcher.scss +14 -4
- package/autocomplete/autocomplete.scss +7 -6
- package/badge/badge.component.scss +5 -8
- package/breadcrumbs/breadcrumbs.scss +25 -10
- package/button/_button-base.scss +30 -7
- package/button/_button-theme.scss +16 -0
- package/button/button-group.scss +7 -0
- package/button/button-tokens.scss +0 -2
- package/button/button.scss +34 -2
- package/button-toggle/_button-toggle-theme.scss +7 -2
- package/button-toggle/button-toggle.scss +65 -15
- package/checkbox/_checkbox-theme.scss +4 -3
- package/checkbox/checkbox.scss +3 -6
- package/clamped-text/clamped-text.scss +6 -2
- package/code-block/code-block-tokens.scss +0 -224
- package/code-block/code-block.scss +20 -9
- package/content-panel/content-panel-aside.scss +3 -2
- package/content-panel/content-panel-container.scss +37 -0
- package/content-panel/content-panel.scss +4 -3
- package/core/highlight/_highlight-theme.scss +3 -1
- package/core/option/action-container.scss +2 -2
- package/core/option/action.scss +2 -1
- package/core/option/option.scss +2 -1
- package/core/pop-up/_pop-up.scss +0 -37
- package/core/selection/pseudo-checkbox/pseudo-checkbox.scss +5 -10
- package/core/styles/_core.scss +3 -0
- package/core/styles/_koobiq-theme.scss +5 -6
- package/core/styles/common/_animation.scss +44 -16
- package/core/styles/common/_groups-mixins.scss +21 -19
- package/core/styles/common/_groups.scss +4 -32
- package/core/styles/common/_index.scss +0 -2
- package/core/styles/common/_link.scss +117 -0
- package/core/styles/common/_list.scss +0 -26
- package/core/styles/common/_overlay.scss +8 -10
- package/core/styles/common/_rtl.scss +0 -14
- package/core/styles/common/_select.scss +33 -15
- package/core/styles/common/_squircle.scss +63 -0
- package/core/styles/common/_tokens.scss +0 -11
- package/core/styles/common/_vendor-prefixes.scss +0 -20
- package/core/styles/functions/_timing.scss +0 -22
- package/core/styles/theming/_scrollbar-theme.scss +6 -1
- package/core/styles/theming/_theming.scss +13 -65
- package/core/styles/typography/_index.scss +0 -1
- package/core/styles/typography/_typography.scss +0 -143
- package/core/styles/visual/_body.scss +1 -6
- package/core/styles/visual/_layout.scss +0 -12
- package/datepicker/calendar-body.scss +3 -1
- package/datepicker/calendar-header.scss +0 -1
- package/datepicker/datepicker-content.scss +33 -1
- package/datepicker/datepicker-toggle.scss +0 -38
- package/dl/dl-tokens.scss +10 -0
- package/dl/dl.scss +113 -13
- package/dropdown/_dropdown-theme.scss +4 -16
- package/dropdown/dropdown-item.scss +4 -10
- package/dropdown/dropdown.scss +2 -1
- package/empty-state/_empty-state-theme.scss +10 -4
- package/empty-state/empty-state-tokens.scss +4 -4
- package/empty-state/empty-state.scss +4 -0
- package/fesm2022/koobiq-components-accordion.mjs +347 -229
- package/fesm2022/koobiq-components-accordion.mjs.map +1 -1
- package/fesm2022/koobiq-components-actions-panel.mjs +302 -187
- package/fesm2022/koobiq-components-actions-panel.mjs.map +1 -1
- package/fesm2022/koobiq-components-alert.mjs +39 -39
- package/fesm2022/koobiq-components-alert.mjs.map +1 -1
- package/fesm2022/koobiq-components-app-switcher.mjs +677 -367
- package/fesm2022/koobiq-components-app-switcher.mjs.map +1 -1
- package/fesm2022/koobiq-components-autocomplete.mjs +620 -253
- package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
- package/fesm2022/koobiq-components-badge.mjs +46 -48
- package/fesm2022/koobiq-components-badge.mjs.map +1 -1
- package/fesm2022/koobiq-components-breadcrumbs.mjs +221 -169
- package/fesm2022/koobiq-components-breadcrumbs.mjs.map +1 -1
- package/fesm2022/koobiq-components-button-toggle.mjs +565 -196
- package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-button.mjs +332 -116
- package/fesm2022/koobiq-components-button.mjs.map +1 -1
- package/fesm2022/koobiq-components-checkbox.mjs +172 -132
- package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
- package/fesm2022/koobiq-components-clamped-text.mjs +165 -158
- package/fesm2022/koobiq-components-clamped-text.mjs.map +1 -1
- package/fesm2022/koobiq-components-code-block.mjs +755 -601
- package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
- package/fesm2022/koobiq-components-content-panel.mjs +260 -143
- package/fesm2022/koobiq-components-content-panel.mjs.map +1 -1
- package/fesm2022/koobiq-components-core.mjs +4342 -1595
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/fesm2022/koobiq-components-datepicker.mjs +1713 -1606
- package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-divider.mjs +73 -36
- package/fesm2022/koobiq-components-divider.mjs.map +1 -1
- package/fesm2022/koobiq-components-dl.mjs +447 -89
- package/fesm2022/koobiq-components-dl.mjs.map +1 -1
- package/fesm2022/koobiq-components-dropdown.mjs +703 -599
- package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-dynamic-translation.mjs +20 -20
- package/fesm2022/koobiq-components-dynamic-translation.mjs.map +1 -1
- package/fesm2022/koobiq-components-ellipsis-center.mjs +46 -31
- package/fesm2022/koobiq-components-ellipsis-center.mjs.map +1 -1
- package/fesm2022/koobiq-components-empty-state.mjs +116 -60
- package/fesm2022/koobiq-components-empty-state.mjs.map +1 -1
- package/fesm2022/koobiq-components-file-upload.mjs +550 -290
- package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
- package/fesm2022/koobiq-components-filter-bar.mjs +2810 -2538
- package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-flag.mjs +79 -24
- package/fesm2022/koobiq-components-flag.mjs.map +1 -1
- package/fesm2022/koobiq-components-form-field.mjs +389 -525
- package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
- package/fesm2022/koobiq-components-icon.mjs +366 -136
- package/fesm2022/koobiq-components-icon.mjs.map +1 -1
- package/fesm2022/koobiq-components-inline-edit.mjs +429 -212
- package/fesm2022/koobiq-components-inline-edit.mjs.map +1 -1
- package/fesm2022/koobiq-components-input.mjs +601 -459
- package/fesm2022/koobiq-components-input.mjs.map +1 -1
- package/fesm2022/koobiq-components-link-deprecated.mjs +196 -0
- package/fesm2022/koobiq-components-link-deprecated.mjs.map +1 -0
- package/fesm2022/koobiq-components-link.mjs +328 -125
- package/fesm2022/koobiq-components-link.mjs.map +1 -1
- package/fesm2022/koobiq-components-list.mjs +583 -433
- package/fesm2022/koobiq-components-list.mjs.map +1 -1
- package/fesm2022/koobiq-components-loader-overlay.mjs +167 -68
- package/fesm2022/koobiq-components-loader-overlay.mjs.map +1 -1
- package/fesm2022/koobiq-components-markdown.mjs +55 -78
- package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-modal.mjs +853 -475
- package/fesm2022/koobiq-components-modal.mjs.map +1 -1
- package/fesm2022/koobiq-components-navbar.mjs +895 -556
- package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-notification-center.mjs +680 -310
- package/fesm2022/koobiq-components-notification-center.mjs.map +1 -1
- package/fesm2022/koobiq-components-overflow-items.mjs +46 -64
- package/fesm2022/koobiq-components-overflow-items.mjs.map +1 -1
- package/fesm2022/koobiq-components-popover.mjs +684 -285
- package/fesm2022/koobiq-components-popover.mjs.map +1 -1
- package/fesm2022/koobiq-components-progress-bar.mjs +87 -33
- package/fesm2022/koobiq-components-progress-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-progress-spinner.mjs +52 -43
- package/fesm2022/koobiq-components-progress-spinner.mjs.map +1 -1
- package/fesm2022/koobiq-components-radio.mjs +450 -231
- package/fesm2022/koobiq-components-radio.mjs.map +1 -1
- package/fesm2022/koobiq-components-resizer.mjs +127 -21
- package/fesm2022/koobiq-components-resizer.mjs.map +1 -1
- package/fesm2022/koobiq-components-scrollbar-deprecated.mjs +299 -0
- package/fesm2022/koobiq-components-scrollbar-deprecated.mjs.map +1 -0
- package/fesm2022/koobiq-components-scrollbar.mjs +745 -222
- package/fesm2022/koobiq-components-scrollbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-search-expandable.mjs +288 -126
- package/fesm2022/koobiq-components-search-expandable.mjs.map +1 -1
- package/fesm2022/koobiq-components-select.mjs +883 -693
- package/fesm2022/koobiq-components-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-sidebar.mjs +207 -88
- package/fesm2022/koobiq-components-sidebar.mjs.map +1 -1
- package/fesm2022/koobiq-components-sidepanel.mjs +689 -296
- package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
- package/fesm2022/koobiq-components-skeleton.mjs +815 -41
- package/fesm2022/koobiq-components-skeleton.mjs.map +1 -1
- package/fesm2022/koobiq-components-split-button.mjs +109 -88
- package/fesm2022/koobiq-components-split-button.mjs.map +1 -1
- package/fesm2022/koobiq-components-splitter-deprecated.mjs +591 -0
- package/fesm2022/koobiq-components-splitter-deprecated.mjs.map +1 -0
- package/fesm2022/koobiq-components-splitter.mjs +890 -501
- package/fesm2022/koobiq-components-splitter.mjs.map +1 -1
- package/fesm2022/koobiq-components-table.mjs +63 -49
- package/fesm2022/koobiq-components-table.mjs.map +1 -1
- package/fesm2022/koobiq-components-tabs.mjs +1062 -603
- package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
- package/fesm2022/koobiq-components-tags.mjs +886 -733
- package/fesm2022/koobiq-components-tags.mjs.map +1 -1
- package/fesm2022/koobiq-components-textarea.mjs +213 -185
- package/fesm2022/koobiq-components-textarea.mjs.map +1 -1
- package/fesm2022/koobiq-components-time-range.mjs +299 -147
- package/fesm2022/koobiq-components-time-range.mjs.map +1 -1
- package/fesm2022/koobiq-components-timepicker.mjs +233 -245
- package/fesm2022/koobiq-components-timepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-timezone.mjs +344 -142
- package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
- package/fesm2022/koobiq-components-title.mjs +229 -145
- package/fesm2022/koobiq-components-title.mjs.map +1 -1
- package/fesm2022/koobiq-components-toast.mjs +486 -165
- package/fesm2022/koobiq-components-toast.mjs.map +1 -1
- package/fesm2022/koobiq-components-toggle.mjs +177 -130
- package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-tooltip.mjs +657 -214
- package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
- package/fesm2022/koobiq-components-top-bar.mjs +61 -32
- package/fesm2022/koobiq-components-top-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree-select.mjs +719 -488
- package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree.mjs +1506 -558
- package/fesm2022/koobiq-components-tree.mjs.map +1 -1
- package/fesm2022/koobiq-components-username.mjs +290 -135
- package/fesm2022/koobiq-components-username.mjs.map +1 -1
- package/file-upload/dropzone.scss +31 -3
- package/file-upload/file-upload-tokens.scss +2 -22
- package/file-upload/file-upload.scss +6 -0
- package/file-upload/multiple-file-upload.component.scss +14 -12
- package/file-upload/single-file-upload.component.scss +3 -2
- package/filter-bar/filters.scss +7 -0
- package/filter-bar/pipes/base-pipe.scss +3 -3
- package/filter-bar/pipes/pipe-date.scss +8 -1
- package/flag/flag-tokens.scss +22 -0
- package/flag/flag.scss +34 -21
- package/form-field/{_fiedset-theme.scss → _fieldset-theme.scss} +1 -5
- package/form-field/_form-field-theme.scss +4 -9
- package/form-field/cleaner.scss +3 -1
- package/form-field/fieldset.scss +3 -4
- package/form-field/form-field.scss +26 -21
- package/form-field/password-toggle.scss +3 -1
- package/icon/_icon-button-theme.scss +7 -0
- package/icon/_icon-theme.scss +10 -7
- package/icon/icon-button.scss +0 -2
- package/icon/icon-tokens.scss +12 -9
- package/inline-edit/inline-edit.scss +40 -54
- package/input/input.scss +4 -0
- package/link/{_link-theme.scss → deprecated/_link-theme.scss} +11 -6
- package/link/deprecated/link-tokens.scss +27 -0
- package/link/link-tokens.scss +6 -25
- package/link/link.scss +137 -0
- package/list/list.scss +3 -2
- package/loader-overlay/_loader-overlay-theme.scss +19 -10
- package/loader-overlay/loader-overlay-tokens.scss +0 -2
- package/loader-overlay/loader-overlay.scss +7 -1
- package/markdown/_markdown-theme.scss +16 -0
- package/markdown/markdown-tokens.scss +5 -0
- package/markdown/markdown.scss +2 -1
- package/modal/_modal-animation.scss +23 -14
- package/modal/modal-tokens.scss +2 -1
- package/modal/modal.scss +35 -31
- package/navbar/_navbar-item_horizontal.scss +8 -6
- package/navbar/_navbar-item_vertical.scss +18 -6
- package/navbar/_navbar-theme.scss +9 -1
- package/navbar/navbar-brand.scss +8 -6
- package/navbar/navbar-divider.scss +1 -1
- package/navbar/navbar-item.scss +8 -9
- package/navbar/navbar-toggle.scss +3 -3
- package/navbar/navbar-tokens.scss +14 -0
- package/navbar/navbar.scss +1 -2
- package/navbar/vertical-navbar.scss +2 -2
- package/notification-center/_notification-center-theme.scss +11 -6
- package/notification-center/notification-center-tokens.scss +33 -0
- package/notification-center/notification-center.scss +58 -20
- package/notification-center/notification-item.scss +15 -6
- package/package.json +112 -81
- package/popover/popover-tokens.scss +0 -2
- package/popover/popover.scss +41 -19
- package/prebuilt-themes/theme.css +1 -1
- package/progress-bar/_progress-bar-theme.scss +20 -3
- package/progress-bar/progress-bar-tokens.scss +3 -0
- package/progress-bar/progress-bar.scss +36 -8
- package/progress-spinner/progress-spinner.scss +4 -3
- package/radio/_radio-theme.scss +21 -4
- package/radio/radio-tokens.scss +7 -3
- package/radio/radio.scss +55 -8
- package/schematics/collection.json +399 -7
- package/schematics/migrations/accordion-state-saving-default/README.md +60 -0
- package/schematics/migrations/accordion-state-saving-default/data.js +75 -0
- package/schematics/migrations/accordion-state-saving-default/index.js +60 -0
- package/schematics/migrations/accordion-state-saving-default/schema.json +15 -0
- package/schematics/migrations/actions-panel-overlay-container/README.md +35 -0
- package/schematics/migrations/actions-panel-overlay-container/data.js +47 -0
- package/schematics/migrations/actions-panel-overlay-container/index.js +54 -0
- package/schematics/migrations/actions-panel-overlay-container/schema.json +15 -0
- package/schematics/migrations/alert-signals/README.md +13 -7
- package/schematics/migrations/alert-signals/data.js +3 -0
- package/schematics/migrations/alert-signals/index.js +70 -203
- package/schematics/migrations/angular-animations-removal/README.md +46 -0
- package/schematics/migrations/angular-animations-removal/data.js +150 -0
- package/schematics/migrations/angular-animations-removal/index.js +20 -0
- package/schematics/migrations/angular-animations-removal/schema.json +15 -0
- package/schematics/migrations/app-switcher-signals/README.md +88 -0
- package/schematics/migrations/app-switcher-signals/data.js +136 -0
- package/schematics/migrations/app-switcher-signals/index.js +365 -0
- package/schematics/migrations/app-switcher-signals/schema.json +20 -0
- package/schematics/migrations/autocomplete-panel-width-auto/README.md +2 -2
- package/schematics/migrations/autocomplete-panel-width-auto/index.js +1 -1
- package/schematics/migrations/autocomplete-signals/README.md +92 -0
- package/schematics/migrations/autocomplete-signals/data.js +149 -0
- package/schematics/migrations/autocomplete-signals/index.js +706 -0
- package/schematics/migrations/autocomplete-signals/schema.json +20 -0
- package/schematics/migrations/badge-signals/README.md +77 -0
- package/schematics/migrations/badge-signals/data.js +109 -0
- package/schematics/migrations/badge-signals/index.js +693 -0
- package/schematics/migrations/badge-signals/schema.json +20 -0
- package/schematics/migrations/button-state-and-styles/README.md +129 -0
- package/schematics/migrations/button-state-and-styles/data.js +136 -0
- package/schematics/migrations/button-state-and-styles/index.js +220 -0
- package/schematics/migrations/button-state-and-styles/schema.json +20 -0
- package/schematics/migrations/button-supported-colors/README.md +73 -0
- package/schematics/migrations/button-supported-colors/data.js +106 -0
- package/schematics/migrations/button-supported-colors/index.js +260 -0
- package/schematics/migrations/button-supported-colors/schema.json +20 -0
- package/schematics/migrations/button-toggle-signals-and-aria/README.md +137 -0
- package/schematics/migrations/button-toggle-signals-and-aria/data.js +200 -0
- package/schematics/migrations/button-toggle-signals-and-aria/index.js +496 -0
- package/schematics/migrations/button-toggle-signals-and-aria/schema.json +20 -0
- package/schematics/migrations/button-truncation/README.md +110 -0
- package/schematics/migrations/button-truncation/data.js +88 -0
- package/schematics/migrations/button-truncation/index.js +269 -0
- package/schematics/migrations/button-truncation/schema.json +20 -0
- package/schematics/migrations/checkbox-signals/README.md +76 -0
- package/schematics/migrations/checkbox-signals/data.js +114 -0
- package/schematics/migrations/checkbox-signals/index.js +634 -0
- package/schematics/migrations/checkbox-signals/schema.json +20 -0
- package/schematics/migrations/clamped-text-disclosure/README.md +62 -0
- package/schematics/migrations/clamped-text-disclosure/data.js +101 -0
- package/schematics/migrations/clamped-text-disclosure/index.js +59 -0
- package/schematics/migrations/clamped-text-disclosure/schema.json +15 -0
- package/schematics/migrations/code-block-signals/README.md +84 -0
- package/schematics/migrations/code-block-signals/data.js +121 -0
- package/schematics/migrations/code-block-signals/index.js +700 -0
- package/schematics/migrations/code-block-signals/schema.json +20 -0
- package/schematics/migrations/color-signals/README.md +46 -0
- package/schematics/migrations/color-signals/data.js +131 -0
- package/schematics/migrations/color-signals/index.js +19 -0
- package/schematics/migrations/color-signals/schema.json +20 -0
- package/schematics/migrations/core-mixins-removal/README.md +20 -0
- package/schematics/migrations/core-mixins-removal/data.js +27 -0
- package/schematics/migrations/core-mixins-removal/index.js +17 -0
- package/schematics/migrations/core-mixins-removal/schema.json +15 -0
- package/schematics/migrations/css-selectors/README.md +2 -2
- package/schematics/migrations/css-selectors/index.js +1 -1
- package/schematics/migrations/datepicker-signals/README.md +24 -0
- package/schematics/migrations/datepicker-signals/data.js +49 -0
- package/schematics/migrations/datepicker-signals/index.js +17 -0
- package/schematics/migrations/datepicker-signals/schema.json +15 -0
- package/schematics/migrations/deprecated-icons/README.md +2 -2
- package/schematics/migrations/deprecated-icons/index.js +1 -1
- package/schematics/migrations/design-tokens-v4/README.md +75 -0
- package/schematics/migrations/design-tokens-v4/index.js +59 -0
- package/schematics/migrations/design-tokens-v4/schema.json +15 -0
- package/schematics/migrations/divider-signals-and-aria/README.md +47 -0
- package/schematics/migrations/divider-signals-and-aria/data.js +62 -0
- package/schematics/migrations/divider-signals-and-aria/index.js +211 -0
- package/schematics/migrations/divider-signals-and-aria/schema.json +15 -0
- package/schematics/migrations/dl-attribute-coercion/README.md +59 -0
- package/schematics/migrations/dl-attribute-coercion/data.js +85 -0
- package/schematics/migrations/dl-attribute-coercion/index.js +161 -0
- package/schematics/migrations/dl-attribute-coercion/schema.json +15 -0
- package/schematics/migrations/dl-standalone-names/README.md +49 -0
- package/schematics/migrations/dl-standalone-names/data.js +44 -0
- package/schematics/migrations/dl-standalone-names/index.js +321 -0
- package/schematics/migrations/dl-standalone-names/schema.json +20 -0
- package/schematics/migrations/dropdown-demote-overlay/README.md +137 -0
- package/schematics/migrations/dropdown-demote-overlay/data.js +84 -0
- package/schematics/migrations/dropdown-demote-overlay/index.js +288 -0
- package/schematics/migrations/dropdown-demote-overlay/schema.json +20 -0
- package/schematics/migrations/dropdown-signals/README.md +83 -0
- package/schematics/migrations/dropdown-signals/data.js +152 -0
- package/schematics/migrations/dropdown-signals/index.js +19 -0
- package/schematics/migrations/dropdown-signals/schema.json +20 -0
- package/schematics/migrations/empty-state-error-color/README.md +84 -0
- package/schematics/migrations/empty-state-error-color/data.js +85 -0
- package/schematics/migrations/empty-state-error-color/index.js +71 -0
- package/schematics/migrations/empty-state-error-color/schema.json +15 -0
- package/schematics/migrations/empty-state-size-attr/README.md +2 -2
- package/schematics/migrations/empty-state-size-attr/index.js +1 -1
- package/schematics/migrations/file-upload-cva-and-primitives/README.md +70 -0
- package/schematics/migrations/file-upload-cva-and-primitives/data.js +97 -0
- package/schematics/migrations/file-upload-cva-and-primitives/index.js +60 -0
- package/schematics/migrations/file-upload-cva-and-primitives/schema.json +15 -0
- package/schematics/migrations/file-upload-deprecated-outputs/README.md +90 -0
- package/schematics/migrations/file-upload-deprecated-outputs/data.js +20 -0
- package/schematics/migrations/file-upload-deprecated-outputs/index.js +70 -0
- package/schematics/migrations/file-upload-deprecated-outputs/schema.json +20 -0
- package/schematics/migrations/filter-bar-rename-action/README.md +183 -0
- package/schematics/migrations/filter-bar-rename-action/data.js +151 -0
- package/schematics/migrations/filter-bar-rename-action/index.js +177 -0
- package/schematics/migrations/filter-bar-rename-action/schema.json +20 -0
- package/schematics/migrations/filter-bar-signals/README.md +27 -16
- package/schematics/migrations/filter-bar-signals/data.js +1 -2
- package/schematics/migrations/filter-bar-signals/index.js +100 -195
- package/schematics/migrations/filter-bar-state-saving-default/README.md +53 -0
- package/schematics/migrations/filter-bar-state-saving-default/data.js +87 -0
- package/schematics/migrations/filter-bar-state-saving-default/index.js +61 -0
- package/schematics/migrations/filter-bar-state-saving-default/schema.json +15 -0
- package/schematics/migrations/flag-inner-html/README.md +67 -0
- package/schematics/migrations/flag-inner-html/data.js +58 -0
- package/schematics/migrations/flag-inner-html/index.js +61 -0
- package/schematics/migrations/flag-inner-html/schema.json +15 -0
- package/schematics/migrations/form-field-signals/README.md +125 -0
- package/schematics/migrations/form-field-signals/data.js +288 -0
- package/schematics/migrations/form-field-signals/index.js +382 -0
- package/schematics/migrations/form-field-signals/schema.json +20 -0
- package/schematics/migrations/icon-semantics-and-api/README.md +65 -0
- package/schematics/migrations/icon-semantics-and-api/data.js +97 -0
- package/schematics/migrations/icon-semantics-and-api/index.js +64 -0
- package/schematics/migrations/icon-semantics-and-api/schema.json +15 -0
- package/schematics/migrations/icons-replacement/README.md +5 -5
- package/schematics/migrations/icons-replacement/index.js +1 -1
- package/schematics/migrations/inline-edit-a11y-and-types/README.md +82 -0
- package/schematics/migrations/inline-edit-a11y-and-types/data.js +117 -0
- package/schematics/migrations/inline-edit-a11y-and-types/index.js +97 -0
- package/schematics/migrations/inline-edit-a11y-and-types/schema.json +20 -0
- package/schematics/migrations/input-number-surface/README.md +140 -0
- package/schematics/migrations/input-number-surface/data.js +135 -0
- package/schematics/migrations/input-number-surface/index.js +292 -0
- package/schematics/migrations/input-number-surface/schema.json +20 -0
- package/schematics/migrations/input-signals/README.md +20 -0
- package/schematics/migrations/input-signals/data.js +30 -0
- package/schematics/migrations/input-signals/index.js +17 -0
- package/schematics/migrations/input-signals/schema.json +15 -0
- package/schematics/migrations/link-deprecated-path/README.md +144 -0
- package/schematics/migrations/link-deprecated-path/index.js +19 -0
- package/schematics/migrations/link-deprecated-path/schema.json +20 -0
- package/schematics/migrations/link-signals/README.md +71 -0
- package/schematics/migrations/link-signals/data.js +116 -0
- package/schematics/migrations/link-signals/index.js +415 -0
- package/schematics/migrations/link-signals/schema.json +20 -0
- package/schematics/migrations/list-signals/README.md +22 -0
- package/schematics/migrations/list-signals/data.js +35 -0
- package/schematics/migrations/list-signals/index.js +17 -0
- package/schematics/migrations/list-signals/schema.json +15 -0
- package/schematics/migrations/list-tree-multiple-input/README.md +105 -0
- package/schematics/migrations/list-tree-multiple-input/data.js +74 -0
- package/schematics/migrations/list-tree-multiple-input/index.js +221 -0
- package/schematics/migrations/list-tree-multiple-input/schema.json +20 -0
- package/schematics/migrations/loader-overlay-signals/README.md +62 -0
- package/schematics/migrations/loader-overlay-signals/data.js +101 -0
- package/schematics/migrations/loader-overlay-signals/index.js +697 -0
- package/schematics/migrations/loader-overlay-signals/schema.json +20 -0
- package/schematics/migrations/loader-overlay-size-attr/README.md +2 -2
- package/schematics/migrations/loader-overlay-size-attr/index.js +1 -1
- package/schematics/migrations/locale-configuration-providers/README.md +163 -0
- package/schematics/migrations/locale-configuration-providers/data.js +257 -0
- package/schematics/migrations/locale-configuration-providers/index.js +294 -0
- package/schematics/migrations/locale-configuration-providers/schema.json +20 -0
- package/schematics/migrations/mandatory-peer-dependencies/README.md +70 -0
- package/schematics/migrations/mandatory-peer-dependencies/index.js +42 -0
- package/schematics/migrations/mandatory-peer-dependencies/schema.json +15 -0
- package/schematics/migrations/markdown-signals/README.md +58 -0
- package/schematics/migrations/markdown-signals/data.js +79 -0
- package/schematics/migrations/markdown-signals/index.js +639 -0
- package/schematics/migrations/markdown-signals/schema.json +20 -0
- package/schematics/migrations/modal-dialog-semantics/README.md +106 -0
- package/schematics/migrations/modal-dialog-semantics/data.js +110 -0
- package/schematics/migrations/modal-dialog-semantics/index.js +58 -0
- package/schematics/migrations/modal-dialog-semantics/schema.json +15 -0
- package/schematics/migrations/modal-signals/README.md +88 -0
- package/schematics/migrations/modal-signals/data.js +132 -0
- package/schematics/migrations/modal-signals/index.js +19 -0
- package/schematics/migrations/modal-signals/schema.json +20 -0
- package/schematics/migrations/navbar-signals-and-aria/README.md +111 -0
- package/schematics/migrations/navbar-signals-and-aria/data.js +198 -0
- package/schematics/migrations/navbar-signals-and-aria/index.js +568 -0
- package/schematics/migrations/navbar-signals-and-aria/schema.json +20 -0
- package/schematics/migrations/new-icons-pack/README.md +10 -10
- package/schematics/migrations/new-icons-pack/index.js +1 -1
- package/schematics/migrations/notification-center-signals/README.md +67 -0
- package/schematics/migrations/notification-center-signals/data.js +66 -0
- package/schematics/migrations/notification-center-signals/index.js +61 -0
- package/schematics/migrations/notification-center-signals/schema.json +15 -0
- package/schematics/migrations/option-signals/README.md +37 -0
- package/schematics/migrations/option-signals/data.js +86 -0
- package/schematics/migrations/option-signals/index.js +19 -0
- package/schematics/migrations/option-signals/schema.json +20 -0
- package/schematics/migrations/popover-leave-delay/README.md +51 -0
- package/schematics/migrations/popover-leave-delay/data.js +61 -0
- package/schematics/migrations/popover-leave-delay/index.js +54 -0
- package/schematics/migrations/popover-leave-delay/schema.json +15 -0
- package/schematics/migrations/progress-bar-percentage-and-aria/README.md +54 -0
- package/schematics/migrations/progress-bar-percentage-and-aria/data.js +76 -0
- package/schematics/migrations/progress-bar-percentage-and-aria/index.js +58 -0
- package/schematics/migrations/progress-bar-percentage-and-aria/schema.json +15 -0
- package/schematics/migrations/progress-spinner-signals/README.md +72 -0
- package/schematics/migrations/progress-spinner-signals/data.js +83 -0
- package/schematics/migrations/progress-spinner-signals/index.js +694 -0
- package/schematics/migrations/progress-spinner-signals/schema.json +20 -0
- package/schematics/migrations/query-list-signals/README.md +32 -0
- package/schematics/migrations/query-list-signals/data.js +70 -0
- package/schematics/migrations/query-list-signals/index.js +17 -0
- package/schematics/migrations/query-list-signals/schema.json +15 -0
- package/schematics/migrations/radio-signals-and-aria/README.md +82 -0
- package/schematics/migrations/radio-signals-and-aria/data.js +163 -0
- package/schematics/migrations/radio-signals-and-aria/index.js +39 -0
- package/schematics/migrations/radio-signals-and-aria/schema.json +20 -0
- package/schematics/migrations/read-state-dwell-handlers/README.md +125 -0
- package/schematics/migrations/read-state-dwell-handlers/data.js +45 -0
- package/schematics/migrations/read-state-dwell-handlers/index.js +215 -0
- package/schematics/migrations/read-state-dwell-handlers/schema.json +20 -0
- package/schematics/migrations/scrollbar-deprecated-path/README.md +128 -0
- package/schematics/migrations/scrollbar-deprecated-path/index.js +20 -0
- package/schematics/migrations/scrollbar-deprecated-path/schema.json +20 -0
- package/schematics/migrations/select-signal-inputs/README.md +61 -0
- package/schematics/migrations/select-signal-inputs/data.js +99 -0
- package/schematics/migrations/select-signal-inputs/index.js +57 -0
- package/schematics/migrations/select-signal-inputs/schema.json +15 -0
- package/schematics/migrations/sidepanel-non-modal-behavior/README.md +57 -0
- package/schematics/migrations/sidepanel-non-modal-behavior/data.js +111 -0
- package/schematics/migrations/sidepanel-non-modal-behavior/index.js +57 -0
- package/schematics/migrations/sidepanel-non-modal-behavior/schema.json +15 -0
- package/schematics/migrations/signal-inputs-subclasses/README.md +28 -0
- package/schematics/migrations/signal-inputs-subclasses/data.js +69 -0
- package/schematics/migrations/signal-inputs-subclasses/index.js +17 -0
- package/schematics/migrations/signal-inputs-subclasses/schema.json +15 -0
- package/schematics/migrations/split-button-optional-disabled/README.md +47 -0
- package/schematics/migrations/split-button-optional-disabled/data.js +53 -0
- package/schematics/migrations/split-button-optional-disabled/index.js +57 -0
- package/schematics/migrations/split-button-optional-disabled/schema.json +15 -0
- package/schematics/migrations/splitter-deprecated-path/README.md +136 -0
- package/schematics/migrations/splitter-deprecated-path/index.js +20 -0
- package/schematics/migrations/splitter-deprecated-path/schema.json +20 -0
- package/schematics/migrations/state-saving-default/README.md +67 -0
- package/schematics/migrations/state-saving-default/data.js +88 -0
- package/schematics/migrations/state-saving-default/index.js +62 -0
- package/schematics/migrations/state-saving-default/schema.json +15 -0
- package/schematics/migrations/table-cell-content/README.md +55 -0
- package/schematics/migrations/table-cell-content/data.js +66 -0
- package/schematics/migrations/table-cell-content/index.js +66 -0
- package/schematics/migrations/table-cell-content/schema.json +15 -0
- package/schematics/migrations/tabs-signals-and-aria/README.md +93 -0
- package/schematics/migrations/tabs-signals-and-aria/data.js +139 -0
- package/schematics/migrations/tabs-signals-and-aria/index.js +65 -0
- package/schematics/migrations/tabs-signals-and-aria/schema.json +15 -0
- package/schematics/migrations/tag-list-cleaner/README.md +58 -0
- package/schematics/migrations/tag-list-cleaner/data.js +42 -0
- package/schematics/migrations/tag-list-cleaner/index.js +196 -0
- package/schematics/migrations/tag-list-cleaner/schema.json +20 -0
- package/schematics/migrations/tag-slots/README.md +41 -0
- package/schematics/migrations/tag-slots/index.js +190 -0
- package/schematics/migrations/tag-slots/schema.json +20 -0
- package/schematics/migrations/tags-signals/README.md +85 -0
- package/schematics/migrations/tags-signals/data.js +103 -0
- package/schematics/migrations/tags-signals/index.js +673 -0
- package/schematics/migrations/tags-signals/schema.json +20 -0
- package/schematics/migrations/textarea-signals/README.md +72 -0
- package/schematics/migrations/textarea-signals/data.js +121 -0
- package/schematics/migrations/textarea-signals/index.js +379 -0
- package/schematics/migrations/textarea-signals/schema.json +20 -0
- package/schematics/migrations/time-range-title-for/README.md +164 -0
- package/schematics/migrations/time-range-title-for/data.js +139 -0
- package/schematics/migrations/time-range-title-for/index.js +163 -0
- package/schematics/migrations/time-range-title-for/schema.json +20 -0
- package/schematics/migrations/timepicker-signals/README.md +78 -0
- package/schematics/migrations/timepicker-signals/data.js +82 -0
- package/schematics/migrations/timepicker-signals/index.js +709 -0
- package/schematics/migrations/timepicker-signals/schema.json +20 -0
- package/schematics/migrations/timezone-grouping-utils/README.md +73 -0
- package/schematics/migrations/timezone-grouping-utils/data.js +101 -0
- package/schematics/migrations/timezone-grouping-utils/index.js +64 -0
- package/schematics/migrations/timezone-grouping-utils/schema.json +15 -0
- package/schematics/migrations/title-encapsulation/README.md +49 -0
- package/schematics/migrations/title-encapsulation/data.js +69 -0
- package/schematics/migrations/title-encapsulation/index.js +57 -0
- package/schematics/migrations/title-encapsulation/schema.json +15 -0
- package/schematics/migrations/toast-stack-and-defaults/README.md +102 -0
- package/schematics/migrations/toast-stack-and-defaults/data.js +79 -0
- package/schematics/migrations/toast-stack-and-defaults/index.js +53 -0
- package/schematics/migrations/toast-stack-and-defaults/schema.json +15 -0
- package/schematics/migrations/tooltip-pointer-events-and-types/README.md +53 -0
- package/schematics/migrations/tooltip-pointer-events-and-types/data.js +89 -0
- package/schematics/migrations/tooltip-pointer-events-and-types/index.js +60 -0
- package/schematics/migrations/tooltip-pointer-events-and-types/schema.json +15 -0
- package/schematics/migrations/top-bar-container-selectors/README.md +111 -0
- package/schematics/migrations/top-bar-container-selectors/data.js +56 -0
- package/schematics/migrations/top-bar-container-selectors/index.js +84 -0
- package/schematics/migrations/top-bar-container-selectors/schema.json +20 -0
- package/schematics/migrations/tree-select-signals/README.md +61 -0
- package/schematics/migrations/tree-select-signals/data.js +106 -0
- package/schematics/migrations/tree-select-signals/index.js +58 -0
- package/schematics/migrations/tree-select-signals/schema.json +15 -0
- package/schematics/migrations/tree-signals/README.md +82 -0
- package/schematics/migrations/tree-signals/data.js +123 -0
- package/schematics/migrations/tree-signals/index.js +54 -0
- package/schematics/migrations/tree-signals/schema.json +15 -0
- package/schematics/migrations/tree-state-saving-default/README.md +66 -0
- package/schematics/migrations/tree-state-saving-default/data.js +78 -0
- package/schematics/migrations/tree-state-saving-default/index.js +60 -0
- package/schematics/migrations/tree-state-saving-default/schema.json +15 -0
- package/schematics/migrations/username-pipe-injection/README.md +59 -0
- package/schematics/migrations/username-pipe-injection/data.js +78 -0
- package/schematics/migrations/username-pipe-injection/index.js +58 -0
- package/schematics/migrations/username-pipe-injection/schema.json +15 -0
- package/schematics/migrations/v20-upgrade/README.md +36 -16
- package/schematics/migrations/v20-upgrade/data.js +124 -77
- package/schematics/migrations/v20-upgrade/index.js +6 -213
- package/schematics/migrations/v21-upgrade/README.md +271 -0
- package/schematics/migrations/v21-upgrade/data.js +1371 -0
- package/schematics/migrations/v21-upgrade/index.js +94 -0
- package/schematics/migrations/v21-upgrade/schema.json +20 -0
- package/schematics/migrations/zoneless-change-detection/README.md +30 -0
- package/schematics/migrations/zoneless-change-detection/data.js +29 -0
- package/schematics/migrations/zoneless-change-detection/index.js +20 -0
- package/schematics/migrations/zoneless-change-detection/schema.json +15 -0
- package/schematics/migrations.json +392 -2
- package/schematics/ng-add/index.js +515 -14
- package/schematics/ng-add/schema.json +15 -0
- package/schematics/utils/deprecated-path-migration.js +61 -0
- package/schematics/utils/package-config.js +9 -105
- package/scrollbar/{_scrollbar-component-theme.scss → deprecated/_scrollbar-component-theme.scss} +1 -1
- package/scrollbar/{scrollbar.component.scss → deprecated/scrollbar.component.scss} +1 -1
- package/scrollbar/native-scrollbar.scss +68 -0
- package/scrollbar/scrollbar-tokens.scss +13 -22
- package/scrollbar/scrollbar-track.scss +94 -0
- package/scrollbar/scrollbar-viewport.scss +33 -0
- package/scrollbar/scrollbar.scss +24 -0
- package/search-expandable/search-expandable-tokens.scss +4 -0
- package/search-expandable/search-expandable.scss +4 -2
- package/select/_select-theme.scss +3 -16
- package/select/select.scss +0 -6
- package/sidebar/sidebar.scss +20 -0
- package/sidepanel/_sidepanel-theme.scss +1 -1
- package/sidepanel/sidepanel-tokens.scss +7 -1
- package/sidepanel/sidepanel.scss +41 -5
- package/skeleton/skeleton-presets.scss +350 -0
- package/skeleton/skeleton-tokens.scss +127 -0
- package/skeleton/skeleton.scss +53 -45
- package/split-button/_split-button-theme.scss +4 -4
- package/split-button/split-button.scss +2 -6
- package/splitter/{_splitter-theme.scss → deprecated/_splitter-theme.scss} +1 -1
- package/splitter/deprecated/splitter.scss +51 -0
- package/splitter/splitter-tokens.scss +19 -0
- package/splitter/splitter.scss +148 -28
- package/table/_table-theme.scss +13 -12
- package/table/table-tokens.scss +8 -0
- package/table/table.scss +47 -22
- package/tabs/_tabs-common.scss +14 -14
- package/tabs/_tabs-theme.scss +4 -5
- package/tabs/tab-body.scss +49 -1
- package/tabs/tab-header.scss +2 -1
- package/tags/tag-list.scss +4 -0
- package/tags/tag.scss +19 -1
- package/time-range/time-range.scss +9 -0
- package/timezone/timezone-option.component.scss +4 -7
- package/timezone/timezone-select.component.scss +3 -0
- package/toast/_toast-theme.scss +1 -4
- package/toast/toast-container.component.scss +19 -13
- package/toast/toast-tokens.scss +12 -6
- package/toast/toast.component.scss +42 -19
- package/toggle/_toggle-theme.scss +4 -10
- package/toggle/toggle.scss +67 -26
- package/tooltip/_tooltip-theme.scss +7 -1
- package/tooltip/tooltip-tokens.scss +1 -2
- package/tooltip/tooltip.scss +55 -9
- package/top-bar/top-bar-tokens.scss +13 -2
- package/top-bar/top-bar.scss +24 -19
- package/tree/_tree-theme.scss +0 -1
- package/tree/toggle.scss +5 -9
- package/tree/tree-option.scss +2 -4
- package/tree/tree-tokens.scss +2 -1
- package/tree/tree.scss +3 -5
- package/tree-select/_tree-select-theme.scss +4 -15
- package/tree-select/tree-select-tokens.scss +16 -0
- package/tree-select/tree-select.scss +0 -6
- package/{accordion/index.d.ts → types/koobiq-components-accordion.d.ts} +102 -84
- package/{actions-panel/index.d.ts → types/koobiq-components-actions-panel.d.ts} +44 -59
- package/{alert/index.d.ts → types/koobiq-components-alert.d.ts} +8 -3
- package/types/koobiq-components-app-switcher.d.ts +406 -0
- package/types/koobiq-components-autocomplete.d.ts +443 -0
- package/{badge/index.d.ts → types/koobiq-components-badge.d.ts} +25 -20
- package/{breadcrumbs/index.d.ts → types/koobiq-components-breadcrumbs.d.ts} +97 -46
- package/types/koobiq-components-button-toggle.d.ts +340 -0
- package/types/koobiq-components-button.d.ts +296 -0
- package/types/koobiq-components-checkbox.d.ts +172 -0
- package/types/koobiq-components-clamped-text.d.ts +184 -0
- package/{code-block/index.d.ts → types/koobiq-components-code-block.d.ts} +114 -79
- package/{content-panel/index.d.ts → types/koobiq-components-content-panel.d.ts} +81 -25
- package/{core/index.d.ts → types/koobiq-components-core.d.ts} +2827 -865
- package/{datepicker/index.d.ts → types/koobiq-components-datepicker.d.ts} +161 -116
- package/types/koobiq-components-divider.d.ts +43 -0
- package/types/koobiq-components-dl.d.ts +235 -0
- package/{dropdown/index.d.ts → types/koobiq-components-dropdown.d.ts} +245 -239
- package/types/koobiq-components-ellipsis-center.d.ts +85 -0
- package/types/koobiq-components-empty-state.d.ts +106 -0
- package/{file-upload/index.d.ts → types/koobiq-components-file-upload.d.ts} +214 -107
- package/{filter-bar/index.d.ts → types/koobiq-components-filter-bar.d.ts} +410 -495
- package/types/koobiq-components-flag.d.ts +68 -0
- package/{form-field/index.d.ts → types/koobiq-components-form-field.d.ts} +167 -191
- package/types/koobiq-components-icon.d.ts +333 -0
- package/{inline-edit/index.d.ts → types/koobiq-components-inline-edit.d.ts} +109 -46
- package/types/koobiq-components-input.d.ts +477 -0
- package/types/koobiq-components-link-deprecated.d.ts +101 -0
- package/types/koobiq-components-link.d.ts +176 -0
- package/{list/index.d.ts → types/koobiq-components-list.d.ts} +162 -99
- package/types/koobiq-components-loader-overlay.d.ts +101 -0
- package/{markdown/index.d.ts → types/koobiq-components-markdown.d.ts} +16 -24
- package/types/koobiq-components-modal.d.ts +666 -0
- package/types/koobiq-components-navbar.d.ts +569 -0
- package/types/koobiq-components-notification-center.d.ts +500 -0
- package/{overflow-items/index.d.ts → types/koobiq-components-overflow-items.d.ts} +8 -22
- package/types/koobiq-components-popover.d.ts +468 -0
- package/types/koobiq-components-progress-bar.d.ts +67 -0
- package/{progress-spinner/index.d.ts → types/koobiq-components-progress-spinner.d.ts} +33 -10
- package/types/koobiq-components-radio.d.ts +294 -0
- package/{resizer/index.d.ts → types/koobiq-components-resizer.d.ts} +37 -2
- package/{scrollbar/index.d.ts → types/koobiq-components-scrollbar-deprecated.d.ts} +18 -1
- package/types/koobiq-components-scrollbar.d.ts +154 -0
- package/types/koobiq-components-search-expandable.d.ts +164 -0
- package/{select/index.d.ts → types/koobiq-components-select.d.ts} +360 -167
- package/types/koobiq-components-sidebar.d.ts +152 -0
- package/types/koobiq-components-sidepanel.d.ts +436 -0
- package/types/koobiq-components-skeleton.d.ts +234 -0
- package/types/koobiq-components-split-button.d.ts +65 -0
- package/{splitter/index.d.ts → types/koobiq-components-splitter-deprecated.d.ts} +44 -1
- package/types/koobiq-components-splitter.d.ts +406 -0
- package/types/koobiq-components-table.d.ts +44 -0
- package/types/koobiq-components-tabs.d.ts +888 -0
- package/{tags/index.d.ts → types/koobiq-components-tags.d.ts} +249 -133
- package/types/koobiq-components-textarea.d.ts +178 -0
- package/{time-range/index.d.ts → types/koobiq-components-time-range.d.ts} +135 -62
- package/types/koobiq-components-timepicker.d.ts +223 -0
- package/types/koobiq-components-timezone.d.ts +266 -0
- package/types/koobiq-components-title.d.ts +184 -0
- package/types/koobiq-components-toast.d.ts +289 -0
- package/types/koobiq-components-toggle.d.ts +121 -0
- package/types/koobiq-components-tooltip.d.ts +610 -0
- package/types/koobiq-components-top-bar.d.ts +61 -0
- package/types/koobiq-components-tree-select.d.ts +667 -0
- package/types/koobiq-components-tree.d.ts +1290 -0
- package/types/koobiq-components-username.d.ts +340 -0
- package/username/_username-theme.scss +35 -0
- package/username/username.scss +10 -34
- package/app-switcher/index.d.ts +0 -276
- package/autocomplete/index.d.ts +0 -286
- package/button/index.d.ts +0 -153
- package/button-toggle/index.d.ts +0 -162
- package/checkbox/index.d.ts +0 -163
- package/clamped-text/index.d.ts +0 -146
- package/core/styles/_tokens.scss +0 -7
- package/core/styles/common/_clearfix.scss +0 -13
- package/core/styles/common/_popup.scss +0 -6
- package/core/styles/functions/_index.scss +0 -3
- package/core/styles/functions/_number.scss +0 -60
- package/core/styles/functions/_string.scss +0 -18
- package/core/styles/theming/scrollbar-tokens.scss +0 -25
- package/core/styles/typography/_typography-utils.scss +0 -84
- package/divider/index.d.ts +0 -20
- package/dl/index.d.ts +0 -45
- package/ellipsis-center/index.d.ts +0 -71
- package/empty-state/index.d.ts +0 -45
- package/flag/index.d.ts +0 -44
- package/icon/index.d.ts +0 -200
- package/input/index.d.ts +0 -354
- package/link/index.d.ts +0 -56
- package/loader-overlay/index.d.ts +0 -57
- package/modal/index.d.ts +0 -339
- package/navbar/index.d.ts +0 -372
- package/notification-center/index.d.ts +0 -323
- package/popover/index.d.ts +0 -182
- package/prebuilt-themes/dark-theme.css +0 -1
- package/prebuilt-themes/light-theme.css +0 -1
- package/progress-bar/index.d.ts +0 -31
- package/radio/index.d.ts +0 -203
- package/search-expandable/index.d.ts +0 -101
- package/sidebar/index.d.ts +0 -94
- package/sidepanel/index.d.ts +0 -272
- package/skeleton/index.d.ts +0 -26
- package/split-button/index.d.ts +0 -46
- package/table/index.d.ts +0 -25
- package/tabs/index.d.ts +0 -677
- package/textarea/index.d.ts +0 -138
- package/timepicker/index.d.ts +0 -197
- package/timezone/index.d.ts +0 -125
- package/title/index.d.ts +0 -139
- package/toast/index.d.ts +0 -187
- package/toggle/index.d.ts +0 -104
- package/tooltip/index.d.ts +0 -335
- package/top-bar/index.d.ts +0 -33
- package/tree/index.d.ts +0 -802
- package/tree-select/index.d.ts +0 -475
- package/username/index.d.ts +0 -194
- /package/{dynamic-translation/index.d.ts → types/koobiq-components-dynamic-translation.d.ts} +0 -0
- /package/{index.d.ts → types/koobiq-components.d.ts} +0 -0
|
@@ -1,19 +1,44 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Renderer2, contentChildren, forwardRef, signal, ElementRef, effect, untracked, isDevMode, Directive, ChangeDetectorRef,
|
|
3
|
-
import {
|
|
2
|
+
import { inject, Renderer2, Injector, contentChildren, forwardRef, signal, ElementRef, effect, untracked, isDevMode, afterNextRender, Directive, ChangeDetectorRef, viewChild, input, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, computed, NgModule } from '@angular/core';
|
|
3
|
+
import { KbqComponentColors, getContentNodes, leftIconClassName, rightIconClassName, KbqColorDirective, supportsNativeDisabled, kbqOptionalNumberAttribute, ENTER, SPACE, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, KBQ_TITLE_TEXT_REF } from '@koobiq/components/core';
|
|
4
4
|
import { FocusMonitor, A11yModule } from '@angular/cdk/a11y';
|
|
5
5
|
import { CdkObserveContent, ObserversModule } from '@angular/cdk/observers';
|
|
6
6
|
import { KbqIcon } from '@koobiq/components/icon';
|
|
7
7
|
import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
|
|
8
8
|
import { PlatformModule } from '@angular/cdk/platform';
|
|
9
9
|
|
|
10
|
+
/** Visual style of a button. */
|
|
10
11
|
var KbqButtonStyles;
|
|
11
12
|
(function (KbqButtonStyles) {
|
|
12
13
|
KbqButtonStyles["Filled"] = "filled";
|
|
13
14
|
KbqButtonStyles["Outline"] = "outline";
|
|
14
15
|
KbqButtonStyles["Transparent"] = "transparent";
|
|
15
16
|
})(KbqButtonStyles || (KbqButtonStyles = {}));
|
|
17
|
+
/**
|
|
18
|
+
* Default color of each visual style.
|
|
19
|
+
*
|
|
20
|
+
* `transparent` differs from the other two on purpose: it paints neither a fill nor a border, so
|
|
21
|
+
* its color only picks the foreground, and the design system has no faded variant for it — the
|
|
22
|
+
* neutral transparent button is `contrast`, not `contrast-fade`.
|
|
23
|
+
*/
|
|
24
|
+
const defaultColorForStyle = {
|
|
25
|
+
[KbqButtonStyles.Filled]: KbqComponentColors.ContrastFade,
|
|
26
|
+
[KbqButtonStyles.Outline]: KbqComponentColors.ContrastFade,
|
|
27
|
+
[KbqButtonStyles.Transparent]: KbqComponentColors.Contrast
|
|
28
|
+
};
|
|
29
|
+
/** Default color of a style. A custom style has no entry and falls back to the `filled` default. */
|
|
30
|
+
const getDefaultColorForStyle = (style) => defaultColorForStyle[style] ?? defaultColorForStyle[KbqButtonStyles.Filled];
|
|
31
|
+
/**
|
|
32
|
+
* Class set on a button host whose first visible child is an icon.
|
|
33
|
+
*
|
|
34
|
+
* Public CSS hook: consumed by `dropdown.scss` to detect an icon-only dropdown trigger.
|
|
35
|
+
*/
|
|
16
36
|
const buttonLeftIconClassName = 'kbq-button-icon_left';
|
|
37
|
+
/**
|
|
38
|
+
* Class set on a button host whose last visible child is an icon.
|
|
39
|
+
*
|
|
40
|
+
* Public CSS hook: consumed by `dropdown.scss` to detect an icon-only dropdown trigger.
|
|
41
|
+
*/
|
|
17
42
|
const buttonRightIconClassName = 'kbq-button-icon_right';
|
|
18
43
|
/** A button containing more icons than this keeps regular (non icon-button) styling. */
|
|
19
44
|
const maxIconsForIconButton = 2;
|
|
@@ -32,18 +57,29 @@ class KbqButtonCssStyler {
|
|
|
32
57
|
get isIconButton() {
|
|
33
58
|
return this._isIconButton();
|
|
34
59
|
}
|
|
60
|
+
/** Whether the projected label holds no text at all, e.g. an icon-only button. */
|
|
61
|
+
get hasNoLabel() {
|
|
62
|
+
return this._hasNoLabel();
|
|
63
|
+
}
|
|
35
64
|
constructor() {
|
|
36
65
|
this.renderer = inject(Renderer2);
|
|
37
|
-
this.
|
|
38
|
-
this.
|
|
66
|
+
this.injector = inject(Injector);
|
|
67
|
+
this.icons = contentChildren(forwardRef(() => KbqIcon), ...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
|
|
68
|
+
this._isIconButton = signal(false, ...(ngDevMode ? [{ debugName: "_isIconButton" }] : /* istanbul ignore next */ []));
|
|
69
|
+
this._hasNoLabel = signal(false, ...(ngDevMode ? [{ debugName: "_hasNoLabel" }] : /* istanbul ignore next */ []));
|
|
39
70
|
this.leftIcon = null;
|
|
40
71
|
this.rightIcon = null;
|
|
72
|
+
/** Memoized `.kbq-button-wrapper`; stable for the lifetime of the host component. */
|
|
73
|
+
this.wrapperElement = null;
|
|
74
|
+
/** Whether the missing-accessible-name warning has already been emitted for this host. */
|
|
75
|
+
this.accessibleNameWarned = false;
|
|
41
76
|
const elementRef = inject(ElementRef);
|
|
42
77
|
this.nativeElement = elementRef.nativeElement;
|
|
43
|
-
// The contentChildren query tracks only KbqIcon instances, while icon
|
|
44
|
-
//
|
|
45
|
-
//
|
|
46
|
-
//
|
|
78
|
+
// The contentChildren query tracks only KbqIcon instances, and only direct ones, while icon
|
|
79
|
+
// placement and `hasNoLabel` also depend on text nodes and on content a consumer nested in
|
|
80
|
+
// its own element — all invisible to the query. Those are covered by the MutationObserver in
|
|
81
|
+
// the component template, which is why it stays enabled even for icon-less buttons. This
|
|
82
|
+
// effect covers icon creation and removal (e.g. via @if) without waiting for the observer.
|
|
47
83
|
effect(() => {
|
|
48
84
|
this.icons();
|
|
49
85
|
untracked(() => this.updateClassModifierForIcons());
|
|
@@ -53,7 +89,7 @@ class KbqButtonCssStyler {
|
|
|
53
89
|
this.updateClassModifierForIcons();
|
|
54
90
|
}
|
|
55
91
|
updateClassModifierForIcons() {
|
|
56
|
-
const wrapper = this.
|
|
92
|
+
const wrapper = this.getWrapperElement();
|
|
57
93
|
if (!wrapper) {
|
|
58
94
|
if (isDevMode()) {
|
|
59
95
|
// eslint-disable-next-line no-console
|
|
@@ -63,6 +99,11 @@ class KbqButtonCssStyler {
|
|
|
63
99
|
}
|
|
64
100
|
const icons = this.icons();
|
|
65
101
|
const textElement = wrapper.querySelector('.kbq-button-text');
|
|
102
|
+
// CSS cannot see text nodes, so it can never tell an icon-only label from a text label that
|
|
103
|
+
// happens to contain an icon — the label box has to be told. `textContent` walks nested
|
|
104
|
+
// elements, which also covers content a consumer wrapped in its own element before
|
|
105
|
+
// projecting it (e.g. KbqButtonToggle), where the icon is not a direct child at all.
|
|
106
|
+
this._hasNoLabel.set(!textElement?.textContent?.trim());
|
|
66
107
|
// Build an ordered list of "effective" content nodes: the left-slot content, then the
|
|
67
108
|
// default-slot content flattened out of `.kbq-button-text`, then the right-slot content.
|
|
68
109
|
// Flattening the text span keeps legacy `<i kbq-icon> Text` markup (projected into the
|
|
@@ -70,9 +111,9 @@ class KbqButtonCssStyler {
|
|
|
70
111
|
// they must be treated as direct siblings of the text, exactly as before the text span
|
|
71
112
|
// existed. With no marker slots this list equals the old wrapper children.
|
|
72
113
|
const effectiveNodes = [];
|
|
73
|
-
for (const node of
|
|
114
|
+
for (const node of getContentNodes(wrapper)) {
|
|
74
115
|
if (node === textElement) {
|
|
75
|
-
effectiveNodes.push(...
|
|
116
|
+
effectiveNodes.push(...getContentNodes(node));
|
|
76
117
|
}
|
|
77
118
|
else {
|
|
78
119
|
effectiveNodes.push(node);
|
|
@@ -95,6 +136,9 @@ class KbqButtonCssStyler {
|
|
|
95
136
|
this.updateIconClass(this.rightIcon, rightIcon, rightIconClassName, buttonRightIconClassName);
|
|
96
137
|
this.leftIcon = leftIcon;
|
|
97
138
|
this.rightIcon = rightIcon;
|
|
139
|
+
// A label bound inside an @if block is still an empty text node here, so the button would look
|
|
140
|
+
// icon-only; judge the name once the content has rendered.
|
|
141
|
+
afterNextRender(() => this.warnIfIconButtonHasNoAccessibleName(), { injector: this.injector });
|
|
98
142
|
}
|
|
99
143
|
updateIconClass(previous, current, iconClassName, buttonClassName) {
|
|
100
144
|
if (previous === current)
|
|
@@ -110,57 +154,146 @@ class KbqButtonCssStyler {
|
|
|
110
154
|
this.renderer.removeClass(this.nativeElement, buttonClassName);
|
|
111
155
|
}
|
|
112
156
|
}
|
|
113
|
-
|
|
114
|
-
|
|
157
|
+
getWrapperElement() {
|
|
158
|
+
return (this.wrapperElement ??= this.nativeElement.querySelector('.kbq-button-wrapper'));
|
|
159
|
+
}
|
|
160
|
+
/**
|
|
161
|
+
* `KbqIcon` renders a decorative glyph, so an icon-only button carries no text. Without an
|
|
162
|
+
* `aria-label`/`aria-labelledby`/`title` it has no accessible name at all (AXE `button-name`).
|
|
163
|
+
*/
|
|
164
|
+
warnIfIconButtonHasNoAccessibleName() {
|
|
165
|
+
if (!isDevMode() || this.accessibleNameWarned || !this.isIconButton)
|
|
166
|
+
return;
|
|
167
|
+
const host = this.nativeElement;
|
|
168
|
+
const hasAccessibleName = !!host.textContent?.trim() ||
|
|
169
|
+
host.hasAttribute('aria-label') ||
|
|
170
|
+
host.hasAttribute('aria-labelledby') ||
|
|
171
|
+
host.hasAttribute('title');
|
|
172
|
+
if (hasAccessibleName)
|
|
173
|
+
return;
|
|
174
|
+
this.accessibleNameWarned = true;
|
|
175
|
+
// eslint-disable-next-line no-console
|
|
176
|
+
console.warn('KbqButton: icon-only button has no accessible name. Add [aria-label] or [aria-labelledby] to it.', host);
|
|
177
|
+
}
|
|
178
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
179
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.25", type: KbqButtonCssStyler, isStandalone: true, selector: "[kbq-button]", host: { properties: { "class.kbq-button": "!isIconButton", "class.kbq-button-icon": "isIconButton", "class.kbq-button_no-label": "hasNoLabel" } }, queries: [{ propertyName: "icons", predicate: i0.forwardRef(() => KbqIcon), isSignal: true }], ngImport: i0 }); }
|
|
115
180
|
}
|
|
116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
181
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonCssStyler, decorators: [{
|
|
117
182
|
type: Directive,
|
|
118
183
|
args: [{
|
|
119
184
|
selector: '[kbq-button]',
|
|
120
185
|
host: {
|
|
121
186
|
'[class.kbq-button]': '!isIconButton',
|
|
122
|
-
'[class.kbq-button-icon]': 'isIconButton'
|
|
187
|
+
'[class.kbq-button-icon]': 'isIconButton',
|
|
188
|
+
'[class.kbq-button_no-label]': 'hasNoLabel'
|
|
123
189
|
}
|
|
124
190
|
}]
|
|
125
191
|
}], ctorParameters: () => [], propDecorators: { icons: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqIcon), { isSignal: true }] }] } });
|
|
126
192
|
class KbqButton extends KbqColorDirective {
|
|
127
|
-
|
|
128
|
-
|
|
193
|
+
/** The text box of the button, measured by `kbq-title`. Always rendered by the template. */
|
|
194
|
+
get textElement() {
|
|
195
|
+
return this.titleText();
|
|
196
|
+
}
|
|
197
|
+
/** The flex row that lays out the icons and text, used as the overflow width constraint. */
|
|
198
|
+
get parentTextElement() {
|
|
199
|
+
return this.parentText();
|
|
200
|
+
}
|
|
201
|
+
/**
|
|
202
|
+
* Visual style of the button. Setting it to a value marks that value as owned by the button, so
|
|
203
|
+
* a surrounding `KbqButtonGroupRoot` no longer overrides it.
|
|
204
|
+
*
|
|
205
|
+
* Reads back as the resulting host class rather than the value that was set, because the host
|
|
206
|
+
* `[class]` binding is what consumes it.
|
|
207
|
+
*/
|
|
129
208
|
get kbqStyle() {
|
|
130
|
-
return
|
|
209
|
+
return this._kbqStyleClassName;
|
|
131
210
|
}
|
|
132
211
|
set kbqStyle(value) {
|
|
133
|
-
this.
|
|
134
|
-
this.
|
|
212
|
+
this.kbqStyleSetExplicitly = !!value;
|
|
213
|
+
this.applyKbqStyle(value);
|
|
135
214
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
215
|
+
/**
|
|
216
|
+
* Whether the button is disabled. A surrounding `KbqButtonGroupRoot` can disable the button in
|
|
217
|
+
* addition to this input, but never re-enables a button disabled through it.
|
|
218
|
+
*/
|
|
140
219
|
get disabled() {
|
|
141
220
|
return this.disabledSignal();
|
|
142
221
|
}
|
|
143
222
|
set disabled(value) {
|
|
144
|
-
this.
|
|
223
|
+
this.ownDisabled = value;
|
|
224
|
+
this.applyDisabledState();
|
|
145
225
|
}
|
|
146
|
-
// TODO: Skipped for migration because:
|
|
147
|
-
// Accessor inputs cannot be migrated as they are too complex.
|
|
148
226
|
get tabIndex() {
|
|
149
227
|
return this.disabled ? -1 : this._tabIndex;
|
|
150
228
|
}
|
|
151
229
|
set tabIndex(value) {
|
|
152
|
-
|
|
230
|
+
// Code may write NaN, which would render `tabindex="NaN"`.
|
|
231
|
+
this._tabIndex = Number.isNaN(value) ? 0 : value;
|
|
232
|
+
}
|
|
233
|
+
/** Value rendered into the native `disabled` attribute; invalid HTML on hosts such as `<a>`. */
|
|
234
|
+
get nativeDisabledAttribute() {
|
|
235
|
+
return this.disabled && this.hostSupportsNativeDisabled ? true : null;
|
|
236
|
+
}
|
|
237
|
+
/** Disabled state exposed to assistive tech for hosts without native `disabled` support. */
|
|
238
|
+
get ariaDisabledAttribute() {
|
|
239
|
+
return this.disabled && !this.hostSupportsNativeDisabled ? true : null;
|
|
240
|
+
}
|
|
241
|
+
/**
|
|
242
|
+
* Value rendered into the `tabindex` attribute. A native `<button>`/`<input>` is already in the
|
|
243
|
+
* tab order, so the default needs no attribute at all. Anchors keep it: one without `href` is
|
|
244
|
+
* not focusable otherwise, and whether an `href` is present cannot be decided here — directives
|
|
245
|
+
* such as `RouterLink` apply theirs after this host binding runs.
|
|
246
|
+
*/
|
|
247
|
+
get tabIndexAttribute() {
|
|
248
|
+
if (this.disabled)
|
|
249
|
+
return -1;
|
|
250
|
+
return this.hostSupportsNativeDisabled && this._tabIndex === 0 ? null : this._tabIndex;
|
|
251
|
+
}
|
|
252
|
+
ngOnChanges(changes) {
|
|
253
|
+
// A bound input is handed to its member; unbound, it leaves what code wrote.
|
|
254
|
+
if (changes['kbqStyleInput']) {
|
|
255
|
+
this.kbqStyle = this.kbqStyleInput();
|
|
256
|
+
}
|
|
257
|
+
if (changes['disabledInput']) {
|
|
258
|
+
const disabled = this.disabledInput();
|
|
259
|
+
if (disabled !== undefined)
|
|
260
|
+
this.disabled = disabled;
|
|
261
|
+
}
|
|
262
|
+
if (changes['tabIndexInput'])
|
|
263
|
+
this.tabIndex = this.tabIndexInput() ?? 0;
|
|
153
264
|
}
|
|
154
265
|
constructor() {
|
|
155
266
|
super();
|
|
156
267
|
this.focusMonitor = inject(FocusMonitor);
|
|
157
268
|
this.styler = inject(KbqButtonCssStyler);
|
|
158
269
|
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
270
|
+
this.renderer = inject(Renderer2);
|
|
271
|
+
/** Lower-cased tag name of the host element. */
|
|
272
|
+
this.hostTagName = this.elementRef.nativeElement.nodeName.toLowerCase();
|
|
273
|
+
/** Whether the host element supports the native `disabled` attribute. */
|
|
274
|
+
this.hostSupportsNativeDisabled = supportsNativeDisabled(this.elementRef.nativeElement);
|
|
159
275
|
this.hasFocus = false;
|
|
276
|
+
this.titleText = viewChild('kbqTitleText', ...(ngDevMode ? [{ debugName: "titleText" }] : /* istanbul ignore next */ []));
|
|
277
|
+
this.parentText = viewChild('parentTextElement', ...(ngDevMode ? [{ debugName: "parentText" }] : /* istanbul ignore next */ []));
|
|
160
278
|
this._kbqStyle = KbqButtonStyles.Filled;
|
|
279
|
+
this._kbqStyleClassName = `kbq-button_${KbqButtonStyles.Filled}`;
|
|
280
|
+
/** Whether `kbqStyle` was set from the outside rather than propagated by a button group. */
|
|
281
|
+
this.kbqStyleSetExplicitly = false;
|
|
282
|
+
/** Disabled state requested through the `disabled` input. */
|
|
283
|
+
this.ownDisabled = false;
|
|
284
|
+
/** Disabled state propagated by a surrounding `KbqButtonGroupRoot`. */
|
|
285
|
+
this.groupDisabled = false;
|
|
161
286
|
/** @docs-private */
|
|
162
|
-
this.disabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "disabledSignal" }] : []));
|
|
287
|
+
this.disabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "disabledSignal" }] : /* istanbul ignore next */ []));
|
|
163
288
|
this._tabIndex = 0;
|
|
289
|
+
/** @docs-private */
|
|
290
|
+
this.kbqStyleInput = input(undefined, { ...(ngDevMode ? { debugName: "kbqStyleInput" } : /* istanbul ignore next */ {}), alias: 'kbqStyle' });
|
|
291
|
+
/** @docs-private */
|
|
292
|
+
this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
|
|
293
|
+
transform: booleanAttribute });
|
|
294
|
+
/** @docs-private */
|
|
295
|
+
this.tabIndexInput = input(undefined, { ...(ngDevMode ? { debugName: "tabIndexInput" } : /* istanbul ignore next */ {}), alias: 'tabIndex',
|
|
296
|
+
transform: kbqOptionalNumberAttribute });
|
|
164
297
|
this.haltDisabledEvents = (event) => {
|
|
165
298
|
if (this.disabled) {
|
|
166
299
|
event.preventDefault();
|
|
@@ -176,8 +309,7 @@ class KbqButton extends KbqColorDirective {
|
|
|
176
309
|
this.haltDisabledEvents(event);
|
|
177
310
|
}
|
|
178
311
|
};
|
|
179
|
-
this.
|
|
180
|
-
this.setDefaultColor(KbqComponentColors.ContrastFade);
|
|
312
|
+
this.applyDefaultColor();
|
|
181
313
|
// Native capture-phase listeners instead of host listeners: Angular coalesces listeners
|
|
182
314
|
// for the same event on the same element, so stopImmediatePropagation from a host listener
|
|
183
315
|
// would not stop consumer-bound handlers. Matters for <a kbq-button> hosts only —
|
|
@@ -187,8 +319,78 @@ class KbqButton extends KbqColorDirective {
|
|
|
187
319
|
this.getHostElement().addEventListener('click', this.haltDisabledEvents, true);
|
|
188
320
|
this.getHostElement().addEventListener('keydown', this.haltDisabledKeydownEvents, true);
|
|
189
321
|
}
|
|
322
|
+
/**
|
|
323
|
+
* Applies the color propagated by a surrounding `KbqButtonGroupRoot`, unless the button defines
|
|
324
|
+
* its own. A falsy value — the group's `color` input is unbound — releases the button back to
|
|
325
|
+
* the default color of its style.
|
|
326
|
+
*
|
|
327
|
+
* @docs-private
|
|
328
|
+
*/
|
|
329
|
+
setColorFromGroup(value) {
|
|
330
|
+
this.groupColor = value;
|
|
331
|
+
this.applyDefaultColor();
|
|
332
|
+
}
|
|
333
|
+
/**
|
|
334
|
+
* Applies the style propagated by a surrounding `KbqButtonGroupRoot`, unless the button defines
|
|
335
|
+
* its own.
|
|
336
|
+
*
|
|
337
|
+
* @docs-private
|
|
338
|
+
*/
|
|
339
|
+
setKbqStyleFromGroup(value) {
|
|
340
|
+
if (this.kbqStyleSetExplicitly)
|
|
341
|
+
return;
|
|
342
|
+
this.applyKbqStyle(value);
|
|
343
|
+
}
|
|
344
|
+
/**
|
|
345
|
+
* Applies the disabled state propagated by a surrounding `KbqButtonGroupRoot`. It is additive:
|
|
346
|
+
* a button disabled through its own input stays disabled when the group is re-enabled.
|
|
347
|
+
*
|
|
348
|
+
* @docs-private
|
|
349
|
+
*/
|
|
350
|
+
setDisabledFromGroup(value) {
|
|
351
|
+
this.groupDisabled = value;
|
|
352
|
+
this.applyDisabledState();
|
|
353
|
+
}
|
|
190
354
|
ngAfterViewInit() {
|
|
191
355
|
this.runFocusMonitor();
|
|
356
|
+
this.updateRole();
|
|
357
|
+
}
|
|
358
|
+
ngAfterViewChecked() {
|
|
359
|
+
// `href` can appear or disappear long after the first check — `[attr.href]` bound to a value
|
|
360
|
+
// that resolves later, or a `RouterLink` whose target becomes `null`. Running on every pass
|
|
361
|
+
// costs nothing: `updateRole` leaves a host that is not an anchor alone, and writes nothing
|
|
362
|
+
// while the role it would write is already there.
|
|
363
|
+
this.updateRole();
|
|
364
|
+
}
|
|
365
|
+
/**
|
|
366
|
+
* Re-evaluates the role announced to assistive tech. Only anchors can change role, so the guard
|
|
367
|
+
* lives here rather than at the call sites: this is public, and a `<button>` host must not have
|
|
368
|
+
* a role stamped onto it from the outside.
|
|
369
|
+
*
|
|
370
|
+
* An `<a kbq-button>` without `href` does not navigate and has no implicit role, so it is
|
|
371
|
+
* announced as a button. Anchors that do navigate (`href`, `routerLink`) keep their link role.
|
|
372
|
+
*
|
|
373
|
+
* Every other host already has an implicit role and is left exactly as it was authored — a host
|
|
374
|
+
* binding would instead have to write `null` for it, which removes a `role` the consumer set
|
|
375
|
+
* itself. `KbqButtonToggle` relies on that: it renders `role="radio"` on its inner button.
|
|
376
|
+
*
|
|
377
|
+
* @docs-private
|
|
378
|
+
*/
|
|
379
|
+
updateRole() {
|
|
380
|
+
if (this.hostTagName !== 'a')
|
|
381
|
+
return;
|
|
382
|
+
const host = this.getHostElement();
|
|
383
|
+
const role = host.hasAttribute('href') ? null : 'button';
|
|
384
|
+
// Called from every `ngAfterViewChecked`, so the write is worth skipping while the attribute
|
|
385
|
+
// already reads the way it would be rewritten.
|
|
386
|
+
if (host.getAttribute('role') === role)
|
|
387
|
+
return;
|
|
388
|
+
if (role) {
|
|
389
|
+
this.renderer.setAttribute(host, 'role', role);
|
|
390
|
+
}
|
|
391
|
+
else {
|
|
392
|
+
this.renderer.removeAttribute(host, 'role');
|
|
393
|
+
}
|
|
192
394
|
}
|
|
193
395
|
ngOnDestroy() {
|
|
194
396
|
this.getHostElement().removeEventListener('click', this.haltDisabledEvents, true);
|
|
@@ -217,47 +419,53 @@ class KbqButton extends KbqColorDirective {
|
|
|
217
419
|
projectContentChanged() {
|
|
218
420
|
this.styler.updateClassModifierForIcons();
|
|
219
421
|
}
|
|
422
|
+
applyKbqStyle(value) {
|
|
423
|
+
const kbqStyle = value || KbqButtonStyles.Filled;
|
|
424
|
+
if (kbqStyle === this._kbqStyle)
|
|
425
|
+
return;
|
|
426
|
+
this._kbqStyle = kbqStyle;
|
|
427
|
+
this._kbqStyleClassName = `kbq-button_${kbqStyle}`;
|
|
428
|
+
this.applyDefaultColor();
|
|
429
|
+
this.changeDetectorRef.markForCheck();
|
|
430
|
+
}
|
|
431
|
+
/**
|
|
432
|
+
* The color of a surrounding `KbqButtonGroupRoot` wins over the default color of the current `kbqStyle`:
|
|
433
|
+
* the design system defines a different neutral color per style, which a button without a color of its own
|
|
434
|
+
* or of its group keeps following.
|
|
435
|
+
*/
|
|
436
|
+
applyDefaultColor() {
|
|
437
|
+
this.setDefaultColor(this.groupColor || getDefaultColorForStyle(this._kbqStyle));
|
|
438
|
+
}
|
|
439
|
+
applyDisabledState() {
|
|
440
|
+
this.disabledSignal.set(this.ownDisabled || this.groupDisabled);
|
|
441
|
+
}
|
|
220
442
|
runFocusMonitor() {
|
|
221
443
|
this.focusMonitor.monitor(this.elementRef.nativeElement, true);
|
|
222
444
|
}
|
|
223
445
|
stopFocusMonitor() {
|
|
224
446
|
this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
|
|
225
447
|
}
|
|
226
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
227
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
448
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
449
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqButton, isStandalone: true, selector: "[kbq-button]", inputs: { kbqStyleInput: { classPropertyName: "kbqStyleInput", publicName: "kbqStyle", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.disabled": "nativeDisabledAttribute", "attr.aria-disabled": "ariaDisabledAttribute", "class.kbq-disabled": "disabled", "attr.tabindex": "tabIndexAttribute", "class": "kbqStyle" } }, providers: [
|
|
228
450
|
{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqButton }
|
|
229
|
-
], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }, { propertyName: "parentTextElement", first: true, predicate: ["parentTextElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span\n #parentTextElement\n class=\"kbq-button-wrapper\"\n [cdkObserveContentDisabled]=\"!styler.icons().length\"\n (cdkObserveContent)=\"projectContentChanged()\"\n>\n <ng-content select=\"[kbqButtonPrefix]\" />\n <span #kbqTitleText class=\"kbq-button-text\">\n <ng-content />\n </span>\n <ng-content select=\"[kbqButtonSuffix]\" />\n</span>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-button,.kbq-light-button,.kbq-button-icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;height:var(--kbq-button-size-height);min-height:var(--kbq-button-size-height);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:var(--kbq-button-size-border-width) solid transparent;border-radius:var(--kbq-button-size-border-radius)}.kbq-button::-moz-focus-inner,.kbq-light-button::-moz-focus-inner,.kbq-button-icon::-moz-focus-inner{border:0}.kbq-button:focus,.kbq-light-button:focus,.kbq-button-icon:focus{outline:none}.kbq-disabled.kbq-button,.kbq-disabled.kbq-light-button,.kbq-disabled.kbq-button-icon{cursor:default}.cdk-focused.kbq-button,.cdk-focused.kbq-light-button,.cdk-focused.kbq-button-icon{z-index:1}.kbq-button .kbq-button-wrapper,.kbq-light-button .kbq-button-wrapper,.kbq-button-icon .kbq-button-wrapper{display:flex;align-items:center;min-width:0}.kbq-button .kbq-button-text,.kbq-light-button .kbq-button-text,.kbq-button-icon .kbq-button-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;min-width:0}.kbq-button .kbq-icon_left,.kbq-light-button .kbq-icon_left,.kbq-button-icon .kbq-icon_left{margin-right:var(--kbq-button-size-content-padding)}.kbq-button .kbq-icon_right,.kbq-light-button .kbq-icon_right,.kbq-button-icon .kbq-icon_right{margin-left:var(--kbq-button-size-content-padding)}.kbq-button .kbq-button-prefix,.kbq-light-button .kbq-button-prefix,.kbq-button-icon .kbq-button-prefix{margin-right:var(--kbq-button-size-content-padding)}.kbq-button .kbq-button-suffix,.kbq-light-button .kbq-button-suffix,.kbq-button-icon .kbq-button-suffix{margin-left:var(--kbq-button-size-content-padding)}.kbq-button{padding-left:calc(var(--kbq-button-size-horizontal-padding) - var(--kbq-button-size-border-width));padding-right:calc(var(--kbq-button-size-horizontal-padding) - var(--kbq-button-size-border-width))}.kbq-button-icon{padding-left:calc(var(--kbq-button-icon-size-horizontal-padding) - var(--kbq-button-size-border-width));padding-right:calc(var(--kbq-button-icon-size-horizontal-padding) - var(--kbq-button-size-border-width))}.kbq-button,.kbq-button-icon{-webkit-font-smoothing:antialiased}.kbq-button.kbq-button_filled.kbq-contrast,.kbq-button-icon.kbq-button_filled.kbq-contrast{border-color:var(--kbq-button-filled-contrast-fade-off-border);color:var(--kbq-button-filled-contrast-fade-off-foreground);background:var(--kbq-button-filled-contrast-fade-off-background)}.kbq-button.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-off-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-off-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast:hover:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-off-states-hover-background)}.kbq-button.kbq-button_filled.kbq-contrast:active:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-active:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-off-states-active-background)}.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled{color:var(--kbq-button-filled-contrast-fade-off-states-disabled-foreground);background:var(--kbq-button-filled-contrast-fade-off-states-disabled-background);border-color:var(--kbq-button-filled-contrast-fade-off-states-disabled-border)}.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-off-states-disabled-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-off-states-disabled-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade{border-color:var(--kbq-button-filled-contrast-fade-on-border);color:var(--kbq-button-filled-contrast-fade-on-foreground);background:var(--kbq-button-filled-contrast-fade-on-background)}.kbq-button.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-on-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-on-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_filled.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-active:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-filled-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-filled-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade,.kbq-button-icon.kbq-button_outline.kbq-theme-fade{border-color:var(--kbq-button-outline-theme-fade-on-border);color:var(--kbq-button-outline-theme-fade-on-foreground);background:var(--kbq-button-outline-theme-fade-on-background)}.kbq-button.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-theme-fade-on-left-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-theme-fade-on-right-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade:hover:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-outline-theme-fade-on-states-hover-background)}.kbq-button.kbq-button_outline.kbq-theme-fade:active:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-active:not(.kbq-disabled){background:var(--kbq-button-outline-theme-fade-on-states-active-background)}.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled{color:var(--kbq-button-outline-theme-fade-on-states-disabled-foreground);background:var(--kbq-button-outline-theme-fade-on-states-disabled-background);border-color:var(--kbq-button-outline-theme-fade-on-states-disabled-border)}.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-theme-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-theme-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade{border-color:var(--kbq-button-outline-contrast-fade-on-border);color:var(--kbq-button-outline-contrast-fade-on-foreground);background:var(--kbq-button-outline-contrast-fade-on-background)}.kbq-button.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-contrast-fade-on-left-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-contrast-fade-on-right-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-outline-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_outline.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-active:not(.kbq-disabled){background:var(--kbq-button-outline-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-outline-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-outline-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_transparent.kbq-theme,.kbq-button-icon.kbq-button_transparent.kbq-theme{border-color:var(--kbq-button-transparent-theme-fade-on-border);color:var(--kbq-button-transparent-theme-fade-on-foreground);background:var(--kbq-button-transparent-theme-fade-on-background)}.kbq-button.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-theme-fade-on-left-icon)}.kbq-button.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-theme-fade-on-right-icon)}.kbq-button.kbq-button_transparent.kbq-theme:hover:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-theme.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-transparent-theme-fade-on-states-hover-background)}.kbq-button.kbq-button_transparent.kbq-theme:active:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-theme.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-active:not(.kbq-disabled){background:var(--kbq-button-transparent-theme-fade-on-states-active-background)}.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled{color:var(--kbq-button-transparent-theme-fade-on-states-disabled-foreground);background:var(--kbq-button-transparent-theme-fade-on-states-disabled-background);border-color:var(--kbq-button-transparent-theme-fade-on-states-disabled-border)}.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-theme-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-theme-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_transparent.kbq-contrast,.kbq-button-icon.kbq-button_transparent.kbq-contrast{border-color:var(--kbq-button-transparent-contrast-fade-on-border);color:var(--kbq-button-transparent-contrast-fade-on-foreground);background:var(--kbq-button-transparent-contrast-fade-on-background)}.kbq-button.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-contrast-fade-on-left-icon)}.kbq-button.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-contrast-fade-on-right-icon)}.kbq-button.kbq-button_transparent.kbq-contrast:hover:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-contrast.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-transparent-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_transparent.kbq-contrast:active:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-contrast.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-active:not(.kbq-disabled){background:var(--kbq-button-transparent-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-transparent-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_filled.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button.kbq-button_outline.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button.kbq-button_transparent.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.cdk-keyboard-focused:not(.kbq-disabled){outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-button,.kbq-button-icon{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n", ".kbq-button,.kbq-button-icon{--kbq-button-size-height: var(--kbq-size-3xl);--kbq-button-size-border-width: var(--kbq-size-border-width);--kbq-button-size-border-radius: var(--kbq-size-border-radius);--kbq-button-size-horizontal-padding: var(--kbq-size-m);--kbq-button-size-content-padding: var(--kbq-size-xs);--kbq-button-icon-size-horizontal-padding: var(--kbq-size-s);--kbq-button-icon-size-vertical-padding: var(--kbq-size-s);--kbq-button-icon-size-content-padding: var(--kbq-size-xxs);--kbq-button-filled-contrast-fade-off-background: var(--kbq-background-contrast);--kbq-button-filled-contrast-fade-off-border: transparent;--kbq-button-filled-contrast-fade-off-foreground: var(--kbq-foreground-on-contrast);--kbq-button-filled-contrast-fade-off-left-icon: var(--kbq-icon-on-contrast);--kbq-button-filled-contrast-fade-off-right-icon: var(--kbq-icon-on-contrast);--kbq-button-filled-contrast-fade-off-states-hover-background: var(--kbq-states-background-contrast-hover);--kbq-button-filled-contrast-fade-off-states-active-background: var(--kbq-states-background-contrast-active);--kbq-button-filled-contrast-fade-off-states-active-hover-background: var(--kbq-states-background-contrast-active);--kbq-button-filled-contrast-fade-off-states-disabled-background: var(--kbq-states-background-disabled);--kbq-button-filled-contrast-fade-off-states-disabled-border: transparent;--kbq-button-filled-contrast-fade-off-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-off-states-disabled-left-icon: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-off-states-disabled-right-icon: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-on-background: var(--kbq-background-contrast-fade);--kbq-button-filled-contrast-fade-on-border: transparent;--kbq-button-filled-contrast-fade-on-foreground: var(--kbq-foreground-contrast);--kbq-button-filled-contrast-fade-on-left-icon: var(--kbq-icon-contrast);--kbq-button-filled-contrast-fade-on-right-icon: var(--kbq-icon-contrast);--kbq-button-filled-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-button-filled-contrast-fade-on-states-active-background: var(--kbq-states-background-contrast-fade-active);--kbq-button-filled-contrast-fade-on-states-active-hover-background: var( --kbq-states-background-contrast-fade-active );--kbq-button-filled-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-button-filled-contrast-fade-on-states-disabled-border: transparent;--kbq-button-filled-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-foreground-disabled);--kbq-button-outline-theme-fade-on-background: transparent;--kbq-button-outline-theme-fade-on-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-outline-theme-fade-on-states-hover-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-states-hover-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-states-hover-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-hover-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-outline-theme-fade-on-states-active-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-states-active-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-states-active-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-hover-background: var(--kbq-states-background-transparent-active);--kbq-button-outline-theme-fade-on-states-active-hover-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-states-active-hover-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-states-active-hover-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-hover-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-disabled-background: transparent;--kbq-button-outline-theme-fade-on-states-disabled-border: var(--kbq-states-line-disabled);--kbq-button-outline-theme-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-outline-theme-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-outline-theme-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);--kbq-button-outline-contrast-fade-on-background: transparent;--kbq-button-outline-contrast-fade-on-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-outline-contrast-fade-on-states-hover-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-states-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-states-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-outline-contrast-fade-on-states-active-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-states-active-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-states-active-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-hover-background: var( --kbq-states-background-transparent-active );--kbq-button-outline-contrast-fade-on-states-active-hover-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-states-active-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-states-active-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-disabled-background: transparent;--kbq-button-outline-contrast-fade-on-states-disabled-border: var(--kbq-states-line-disabled);--kbq-button-outline-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-outline-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-outline-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-theme-fade-on-border: transparent;--kbq-button-transparent-theme-fade-on-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-background: transparent;--kbq-button-transparent-theme-fade-on-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-hover-border: transparent;--kbq-button-transparent-theme-fade-on-states-hover-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-transparent-theme-fade-on-states-hover-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-hover-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-border: transparent;--kbq-button-transparent-theme-fade-on-states-active-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-transparent-theme-fade-on-states-active-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-hover-border: transparent;--kbq-button-transparent-theme-fade-on-states-active-hover-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-states-active-hover-background: var( --kbq-states-background-transparent-active );--kbq-button-transparent-theme-fade-on-states-active-hover-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-hover-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-disabled-border: transparent;--kbq-button-transparent-theme-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-transparent-theme-fade-on-states-disabled-background: transparent;--kbq-button-transparent-theme-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-theme-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-contrast-fade-on-border: transparent;--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-background: transparent;--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-hover-border: transparent;--kbq-button-transparent-contrast-fade-on-states-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-transparent-contrast-fade-on-states-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-border: transparent;--kbq-button-transparent-contrast-fade-on-states-active-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-transparent-contrast-fade-on-states-active-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-hover-border: transparent;--kbq-button-transparent-contrast-fade-on-states-active-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-states-active-hover-background: var( --kbq-states-background-transparent-active );--kbq-button-transparent-contrast-fade-on-states-active-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-disabled-border: transparent;--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-transparent-contrast-fade-on-states-disabled-background: transparent;--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled)}\n"], dependencies: [{ kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
451
|
+
], viewQueries: [{ propertyName: "titleText", first: true, predicate: ["kbqTitleText"], descendants: true, isSignal: true }, { propertyName: "parentText", first: true, predicate: ["parentTextElement"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<span #parentTextElement class=\"kbq-button-wrapper\" (cdkObserveContent)=\"projectContentChanged()\">\n <ng-content select=\"[kbqButtonPrefix]\" />\n <span #kbqTitleText class=\"kbq-button-text\">\n <ng-content />\n </span>\n <ng-content select=\"[kbqButtonSuffix]\" />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-button,.kbq-light-button,.kbq-button-icon{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;height:var(--kbq-button-size-height);min-height:var(--kbq-button-size-height);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:var(--kbq-button-size-border-width) solid transparent;border-radius:var(--kbq-button-size-border-radius)}@supports (corner-shape: squircle){.kbq-button,.kbq-light-button,.kbq-button-icon{corner-shape:squircle;border-radius:clamp(var(--kbq-button-size-border-radius) * 1.85,var(--kbq-button-size-border-radius) * 2.3 - 3.6px,var(--kbq-button-size-border-radius) * 2)}}.kbq-button::-moz-focus-inner,.kbq-light-button::-moz-focus-inner,.kbq-button-icon::-moz-focus-inner{border:0}.kbq-button:focus,.kbq-light-button:focus,.kbq-button-icon:focus{outline:none}.kbq-disabled.kbq-button,.kbq-disabled.kbq-light-button,.kbq-disabled.kbq-button-icon{cursor:default}.cdk-focused.kbq-button,.cdk-focused.kbq-light-button,.cdk-focused.kbq-button-icon{z-index:1}.kbq-button .kbq-button-wrapper,.kbq-light-button .kbq-button-wrapper,.kbq-button-icon .kbq-button-wrapper{display:flex;align-items:center;min-width:0}.kbq-button .kbq-button-text,.kbq-light-button .kbq-button-text,.kbq-button-icon .kbq-button-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;min-width:0}.kbq-button .kbq-button-text:has(>.kbq-icon),.kbq-light-button .kbq-button-text:has(>.kbq-icon),.kbq-button-icon .kbq-button-text:has(>.kbq-icon){display:flex;align-items:center}.kbq-button_no-label.kbq-button .kbq-button-text,.kbq-button_no-label.kbq-light-button .kbq-button-text,.kbq-button_no-label.kbq-button-icon .kbq-button-text{display:flex;align-items:center}.kbq-button .kbq-icon_left,.kbq-light-button .kbq-icon_left,.kbq-button-icon .kbq-icon_left{margin-inline-end:var(--kbq-button-size-content-padding)}.kbq-button .kbq-icon_right,.kbq-light-button .kbq-icon_right,.kbq-button-icon .kbq-icon_right{margin-inline-start:var(--kbq-button-size-content-padding)}.kbq-button .kbq-button-prefix,.kbq-light-button .kbq-button-prefix,.kbq-button-icon .kbq-button-prefix{margin-inline-end:var(--kbq-button-size-content-padding)}.kbq-button .kbq-button-suffix,.kbq-light-button .kbq-button-suffix,.kbq-button-icon .kbq-button-suffix{margin-inline-start:var(--kbq-button-size-content-padding)}.kbq-light-button,.kbq-button{max-width:100%}.kbq-button{padding-left:calc(var(--kbq-button-size-horizontal-padding) - var(--kbq-button-size-border-width));padding-right:calc(var(--kbq-button-size-horizontal-padding) - var(--kbq-button-size-border-width))}.kbq-button-icon{padding-left:calc(var(--kbq-button-icon-size-horizontal-padding) - var(--kbq-button-size-border-width));padding-right:calc(var(--kbq-button-icon-size-horizontal-padding) - var(--kbq-button-size-border-width))}.kbq-button-icon .kbq-icon_left,.kbq-button-icon .kbq-button-prefix{margin-inline-end:0}.kbq-button-icon .kbq-icon_right,.kbq-button-icon .kbq-button-suffix{margin-inline-start:0}.kbq-button-icon.kbq-button-icon_left.kbq-button-icon_right .kbq-icon_left{margin-inline-end:var(--kbq-size-xxs)}.kbq-button,.kbq-button-icon{-webkit-font-smoothing:antialiased}.kbq-button.kbq-button_filled,.kbq-button-icon.kbq-button_filled{border-color:var(--kbq-button-filled-contrast-fade-on-border);color:var(--kbq-button-filled-contrast-fade-on-foreground);background:var(--kbq-button-filled-contrast-fade-on-background)}.kbq-button.kbq-button_filled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-on-left-icon)}.kbq-button.kbq-button_filled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-on-right-icon)}.kbq-button.kbq-button_filled:hover:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_filled:active:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-active:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_filled.kbq-disabled,.kbq-button-icon.kbq-button_filled.kbq-disabled{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-filled-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-filled-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_filled.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_filled.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast,.kbq-button-icon.kbq-button_filled.kbq-contrast{border-color:var(--kbq-button-filled-contrast-fade-off-border);color:var(--kbq-button-filled-contrast-fade-off-foreground);background:var(--kbq-button-filled-contrast-fade-off-background)}.kbq-button.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-off-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-off-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast:hover:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-off-states-hover-background)}.kbq-button.kbq-button_filled.kbq-contrast:active:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-active:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-off-states-active-background)}.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled{color:var(--kbq-button-filled-contrast-fade-off-states-disabled-foreground);background:var(--kbq-button-filled-contrast-fade-off-states-disabled-background);border-color:var(--kbq-button-filled-contrast-fade-off-states-disabled-border)}.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-off-states-disabled-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-off-states-disabled-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade{border-color:var(--kbq-button-filled-contrast-fade-on-border);color:var(--kbq-button-filled-contrast-fade-on-foreground);background:var(--kbq-button-filled-contrast-fade-on-background)}.kbq-button.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-on-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-on-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_filled.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-active:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-filled-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-filled-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_outline,.kbq-button-icon.kbq-button_outline{border-color:var(--kbq-button-outline-contrast-fade-on-border);color:var(--kbq-button-outline-contrast-fade-on-foreground);background:var(--kbq-button-outline-contrast-fade-on-background)}.kbq-button.kbq-button_outline .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-contrast-fade-on-left-icon)}.kbq-button.kbq-button_outline .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-contrast-fade-on-right-icon)}.kbq-button.kbq-button_outline:hover:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-outline-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_outline:active:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-active:not(.kbq-disabled){background:var(--kbq-button-outline-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_outline.kbq-disabled,.kbq-button-icon.kbq-button_outline.kbq-disabled{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-outline-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-outline-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_outline.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_outline.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade,.kbq-button-icon.kbq-button_outline.kbq-theme-fade{border-color:var(--kbq-button-outline-theme-fade-on-border);color:var(--kbq-button-outline-theme-fade-on-foreground);background:var(--kbq-button-outline-theme-fade-on-background)}.kbq-button.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-theme-fade-on-left-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-theme-fade-on-right-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade:hover:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-outline-theme-fade-on-states-hover-background)}.kbq-button.kbq-button_outline.kbq-theme-fade:active:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-active:not(.kbq-disabled){background:var(--kbq-button-outline-theme-fade-on-states-active-background)}.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled{color:var(--kbq-button-outline-theme-fade-on-states-disabled-foreground);background:var(--kbq-button-outline-theme-fade-on-states-disabled-background);border-color:var(--kbq-button-outline-theme-fade-on-states-disabled-border)}.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-theme-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-theme-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade{border-color:var(--kbq-button-outline-contrast-fade-on-border);color:var(--kbq-button-outline-contrast-fade-on-foreground);background:var(--kbq-button-outline-contrast-fade-on-background)}.kbq-button.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-contrast-fade-on-left-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-contrast-fade-on-right-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-outline-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_outline.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-active:not(.kbq-disabled){background:var(--kbq-button-outline-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-outline-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-outline-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_transparent,.kbq-button-icon.kbq-button_transparent{border-color:var(--kbq-button-transparent-contrast-fade-on-border);color:var(--kbq-button-transparent-contrast-fade-on-foreground);background:var(--kbq-button-transparent-contrast-fade-on-background)}.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-contrast-fade-on-left-icon)}.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-contrast-fade-on-right-icon)}.kbq-button.kbq-button_transparent:hover:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-transparent-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_transparent:active:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-active:not(.kbq-disabled){background:var(--kbq-button-transparent-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_transparent.kbq-disabled,.kbq-button-icon.kbq-button_transparent.kbq-disabled{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-transparent-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_transparent.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_transparent.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_transparent.kbq-theme,.kbq-button-icon.kbq-button_transparent.kbq-theme{border-color:var(--kbq-button-transparent-theme-fade-on-border);color:var(--kbq-button-transparent-theme-fade-on-foreground);background:var(--kbq-button-transparent-theme-fade-on-background)}.kbq-button.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-theme-fade-on-left-icon)}.kbq-button.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-theme-fade-on-right-icon)}.kbq-button.kbq-button_transparent.kbq-theme:hover:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-theme.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-transparent-theme-fade-on-states-hover-background)}.kbq-button.kbq-button_transparent.kbq-theme:active:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-theme.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-active:not(.kbq-disabled){background:var(--kbq-button-transparent-theme-fade-on-states-active-background)}.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled{color:var(--kbq-button-transparent-theme-fade-on-states-disabled-foreground);background:var(--kbq-button-transparent-theme-fade-on-states-disabled-background);border-color:var(--kbq-button-transparent-theme-fade-on-states-disabled-border)}.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-theme-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-theme-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_transparent.kbq-contrast,.kbq-button-icon.kbq-button_transparent.kbq-contrast{border-color:var(--kbq-button-transparent-contrast-fade-on-border);color:var(--kbq-button-transparent-contrast-fade-on-foreground);background:var(--kbq-button-transparent-contrast-fade-on-background)}.kbq-button.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-contrast-fade-on-left-icon)}.kbq-button.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-contrast-fade-on-right-icon)}.kbq-button.kbq-button_transparent.kbq-contrast:hover:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-contrast.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-transparent-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_transparent.kbq-contrast:active:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-contrast.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-active:not(.kbq-disabled){background:var(--kbq-button-transparent-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-transparent-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_filled.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button.kbq-button_outline.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button.kbq-button_transparent.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.cdk-keyboard-focused:not(.kbq-disabled){outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-button,.kbq-button-icon{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n", ".kbq-button,.kbq-button-icon{--kbq-button-size-height: var(--kbq-size-3xl);--kbq-button-size-border-width: var(--kbq-size-border-width);--kbq-button-size-border-radius: var(--kbq-size-border-radius);--kbq-button-size-horizontal-padding: var(--kbq-size-m);--kbq-button-size-content-padding: var(--kbq-size-xs);--kbq-button-icon-size-horizontal-padding: var(--kbq-size-s);--kbq-button-filled-contrast-fade-off-background: var(--kbq-background-contrast);--kbq-button-filled-contrast-fade-off-border: transparent;--kbq-button-filled-contrast-fade-off-foreground: var(--kbq-foreground-on-contrast);--kbq-button-filled-contrast-fade-off-left-icon: var(--kbq-icon-on-contrast);--kbq-button-filled-contrast-fade-off-right-icon: var(--kbq-icon-on-contrast);--kbq-button-filled-contrast-fade-off-states-hover-background: var(--kbq-states-background-contrast-hover);--kbq-button-filled-contrast-fade-off-states-active-background: var(--kbq-states-background-contrast-active);--kbq-button-filled-contrast-fade-off-states-active-hover-background: var(--kbq-states-background-contrast-active);--kbq-button-filled-contrast-fade-off-states-disabled-background: var(--kbq-states-background-disabled);--kbq-button-filled-contrast-fade-off-states-disabled-border: transparent;--kbq-button-filled-contrast-fade-off-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-off-states-disabled-left-icon: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-off-states-disabled-right-icon: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-on-background: var(--kbq-background-contrast-fade);--kbq-button-filled-contrast-fade-on-border: transparent;--kbq-button-filled-contrast-fade-on-foreground: var(--kbq-foreground-contrast);--kbq-button-filled-contrast-fade-on-left-icon: var(--kbq-icon-contrast);--kbq-button-filled-contrast-fade-on-right-icon: var(--kbq-icon-contrast);--kbq-button-filled-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-button-filled-contrast-fade-on-states-active-background: var(--kbq-states-background-contrast-fade-active);--kbq-button-filled-contrast-fade-on-states-active-hover-background: var( --kbq-states-background-contrast-fade-active );--kbq-button-filled-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-button-filled-contrast-fade-on-states-disabled-border: transparent;--kbq-button-filled-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-foreground-disabled);--kbq-button-outline-theme-fade-on-background: transparent;--kbq-button-outline-theme-fade-on-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-outline-theme-fade-on-states-hover-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-states-hover-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-states-hover-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-hover-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-outline-theme-fade-on-states-active-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-states-active-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-states-active-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-hover-background: var(--kbq-states-background-transparent-active);--kbq-button-outline-theme-fade-on-states-active-hover-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-states-active-hover-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-states-active-hover-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-hover-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-disabled-background: transparent;--kbq-button-outline-theme-fade-on-states-disabled-border: var(--kbq-states-line-disabled);--kbq-button-outline-theme-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-outline-theme-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-outline-theme-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);--kbq-button-outline-contrast-fade-on-background: transparent;--kbq-button-outline-contrast-fade-on-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-outline-contrast-fade-on-states-hover-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-states-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-states-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-outline-contrast-fade-on-states-active-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-states-active-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-states-active-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-hover-background: var( --kbq-states-background-transparent-active );--kbq-button-outline-contrast-fade-on-states-active-hover-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-states-active-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-states-active-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-disabled-background: transparent;--kbq-button-outline-contrast-fade-on-states-disabled-border: var(--kbq-states-line-disabled);--kbq-button-outline-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-outline-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-outline-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-theme-fade-on-border: transparent;--kbq-button-transparent-theme-fade-on-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-background: transparent;--kbq-button-transparent-theme-fade-on-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-hover-border: transparent;--kbq-button-transparent-theme-fade-on-states-hover-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-transparent-theme-fade-on-states-hover-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-hover-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-border: transparent;--kbq-button-transparent-theme-fade-on-states-active-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-transparent-theme-fade-on-states-active-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-hover-border: transparent;--kbq-button-transparent-theme-fade-on-states-active-hover-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-states-active-hover-background: var( --kbq-states-background-transparent-active );--kbq-button-transparent-theme-fade-on-states-active-hover-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-hover-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-disabled-border: transparent;--kbq-button-transparent-theme-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-transparent-theme-fade-on-states-disabled-background: transparent;--kbq-button-transparent-theme-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-theme-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-contrast-fade-on-border: transparent;--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-background: transparent;--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-hover-border: transparent;--kbq-button-transparent-contrast-fade-on-states-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-transparent-contrast-fade-on-states-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-border: transparent;--kbq-button-transparent-contrast-fade-on-states-active-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-transparent-contrast-fade-on-states-active-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-hover-border: transparent;--kbq-button-transparent-contrast-fade-on-states-active-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-states-active-hover-background: var( --kbq-states-background-transparent-active );--kbq-button-transparent-contrast-fade-on-states-active-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-disabled-border: transparent;--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-transparent-contrast-fade-on-states-disabled-background: transparent;--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled)}\n"], dependencies: [{ kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
230
452
|
}
|
|
231
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
453
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButton, decorators: [{
|
|
232
454
|
type: Component,
|
|
233
455
|
args: [{ selector: '[kbq-button]', imports: [
|
|
234
456
|
CdkObserveContent
|
|
235
457
|
], providers: [
|
|
236
458
|
{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqButton }
|
|
237
459
|
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
238
|
-
'[attr.disabled]': '
|
|
239
|
-
'[attr.aria-disabled]': '
|
|
460
|
+
'[attr.disabled]': 'nativeDisabledAttribute',
|
|
461
|
+
'[attr.aria-disabled]': 'ariaDisabledAttribute',
|
|
240
462
|
'[class.kbq-disabled]': 'disabled',
|
|
241
|
-
'[attr.
|
|
463
|
+
'[attr.tabindex]': 'tabIndexAttribute',
|
|
242
464
|
'[class]': 'kbqStyle',
|
|
243
465
|
'(focus)': 'onFocus()',
|
|
244
466
|
'(blur)': 'onBlur()'
|
|
245
|
-
}, template: "<span\n #parentTextElement\n class=\"kbq-button-wrapper\"\n [cdkObserveContentDisabled]=\"!styler.icons().length\"\n (cdkObserveContent)=\"projectContentChanged()\"\n>\n <ng-content select=\"[kbqButtonPrefix]\" />\n <span #kbqTitleText class=\"kbq-button-text\">\n <ng-content />\n </span>\n <ng-content select=\"[kbqButtonSuffix]\" />\n</span>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-button,.kbq-light-button,.kbq-button-icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;height:var(--kbq-button-size-height);min-height:var(--kbq-button-size-height);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:var(--kbq-button-size-border-width) solid transparent;border-radius:var(--kbq-button-size-border-radius)}.kbq-button::-moz-focus-inner,.kbq-light-button::-moz-focus-inner,.kbq-button-icon::-moz-focus-inner{border:0}.kbq-button:focus,.kbq-light-button:focus,.kbq-button-icon:focus{outline:none}.kbq-disabled.kbq-button,.kbq-disabled.kbq-light-button,.kbq-disabled.kbq-button-icon{cursor:default}.cdk-focused.kbq-button,.cdk-focused.kbq-light-button,.cdk-focused.kbq-button-icon{z-index:1}.kbq-button .kbq-button-wrapper,.kbq-light-button .kbq-button-wrapper,.kbq-button-icon .kbq-button-wrapper{display:flex;align-items:center;min-width:0}.kbq-button .kbq-button-text,.kbq-light-button .kbq-button-text,.kbq-button-icon .kbq-button-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;min-width:0}.kbq-button .kbq-icon_left,.kbq-light-button .kbq-icon_left,.kbq-button-icon .kbq-icon_left{margin-right:var(--kbq-button-size-content-padding)}.kbq-button .kbq-icon_right,.kbq-light-button .kbq-icon_right,.kbq-button-icon .kbq-icon_right{margin-left:var(--kbq-button-size-content-padding)}.kbq-button .kbq-button-prefix,.kbq-light-button .kbq-button-prefix,.kbq-button-icon .kbq-button-prefix{margin-right:var(--kbq-button-size-content-padding)}.kbq-button .kbq-button-suffix,.kbq-light-button .kbq-button-suffix,.kbq-button-icon .kbq-button-suffix{margin-left:var(--kbq-button-size-content-padding)}.kbq-button{padding-left:calc(var(--kbq-button-size-horizontal-padding) - var(--kbq-button-size-border-width));padding-right:calc(var(--kbq-button-size-horizontal-padding) - var(--kbq-button-size-border-width))}.kbq-button-icon{padding-left:calc(var(--kbq-button-icon-size-horizontal-padding) - var(--kbq-button-size-border-width));padding-right:calc(var(--kbq-button-icon-size-horizontal-padding) - var(--kbq-button-size-border-width))}.kbq-button,.kbq-button-icon{-webkit-font-smoothing:antialiased}.kbq-button.kbq-button_filled.kbq-contrast,.kbq-button-icon.kbq-button_filled.kbq-contrast{border-color:var(--kbq-button-filled-contrast-fade-off-border);color:var(--kbq-button-filled-contrast-fade-off-foreground);background:var(--kbq-button-filled-contrast-fade-off-background)}.kbq-button.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-off-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-off-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast:hover:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-off-states-hover-background)}.kbq-button.kbq-button_filled.kbq-contrast:active:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-active:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-off-states-active-background)}.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled{color:var(--kbq-button-filled-contrast-fade-off-states-disabled-foreground);background:var(--kbq-button-filled-contrast-fade-off-states-disabled-background);border-color:var(--kbq-button-filled-contrast-fade-off-states-disabled-border)}.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-off-states-disabled-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-off-states-disabled-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade{border-color:var(--kbq-button-filled-contrast-fade-on-border);color:var(--kbq-button-filled-contrast-fade-on-foreground);background:var(--kbq-button-filled-contrast-fade-on-background)}.kbq-button.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-on-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-on-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_filled.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-active:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-filled-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-filled-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade,.kbq-button-icon.kbq-button_outline.kbq-theme-fade{border-color:var(--kbq-button-outline-theme-fade-on-border);color:var(--kbq-button-outline-theme-fade-on-foreground);background:var(--kbq-button-outline-theme-fade-on-background)}.kbq-button.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-theme-fade-on-left-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-theme-fade-on-right-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade:hover:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-outline-theme-fade-on-states-hover-background)}.kbq-button.kbq-button_outline.kbq-theme-fade:active:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-active:not(.kbq-disabled){background:var(--kbq-button-outline-theme-fade-on-states-active-background)}.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled{color:var(--kbq-button-outline-theme-fade-on-states-disabled-foreground);background:var(--kbq-button-outline-theme-fade-on-states-disabled-background);border-color:var(--kbq-button-outline-theme-fade-on-states-disabled-border)}.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-theme-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-theme-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade{border-color:var(--kbq-button-outline-contrast-fade-on-border);color:var(--kbq-button-outline-contrast-fade-on-foreground);background:var(--kbq-button-outline-contrast-fade-on-background)}.kbq-button.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-contrast-fade-on-left-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-contrast-fade-on-right-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-outline-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_outline.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-active:not(.kbq-disabled){background:var(--kbq-button-outline-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-outline-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-outline-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_transparent.kbq-theme,.kbq-button-icon.kbq-button_transparent.kbq-theme{border-color:var(--kbq-button-transparent-theme-fade-on-border);color:var(--kbq-button-transparent-theme-fade-on-foreground);background:var(--kbq-button-transparent-theme-fade-on-background)}.kbq-button.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-theme-fade-on-left-icon)}.kbq-button.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-theme-fade-on-right-icon)}.kbq-button.kbq-button_transparent.kbq-theme:hover:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-theme.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-transparent-theme-fade-on-states-hover-background)}.kbq-button.kbq-button_transparent.kbq-theme:active:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-theme.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-active:not(.kbq-disabled){background:var(--kbq-button-transparent-theme-fade-on-states-active-background)}.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled{color:var(--kbq-button-transparent-theme-fade-on-states-disabled-foreground);background:var(--kbq-button-transparent-theme-fade-on-states-disabled-background);border-color:var(--kbq-button-transparent-theme-fade-on-states-disabled-border)}.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-theme-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-theme-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_transparent.kbq-contrast,.kbq-button-icon.kbq-button_transparent.kbq-contrast{border-color:var(--kbq-button-transparent-contrast-fade-on-border);color:var(--kbq-button-transparent-contrast-fade-on-foreground);background:var(--kbq-button-transparent-contrast-fade-on-background)}.kbq-button.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-contrast-fade-on-left-icon)}.kbq-button.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-contrast-fade-on-right-icon)}.kbq-button.kbq-button_transparent.kbq-contrast:hover:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-contrast.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-transparent-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_transparent.kbq-contrast:active:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-contrast.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-active:not(.kbq-disabled){background:var(--kbq-button-transparent-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-transparent-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_filled.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button.kbq-button_outline.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button.kbq-button_transparent.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.cdk-keyboard-focused:not(.kbq-disabled){outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-button,.kbq-button-icon{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n", ".kbq-button,.kbq-button-icon{--kbq-button-size-height: var(--kbq-size-3xl);--kbq-button-size-border-width: var(--kbq-size-border-width);--kbq-button-size-border-radius: var(--kbq-size-border-radius);--kbq-button-size-horizontal-padding: var(--kbq-size-m);--kbq-button-size-content-padding: var(--kbq-size-xs);--kbq-button-icon-size-horizontal-padding: var(--kbq-size-s);--kbq-button-icon-size-vertical-padding: var(--kbq-size-s);--kbq-button-icon-size-content-padding: var(--kbq-size-xxs);--kbq-button-filled-contrast-fade-off-background: var(--kbq-background-contrast);--kbq-button-filled-contrast-fade-off-border: transparent;--kbq-button-filled-contrast-fade-off-foreground: var(--kbq-foreground-on-contrast);--kbq-button-filled-contrast-fade-off-left-icon: var(--kbq-icon-on-contrast);--kbq-button-filled-contrast-fade-off-right-icon: var(--kbq-icon-on-contrast);--kbq-button-filled-contrast-fade-off-states-hover-background: var(--kbq-states-background-contrast-hover);--kbq-button-filled-contrast-fade-off-states-active-background: var(--kbq-states-background-contrast-active);--kbq-button-filled-contrast-fade-off-states-active-hover-background: var(--kbq-states-background-contrast-active);--kbq-button-filled-contrast-fade-off-states-disabled-background: var(--kbq-states-background-disabled);--kbq-button-filled-contrast-fade-off-states-disabled-border: transparent;--kbq-button-filled-contrast-fade-off-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-off-states-disabled-left-icon: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-off-states-disabled-right-icon: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-on-background: var(--kbq-background-contrast-fade);--kbq-button-filled-contrast-fade-on-border: transparent;--kbq-button-filled-contrast-fade-on-foreground: var(--kbq-foreground-contrast);--kbq-button-filled-contrast-fade-on-left-icon: var(--kbq-icon-contrast);--kbq-button-filled-contrast-fade-on-right-icon: var(--kbq-icon-contrast);--kbq-button-filled-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-button-filled-contrast-fade-on-states-active-background: var(--kbq-states-background-contrast-fade-active);--kbq-button-filled-contrast-fade-on-states-active-hover-background: var( --kbq-states-background-contrast-fade-active );--kbq-button-filled-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-button-filled-contrast-fade-on-states-disabled-border: transparent;--kbq-button-filled-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-foreground-disabled);--kbq-button-outline-theme-fade-on-background: transparent;--kbq-button-outline-theme-fade-on-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-outline-theme-fade-on-states-hover-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-states-hover-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-states-hover-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-hover-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-outline-theme-fade-on-states-active-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-states-active-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-states-active-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-hover-background: var(--kbq-states-background-transparent-active);--kbq-button-outline-theme-fade-on-states-active-hover-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-states-active-hover-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-states-active-hover-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-hover-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-disabled-background: transparent;--kbq-button-outline-theme-fade-on-states-disabled-border: var(--kbq-states-line-disabled);--kbq-button-outline-theme-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-outline-theme-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-outline-theme-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);--kbq-button-outline-contrast-fade-on-background: transparent;--kbq-button-outline-contrast-fade-on-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-outline-contrast-fade-on-states-hover-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-states-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-states-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-outline-contrast-fade-on-states-active-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-states-active-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-states-active-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-hover-background: var( --kbq-states-background-transparent-active );--kbq-button-outline-contrast-fade-on-states-active-hover-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-states-active-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-states-active-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-disabled-background: transparent;--kbq-button-outline-contrast-fade-on-states-disabled-border: var(--kbq-states-line-disabled);--kbq-button-outline-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-outline-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-outline-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-theme-fade-on-border: transparent;--kbq-button-transparent-theme-fade-on-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-background: transparent;--kbq-button-transparent-theme-fade-on-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-hover-border: transparent;--kbq-button-transparent-theme-fade-on-states-hover-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-transparent-theme-fade-on-states-hover-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-hover-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-border: transparent;--kbq-button-transparent-theme-fade-on-states-active-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-transparent-theme-fade-on-states-active-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-hover-border: transparent;--kbq-button-transparent-theme-fade-on-states-active-hover-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-states-active-hover-background: var( --kbq-states-background-transparent-active );--kbq-button-transparent-theme-fade-on-states-active-hover-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-hover-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-disabled-border: transparent;--kbq-button-transparent-theme-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-transparent-theme-fade-on-states-disabled-background: transparent;--kbq-button-transparent-theme-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-theme-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-contrast-fade-on-border: transparent;--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-background: transparent;--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-hover-border: transparent;--kbq-button-transparent-contrast-fade-on-states-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-transparent-contrast-fade-on-states-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-border: transparent;--kbq-button-transparent-contrast-fade-on-states-active-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-transparent-contrast-fade-on-states-active-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-hover-border: transparent;--kbq-button-transparent-contrast-fade-on-states-active-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-states-active-hover-background: var( --kbq-states-background-transparent-active );--kbq-button-transparent-contrast-fade-on-states-active-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-disabled-border: transparent;--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-transparent-contrast-fade-on-states-disabled-background: transparent;--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled)}\n"] }]
|
|
246
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
247
|
-
type: ViewChild,
|
|
248
|
-
args: ['kbqTitleText']
|
|
249
|
-
}], parentTextElement: [{
|
|
250
|
-
type: ViewChild,
|
|
251
|
-
args: ['parentTextElement']
|
|
252
|
-
}], kbqStyle: [{
|
|
253
|
-
type: Input
|
|
254
|
-
}], disabled: [{
|
|
255
|
-
type: Input,
|
|
256
|
-
args: [{ transform: booleanAttribute }]
|
|
257
|
-
}], tabIndex: [{
|
|
258
|
-
type: Input,
|
|
259
|
-
args: [{ transform: numberAttribute }]
|
|
260
|
-
}] } });
|
|
467
|
+
}, template: "<span #parentTextElement class=\"kbq-button-wrapper\" (cdkObserveContent)=\"projectContentChanged()\">\n <ng-content select=\"[kbqButtonPrefix]\" />\n <span #kbqTitleText class=\"kbq-button-text\">\n <ng-content />\n </span>\n <ng-content select=\"[kbqButtonSuffix]\" />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-button,.kbq-light-button,.kbq-button-icon{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;height:var(--kbq-button-size-height);min-height:var(--kbq-button-size-height);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:var(--kbq-button-size-border-width) solid transparent;border-radius:var(--kbq-button-size-border-radius)}@supports (corner-shape: squircle){.kbq-button,.kbq-light-button,.kbq-button-icon{corner-shape:squircle;border-radius:clamp(var(--kbq-button-size-border-radius) * 1.85,var(--kbq-button-size-border-radius) * 2.3 - 3.6px,var(--kbq-button-size-border-radius) * 2)}}.kbq-button::-moz-focus-inner,.kbq-light-button::-moz-focus-inner,.kbq-button-icon::-moz-focus-inner{border:0}.kbq-button:focus,.kbq-light-button:focus,.kbq-button-icon:focus{outline:none}.kbq-disabled.kbq-button,.kbq-disabled.kbq-light-button,.kbq-disabled.kbq-button-icon{cursor:default}.cdk-focused.kbq-button,.cdk-focused.kbq-light-button,.cdk-focused.kbq-button-icon{z-index:1}.kbq-button .kbq-button-wrapper,.kbq-light-button .kbq-button-wrapper,.kbq-button-icon .kbq-button-wrapper{display:flex;align-items:center;min-width:0}.kbq-button .kbq-button-text,.kbq-light-button .kbq-button-text,.kbq-button-icon .kbq-button-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;min-width:0}.kbq-button .kbq-button-text:has(>.kbq-icon),.kbq-light-button .kbq-button-text:has(>.kbq-icon),.kbq-button-icon .kbq-button-text:has(>.kbq-icon){display:flex;align-items:center}.kbq-button_no-label.kbq-button .kbq-button-text,.kbq-button_no-label.kbq-light-button .kbq-button-text,.kbq-button_no-label.kbq-button-icon .kbq-button-text{display:flex;align-items:center}.kbq-button .kbq-icon_left,.kbq-light-button .kbq-icon_left,.kbq-button-icon .kbq-icon_left{margin-inline-end:var(--kbq-button-size-content-padding)}.kbq-button .kbq-icon_right,.kbq-light-button .kbq-icon_right,.kbq-button-icon .kbq-icon_right{margin-inline-start:var(--kbq-button-size-content-padding)}.kbq-button .kbq-button-prefix,.kbq-light-button .kbq-button-prefix,.kbq-button-icon .kbq-button-prefix{margin-inline-end:var(--kbq-button-size-content-padding)}.kbq-button .kbq-button-suffix,.kbq-light-button .kbq-button-suffix,.kbq-button-icon .kbq-button-suffix{margin-inline-start:var(--kbq-button-size-content-padding)}.kbq-light-button,.kbq-button{max-width:100%}.kbq-button{padding-left:calc(var(--kbq-button-size-horizontal-padding) - var(--kbq-button-size-border-width));padding-right:calc(var(--kbq-button-size-horizontal-padding) - var(--kbq-button-size-border-width))}.kbq-button-icon{padding-left:calc(var(--kbq-button-icon-size-horizontal-padding) - var(--kbq-button-size-border-width));padding-right:calc(var(--kbq-button-icon-size-horizontal-padding) - var(--kbq-button-size-border-width))}.kbq-button-icon .kbq-icon_left,.kbq-button-icon .kbq-button-prefix{margin-inline-end:0}.kbq-button-icon .kbq-icon_right,.kbq-button-icon .kbq-button-suffix{margin-inline-start:0}.kbq-button-icon.kbq-button-icon_left.kbq-button-icon_right .kbq-icon_left{margin-inline-end:var(--kbq-size-xxs)}.kbq-button,.kbq-button-icon{-webkit-font-smoothing:antialiased}.kbq-button.kbq-button_filled,.kbq-button-icon.kbq-button_filled{border-color:var(--kbq-button-filled-contrast-fade-on-border);color:var(--kbq-button-filled-contrast-fade-on-foreground);background:var(--kbq-button-filled-contrast-fade-on-background)}.kbq-button.kbq-button_filled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-on-left-icon)}.kbq-button.kbq-button_filled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-on-right-icon)}.kbq-button.kbq-button_filled:hover:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_filled:active:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-active:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_filled.kbq-disabled,.kbq-button-icon.kbq-button_filled.kbq-disabled{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-filled-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-filled-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_filled.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_filled.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast,.kbq-button-icon.kbq-button_filled.kbq-contrast{border-color:var(--kbq-button-filled-contrast-fade-off-border);color:var(--kbq-button-filled-contrast-fade-off-foreground);background:var(--kbq-button-filled-contrast-fade-off-background)}.kbq-button.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-off-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-off-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast:hover:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-off-states-hover-background)}.kbq-button.kbq-button_filled.kbq-contrast:active:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-active:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-off-states-active-background)}.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled{color:var(--kbq-button-filled-contrast-fade-off-states-disabled-foreground);background:var(--kbq-button-filled-contrast-fade-off-states-disabled-background);border-color:var(--kbq-button-filled-contrast-fade-off-states-disabled-border)}.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-off-states-disabled-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-off-states-disabled-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade{border-color:var(--kbq-button-filled-contrast-fade-on-border);color:var(--kbq-button-filled-contrast-fade-on-foreground);background:var(--kbq-button-filled-contrast-fade-on-background)}.kbq-button.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-on-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-on-right-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_filled.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-active:not(.kbq-disabled){background:var(--kbq-button-filled-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-filled-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-filled-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_filled.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-filled-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_outline,.kbq-button-icon.kbq-button_outline{border-color:var(--kbq-button-outline-contrast-fade-on-border);color:var(--kbq-button-outline-contrast-fade-on-foreground);background:var(--kbq-button-outline-contrast-fade-on-background)}.kbq-button.kbq-button_outline .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-contrast-fade-on-left-icon)}.kbq-button.kbq-button_outline .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-contrast-fade-on-right-icon)}.kbq-button.kbq-button_outline:hover:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-outline-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_outline:active:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-active:not(.kbq-disabled){background:var(--kbq-button-outline-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_outline.kbq-disabled,.kbq-button-icon.kbq-button_outline.kbq-disabled{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-outline-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-outline-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_outline.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_outline.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade,.kbq-button-icon.kbq-button_outline.kbq-theme-fade{border-color:var(--kbq-button-outline-theme-fade-on-border);color:var(--kbq-button-outline-theme-fade-on-foreground);background:var(--kbq-button-outline-theme-fade-on-background)}.kbq-button.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-theme-fade-on-left-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-theme-fade .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-theme-fade-on-right-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade:hover:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-outline-theme-fade-on-states-hover-background)}.kbq-button.kbq-button_outline.kbq-theme-fade:active:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-active:not(.kbq-disabled){background:var(--kbq-button-outline-theme-fade-on-states-active-background)}.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled{color:var(--kbq-button-outline-theme-fade-on-states-disabled-foreground);background:var(--kbq-button-outline-theme-fade-on-states-disabled-background);border-color:var(--kbq-button-outline-theme-fade-on-states-disabled-border)}.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-theme-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-theme-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-theme-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade{border-color:var(--kbq-button-outline-contrast-fade-on-border);color:var(--kbq-button-outline-contrast-fade-on-foreground);background:var(--kbq-button-outline-contrast-fade-on-background)}.kbq-button.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-contrast-fade-on-left-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-contrast-fade-on-right-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-outline-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_outline.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-active:not(.kbq-disabled){background:var(--kbq-button-outline-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-outline-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-outline-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_outline.kbq-contrast-fade.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-outline-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_transparent,.kbq-button-icon.kbq-button_transparent{border-color:var(--kbq-button-transparent-contrast-fade-on-border);color:var(--kbq-button-transparent-contrast-fade-on-foreground);background:var(--kbq-button-transparent-contrast-fade-on-background)}.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-contrast-fade-on-left-icon)}.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-contrast-fade-on-right-icon)}.kbq-button.kbq-button_transparent:hover:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-transparent-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_transparent:active:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-active:not(.kbq-disabled){background:var(--kbq-button-transparent-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_transparent.kbq-disabled,.kbq-button-icon.kbq-button_transparent.kbq-disabled{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-transparent-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_transparent.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_transparent.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_transparent.kbq-theme,.kbq-button-icon.kbq-button_transparent.kbq-theme{border-color:var(--kbq-button-transparent-theme-fade-on-border);color:var(--kbq-button-transparent-theme-fade-on-foreground);background:var(--kbq-button-transparent-theme-fade-on-background)}.kbq-button.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-theme-fade-on-left-icon)}.kbq-button.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-theme .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-theme-fade-on-right-icon)}.kbq-button.kbq-button_transparent.kbq-theme:hover:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-theme.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-transparent-theme-fade-on-states-hover-background)}.kbq-button.kbq-button_transparent.kbq-theme:active:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-theme.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-active:not(.kbq-disabled){background:var(--kbq-button-transparent-theme-fade-on-states-active-background)}.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled{color:var(--kbq-button-transparent-theme-fade-on-states-disabled-foreground);background:var(--kbq-button-transparent-theme-fade-on-states-disabled-background);border-color:var(--kbq-button-transparent-theme-fade-on-states-disabled-border)}.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-theme-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-theme.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-theme-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_transparent.kbq-contrast,.kbq-button-icon.kbq-button_transparent.kbq-contrast{border-color:var(--kbq-button-transparent-contrast-fade-on-border);color:var(--kbq-button-transparent-contrast-fade-on-foreground);background:var(--kbq-button-transparent-contrast-fade-on-background)}.kbq-button.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-contrast-fade-on-left-icon)}.kbq-button.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-contrast .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-contrast-fade-on-right-icon)}.kbq-button.kbq-button_transparent.kbq-contrast:hover:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-contrast.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-hover:not(.kbq-disabled){background:var(--kbq-button-transparent-contrast-fade-on-states-hover-background)}.kbq-button.kbq-button_transparent.kbq-contrast:active:not(.kbq-disabled),.kbq-button.kbq-button_transparent.kbq-contrast.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-active:not(.kbq-disabled){background:var(--kbq-button-transparent-contrast-fade-on-states-active-background)}.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-foreground);background:var(--kbq-button-transparent-contrast-fade-on-states-disabled-background);border-color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-border)}.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon)}.kbq-button.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_transparent.kbq-contrast.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon)}.kbq-button.kbq-button_filled.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button.kbq-button_outline.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button.kbq-button_transparent.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button-icon.kbq-button_filled.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button-icon.kbq-button_outline.cdk-keyboard-focused:not(.kbq-disabled),.kbq-button-icon.kbq-button_transparent.cdk-keyboard-focused:not(.kbq-disabled){outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-button,.kbq-button-icon{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n", ".kbq-button,.kbq-button-icon{--kbq-button-size-height: var(--kbq-size-3xl);--kbq-button-size-border-width: var(--kbq-size-border-width);--kbq-button-size-border-radius: var(--kbq-size-border-radius);--kbq-button-size-horizontal-padding: var(--kbq-size-m);--kbq-button-size-content-padding: var(--kbq-size-xs);--kbq-button-icon-size-horizontal-padding: var(--kbq-size-s);--kbq-button-filled-contrast-fade-off-background: var(--kbq-background-contrast);--kbq-button-filled-contrast-fade-off-border: transparent;--kbq-button-filled-contrast-fade-off-foreground: var(--kbq-foreground-on-contrast);--kbq-button-filled-contrast-fade-off-left-icon: var(--kbq-icon-on-contrast);--kbq-button-filled-contrast-fade-off-right-icon: var(--kbq-icon-on-contrast);--kbq-button-filled-contrast-fade-off-states-hover-background: var(--kbq-states-background-contrast-hover);--kbq-button-filled-contrast-fade-off-states-active-background: var(--kbq-states-background-contrast-active);--kbq-button-filled-contrast-fade-off-states-active-hover-background: var(--kbq-states-background-contrast-active);--kbq-button-filled-contrast-fade-off-states-disabled-background: var(--kbq-states-background-disabled);--kbq-button-filled-contrast-fade-off-states-disabled-border: transparent;--kbq-button-filled-contrast-fade-off-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-off-states-disabled-left-icon: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-off-states-disabled-right-icon: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-on-background: var(--kbq-background-contrast-fade);--kbq-button-filled-contrast-fade-on-border: transparent;--kbq-button-filled-contrast-fade-on-foreground: var(--kbq-foreground-contrast);--kbq-button-filled-contrast-fade-on-left-icon: var(--kbq-icon-contrast);--kbq-button-filled-contrast-fade-on-right-icon: var(--kbq-icon-contrast);--kbq-button-filled-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-button-filled-contrast-fade-on-states-active-background: var(--kbq-states-background-contrast-fade-active);--kbq-button-filled-contrast-fade-on-states-active-hover-background: var( --kbq-states-background-contrast-fade-active );--kbq-button-filled-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-button-filled-contrast-fade-on-states-disabled-border: transparent;--kbq-button-filled-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-foreground-disabled);--kbq-button-filled-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-foreground-disabled);--kbq-button-outline-theme-fade-on-background: transparent;--kbq-button-outline-theme-fade-on-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-outline-theme-fade-on-states-hover-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-states-hover-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-states-hover-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-hover-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-outline-theme-fade-on-states-active-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-states-active-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-states-active-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-hover-background: var(--kbq-states-background-transparent-active);--kbq-button-outline-theme-fade-on-states-active-hover-border: var(--kbq-line-theme-fade);--kbq-button-outline-theme-fade-on-states-active-hover-foreground: var(--kbq-foreground-theme);--kbq-button-outline-theme-fade-on-states-active-hover-left-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-active-hover-right-icon: var(--kbq-icon-theme);--kbq-button-outline-theme-fade-on-states-disabled-background: transparent;--kbq-button-outline-theme-fade-on-states-disabled-border: var(--kbq-states-line-disabled);--kbq-button-outline-theme-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-outline-theme-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-outline-theme-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);--kbq-button-outline-contrast-fade-on-background: transparent;--kbq-button-outline-contrast-fade-on-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-outline-contrast-fade-on-states-hover-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-states-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-states-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-outline-contrast-fade-on-states-active-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-states-active-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-states-active-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-hover-background: var( --kbq-states-background-transparent-active );--kbq-button-outline-contrast-fade-on-states-active-hover-border: var(--kbq-line-contrast-fade);--kbq-button-outline-contrast-fade-on-states-active-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-outline-contrast-fade-on-states-active-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-active-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-outline-contrast-fade-on-states-disabled-background: transparent;--kbq-button-outline-contrast-fade-on-states-disabled-border: var(--kbq-states-line-disabled);--kbq-button-outline-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-outline-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-outline-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-theme-fade-on-border: transparent;--kbq-button-transparent-theme-fade-on-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-background: transparent;--kbq-button-transparent-theme-fade-on-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-hover-border: transparent;--kbq-button-transparent-theme-fade-on-states-hover-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-transparent-theme-fade-on-states-hover-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-hover-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-border: transparent;--kbq-button-transparent-theme-fade-on-states-active-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-transparent-theme-fade-on-states-active-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-hover-border: transparent;--kbq-button-transparent-theme-fade-on-states-active-hover-foreground: var(--kbq-foreground-theme);--kbq-button-transparent-theme-fade-on-states-active-hover-background: var( --kbq-states-background-transparent-active );--kbq-button-transparent-theme-fade-on-states-active-hover-left-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-active-hover-right-icon: var(--kbq-icon-theme);--kbq-button-transparent-theme-fade-on-states-disabled-border: transparent;--kbq-button-transparent-theme-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-transparent-theme-fade-on-states-disabled-background: transparent;--kbq-button-transparent-theme-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-theme-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-contrast-fade-on-border: transparent;--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-background: transparent;--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-hover-border: transparent;--kbq-button-transparent-contrast-fade-on-states-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-button-transparent-contrast-fade-on-states-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-border: transparent;--kbq-button-transparent-contrast-fade-on-states-active-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-states-active-background: var(--kbq-states-background-transparent-active);--kbq-button-transparent-contrast-fade-on-states-active-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-hover-border: transparent;--kbq-button-transparent-contrast-fade-on-states-active-hover-foreground: var(--kbq-foreground-contrast);--kbq-button-transparent-contrast-fade-on-states-active-hover-background: var( --kbq-states-background-transparent-active );--kbq-button-transparent-contrast-fade-on-states-active-hover-left-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-active-hover-right-icon: var(--kbq-icon-contrast);--kbq-button-transparent-contrast-fade-on-states-disabled-border: transparent;--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);--kbq-button-transparent-contrast-fade-on-states-disabled-background: transparent;--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled)}\n"] }]
|
|
468
|
+
}], ctorParameters: () => [], propDecorators: { titleText: [{ type: i0.ViewChild, args: ['kbqTitleText', { isSignal: true }] }], parentText: [{ type: i0.ViewChild, args: ['parentTextElement', { isSignal: true }] }], kbqStyleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqStyle", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }] } });
|
|
261
469
|
|
|
262
470
|
/**
|
|
263
471
|
* Root directive that groups related buttons,
|
|
@@ -266,10 +474,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
|
|
|
266
474
|
class KbqButtonGroupRoot extends KbqColorDirective {
|
|
267
475
|
/**
|
|
268
476
|
* Style applied to the group and propagated to every nested button.
|
|
269
|
-
*
|
|
477
|
+
* A button that sets its own `kbqStyle` keeps it.
|
|
270
478
|
*/
|
|
271
|
-
// TODO: Skipped for migration because:
|
|
272
|
-
// Accessor inputs cannot be migrated as they are too complex.
|
|
273
479
|
get kbqStyle() {
|
|
274
480
|
return this._kbqStyle && `kbq-button-group-root_${this._kbqStyle}`;
|
|
275
481
|
}
|
|
@@ -278,23 +484,11 @@ class KbqButtonGroupRoot extends KbqColorDirective {
|
|
|
278
484
|
this.updateStyle(this._kbqStyle, this.buttons?.());
|
|
279
485
|
}
|
|
280
486
|
/**
|
|
281
|
-
*
|
|
282
|
-
*
|
|
487
|
+
* Whether the root is disabled. Disabling the group disables every nested button; re-enabling it
|
|
488
|
+
* leaves buttons that are disabled through their own input untouched.
|
|
489
|
+
*
|
|
490
|
+
* Stays `undefined` while the input is unbound so that nested buttons are not force-enabled.
|
|
283
491
|
*/
|
|
284
|
-
// TODO: Skipped for migration because:
|
|
285
|
-
// Accessor inputs cannot be migrated as they are too complex.
|
|
286
|
-
get color() {
|
|
287
|
-
return this._color;
|
|
288
|
-
}
|
|
289
|
-
set color(value) {
|
|
290
|
-
if (!value)
|
|
291
|
-
return;
|
|
292
|
-
super.color = value;
|
|
293
|
-
this.updateColor(this.color, this.buttons?.());
|
|
294
|
-
}
|
|
295
|
-
/** Whether the root is disabled. */
|
|
296
|
-
// TODO: Skipped for migration because:
|
|
297
|
-
// Accessor inputs cannot be migrated as they are too complex.
|
|
298
492
|
get disabled() {
|
|
299
493
|
return this._disabled;
|
|
300
494
|
}
|
|
@@ -302,34 +496,65 @@ class KbqButtonGroupRoot extends KbqColorDirective {
|
|
|
302
496
|
this._disabled = value;
|
|
303
497
|
this.updateDisabledState(this._disabled, this.buttons?.());
|
|
304
498
|
}
|
|
499
|
+
ngOnChanges(changes) {
|
|
500
|
+
// A bound input is handed to its member; unbound, it leaves what code wrote.
|
|
501
|
+
if (changes['kbqStyleInput']) {
|
|
502
|
+
this.kbqStyle = this.kbqStyleInput();
|
|
503
|
+
}
|
|
504
|
+
if (changes['disabledInput']) {
|
|
505
|
+
const disabled = this.disabledInput();
|
|
506
|
+
if (disabled !== undefined)
|
|
507
|
+
this.disabled = disabled;
|
|
508
|
+
}
|
|
509
|
+
}
|
|
305
510
|
constructor() {
|
|
306
511
|
super();
|
|
307
|
-
this.buttons = contentChildren(KbqButton, ...(ngDevMode ? [{ debugName: "buttons" }] : []));
|
|
512
|
+
this.buttons = contentChildren(KbqButton, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
|
|
513
|
+
/** Empty until the input is bound, so that an unstyled group emits no root style class. */
|
|
308
514
|
this._kbqStyle = '';
|
|
309
|
-
|
|
515
|
+
/**
|
|
516
|
+
* Color propagated to every nested button: a bound `color`, or one set in code other than the
|
|
517
|
+
* group's own default. Nothing is propagated otherwise, and every nested button follows the
|
|
518
|
+
* default color of its style. A button that sets its own `color` keeps it.
|
|
519
|
+
*/
|
|
520
|
+
this.propagatedColor = computed(() => {
|
|
521
|
+
const color = this.color();
|
|
522
|
+
return this.colorInput() || color !== this.defaultColor() ? color : undefined;
|
|
523
|
+
}, ...(ngDevMode ? [{ debugName: "propagatedColor" }] : /* istanbul ignore next */ []));
|
|
524
|
+
/** @docs-private */
|
|
525
|
+
this.kbqStyleInput = input(undefined, { ...(ngDevMode ? { debugName: "kbqStyleInput" } : /* istanbul ignore next */ {}), alias: 'kbqStyle' });
|
|
526
|
+
/** @docs-private */
|
|
527
|
+
this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
|
|
528
|
+
transform: booleanAttribute });
|
|
529
|
+
// The group's own default styles the root element (see `button-group.scss`) but is not
|
|
530
|
+
// propagated, so every nested button is free to follow the default color of its own style.
|
|
310
531
|
this.setDefaultColor(KbqComponentColors.ContrastFade);
|
|
532
|
+
effect(() => {
|
|
533
|
+
const color = this.propagatedColor();
|
|
534
|
+
this.buttons().forEach((button) => button.setColorFromGroup(color));
|
|
535
|
+
});
|
|
311
536
|
effect(() => {
|
|
312
537
|
const buttons = this.buttons();
|
|
313
|
-
this.updateColor(this.color, buttons);
|
|
314
538
|
this.updateStyle(this._kbqStyle, buttons);
|
|
315
|
-
this.updateDisabledState(this.
|
|
539
|
+
this.updateDisabledState(this._disabled, buttons);
|
|
316
540
|
});
|
|
317
541
|
}
|
|
318
|
-
updateColor(color, buttons) {
|
|
319
|
-
buttons?.forEach((button) => (button.color = color));
|
|
320
|
-
}
|
|
321
542
|
updateStyle(style, buttons) {
|
|
322
|
-
|
|
543
|
+
// Empty only while the input is unbound, and a button already defaults to `filled` on its
|
|
544
|
+
// own, so there is nothing to propagate.
|
|
545
|
+
if (!style)
|
|
546
|
+
return;
|
|
547
|
+
buttons?.forEach((button) => button.setKbqStyleFromGroup(style));
|
|
323
548
|
}
|
|
324
549
|
updateDisabledState(state, buttons) {
|
|
325
550
|
if (state === undefined)
|
|
326
551
|
return;
|
|
327
|
-
buttons?.forEach((button) =>
|
|
552
|
+
buttons?.forEach((button) => button.setDisabledFromGroup(state));
|
|
328
553
|
}
|
|
329
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
330
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "
|
|
554
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonGroupRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
555
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.25", type: KbqButtonGroupRoot, isStandalone: true, selector: "[kbqButtonGroupRoot]", inputs: { kbqStyleInput: { classPropertyName: "kbqStyleInput", publicName: "kbqStyle", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "kbqStyle" } }, queries: [{ propertyName: "buttons", predicate: KbqButton, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
|
|
331
556
|
}
|
|
332
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonGroupRoot, decorators: [{
|
|
333
558
|
type: Directive,
|
|
334
559
|
args: [{
|
|
335
560
|
selector: '[kbqButtonGroupRoot]',
|
|
@@ -337,48 +562,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
|
|
|
337
562
|
'[class]': 'kbqStyle'
|
|
338
563
|
}
|
|
339
564
|
}]
|
|
340
|
-
}], ctorParameters: () => [], propDecorators: { buttons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqButton), { isSignal: true }] }], kbqStyle: [{
|
|
341
|
-
type: Input
|
|
342
|
-
}], color: [{
|
|
343
|
-
type: Input
|
|
344
|
-
}], disabled: [{
|
|
345
|
-
type: Input,
|
|
346
|
-
args: [{ transform: booleanAttribute }]
|
|
347
|
-
}] } });
|
|
565
|
+
}], ctorParameters: () => [], propDecorators: { buttons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqButton), { isSignal: true }] }], kbqStyleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqStyle", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
348
566
|
/** Groups and styling related `KbqButton`s into a single visual unit. */
|
|
349
567
|
class KbqButtonGroup {
|
|
350
568
|
constructor() {
|
|
351
569
|
/**
|
|
352
|
-
* Layout direction: `'horizontal'` or `'vertical'`
|
|
353
|
-
* @default 'horizontal'
|
|
570
|
+
* Layout direction: `'horizontal'` or `'vertical'`. Defaults to `'horizontal'`.
|
|
354
571
|
*/
|
|
355
|
-
this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
|
|
572
|
+
this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
356
573
|
}
|
|
357
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
358
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
574
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
575
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KbqButtonGroup, isStandalone: true, selector: "kbq-button-group, [kbq-button-group]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "\"kbq-button-group_\" + orientation()" }, classAttribute: "kbq-button-group" }, hostDirectives: [{ directive: KbqButtonGroupRoot, inputs: ["color", "color", "kbqStyle", "kbqStyle", "disabled", "disabled"] }], ngImport: i0, template: `
|
|
359
576
|
<ng-content />
|
|
360
|
-
`, isInline: true, styles: [".kbq-button-group.kbq-button-group_horizontal{display:flex;flex-direction:row}.kbq-button-group.kbq-button-group_horizontal_justified>:is(.kbq-button,.kbq-button-icon){width:100%}.kbq-button-group.kbq-button-group_horizontal :is(.kbq-button,.kbq-button-icon)+:is(.kbq-button,.kbq-button-icon){margin-
|
|
577
|
+
`, isInline: true, styles: [".kbq-button-group.kbq-button-group_horizontal{display:flex;flex-direction:row}.kbq-button-group.kbq-button-group_horizontal_justified>:is(.kbq-button,.kbq-button-icon){width:100%}.kbq-button-group.kbq-button-group_horizontal :is(.kbq-button,.kbq-button-icon)+:is(.kbq-button,.kbq-button-icon){margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-button-group.kbq-button-group_horizontal>:is(.kbq-button,.kbq-button-icon):first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-button-group.kbq-button-group_horizontal>:is(.kbq-button,.kbq-button-icon):last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.kbq-button-group.kbq-button-group_horizontal>:is(.kbq-button,.kbq-button-icon):not(:first-child):not(:last-child){border-radius:0}.kbq-button-group.kbq-button-group_horizontal>:is(.kbq-button,.kbq-button-icon):not(:last-child,.cdk-keyboard-focused){border-right-color:transparent}.kbq-button-group.kbq-button-group_vertical{display:flex;flex-direction:column}.kbq-button-group.kbq-button-group_vertical>:is(.kbq-button,.kbq-button-icon):first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-button-group.kbq-button-group_vertical>:is(.kbq-button,.kbq-button-icon):first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-button-group.kbq-button-group_vertical>:is(.kbq-button,.kbq-button-icon):last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-button-group.kbq-button-group_vertical>:is(.kbq-button,.kbq-button-icon):last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-button-group.kbq-button-group_vertical>:is(.kbq-button,.kbq-button-icon):not(:first-child):not(:last-child){border-radius:0}.kbq-button-group.kbq-button-group_vertical :is(.kbq-button,.kbq-button-icon)+:is(.kbq-button,.kbq-button-icon){margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-button-group.kbq-button-group_vertical>:is(.kbq-button,.kbq-button-icon):not(:last-child,.cdk-keyboard-focused){border-bottom-color:transparent}.kbq-button-group:not(:has(>:not(.kbq-contrast-fade.kbq-button_filled))) :is(.kbq-button,.kbq-button-icon),.kbq-button-group:not(:has(>:not(.kbq-contrast.kbq-button_filled))) :is(.kbq-button,.kbq-button-icon){background-clip:padding-box!important}.kbq-button-group.kbq-contrast-fade.kbq-button-group-root_filled{--button-group-divider-color: var(--kbq-line-contrast-fade)}.kbq-button-group.kbq-contrast-fade.kbq-button-group-root_filled.kbq-button-group_horizontal :is(.kbq-button,.kbq-button-icon):not(:first-child):before{content:\"\";position:absolute;left:calc(-1 * var(--kbq-size-border-width));top:0;bottom:0;width:var(--kbq-size-border-width);background:var(--button-group-divider-color)}.kbq-button-group.kbq-contrast-fade.kbq-button-group-root_filled.kbq-button-group_vertical :is(.kbq-button,.kbq-button-icon):not(:first-child):before{content:\"\";position:absolute;top:calc(-1 * var(--kbq-size-border-width));left:0;right:0;height:var(--kbq-size-border-width);background:var(--button-group-divider-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
361
578
|
}
|
|
362
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
579
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonGroup, decorators: [{
|
|
363
580
|
type: Component,
|
|
364
581
|
args: [{ selector: 'kbq-button-group, [kbq-button-group]', template: `
|
|
365
582
|
<ng-content />
|
|
366
583
|
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
367
584
|
role: 'group',
|
|
368
585
|
class: 'kbq-button-group',
|
|
369
|
-
'[class]': '"kbq-button-group_" + orientation()'
|
|
370
|
-
'[attr.aria-orientation]': 'orientation()'
|
|
586
|
+
'[class]': '"kbq-button-group_" + orientation()'
|
|
371
587
|
}, hostDirectives: [
|
|
372
588
|
{ directive: KbqButtonGroupRoot, inputs: ['color', 'kbqStyle', 'disabled'] }
|
|
373
|
-
], styles: [".kbq-button-group.kbq-button-group_horizontal{display:flex;flex-direction:row}.kbq-button-group.kbq-button-group_horizontal_justified>:is(.kbq-button,.kbq-button-icon){width:100%}.kbq-button-group.kbq-button-group_horizontal :is(.kbq-button,.kbq-button-icon)+:is(.kbq-button,.kbq-button-icon){margin-
|
|
589
|
+
], styles: [".kbq-button-group.kbq-button-group_horizontal{display:flex;flex-direction:row}.kbq-button-group.kbq-button-group_horizontal_justified>:is(.kbq-button,.kbq-button-icon){width:100%}.kbq-button-group.kbq-button-group_horizontal :is(.kbq-button,.kbq-button-icon)+:is(.kbq-button,.kbq-button-icon){margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-button-group.kbq-button-group_horizontal>:is(.kbq-button,.kbq-button-icon):first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-button-group.kbq-button-group_horizontal>:is(.kbq-button,.kbq-button-icon):last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.kbq-button-group.kbq-button-group_horizontal>:is(.kbq-button,.kbq-button-icon):not(:first-child):not(:last-child){border-radius:0}.kbq-button-group.kbq-button-group_horizontal>:is(.kbq-button,.kbq-button-icon):not(:last-child,.cdk-keyboard-focused){border-right-color:transparent}.kbq-button-group.kbq-button-group_vertical{display:flex;flex-direction:column}.kbq-button-group.kbq-button-group_vertical>:is(.kbq-button,.kbq-button-icon):first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-button-group.kbq-button-group_vertical>:is(.kbq-button,.kbq-button-icon):first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-button-group.kbq-button-group_vertical>:is(.kbq-button,.kbq-button-icon):last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-button-group.kbq-button-group_vertical>:is(.kbq-button,.kbq-button-icon):last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-button-group.kbq-button-group_vertical>:is(.kbq-button,.kbq-button-icon):not(:first-child):not(:last-child){border-radius:0}.kbq-button-group.kbq-button-group_vertical :is(.kbq-button,.kbq-button-icon)+:is(.kbq-button,.kbq-button-icon){margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-button-group.kbq-button-group_vertical>:is(.kbq-button,.kbq-button-icon):not(:last-child,.cdk-keyboard-focused){border-bottom-color:transparent}.kbq-button-group:not(:has(>:not(.kbq-contrast-fade.kbq-button_filled))) :is(.kbq-button,.kbq-button-icon),.kbq-button-group:not(:has(>:not(.kbq-contrast.kbq-button_filled))) :is(.kbq-button,.kbq-button-icon){background-clip:padding-box!important}.kbq-button-group.kbq-contrast-fade.kbq-button-group-root_filled{--button-group-divider-color: var(--kbq-line-contrast-fade)}.kbq-button-group.kbq-contrast-fade.kbq-button-group-root_filled.kbq-button-group_horizontal :is(.kbq-button,.kbq-button-icon):not(:first-child):before{content:\"\";position:absolute;left:calc(-1 * var(--kbq-size-border-width));top:0;bottom:0;width:var(--kbq-size-border-width);background:var(--button-group-divider-color)}.kbq-button-group.kbq-contrast-fade.kbq-button-group-root_filled.kbq-button-group_vertical :is(.kbq-button,.kbq-button-icon):not(:first-child):before{content:\"\";position:absolute;top:calc(-1 * var(--kbq-size-border-width));left:0;right:0;height:var(--kbq-size-border-width);background:var(--button-group-divider-color)}\n"] }]
|
|
374
590
|
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
|
|
375
591
|
|
|
376
592
|
/** Marks content to be projected into the prefix (leading) slot of a button. */
|
|
377
593
|
class KbqButtonPrefix {
|
|
378
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
379
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
594
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
595
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqButtonPrefix, isStandalone: true, selector: "[kbqButtonPrefix]", host: { classAttribute: "kbq-button-prefix" }, ngImport: i0 }); }
|
|
380
596
|
}
|
|
381
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
597
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonPrefix, decorators: [{
|
|
382
598
|
type: Directive,
|
|
383
599
|
args: [{
|
|
384
600
|
selector: '[kbqButtonPrefix]',
|
|
@@ -389,10 +605,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
|
|
|
389
605
|
}] });
|
|
390
606
|
/** Marks content to be projected into the suffix (trailing) slot of a button. */
|
|
391
607
|
class KbqButtonSuffix {
|
|
392
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
393
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
608
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
609
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqButtonSuffix, isStandalone: true, selector: "[kbqButtonSuffix]", host: { classAttribute: "kbq-button-suffix" }, ngImport: i0 }); }
|
|
394
610
|
}
|
|
395
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
611
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonSuffix, decorators: [{
|
|
396
612
|
type: Directive,
|
|
397
613
|
args: [{
|
|
398
614
|
selector: '[kbqButtonSuffix]',
|
|
@@ -413,10 +629,10 @@ class KbqButtonDropdownTrigger {
|
|
|
413
629
|
constructor() {
|
|
414
630
|
this.dropdownTrigger = inject(KbqDropdownTrigger);
|
|
415
631
|
}
|
|
416
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
417
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
632
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonDropdownTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
633
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqButtonDropdownTrigger, isStandalone: true, selector: "[kbq-button][kbqDropdownTriggerFor]", host: { properties: { "class.kbq-active": "dropdownTrigger.opened" } }, ngImport: i0 }); }
|
|
418
634
|
}
|
|
419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonDropdownTrigger, decorators: [{
|
|
420
636
|
type: Directive,
|
|
421
637
|
args: [{
|
|
422
638
|
selector: `[kbq-button][kbqDropdownTriggerFor]`,
|
|
@@ -427,8 +643,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
|
|
|
427
643
|
}] });
|
|
428
644
|
|
|
429
645
|
class KbqButtonModule {
|
|
430
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
431
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
646
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
647
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonModule, imports: [A11yModule,
|
|
432
648
|
PlatformModule,
|
|
433
649
|
ObserversModule,
|
|
434
650
|
KbqButtonDropdownTrigger,
|
|
@@ -444,11 +660,11 @@ class KbqButtonModule {
|
|
|
444
660
|
KbqButtonDropdownTrigger,
|
|
445
661
|
KbqButtonGroup,
|
|
446
662
|
KbqButtonGroupRoot] }); }
|
|
447
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
663
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonModule, imports: [A11yModule,
|
|
448
664
|
PlatformModule,
|
|
449
665
|
ObserversModule] }); }
|
|
450
666
|
}
|
|
451
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
667
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonModule, decorators: [{
|
|
452
668
|
type: NgModule,
|
|
453
669
|
args: [{
|
|
454
670
|
imports: [
|