@koobiq/components 20.1.0 → 20.3.0

package/fesm2022/koobiq-components-sidebar.mjs

@@ -3,7 +3,7 @@ import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, Directive, inject, NgZone, ElementRef, Renderer2, ChangeDetectorRef, output, contentChild, afterNextRender, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { isControl, isInput, isLeftBracket, isRightBracket } from '@koobiq/components/core';
-import { trigger, state, transition, style, animate } from '@angular/animations';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 
 var KbqSidebarAnimationState;
 (function (KbqSidebarAnimationState) {
@@ -38,10 +38,10 @@ class KbqSidebarOpened {
         this.width = input(undefined, ...(ngDevMode ? [{ debugName: "width" }] : []));
         this.maxWidth = input(undefined, ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidebarOpened, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqSidebarOpened, isStandalone: true, selector: "[kbq-sidebar-opened]", inputs: { minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-sidebar-opened" }, exportAs: ["kbqSidebarOpened"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidebarOpened, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqSidebarOpened, isStandalone: true, selector: "[kbq-sidebar-opened]", inputs: { minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-sidebar-opened" }, exportAs: ["kbqSidebarOpened"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidebarOpened, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidebarOpened, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-sidebar-opened]',
@@ -55,10 +55,10 @@ class KbqSidebarClosed {
     constructor() {
         this.width = input(undefined, ...(ngDevMode ? [{ debugName: "width" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidebarClosed, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqSidebarClosed, isStandalone: true, selector: "[kbq-sidebar-closed]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-sidebar-closed" }, exportAs: ["kbqSidebarClosed"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidebarClosed, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqSidebarClosed, isStandalone: true, selector: "[kbq-sidebar-closed]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-sidebar-closed" }, exportAs: ["kbqSidebarClosed"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidebarClosed, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidebarClosed, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-sidebar-closed]',
@@ -180,10 +180,10 @@ class KbqSidebar {
             return;
         this.params.openedStateWidth = `${this.elementRef.nativeElement.offsetWidth}px`;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqSidebar, isStandalone: true, selector: "kbq-sidebar", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChanged: "stateChanged" }, host: { listeners: { "@state.start": "onAnimationStart()", "@state.done": "onAnimationDone()" }, properties: { "@state": "{\n            value: animationState,\n            params: params\n        }" }, classAttribute: "kbq-sidebar" }, queries: [{ propertyName: "openedContent", first: true, predicate: KbqSidebarOpened, descendants: true, isSignal: true }, { propertyName: "closedContent", first: true, predicate: KbqSidebarClosed, descendants: true, isSignal: true }], exportAs: ["kbqSidebar"], ngImport: i0, template: "@if (internalState) {\n    <ng-content select=\"[kbq-sidebar-opened]\" />\n} @else {\n    <ng-content select=\"[kbq-sidebar-closed]\" />\n}\n", styles: [".kbq-sidebar{display:inline-block;height:100%;overflow:hidden}.kbq-sidebar-opened,.kbq-sidebar-closed{height:100%}\n"], animations: [kbqSidebarAnimations.sidebarState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqSidebar, isStandalone: true, selector: "kbq-sidebar", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChanged: "stateChanged" }, host: { listeners: { "@state.start": "onAnimationStart()", "@state.done": "onAnimationDone()" }, properties: { "@state": "{\n            value: animationState,\n            params: params\n        }" }, classAttribute: "kbq-sidebar" }, queries: [{ propertyName: "openedContent", first: true, predicate: KbqSidebarOpened, descendants: true, isSignal: true }, { propertyName: "closedContent", first: true, predicate: KbqSidebarClosed, descendants: true, isSignal: true }], exportAs: ["kbqSidebar"], ngImport: i0, template: "@if (internalState) {\n    <ng-content select=\"[kbq-sidebar-opened]\" />\n} @else {\n    <ng-content select=\"[kbq-sidebar-closed]\" />\n}\n", styles: [".kbq-sidebar{display:inline-block;height:100%;overflow:hidden}.kbq-sidebar-opened,.kbq-sidebar-closed{height:100%}\n"], animations: [kbqSidebarAnimations.sidebarState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidebar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidebar, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-sidebar',
@@ -199,13 +199,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], stateChanged: [{ type: i0.Output, args: ["stateChanged"] }], openedContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSidebarOpened), { isSignal: true }] }], closedContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSidebarClosed), { isSignal: true }] }] } });
 
 class KbqSidebarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqSidebarModule, imports: [KbqSidebarClosed, KbqSidebarOpened, KbqSidebar], exports: [KbqSidebarClosed,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqSidebarModule, imports: [KbqSidebarClosed, KbqSidebarOpened, KbqSidebar], exports: [KbqSidebarClosed,
             KbqSidebarOpened,
             KbqSidebar] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidebarModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidebarModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidebarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidebarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [KbqSidebarClosed, KbqSidebarOpened, KbqSidebar],

package/fesm2022/koobiq-components-sidepanel.mjs

@@ -3,7 +3,7 @@ import { InjectionToken, inject, ElementRef, ChangeDetectorRef, viewChild, Event
 import { CdkTrapFocus, A11yModule, ConfigurableFocusTrapFactory, FocusTrapFactory } from '@angular/cdk/a11y';
 import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { Subject, merge } from 'rxjs';
-import { trigger, state, transition, style, animate } from '@angular/animations';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i3 from '@koobiq/components/core';
 import { KbqAnimationDurations, KbqAnimationCurves, ESCAPE, isHtmlElement, KbqOverflowShadowContainer } from '@koobiq/components/core';
 import * as i1 from '@koobiq/components/button';
@@ -202,10 +202,10 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
             throw Error('Attempting to attach sidepanel content after content is already attached');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqSidepanelContainerComponent, isStandalone: true, selector: "kbq-sidepanel-container", host: { listeners: { "@state.start": "onAnimation($event)", "@state.done": "onAnimation($event)" }, properties: { "class": "size", "class.kbq-sidepanel_nested": "withIndent", "attr.id": "id", "attr.tabindex": "-1", "@state": "{\n            value: animationState,\n            params: animationTransform\n        }" }, classAttribute: "kbq-sidepanel-container kbq-sidepanel-container_shadowed" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-sidepanel-wrapper\">\n    @if (withIndent) {\n        <div class=\"kbq-sidepanel-indent\" (click)=\"indentClickEmitter.next($event)\"></div>\n    }\n\n    <div class=\"kbq-sidepanel-content\" [cdkTrapFocus]=\"trapFocus\" [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture\">\n        <ng-template cdkPortalOutlet />\n    </div>\n</div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-sidepanel-container{outline:none;display:flex;flex:1;position:fixed;min-height:0}.kbq-sidepanel-container .flex{min-height:0}.kbq-sidepanel-container.kbq-sidepanel-container_left,.kbq-sidepanel-container.kbq-sidepanel-container_right{height:100%;top:0;max-width:100%}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_small,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_small{width:var(--kbq-sidepanel-size-small-width);max-width:var(--kbq-sidepanel-size-small-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_medium,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_medium{width:var(--kbq-sidepanel-size-medium-width);max-width:var(--kbq-sidepanel-size-medium-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_large,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_large{width:var(--kbq-sidepanel-size-large-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:var(--kbq-sidepanel-size-panel-lower-offset);height:100%}.kbq-sidepanel-container.kbq-sidepanel-container_top,.kbq-sidepanel-container.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-container.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:var(--kbq-sidepanel-size-panel-lower-offset);width:100%}.kbq-sidepanel-container_right{right:0;transform:translate(100%)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_right .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_right{transform-origin:center left}.kbq-sidepanel-container_left{left:0;transform:translate(-100%)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_left .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_left{transform-origin:center right}.kbq-sidepanel-container_top{top:0;transform:translateY(-100%)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_top .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_top{transform-origin:center bottom}.kbq-sidepanel-container_bottom{bottom:0;transform:translateY(100%)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-container_bottom .kbq-sidepanel-content{margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_bottom{transform-origin:center top}.kbq-sidepanel-wrapper{display:flex;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 .kbq-sidepanel-indent{bottom:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_right .kbq-sidepanel-indent{left:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{top:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_left .kbq-sidepanel-indent{right:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;border-radius:var(--kbq-size-border-radius)}.kbq-sidepanel-header{display:flex;align-items:baseline;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s 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)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left)}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text{align-items:center}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text .kbq-sidepanel-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-title{flex:1}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;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{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s 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)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}.kbq-sidepanel-footer .kbq-sidepanel-actions{gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal)}.kbq-sidepanel-title{color:var(--kbq-sidepanel-header-text-color)}.kbq-sidepanel-content{background-color:var(--kbq-sidepanel-container-background);color:var(--kbq-sidepanel-content-text-color)}.kbq-sidepanel-container_shadowed .kbq-sidepanel-content{box-shadow:var(--kbq-sidepanel-container-shadow)}.kbq-overlay-dark-backdrop{background:var(--kbq-background-overlay)!important}.kbq-sidepanel-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-sidepanel-container,.kbq-sidepanel-footer{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-sidepanel-container{--kbq-sidepanel-size-small-width: 400px;--kbq-sidepanel-size-medium-width: 640px;--kbq-sidepanel-size-large-width: 960px;--kbq-sidepanel-size-header-padding-vertical: var(--kbq-size-l);--kbq-sidepanel-size-header-padding-left: var(--kbq-size-xxl);--kbq-sidepanel-size-header-padding-right: var(--kbq-size-l);--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);--kbq-sidepanel-size-content-padding-top: 1px;--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);--kbq-sidepanel-overlay-background: var(--kbq-background-overlay);--kbq-sidepanel-container-background: var(--kbq-background-card);--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)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [kbqSidepanelAnimations.sidepanelState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqSidepanelContainerComponent, isStandalone: true, selector: "kbq-sidepanel-container", host: { listeners: { "@state.start": "onAnimation($event)", "@state.done": "onAnimation($event)" }, properties: { "class": "size", "class.kbq-sidepanel_nested": "withIndent", "attr.id": "id", "attr.tabindex": "-1", "@state": "{\n            value: animationState,\n            params: animationTransform\n        }" }, classAttribute: "kbq-sidepanel-container kbq-sidepanel-container_shadowed" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-sidepanel-wrapper\">\n    @if (withIndent) {\n        <div class=\"kbq-sidepanel-indent\" (click)=\"indentClickEmitter.next($event)\"></div>\n    }\n\n    <div class=\"kbq-sidepanel-content\" [cdkTrapFocus]=\"trapFocus\" [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture\">\n        <ng-template cdkPortalOutlet />\n    </div>\n</div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-sidepanel-container{outline:none;display:flex;flex:1;position:fixed;min-height:0}.kbq-sidepanel-container .flex{min-height:0}.kbq-sidepanel-container.kbq-sidepanel-container_left,.kbq-sidepanel-container.kbq-sidepanel-container_right{height:100%;top:0;max-width:100%}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_small,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_small{width:var(--kbq-sidepanel-size-small-width);max-width:var(--kbq-sidepanel-size-small-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_medium,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_medium{width:var(--kbq-sidepanel-size-medium-width);max-width:var(--kbq-sidepanel-size-medium-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_large,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_large{width:var(--kbq-sidepanel-size-large-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:var(--kbq-sidepanel-size-panel-lower-offset);height:100%}.kbq-sidepanel-container.kbq-sidepanel-container_top,.kbq-sidepanel-container.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-container.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:var(--kbq-sidepanel-size-panel-lower-offset);width:100%}.kbq-sidepanel-container_right{right:0;transform:translate(100%)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_right .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_right{transform-origin:center left}.kbq-sidepanel-container_left{left:0;transform:translate(-100%)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_left .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_left{transform-origin:center right}.kbq-sidepanel-container_top{top:0;transform:translateY(-100%)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_top .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_top{transform-origin:center bottom}.kbq-sidepanel-container_bottom{bottom:0;transform:translateY(100%)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-container_bottom .kbq-sidepanel-content{margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_bottom{transform-origin:center top}.kbq-sidepanel-wrapper{display:flex;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 .kbq-sidepanel-indent{bottom:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_right .kbq-sidepanel-indent{left:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{top:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_left .kbq-sidepanel-indent{right:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;border-radius:var(--kbq-size-border-radius)}.kbq-sidepanel-header{display:flex;align-items:baseline;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s 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)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left)}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text{align-items:center}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text .kbq-sidepanel-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-title{flex:1}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;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{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s 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)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}.kbq-sidepanel-footer .kbq-sidepanel-actions{gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal)}.kbq-sidepanel-title{color:var(--kbq-sidepanel-header-text-color)}.kbq-sidepanel-content{background-color:var(--kbq-sidepanel-container-background);color:var(--kbq-sidepanel-content-text-color)}.kbq-sidepanel-container_shadowed .kbq-sidepanel-content{box-shadow:var(--kbq-sidepanel-container-shadow)}.kbq-overlay-dark-backdrop{background:var(--kbq-background-overlay)!important}.kbq-sidepanel-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-sidepanel-container,.kbq-sidepanel-footer{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-sidepanel-container{--kbq-sidepanel-size-small-width: 400px;--kbq-sidepanel-size-medium-width: 640px;--kbq-sidepanel-size-large-width: 960px;--kbq-sidepanel-size-header-padding-vertical: var(--kbq-size-l);--kbq-sidepanel-size-header-padding-left: var(--kbq-size-xxl);--kbq-sidepanel-size-header-padding-right: var(--kbq-size-l);--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);--kbq-sidepanel-size-content-padding-top: 1px;--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);--kbq-sidepanel-overlay-background: var(--kbq-background-overlay);--kbq-sidepanel-container-background: var(--kbq-background-card);--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)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [kbqSidepanelAnimations.sidepanelState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-sidepanel-container', imports: [
                         CdkPortalOutlet,
@@ -469,10 +469,10 @@ class KbqSidepanelService {
             openedSidepanelsWithSamePosition[openedSidepanelsWithSamePosition.length - 3]
         ];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelService, decorators: [{
             type: Injectable
         }] });
 
@@ -505,10 +505,10 @@ class KbqSidepanelClose {
             this.sidepanelResult = proxiedChange.currentValue;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqSidepanelClose, isStandalone: true, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: { sidepanelResult: { classPropertyName: "sidepanelResult", publicName: "kbq-sidepanel-close", isSignal: false, isRequired: false, transformFunction: null }, kbqSidepanelClose: { classPropertyName: "kbqSidepanelClose", publicName: "kbqSidepanelClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "sidepanelRef.close(sidepanelResult)" }, classAttribute: "kbq-sidepanel-close" }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqSidepanelClose, isStandalone: true, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: { sidepanelResult: { classPropertyName: "sidepanelResult", publicName: "kbq-sidepanel-close", isSignal: false, isRequired: false, transformFunction: null }, kbqSidepanelClose: { classPropertyName: "kbqSidepanelClose", publicName: "kbqSidepanelClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "sidepanelRef.close(sidepanelResult)" }, classAttribute: "kbq-sidepanel-close" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelClose, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelClose, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[kbq-sidepanel-close], button[kbqSidepanelClose]',
@@ -533,8 +533,8 @@ class KbqSidepanelHeader {
         /** @docs-private */
         this.sidepanelRef = inject(KbqSidepanelRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqSidepanelHeader, isStandalone: true, selector: "kbq-sidepanel-header", inputs: { closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, truncateText: { classPropertyName: "truncateText", publicName: "truncateText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-sidepanel-header_truncate-text": "truncateText()", "style.box-shadow": "sidepanelRef.bodyOverflow().top ? \"var(--kbq-shadow-overflow-normal-bottom)\" : null" }, classAttribute: "kbq-sidepanel-header" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqSidepanelHeader, isStandalone: true, selector: "kbq-sidepanel-header", inputs: { closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, truncateText: { classPropertyName: "truncateText", publicName: "truncateText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-sidepanel-header_truncate-text": "truncateText()", "style.box-shadow": "sidepanelRef.bodyOverflow().top ? \"var(--kbq-shadow-overflow-normal-bottom)\" : null" }, classAttribute: "kbq-sidepanel-header" }, ngImport: i0, template: `
         <div class="kbq-sidepanel-title" kbq-title>
             <ng-content />
         </div>
@@ -546,7 +546,7 @@ class KbqSidepanelHeader {
         }
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqSidepanelClose, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: ["kbq-sidepanel-close", "kbqSidepanelClose"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-sidepanel-header',
@@ -583,10 +583,10 @@ class KbqSidepanelBody {
         this.overflowContainer = inject(KbqOverflowShadowContainer);
         effect(() => this.sidepanelRef.bodyOverflow.set(this.overflowContainer.overflow()));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSidepanelBody, isStandalone: true, selector: "kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody", host: { classAttribute: "kbq-sidepanel-body kbq-scrollbar" }, hostDirectives: [{ directive: i3.KbqOverflowShadowContainer }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqSidepanelBody, isStandalone: true, selector: "kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody", host: { classAttribute: "kbq-sidepanel-body kbq-scrollbar" }, hostDirectives: [{ directive: i3.KbqOverflowShadowContainer }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelBody, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody',
@@ -604,10 +604,10 @@ class KbqSidepanelFooter {
         /** @docs-private */
         this.sidepanelRef = inject(KbqSidepanelRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSidepanelFooter, isStandalone: true, selector: "kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter", host: { properties: { "style.box-shadow": "sidepanelRef.bodyOverflow().bottom ? \"var(--kbq-shadow-overflow-normal-top)\" : null" }, classAttribute: "kbq-sidepanel-footer" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqSidepanelFooter, isStandalone: true, selector: "kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter", host: { properties: { "style.box-shadow": "sidepanelRef.bodyOverflow().bottom ? \"var(--kbq-shadow-overflow-normal-top)\" : null" }, classAttribute: "kbq-sidepanel-footer" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter',
@@ -621,10 +621,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Actions block of a sidepanel footer.
  */
 class KbqSidepanelActions {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSidepanelActions, isStandalone: true, selector: "kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions", host: { classAttribute: "kbq-sidepanel-actions" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqSidepanelActions, isStandalone: true, selector: "kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions", host: { classAttribute: "kbq-sidepanel-actions" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelActions, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions',
@@ -647,8 +647,8 @@ function getClosestSidepanel(element, openSidepanels) {
 }
 
 class KbqSidepanelModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelModule, imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelModule, imports: [OverlayModule,
             PortalModule,
             KbqButtonModule,
             KbqIconModule,
@@ -665,7 +665,7 @@ class KbqSidepanelModule {
             KbqSidepanelBody,
             KbqSidepanelFooter,
             KbqSidepanelActions] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelModule, providers: [
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelModule, providers: [
             KbqSidepanelService,
             { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
         ], imports: [OverlayModule,
@@ -676,7 +676,7 @@ class KbqSidepanelModule {
             A11yModule,
             KbqSidepanelHeader] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSidepanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/koobiq-components-skeleton.mjs

@@ -11,10 +11,10 @@ let count = 0;
  * Component used to load the `.kbq-skeleton` styles.
  */
 class SkeletonStyleLoader {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SkeletonStyleLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SkeletonStyleLoader, isStandalone: true, selector: "skeleton-style-loader", ngImport: i0, template: '', isInline: true, styles: ["@keyframes wave{0%{transform:translate(calc(var(--kbq-skeleton-wave-width) * -1))}to{transform:translate(100vw)}}.kbq-skeleton:not(.kbq-skeleton_disabled){--kbq-skeleton-min-height: var(--kbq-size-l);--kbq-skeleton-animation-duration: 1.2s;--kbq-skeleton-animation-delay: 0ms;--kbq-skeleton-border-radius: var(--kbq-size-xxs);--kbq-skeleton-wave-width: 100px;--kbq-skeleton-z-index: 1}.kbq-skeleton:not(.kbq-skeleton_disabled):is(kbq-skeleton){display:flex;min-height:var(--kbq-skeleton-min-height);border-radius:var(--kbq-skeleton-border-radius)}.kbq-skeleton:not(.kbq-skeleton_disabled){position:relative;overflow:hidden;clip-path:inset(0);-webkit-user-select:none;user-select:none;pointer-events:none;border-color:transparent;outline-color:transparent}.kbq-skeleton:not(.kbq-skeleton_disabled):before{content:\"\";position:absolute;inset:0;background-color:var(--kbq-skeleton-background);z-index:var(--kbq-skeleton-z-index)}.kbq-skeleton:not(.kbq-skeleton_disabled):after{content:\"\";position:fixed;inset-block:0;left:calc(var(--kbq-skeleton-wave-width) * -1);width:var(--kbq-skeleton-wave-width);z-index:var(--kbq-skeleton-z-index);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 var(--kbq-skeleton-animation-delay) infinite}@media(prefers-reduced-motion:reduce){.kbq-skeleton:not(.kbq-skeleton_disabled):after{animation:none}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: SkeletonStyleLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: SkeletonStyleLoader, isStandalone: true, selector: "skeleton-style-loader", ngImport: i0, template: '', isInline: true, styles: ["@keyframes wave{0%{transform:translate(calc(var(--kbq-skeleton-wave-width) * -1))}to{transform:translate(100vw)}}.kbq-skeleton:not(.kbq-skeleton_disabled){--kbq-skeleton-min-height: var(--kbq-size-l);--kbq-skeleton-animation-duration: 1.2s;--kbq-skeleton-animation-delay: 0ms;--kbq-skeleton-border-radius: var(--kbq-size-xxs);--kbq-skeleton-wave-width: 100px;--kbq-skeleton-z-index: 1}.kbq-skeleton:not(.kbq-skeleton_disabled):is(kbq-skeleton){display:flex;min-height:var(--kbq-skeleton-min-height);border-radius:var(--kbq-skeleton-border-radius)}.kbq-skeleton:not(.kbq-skeleton_disabled){position:relative;overflow:hidden;clip-path:inset(0);-webkit-user-select:none;user-select:none;pointer-events:none;border-color:transparent;outline-color:transparent}.kbq-skeleton:not(.kbq-skeleton_disabled):before{content:\"\";position:absolute;inset:0;background-color:var(--kbq-skeleton-background);z-index:var(--kbq-skeleton-z-index)}.kbq-skeleton:not(.kbq-skeleton_disabled):after{content:\"\";position:fixed;inset-block:0;left:calc(var(--kbq-skeleton-wave-width) * -1);width:var(--kbq-skeleton-wave-width);z-index:var(--kbq-skeleton-z-index);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 var(--kbq-skeleton-animation-delay) infinite}@media(prefers-reduced-motion:reduce){.kbq-skeleton:not(.kbq-skeleton_disabled):after{animation:none}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SkeletonStyleLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: SkeletonStyleLoader, decorators: [{
             type: Component,
             args: [{ selector: 'skeleton-style-loader', template: '', encapsulation: ViewEncapsulation.None, styles: ["@keyframes wave{0%{transform:translate(calc(var(--kbq-skeleton-wave-width) * -1))}to{transform:translate(100vw)}}.kbq-skeleton:not(.kbq-skeleton_disabled){--kbq-skeleton-min-height: var(--kbq-size-l);--kbq-skeleton-animation-duration: 1.2s;--kbq-skeleton-animation-delay: 0ms;--kbq-skeleton-border-radius: var(--kbq-size-xxs);--kbq-skeleton-wave-width: 100px;--kbq-skeleton-z-index: 1}.kbq-skeleton:not(.kbq-skeleton_disabled):is(kbq-skeleton){display:flex;min-height:var(--kbq-skeleton-min-height);border-radius:var(--kbq-skeleton-border-radius)}.kbq-skeleton:not(.kbq-skeleton_disabled){position:relative;overflow:hidden;clip-path:inset(0);-webkit-user-select:none;user-select:none;pointer-events:none;border-color:transparent;outline-color:transparent}.kbq-skeleton:not(.kbq-skeleton_disabled):before{content:\"\";position:absolute;inset:0;background-color:var(--kbq-skeleton-background);z-index:var(--kbq-skeleton-z-index)}.kbq-skeleton:not(.kbq-skeleton_disabled):after{content:\"\";position:fixed;inset-block:0;left:calc(var(--kbq-skeleton-wave-width) * -1);width:var(--kbq-skeleton-wave-width);z-index:var(--kbq-skeleton-z-index);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 var(--kbq-skeleton-animation-delay) infinite}@media(prefers-reduced-motion:reduce){.kbq-skeleton:not(.kbq-skeleton_disabled):after{animation:none}}\n"] }]
         }] });
@@ -49,10 +49,10 @@ class KbqSkeleton {
         const delay = -(elapsed % durationMs);
         this.element.style.setProperty('--kbq-skeleton-animation-delay', `${delay}ms`);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqSkeleton, isStandalone: true, selector: "kbq-skeleton, [kbqSkeleton]", inputs: { enabled: { classPropertyName: "enabled", publicName: "kbqSkeleton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-skeleton_disabled": "!enabled()" }, classAttribute: "kbq-skeleton" }, exportAs: ["kbqSkeleton"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqSkeleton, isStandalone: true, selector: "kbq-skeleton, [kbqSkeleton]", inputs: { enabled: { classPropertyName: "enabled", publicName: "kbqSkeleton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-skeleton_disabled": "!enabled()" }, classAttribute: "kbq-skeleton" }, exportAs: ["kbqSkeleton"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSkeleton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSkeleton, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-skeleton, [kbqSkeleton]',
@@ -66,11 +66,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 const COMPONENTS = [KbqSkeleton];
 class KbqSkeletonModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqSkeletonModule, imports: [KbqSkeleton], exports: [KbqSkeleton] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSkeletonModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqSkeletonModule, imports: [KbqSkeleton], exports: [KbqSkeleton] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSkeletonModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSkeletonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSkeletonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,

package/fesm2022/koobiq-components-split-button.mjs

@@ -57,16 +57,9 @@ class KbqSplitButton extends KbqColorDirective {
             if (!dropdownTrigger)
                 return;
             dropdownTrigger.dropdown.xPosition = 'before';
-            if (this.panelAutoWidth()) {
-                // we need to use a timeout of about 50ms to wait for the styles to apply
-                setTimeout(() => {
-                    const { width } = this.nativeElement.getClientRects()[0];
-                    const dropdownTrigger = this.dropdownTrigger();
-                    if (dropdownTrigger) {
-                        dropdownTrigger.dropdown.triggerWidth = `${Math.round(width)}px`;
-                    }
-                }, 50);
-            }
+            // The trigger is only the chevron button, so the whole control has to be named explicitly.
+            // It is measured lazily on open, which is why no wait for styles to apply is needed here.
+            dropdownTrigger.widthOrigin = this.panelAutoWidth() ? this.nativeElement : undefined;
         };
         this.color = KbqComponentColors.ContrastFade;
     }
@@ -107,14 +100,14 @@ class KbqSplitButton extends KbqColorDirective {
             return;
         this.buttons?.forEach((button) => (button.disabled = state));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqSplitButton, isStandalone: true, selector: "kbq-split-button, [kbq-split-button]", inputs: { panelAutoWidth: { classPropertyName: "panelAutoWidth", publicName: "panelAutoWidth", isSignal: true, isRequired: false, transformFunction: null }, kbqStyle: { classPropertyName: "kbqStyle", publicName: "kbqStyle", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, host: { properties: { "class": "kbqStyle", "class.kbq-split-button_styles-for-nested": "buttons.length > 1", "class.kbq-split-button_first-disabled": "firstDisabled", "class.kbq-split-button_second-disabled": "secondDisabled" }, classAttribute: "kbq-split-button" }, queries: [{ propertyName: "dropdownTrigger", first: true, predicate: KbqDropdownTrigger, descendants: true, isSignal: true }, { propertyName: "buttons", predicate: KbqButton }], usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqSplitButton, isStandalone: true, selector: "kbq-split-button, [kbq-split-button]", inputs: { panelAutoWidth: { classPropertyName: "panelAutoWidth", publicName: "panelAutoWidth", isSignal: true, isRequired: false, transformFunction: null }, kbqStyle: { classPropertyName: "kbqStyle", publicName: "kbqStyle", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, host: { properties: { "class": "kbqStyle", "class.kbq-split-button_styles-for-nested": "buttons.length > 1", "class.kbq-split-button_first-disabled": "firstDisabled", "class.kbq-split-button_second-disabled": "secondDisabled" }, classAttribute: "kbq-split-button" }, queries: [{ propertyName: "dropdownTrigger", first: true, predicate: KbqDropdownTrigger, descendants: true, isSignal: true }, { propertyName: "buttons", predicate: KbqButton }], usesInheritance: true, ngImport: i0, template: `
         <ng-content select="[kbq-button]" />
 
         <ng-content select="[kbq-button]" />
     `, isInline: true, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-split-button{display:flex;flex-direction:row;min-width:0;border-radius:var(--kbq-size-border-radius)}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_first.kbq-button{padding-right:10px}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_first{min-width:0;border-right:none;border-top-right-radius:unset;border-bottom-right-radius:unset}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_first .kbq-button-wrapper{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_second{border-left:none;border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_second:before{display:block;content:\"\";position:absolute;left:0;top:calc(var(--kbq-size-s) - var(--kbq-button-size-border-width));width:1px;height:var(--kbq-size-l)}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_first:not(.kbq-disabled):is(:hover,.kbq-hover,.cdk-keyboard-focused,.kbq-active)+.kbq-split-button_second:before{display:none}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_second:not(.kbq-disabled):is(:hover,.kbq-hover,.cdk-keyboard-focused,.kbq-active):before{display:none}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-button-icon+.kbq-button-icon{padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-size-xxs)}.kbq-split-button:hover:has(.kbq-button_transparent){background:var(--kbq-states-background-transparent-hover)}.kbq-split-button .kbq-split-button_item.kbq-contrast.kbq-button_filled:before{background:var(--kbq-line-on-contrast-fade, var(--kbq-foreground-on-contrast))}.kbq-split-button .kbq-split-button_item.kbq-contrast.kbq-button_transparent:before,.kbq-split-button .kbq-split-button_item.kbq-contrast-fade.kbq-button_outline:before,.kbq-split-button .kbq-split-button_item.kbq-contrast-fade.kbq-button_filled:before{background:var(--kbq-line-contrast-fade)}.kbq-split-button .kbq-split-button_item.kbq-theme-fade.kbq-button_outline:before,.kbq-split-button .kbq-split-button_item.kbq-theme.kbq-button_transparent:before{background:var(--kbq-line-theme-fade)}.kbq-split-button .kbq-split-button_item.kbq-split-button_first.cdk-keyboard-focused{z-index:1;box-shadow:inset -1px 0 0 0 var(--kbq-states-line-focus-theme)}.kbq-split-button .kbq-split-button_item.kbq-split-button_second.cdk-keyboard-focused{box-shadow:inset 1px 0 0 0 var(--kbq-states-line-focus-theme)}.kbq-split-button .kbq-button_outline:has(+.kbq-button_outline){border-right:none}.kbq-split-button .kbq-button_outline:has(+.kbq-button_outline)+.kbq-button_outline{border-left:none}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_item,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_item{background:var(--kbq-states-background-disabled)}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):hover,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):hover{background:var(--kbq-states-background-contrast-fade-hover)}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):active,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):active{background:var(--kbq-states-background-contrast-fade-active)}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-icon-contrast)}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):before,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):before{background:var(--kbq-line-contrast-fade)}.kbq-split-button.kbq-split-button_first-disabled.kbq-theme-fade.kbq-button_outline .kbq-split-button_item{border-color:var(--kbq-button-outline-theme-fade-on-states-disabled-border)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled).kbq-contrast.kbq-button_filled .kbq-split-button_second{background:var(--kbq-button-filled-contrast-fade-off-background)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled).kbq-contrast-fade.kbq-button_filled .kbq-split-button_first{background:var(--kbq-states-background-disabled)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled).kbq-theme-fade.kbq-button_outline .kbq-split-button_item{border-color:var(--kbq-button-outline-theme-fade-on-states-disabled-border)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled).kbq-theme.kbq-button_transparent .kbq-split-button_second:before{background:var(--kbq-states-line-disabled)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled) .kbq-split-button_second:before{background:var(--kbq-states-line-disabled)}.kbq-split-button.kbq-split-button_first-disabled.kbq-split-button_second-disabled .kbq-split-button_second:before{background:var(--kbq-line-contrast-fade)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitButton, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-split-button, [kbq-split-button]', template: `
         <ng-content select="[kbq-button]" />
@@ -140,11 +133,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 
 class KbqSplitButtonModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitButtonModule, imports: [KbqSplitButton], exports: [KbqSplitButton] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitButtonModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitButtonModule, imports: [KbqSplitButton], exports: [KbqSplitButton] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitButtonModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/koobiq-components-split-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-split-button.mjs","sources":["../../../packages/components/split-button/split-button.ts","../../../packages/components/split-button/split-button.module.ts","../../../packages/components/split-button/koobiq-components-split-button.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    contentChild,\n    ContentChildren,\n    Input,\n    input,\n    QueryList,\n    ViewEncapsulation\n} from '@angular/core';\nimport { KbqButton, KbqButtonStyles } from '@koobiq/components/button';\nimport { KbqColorDirective, KbqComponentColors, kbqInjectNativeElement, ThemePalette } from '@koobiq/components/core';\nimport { KbqDropdownTrigger } from '@koobiq/components/dropdown';\nimport { delay } from 'rxjs/operators';\n\n@Component({\n    selector: 'kbq-split-button, [kbq-split-button]',\n    template: `\n        <ng-content select=\"[kbq-button]\" />\n\n        <ng-content select=\"[kbq-button]\" />\n    `,\n    styleUrls: ['./split-button.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-split-button',\n        '[class]': 'kbqStyle',\n        '[class.kbq-split-button_styles-for-nested]': 'buttons.length > 1',\n        '[class.kbq-split-button_first-disabled]': 'firstDisabled',\n        '[class.kbq-split-button_second-disabled]': 'secondDisabled'\n    }\n})\nexport class KbqSplitButton extends KbqColorDirective implements AfterContentInit {\n    private nativeElement = kbqInjectNativeElement();\n\n    /** @docs-private */\n    @ContentChildren(KbqButton) protected buttons: QueryList<KbqButton>;\n    /** @docs-private */\n    protected readonly dropdownTrigger = contentChild(KbqDropdownTrigger);\n\n    /** Sets the width of the dropdown to the width of the trigger. Default is false */\n    readonly panelAutoWidth = input<boolean>(false);\n\n    /** component style, will be set for nested buttons */\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input()\n    get kbqStyle(): string {\n        return `kbq-button_${this._kbqStyle}`;\n    }\n\n    set kbqStyle(value: KbqButtonStyles | string) {\n        this._kbqStyle = value || KbqButtonStyles.Filled;\n\n        this.updateStyle(this._kbqStyle);\n    }\n\n    private _kbqStyle: string | KbqButtonStyles = KbqButtonStyles.Filled;\n\n    /** component color, will be set for nested buttons */\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input()\n    get color(): KbqComponentColors | ThemePalette | string {\n        return this._color;\n    }\n\n    set color(value: KbqComponentColors | ThemePalette | string) {\n        if (!value) return;\n\n        super.color = value;\n\n        this.updateColor(this.color);\n    }\n\n    /** Whether the checkbox is disabled. */\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input({ transform: booleanAttribute })\n    get disabled(): boolean {\n        return this._disabled;\n    }\n\n    set disabled(value: boolean) {\n        this._disabled = value;\n\n        this.updateDisabledState(this._disabled);\n    }\n\n    protected _disabled: boolean;\n\n    get firstDisabled(): boolean {\n        return this.buttons.first?.disabled;\n    }\n\n    get secondDisabled(): boolean {\n        return this.buttons.length > 1 && this.buttons.last?.disabled;\n    }\n\n    constructor() {\n        super();\n\n        this.color = KbqComponentColors.ContrastFade;\n    }\n\n    ngAfterContentInit(): void {\n        this.updateClasses();\n        this.updateStyle(this._kbqStyle);\n        this.updateColor(this.color);\n        this.updateDisabledState(this.disabled);\n        this.updateDropdownParams();\n\n        if (!this.buttons.length) {\n            throw new Error(`kbq-split-button must contain at least one button`);\n        }\n\n        this.buttons.changes.pipe(delay(0)).subscribe(() => {\n            this.updateClasses();\n            this.updateStyle(this._kbqStyle);\n            this.updateColor(this.color);\n            this.updateDropdownParams();\n        });\n    }\n\n    private updateClasses() {\n        this.buttons.forEach((button: KbqButton) => {\n            button.getHostElement().classList.remove(`kbq-split-button_first`, `kbq-split-button_second`);\n        });\n\n        this.buttons.first?.getHostElement().classList.add(`kbq-split-button_first`);\n        this.buttons.last?.getHostElement().classList.add(`kbq-split-button_second`);\n        this.buttons.forEach((button: KbqButton) => {\n            button.getHostElement().classList.add(`kbq-split-button_item`);\n        });\n    }\n\n    private updateColor(color: KbqComponentColors | ThemePalette | string) {\n        this.buttons?.forEach((button: KbqButton) => (button.color = color));\n    }\n\n    private updateStyle(style: KbqButtonStyles | string) {\n        this.buttons?.forEach((button: KbqButton) => (button.kbqStyle = style));\n    }\n\n    private updateDisabledState(state: boolean) {\n        if (state === undefined) return;\n\n        this.buttons?.forEach((button: KbqButton) => (button.disabled = state));\n    }\n\n    private updateDropdownParams = () => {\n        const dropdownTrigger = this.dropdownTrigger();\n\n        if (!dropdownTrigger) return;\n\n        dropdownTrigger.dropdown.xPosition = 'before';\n\n        if (this.panelAutoWidth()) {\n            // we need to use a timeout of about 50ms to wait for the styles to apply\n            setTimeout(() => {\n                const { width } = this.nativeElement.getClientRects()[0];\n\n                const dropdownTrigger = this.dropdownTrigger();\n\n                if (dropdownTrigger) {\n                    dropdownTrigger.dropdown.triggerWidth = `${Math.round(width)}px`;\n                }\n            }, 50);\n        }\n    };\n}\n","import { NgModule } from '@angular/core';\nimport { KbqSplitButton } from './split-button';\n\n@NgModule({\n    imports: [\n        KbqSplitButton\n    ],\n    exports: [KbqSplitButton]\n})\nexport class KbqSplitButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koobiq-components-split-button.mjs","sources":["../../../packages/components/split-button/split-button.ts","../../../packages/components/split-button/split-button.module.ts","../../../packages/components/split-button/koobiq-components-split-button.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    contentChild,\n    ContentChildren,\n    Input,\n    input,\n    QueryList,\n    ViewEncapsulation\n} from '@angular/core';\nimport { KbqButton, KbqButtonStyles } from '@koobiq/components/button';\nimport { KbqColorDirective, KbqComponentColors, kbqInjectNativeElement, ThemePalette } from '@koobiq/components/core';\nimport { KbqDropdownTrigger } from '@koobiq/components/dropdown';\nimport { delay } from 'rxjs/operators';\n\n@Component({\n    selector: 'kbq-split-button, [kbq-split-button]',\n    template: `\n        <ng-content select=\"[kbq-button]\" />\n\n        <ng-content select=\"[kbq-button]\" />\n    `,\n    styleUrls: ['./split-button.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-split-button',\n        '[class]': 'kbqStyle',\n        '[class.kbq-split-button_styles-for-nested]': 'buttons.length > 1',\n        '[class.kbq-split-button_first-disabled]': 'firstDisabled',\n        '[class.kbq-split-button_second-disabled]': 'secondDisabled'\n    }\n})\nexport class KbqSplitButton extends KbqColorDirective implements AfterContentInit {\n    private nativeElement = kbqInjectNativeElement();\n\n    /** @docs-private */\n    @ContentChildren(KbqButton) protected buttons: QueryList<KbqButton>;\n    /** @docs-private */\n    protected readonly dropdownTrigger = contentChild(KbqDropdownTrigger);\n\n    /** Sets the width of the dropdown to the width of the trigger. Default is false */\n    readonly panelAutoWidth = input<boolean>(false);\n\n    /** component style, will be set for nested buttons */\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input()\n    get kbqStyle(): string {\n        return `kbq-button_${this._kbqStyle}`;\n    }\n\n    set kbqStyle(value: KbqButtonStyles | string) {\n        this._kbqStyle = value || KbqButtonStyles.Filled;\n\n        this.updateStyle(this._kbqStyle);\n    }\n\n    private _kbqStyle: string | KbqButtonStyles = KbqButtonStyles.Filled;\n\n    /** component color, will be set for nested buttons */\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input()\n    get color(): KbqComponentColors | ThemePalette | string {\n        return this._color;\n    }\n\n    set color(value: KbqComponentColors | ThemePalette | string) {\n        if (!value) return;\n\n        super.color = value;\n\n        this.updateColor(this.color);\n    }\n\n    /** Whether the checkbox is disabled. */\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input({ transform: booleanAttribute })\n    get disabled(): boolean {\n        return this._disabled;\n    }\n\n    set disabled(value: boolean) {\n        this._disabled = value;\n\n        this.updateDisabledState(this._disabled);\n    }\n\n    protected _disabled: boolean;\n\n    get firstDisabled(): boolean {\n        return this.buttons.first?.disabled;\n    }\n\n    get secondDisabled(): boolean {\n        return this.buttons.length > 1 && this.buttons.last?.disabled;\n    }\n\n    constructor() {\n        super();\n\n        this.color = KbqComponentColors.ContrastFade;\n    }\n\n    ngAfterContentInit(): void {\n        this.updateClasses();\n        this.updateStyle(this._kbqStyle);\n        this.updateColor(this.color);\n        this.updateDisabledState(this.disabled);\n        this.updateDropdownParams();\n\n        if (!this.buttons.length) {\n            throw new Error(`kbq-split-button must contain at least one button`);\n        }\n\n        this.buttons.changes.pipe(delay(0)).subscribe(() => {\n            this.updateClasses();\n            this.updateStyle(this._kbqStyle);\n            this.updateColor(this.color);\n            this.updateDropdownParams();\n        });\n    }\n\n    private updateClasses() {\n        this.buttons.forEach((button: KbqButton) => {\n            button.getHostElement().classList.remove(`kbq-split-button_first`, `kbq-split-button_second`);\n        });\n\n        this.buttons.first?.getHostElement().classList.add(`kbq-split-button_first`);\n        this.buttons.last?.getHostElement().classList.add(`kbq-split-button_second`);\n        this.buttons.forEach((button: KbqButton) => {\n            button.getHostElement().classList.add(`kbq-split-button_item`);\n        });\n    }\n\n    private updateColor(color: KbqComponentColors | ThemePalette | string) {\n        this.buttons?.forEach((button: KbqButton) => (button.color = color));\n    }\n\n    private updateStyle(style: KbqButtonStyles | string) {\n        this.buttons?.forEach((button: KbqButton) => (button.kbqStyle = style));\n    }\n\n    private updateDisabledState(state: boolean) {\n        if (state === undefined) return;\n\n        this.buttons?.forEach((button: KbqButton) => (button.disabled = state));\n    }\n\n    private updateDropdownParams = () => {\n        const dropdownTrigger = this.dropdownTrigger();\n\n        if (!dropdownTrigger) return;\n\n        dropdownTrigger.dropdown.xPosition = 'before';\n\n        // The trigger is only the chevron button, so the whole control has to be named explicitly.\n        // It is measured lazily on open, which is why no wait for styles to apply is needed here.\n        dropdownTrigger.widthOrigin = this.panelAutoWidth() ? this.nativeElement : undefined;\n    };\n}\n","import { NgModule } from '@angular/core';\nimport { KbqSplitButton } from './split-button';\n\n@NgModule({\n    imports: [\n        KbqSplitButton\n    ],\n    exports: [KbqSplitButton]\n})\nexport class KbqSplitButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAmCM,MAAO,cAAe,SAAQ,iBAAiB,CAAA;;;;AAcjD,IAAA,IACI,QAAQ,GAAA;AACR,QAAA,OAAO,CAAA,WAAA,EAAc,IAAI,CAAC,SAAS,EAAE;IACzC;IAEA,IAAI,QAAQ,CAAC,KAA+B,EAAA;QACxC,IAAI,CAAC,SAAS,GAAG,KAAK,IAAI,eAAe,CAAC,MAAM;AAEhD,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;IACpC;;;;AAOA,IAAA,IACI,KAAK,GAAA;QACL,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAI,KAAK,CAAC,KAAiD,EAAA;AACvD,QAAA,IAAI,CAAC,KAAK;YAAE;AAEZ,QAAA,KAAK,CAAC,KAAK,GAAG,KAAK;AAEnB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;IAChC;;;;AAKA,IAAA,IACI,QAAQ,GAAA;QACR,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,IAAI,QAAQ,CAAC,KAAc,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AAEtB,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC;IAC5C;AAIA,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ;IACvC;AAEA,IAAA,IAAI,cAAc,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ;IACjE;AAEA,IAAA,WAAA,GAAA;AACI,QAAA,KAAK,EAAE;QAnEH,IAAA,CAAA,aAAa,GAAG,sBAAsB,EAAE;;AAK7B,QAAA,IAAA,CAAA,eAAe,GAAG,YAAY,CAAC,kBAAkB,2DAAC;;AAG5D,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAU,KAAK,0DAAC;AAgBvC,QAAA,IAAA,CAAA,SAAS,GAA6B,eAAe,CAAC,MAAM;QA6F5D,IAAA,CAAA,oBAAoB,GAAG,MAAK;AAChC,YAAA,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE;AAE9C,YAAA,IAAI,CAAC,eAAe;gBAAE;AAEtB,YAAA,eAAe,CAAC,QAAQ,CAAC,SAAS,GAAG,QAAQ;;;AAI7C,YAAA,eAAe,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,SAAS;AACxF,QAAA,CAAC;AA1DG,QAAA,IAAI,CAAC,KAAK,GAAG,kBAAkB,CAAC,YAAY;IAChD;IAEA,kBAAkB,GAAA;QACd,IAAI,CAAC,aAAa,EAAE;AACpB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;AAChC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;AAC5B,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC;QACvC,IAAI,CAAC,oBAAoB,EAAE;AAE3B,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;AACtB,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,iDAAA,CAAmD,CAAC;QACxE;AAEA,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAK;YAC/C,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;AAChC,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;YAC5B,IAAI,CAAC,oBAAoB,EAAE;AAC/B,QAAA,CAAC,CAAC;IACN;IAEQ,aAAa,GAAA;QACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAiB,KAAI;AACvC,YAAA,MAAM,CAAC,cAAc,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA,sBAAA,CAAwB,EAAE,CAAA,uBAAA,CAAyB,CAAC;AACjG,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,cAAc,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA,sBAAA,CAAwB,CAAC;AAC5E,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA,uBAAA,CAAyB,CAAC;QAC5E,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAiB,KAAI;YACvC,MAAM,CAAC,cAAc,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA,qBAAA,CAAuB,CAAC;AAClE,QAAA,CAAC,CAAC;IACN;AAEQ,IAAA,WAAW,CAAC,KAAiD,EAAA;AACjE,QAAA,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,MAAiB,MAAM,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC;IACxE;AAEQ,IAAA,WAAW,CAAC,KAA+B,EAAA;AAC/C,QAAA,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,MAAiB,MAAM,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;IAC3E;AAEQ,IAAA,mBAAmB,CAAC,KAAc,EAAA;QACtC,IAAI,KAAK,KAAK,SAAS;YAAE;AAEzB,QAAA,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,MAAiB,MAAM,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;IAC3E;kIApHS,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,0lBA8CH,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,UAAA,EAAA,0CAAA,EAAA,oBAAA,EAAA,uCAAA,EAAA,eAAA,EAAA,wCAAA,EAAA,gBAAA,EAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAxCc,kBAAkB,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,SAAA,EAFnD,SAAS,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EApBhB;;;;AAIT,IAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+oLAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAYQ,cAAc,EAAA,UAAA,EAAA,CAAA;kBAlB1B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sCAAsC,EAAA,QAAA,EACtC;;;;AAIT,IAAA,CAAA,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACF,wBAAA,KAAK,EAAE,kBAAkB;AACzB,wBAAA,SAAS,EAAE,UAAU;AACrB,wBAAA,4CAA4C,EAAE,oBAAoB;AAClE,wBAAA,yCAAyC,EAAE,eAAe;AAC1D,wBAAA,0CAA0C,EAAE;AAC/C,qBAAA,EAAA,MAAA,EAAA,CAAA,+oLAAA,CAAA,EAAA;;sBAMA,eAAe;uBAAC,SAAS;sFAEwB,kBAAkB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA;sBAQnE;;sBAgBA;;sBAgBA,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;;MCxE7B,oBAAoB,CAAA;kIAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;mIAApB,oBAAoB,EAAA,OAAA,EAAA,CAJzB,cAAc,CAAA,EAAA,OAAA,EAAA,CAER,cAAc,CAAA,EAAA,CAAA,CAAA;mIAEf,oBAAoB,EAAA,CAAA,CAAA;;4FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL;AACH,qBAAA;oBACD,OAAO,EAAE,CAAC,cAAc;AAC3B,iBAAA;;;ACRD;;AAEG;;;;"}

package/fesm2022/koobiq-components-splitter.mjs

@@ -1,7 +1,7 @@
 import { coerceNumberProperty, coerceCssPixelValue, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Platform } from '@angular/cdk/platform';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, Input, Directive, ChangeDetectorRef, NgZone, output, viewChildren, viewChild, forwardRef, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { inject, ElementRef, Renderer2, Input, Directive, ChangeDetectorRef, NgZone, output, viewChildren, viewChild, ContentChildren, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { KBQ_WINDOW } from '@koobiq/components/core';
 import { Subscription } from 'rxjs';
 import { KbqIconModule } from '@koobiq/components/icon';
@@ -66,10 +66,10 @@ class KbqGutterDirective {
     setStyle(property, value) {
         this.renderer.setStyle(this.elementRef.nativeElement, property, value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqGutterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqGutterDirective, isStandalone: true, selector: "kbq-gutter", inputs: { direction: "direction", order: "order", size: "size" }, host: { listeners: { "mousedown": "dragged = true" }, properties: { "class.kbq-gutter_vertical": "isVertical", "class.kbq-gutter_dragged": "dragged" }, classAttribute: "kbq-gutter" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqGutterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqGutterDirective, isStandalone: true, selector: "kbq-gutter", inputs: { direction: "direction", order: "order", size: "size" }, host: { listeners: { "mousedown": "dragged = true" }, properties: { "class.kbq-gutter_vertical": "isVertical", "class.kbq-gutter_dragged": "dragged" }, classAttribute: "kbq-gutter" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqGutterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqGutterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-gutter',
@@ -142,10 +142,10 @@ class KbqGutterGhostDirective {
     setStyle(property, value) {
         this.renderer.setStyle(this.elementRef.nativeElement, property, value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqGutterGhostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqGutterGhostDirective, isStandalone: true, selector: "kbq-gutter-ghost", inputs: { visible: "visible", x: "x", y: "y", direction: "direction", size: "size" }, host: { properties: { "class.kbq-gutter-ghost_vertical": "isVertical", "class.kbq-gutter-ghost_visible": "visible" }, classAttribute: "kbq-gutter-ghost" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqGutterGhostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqGutterGhostDirective, isStandalone: true, selector: "kbq-gutter-ghost", inputs: { visible: "visible", x: "x", y: "y", direction: "direction", size: "size" }, host: { properties: { "class.kbq-gutter-ghost_vertical": "isVertical", "class.kbq-gutter-ghost_visible": "visible" }, classAttribute: "kbq-gutter-ghost" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqGutterGhostDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqGutterGhostDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-gutter-ghost',
@@ -398,10 +398,10 @@ class KbqSplitterComponent {
     setStyle(property, value) {
         this.renderer.setStyle(this.elementRef.nativeElement, property, value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqSplitterComponent, isStandalone: true, selector: "kbq-splitter", inputs: { hideGutters: "hideGutters", direction: "direction", disabled: "disabled", useGhost: "useGhost", gutterSize: "gutterSize" }, outputs: { gutterPositionChange: "gutterPositionChange" }, host: { classAttribute: "kbq-splitter" }, queries: [{ propertyName: "areaRefs", predicate: i0.forwardRef(() => KbqSplitterAreaDirective) }], viewQueries: [{ propertyName: "gutters", predicate: KbqGutterDirective, descendants: true, isSignal: true }, { propertyName: "ghost", first: true, predicate: KbqGutterGhostDirective, descendants: true, isSignal: true }], exportAs: ["kbqSplitter"], ngImport: i0, template: "<ng-content />\n\n@for (area of areas; track area) {\n    @if (!$last) {\n        <kbq-gutter\n            [attr.disabled]=\"disabled || null\"\n            [direction]=\"direction\"\n            [order]=\"$index * 2 + 1\"\n            [size]=\"gutterSize\"\n            [style.display]=\"hideGutters ? 'none' : 'flex'\"\n            (mousedown)=\"onMouseDown($event, $index, $index + 1)\"\n        />\n    }\n}\n\n@if (useGhost) {\n    <kbq-gutter-ghost />\n}\n", styles: [".kbq-splitter{display:flex;position:relative;flex-wrap:nowrap;align-items:stretch;overflow:hidden}.kbq-splitter .kbq-splitter-area{overflow:hidden}.kbq-splitter .kbq-splitter-area_resizing{pointer-events:none}.kbq-gutter{display:flex;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;overflow:hidden}.kbq-gutter.kbq-gutter_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost{position:absolute;z-index:999;display:none;overflow:hidden}.kbq-gutter-ghost.kbq-gutter-ghost_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost.kbq-gutter-ghost_visible{display:block}.kbq-gutter{cursor:col-resize}.kbq-gutter:hover,.kbq-gutter.kbq-gutter_dragged{background-color:var(--kbq-states-background-transparent-hover)}.kbq-gutter.kbq-gutter_vertical{cursor:row-resize}.kbq-gutter[disabled]{background-color:var(--kbq-states-background-disabled);cursor:default}.kbq-gutter-ghost{background:var(--kbq-states-background-transparent-active)}\n"], dependencies: [{ kind: "directive", type: KbqGutterDirective, selector: "kbq-gutter", inputs: ["direction", "order", "size"] }, { kind: "directive", type: KbqGutterGhostDirective, selector: "kbq-gutter-ghost", inputs: ["visible", "x", "y", "direction", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqSplitterComponent, isStandalone: true, selector: "kbq-splitter", inputs: { hideGutters: "hideGutters", direction: "direction", disabled: "disabled", useGhost: "useGhost", gutterSize: "gutterSize" }, outputs: { gutterPositionChange: "gutterPositionChange" }, host: { classAttribute: "kbq-splitter" }, queries: [{ propertyName: "areaRefs", predicate: i0.forwardRef(() => KbqSplitterAreaDirective) }], viewQueries: [{ propertyName: "gutters", predicate: KbqGutterDirective, descendants: true, isSignal: true }, { propertyName: "ghost", first: true, predicate: KbqGutterGhostDirective, descendants: true, isSignal: true }], exportAs: ["kbqSplitter"], ngImport: i0, template: "<ng-content />\n\n@for (area of areas; track area) {\n    @if (!$last) {\n        <kbq-gutter\n            [attr.disabled]=\"disabled || null\"\n            [direction]=\"direction\"\n            [order]=\"$index * 2 + 1\"\n            [size]=\"gutterSize\"\n            [style.display]=\"hideGutters ? 'none' : 'flex'\"\n            (mousedown)=\"onMouseDown($event, $index, $index + 1)\"\n        />\n    }\n}\n\n@if (useGhost) {\n    <kbq-gutter-ghost />\n}\n", styles: [".kbq-splitter{display:flex;position:relative;flex-wrap:nowrap;align-items:stretch;overflow:hidden}.kbq-splitter .kbq-splitter-area{overflow:hidden}.kbq-splitter .kbq-splitter-area_resizing{pointer-events:none}.kbq-gutter{display:flex;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;overflow:hidden}.kbq-gutter.kbq-gutter_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost{position:absolute;z-index:999;display:none;overflow:hidden}.kbq-gutter-ghost.kbq-gutter-ghost_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost.kbq-gutter-ghost_visible{display:block}.kbq-gutter{cursor:col-resize}.kbq-gutter:hover,.kbq-gutter.kbq-gutter_dragged{background-color:var(--kbq-states-background-transparent-hover)}.kbq-gutter.kbq-gutter_vertical{cursor:row-resize}.kbq-gutter[disabled]{background-color:var(--kbq-states-background-disabled);cursor:default}.kbq-gutter-ghost{background:var(--kbq-states-background-transparent-active)}\n"], dependencies: [{ kind: "directive", type: KbqGutterDirective, selector: "kbq-gutter", inputs: ["direction", "order", "size"] }, { kind: "directive", type: KbqGutterGhostDirective, selector: "kbq-gutter-ghost", inputs: ["visible", "x", "y", "direction", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-splitter', imports: [KbqGutterDirective, KbqGutterGhostDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-splitter'
@@ -496,10 +496,10 @@ class KbqSplitterAreaDirective {
     removeStyle(style) {
         this.renderer.removeStyle(this.elementRef.nativeElement, style);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSplitterAreaDirective, isStandalone: true, selector: "[kbq-splitter-area]", outputs: { sizeChange: "sizeChange" }, host: { properties: { "class.kbq-splitter-area_resizing": "isResizing()" }, classAttribute: "kbq-splitter-area" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqSplitterAreaDirective, isStandalone: true, selector: "[kbq-splitter-area]", outputs: { sizeChange: "sizeChange" }, host: { properties: { "class.kbq-splitter-area_resizing": "isResizing()" }, classAttribute: "kbq-splitter-area" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterAreaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterAreaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-splitter-area]',
@@ -511,17 +511,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }], propDecorators: { sizeChange: [{ type: i0.Output, args: ["sizeChange"] }] } });
 
 class KbqSplitterModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterModule, imports: [KbqIconModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterModule, imports: [KbqIconModule,
             KbqGutterDirective,
             KbqGutterGhostDirective,
             KbqSplitterAreaDirective,
             KbqSplitterComponent], exports: [KbqGutterDirective,
             KbqSplitterAreaDirective,
             KbqSplitterComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterModule, imports: [KbqIconModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterModule, imports: [KbqIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSplitterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [