@koobiq/components 18.28.0 → 18.30.0

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

@@ -55,7 +55,9 @@ export declare enum KbqPipeTypes {
     ReadOnly = "readonly",
     Text = "text",
     Select = "select",
+    TreeSelect = "tree-select",
     MultiSelect = "multiselect",
+    MultiTreeSelect = "multi-tree-select",
     Date = "date",
     Datetime = "datetime"
 }
@@ -105,7 +107,32 @@ export interface KbqSaveFilterError {
     text?: string;
     nameAlreadyExists?: boolean;
 }
+/** saving statuses for KbqSaveFilterEvent */
+export declare enum KbqSaveFilterStatuses {
+    OnlyChanges = "onlyChanges",
+    NewName = "newName",
+    NewFilter = "newFilter"
+}
 export interface KbqSaveFilterEvent {
-    filter: KbqFilter | null;
+    filter: KbqFilter;
     filterBar: KbqFilterBar;
+    status?: KbqSaveFilterStatuses;
+}
+/** Flattened node */
+export declare class KbqTreeSelectFlatNode {
+    name: string;
+    value: unknown;
+    level: number;
+    expandable: boolean;
+    parent?: KbqTreeSelectFlatNode;
+}
+export interface KbqTreeSelectNode {
+    children: KbqTreeSelectNode[] | null;
+    name: string;
+    value: unknown;
 }
+/**
+ * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
+ * The return value is the list of extends `KbqTreeSelectNode`.
+ */
+export declare function kbqBuildTree<T extends KbqTreeSelectNode>(value: any, level: number): T[];

package/filter-bar/filters.d.ts

