@koobiq/components 19.2.0 → 19.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "19.2.0",
+    "version": "19.4.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.2.0",
-        "@koobiq/angular-moment-adapter": "19.2.0",
-        "@koobiq/angular-luxon-adapter": "19.2.0",
+        "@koobiq/cdk": "19.4.0",
+        "@koobiq/angular-moment-adapter": "19.4.0",
+        "@koobiq/angular-luxon-adapter": "19.4.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/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.2.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^19.2.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^19.4.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^19.4.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/search-expandable/search-expandable.d.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterViewInit, ChangeDetectorRef, DestroyRef, EventEmitter, InjectionToken } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { AfterViewInit, ChangeDetectorRef, DestroyRef, EventEmitter, InjectionToken, OnDestroy } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { BehaviorSubject } from 'rxjs';
 import * as i0 from "@angular/core";
 /** default configuration of search-expandable */
@@ -12,7 +12,9 @@ export declare const KBQ_SEARCH_EXPANDABLE_DEFAULT_CONFIGURATION: {
 export declare const KBQ_SEARCH_EXPANDABLE_CONFIGURATION: InjectionToken<unknown>;
 export declare const defaultValue = "";
 export declare const defaultEmitValueTimeout = 200;
-export declare class KbqSearchExpandable implements ControlValueAccessor, AfterViewInit {
+export declare class KbqSearchExpandable implements ControlValueAccessor, AfterViewInit, OnDestroy {
+    /** @docs-private */
+    protected readonly ngControl: NgControl | null;
     /** @docs-private */
     protected readonly focusMonitor: FocusMonitor;
     /** @docs-private */
@@ -41,6 +43,12 @@ export declare class KbqSearchExpandable implements ControlValueAccessor, AfterV
     get placeholder(): string;
     set placeholder(value: string);
     private _placeholder;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
     /** Event emitted when the search has been toggled. */
     readonly isOpenedChange: EventEmitter<boolean>;
     /** localized data
@@ -49,6 +57,7 @@ export declare class KbqSearchExpandable implements ControlValueAccessor, AfterV
     private lastEmittedValue;
     constructor();
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     /** @docs-private */
     onChange: (value: string) => void;
     /** @docs-private */
@@ -59,12 +68,18 @@ export declare class KbqSearchExpandable implements ControlValueAccessor, AfterV
     registerOnTouched(fn: () => void): void;
     /** Implemented as part of ControlValueAccessor. */
     writeValue(value: string): void;
+    /** Implemented as part of ControlValueAccessor. */
+    setDisabledState(isDisabled: boolean): void;
     toggle(): void;
     private updateLocaleParams;
     private initDefaultParams;
     private emitValue;
+    private runFocusMonitor;
+    private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSearchExpandable, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSearchExpandable, "kbq-search-expandable", never, { "isOpened": { "alias": "isOpened"; "required": false; }; "isEmitValueByEnterEnabled": { "alias": "isEmitValueByEnterEnabled"; "required": false; }; "emitValueTimeout": { "alias": "emitValueTimeout"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, { "isOpenedChange": "isOpenedChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSearchExpandable, "kbq-search-expandable", never, { "isOpened": { "alias": "isOpened"; "required": false; }; "isEmitValueByEnterEnabled": { "alias": "isEmitValueByEnterEnabled"; "required": false; }; "emitValueTimeout": { "alias": "emitValueTimeout"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "isOpenedChange": "isOpenedChange"; }, never, never, true, never>;
     static ngAcceptInputType_isOpened: unknown;
     static ngAcceptInputType_emitValueTimeout: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
 }

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/sidepanel/_sidepanel-theme.scss

@@ -15,6 +15,16 @@
             box-shadow: var(--kbq-sidepanel-container-shadow);
         }
     }
+
+    // @TODO do proper animation (#DS-4539)
+    .kbq-overlay-dark-backdrop {
+        background: transparent;
+
+        &:not(:has(~ .kbq-overlay-dark-backdrop)) {
+            transition: unset;
+            background: var(--kbq-background-overlay) !important;
+        }
+    }
 }
 
 @mixin kbq-sidepanel-typography() {

package/sidepanel/sidepanel-animations.d.ts

@@ -3,11 +3,17 @@ import { KbqSidepanelPosition } from './sidepanel-config';
 export declare enum KbqSidepanelAnimationState {
     Void = "void",
     Visible = "visible",
-    Hidden = "hidden"
+    Hidden = "hidden",
+    Lower = "lower",
+    BottomPanel = "bottom-panel",
+    BecomingNormal = "becoming-normal"
 }
 export declare const kbqSidepanelTransformAnimation: Record<KbqSidepanelPosition, {
     in: string;
     out: string;
+    lower: string;
+    bottomPanel: string;
+    becomingNormal: string;
 }>;
 export declare const kbqSidepanelAnimations: {
     readonly sidepanelState: AnimationTriggerMetadata;

package/sidepanel/sidepanel-container.component.d.ts

@@ -6,33 +6,40 @@ import { KbqSidepanelAnimationState } from './sidepanel-animations';
 import { KbqSidepanelConfig } from './sidepanel-config';
 import * as i0 from "@angular/core";
 export declare const KBQ_SIDEPANEL_WITH_INDENT: InjectionToken<boolean>;
+/** @deprecated */
 export declare const KBQ_SIDEPANEL_WITH_SHADOW: InjectionToken<boolean>;
 export declare class KbqSidepanelContainerComponent extends BasePortalOutlet implements OnDestroy {
     private elementRef;
     private changeDetectorRef;
     sidepanelConfig: KbqSidepanelConfig;
     withIndent: boolean;
-    withShadow: boolean;
     /** ID for the container DOM element. */
     id: string;
     /** The portal outlet inside of this container into which the content will be loaded. */
     portalOutlet: CdkPortalOutlet;
     /** The state of the sidepanel animations. */
     animationState: KbqSidepanelAnimationState;
+    /** @docs-private */
     animationTransform: {
         transformIn: string;
         transformOut: string;
+        lower: string;
+        bottomPanel: string;
+        becomingNormal: string;
     };
     /** Emits whenever the state of the animation changes. */
     animationStateChanged: EventEmitter<AnimationEvent>;
+    /** @docs-private */
     get size(): string;
+    /** @docs-private */
     get trapFocusAutoCapture(): boolean;
+    /** @docs-private */
     get trapFocus(): boolean;
     /** @docs-private */
     protected readonly indentClickEmitter: Subject<MouseEvent>;
     /** Whether the component has been destroyed. */
     private destroyed;
-    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, sidepanelConfig: KbqSidepanelConfig, withIndent: boolean, withShadow: boolean);
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, sidepanelConfig: KbqSidepanelConfig, withIndent: boolean);
     ngOnDestroy(): void;
     /**
      * Gets an observable that emits when the indent has been clicked.
@@ -48,7 +55,10 @@ export declare class KbqSidepanelContainerComponent extends BasePortalOutlet imp
     enter(): void;
     /** Begin animation of the sidepanel exiting from view. */
     exit(): void;
+    /** @docs-private */
     onAnimation(event: AnimationEvent): void;
+    /** @docs-private */
+    setAnimationState(state: KbqSidepanelAnimationState): void;
     private setAnimation;
     private setPanelClass;
     private validatePortalAttached;

package/sidepanel/sidepanel-directives.d.ts

@@ -25,6 +25,8 @@ export declare class KbqSidepanelHeader {
     closeable: boolean;
     /** Enables text truncation. Default true */
     truncateText: boolean;
+    /** @docs-private */
+    protected sidepanelRef: KbqSidepanelRef<any, any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelHeader, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqSidepanelHeader, "kbq-sidepanel-header", never, { "closeable": { "alias": "closeable"; "required": false; }; "truncateText": { "alias": "truncateText"; "required": false; }; }, {}, never, ["*"], true, never>;
     static ngAcceptInputType_closeable: unknown;
@@ -34,6 +36,10 @@ export declare class KbqSidepanelHeader {
  * Scrollable content container of a sidepanel.
  */
 export declare class KbqSidepanelBody {
+    private readonly sidepanelRef;
+    private readonly elementRef;
+    /** @docs-private */
+    protected checkOverflow(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelBody, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelBody, "kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody", never, {}, {}, never, never, true, never>;
 }
@@ -41,6 +47,8 @@ export declare class KbqSidepanelBody {
  * Footer of a sidepanel.
  */
 export declare class KbqSidepanelFooter {
+    /** @docs-private */
+    protected sidepanelRef: KbqSidepanelRef<any, any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelFooter, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelFooter, "kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter", never, {}, {}, never, never, true, never>;
 }

package/sidepanel/sidepanel-ref.d.ts

@@ -7,16 +7,28 @@ export declare class KbqSidepanelRef<T = any, R = any> {
     readonly overlayRef: OverlayRef;
     readonly config: KbqSidepanelConfig;
     readonly id: string;
+    /**
+     * Vertical scroll overflow state of the sidepanel body.
+     * Updated on scroll and used for visual adjustments.
+     */
+    bodyOverflow: import("@angular/core").WritableSignal<{
+        top: boolean;
+        bottom: boolean;
+    }>;
     /** Instance of the component making up the content of the sidepanel. */
     instance: T;
     /** Subject for notifying the user that the sidepanel has been closed and dismissed. */
     private readonly afterClosed$;
+    /** Subject for notifying the user that the sidepanel starting closing. */
+    private readonly beforeClosed$;
     /** Subject for notifying the user that the sidepanel has opened and appeared. */
     private readonly afterOpened$;
     /** Result to be passed down to the `afterDismissed` stream. */
     private result;
     constructor(containerInstance: KbqSidepanelContainerComponent, overlayRef: OverlayRef, config: KbqSidepanelConfig);
     close(result?: R): void;
+    /** Gets an observable that is notified when the sidepanel is started closing. */
+    beforeClosed(): Observable<void>;
     /** Gets an observable that is notified when the sidepanel is finished closing. */
     afterClosed(): Observable<R | undefined>;
     /** Gets an observable that is notified when the sidepanel has opened and appeared. */

package/sidepanel/sidepanel-tokens.scss

@@ -8,16 +8,18 @@
     --kbq-sidepanel-size-close-button-margin-left: var(--kbq-size-s);
     --kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-xxl);
     --kbq-sidepanel-size-content-padding-bottom: var(--kbq-size-xxl);
+    --kbq-sidepanel-size-panel-viewport-margin: var(--kbq-size-s);
+    --kbq-sidepanel-size-panel-lower-offset: var(--kbq-size-l);
     // Added top padding to prevent the outline of the first focused field from being clipped
     --kbq-sidepanel-size-content-padding-top: 1px;
-    --kbq-sidepanel-size-footer-padding-top: var(--kbq-size-s);
-    --kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-3xl);
+    --kbq-sidepanel-size-footer-padding-top: var(--kbq-size-xl);
+    --kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-xl);
     --kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-xxl);
     --kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);
     /* THEME TOKENS */
     --kbq-sidepanel-overlay-background: var(--kbq-background-overlay);
     --kbq-sidepanel-container-background: var(--kbq-background-card);
-    --kbq-sidepanel-container-shadow: var(--kbq-shadow-overlay);
+    --kbq-sidepanel-container-shadow: var(--kbq-shadow-popup);
     --kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);
     --kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast);
 }

