@koobiq/components 18.30.0 → 18.31.0

package/filter-bar/filter-bar.d.ts

@@ -15,6 +15,11 @@ export declare class KbqFilterBar {
     filters: KbqFilters;
     /** @docs-private */
     filterReset: KbqFilterReset;
+    /**
+     * This is special logic that unselect all items when all selected because "all selected = nothing selected".
+     * Default is true
+     * */
+    selectedAllEqualsSelectedNothing: boolean;
     /** Filter that is currently selected */
     get filter(): KbqFilter | null;
     set filter(value: KbqFilter | null);
@@ -67,5 +72,6 @@ export declare class KbqFilterBar {
     private updateLocaleParams;
     private initDefaultParams;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFilterBar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFilterBar, "kbq-filter-bar, [kbq-filter-bar]", never, { "filter": { "alias": "filter"; "required": false; }; "pipeTemplates": { "alias": "pipeTemplates"; "required": false; }; }, { "filterChange": "filterChange"; "onChangePipe": "onChangePipe"; "onRemovePipe": "onRemovePipe"; "onClosePipe": "onClosePipe"; }, ["filters", "filterReset"], ["kbq-filters", "*", "kbq-pipe-add", "kbq-filter-reset", "kbq-filter-search, [kbq-filter-search]", "kbq-filter-refresher, [kbq-filter-refresher]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFilterBar, "kbq-filter-bar, [kbq-filter-bar]", never, { "selectedAllEqualsSelectedNothing": { "alias": "selectedAllEqualsSelectedNothing"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "pipeTemplates": { "alias": "pipeTemplates"; "required": false; }; }, { "filterChange": "filterChange"; "onChangePipe": "onChangePipe"; "onRemovePipe": "onRemovePipe"; "onClosePipe": "onClosePipe"; }, ["filters", "filterReset"], ["kbq-filters", "*", "kbq-pipe-add", "kbq-filter-reset", "kbq-filter-search, [kbq-filter-search]", "kbq-filter-refresher, [kbq-filter-refresher]"], true, never>;
+    static ngAcceptInputType_selectedAllEqualsSelectedNothing: unknown;
 }

package/filter-bar/filter-bar.types.d.ts

@@ -88,6 +88,11 @@ export interface KbqPipe {
     value: unknown | null;
     search?: boolean;
     selectAll?: boolean;
+    /**
+     * This is special logic that unselect all items when all selected because "all selected = nothing selected".
+     * Default is true
+     * */
+    selectedAllEqualsSelectedNothing?: boolean;
     /** @deprecated use cleanable = false and removable = false instead */
     required?: boolean;
     cleanable: boolean;

package/filter-bar/pipes/pipe-multi-select.d.ts

@@ -25,6 +25,7 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     get allVisibleOptionsSelected(): boolean;
     /** true if all options selected */
     get allOptionsSelected(): boolean;
+    get selectedAllEqualsSelectedNothing(): boolean;
     private get visibleOptions();
     private selectionAllInProgress;
     /** @docs-private */
@@ -38,9 +39,12 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     /** @docs-private */
     toggleSelectionAllByEnterKey(): void;
     /** @docs-private */
-    toggleSelectionAll(): void;
+    toggleSelectionAll(emitEvent?: boolean): void;
+    private emitChangePipeEvent;
     /** Comparator of selected options */
     compareByValue: (o1: any, o2: any) => boolean;
+    /** handler for select all options in select */
+    selectAllHandler: (event: KeyboardEvent) => void;
     onClose(): void;
     /** opens select */
     open(): void;

package/filter-bar/pipes/pipe-multi-tree-select.d.ts

@@ -28,6 +28,7 @@ export declare class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSele
     get numberOfSelectedLeaves(): number;
     /** true if all options selected */
     get allOptionsSelected(): boolean;
+    get selectedAllEqualsSelectedNothing(): boolean;
     /** true if all visible options selected */
     get allVisibleOptionsSelected(): boolean;
     constructor();
@@ -38,13 +39,16 @@ export declare class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSele
         value: any;
     }): void;
     searchKeydownHandler(): void;
-    toggleSelectAllNode(): void;
+    toggleSelectAllNode(emitEvent?: boolean): void;
     /** updates values for selection and value template */
     updateTemplates: (templates: KbqPipeTemplate[] | null) => void;
     /** opens select */
     open(): void;
     onOpen(): void;
     onClose(): void;
+    /** handler for select all options in select */
+    selectAllHandler: (event: KeyboardEvent) => void;
+    private emitChangePipeEvent;
     private toggleParents;
     private transformer;
     private getLevel;

package/icon/_icon-button-theme.scss

@@ -1,110 +1,92 @@
+@use 'sass:map';
+
+@mixin _kbq-icon-button-color($map) {
+    color: map.get($map, default);
+
+    &:hover {
+        color: map.get($map, hover);
+    }
+
+    &:active,
+    &.kbq-active {
+        color: map.get($map, active);
+    }
+
+    &.kbq-disabled {
+        color: map.get($map, disabled);
+    }
+}
+
 @mixin kbq-icon-button-theme() {
     .kbq-icon-button {
         &:focus {
             outline: none;
         }
 
-        // FIXME: move to unified mixin
         &.kbq-theme {
-            color: var(--kbq-icon-button-theme-default);
-
-            &:active,
-            &.kbq-active {
-                color: var(--kbq-icon-button-theme-states-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: var(--kbq-icon-button-theme-states-hover);
-            }
-
-            &.kbq-disabled {
-                color: var(--kbq-icon-button-theme-states-disabled);
-            }
+            @include _kbq-icon-button-color(
+                (
+                    default: var(--kbq-icon-button-theme-default),
+                    hover: var(--kbq-icon-button-theme-states-hover),
+                    active: var(--kbq-icon-button-theme-states-active),
+                    disabled: var(--kbq-icon-button-theme-states-disabled)
+                )
+            );
         }
 
         &.kbq-contrast {
-            color: var(--kbq-icon-button-contrast-default);
-
-            &:active,
-            &.kbq-active {
-                color: var(--kbq-icon-button-contrast-states-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: var(--kbq-icon-button-contrast-states-hover);
-            }
-
-            &.kbq-disabled {
-                color: var(--kbq-icon-button-contrast-states-disabled);
-            }
+            @include _kbq-icon-button-color(
+                (
+                    default: var(--kbq-icon-button-contrast-default),
+                    hover: var(--kbq-icon-button-contrast-states-hover),
+                    active: var(--kbq-icon-button-contrast-states-active),
+                    disabled: var(--kbq-icon-button-contrast-states-disabled)
+                )
+            );
         }
 
         &.kbq-contrast-fade {
-            color: var(--kbq-icon-button-fade-contrast-default);
-
-            &:active,
-            &.kbq-active {
-                color: var(--kbq-icon-button-fade-contrast-states-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: var(--kbq-icon-button-fade-contrast-states-hover);
-            }
-
-            &.kbq-disabled {
-                color: var(--kbq-icon-button-fade-contrast-states-disabled);
-            }
+            @include _kbq-icon-button-color(
+                (
+                    default: var(--kbq-icon-button-fade-contrast-default),
+                    hover: var(--kbq-icon-button-fade-contrast-states-hover),
+                    active: var(--kbq-icon-button-fade-contrast-states-active),
+                    disabled: var(--kbq-icon-button-fade-contrast-states-disabled)
+                )
+            );
         }
 
         &.kbq-error {
-            color: var(--kbq-icon-button-error-default);
-
-            &:active,
-            &.kbq-active {
-                color: var(--kbq-icon-button-error-states-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: var(--kbq-icon-button-error-states-hover);
-            }
-
-            &.kbq-disabled {
-                color: var(--kbq-icon-button-error-states-disabled);
-            }
+            @include _kbq-icon-button-color(
+                (
+                    default: var(--kbq-icon-button-error-default),
+                    hover: var(--kbq-icon-button-error-states-hover),
+                    active: var(--kbq-icon-button-error-states-active),
+                    disabled: var(--kbq-icon-button-error-states-disabled)
+                )
+            );
         }
 
         &.kbq-success {
-            color: var(--kbq-icon-button-success-default);
-
-            &:active,
-            &.kbq-active {
-                color: var(--kbq-icon-button-success-states-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: var(--kbq-icon-button-success-states-hover);
-            }
-
-            &.kbq-disabled {
-                color: var(--kbq-icon-button-success-states-disabled);
-            }
+            @include _kbq-icon-button-color(
+                (
+                    default: var(--kbq-icon-button-success-default),
+                    hover: var(--kbq-icon-button-success-states-hover),
+                    active: var(--kbq-icon-button-success-states-active),
+                    disabled: var(--kbq-icon-button-success-states-disabled)
+                )
+            );
         }
 
         &.kbq-warning {
-            color: var(--kbq-icon-button-warning-default);
-
-            &:active,
-            &.kbq-active {
-                color: var(--kbq-icon-button-warning-states-active);
-            }
-
-            &:not(.kbq-disabled):hover {
-                color: var(--kbq-icon-button-warning-states-hover);
-            }
-
-            &.kbq-disabled {
-                color: var(--kbq-icon-button-warning-states-disabled);
-            }
+            @include _kbq-icon-button-color(
+                (
+                    default: var(--kbq-icon-button-warning-default),
+                    hover: var(--kbq-icon-button-warning-states-hover),
+                    active: var(--kbq-icon-button-warning-states-active),
+                    disabled: var(--kbq-icon-button-warning-states-disabled)
+                )
+            );
         }
 
         &.cdk-keyboard-focused {

package/list/_list-theme.scss

@@ -28,12 +28,20 @@
             @include _kbq-list-item(states-hover);
         }
 
-        &.kbq-selected {
+        &:active:not(.kbq-disabled) {
+            @include _kbq-list-item(states-active);
+        }
+
+        &.kbq-selected:not(.kbq-disabled) {
             @include _kbq-list-item(states-selected);
 
-            &:hover:not(.kbq-disabled) {
+            &:hover {
                 @include _kbq-list-item(states-selected-hover);
             }
+
+            &:active {
+                @include _kbq-list-item(states-selected-active);
+            }
         }
 
         &.kbq-disabled {
@@ -41,6 +49,20 @@
         }
     }
 
+    .kbq-list-option.kbq-list-option_multiple {
+        &.kbq-selected:not(.kbq-disabled) {
+            @include _kbq-list-item(multiple-states-selected);
+
+            &:hover {
+                @include _kbq-list-item(multiple-states-selected-hover);
+            }
+
+            &:active {
+                @include _kbq-list-item(multiple-states-selected-active);
+            }
+        }
+    }
+
     .kbq-list-selection.cdk-keyboard-focused {
         & .kbq-list-option.kbq-focused {
             border-color: var(--kbq-list-states-focused-focus-outline-color);

package/list/list-tokens.scss

@@ -5,14 +5,19 @@
     --kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);
     --kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);
     --kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);
+    --kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);
     --kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);
     --kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);
     --kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);
     --kbq-list-states-selected-container-background: var(--kbq-background-theme-less);
+    --kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);
     --kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);
     --kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);
     --kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);
     --kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);
