@koobiq/components 18.7.1 → 18.9.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-tokens.scss +1 -13
- package/alert/alert-tokens.scss +1 -36
- package/autocomplete/autocomplete-tokens.scss +1 -8
- package/autocomplete/autocomplete.scss +21 -1
- package/badge/badge-tokens.scss +1 -71
- package/button/button-tokens.scss +1 -140
- package/button-toggle/button-toggle-tokens.scss +1 -32
- package/checkbox/checkbox-tokens.scss +1 -50
- package/code-block/actionbar.component.d.ts +2 -2
- package/code-block/code-block-content.d.ts +28 -0
- package/code-block/code-block-tokens.scss +1 -139
- package/code-block/code-block.component.d.ts +3 -3
- package/code-block/code-block.module.d.ts +3 -3
- package/code-block/code-block.types.d.ts +10 -2
- package/core/forms/forms-tokens.scss +1 -8
- package/core/option/_option-theme.scss +10 -0
- package/core/option/option-tokens.scss +4 -0
- package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss +1 -50
- package/core/styles/_koobiq-theme.scss +3 -2
- package/core/styles/common/_list.scss +6 -8
- package/core/styles/common/_select.scss +3 -2
- package/core/styles/theming/scrollbar-tokens.scss +1 -16
- package/datepicker/datepicker-tokens.scss +1 -21
- package/divider/divider-tokens.scss +1 -7
- package/dl/dl-tokens.scss +1 -8
- package/dropdown/_dropdown-theme.scss +10 -0
- package/dropdown/dropdown-tokens.scss +5 -8
- package/dropdown/dropdown.scss +22 -3
- package/empty-state/empty-state-tokens.scss +1 -8
- package/esm2022/accordion/accordion-trigger.component.mjs +7 -19
- package/esm2022/accordion/accordion.component.mjs +2 -2
- package/esm2022/alert/alert.component.mjs +3 -3
- package/esm2022/autocomplete/autocomplete-trigger.directive.mjs +4 -3
- package/esm2022/autocomplete/autocomplete.component.mjs +3 -3
- package/esm2022/badge/badge.component.mjs +2 -2
- package/esm2022/button/button.component.mjs +3 -3
- package/esm2022/button-toggle/button-toggle.component.mjs +5 -11
- package/esm2022/checkbox/checkbox.mjs +3 -3
- package/esm2022/code-block/actionbar.component.mjs +1 -1
- package/esm2022/code-block/code-block-content.mjs +382 -0
- package/esm2022/code-block/code-block.component.mjs +5 -5
- package/esm2022/code-block/code-block.module.mjs +7 -27
- package/esm2022/code-block/code-block.types.mjs +1 -1
- package/esm2022/core/common-behaviors/common-module.mjs +2 -2
- package/esm2022/core/option/optgroup.mjs +3 -3
- package/esm2022/core/option/option.mjs +3 -3
- package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +2 -2
- package/esm2022/core/version.mjs +2 -2
- package/esm2022/datepicker/calendar-body.component.mjs +3 -3
- package/esm2022/datepicker/calendar-header.component.mjs +3 -3
- package/esm2022/datepicker/datepicker-toggle.component.mjs +3 -3
- package/esm2022/datepicker/datepicker.component.mjs +5 -4
- package/esm2022/datepicker/month-view.component.mjs +3 -3
- package/esm2022/divider/divider.component.mjs +2 -2
- package/esm2022/dl/dl.component.mjs +2 -2
- package/esm2022/dropdown/dropdown-item.component.mjs +3 -3
- package/esm2022/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/empty-state/empty-state.component.mjs +2 -2
- package/esm2022/file-upload/multiple-file-upload.component.mjs +3 -3
- package/esm2022/file-upload/single-file-upload.component.mjs +3 -3
- package/esm2022/form-field/cleaner.mjs +3 -9
- package/esm2022/form-field/form-field.mjs +4 -4
- package/esm2022/form-field/hint.mjs +2 -2
- package/esm2022/form-field/password-hint.mjs +5 -13
- package/esm2022/icon/icon-button.component.mjs +2 -2
- package/esm2022/icon/icon-item.component.mjs +2 -2
- package/esm2022/icon/icon.component.mjs +2 -2
- package/esm2022/list/list-selection.component.mjs +7 -15
- package/esm2022/list/list.component.mjs +2 -2
- package/esm2022/loader-overlay/loader-overlay.component.mjs +3 -3
- package/esm2022/markdown/markdown.component.mjs +7 -21
- package/esm2022/modal/modal.component.mjs +5 -4
- package/esm2022/modal/modal.directive.mjs +5 -17
- package/esm2022/navbar/navbar-item.component.mjs +3 -3
- package/esm2022/navbar/navbar.component.mjs +2 -2
- package/esm2022/navbar/vertical-navbar.component.mjs +5 -13
- package/esm2022/popover/popover-confirm.component.mjs +3 -3
- package/esm2022/popover/popover.component.mjs +3 -3
- package/esm2022/progress-bar/progress-bar.component.mjs +3 -3
- package/esm2022/progress-spinner/progress-spinner.component.mjs +3 -3
- package/esm2022/radio/radio.component.mjs +3 -3
- package/esm2022/risk-level/risk-level.component.mjs +2 -2
- package/esm2022/scrollbar/scrollbar.component.mjs +3 -3
- package/esm2022/select/select.component.mjs +49 -16
- package/esm2022/sidepanel/sidepanel-container.component.mjs +3 -3
- package/esm2022/sidepanel/sidepanel-directives.mjs +7 -29
- package/esm2022/tabs/paginated-tab-header.mjs +32 -30
- package/esm2022/tabs/public-api.mjs +8 -8
- package/esm2022/tabs/tab-body.component.mjs +3 -3
- package/esm2022/tabs/tab-group.component.mjs +34 -52
- package/esm2022/tabs/tab-header.component.mjs +17 -35
- package/esm2022/tabs/tab-nav-bar.mjs +292 -0
- package/esm2022/tabs/tab.component.mjs +6 -5
- package/esm2022/tabs/tabs.module.mjs +39 -45
- package/esm2022/tags/tag-list.component.mjs +2 -2
- package/esm2022/tags/tag.component.mjs +3 -3
- package/esm2022/timezone/timezone-option.component.mjs +3 -3
- package/esm2022/timezone/timezone-select.component.mjs +3 -3
- package/esm2022/toast/toast.component.mjs +3 -3
- package/esm2022/toggle/toggle.component.mjs +3 -3
- package/esm2022/tooltip/tooltip.component.mjs +3 -3
- package/esm2022/tree/toggle.mjs +2 -2
- package/esm2022/tree/tree-option.component.mjs +3 -3
- package/esm2022/tree/tree-selection.component.mjs +2 -2
- package/esm2022/tree/tree.mjs +2 -2
- package/esm2022/tree-select/tree-select.component.mjs +45 -9
- package/fesm2022/koobiq-components-accordion.mjs +8 -20
- package/fesm2022/koobiq-components-accordion.mjs.map +1 -1
- package/fesm2022/koobiq-components-alert.mjs +2 -2
- package/fesm2022/koobiq-components-alert.mjs.map +1 -1
- package/fesm2022/koobiq-components-autocomplete.mjs +5 -4
- package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
- package/fesm2022/koobiq-components-badge.mjs +2 -2
- package/fesm2022/koobiq-components-badge.mjs.map +1 -1
- package/fesm2022/koobiq-components-button-toggle.mjs +4 -10
- package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-button.mjs +2 -2
- package/fesm2022/koobiq-components-button.mjs.map +1 -1
- package/fesm2022/koobiq-components-checkbox.mjs +2 -2
- package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
- package/fesm2022/koobiq-components-code-block.mjs +389 -31
- package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
- package/fesm2022/koobiq-components-core.mjs +8 -8
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/fesm2022/koobiq-components-datepicker.mjs +12 -11
- package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-divider.mjs +2 -2
- package/fesm2022/koobiq-components-divider.mjs.map +1 -1
- package/fesm2022/koobiq-components-dl.mjs +2 -2
- package/fesm2022/koobiq-components-dl.mjs.map +1 -1
- package/fesm2022/koobiq-components-dropdown.mjs +4 -4
- package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-empty-state.mjs +2 -2
- package/fesm2022/koobiq-components-empty-state.mjs.map +1 -1
- package/fesm2022/koobiq-components-file-upload.mjs +4 -4
- package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
- package/fesm2022/koobiq-components-form-field.mjs +11 -25
- package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
- package/fesm2022/koobiq-components-icon.mjs +6 -6
- package/fesm2022/koobiq-components-icon.mjs.map +1 -1
- package/fesm2022/koobiq-components-list.mjs +8 -16
- package/fesm2022/koobiq-components-list.mjs.map +1 -1
- package/fesm2022/koobiq-components-loader-overlay.mjs +2 -2
- package/fesm2022/koobiq-components-loader-overlay.mjs.map +1 -1
- package/fesm2022/koobiq-components-markdown.mjs +6 -20
- package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-modal.mjs +8 -19
- package/fesm2022/koobiq-components-modal.mjs.map +1 -1
- package/fesm2022/koobiq-components-navbar.mjs +8 -16
- package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-popover.mjs +4 -4
- package/fesm2022/koobiq-components-popover.mjs.map +1 -1
- package/fesm2022/koobiq-components-progress-bar.mjs +2 -2
- package/fesm2022/koobiq-components-progress-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-progress-spinner.mjs +2 -2
- package/fesm2022/koobiq-components-progress-spinner.mjs.map +1 -1
- package/fesm2022/koobiq-components-radio.mjs +2 -2
- package/fesm2022/koobiq-components-radio.mjs.map +1 -1
- package/fesm2022/koobiq-components-risk-level.mjs +2 -2
- package/fesm2022/koobiq-components-risk-level.mjs.map +1 -1
- package/fesm2022/koobiq-components-scrollbar.mjs +2 -2
- package/fesm2022/koobiq-components-scrollbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-select.mjs +49 -16
- package/fesm2022/koobiq-components-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-sidepanel.mjs +8 -30
- package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
- package/fesm2022/koobiq-components-tabs.mjs +349 -208
- package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
- package/fesm2022/koobiq-components-tags.mjs +4 -4
- package/fesm2022/koobiq-components-tags.mjs.map +1 -1
- package/fesm2022/koobiq-components-timezone.mjs +4 -4
- package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
- package/fesm2022/koobiq-components-toast.mjs +2 -2
- package/fesm2022/koobiq-components-toast.mjs.map +1 -1
- package/fesm2022/koobiq-components-toggle.mjs +2 -2
- package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-tooltip.mjs +2 -2
- package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree-select.mjs +45 -9
- package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree.mjs +8 -8
- package/fesm2022/koobiq-components-tree.mjs.map +1 -1
- package/file-upload/file-upload-tokens.scss +1 -52
- package/form-field/form-field-tokens.scss +1 -29
- package/form-field/form-field.scss +5 -6
- package/form-field/hint-tokens.scss +1 -22
- package/icon/icon-button-tokens.scss +1 -30
- package/icon/icon-item-tokens.scss +1 -26
- package/icon/icon-tokens.scss +2 -10
- package/link/_link-theme.scss +27 -5
- package/link/link-tokens.scss +1 -21
- package/list/_list-theme.scss +10 -0
- package/list/list-tokens.scss +17 -42
- package/loader-overlay/loader-overlay-tokens.scss +1 -12
- package/markdown/markdown-tokens.scss +1 -34
- package/modal/modal-tokens.scss +1 -12
- package/navbar/navbar-tokens.scss +1 -28
- package/package.json +7 -9
- package/popover/popover-tokens.scss +1 -12
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/light-theme.css +1 -1
- package/prebuilt-themes/theme.css +1 -1
- package/progress-bar/progress-bar-tokens.scss +1 -10
- package/progress-spinner/progress-spinner-tokens.scss +1 -9
- package/radio/radio-tokens.scss +11 -70
- package/risk-level/risk-level-tokens.scss +1 -32
- package/schematics/ng-add/index.js +5 -8
- package/scrollbar/scrollbar-tokens.scss +1 -16
- package/select/select-tokens.scss +1 -8
- package/select/select.component.d.ts +40 -4
- package/select/select.scss +20 -0
- package/sidepanel/sidepanel-tokens.scss +1 -11
- package/tabs/_tabs-common.scss +27 -5
- package/tabs/_tabs-theme.scss +6 -16
- package/tabs/paginated-tab-header.d.ts +23 -21
- package/tabs/public-api.d.ts +7 -7
- package/tabs/tab-group.component.d.ts +21 -24
- package/tabs/tab-group.scss +27 -29
- package/tabs/tab-header.component.d.ts +13 -19
- package/tabs/tab-header.scss +5 -27
- package/tabs/tab-link.scss +14 -0
- package/tabs/tab-nav-bar.d.ts +92 -0
- package/tabs/tab-nav-bar.scss +36 -0
- package/tabs/tab.component.d.ts +1 -0
- package/tabs/tabs-tokens.scss +1 -92
- package/tabs/tabs.module.d.ts +12 -12
- package/tags/tag-tokens.scss +1 -74
- package/timezone/timezone-option-tokens.scss +5 -11
- package/toast/toast-tokens.scss +1 -22
- package/toggle/toggle-tokens.scss +1 -52
- package/tooltip/tooltip-tokens.scss +1 -21
- package/tree/tree-option.scss +11 -0
- package/tree/tree-tokens.scss +1 -37
- package/tree-select/_tree-select-theme.scss +5 -1
- package/tree-select/tree-select-tokens.scss +2 -6
- package/tree-select/tree-select.component.d.ts +45 -5
- package/esm2022/tabs/tab-nav-bar/index.mjs +0 -2
- package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +0 -119
- package/select/README.md +0 -0
- package/tabs/README.md +0 -0
- package/tabs/tab-nav-bar/index.d.ts +0 -1
- package/tabs/tab-nav-bar/tab-nav-bar.d.ts +0 -42
- package/tabs/tab-nav-bar/tab-nav-bar.scss +0 -35
|
@@ -7,58 +7,7 @@
|
|
|
7
7
|
--kbq-toggle-size-big-width: 28px;
|
|
8
8
|
--kbq-toggle-size-big-horizontal-content-padding: var(--kbq-size-s);
|
|
9
9
|
--kbq-toggle-size-big-vertical-content-padding: var(--kbq-size-s);
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
13
|
-
--kbq-toggle-theme-default-border: var(--kbq-line-contrast-fade);
|
|
14
|
-
--kbq-toggle-theme-default-background: var(--kbq-background-bg);
|
|
15
|
-
--kbq-toggle-theme-default-circle-background: var(--kbq-icon-contrast);
|
|
16
|
-
--kbq-toggle-theme-states-hover-border: var(--kbq-line-contrast-fade);
|
|
17
|
-
--kbq-toggle-theme-states-hover-background: var(--kbq-states-background-transparent-hover);
|
|
18
|
-
--kbq-toggle-theme-states-hover-circle-background: var(--kbq-icon-contrast);
|
|
19
|
-
--kbq-toggle-theme-states-checked-border: transparent;
|
|
20
|
-
--kbq-toggle-theme-states-checked-background: var(--kbq-background-theme);
|
|
21
|
-
--kbq-toggle-theme-states-checked-circle-background: var(--kbq-icon-white);
|
|
22
|
-
--kbq-toggle-theme-states-checked-hover-border: transparent;
|
|
23
|
-
--kbq-toggle-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);
|
|
24
|
-
--kbq-toggle-theme-states-checked-hover-circle-background: var(--kbq-icon-white);
|
|
25
|
-
--kbq-toggle-theme-states-focused-border: var(--kbq-states-line-focus-theme);
|
|
26
|
-
--kbq-toggle-theme-states-focused-background: var(--kbq-background-bg);
|
|
27
|
-
--kbq-toggle-theme-states-focused-circle-background: var(--kbq-icon-contrast);
|
|
28
|
-
--kbq-toggle-theme-states-focused-focus-outline: var(--kbq-states-line-focus-theme);
|
|
29
|
-
--kbq-toggle-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);
|
|
30
|
-
--kbq-toggle-theme-states-checked-focused-background: var(--kbq-background-theme);
|
|
31
|
-
--kbq-toggle-theme-states-checked-focused-circle-background: var(--kbq-icon-white);
|
|
32
|
-
--kbq-toggle-theme-states-checked-focused-focus-outline: var(--kbq-states-line-focus-theme);
|
|
33
|
-
--kbq-toggle-theme-states-disabled-border: var(--kbq-states-line-disabled);
|
|
34
|
-
--kbq-toggle-theme-states-disabled-background: var(--kbq-states-background-disabled);
|
|
35
|
-
--kbq-toggle-theme-states-disabled-circle-background: var(--kbq-states-icon-disabled);
|
|
36
|
-
--kbq-toggle-error-default-border: var(--kbq-line-error);
|
|
37
|
-
--kbq-toggle-error-default-background: var(--kbq-background-error-less);
|
|
38
|
-
--kbq-toggle-error-default-circle-background: var(--kbq-icon-error);
|
|
39
|
-
--kbq-toggle-error-states-hover-border: var(--kbq-line-error);
|
|
40
|
-
--kbq-toggle-error-states-hover-background: var(--kbq-states-background-error-fade-hover);
|
|
41
|
-
--kbq-toggle-error-states-hover-circle-background: var(--kbq-icon-error);
|
|
42
|
-
--kbq-toggle-error-states-checked-border: var(--kbq-line-error);
|
|
43
|
-
--kbq-toggle-error-states-checked-background: var(--kbq-background-error);
|
|
44
|
-
--kbq-toggle-error-states-checked-circle-background: var(--kbq-icon-white);
|
|
45
|
-
--kbq-toggle-error-states-checked-hover-border: var(--kbq-line-error);
|
|
46
|
-
--kbq-toggle-error-states-checked-hover-background: var(--kbq-states-background-error-hover);
|
|
47
|
-
--kbq-toggle-error-states-checked-hover-circle-background: var(--kbq-icon-white);
|
|
48
|
-
--kbq-toggle-error-states-focused-border: var(--kbq-states-line-focus-error);
|
|
49
|
-
--kbq-toggle-error-states-focused-background: var(--kbq-states-background-error-less);
|
|
50
|
-
--kbq-toggle-error-states-focused-circle-background: var(--kbq-icon-error);
|
|
51
|
-
--kbq-toggle-error-states-focused-focus-outline: var(--kbq-states-line-focus-error);
|
|
52
|
-
--kbq-toggle-error-states-checked-focused-border: var(--kbq-states-line-focus-error);
|
|
53
|
-
--kbq-toggle-error-states-checked-focused-background: var(--kbq-background-error);
|
|
54
|
-
--kbq-toggle-error-states-checked-focused-circle-background: var(--kbq-icon-white);
|
|
55
|
-
--kbq-toggle-error-states-checked-focused-focus-outline: var(--kbq-states-line-focus-error);
|
|
56
|
-
--kbq-toggle-error-states-disabled-border: var(--kbq-states-line-disabled);
|
|
57
|
-
--kbq-toggle-error-states-disabled-background: var(--kbq-states-background-disabled);
|
|
58
|
-
--kbq-toggle-error-states-disabled-circle-background: var(--kbq-states-icon-disabled);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
10
|
+
/* THEME TOKENS */
|
|
62
11
|
--kbq-toggle-theme-default-border: var(--kbq-line-contrast-fade);
|
|
63
12
|
--kbq-toggle-theme-default-background: var(--kbq-background-bg);
|
|
64
13
|
--kbq-toggle-theme-default-circle-background: var(--kbq-icon-contrast);
|
|
@@ -4,27 +4,7 @@
|
|
|
4
4
|
--kbq-tooltip-size-padding-horizontal: var(--kbq-size-m);
|
|
5
5
|
--kbq-tooltip-size-padding-vertical: var(--kbq-size-s);
|
|
6
6
|
--kbq-tooltip-size-arrow-size: var(--kbq-size-m);
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
10
|
-
--kbq-tooltip-contrast-fade-on-background: var(--kbq-background-card);
|
|
11
|
-
--kbq-tooltip-contrast-fade-on-text: var(--kbq-foreground-contrast);
|
|
12
|
-
--kbq-tooltip-contrast-fade-on-shadow: var(--kbq-shadow-popup);
|
|
13
|
-
--kbq-tooltip-contrast-fade-off-background: var(--kbq-background-night);
|
|
14
|
-
--kbq-tooltip-contrast-fade-off-text: var(--kbq-foreground-white);
|
|
15
|
-
--kbq-tooltip-contrast-fade-off-shadow: var(--kbq-shadow-popup);
|
|
16
|
-
--kbq-tooltip-theme-fade-off-background: var(--kbq-background-theme);
|
|
17
|
-
--kbq-tooltip-theme-fade-off-text: var(--kbq-foreground-white);
|
|
18
|
-
--kbq-tooltip-theme-fade-off-shadow: var(--kbq-shadow-popup);
|
|
19
|
-
--kbq-tooltip-warning-fade-off-background: var(--kbq-background-warning);
|
|
20
|
-
--kbq-tooltip-warning-fade-off-text: var(--kbq-foreground-white);
|
|
21
|
-
--kbq-tooltip-warning-fade-off-shadow: var(--kbq-shadow-popup);
|
|
22
|
-
--kbq-tooltip-error-fade-off-background: var(--kbq-background-error);
|
|
23
|
-
--kbq-tooltip-error-fade-off-text: var(--kbq-foreground-white);
|
|
24
|
-
--kbq-tooltip-error-fade-off-shadow: var(--kbq-shadow-popup);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
7
|
+
/* THEME TOKENS */
|
|
28
8
|
--kbq-tooltip-contrast-fade-on-background: var(--kbq-background-card);
|
|
29
9
|
--kbq-tooltip-contrast-fade-on-text: var(--kbq-foreground-contrast);
|
|
30
10
|
--kbq-tooltip-contrast-fade-on-shadow: var(--kbq-shadow-popup);
|
package/tree/tree-option.scss
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
border-width: var(--kbq-tree-size-container-focus-outline-width);
|
|
17
17
|
border-style: solid;
|
|
18
18
|
border-color: transparent;
|
|
19
|
+
border-radius: var(--kbq-size-border-radius);
|
|
19
20
|
|
|
20
21
|
padding-top: kbq-difference-series-css-variables(
|
|
21
22
|
[ tree-size-container-padding-vertical,
|
|
@@ -67,4 +68,14 @@
|
|
|
67
68
|
display: flex;
|
|
68
69
|
}
|
|
69
70
|
}
|
|
71
|
+
|
|
72
|
+
&:is(.kbq-selected, .kbq-focused, .kbq-active):has(+ :is(.kbq-selected, .kbq-focused, .kbq-active)) {
|
|
73
|
+
border-bottom-left-radius: 0;
|
|
74
|
+
border-bottom-right-radius: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&:is(.kbq-selected, .kbq-focused, .kbq-active) + :is(.kbq-selected, .kbq-focused, .kbq-active) {
|
|
78
|
+
border-top-left-radius: 0;
|
|
79
|
+
border-top-right-radius: 0;
|
|
80
|
+
}
|
|
70
81
|
}
|
package/tree/tree-tokens.scss
CHANGED
|
@@ -7,43 +7,7 @@
|
|
|
7
7
|
--kbq-tree-size-container-content-gap-vertical: 0px;
|
|
8
8
|
--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);
|
|
9
9
|
--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
13
|
-
--kbq-tree-default-container-background: transparent;
|
|
14
|
-
--kbq-tree-default-text-color: var(--kbq-foreground-contrast);
|
|
15
|
-
--kbq-tree-default-icon-color: var(--kbq-icon-contrast);
|
|
16
|
-
--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);
|
|
17
|
-
--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);
|
|
18
|
-
--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);
|
|
19
|
-
--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);
|
|
20
|
-
--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);
|
|
21
|
-
--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);
|
|
22
|
-
--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);
|
|
23
|
-
--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);
|
|
24
|
-
--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);
|
|
25
|
-
--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
|
|
26
|
-
--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);
|
|
27
|
-
--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);
|
|
28
|
-
--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);
|
|
29
|
-
--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);
|
|
30
|
-
--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);
|
|
31
|
-
--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);
|
|
32
|
-
--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);
|
|
33
|
-
--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);
|
|
34
|
-
--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);
|
|
35
|
-
--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);
|
|
36
|
-
--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);
|
|
37
|
-
--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);
|
|
38
|
-
--kbq-tree-states-disabled-container-background: transparent;
|
|
39
|
-
--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);
|
|
40
|
-
--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);
|
|
41
|
-
--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);
|
|
42
|
-
--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);
|
|
43
|
-
--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
10
|
+
/* THEME TOKENS */
|
|
47
11
|
--kbq-tree-default-container-background: transparent;
|
|
48
12
|
--kbq-tree-default-text-color: var(--kbq-foreground-contrast);
|
|
49
13
|
--kbq-tree-default-icon-color: var(--kbq-icon-contrast);
|
|
@@ -24,9 +24,13 @@
|
|
|
24
24
|
background: var(--kbq-select-panel-dropdown-background);
|
|
25
25
|
|
|
26
26
|
& .kbq-select__footer {
|
|
27
|
-
border-color: var(--kbq-divider-color);
|
|
27
|
+
border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
|
+
|
|
31
|
+
.kbq-select__search-container {
|
|
32
|
+
border-bottom-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
|
|
33
|
+
}
|
|
30
34
|
}
|
|
31
35
|
|
|
32
36
|
@mixin kbq-tree-select-typography() {
|
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
1
|
+
.kbq-tree-select__panel {
|
|
2
|
+
/* THEME TOKENS */
|
|
7
3
|
--kbq-select-panel-dropdown-background: var(--kbq-background-card);
|
|
8
4
|
--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
|
|
9
5
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Directionality } from '@angular/cdk/bidi';
|
|
2
2
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
3
|
-
import { CdkConnectedOverlay, ConnectedPosition, ViewportRuler } from '@angular/cdk/overlay';
|
|
4
|
-
import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
|
|
3
|
+
import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition, ViewportRuler } from '@angular/cdk/overlay';
|
|
4
|
+
import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, OnInit, Provider, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
|
|
5
5
|
import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
|
|
6
6
|
import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqLocaleService, KbqSelectMatcher, KbqSelectSearch, KbqSelectTrigger } from '@koobiq/components/core';
|
|
7
7
|
import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
|
|
@@ -9,11 +9,35 @@ import { KbqTag } from '@koobiq/components/tags';
|
|
|
9
9
|
import { KbqTreeOption, KbqTreeSelection } from '@koobiq/components/tree';
|
|
10
10
|
import { Observable, Subject } from 'rxjs';
|
|
11
11
|
import * as i0 from "@angular/core";
|
|
12
|
-
|
|
12
|
+
/** Tree select trigger value type. */
|
|
13
|
+
export type KbqTreeSelectTriggerValue = {
|
|
13
14
|
disabled: boolean;
|
|
14
15
|
value: string;
|
|
15
16
|
viewValue: string;
|
|
17
|
+
};
|
|
18
|
+
/** @deprecated Will be removed in the next major release, use `KbqTreeSelectTriggerValue` instead */
|
|
19
|
+
export interface ITriggerValue extends KbqTreeSelectTriggerValue {
|
|
16
20
|
}
|
|
21
|
+
/** Tree select panel width type. */
|
|
22
|
+
export type KbqTreeSelectPanelWidth = 'auto' | number | null;
|
|
23
|
+
/** Options for the `kbq-tree-select` that can be configured using the `KBQ_TREE_SELECT_OPTIONS` injection token. */
|
|
24
|
+
export type KbqTreeSelectOptions = Partial<{
|
|
25
|
+
/**
|
|
26
|
+
* Width of the panel. If set to `auto`, the panel will match the trigger width.
|
|
27
|
+
* If set to null or an empty string, the panel will grow to match the longest option's text.
|
|
28
|
+
*/
|
|
29
|
+
panelWidth: KbqTreeSelectPanelWidth;
|
|
30
|
+
}>;
|
|
31
|
+
/** Injection token that can be used to provide the default options for the `kbq-tree-select`. */
|
|
32
|
+
export declare const KBQ_TREE_SELECT_OPTIONS: InjectionToken<Partial<{
|
|
33
|
+
/**
|
|
34
|
+
* Width of the panel. If set to `auto`, the panel will match the trigger width.
|
|
35
|
+
* If set to null or an empty string, the panel will grow to match the longest option's text.
|
|
36
|
+
*/
|
|
37
|
+
panelWidth: KbqTreeSelectPanelWidth;
|
|
38
|
+
}>>;
|
|
39
|
+
/** Utility provider for `KBQ_TREE_SELECT_OPTIONS`. */
|
|
40
|
+
export declare const kbqTreeSelectOptionsProvider: (options: KbqTreeSelectOptions) => Provider;
|
|
17
41
|
/** Change event object that is emitted when the select value has changed. */
|
|
18
42
|
export declare class KbqTreeSelectChange {
|
|
19
43
|
source: KbqTreeSelect;
|
|
@@ -47,6 +71,7 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
|
|
|
47
71
|
private readonly dir;
|
|
48
72
|
private readonly parentFormField;
|
|
49
73
|
private localeService?;
|
|
74
|
+
private readonly defaultOptions;
|
|
50
75
|
/** A name for this control that can be used by `kbq-form-field`. */
|
|
51
76
|
controlType: string;
|
|
52
77
|
hiddenItems: number;
|
|
@@ -155,10 +180,23 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
|
|
|
155
180
|
get focused(): boolean;
|
|
156
181
|
set focused(value: boolean);
|
|
157
182
|
private _focused;
|
|
183
|
+
/** Width of the overlay panel. */
|
|
184
|
+
protected overlayWidth: string | number;
|
|
185
|
+
/** Min width of the overlay panel. */
|
|
186
|
+
protected overlayMinWidth: string | number;
|
|
187
|
+
/** Overlay panel class. */
|
|
188
|
+
protected readonly overlayPanelClass = "kbq-select-overlay";
|
|
189
|
+
/** Origin for the overlay panel. */
|
|
190
|
+
protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
|
|
191
|
+
/**
|
|
192
|
+
* Width of the panel. If set to `auto`, the panel will match the trigger width.
|
|
193
|
+
* If set to null or an empty string, the panel will grow to match the longest option's text.
|
|
194
|
+
*/
|
|
195
|
+
panelWidth: KbqTreeSelectPanelWidth;
|
|
158
196
|
get panelOpen(): boolean;
|
|
159
197
|
get canShowCleaner(): boolean;
|
|
160
198
|
isEmptySearchResult: boolean;
|
|
161
|
-
triggerValues:
|
|
199
|
+
triggerValues: KbqTreeSelectTriggerValue[];
|
|
162
200
|
private closeSubscription;
|
|
163
201
|
private _panelOpen;
|
|
164
202
|
private originalOnKeyDown;
|
|
@@ -245,6 +283,8 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
|
|
|
245
283
|
private closingActions;
|
|
246
284
|
private getTotalItemsWidthInMatcher;
|
|
247
285
|
private getTotalVisibleItems;
|
|
286
|
+
/** Gets how wide the overlay panel should be. */
|
|
287
|
+
private getOverlayWidth;
|
|
248
288
|
private buildTriggerClone;
|
|
249
289
|
private getItemWidth;
|
|
250
290
|
private handleClosedKeydown;
|
|
@@ -278,6 +318,6 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
|
|
|
278
318
|
private _compareWith;
|
|
279
319
|
private subscribeOnSearchChanges;
|
|
280
320
|
static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, { optional: true; }]>;
|
|
281
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
|
|
321
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
|
|
282
322
|
}
|
|
283
323
|
export {};
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
export * from './tab-nav-bar';
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21wb25lbnRzL3RhYnMvdGFiLW5hdi1iYXIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxlQUFlLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3RhYi1uYXYtYmFyJztcbiJdfQ==
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import { FocusMonitor } from '@angular/cdk/a11y';
|
|
2
|
-
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
3
|
-
import { Attribute, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, forwardRef, Input, QueryList, Renderer2, ViewEncapsulation } from '@angular/core';
|
|
4
|
-
import { mixinDisabled, mixinTabIndex } from '@koobiq/components/core';
|
|
5
|
-
import * as i0 from "@angular/core";
|
|
6
|
-
import * as i1 from "@angular/cdk/a11y";
|
|
7
|
-
// Boilerplate for applying mixins to KbqTabLink.
|
|
8
|
-
/** @docs-private */
|
|
9
|
-
export class KbqTabLinkBase {
|
|
10
|
-
}
|
|
11
|
-
/** @docs-private */
|
|
12
|
-
export const KbqTabLinkMixinBase = mixinTabIndex(mixinDisabled(KbqTabLinkBase));
|
|
13
|
-
/**
|
|
14
|
-
* Navigation component matching the styles of the tab group header.
|
|
15
|
-
*/
|
|
16
|
-
export class KbqTabNav {
|
|
17
|
-
constructor(vertical) {
|
|
18
|
-
this.vertical = false;
|
|
19
|
-
this.transparent = false;
|
|
20
|
-
this.onSurface = false;
|
|
21
|
-
this.vertical = coerceBooleanProperty(vertical);
|
|
22
|
-
}
|
|
23
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabNav, deps: [{ token: 'vertical', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqTabNav, selector: "[kbq-tab-nav-bar]", inputs: { transparent: "transparent", onSurface: "onSurface" }, host: { properties: { "class.kbq-tab-nav-bar_filled": "!transparent", "class.kbq-tab-nav-bar_transparent": "transparent", "class.kbq-tab-nav-bar_on-background": "!onSurface", "class.kbq-tab-nav-bar_on-surface": "onSurface" }, classAttribute: "kbq-tab-nav-bar" }, queries: [{ propertyName: "links", predicate: i0.forwardRef(() => KbqTabLink) }], exportAs: ["kbqTabNavBar", "kbqTabNav"], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}.kbq-tab-nav-bar{display:flex;flex-grow:1;position:relative}.kbq-tab-nav-bar .kbq-tab-group_align-labels-center{justify-content:center}.kbq-tab-nav-bar .kbq-tab-group_align-labels-end{justify-content:flex-end}.kbq-tab-nav-bar.kbq-tab-group_vertical{flex-direction:column;flex-grow:0;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
25
|
-
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabNav, decorators: [{
|
|
27
|
-
type: Component,
|
|
28
|
-
args: [{ selector: '[kbq-tab-nav-bar]', exportAs: 'kbqTabNavBar, kbqTabNav', template: '<ng-content />', host: {
|
|
29
|
-
class: 'kbq-tab-nav-bar',
|
|
30
|
-
'[class.kbq-tab-nav-bar_filled]': '!transparent',
|
|
31
|
-
'[class.kbq-tab-nav-bar_transparent]': 'transparent',
|
|
32
|
-
'[class.kbq-tab-nav-bar_on-background]': '!onSurface',
|
|
33
|
-
'[class.kbq-tab-nav-bar_on-surface]': 'onSurface'
|
|
34
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}.kbq-tab-nav-bar{display:flex;flex-grow:1;position:relative}.kbq-tab-nav-bar .kbq-tab-group_align-labels-center{justify-content:center}.kbq-tab-nav-bar .kbq-tab-group_align-labels-end{justify-content:flex-end}.kbq-tab-nav-bar.kbq-tab-group_vertical{flex-direction:column;flex-grow:0;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"] }]
|
|
35
|
-
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
36
|
-
type: Attribute,
|
|
37
|
-
args: ['vertical']
|
|
38
|
-
}] }], propDecorators: { transparent: [{
|
|
39
|
-
type: Input
|
|
40
|
-
}], onSurface: [{
|
|
41
|
-
type: Input
|
|
42
|
-
}], links: [{
|
|
43
|
-
type: ContentChildren,
|
|
44
|
-
args: [forwardRef(() => KbqTabLink)]
|
|
45
|
-
}] } });
|
|
46
|
-
/**
|
|
47
|
-
* Link inside of a `kbq-tab-nav-bar`.
|
|
48
|
-
*/
|
|
49
|
-
export class KbqTabLink extends KbqTabLinkMixinBase {
|
|
50
|
-
get vertical() {
|
|
51
|
-
return this.tabNav.vertical;
|
|
52
|
-
}
|
|
53
|
-
/** Whether the link is active. */
|
|
54
|
-
get active() {
|
|
55
|
-
return this.isActive;
|
|
56
|
-
}
|
|
57
|
-
set active(value) {
|
|
58
|
-
if (value !== this.isActive) {
|
|
59
|
-
this.isActive = value;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
constructor(elementRef, focusMonitor, renderer, tabNav) {
|
|
63
|
-
super();
|
|
64
|
-
this.elementRef = elementRef;
|
|
65
|
-
this.focusMonitor = focusMonitor;
|
|
66
|
-
this.renderer = renderer;
|
|
67
|
-
this.tabNav = tabNav;
|
|
68
|
-
/** Whether the tab link is active or not. */
|
|
69
|
-
this.isActive = false;
|
|
70
|
-
this.focusMonitor.monitor(this.elementRef.nativeElement);
|
|
71
|
-
}
|
|
72
|
-
ngAfterViewInit() {
|
|
73
|
-
this.addClassModifierForIcons(Array.from(this.elementRef.nativeElement.querySelectorAll('.kbq-icon')));
|
|
74
|
-
}
|
|
75
|
-
ngOnDestroy() {
|
|
76
|
-
this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
|
|
77
|
-
}
|
|
78
|
-
addClassModifierForIcons(icons) {
|
|
79
|
-
const twoIcons = 2;
|
|
80
|
-
const [firstIconElement, secondIconElement] = icons;
|
|
81
|
-
if (icons.length === 1) {
|
|
82
|
-
const COMMENT_NODE = 8;
|
|
83
|
-
if (firstIconElement.nextSibling && firstIconElement.nextSibling.nodeType !== COMMENT_NODE) {
|
|
84
|
-
this.renderer.addClass(firstIconElement, 'kbq-icon_left');
|
|
85
|
-
}
|
|
86
|
-
if (firstIconElement.previousSibling && firstIconElement.previousSibling.nodeType !== COMMENT_NODE) {
|
|
87
|
-
this.renderer.addClass(firstIconElement, 'kbq-icon_right');
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
else if (icons.length === twoIcons) {
|
|
91
|
-
this.renderer.addClass(firstIconElement, 'kbq-icon_left');
|
|
92
|
-
this.renderer.addClass(secondIconElement, 'kbq-icon_right');
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabLink, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: i0.Renderer2 }, { token: KbqTabNav }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
96
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqTabLink, selector: "a[kbq-tab-link], a[kbqTabLink]", inputs: { disabled: "disabled", tabIndex: "tabIndex", active: "active" }, host: { properties: { "class.kbq-selected": "active", "class.kbq-tab-label_vertical": "vertical", "class.kbq-tab-label_horizontal": "!vertical", "class.kbq-disabled": "disabled", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tab-link" }, exportAs: ["kbqTabLink"], usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
97
|
-
}
|
|
98
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqTabLink, decorators: [{
|
|
99
|
-
type: Component,
|
|
100
|
-
args: [{
|
|
101
|
-
selector: 'a[kbq-tab-link], a[kbqTabLink]',
|
|
102
|
-
exportAs: 'kbqTabLink',
|
|
103
|
-
template: '<ng-content />',
|
|
104
|
-
inputs: ['disabled', 'tabIndex'],
|
|
105
|
-
host: {
|
|
106
|
-
class: 'kbq-tab-link',
|
|
107
|
-
'[class.kbq-selected]': 'active',
|
|
108
|
-
'[class.kbq-tab-label_vertical]': 'vertical',
|
|
109
|
-
'[class.kbq-tab-label_horizontal]': '!vertical',
|
|
110
|
-
'[class.kbq-disabled]': 'disabled',
|
|
111
|
-
'[attr.tabindex]': 'tabIndex',
|
|
112
|
-
'[attr.disabled]': 'disabled || null'
|
|
113
|
-
},
|
|
114
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
115
|
-
}]
|
|
116
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: i0.Renderer2 }, { type: KbqTabNav }], propDecorators: { active: [{
|
|
117
|
-
type: Input
|
|
118
|
-
}] } });
|
|
119
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLW5hdi1iYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21wb25lbnRzL3RhYnMvdGFiLW5hdi1iYXIvdGFiLW5hdi1iYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ2pELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzlELE9BQU8sRUFFSCxTQUFTLEVBQ1QsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsVUFBVSxFQUNWLFVBQVUsRUFDVixLQUFLLEVBRUwsU0FBUyxFQUNULFNBQVMsRUFDVCxpQkFBaUIsRUFDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUtILGFBQWEsRUFDYixhQUFhLEVBQ2hCLE1BQU0seUJBQXlCLENBQUM7OztBQUVqQyxpREFBaUQ7QUFDakQsb0JBQW9CO0FBQ3BCLE1BQU0sT0FBTyxjQUFjO0NBQUc7QUFFOUIsb0JBQW9CO0FBQ3BCLE1BQU0sQ0FBQyxNQUFNLG1CQUFtQixHQUE2RCxhQUFhLENBQ3RHLGFBQWEsQ0FBQyxjQUFjLENBQUMsQ0FDaEMsQ0FBQztBQUVGOztHQUVHO0FBZ0JILE1BQU0sT0FBTyxTQUFTO0lBUWxCLFlBQW1DLFFBQWdCO1FBUG5ELGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFUixnQkFBVyxHQUFZLEtBQUssQ0FBQztRQUM3QixjQUFTLEdBQVksS0FBSyxDQUFDO1FBS2hDLElBQUksQ0FBQyxRQUFRLEdBQUcscUJBQXFCLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDcEQsQ0FBQztpSUFWUSxTQUFTLGtCQVFLLFVBQVU7cUhBUnhCLFNBQVMsMGFBTWdCLFVBQVUsdUVBbEJsQyxnQkFBZ0I7OzJGQVlqQixTQUFTO2tCQWZyQixTQUFTOytCQUNJLG1CQUFtQixZQUNuQix5QkFBeUIsWUFDekIsZ0JBQWdCLFFBRXBCO3dCQUNGLEtBQUssRUFBRSxpQkFBaUI7d0JBQ3hCLGdDQUFnQyxFQUFFLGNBQWM7d0JBQ2hELHFDQUFxQyxFQUFFLGFBQWE7d0JBQ3BELHVDQUF1QyxFQUFFLFlBQVk7d0JBQ3JELG9DQUFvQyxFQUFFLFdBQVc7cUJBQ3BELGlCQUNjLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU07OzBCQVVsQyxTQUFTOzJCQUFDLFVBQVU7eUNBTHhCLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFFeUMsS0FBSztzQkFBbkQsZUFBZTt1QkFBQyxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsVUFBVSxDQUFDOztBQU9qRDs7R0FFRztBQWtCSCxNQUFNLE9BQU8sVUFBVyxTQUFRLG1CQUFtQjtJQUMvQyxJQUFJLFFBQVE7UUFDUixPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDO0lBQ2hDLENBQUM7SUFFRCxrQ0FBa0M7SUFDbEMsSUFDSSxNQUFNO1FBQ04sT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxJQUFJLE1BQU0sQ0FBQyxLQUFjO1FBQ3JCLElBQUksS0FBSyxLQUFLLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUMxQixJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztRQUMxQixDQUFDO0lBQ0wsQ0FBQztJQUtELFlBQ1csVUFBc0IsRUFDWixZQUEwQixFQUMxQixRQUFtQixFQUM1QixNQUFpQjtRQUV6QixLQUFLLEVBQUUsQ0FBQztRQUxELGVBQVUsR0FBVixVQUFVLENBQVk7UUFDWixpQkFBWSxHQUFaLFlBQVksQ0FBYztRQUMxQixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQzVCLFdBQU0sR0FBTixNQUFNLENBQVc7UUFQN0IsNkNBQTZDO1FBQ25DLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFVaEMsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUM3RCxDQUFDO0lBRUQsZUFBZTtRQUNYLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUMzRyxDQUFDO0lBRUQsV0FBVztRQUNQLElBQUksQ0FBQyxZQUFZLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDcEUsQ0FBQztJQUVPLHdCQUF3QixDQUFDLEtBQW9CO1FBQ2pELE1BQU0sUUFBUSxHQUFHLENBQUMsQ0FBQztRQUNuQixNQUFNLENBQUMsZ0JBQWdCLEVBQUUsaUJBQWlCLENBQUMsR0FBRyxLQUFLLENBQUM7UUFFcEQsSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ3JCLE1BQU0sWUFBWSxHQUFHLENBQUMsQ0FBQztZQUV2QixJQUFJLGdCQUFnQixDQUFDLFdBQVcsSUFBSSxnQkFBZ0IsQ0FBQyxXQUFXLENBQUMsUUFBUSxLQUFLLFlBQVksRUFBRSxDQUFDO2dCQUN6RixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxnQkFBZ0IsRUFBRSxlQUFlLENBQUMsQ0FBQztZQUM5RCxDQUFDO1lBRUQsSUFBSSxnQkFBZ0IsQ0FBQyxlQUFlLElBQUksZ0JBQWdCLENBQUMsZUFBZSxDQUFDLFFBQVEsS0FBSyxZQUFZLEVBQUUsQ0FBQztnQkFDakcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsZ0JBQWdCLEVBQUUsZ0JBQWdCLENBQUMsQ0FBQztZQUMvRCxDQUFDO1FBQ0wsQ0FBQzthQUFNLElBQUksS0FBSyxDQUFDLE1BQU0sS0FBSyxRQUFRLEVBQUUsQ0FBQztZQUNuQyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxnQkFBZ0IsRUFBRSxlQUFlLENBQUMsQ0FBQztZQUMxRCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsRUFBRSxnQkFBZ0IsQ0FBQyxDQUFDO1FBQ2hFLENBQUM7SUFDTCxDQUFDO2lJQXpEUSxVQUFVO3FIQUFWLFVBQVUsMGRBZFQsZ0JBQWdCOzsyRkFjakIsVUFBVTtrQkFqQnRCLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLGdDQUFnQztvQkFDMUMsUUFBUSxFQUFFLFlBQVk7b0JBQ3RCLFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLE1BQU0sRUFBRSxDQUFDLFVBQVUsRUFBRSxVQUFVLENBQUM7b0JBQ2hDLElBQUksRUFBRTt3QkFDRixLQUFLLEVBQUUsY0FBYzt3QkFDckIsc0JBQXNCLEVBQUUsUUFBUTt3QkFDaEMsZ0NBQWdDLEVBQUUsVUFBVTt3QkFDNUMsa0NBQWtDLEVBQUUsV0FBVzt3QkFDL0Msc0JBQXNCLEVBQUUsVUFBVTt3QkFFbEMsaUJBQWlCLEVBQUUsVUFBVTt3QkFDN0IsaUJBQWlCLEVBQUUsa0JBQWtCO3FCQUN4QztvQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDbEQ7dUpBUU8sTUFBTTtzQkFEVCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRm9jdXNNb25pdG9yIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2ExMXknO1xuaW1wb3J0IHsgY29lcmNlQm9vbGVhblByb3BlcnR5IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2NvZXJjaW9uJztcbmltcG9ydCB7XG4gICAgQWZ0ZXJWaWV3SW5pdCxcbiAgICBBdHRyaWJ1dGUsXG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIENvbnRlbnRDaGlsZHJlbixcbiAgICBFbGVtZW50UmVmLFxuICAgIGZvcndhcmRSZWYsXG4gICAgSW5wdXQsXG4gICAgT25EZXN0cm95LFxuICAgIFF1ZXJ5TGlzdCxcbiAgICBSZW5kZXJlcjIsXG4gICAgVmlld0VuY2Fwc3VsYXRpb25cbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIENhbkRpc2FibGUsXG4gICAgQ2FuRGlzYWJsZUN0b3IsXG4gICAgSGFzVGFiSW5kZXgsXG4gICAgSGFzVGFiSW5kZXhDdG9yLFxuICAgIG1peGluRGlzYWJsZWQsXG4gICAgbWl4aW5UYWJJbmRleFxufSBmcm9tICdAa29vYmlxL2NvbXBvbmVudHMvY29yZSc7XG5cbi8vIEJvaWxlcnBsYXRlIGZvciBhcHBseWluZyBtaXhpbnMgdG8gS2JxVGFiTGluay5cbi8qKiBAZG9jcy1wcml2YXRlICovXG5leHBvcnQgY2xhc3MgS2JxVGFiTGlua0Jhc2Uge31cblxuLyoqIEBkb2NzLXByaXZhdGUgKi9cbmV4cG9ydCBjb25zdCBLYnFUYWJMaW5rTWl4aW5CYXNlOiBIYXNUYWJJbmRleEN0b3IgJiBDYW5EaXNhYmxlQ3RvciAmIHR5cGVvZiBLYnFUYWJMaW5rQmFzZSA9IG1peGluVGFiSW5kZXgoXG4gICAgbWl4aW5EaXNhYmxlZChLYnFUYWJMaW5rQmFzZSlcbik7XG5cbi8qKlxuICogTmF2aWdhdGlvbiBjb21wb25lbnQgbWF0Y2hpbmcgdGhlIHN0eWxlcyBvZiB0aGUgdGFiIGdyb3VwIGhlYWRlci5cbiAqL1xuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdba2JxLXRhYi1uYXYtYmFyXScsXG4gICAgZXhwb3J0QXM6ICdrYnFUYWJOYXZCYXIsIGticVRhYk5hdicsXG4gICAgdGVtcGxhdGU6ICc8bmctY29udGVudCAvPicsXG4gICAgc3R5bGVVcmxzOiBbJ3RhYi1uYXYtYmFyLnNjc3MnLCAnLi4vdGFicy10b2tlbnMuc2NzcyddLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICdrYnEtdGFiLW5hdi1iYXInLFxuICAgICAgICAnW2NsYXNzLmticS10YWItbmF2LWJhcl9maWxsZWRdJzogJyF0cmFuc3BhcmVudCcsXG4gICAgICAgICdbY2xhc3Mua2JxLXRhYi1uYXYtYmFyX3RyYW5zcGFyZW50XSc6ICd0cmFuc3BhcmVudCcsXG4gICAgICAgICdbY2xhc3Mua2JxLXRhYi1uYXYtYmFyX29uLWJhY2tncm91bmRdJzogJyFvblN1cmZhY2UnLFxuICAgICAgICAnW2NsYXNzLmticS10YWItbmF2LWJhcl9vbi1zdXJmYWNlXSc6ICdvblN1cmZhY2UnXG4gICAgfSxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIEticVRhYk5hdiB7XG4gICAgdmVydGljYWwgPSBmYWxzZTtcblxuICAgIEBJbnB1dCgpIHRyYW5zcGFyZW50OiBib29sZWFuID0gZmFsc2U7XG4gICAgQElucHV0KCkgb25TdXJmYWNlOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICBAQ29udGVudENoaWxkcmVuKGZvcndhcmRSZWYoKCkgPT4gS2JxVGFiTGluaykpIGxpbmtzOiBRdWVyeUxpc3Q8S2JxVGFiTGluaz47XG5cbiAgICBjb25zdHJ1Y3RvcihAQXR0cmlidXRlKCd2ZXJ0aWNhbCcpIHZlcnRpY2FsOiBzdHJpbmcpIHtcbiAgICAgICAgdGhpcy52ZXJ0aWNhbCA9IGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSh2ZXJ0aWNhbCk7XG4gICAgfVxufVxuXG4vKipcbiAqIExpbmsgaW5zaWRlIG9mIGEgYGticS10YWItbmF2LWJhcmAuXG4gKi9cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnYVtrYnEtdGFiLWxpbmtdLCBhW2ticVRhYkxpbmtdJyxcbiAgICBleHBvcnRBczogJ2ticVRhYkxpbmsnLFxuICAgIHRlbXBsYXRlOiAnPG5nLWNvbnRlbnQgLz4nLFxuICAgIGlucHV0czogWydkaXNhYmxlZCcsICd0YWJJbmRleCddLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICdrYnEtdGFiLWxpbmsnLFxuICAgICAgICAnW2NsYXNzLmticS1zZWxlY3RlZF0nOiAnYWN0aXZlJyxcbiAgICAgICAgJ1tjbGFzcy5rYnEtdGFiLWxhYmVsX3ZlcnRpY2FsXSc6ICd2ZXJ0aWNhbCcsXG4gICAgICAgICdbY2xhc3Mua2JxLXRhYi1sYWJlbF9ob3Jpem9udGFsXSc6ICchdmVydGljYWwnLFxuICAgICAgICAnW2NsYXNzLmticS1kaXNhYmxlZF0nOiAnZGlzYWJsZWQnLFxuXG4gICAgICAgICdbYXR0ci50YWJpbmRleF0nOiAndGFiSW5kZXgnLFxuICAgICAgICAnW2F0dHIuZGlzYWJsZWRdJzogJ2Rpc2FibGVkIHx8IG51bGwnXG4gICAgfSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBLYnFUYWJMaW5rIGV4dGVuZHMgS2JxVGFiTGlua01peGluQmFzZSBpbXBsZW1lbnRzIE9uRGVzdHJveSwgQ2FuRGlzYWJsZSwgSGFzVGFiSW5kZXgsIEFmdGVyVmlld0luaXQge1xuICAgIGdldCB2ZXJ0aWNhbCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMudGFiTmF2LnZlcnRpY2FsO1xuICAgIH1cblxuICAgIC8qKiBXaGV0aGVyIHRoZSBsaW5rIGlzIGFjdGl2ZS4gKi9cbiAgICBASW5wdXQoKVxuICAgIGdldCBhY3RpdmUoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLmlzQWN0aXZlO1xuICAgIH1cblxuICAgIHNldCBhY3RpdmUodmFsdWU6IGJvb2xlYW4pIHtcbiAgICAgICAgaWYgKHZhbHVlICE9PSB0aGlzLmlzQWN0aXZlKSB7XG4gICAgICAgICAgICB0aGlzLmlzQWN0aXZlID0gdmFsdWU7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAvKiogV2hldGhlciB0aGUgdGFiIGxpbmsgaXMgYWN0aXZlIG9yIG5vdC4gKi9cbiAgICBwcm90ZWN0ZWQgaXNBY3RpdmU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBwdWJsaWMgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICAgICAgcHJpdmF0ZSByZWFkb25seSBmb2N1c01vbml0b3I6IEZvY3VzTW9uaXRvcixcbiAgICAgICAgcHJpdmF0ZSByZWFkb25seSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICAgICAgICBwcml2YXRlIHRhYk5hdjogS2JxVGFiTmF2XG4gICAgKSB7XG4gICAgICAgIHN1cGVyKCk7XG5cbiAgICAgICAgdGhpcy5mb2N1c01vbml0b3IubW9uaXRvcih0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCk7XG4gICAgfVxuXG4gICAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmFkZENsYXNzTW9kaWZpZXJGb3JJY29ucyhBcnJheS5mcm9tKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJy5rYnEtaWNvbicpKSk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKSB7XG4gICAgICAgIHRoaXMuZm9jdXNNb25pdG9yLnN0b3BNb25pdG9yaW5nKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50KTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGFkZENsYXNzTW9kaWZpZXJGb3JJY29ucyhpY29uczogSFRNTEVsZW1lbnRbXSkge1xuICAgICAgICBjb25zdCB0d29JY29ucyA9IDI7XG4gICAgICAgIGNvbnN0IFtmaXJzdEljb25FbGVtZW50LCBzZWNvbmRJY29uRWxlbWVudF0gPSBpY29ucztcblxuICAgICAgICBpZiAoaWNvbnMubGVuZ3RoID09PSAxKSB7XG4gICAgICAgICAgICBjb25zdCBDT01NRU5UX05PREUgPSA4O1xuXG4gICAgICAgICAgICBpZiAoZmlyc3RJY29uRWxlbWVudC5uZXh0U2libGluZyAmJiBmaXJzdEljb25FbGVtZW50Lm5leHRTaWJsaW5nLm5vZGVUeXBlICE9PSBDT01NRU5UX05PREUpIHtcbiAgICAgICAgICAgICAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKGZpcnN0SWNvbkVsZW1lbnQsICdrYnEtaWNvbl9sZWZ0Jyk7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIGlmIChmaXJzdEljb25FbGVtZW50LnByZXZpb3VzU2libGluZyAmJiBmaXJzdEljb25FbGVtZW50LnByZXZpb3VzU2libGluZy5ub2RlVHlwZSAhPT0gQ09NTUVOVF9OT0RFKSB7XG4gICAgICAgICAgICAgICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyhmaXJzdEljb25FbGVtZW50LCAna2JxLWljb25fcmlnaHQnKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSBlbHNlIGlmIChpY29ucy5sZW5ndGggPT09IHR3b0ljb25zKSB7XG4gICAgICAgICAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKGZpcnN0SWNvbkVsZW1lbnQsICdrYnEtaWNvbl9sZWZ0Jyk7XG4gICAgICAgICAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHNlY29uZEljb25FbGVtZW50LCAna2JxLWljb25fcmlnaHQnKTtcbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ==
|
package/select/README.md
DELETED
|
File without changes
|
package/tabs/README.md
DELETED
|
File without changes
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './tab-nav-bar';
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { FocusMonitor } from '@angular/cdk/a11y';
|
|
2
|
-
import { AfterViewInit, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
|
|
3
|
-
import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
|
|
4
|
-
import * as i0 from "@angular/core";
|
|
5
|
-
/** @docs-private */
|
|
6
|
-
export declare class KbqTabLinkBase {
|
|
7
|
-
}
|
|
8
|
-
/** @docs-private */
|
|
9
|
-
export declare const KbqTabLinkMixinBase: HasTabIndexCtor & CanDisableCtor & typeof KbqTabLinkBase;
|
|
10
|
-
/**
|
|
11
|
-
* Navigation component matching the styles of the tab group header.
|
|
12
|
-
*/
|
|
13
|
-
export declare class KbqTabNav {
|
|
14
|
-
vertical: boolean;
|
|
15
|
-
transparent: boolean;
|
|
16
|
-
onSurface: boolean;
|
|
17
|
-
links: QueryList<KbqTabLink>;
|
|
18
|
-
constructor(vertical: string);
|
|
19
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabNav, [{ attribute: "vertical"; }]>;
|
|
20
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabNav, "[kbq-tab-nav-bar]", ["kbqTabNavBar", "kbqTabNav"], { "transparent": { "alias": "transparent"; "required": false; }; "onSurface": { "alias": "onSurface"; "required": false; }; }, {}, ["links"], ["*"], false, never>;
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* Link inside of a `kbq-tab-nav-bar`.
|
|
24
|
-
*/
|
|
25
|
-
export declare class KbqTabLink extends KbqTabLinkMixinBase implements OnDestroy, CanDisable, HasTabIndex, AfterViewInit {
|
|
26
|
-
elementRef: ElementRef;
|
|
27
|
-
private readonly focusMonitor;
|
|
28
|
-
private readonly renderer;
|
|
29
|
-
private tabNav;
|
|
30
|
-
get vertical(): boolean;
|
|
31
|
-
/** Whether the link is active. */
|
|
32
|
-
get active(): boolean;
|
|
33
|
-
set active(value: boolean);
|
|
34
|
-
/** Whether the tab link is active or not. */
|
|
35
|
-
protected isActive: boolean;
|
|
36
|
-
constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, renderer: Renderer2, tabNav: KbqTabNav);
|
|
37
|
-
ngAfterViewInit(): void;
|
|
38
|
-
ngOnDestroy(): void;
|
|
39
|
-
private addClassModifierForIcons;
|
|
40
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLink, never>;
|
|
41
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabLink, "a[kbq-tab-link], a[kbqTabLink]", ["kbqTabLink"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, {}, never, ["*"], false, never>;
|
|
42
|
-
}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
@use '../tabs-common';
|
|
2
|
-
|
|
3
|
-
.kbq-tab-link {
|
|
4
|
-
vertical-align: top;
|
|
5
|
-
text-decoration: none;
|
|
6
|
-
-webkit-tap-highlight-color: transparent;
|
|
7
|
-
|
|
8
|
-
@include tabs-common.tab-label;
|
|
9
|
-
|
|
10
|
-
& .kbq-tab-group_stretch-labels & {
|
|
11
|
-
flex-basis: 0;
|
|
12
|
-
flex-grow: 1;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.kbq-tab-nav-bar {
|
|
17
|
-
display: flex;
|
|
18
|
-
flex-grow: 1;
|
|
19
|
-
|
|
20
|
-
position: relative;
|
|
21
|
-
|
|
22
|
-
& .kbq-tab-group_align-labels-center {
|
|
23
|
-
justify-content: center;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
& .kbq-tab-group_align-labels-end {
|
|
27
|
-
justify-content: flex-end;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
&.kbq-tab-group_vertical {
|
|
31
|
-
flex-direction: column;
|
|
32
|
-
flex-grow: 0;
|
|
33
|
-
gap: var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0;
|
|
34
|
-
}
|
|
35
|
-
}
|