package/sidepanel/sidepanel.scss

@@ -1,20 +1,32 @@
+@use 'sass:map';
+
 @use '../core/styles/common';
 
 @use '../core/styles/common/tokens' as *;
 
 @use './sidepanel-theme' as *;
 
-.kbq-sidepanel-container_top,
-.kbq-sidepanel-container_bottom {
-    flex-direction: column;
-    height: 33%;
-    min-height: 400px;
-    width: 100%;
-    left: 0;
+$indent-offset: calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset));
+
+@mixin _sidepanel-container($selected-side) {
+    $sides: top, right, bottom, left;
+    $opposite-sides: (
+        'top': 'bottom',
+        'right': 'left',
+        'left': 'right',
+        'bottom': 'top'
+    );
+
+    .kbq-sidepanel-content {
+        @each $side in $sides {
+            @if (not (map.get($opposite-sides, $selected-side) == $side)) {
+                margin-#{$side}: var(--kbq-sidepanel-size-panel-viewport-margin);
+            }
+        }
+    }
 
-    .kbq-sidepanel-indent {
-        height: 16px;
-        width: 100%;
+    & {
+        transform-origin: center #{map.get($opposite-sides, $selected-side)};
     }
 }
 
@@ -51,10 +63,24 @@
         }
 
         .kbq-sidepanel-indent {
-            width: 16px;
+            width: var(--kbq-sidepanel-size-panel-lower-offset);
             height: 100%;
         }
     }
+
+    &.kbq-sidepanel-container_top,
+    &.kbq-sidepanel-container_bottom {
+        flex-direction: column;
+        height: 33%;
+        min-height: 400px;
+        width: calc(100% - 2 * var(--kbq-sidepanel-size-panel-viewport-margin));
+        left: 0;
+
+        .kbq-sidepanel-indent {
+            height: var(--kbq-sidepanel-size-panel-lower-offset);
+            width: 100%;
+        }
+    }
 }
 
 .kbq-sidepanel-container_right {
@@ -64,6 +90,8 @@
     .kbq-sidepanel-wrapper {
         flex-direction: row;
     }
+
+    @include _sidepanel-container(right);
 }
 
 .kbq-sidepanel-container_left {
@@ -73,6 +101,8 @@
     .kbq-sidepanel-wrapper {
         flex-direction: row-reverse;
     }
+
+    @include _sidepanel-container(left);
 }
 
 .kbq-sidepanel-container_top {
@@ -82,6 +112,8 @@
     .kbq-sidepanel-wrapper {
         flex-direction: column-reverse;
     }
+
+    @include _sidepanel-container(top);
 }
 
 .kbq-sidepanel-container_bottom {
@@ -91,6 +123,8 @@
     .kbq-sidepanel-wrapper {
         flex-direction: column;
     }
+
+    @include _sidepanel-container(bottom);
 }
 
 .kbq-sidepanel-wrapper {
@@ -98,11 +132,31 @@
     flex: 1;
     min-height: 0;
     width: 100%;
+    position: relative;
 }
 
 .kbq-sidepanel-indent {
     display: flex;
     flex: 0 0 auto;
+    cursor: pointer;
+
+    position: absolute;
+
+    .kbq-sidepanel-container_top & {
+        bottom: $indent-offset;
+    }
+
+    .kbq-sidepanel-container_right & {
+        left: $indent-offset;
+    }
+
+    .kbq-sidepanel-container_bottom & {
+        top: $indent-offset;
+    }
+
+    .kbq-sidepanel-container_left & {
+        right: $indent-offset;
+    }
 }
 
 .kbq-sidepanel-content {
@@ -112,6 +166,7 @@
     min-height: 0;
     min-width: 0;
     width: 100%;
+    border-radius: var(--kbq-size-border-radius);
 }
 
 .kbq-sidepanel-header {
@@ -121,6 +176,7 @@
 
     flex-flow: row nowrap;
     flex: 0 0 auto;
+    transition: box-shadow 100ms ease-in-out;
 
     padding: var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-right)
         var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-left);