+    --kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);
+    --kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);
+    --kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);
     --kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);
     --kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);
     --kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.30.0",
+    "version": "18.31.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,13 +24,13 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.30.0",
-        "@koobiq/angular-moment-adapter": "18.30.0",
-        "@koobiq/angular-luxon-adapter": "18.30.0",
+        "@koobiq/cdk": "18.31.0",
+        "@koobiq/angular-moment-adapter": "18.31.0",
+        "@koobiq/angular-luxon-adapter": "18.31.0",
         "@koobiq/date-formatter": "^3.2.3",
-        "@koobiq/icons": "^10.1.0",
+        "@koobiq/icons": "^10.4.0",
         "@koobiq/tokens-builder": "3.11.0",
-        "@koobiq/design-tokens": "3.13.2",
+        "@koobiq/design-tokens": "3.14.0",
         "@radix-ng/primitives": "^0.23.0"
     },
     "dependencies": {

package/schematics/ng-add/index.js

@@ -27,13 +27,13 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.14");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.30.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.30.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.31.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.31.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.2.3");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.2.3");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^10.1.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.13.2");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.13.2");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^10.4.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.14.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.14.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@messageformat/core', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@radix-ng/primitives', "^0.23.0");
         utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.6.1");

package/select/select.component.d.ts