@@ -41,7 +41,8 @@ export declare class KbqFilters implements OnInit {
     readonly onSave: EventEmitter<KbqSaveFilterEvent>;
     /** Event that is generated whenever the user change a filter. */
     readonly onChangeFilter: EventEmitter<KbqSaveFilterEvent>;
-    /** Event that is generated whenever the user saves a filter as new. */
+    /** Event that is generated whenever the user saves a filter as new.
+     * @deprecated use onSave with status = newFilter. */
     readonly onSaveAsNew: EventEmitter<KbqSaveFilterEvent>;
     /** Event that is generated whenever the user remove a filter. */
     readonly onRemoveFilter: EventEmitter<KbqFilter>;
@@ -62,7 +63,7 @@ export declare class KbqFilters implements OnInit {
     ngOnInit(): void;
     selectFilter(filter: KbqFilter): void;
     saveChanges(): void;
-    saveAsNew(): void;
+    saveAsNew(event?: Event): void;
     showError(error?: KbqSaveFilterError): void;
     restoreFocus(): void;
     preparePopover(): void;

package/filter-bar/filters.scss

@@ -18,6 +18,10 @@
 
     & .kbq-filters__filter-name {
         @include common.kbq-truncate-line();
+
+        & .kbq-icon {
+            margin-bottom: var(--kbq-size-3xs);
+        }
     }
 
     & .kbq-filter-bar__separator {

package/filter-bar/pipes/base-pipe.scss

@@ -47,6 +47,7 @@
     }
 
     .kbq-select:not(:hover, .kbq-active),
+    .kbq-tree-select:not(:hover, .kbq-active),
     .kbq-button:not(:hover, .kbq-active, [disabled]) {
         & + .kbq-pipe-button:not(:hover, .kbq-active)::after {
             content: '';

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

@@ -21,8 +21,12 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     get isEmpty(): boolean;
     /** state for checkbox 'select all'. */
     get checkboxState(): KbqPseudoCheckboxState;
+    /** true if all visible options selected */
+    get allVisibleOptionsSelected(): boolean;
+    /** true if all options selected */
+    get allOptionsSelected(): boolean;
     private get visibleOptions();
-    private get allOptionsSelected();
+    private selectionAllInProgress;
     /** @docs-private */
     ngOnInit(): void;
     /** @docs-private */
@@ -37,6 +41,7 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     toggleSelectionAll(): void;
     /** Comparator of selected options */
     compareByValue: (o1: any, o2: any) => boolean;
+    onClose(): void;
     /** opens select */
     open(): void;
     private getFilteredOptions;

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

@@ -0,0 +1,57 @@
+import { OnInit } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { KbqPseudoCheckboxState } from '@koobiq/components/core';
+import { FlatTreeControl, KbqTreeFlatDataSource, KbqTreeFlattener, KbqTreeSelection } from '@koobiq/components/tree';
+import { KbqTreeSelect } from '@koobiq/components/tree-select';
+import { Observable } from 'rxjs';
+import { KbqPipeTemplate, KbqSelectValue, KbqTreeSelectFlatNode, KbqTreeSelectNode } from '../filter-bar.types';
+import { KbqBasePipe } from './base-pipe';
+import * as i0 from "@angular/core";
+export declare class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[]> implements OnInit {
+    /** control for search options */
+    searchControl: UntypedFormControl;
+    /** filtered by search options */
+    filteredOptions: Observable<any[]>;
+    treeControl: FlatTreeControl<KbqTreeSelectFlatNode>;
+    treeFlattener: KbqTreeFlattener<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
+    dataSource: KbqTreeFlatDataSource<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
+    template: any;
+    /** @docs-private */
+    select: KbqTreeSelect;
+    /** @docs-private */
+    tree: KbqTreeSelection;
+    /** selected value */
+    get selected(): KbqSelectValue[] | null;
+    /** Whether the current pipe is empty. */
+    get isEmpty(): boolean;
+    get selectAllCheckboxState(): KbqPseudoCheckboxState;
+    get numberOfSelectedLeaves(): number;
+    /** true if all options selected */
+    get allOptionsSelected(): boolean;
+    /** true if all visible options selected */
+    get allVisibleOptionsSelected(): boolean;
+    constructor();
+    ngOnInit(): void;
+    isNodeHasChild(_: number, nodeData: any): any;
+    isNodeSelectAll(_: number, nodeData: any): boolean;
+    onSelect({ value: option }: {
+        value: any;
+    }): void;
+    searchKeydownHandler(): void;
+    toggleSelectAllNode(): void;
+    /** updates values for selection and value template */
+    updateTemplates: (templates: KbqPipeTemplate[] | null) => void;
+    /** opens select */
+    open(): void;
+    onOpen(): void;
+    onClose(): void;
+    private toggleParents;
+    private transformer;
+    private getLevel;
+    private isExpandable;
+    private getChildren;
+    private getValue;
+    private getViewValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeMultiTreeSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeMultiTreeSelectComponent, "kbq-pipe-multi-tree-select", never, {}, {}, never, never, true, never>;
+}

package/filter-bar/pipes/pipe-multi-tree-select.scss

@@ -0,0 +1,19 @@
+.kbq-pipe__multi-tree-select {
+    .kbq-pipe__value {
+        margin-left: var(--kbq-size-xxs);
+    }
+
+    .kbq-badge {
+        align-self: center;
+
+        margin-left: var(--kbq-size-xs);
+    }
+
+    & .kbq-tree-select .kbq-select__trigger {
+        height: unset;
+    }
+}
+
+.kbq-pipe-multi-tree-select__panel .kbq-select__content {
+    max-height: 404px;
+}

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

@@ -0,0 +1,41 @@
+import { OnInit } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { FlatTreeControl, KbqTreeFlatDataSource, KbqTreeFlattener, KbqTreeOption } from '@koobiq/components/tree';
+import { KbqTreeSelect } from '@koobiq/components/tree-select';
+import { Observable } from 'rxjs';
+import { KbqPipeTemplate, KbqSelectValue, KbqTreeSelectFlatNode, KbqTreeSelectNode } from '../filter-bar.types';
+import { KbqBasePipe } from './base-pipe';
+import * as i0 from "@angular/core";
+export declare class KbqPipeTreeSelectComponent extends KbqBasePipe<KbqSelectValue> implements OnInit {
+    /** control for search options */
+    searchControl: UntypedFormControl;
+    /** filtered by search options */
+    filteredOptions: Observable<any[]>;
+    treeControl: FlatTreeControl<KbqTreeSelectFlatNode>;
+    treeFlattener: KbqTreeFlattener<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
+    dataSource: KbqTreeFlatDataSource<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
+    template: any;
+    /** @docs-private */
+    select: KbqTreeSelect;
+    /** selected value */
+    get selected(): KbqSelectValue | null;
+    /** Whether the current pipe is empty. */
+    get isEmpty(): boolean;
+    constructor();
+    ngOnInit(): void;
+    hasChild(_: number, nodeData: any): any;
+    onSelect(item: KbqTreeOption): void;
+    /** updates values for selection and value template */
+    updateTemplates: (templates: KbqPipeTemplate[] | null) => void;
+    /** opens select */
+    open(): void;
+    onOpen(): void;
+    private transformer;
+    private getLevel;
+    private isExpandable;
+    private getChildren;
+    private getValue;
+    private getViewValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeTreeSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeTreeSelectComponent, "kbq-pipe-tree-select", never, {}, {}, never, never, true, never>;
+}

package/filter-bar/pipes/pipe-tree-select.scss

@@ -0,0 +1,9 @@
+.kbq-pipe-tree-select__panel .kbq-tree-select__content {
+    max-height: 404px;
+}
+
+.kbq-pipe__tree-select {
+    .kbq-select__trigger {
+        height: unset;
+    }
+}

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

@@ -18,3 +18,4 @@ export * from './pipes/pipe-select';
 export * from './pipes/pipe-state';
 export * from './pipes/pipe-text';
 export * from './pipes/pipe-title';
+export * from './pipes/pipe-tree-select';

package/form-field/_form-field-theme.scss

@@ -82,18 +82,18 @@
                 -webkit-text-fill-color: var(--kbq-form-field-states-disabled-text);
             }
         }
-    }
 
-    .kbq-form-field__prefix,
-    .kbq-form-field__suffix {
-        .kbq-icon.kbq-empty {
-            color: var(--kbq-icon-contrast-fade);
+        .kbq-form-field__prefix,
+        .kbq-form-field__suffix {
+            .kbq-icon.kbq-empty {
+                color: var(--kbq-icon-contrast-fade);
+            }
         }
-    }
 
-    .kbq-form-field__hint {
-        & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
-            color: var(--kbq-form-field-hint-text);
+        .kbq-form-field__hint {
+            & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
+                color: var(--kbq-form-field-hint-text);
+            }
         }
     }
 }