@@ -136,6 +192,10 @@
             @include common.kbq-truncate-line();
         }
     }
+
+    &.kbq-sidepanel-header_bottom-overflown {
+        box-shadow: var(--kbq-shadow-overflow-normal-bottom);
+    }
 }
 
 .kbq-sidepanel-title {
@@ -149,13 +209,8 @@
     flex-direction: column;
     min-height: 0;
 
-    padding-top: var(--kbq-sidepanel-size-content-padding-top);
-
-    padding-right: var(--kbq-sidepanel-size-content-padding-horizontal);
-
-    padding-left: var(--kbq-sidepanel-size-content-padding-horizontal);
-
-    padding-bottom: var(--kbq-sidepanel-size-content-padding-bottom);
+    padding: var(--kbq-sidepanel-size-content-padding-top) var(--kbq-sidepanel-size-content-padding-horizontal)
+        var(--kbq-sidepanel-size-content-padding-bottom);
 }
 
 .kbq-sidepanel-footer {
@@ -165,6 +220,7 @@
 
     flex-flow: row nowrap;
     flex: 0 0 auto;
+    transition: box-shadow 100ms ease-in-out;
 
     padding: var(--kbq-sidepanel-size-footer-padding-top) var(--kbq-sidepanel-size-footer-padding-horizontal)
         var(--kbq-sidepanel-size-footer-padding-bottom);
@@ -185,6 +241,10 @@
 
         gap: var(--kbq-sidepanel-size-footer-content-gap-horizontal);
     }
