@koobiq/components 19.1.0 → 19.3.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/inline-edit/inline-edit.d.ts

@@ -108,8 +108,8 @@ export declare class KbqInlineEdit {
     protected readonly colors: typeof KbqComponentColors;
     private initialValue;
     constructor();
-    /** @docs-private */
-    protected toggleMode(): void;
+    /** Manually switch mode */
+    toggleMode(): void;
     /** @docs-private */
     protected onClick(event: Event): void;
     /** @docs-private */

package/inline-edit/inline-edit.scss

@@ -100,7 +100,7 @@
     @include _inline-edit-typography();
 
     &:not(.kbq-inline-edit_with-label) {
-        --kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-m) - var(--kbq-size-border-width));
+        --kbq-inline-edit-padding-horizontal: var(--kbq-size-m);
     }
 
     &.kbq-inline-edit_with-label {

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.3.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -21,12 +21,13 @@
     },
     "homepage": "https://github.com/koobiq/angular-components#readme",
     "peerDependencies": {
+        "@angular/animations": "^19.0.0",
         "@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.3.0",
+        "@koobiq/angular-moment-adapter": "19.3.0",
+        "@koobiq/angular-luxon-adapter": "19.3.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/tokens-builder": "3.11.0",
@@ -249,6 +250,10 @@
             "types": "./sidepanel/index.d.ts",
             "default": "./fesm2022/koobiq-components-sidepanel.mjs"
         },
+        "./skeleton": {
+            "types": "./skeleton/index.d.ts",
+            "default": "./fesm2022/koobiq-components-skeleton.mjs"
+        },
         "./split-button": {
             "types": "./split-button/index.d.ts",
             "default": "./fesm2022/koobiq-components-split-button.mjs"

package/popover/_popover-theme.scss

@@ -18,7 +18,7 @@
         background: var(--kbq-popover-container-background);
     }
 
-    .kbq-popover__close {
+    .kbq-popover__close.kbq-popover__close_background-overlay-inverse {
         background-color: var(--kbq-background-overlay-inverse);
     }
 

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.3.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^19.3.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/select/select.component.d.ts

@@ -249,8 +249,9 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     get focused(): boolean;
     set focused(value: boolean);
     panelOpen: boolean;
+    /** true if virtual scrolling is used. */
+    withVirtualScroll: boolean;
     private _focused;
-    private withVirtualScroll;
     get isEmptySearchResult(): boolean;
     get canShowCleaner(): boolean;
     get selected(): KbqOptionBase | KbqOptionBase[];

package/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './module';
+export * from './skeleton';

package/skeleton/module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./skeleton";
+export declare class KbqSkeletonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSkeletonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSkeletonModule, never, [typeof i1.KbqSkeleton], [typeof i1.KbqSkeleton]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqSkeletonModule>;
+}

package/skeleton/skeleton.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+/**
+ * Component representing a skeleton placeholder.
+ */
+export declare class KbqSkeleton {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSkeleton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSkeleton, "kbq-skeleton", ["kbqSkeleton"], {}, {}, never, never, true, never>;
+}

package/skeleton/skeleton.scss

@@ -0,0 +1,41 @@
+@keyframes wave {
+    from {
+        transform: translateX(calc(var(--kbq-skeleton-wave-width) * -1));
+    }
+
+    to {
+        transform: translateX(100vw);
+    }
+}
+
+.kbq-skeleton {
+    --kbq-skeleton-min-height: var(--kbq-size-l);
+    --kbq-skeleton-animation-duration: 1.2s;
+    --kbq-skeleton-border-radius: var(--kbq-size-xxs);
+    --kbq-skeleton-wave-width: 100px;
+
+    position: relative;
+    display: flex;
+    min-height: var(--kbq-skeleton-min-height);
+    border-radius: var(--kbq-skeleton-border-radius);
+    background-color: var(--kbq-skeleton-background);
+    overflow: hidden;
+    clip-path: inset(0);
+    user-select: none;
+    pointer-events: none;
+
+    &::after {
+        content: '';
+        position: fixed;
+        inset-block: 0;
+        left: calc(var(--kbq-skeleton-wave-width) * -1);
+        width: var(--kbq-skeleton-wave-width);
+        background: linear-gradient(
+            90deg,
+            var(--kbq-skeleton-animation-wave-start) 0%,
+            var(--kbq-skeleton-animation-wave-center) 50%,
+            var(--kbq-skeleton-animation-wave-end) 100%
+        );
+        animation: wave var(--kbq-skeleton-animation-duration) ease-in infinite;
+    }
+}

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;

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

@@ -40,7 +40,8 @@ export declare class KbqTreeNavigationChange<T> {
 export declare class KbqTreeSelectionChange<T> {
     source: KbqTreeSelection;
     option: T;
-    constructor(source: KbqTreeSelection, option: T);
+    options?: T[] | undefined;
+    constructor(source: KbqTreeSelection, option: T, options?: T[] | undefined);
 }
 interface SelectionModelOption {
     id: number | string;

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

@@ -64,7 +64,8 @@ export declare class KbqTreeSelectChange {
     source: KbqTreeSelect;
     value: any;
     isUserInput: boolean;
-    constructor(source: KbqTreeSelect, value: any, isUserInput?: boolean);
+    values?: unknown[] | undefined;
+    constructor(source: KbqTreeSelect, value: any, isUserInput?: boolean, values?: unknown[] | undefined);
 }
 export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<KbqTreeOption>, CanUpdateErrorState {
     elementRef: ElementRef<HTMLElement>;