@koobiq/components 19.1.0 → 19.2.0

package/filter-bar/filters.d.ts

@@ -1,12 +1,21 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
+import { DestroyRef, ElementRef, EventEmitter, OnInit } from '@angular/core';
 import { FormControl, UntypedFormControl } from '@angular/forms';
-import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqButton, KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+import { KbqPopoverTrigger } from '@koobiq/components/popover';
 import { Observable } from 'rxjs';
 import { KbqFilterBar } from './filter-bar';
 import { KbqFilter, KbqSaveFilterError, KbqSaveFilterEvent } from './filter-bar.types';
 import * as i0 from "@angular/core";
 export declare class KbqFilters implements OnInit {
+    /** @docs-private */
+    protected readonly elementRef: ElementRef<any>;
+    /** @docs-private */
+    protected readonly destroyRef: DestroyRef;
+    /** @docs-private */
+    protected readonly focusMonitor: FocusMonitor;
     /** @docs-private */
     protected readonly placements: typeof PopUpPlacements;
     /** @docs-private */
@@ -17,9 +26,18 @@ export declare class KbqFilters implements OnInit {
     protected readonly filterBar: KbqFilterBar;
     /** @docs-private */
     private readonly changeDetectorRef;
-    private button;
-    private popover;
-    private dropdown;
+    /** @docs-private */
+    protected mainButton: KbqButton;
+    /** @docs-private */
+    protected saveNewFilterButton: KbqButton;
+    /** @docs-private */
+    protected filterActionsButton: KbqButton;
+    /** @docs-private */
+    protected popover: KbqPopoverTrigger;
+    /** @docs-private */
+    protected dropdown: KbqDropdownTrigger;
+    /** @docs-private */
+    protected filterActionsDropdown: KbqDropdownTrigger;
     private search;
     private newFilterName;
     private saveFilterButton;
@@ -29,6 +47,8 @@ export declare class KbqFilters implements OnInit {
     filteredOptions: Observable<KbqFilter[]>;
     /** @docs-private */
     popoverSize: PopUpSizes;
+    /** @docs-private */
+    popoverOffset: number;
     /** new filter name for saving */
     filterName: FormControl<string | null>;
     /** true if saving a new filter, false if saving changes in filter */
@@ -54,6 +74,8 @@ export declare class KbqFilters implements OnInit {
     get popoverHeader(): string;
     /** Component state. true if opened dropdown or popup */
     get opened(): boolean;
+    /** Component state. true if opened dropdown or popup of filterActions */
+    get filterActionsOpened(): boolean;
     /** Selected filter */
     get filter(): KbqFilter | null;
     /** Component state. True if 'filters' input contains no elements. */
@@ -61,8 +83,15 @@ export declare class KbqFilters implements OnInit {
     /** localized data
      * @docs-private */
     get localeData(): any;
+    /** Current focus origin state.
+     * @docs-private */
+    get focusOrigin(): FocusOrigin;
+    private _focusOrigin;
+    private focusedElementBeforeOpen;
     constructor();
     ngOnInit(): void;
+    /** @docs-private */
+    focusedElementBeforeIs(button: KbqButton): boolean;
     selectFilter(filter: KbqFilter): void;
     saveChanges(): void;
     saveAsNew(event?: Event): void;
@@ -71,7 +100,9 @@ export declare class KbqFilters implements OnInit {
     preparePopover(): void;
     openSaveAsNewFilterPopover(): void;
     openChangeFilterNamePopover(): void;
-    closePopover: () => void;
+    /** @docs-private */
+    saveFocusedElement(button?: KbqButton): void;
+    closePopover: (restoreFocus?: boolean) => void;
     /** @docs-private */
     stopEventPropagation(event: Event): void;
     /** @docs-private */
@@ -79,6 +110,7 @@ export declare class KbqFilters implements OnInit {
     /** @docs-private */
     onDropdownOpen(): void;
     resetFilterChanges(): void;
+    removeFilter(): void;
     /** Hide the popup and restore focus.
      * Use this method in the onSave, onSaveAsNew, or onChangeFilter events after the data has been successfully saved. */
     filterSavedSuccessfully(): void;

package/navbar/_navbar-item_vertical.scss

@@ -31,6 +31,14 @@
             top: var(--kbq-size-s);
             bottom: 0;
         }
+
+        & + .kbq-navbar-brand.kbq-vertical {
+            padding: var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m);
+
+            &:after {
+                top: 0;
+            }
+        }
     }
 
     &.kbq-expanded {

package/navbar/navbar-brand.scss

@@ -54,10 +54,10 @@ a.kbq-navbar-brand {
     flex-direction: row;
     align-items: center;
 
-    padding: var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m);
+    padding: var(--kbq-size-m);
 
     &:after {
-        top: 0;
+        top: var(--kbq-size-s);
         right: var(--kbq-size-s);
         bottom: var(--kbq-size-s);
         left: var(--kbq-size-s);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "19.1.0",
+    "version": "19.2.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,9 +24,9 @@
         "@angular/cdk": "^19.0.0",
         "@angular/core": "^19.0.0",
         "@angular/forms": "^19.0.0",
-        "@koobiq/cdk": "19.1.0",
-        "@koobiq/angular-moment-adapter": "19.1.0",
-        "@koobiq/angular-luxon-adapter": "19.1.0",
+        "@koobiq/cdk": "19.2.0",
+        "@koobiq/angular-moment-adapter": "19.2.0",
+        "@koobiq/angular-luxon-adapter": "19.2.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/tokens-builder": "3.11.0",

package/popover/popover.component.d.ts

@@ -1,6 +1,6 @@
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { CdkScrollable, Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
-import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, InjectionToken, OnInit, TemplateRef, Type } from '@angular/core';
+import { AfterContentInit, AfterViewInit, DestroyRef, ElementRef, EventEmitter, InjectionToken, OnInit, TemplateRef, Type } from '@angular/core';
 import { KbqComponentColors, KbqPopUp, KbqPopUpPlacementValues, KbqPopUpSizeValues, KbqPopUpTrigger, KbqStickToWindowPlacementValues } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare const defaultOffsetYWithArrow = 8;
@@ -94,6 +94,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     set closeOnScroll(value: boolean);
     private _closeOnScroll;
     get hasClickTrigger(): boolean;
+    /** @docs-private */
+    get instanceDestroyRef(): DestroyRef;
     backdropClass: string;
     arrow: boolean;
     offset: number | null;

package/schematics/ng-add/index.js

@@ -27,8 +27,8 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^19.2.19");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^19.1.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^19.1.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^19.2.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^19.2.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^11.2.0");

package/tree/_tree-theme.scss

@@ -37,11 +37,13 @@
 
         &:not(.kbq-disabled) {
             &:hover,
+            &.kbq-hovered,
             &.kbq-action-button-focused {
                 @include kbq-tree-option(states-hover);
             }
 
-            &:active {
+            &:active,
+            &.kbq-active {
                 --kbq-option-background: var(--kbq-tree-states-active-container-background);
 
                 background: var(--kbq-tree-states-active-container-background);
@@ -50,11 +52,13 @@
             &.kbq-selected {
                 @include kbq-tree-option(states-selected);
 
-                &:hover {
+                &:hover,
+                &.kbq-hovered {
                     @include kbq-tree-option(states-selected-hover);
                 }
 
-                &:active {
+                &:active,
+                &.kbq-active {
                     --kbq-option-background: var(--kbq-tree-states-selected-active-container-background);
 
                     background: var(--kbq-tree-states-selected-active-container-background);
@@ -65,11 +69,13 @@
             &.kbq-tree-option_multiple.kbq-selected {
                 background: var(--kbq-tree-multiple-states-selected-container-background);
 
-                &:hover {
+                &:hover,
+                &.kbq-hovered {
                     background: var(--kbq-tree-multiple-states-selected-hover-container-background);
                 }
 
-                &:active {
+                &:active,
+                &.kbq-active {
                     background: var(--kbq-tree-multiple-states-selected-active-container-background);
                 }
             }

package/tree/tree-option.scss

@@ -58,6 +58,7 @@
         cursor: pointer;
 
         &:hover,
+        &.kbq-hovered,
         &.kbq-action-button-focused {
             & .kbq-action-container {
                 display: flex;