+
+    &.kbq-sidepanel-footer_top-overflown {
+        box-shadow: var(--kbq-shadow-overflow-normal-top);
+    }
 }
 
 @include kbq-sidepanel-theme();

package/sidepanel/sidepanel.service.d.ts

@@ -47,11 +47,13 @@ export declare class KbqSidepanelService implements OnDestroy {
     private closeSidepanels;
     private getBackdropClass;
     private getOpenedSidepanelsWithSamePosition;
+    private updateAnimationState;
     /**
      * Removes a sidepanel from the array of open sidepanels.
      * @param sidepanelRef Sidepanel to be removed.
      */
     private removeOpenSidepanel;
+    private getLowerSidepanelsWithSamePosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelService, [null, null, { optional: true; }, { optional: true; skipSelf: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqSidepanelService>;
 }

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/tags/tag-list.component.d.ts

@@ -154,6 +154,11 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     selectable: boolean;
     /** Whether the tags in the list are editable. */
     editable: boolean;
+    /**
+     * Whether to emit change events when tags are added/removed.
+     * Set to `false` to prevent the form control from being marked as dirty during programmatic updates.
+     */
+    emitOnTagChanges: boolean;
     /** Whether the tags in the list are removable. */
     get removable(): boolean;
     set removable(value: boolean);
@@ -352,11 +357,12 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     private syncDropListDisabledState;
     private setupFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagList, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTagList, "kbq-tag-list", ["kbqTagList"], { "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "dropped": "dropped"; "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], true, [{ directive: typeof i1.CdkDropList; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTagList, "kbq-tag-list", ["kbqTagList"], { "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "emitOnTagChanges": { "alias": "emitOnTagChanges"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "dropped": "dropped"; "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], true, [{ directive: typeof i1.CdkDropList; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_draggable: unknown;
     static ngAcceptInputType_selectable: unknown;
     static ngAcceptInputType_editable: unknown;
+    static ngAcceptInputType_emitOnTagChanges: unknown;
     static ngAcceptInputType_removable: unknown;
 }

package/tags/tag.component.d.ts

@@ -72,6 +72,8 @@ export declare class KbqTagEditSubmit {
 export declare class KbqTagEditInput {
     private readonly tag;
     /** @docs-private */
+    protected handleClick(event: MouseEvent): void;
+    /** @docs-private */
     protected handleKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagEditInput, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagEditInput, "[kbqTagEditInput]", ["kbqTagEditInput"], {}, {}, never, never, true, [{ directive: typeof i1.KbqFieldSizingContent; inputs: {}; outputs: {}; }]>;

package/tooltip/tooltip.component.d.ts

@@ -108,6 +108,10 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     static ngAcceptInputType_arrow: unknown;
     static ngAcceptInputType_offset: unknown;
 }
+/**
+ * @docs-private
+ * @deprecated Will be removed in next major release
+ */
 export declare class KbqWarningTooltipTrigger extends KbqTooltipTrigger {
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
@@ -115,6 +119,10 @@ export declare class KbqWarningTooltipTrigger extends KbqTooltipTrigger {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqWarningTooltipTrigger, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqWarningTooltipTrigger, "[kbqWarningTooltip]", ["kbqWarningTooltip"], { "content": { "alias": "kbqWarningTooltip"; "required": false; }; }, {}, never, never, true, never>;
 }
+/**
+ * @docs-private
+ * @deprecated Will be removed in next major release
+ */
 export declare class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);

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;