@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
|
@@ -4,7 +4,7 @@ import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, Renderer2 } fr
|
|
|
4
4
|
import { KbqLocaleService } from '@koobiq/components/core';
|
|
5
5
|
import { KbqTabChangeEvent, KbqTabGroup } from '@koobiq/components/tabs';
|
|
6
6
|
import { Subject } from 'rxjs';
|
|
7
|
-
import { KbqCodeBlockConfiguration,
|
|
7
|
+
import { KbqCodeBlockConfiguration, KbqCodeBlockFile } from './code-block.types';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
export declare const COPIED_MESSAGE_TOOLTIP_TIMEOUT = 100;
|
|
10
10
|
export declare const DEFAULT_EXTENSION = "txt";
|
|
@@ -40,8 +40,8 @@ export declare class KbqCodeBlockComponent implements AfterViewInit, OnDestroy {
|
|
|
40
40
|
maxHeight: number;
|
|
41
41
|
softWrap: boolean;
|
|
42
42
|
canLoad: boolean;
|
|
43
|
-
get codeFiles():
|
|
44
|
-
set codeFiles(files:
|
|
43
|
+
get codeFiles(): KbqCodeBlockFile[];
|
|
44
|
+
set codeFiles(files: KbqCodeBlockFile[]);
|
|
45
45
|
private _codeFiles;
|
|
46
46
|
get noHeader(): any;
|
|
47
47
|
get singleFile(): boolean;
|
|
@@ -4,10 +4,10 @@ import * as i2 from "./actionbar.component";
|
|
|
4
4
|
import * as i3 from "@koobiq/components/button";
|
|
5
5
|
import * as i4 from "@koobiq/components/tooltip";
|
|
6
6
|
import * as i5 from "@koobiq/components/icon";
|
|
7
|
-
import * as i6 from "
|
|
8
|
-
import * as i7 from "
|
|
7
|
+
import * as i6 from "@koobiq/components/tabs";
|
|
8
|
+
import * as i7 from "./code-block-content";
|
|
9
9
|
export declare class KbqCodeBlockModule {
|
|
10
10
|
static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockModule, never>;
|
|
11
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<KbqCodeBlockModule, [typeof i1.KbqCodeBlockComponent, typeof i2.KbqActionBarComponent], [typeof i3.KbqButtonModule, typeof i4.KbqToolTipModule, typeof i5.KbqIconModule, typeof i6.
|
|
11
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<KbqCodeBlockModule, [typeof i1.KbqCodeBlockComponent, typeof i2.KbqActionBarComponent], [typeof i3.KbqButtonModule, typeof i4.KbqToolTipModule, typeof i5.KbqIconModule, typeof i6.KbqTabsModule, typeof i7.KbqCodeBlockContent], [typeof i1.KbqCodeBlockComponent]>;
|
|
12
12
|
static ɵinj: i0.ɵɵInjectorDeclaration<KbqCodeBlockModule>;
|
|
13
13
|
}
|
|
@@ -20,9 +20,17 @@ export interface KbqCodeBlockConfiguration {
|
|
|
20
20
|
viewLessText: string;
|
|
21
21
|
openExternalSystemTooltip: string;
|
|
22
22
|
}
|
|
23
|
-
|
|
23
|
+
/** Code block file type. */
|
|
24
|
+
export type KbqCodeBlockFile = {
|
|
24
25
|
filename: string;
|
|
25
26
|
content: string;
|
|
27
|
+
/**
|
|
28
|
+
* File language
|
|
29
|
+
*
|
|
30
|
+
* @link https://highlightjs.readthedocs.io/en/stable/supported-languages.html
|
|
31
|
+
*/
|
|
26
32
|
language: string;
|
|
27
33
|
link?: string;
|
|
28
|
-
}
|
|
34
|
+
};
|
|
35
|
+
/** @deprecated Will be removed in next major release, use `KbqCodeBlockFile` instead. */
|
|
36
|
+
export type KbqCodeFile = KbqCodeBlockFile;
|
|
@@ -9,14 +9,7 @@
|
|
|
9
9
|
--kbq-forms-size-vertical-control-padding-left: var(--kbq-size-xxl);
|
|
10
10
|
--kbq-forms-size-vertical-legend-margin-top: var(--kbq-size-3xl);
|
|
11
11
|
--kbq-forms-size-vertical-legend-margin-bottom: var(--kbq-size-m);
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
15
|
-
--kbq-forms-label: var(--kbq-foreground-contrast);
|
|
16
|
-
--kbq-forms-legend: var(--kbq-foreground-contrast);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
12
|
+
/* THEME TOKENS */
|
|
20
13
|
--kbq-forms-label: var(--kbq-foreground-contrast);
|
|
21
14
|
--kbq-forms-legend: var(--kbq-foreground-contrast);
|
|
22
15
|
}
|
|
@@ -40,6 +40,16 @@
|
|
|
40
40
|
&.kbq-disabled {
|
|
41
41
|
@include kbq-option(states-disabled);
|
|
42
42
|
}
|
|
43
|
+
|
|
44
|
+
&:is(.kbq-selected, .kbq-focused, .kbq-active):has(+ :is(.kbq-selected, .kbq-focused, .kbq-active)) {
|
|
45
|
+
border-bottom-left-radius: 0;
|
|
46
|
+
border-bottom-right-radius: 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&:is(.kbq-selected, .kbq-focused, .kbq-active) + :is(.kbq-selected, .kbq-focused, .kbq-active) {
|
|
50
|
+
border-top-left-radius: 0;
|
|
51
|
+
border-top-right-radius: 0;
|
|
52
|
+
}
|
|
43
53
|
}
|
|
44
54
|
}
|
|
45
55
|
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
@use '../../list/list-tokens';
|
|
2
|
+
|
|
1
3
|
.kbq-option {
|
|
2
4
|
--kbq-option-size-horizontal-padding: var(--kbq-size-m);
|
|
3
5
|
--kbq-option-size-height: var(--kbq-size-3xl);
|
|
4
6
|
--kbq-option-size-border-width: 2px;
|
|
7
|
+
/* LIST THEME TOKENS */
|
|
8
|
+
@include list-tokens.list-theme-tokens;
|
|
5
9
|
}
|
|
@@ -11,9 +11,7 @@
|
|
|
11
11
|
--kbq-checkbox-size-big-horizontal-content-padding: var(--kbq-size-s);
|
|
12
12
|
--kbq-checkbox-size-big-vertical-content-padding: var(--kbq-size-3xs);
|
|
13
13
|
--kbq-checkbox-size-big-top: var(--kbq-size-xxs);
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
14
|
+
/* THEME TOKENS */
|
|
17
15
|
--kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);
|
|
18
16
|
--kbq-checkbox-theme-default-color: var(--kbq-icon-white);
|
|
19
17
|
--kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);
|
|
@@ -59,50 +57,3 @@
|
|
|
59
57
|
--kbq-checkbox-error-states-disabled-background: var(--kbq-states-background-disabled);
|
|
60
58
|
--kbq-checkbox-error-states-disabled-caption: var(--kbq-states-icon-disabled);
|
|
61
59
|
}
|
|
62
|
-
|
|
63
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
64
|
-
--kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);
|
|
65
|
-
--kbq-checkbox-theme-default-color: var(--kbq-icon-white);
|
|
66
|
-
--kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);
|
|
67
|
-
--kbq-checkbox-theme-default-background: var(--kbq-background-bg);
|
|
68
|
-
--kbq-checkbox-theme-default-caption: var(--kbq-foreground-contrast-secondary);
|
|
69
|
-
--kbq-checkbox-theme-states-hover-border: var(--kbq-line-contrast-fade);
|
|
70
|
-
--kbq-checkbox-theme-states-hover-background: var(--kbq-states-background-transparent-hover);
|
|
71
|
-
--kbq-checkbox-theme-states-checked-border: transparent;
|
|
72
|
-
--kbq-checkbox-theme-states-checked-background: var(--kbq-background-theme);
|
|
73
|
-
--kbq-checkbox-theme-states-checked-hover-border: transparent;
|
|
74
|
-
--kbq-checkbox-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);
|
|
75
|
-
--kbq-checkbox-theme-states-focused-border: var(--kbq-states-line-focus-theme);
|
|
76
|
-
--kbq-checkbox-theme-states-focused-background: var(--kbq-background-bg);
|
|
77
|
-
--kbq-checkbox-theme-states-focused-outline: 1px solid var(--kbq-states-line-focus-theme);
|
|
78
|
-
--kbq-checkbox-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);
|
|
79
|
-
--kbq-checkbox-theme-states-checked-focused-background: var(--kbq-background-theme);
|
|
80
|
-
--kbq-checkbox-theme-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-theme);
|
|
81
|
-
--kbq-checkbox-theme-states-disabled-border: var(--kbq-line-contrast-fade);
|
|
82
|
-
--kbq-checkbox-theme-states-disabled-color: var(--kbq-states-icon-disabled);
|
|
83
|
-
--kbq-checkbox-theme-states-disabled-text: var(--kbq-states-foreground-disabled);
|
|
84
|
-
--kbq-checkbox-theme-states-disabled-background: var(--kbq-states-background-disabled);
|
|
85
|
-
--kbq-checkbox-theme-states-disabled-caption: var(--kbq-states-icon-disabled);
|
|
86
|
-
--kbq-checkbox-error-default-border: var(--kbq-line-error);
|
|
87
|
-
--kbq-checkbox-error-default-color: var(--kbq-icon-white);
|
|
88
|
-
--kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);
|
|
89
|
-
--kbq-checkbox-error-default-background: var(--kbq-states-background-error-less);
|
|
90
|
-
--kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);
|
|
91
|
-
--kbq-checkbox-error-states-hover-border: var(--kbq-line-error);
|
|
92
|
-
--kbq-checkbox-error-states-hover-background: var(--kbq-states-background-error-fade-hover);
|
|
93
|
-
--kbq-checkbox-error-states-checked-border: transparent;
|
|
94
|
-
--kbq-checkbox-error-states-checked-background: var(--kbq-background-error);
|
|
95
|
-
--kbq-checkbox-error-states-checked-hover-border: transparent;
|
|
96
|
-
--kbq-checkbox-error-states-checked-hover-background: var(--kbq-states-background-error-hover);
|
|
97
|
-
--kbq-checkbox-error-states-focused-border: var(--kbq-line-error);
|
|
98
|
-
--kbq-checkbox-error-states-focused-background: var(--kbq-states-background-error-less);
|
|
99
|
-
--kbq-checkbox-error-states-focused-outline: 1px solid var(--kbq-states-line-focus-error);
|
|
100
|
-
--kbq-checkbox-error-states-checked-focused-border: var(--kbq-states-line-focus-error);
|
|
101
|
-
--kbq-checkbox-error-states-checked-focused-background: var(--kbq-background-error);
|
|
102
|
-
--kbq-checkbox-error-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-error);
|
|
103
|
-
--kbq-checkbox-error-states-disabled-border: var(--kbq-line-contrast-fade);
|
|
104
|
-
--kbq-checkbox-error-states-disabled-color: var(--kbq-states-icon-disabled);
|
|
105
|
-
--kbq-checkbox-error-states-disabled-text: var(--kbq-states-foreground-disabled);
|
|
106
|
-
--kbq-checkbox-error-states-disabled-background: var(--kbq-states-background-disabled);
|
|
107
|
-
--kbq-checkbox-error-states-disabled-caption: var(--kbq-states-icon-disabled);
|
|
108
|
-
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
@use 'theming/scrollbar-theme' as *;
|
|
5
5
|
|
|
6
|
-
@use '../../link/link-theme'
|
|
6
|
+
@use '../../link/link-theme';
|
|
7
7
|
@use '../../markdown/markdown-theme' as *;
|
|
8
8
|
@use '../../tabs/tabs-theme' as *;
|
|
9
9
|
@use '../../tags/tag-theme' as *;
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
@include kbq-forms-theme();
|
|
18
18
|
@include kbq-highlight-theme();
|
|
19
19
|
// link is a directive, so styles for it should be applied globally
|
|
20
|
-
@include kbq-link-theme();
|
|
20
|
+
@include link-theme.kbq-link-theme();
|
|
21
21
|
@include kbq-markdown-theme();
|
|
22
22
|
@include kbq-scrollbar-theme();
|
|
23
23
|
@include kbq-tabs-theme();
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
@include kbq-markdown-base-typography();
|
|
30
30
|
@include kbq-markdown-typography();
|
|
31
31
|
|
|
32
|
+
@include link-theme.kbq-link-typography();
|
|
32
33
|
@include kbq-forms-typography();
|
|
33
34
|
@include kbq-tabs-typography();
|
|
34
35
|
@include kbq-tag-typography();
|
|
@@ -64,11 +64,9 @@
|
|
|
64
64
|
gap: var(--kbq-size-s);
|
|
65
65
|
|
|
66
66
|
border: var(--kbq-size-3xs) solid transparent;
|
|
67
|
+
border-radius: var(--kbq-size-border-radius);
|
|
67
68
|
|
|
68
|
-
padding
|
|
69
|
-
padding-left: var(--kbq-size-m);
|
|
70
|
-
padding-right: var(--kbq-size-m);
|
|
71
|
-
padding-bottom: var(--kbq-size-xxs);
|
|
69
|
+
padding: var(--kbq-size-xxs) kbq-difference-series-css-variables([size-m, size-3xs]);
|
|
72
70
|
|
|
73
71
|
.kbq-list-text {
|
|
74
72
|
@include kbq-list-text();
|
|
@@ -90,8 +88,8 @@
|
|
|
90
88
|
border-right: var(--kbq-size-3xs) solid transparent;
|
|
91
89
|
|
|
92
90
|
padding-top: var(--kbq-size-xs);
|
|
93
|
-
padding-left:
|
|
94
|
-
padding-right:
|
|
91
|
+
padding-left: kbq-difference-series-css-variables([size-m, size-3xs]);
|
|
92
|
+
padding-right: kbq-difference-series-css-variables([size-m, size-3xs]);
|
|
95
93
|
padding-bottom: var(--kbq-size-3xs);
|
|
96
94
|
|
|
97
95
|
.kbq-list-text {
|
|
@@ -110,8 +108,8 @@
|
|
|
110
108
|
border-right: var(--kbq-size-3xs) solid transparent;
|
|
111
109
|
|
|
112
110
|
padding-top: var(--kbq-size-m);
|
|
113
|
-
padding-left:
|
|
114
|
-
padding-right:
|
|
111
|
+
padding-left: kbq-difference-series-css-variables([size-m, size-3xs]);
|
|
112
|
+
padding-right: kbq-difference-series-css-variables([size-m, size-3xs]);
|
|
115
113
|
padding-bottom: var(--kbq-size-xxs);
|
|
116
114
|
|
|
117
115
|
.kbq-list-text {
|
|
@@ -165,6 +165,7 @@
|
|
|
165
165
|
}
|
|
166
166
|
|
|
167
167
|
.kbq-select__search-container {
|
|
168
|
+
padding: var(--kbq-size-xxs);
|
|
168
169
|
border-bottom: {
|
|
169
170
|
width: 1px;
|
|
170
171
|
style: solid;
|
|
@@ -174,7 +175,7 @@
|
|
|
174
175
|
|
|
175
176
|
%kbq-select-content {
|
|
176
177
|
max-height: var(--kbq-select-panel-size-max-height, 256px);
|
|
177
|
-
padding:
|
|
178
|
+
padding: var(--kbq-size-xxs);
|
|
178
179
|
overflow: hidden auto;
|
|
179
180
|
}
|
|
180
181
|
|
|
@@ -188,5 +189,5 @@
|
|
|
188
189
|
border-top-width: 1px;
|
|
189
190
|
border-top-style: solid;
|
|
190
191
|
|
|
191
|
-
padding: var(--kbq-size-xxs) var(--kbq-size-
|
|
192
|
+
padding: var(--kbq-size-xxs) var(--kbq-size-l);
|
|
192
193
|
}
|
|
@@ -5,22 +5,7 @@
|
|
|
5
5
|
--kbq-scrollbar-size-thumb-width: var(--kbq-size-s);
|
|
6
6
|
--kbq-scrollbar-size-thumb-min-size: var(--kbq-size-xl);
|
|
7
7
|
--kbq-scrollbar-size-thumb-border-radius: var(--kbq-size-s);
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
11
|
-
--kbq-scrollbar-thumb-default-background: var(--kbq-icon-contrast-fade);
|
|
12
|
-
--kbq-scrollbar-thumb-hover-background: var(--kbq-states-icon-contrast-fade-hover);
|
|
13
|
-
--kbq-scrollbar-thumb-active-background: var(--kbq-states-icon-contrast-fade-active);
|
|
14
|
-
--kbq-scrollbar-thumb-disabled-background: var(--kbq-states-icon-disabled);
|
|
15
|
-
--kbq-scrollbar-track-default-border: transparent;
|
|
16
|
-
--kbq-scrollbar-track-default-background: transparent;
|
|
17
|
-
--kbq-scrollbar-track-hover-border: transparent;
|
|
18
|
-
--kbq-scrollbar-track-hover-background: transparent;
|
|
19
|
-
--kbq-scrollbar-track-active-border: transparent;
|
|
20
|
-
--kbq-scrollbar-track-active-background: transparent;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
8
|
+
/* THEME TOKENS */
|
|
24
9
|
--kbq-scrollbar-thumb-default-background: var(--kbq-icon-contrast-fade);
|
|
25
10
|
--kbq-scrollbar-thumb-hover-background: var(--kbq-states-icon-contrast-fade-hover);
|
|
26
11
|
--kbq-scrollbar-thumb-active-background: var(--kbq-states-icon-contrast-fade-active);
|
|
@@ -9,9 +9,7 @@
|
|
|
9
9
|
--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);
|
|
10
10
|
--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);
|
|
11
11
|
--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
12
|
+
/* THEME TOKENS */
|
|
15
13
|
--kbq-datepicker-container-background: var(--kbq-background-card);
|
|
16
14
|
--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);
|
|
17
15
|
--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);
|
|
@@ -28,21 +26,3 @@
|
|
|
28
26
|
--kbq-datepicker-grid-cell-states-disabled-background: transparent;
|
|
29
27
|
--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled);
|
|
30
28
|
}
|
|
31
|
-
|
|
32
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
33
|
-
--kbq-datepicker-container-background: var(--kbq-background-card);
|
|
34
|
-
--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);
|
|
35
|
-
--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);
|
|
36
|
-
--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);
|
|
37
|
-
--kbq-datepicker-grid-cell-default-background: transparent;
|
|
38
|
-
--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);
|
|
39
|
-
--kbq-datepicker-grid-cell-today-background: transparent;
|
|
40
|
-
--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);
|
|
41
|
-
--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);
|
|
42
|
-
--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);
|
|
43
|
-
--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);
|
|
44
|
-
--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);
|
|
45
|
-
--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);
|
|
46
|
-
--kbq-datepicker-grid-cell-states-disabled-background: transparent;
|
|
47
|
-
--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled);
|
|
48
|
-
}
|
|
@@ -3,12 +3,6 @@
|
|
|
3
3
|
--kbq-divider-size-horizontal-margin-vertical: var(--kbq-size-xxs);
|
|
4
4
|
--kbq-divider-size-vertical-width: 1px;
|
|
5
5
|
--kbq-divider-size-vertical-margin-horizontal: var(--kbq-size-xxs);
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
9
|
-
--kbq-divider-color: var(--kbq-line-contrast-less);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
6
|
+
/* THEME TOKENS */
|
|
13
7
|
--kbq-divider-color: var(--kbq-line-contrast-less);
|
|
14
8
|
}
|
package/dl/dl-tokens.scss
CHANGED
|
@@ -3,14 +3,7 @@
|
|
|
3
3
|
--kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);
|
|
4
4
|
--kbq-description-list-size-vertical-content-gap-vertical: var(--kbq-size-3xs);
|
|
5
5
|
--kbq-description-list-size-vertical-gap-vertical: var(--kbq-size-m);
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
9
|
-
--kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);
|
|
10
|
-
--kbq-description-list-description-color: var(--kbq-foreground-contrast);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
6
|
+
/* THEME TOKENS */
|
|
14
7
|
--kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);
|
|
15
8
|
--kbq-description-list-description-color: var(--kbq-foreground-contrast);
|
|
16
9
|
}
|
|
@@ -43,6 +43,16 @@
|
|
|
43
43
|
&.kbq-disabled {
|
|
44
44
|
@include kbq-dropdown-item-state(states-disabled);
|
|
45
45
|
}
|
|
46
|
+
|
|
47
|
+
&:is(.kbq-selected, .cdk-keyboard-focused):has(+ :is(.kbq-selected, .cdk-keyboard-focused)) {
|
|
48
|
+
border-bottom-left-radius: 0;
|
|
49
|
+
border-bottom-right-radius: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&:is(.kbq-selected, .cdk-keyboard-focused) + :is(.kbq-selected, .cdk-keyboard-focused) {
|
|
53
|
+
border-top-left-radius: 0;
|
|
54
|
+
border-top-right-radius: 0;
|
|
55
|
+
}
|
|
46
56
|
}
|
|
47
57
|
|
|
48
58
|
.kbq-dropdown__group-header {
|
|
@@ -1,16 +1,13 @@
|
|
|
1
|
+
@use '../list/list-tokens';
|
|
2
|
+
|
|
1
3
|
.kbq-dropdown__panel {
|
|
2
4
|
--kbq-dropdown-size-container-width-min: var(--kbq-size-7xl);
|
|
3
5
|
--kbq-dropdown-size-container-width-max: 640px;
|
|
4
6
|
--kbq-dropdown-size-container-padding-vertical: var(--kbq-size-xxs);
|
|
5
7
|
--kbq-dropdown-size-container-border-radius: var(--kbq-size-s);
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
9
|
-
--kbq-dropdown-container-background: var(--kbq-background-card);
|
|
10
|
-
--kbq-dropdown-container-shadow: var(--kbq-shadow-popup);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
8
|
+
/* THEME TOKENS */
|
|
14
9
|
--kbq-dropdown-container-background: var(--kbq-background-card);
|
|
15
10
|
--kbq-dropdown-container-shadow: var(--kbq-shadow-popup);
|
|
11
|
+
/* LIST THEME TOKENS */
|
|
12
|
+
@include list-tokens.list-theme-tokens;
|
|
16
13
|
}
|
package/dropdown/dropdown.scss
CHANGED
|
@@ -22,9 +22,8 @@
|
|
|
22
22
|
|
|
23
23
|
border-radius: var(--kbq-dropdown-size-container-border-radius);
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
padding-bottom: var(--kbq-dropdown-size-container-padding-vertical);
|
|
25
|
+
box-sizing: border-box;
|
|
26
|
+
padding: var(--kbq-size-xxs);
|
|
28
27
|
|
|
29
28
|
// Prevent users from interacting with the panel while it's animating. Note that
|
|
30
29
|
// people won't be able to click through it, because the overlay pane will catch the click.
|
|
@@ -36,6 +35,26 @@
|
|
|
36
35
|
&.ng-animating {
|
|
37
36
|
pointer-events: none;
|
|
38
37
|
}
|
|
38
|
+
|
|
39
|
+
.kbq-option {
|
|
40
|
+
position: relative;
|
|
41
|
+
|
|
42
|
+
&:before,
|
|
43
|
+
&:after {
|
|
44
|
+
position: absolute;
|
|
45
|
+
content: '';
|
|
46
|
+
width: var(--kbq-size-xxs);
|
|
47
|
+
height: calc(100% + var(--kbq-size-3xs) * 2); // outline size * 2
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&:before {
|
|
51
|
+
right: calc(100% + var(--kbq-size-3xs)); // outline size
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&:after {
|
|
55
|
+
left: calc(100% + var(--kbq-size-3xs)); // outline size
|
|
56
|
+
}
|
|
57
|
+
}
|
|
39
58
|
}
|
|
40
59
|
|
|
41
60
|
.kbq-dropdown__content {
|
|
@@ -15,14 +15,7 @@
|
|
|
15
15
|
--kbq-empty-state-size-normal-image-margin-bottom: var(--kbq-size-xl);
|
|
16
16
|
--kbq-empty-state-size-normal-image-addon-height: var(--kbq-size-xxl);
|
|
17
17
|
--kbq-empty-state-size-normal-title-margin-bottom: var(--kbq-size-xxs);
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
21
|
-
--kbq-empty-state-title: var(--kbq-foreground-contrast);
|
|
22
|
-
--kbq-empty-state-color: var(--kbq-foreground-contrast);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
18
|
+
/* THEME TOKENS */
|
|
26
19
|
--kbq-empty-state-title: var(--kbq-foreground-contrast);
|
|
27
20
|
--kbq-empty-state-color: var(--kbq-foreground-contrast);
|
|
28
21
|
}
|
|
@@ -20,33 +20,21 @@ export class KbqAccordionTrigger {
|
|
|
20
20
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
21
|
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqAccordionTrigger, selector: "kbq-accordion-trigger, [kbq-accordion-trigger]", host: { properties: { "class.kbq-accordion-trigger_fill": "isFill", "class.kbq-accordion-trigger_hug": "isHug", "class.kbq-accordion-trigger_hug-space-between": "isHugSpaceBetween" }, classAttribute: "kbq-accordion-trigger" }, hostDirectives: [{ directive: i1.RdxAccordionTriggerDirective }], ngImport: i0, template: `
|
|
22
22
|
@if (isHugSpaceBetween) {
|
|
23
|
-
<i
|
|
24
|
-
class="kbq-accordion-trigger__icon"
|
|
25
|
-
kbq-icon="kbq-chevron-down-s_16"
|
|
26
|
-
></i>
|
|
23
|
+
<i class="kbq-accordion-trigger__icon" kbq-icon="kbq-chevron-down-s_16"></i>
|
|
27
24
|
} @else {
|
|
28
|
-
<i
|
|
29
|
-
class="kbq-accordion-trigger__icon"
|
|
30
|
-
kbq-icon="kbq-chevron-right-s_16"
|
|
31
|
-
></i>
|
|
25
|
+
<i class="kbq-accordion-trigger__icon" kbq-icon="kbq-chevron-right-s_16"></i>
|
|
32
26
|
}
|
|
33
27
|
|
|
34
28
|
<ng-content />
|
|
35
|
-
`, isInline: true, styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center;background:transparent;border:none;outline:none}.kbq-accordion-trigger .kbq-accordion-trigger__icon{padding:var(--kbq-size-xxs);transition:transform .3s ease-out}.kbq-accordion-trigger .kbq-accordion-trigger__badge,.kbq-accordion-trigger .kbq-accordion-trigger__caption{margin-top:var(--kbq-size-xxs);margin-right:var(--kbq-size-s)}.kbq-accordion-trigger .kbq-accordion-trigger__action{padding:var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);margin-bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger.kbq-accordion-trigger_fill{padding:var(--kbq-accordion-size-item-header-variant-fill-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_fill[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug{flex-direction:row-reverse;justify-content:flex-end;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between{flex-direction:row-reverse;justify-content:space-between;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(-180deg)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}button.kbq-accordion-trigger{flex:1}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m)
|
|
29
|
+
`, isInline: true, styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center;background:transparent;border:none;outline:none}.kbq-accordion-trigger .kbq-accordion-trigger__icon{padding:var(--kbq-size-xxs);transition:transform .3s ease-out}.kbq-accordion-trigger .kbq-accordion-trigger__badge,.kbq-accordion-trigger .kbq-accordion-trigger__caption{margin-top:var(--kbq-size-xxs);margin-right:var(--kbq-size-s)}.kbq-accordion-trigger .kbq-accordion-trigger__action{padding:var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);margin-bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger.kbq-accordion-trigger_fill{padding:var(--kbq-accordion-size-item-header-variant-fill-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_fill[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug{flex-direction:row-reverse;justify-content:flex-end;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between{flex-direction:row-reverse;justify-content:space-between;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(-180deg)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}button.kbq-accordion-trigger{flex:1}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], dependencies: [{ kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
36
30
|
}
|
|
37
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqAccordionTrigger, decorators: [{
|
|
38
32
|
type: Component,
|
|
39
33
|
args: [{ selector: 'kbq-accordion-trigger, [kbq-accordion-trigger]', template: `
|
|
40
34
|
@if (isHugSpaceBetween) {
|
|
41
|
-
<i
|
|
42
|
-
class="kbq-accordion-trigger__icon"
|
|
43
|
-
kbq-icon="kbq-chevron-down-s_16"
|
|
44
|
-
></i>
|
|
35
|
+
<i class="kbq-accordion-trigger__icon" kbq-icon="kbq-chevron-down-s_16"></i>
|
|
45
36
|
} @else {
|
|
46
|
-
<i
|
|
47
|
-
class="kbq-accordion-trigger__icon"
|
|
48
|
-
kbq-icon="kbq-chevron-right-s_16"
|
|
49
|
-
></i>
|
|
37
|
+
<i class="kbq-accordion-trigger__icon" kbq-icon="kbq-chevron-right-s_16"></i>
|
|
50
38
|
}
|
|
51
39
|
|
|
52
40
|
<ng-content />
|
|
@@ -55,6 +43,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
55
43
|
'[class.kbq-accordion-trigger_fill]': 'isFill',
|
|
56
44
|
'[class.kbq-accordion-trigger_hug]': 'isHug',
|
|
57
45
|
'[class.kbq-accordion-trigger_hug-space-between]': 'isHugSpaceBetween'
|
|
58
|
-
}, styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center;background:transparent;border:none;outline:none}.kbq-accordion-trigger .kbq-accordion-trigger__icon{padding:var(--kbq-size-xxs);transition:transform .3s ease-out}.kbq-accordion-trigger .kbq-accordion-trigger__badge,.kbq-accordion-trigger .kbq-accordion-trigger__caption{margin-top:var(--kbq-size-xxs);margin-right:var(--kbq-size-s)}.kbq-accordion-trigger .kbq-accordion-trigger__action{padding:var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);margin-bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger.kbq-accordion-trigger_fill{padding:var(--kbq-accordion-size-item-header-variant-fill-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_fill[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug{flex-direction:row-reverse;justify-content:flex-end;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between{flex-direction:row-reverse;justify-content:space-between;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(-180deg)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}button.kbq-accordion-trigger{flex:1}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m)
|
|
46
|
+
}, styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center;background:transparent;border:none;outline:none}.kbq-accordion-trigger .kbq-accordion-trigger__icon{padding:var(--kbq-size-xxs);transition:transform .3s ease-out}.kbq-accordion-trigger .kbq-accordion-trigger__badge,.kbq-accordion-trigger .kbq-accordion-trigger__caption{margin-top:var(--kbq-size-xxs);margin-right:var(--kbq-size-s)}.kbq-accordion-trigger .kbq-accordion-trigger__action{padding:var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);margin-bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger.kbq-accordion-trigger_fill{padding:var(--kbq-accordion-size-item-header-variant-fill-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_fill[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug{flex-direction:row-reverse;justify-content:flex-end;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between{flex-direction:row-reverse;justify-content:space-between;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(-180deg)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}button.kbq-accordion-trigger{flex:1}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"] }]
|
|
59
47
|
}] });
|
|
60
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
48
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLXRyaWdnZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tcG9uZW50cy9hY2NvcmRpb24vYWNjb3JkaW9uLXRyaWdnZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3JFLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQzlFLE9BQU8sRUFBRSxZQUFZLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQzs7OztBQXVCMUUsTUFBTSxPQUFPLG1CQUFtQjtJQXJCaEM7UUFzQmMsY0FBUyxHQUFpQixNQUFNLENBQUMsWUFBWSxDQUFDLENBQUM7S0FhNUQ7SUFYRyxJQUFJLE1BQU07UUFDTixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxLQUFLLG1CQUFtQixDQUFDLElBQUksQ0FBQztJQUMvRCxDQUFDO0lBRUQsSUFBSSxLQUFLO1FBQ0wsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sS0FBSyxtQkFBbUIsQ0FBQyxHQUFHLENBQUM7SUFDOUQsQ0FBQztJQUVELElBQUksaUJBQWlCO1FBQ2pCLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLEtBQUssbUJBQW1CLENBQUMsZUFBZSxDQUFDO0lBQzFFLENBQUM7aUlBYlEsbUJBQW1CO3FIQUFuQixtQkFBbUIsMlhBbkJsQjs7Ozs7Ozs7S0FRVDs7MkZBV1EsbUJBQW1CO2tCQXJCL0IsU0FBUzsrQkFDSSxnREFBZ0QsWUFDaEQ7Ozs7Ozs7O0tBUVQsa0JBRWUsQ0FBQyw0QkFBNEIsQ0FBQyxpQkFDL0IsaUJBQWlCLENBQUMsSUFBSSxRQUMvQjt3QkFDRixLQUFLLEVBQUUsdUJBQXVCO3dCQUM5QixvQ0FBb0MsRUFBRSxRQUFRO3dCQUM5QyxtQ0FBbUMsRUFBRSxPQUFPO3dCQUM1QyxpREFBaUQsRUFBRSxtQkFBbUI7cUJBQ3pFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbmplY3QsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBSZHhBY2NvcmRpb25UcmlnZ2VyRGlyZWN0aXZlIH0gZnJvbSAnQHJhZGl4LW5nL3ByaW1pdGl2ZXMvYWNjb3JkaW9uJztcbmltcG9ydCB7IEticUFjY29yZGlvbiwgS2JxQWNjb3JkaW9uVmFyaWFudCB9IGZyb20gJy4vYWNjb3JkaW9uLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAna2JxLWFjY29yZGlvbi10cmlnZ2VyLCBba2JxLWFjY29yZGlvbi10cmlnZ2VyXScsXG4gICAgdGVtcGxhdGU6IGBcbiAgICAgICAgQGlmIChpc0h1Z1NwYWNlQmV0d2Vlbikge1xuICAgICAgICAgICAgPGkgY2xhc3M9XCJrYnEtYWNjb3JkaW9uLXRyaWdnZXJfX2ljb25cIiBrYnEtaWNvbj1cImticS1jaGV2cm9uLWRvd24tc18xNlwiPjwvaT5cbiAgICAgICAgfSBAZWxzZSB7XG4gICAgICAgICAgICA8aSBjbGFzcz1cImticS1hY2NvcmRpb24tdHJpZ2dlcl9faWNvblwiIGticS1pY29uPVwia2JxLWNoZXZyb24tcmlnaHQtc18xNlwiPjwvaT5cbiAgICAgICAgfVxuXG4gICAgICAgIDxuZy1jb250ZW50IC8+XG4gICAgYCxcbiAgICBzdHlsZVVybHM6IFsnYWNjb3JkaW9uLXRyaWdnZXIuY29tcG9uZW50LnNjc3MnLCAnYWNjb3JkaW9uLXRva2Vucy5zY3NzJ10sXG4gICAgaG9zdERpcmVjdGl2ZXM6IFtSZHhBY2NvcmRpb25UcmlnZ2VyRGlyZWN0aXZlXSxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICdrYnEtYWNjb3JkaW9uLXRyaWdnZXInLFxuICAgICAgICAnW2NsYXNzLmticS1hY2NvcmRpb24tdHJpZ2dlcl9maWxsXSc6ICdpc0ZpbGwnLFxuICAgICAgICAnW2NsYXNzLmticS1hY2NvcmRpb24tdHJpZ2dlcl9odWddJzogJ2lzSHVnJyxcbiAgICAgICAgJ1tjbGFzcy5rYnEtYWNjb3JkaW9uLXRyaWdnZXJfaHVnLXNwYWNlLWJldHdlZW5dJzogJ2lzSHVnU3BhY2VCZXR3ZWVuJ1xuICAgIH1cbn0pXG5leHBvcnQgY2xhc3MgS2JxQWNjb3JkaW9uVHJpZ2dlciB7XG4gICAgcHJvdGVjdGVkIGFjY29yZGlvbjogS2JxQWNjb3JkaW9uID0gaW5qZWN0KEticUFjY29yZGlvbik7XG5cbiAgICBnZXQgaXNGaWxsKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5hY2NvcmRpb24udmFyaWFudCA9PT0gS2JxQWNjb3JkaW9uVmFyaWFudC5maWxsO1xuICAgIH1cblxuICAgIGdldCBpc0h1ZygpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuYWNjb3JkaW9uLnZhcmlhbnQgPT09IEticUFjY29yZGlvblZhcmlhbnQuaHVnO1xuICAgIH1cblxuICAgIGdldCBpc0h1Z1NwYWNlQmV0d2VlbigpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuYWNjb3JkaW9uLnZhcmlhbnQgPT09IEticUFjY29yZGlvblZhcmlhbnQuaHVnU3BhY2VCZXR3ZWVuO1xuICAgIH1cbn1cbiJdfQ==
|
|
@@ -21,7 +21,7 @@ export class KbqAccordion {
|
|
|
21
21
|
this.focusMonitor.stopMonitoring(this.elementRef);
|
|
22
22
|
}
|
|
23
23
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqAccordion, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqAccordion, selector: "kbq-accordion, [kbq-accordion]", inputs: { variant: "variant" }, host: { classAttribute: "kbq-accordion" }, hostDirectives: [{ directive: i2.RdxAccordionRootDirective, inputs: ["type", "type", "collapsible", "collapsible", "disabled", "disabled", "defaultValue", "defaultValue", "value", "value"], outputs: ["onValueChange", "onValueChange"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@keyframes slideDown{0%{height:0;padding-bottom:0}to{height:var(--radix-accordion-content-height);padding-bottom:0}}@keyframes slideUp{0%{height:var(--radix-accordion-content-height);padding-bottom:0}to{height:0;padding-bottom:0}}.kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:2px;border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height)}.kbq-accordion-content{display:block;overflow:hidden;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{animation:slideDown .3s ease-out}.kbq-accordion-content[data-state=closed]{animation:slideUp .3s ease-out}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:focus-within{border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m)
|
|
24
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqAccordion, selector: "kbq-accordion, [kbq-accordion]", inputs: { variant: "variant" }, host: { classAttribute: "kbq-accordion" }, hostDirectives: [{ directive: i2.RdxAccordionRootDirective, inputs: ["type", "type", "collapsible", "collapsible", "disabled", "disabled", "defaultValue", "defaultValue", "value", "value"], outputs: ["onValueChange", "onValueChange"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@keyframes slideDown{0%{height:0;padding-bottom:0}to{height:var(--radix-accordion-content-height);padding-bottom:0}}@keyframes slideUp{0%{height:var(--radix-accordion-content-height);padding-bottom:0}to{height:0;padding-bottom:0}}.kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:2px;border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height)}.kbq-accordion-content{display:block;overflow:hidden;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{animation:slideDown .3s ease-out}.kbq-accordion-content[data-state=closed]{animation:slideUp .3s ease-out}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:focus-within{border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
25
25
|
}
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqAccordion, decorators: [{
|
|
27
27
|
type: Component,
|
|
@@ -33,7 +33,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
33
33
|
}
|
|
34
34
|
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
35
35
|
class: 'kbq-accordion'
|
|
36
|
-
}, styles: ["@keyframes slideDown{0%{height:0;padding-bottom:0}to{height:var(--radix-accordion-content-height);padding-bottom:0}}@keyframes slideUp{0%{height:var(--radix-accordion-content-height);padding-bottom:0}to{height:0;padding-bottom:0}}.kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:2px;border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height)}.kbq-accordion-content{display:block;overflow:hidden;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{animation:slideDown .3s ease-out}.kbq-accordion-content[data-state=closed]{animation:slideUp .3s ease-out}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:focus-within{border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m)
|
|
36
|
+
}, styles: ["@keyframes slideDown{0%{height:0;padding-bottom:0}to{height:var(--radix-accordion-content-height);padding-bottom:0}}@keyframes slideUp{0%{height:var(--radix-accordion-content-height);padding-bottom:0}to{height:0;padding-bottom:0}}.kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:2px;border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height)}.kbq-accordion-content{display:block;overflow:hidden;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{animation:slideDown .3s ease-out}.kbq-accordion-content[data-state=closed]{animation:slideUp .3s ease-out}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:focus-within{border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"] }]
|
|
37
37
|
}], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i0.ElementRef }], propDecorators: { variant: [{
|
|
38
38
|
type: Input
|
|
39
39
|
}] } });
|