@@ -101,9 +101,9 @@
 @mixin kbq-form-field-typography() {
     .kbq-form-field {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
-    }
 
-    .kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        .kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
+            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        }
     }
 }

package/form-field/form-field.d.ts

@@ -38,7 +38,9 @@ export declare class KbqFormField extends KbqColorDirective implements AfterCont
     get hasPasswordToggle(): boolean;
     get canShowCleaner(): boolean;
     get disabled(): boolean;
-    get canShowStepper(): boolean;
+    /** @deprecated stepper should be always visible when provided, so this parameter is redundant,
+     * use `hasStepper` instead */
+    canShowStepper: boolean;
     constructor(changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;

package/form-field/form-field.scss

@@ -13,6 +13,11 @@
 
     .kbq-form-field__container {
         box-sizing: border-box;
+        position: relative;
+        border-width: var(--kbq-form-field-size-border-width);
+        border-style: solid;
+        border-color: transparent;
+        border-radius: var(--kbq-form-field-size-border-radius);
     }
 
     .kbq-form-field:not(.kbq-form-field-type-textarea) {
@@ -61,82 +66,74 @@
     & + .kbq-password-hint {
         margin-top: var(--kbq-size-m);
     }
-}
-
-.kbq-form-field__container {
-    position: relative;
-    border-width: var(--kbq-form-field-size-border-width);
-    border-style: solid;
-    border-color: transparent;
-    border-radius: var(--kbq-form-field-size-border-radius);
-}
 
-.kbq-form-field__prefix,
-.kbq-form-field__suffix {
-    position: absolute;
-    top: 0;
-    bottom: 0;
+    .kbq-form-field__prefix,
+    .kbq-form-field__suffix {
+        position: absolute;
+        top: 0;
+        bottom: 0;
 
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-}
-
-.kbq-form-field__prefix {
-    left: 0;
-    padding-left: var(--kbq-size-m);
-    padding-right: var(--kbq-size-s);
-}
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
 
-.kbq-form-field__suffix {
-    right: 0;
-    padding-right: var(--kbq-size-m);
-    padding-left: var(--kbq-size-s);
-}
+    .kbq-form-field__prefix {
+        left: 0;
+        padding-left: var(--kbq-size-m);
+        padding-right: var(--kbq-size-s);
+    }
 
-.kbq-form-field__cleaner,
-.kbq-password-toggle,
-.kbq-stepper {
-    position: absolute;
+    .kbq-form-field__suffix {
+        right: 0;
+        padding-right: var(--kbq-size-m);
+        padding-left: var(--kbq-size-s);
+    }
 
-    top: 0;
-    bottom: 0;
-    right: 0;
-}
+    .kbq-form-field__cleaner,
+    .kbq-password-toggle,
+    .kbq-stepper {
+        position: absolute;
 
-.kbq-stepper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+        top: 0;
+        bottom: 0;
+        right: 0;
+    }
 
-    width: var(--kbq-form-field-size-icon-button-size);
+    .kbq-stepper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
 
-    .kbq-stepper-step-up,
-    .kbq-stepper-step-down {
-        cursor: pointer;
         width: var(--kbq-form-field-size-icon-button-size);
-        text-align: center;
-    }
 
-    .kbq-stepper-step-up {
-        transform: scaleY(-1);
+        .kbq-stepper-step-up,
+        .kbq-stepper-step-down {
+            cursor: pointer;
+            width: var(--kbq-form-field-size-icon-button-size);
+            text-align: center;
+        }
+
+        .kbq-stepper-step-up {
+            transform: scaleY(-1);
+        }
     }
-}
 
-.kbq-form-field__hint {
-    display: flex;
-    flex-direction: column;
-    margin-top: var(--kbq-form-field-hint-size-margin-top);
+    .kbq-form-field__hint {
+        display: flex;
+        flex-direction: column;
+        margin-top: var(--kbq-form-field-hint-size-margin-top);
 
-    & .kbq-password-hint:first-child {
-        margin-top: var(--kbq-size-s);
+        & .kbq-password-hint:first-child {
+            margin-top: var(--kbq-size-s);
+        }
     }
-}
 
-.kbq-password-hint {
-    margin-top: var(--kbq-form-field-hint-size-gap);
+    .kbq-password-hint {
+        margin-top: var(--kbq-form-field-hint-size-gap);
+    }
 }
 
 @include kbq-form-field-theme();

package/form-field/stepper.d.ts

@@ -1,11 +1,25 @@
 import { EventEmitter } from '@angular/core';
+import { KbqFormFieldControl } from './form-field-control';
 import * as i0 from "@angular/core";
+/**
+ * Used as temporary solution to resolve circular dependency.
+ * Moving `KbqStepper` to standalone will resolve the issue
+ */
+type KbqNumberInput = KbqFormFieldControl<unknown> & {
+    stepUp: (val: number) => void;
+    stepDown: (val: number) => void;
+    step: number;
+};
 export declare class KbqStepper {
+    private readonly formField;
     readonly stepUp: EventEmitter<void>;
     readonly stepDown: EventEmitter<void>;
-    connectTo(numberInput: any): void;
+    /** Form field number control. */
+    protected get control(): KbqNumberInput;
+    connectTo(numberInput: KbqNumberInput): void;
     onStepUp($event: MouseEvent): void;
     onStepDown($event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqStepper, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqStepper, "kbq-stepper", never, {}, { "stepUp": "stepUp"; "stepDown": "stepDown"; }, never, never, false, never>;
 }
+export {};

package/input/_input-theme.scss

@@ -8,5 +8,11 @@
 
     .kbq-input.kbq-input-password {
         @include kbq-typography-level-to-styles-css-variables(typography, mono-normal);
+        // disable font-specific symbols replacements
+        font-variant-ligatures: none;
+        font-feature-settings:
+            'liga' 0,
+            'clig' 0,
+            'calt' 0;
     }
 }

package/input/input-number.d.ts

@@ -8,6 +8,7 @@ export declare const KBQ_INPUT_NUMBER_DEFAULT_CONFIGURATION: {
     groupSeparator: string[];
     fractionSeparator: string;
     startFormattingFrom: number;
+    viewGroupSeparator: string;
 };
 export declare const BIG_STEP = 10;
 export declare const SMALL_STEP = 1;

package/modal/modal.type.d.ts

@@ -19,7 +19,7 @@ export interface ModalOptions<C = any, R = any> {
     kbqTitle?: string | TemplateRef<{}>;
     kbqContent?: string | TemplateRef<{}> | Type<C>;
     kbqComponent?: Type<C>;
-    /** deprecated. Use field data and KBQ_MODAL_DATA */
+    /** @deprecated. Use field data and KBQ_MODAL_DATA */
     kbqComponentParams?: any;
     kbqClosable?: boolean;
     kbqMask?: boolean;

package/overflow-items/overflow-items.d.ts

@@ -1,4 +1,3 @@
-import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Manages the visibility of the element.
@@ -7,18 +6,14 @@ import * as i0 from "@angular/core";
  */
 export declare class ElementVisibilityManager {
     private readonly renderer;
-    /**
-     * Reference to the element.
-     *
-     * @docs-private
-     */
-    readonly elementRef: ElementRef<any>;
+    private readonly elementRef;
+    private readonly hiddenState;
     /**
      * Whether the element is hidden.
      *
      * @docs-private
      */
-    readonly hidden: import("@angular/core").WritableSignal<boolean>;
+    readonly hidden: import("@angular/core").Signal<boolean>;
     /**
      * Hides the element.
      *
@@ -59,6 +54,10 @@ export declare class KbqOverflowItem extends ElementVisibilityManager {
      * @default false
      */
     readonly alwaysVisible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * @docs-private
+     */
+    hide(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItem, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItem, "[kbqOverflowItem]", ["kbqOverflowItem"], { "id": { "alias": "kbqOverflowItem"; "required": true; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; "alwaysVisible": { "alias": "alwaysVisible"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -68,14 +67,10 @@ export declare class KbqOverflowItem extends ElementVisibilityManager {
 export declare class KbqOverflowItems {
     /**
      * `KbqOverflowItem` directive references.
-     *
-     * @docs-private
      */
     private readonly items;
     /**
      * `KbqOverflowItemsResult` directive reference.
-     *
-     * @docs-private
      */
     private readonly result;
     /**
@@ -87,7 +82,7 @@ export declare class KbqOverflowItems {
     /**
      * Debounce time for recalculating items visibility.
      *
-     * @default 100
+     * @default 0
      */
     readonly debounceTime: import("@angular/core").InputSignalWithTransform<number, unknown>;
     /**
@@ -104,31 +99,27 @@ export declare class KbqOverflowItems {
     private readonly document;
     constructor();
     /**
-     * Returns a list of items sorted by their specified `order` value.
+     * Sort items by their `order` attribute.
      * If an item does not have an `order` defined, its index is used as a fallback.
-     * This ensures a stable order while allowing custom positioning.
      */
-    private getSortedItemsByOrder;
+    private sortItemsByOrder;
     /**
-     * Calculates the visibility of items, based on the container width and `reverseOverflowOrder` property.
+     * Excludes items that have the `alwaysVisible` attribute.
      */
-    private calculateItemsVisibility;
+    private excludeAlwaysVisibleItems;
     /**
-     * Returns the width of the element including margins.
+     * Manages the visibility of items based on the available space in the container and returns the hidden items.
+     * Direction of hiding is determined by the `reverseOverflowOrder` attribute.
      */
-    private getElementWidthWithMargins;
+    private getHiddenItems;
     /**
      * This method sets the necessary styles for the directive.
      */
     private setStyles;
     /**
-     * Determines if the given item is hidden.
-     */
-    private isHiddenItem;
-    /**
-     * Returns the window object.
+     * Determines if the given element has a scrollbar.
      */
-    private getWindow;
+    private readonly hasScrollbar;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItems, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItems, "[kbqOverflowItems]", ["kbqOverflowItems"], { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; }, { "changes": "changes"; }, ["items", "result"], never, true, never>;
 }

package/package.json

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

package/popover/popover.component.d.ts

@@ -14,7 +14,6 @@ export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewIn
     elementRef: ElementRef;
     cdkTrapFocus: CdkTrapFocus;
     private debounceTime;
-    private readonly destroyRef;
     isContentTopOverflow: boolean;
     isContentBottomOverflow: boolean;
     ngAfterViewInit(): void;
@@ -82,6 +81,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     backdropClass: string;
     arrow: boolean;
     offset: number | null;
+    /** Delay before closing in milliseconds. The default value for kbqTrigger=PopUpTriggers.Hover is 500 ms. */
+    leaveDelay: number;
     placementChange: EventEmitter<any>;
     visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
@@ -98,7 +99,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     closingActions(): import("rxjs").Observable<void | CdkScrollable | MouseEvent>;
     private hideIfNotInViewPort;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
     static ngAcceptInputType_arrow: unknown;
     static ngAcceptInputType_offset: unknown;
+    static ngAcceptInputType_leaveDelay: unknown;
 }