@@ -165,6 +165,11 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      */
     get compareWith(): (o1: any, o2: any) => boolean;
     set compareWith(fn: (o1: any, o2: any) => boolean);
+    /**
+     * Function for handling the combination Ctrl + A (select all). By default, the internal handler is used.
+     */
+    get selectAllHandler(): (event: KeyboardEvent, select: KbqSelect) => void;
+    set selectAllHandler(fn: (event: KeyboardEvent, select: KbqSelect) => void);
     /**
      * Width of the panel. If set to `auto`, the panel will match the trigger width.
      * If set to null or an empty string, the panel will grow to match the longest option's text.
@@ -339,10 +344,12 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     private getOverlayWidth;
     /** Comparison function to specify which option is displayed. Defaults to object equality. */
     private _compareWith;
+    /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
+    private _selectAllHandler;
     private getTotalVisibleItems;
     private buildTriggerClone;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "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; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "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; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_panelMinWidth: unknown;
     static ngAcceptInputType_tabIndex: unknown;

package/tree/_tree-theme.scss

@@ -33,15 +33,38 @@
     .kbq-tree-option {
         @include kbq-tree-option(default);
 
-        &:hover:not(.kbq-disabled) {
-            @include kbq-tree-option(states-hover);
-        }
+        &:not(.kbq-disabled) {
+            &:hover {
+                @include kbq-tree-option(states-hover);
+            }
+
+            &:active {
+                background: var(--kbq-tree-states-active-container-background);
+            }
+
+            &.kbq-selected {
+                @include kbq-tree-option(states-selected);
+
+                &:hover {
+                    @include kbq-tree-option(states-selected-hover);
+                }
+
+                &:active {
+                    background: var(--kbq-tree-states-selected-active-container-background);
+                }
+            }
+
+            &.kbq-checked:not(.kbq-selected),
+            &.kbq-tree-option_multiple.kbq-selected {
+                background: var(--kbq-tree-multiple-states-selected-container-background);
 
-        &.kbq-selected {
-            @include kbq-tree-option(states-selected);
+                &:hover {
+                    background: var(--kbq-tree-multiple-states-selected-hover-container-background);
+                }
 
-            &:hover:not(.kbq-disabled) {
-                @include kbq-tree-option(states-selected-hover);
+                &:active {
+                    background: var(--kbq-tree-multiple-states-selected-active-container-background);
+                }
             }
         }
 

package/tree/tree-option.scss

@@ -70,12 +70,15 @@
         }
     }
 
-    &:is(.kbq-selected, .kbq-focused, .kbq-active):has(+ :is(.kbq-selected, .kbq-focused, .kbq-active)) {
+    &:is(.kbq-checked, .kbq-selected, .kbq-focused, .kbq-active):has(
+            + :is(.kbq-checked, .kbq-selected, .kbq-focused, .kbq-active)
+        ) {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
 
-    &:is(.kbq-selected, .kbq-focused, .kbq-active) + :is(.kbq-selected, .kbq-focused, .kbq-active) {
+    &:is(.kbq-checked, .kbq-selected, .kbq-focused, .kbq-active)
+        + :is(.kbq-checked, .kbq-selected, .kbq-focused, .kbq-active) {
         border-top-left-radius: 0;
         border-top-right-radius: 0;
     }

package/tree/tree-tokens.scss

@@ -16,6 +16,7 @@
     --kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);
     --kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);
     --kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);
+    --kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);
     --kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);
     --kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);
     --kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);
@@ -23,12 +24,16 @@
     --kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);
     --kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
     --kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);
+    --kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);
     --kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);
     --kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);
     --kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);
     --kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);
     --kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);
     --kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);
+    --kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);
+    --kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);
+    --kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);
     --kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);
     --kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);
     --kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);

package/tree-select/tree-select.component.d.ts

@@ -164,6 +164,13 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
+    /**
+     * Function for handling the combination Ctrl + A (select all). By default, the internal handler is used.
+     */
+    get selectAllHandler(): (event: KeyboardEvent, select: KbqTreeSelect) => void;
+    set selectAllHandler(fn: (event: KeyboardEvent, select: KbqTreeSelect) => void);
+    /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
+    private _selectAllHandler;
     /** Whether the select is focused. */
     get focused(): boolean;
     set focused(value: boolean);
@@ -295,7 +302,7 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     private scrollActiveOptionIntoView;
     private subscribeOnSearchChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "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; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "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-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "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; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "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-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
     static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_disabled: unknown;
 }