@koobiq/components 17.0.0-rc.7 → 17.0.0-rc.9

package/alert/alert.component.scss

@@ -33,13 +33,15 @@
 
     & .kbq-alert__icon {
         margin:
-            kbq-css-variable(alert-size-normal-icon-margin-top)
+            kbq-css-variable(alert-size-normal-no-title-icon-margin-top)
             kbq-css-variable(alert-size-normal-icon-margin-right)
             kbq-css-variable(alert-size-normal-icon-margin-bottom)
             kbq-css-variable(alert-size-normal-icon-margin-left);
 
-        &.kbq-alert__icon_title .kbq-icon {
-            margin-top: kbq-css-variable(alert-size-normal-icon-margin-addon-title);
+        &.kbq-alert__icon_title {
+            margin-top: kbq-css-variable(alert-size-normal-icon-margin-top);
+
+            padding-top: kbq-css-variable(alert-size-normal-no-title-icon-padding-top);
         }
 
         display: inline-flex;
@@ -60,7 +62,6 @@
 
     & .kbq-alert__button-stack {
         padding-top: kbq-css-variable(alert-size-normal-button-stack-padding-top);
-
         padding-bottom: kbq-css-variable(alert-size-normal-button-stack-padding-bottom);
     }
 
@@ -80,12 +81,16 @@
         kbq-css-variable(alert-size-compact-container-padding-left);
 
     & .kbq-alert__icon {
-        margin-top: kbq-css-variable(alert-size-compact-icon-margin-top);
 
+        margin-top: kbq-css-variable(alert-size-compact-no-title-icon-margin-top);
         margin-right: kbq-css-variable(alert-size-compact-icon-margin-right);
 
-        &.kbq-alert__icon_title .kbq-icon {
-            margin-top: kbq-css-variable(alert-size-compact-icon-margin-addon-title);
+        padding-top: kbq-css-variable(alert-size-compact-no-title-icon-padding-top);
+
+        &.kbq-alert__icon_title {
+            margin-top: kbq-css-variable(alert-size-compact-icon-margin-top);
+
+            padding-top: kbq-css-variable(alert-size-compact-icon-padding-top);
         }
 
         display: inline-flex;
@@ -106,13 +111,11 @@
 
     & .kbq-alert__button-stack {
         padding-top: kbq-css-variable(alert-size-compact-button-stack-padding-top);
-
         padding-bottom: kbq-css-variable(alert-size-compact-button-stack-padding-bottom);
     }
 
     & .kbq-alert__close-button {
         margin-top: kbq-css-variable(alert-size-compact-close-button-margin-top);
-
         margin-left: kbq-css-variable(alert-size-compact-close-button-margin-left);
     }
 }

package/badge/badge.component.scss

@@ -9,7 +9,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-
+    height: var(--kbq-badge-size-normal-height, map.get($tokens, badge-size-normal-height));
     text-align: center;
     white-space: nowrap;
 
@@ -17,9 +17,8 @@
 
     box-sizing: border-box;
 
-    padding:
-        kbq-css-variable(badge-size-normal-vertical-padding)
-        kbq-css-variable(badge-size-normal-horizontal-padding);
+    padding-right: kbq-css-variable(badge-size-normal-horizontal-padding);
+    padding-left: kbq-css-variable(badge-size-normal-horizontal-padding);
 
     border: {
         width: kbq-css-variable(badge-size-normal-border-width);
@@ -39,9 +38,10 @@
     }
 
     &.kbq-badge_compact {
-        padding:
-            kbq-css-variable(badge-size-compact-vertical-padding)
-            kbq-css-variable(badge-size-compact-horizontal-padding);
+        height: var(--kbq-badge-size-compact-height, map.get($tokens, badge-size-compact-height));
+
+        padding-right: kbq-css-variable(badge-size-compact-horizontal-padding);
+        padding-left: kbq-css-variable(badge-size-compact-horizontal-padding);
 
         border: {
             width: kbq-css-variable(badge-size-compact-border-width);

package/button-toggle/button-toggle.scss

@@ -27,6 +27,9 @@ $tokens: meta.module-variables(tokens) !default;
         display: flex;
         overflow: hidden;
         justify-content: flex-start;
+        align-items: center;
+
+        height: kbq-css-variable(button-toggle-size-item-height);
 
         $padding-vertical: map.get($tokens, button-toggle-size-item-padding-vertical);
         $padding-horizontal: map.get($tokens, button-toggle-size-item-padding-horizontal);
@@ -53,6 +56,7 @@ $tokens: meta.module-variables(tokens) !default;
                 text-overflow: ellipsis;
                 overflow: hidden;
                 white-space: nowrap;
+                align-items: center;
 
                 width: 100%;
 
@@ -67,8 +71,7 @@ $tokens: meta.module-variables(tokens) !default;
             > .kbq-button-icon {
                 max-width: 100%;
 
-                height: unset;
-                min-height: unset;
+                height: kbq-css-variable(button-toggle-size-item-height);
             }
         }
     }

package/card/_card-theme.scss

@@ -57,7 +57,7 @@
         }
 
         &.cdk-keyboard-focused {
-            box-shadow: 0 0 0 2px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
+            box-shadow: 0 0 0.1px 2px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
         }
     }
 }

package/checkbox/checkbox.scss

@@ -45,6 +45,10 @@ $tokens: meta.module-variables(tokens) !default;
     // (e.g. pointer by default, regular when disabled), instead of the browser default.
     cursor: inherit;
 
+    padding-top: kbq-css-variable(checkbox-size-normal-paddding-top);
+
+    padding-bottom: kbq-css-variable(checkbox-size-normal-paddding-bottom);
+
     padding-left: calc(
         var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
         var(
@@ -60,7 +64,7 @@ $tokens: meta.module-variables(tokens) !default;
     display: inline-block;
 
     position: absolute;
-    top: 0;
+    top: kbq-css-variable(checkbox-size-normal-top);
     left: 0;
 
     height: kbq-css-variable(checkbox-size-normal-width);
@@ -108,6 +112,7 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-checkbox.kbq-checkbox_big {
     & .kbq-checkbox__layout {
+
         padding-left: calc(
             var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
             var(
@@ -118,7 +123,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     & .kbq-checkbox__inner-container {
-        top: 2px;
+        top: kbq-css-variable(checkbox-size-big-top);
         height: kbq-css-variable(checkbox-size-big-width);
         width: kbq-css-variable(checkbox-size-big-width);
     }
@@ -152,9 +157,11 @@ $tokens: meta.module-variables(tokens) !default;
 /* stylelint-disable no-descending-specificity */
 .kbq-checkbox_label-before {
     .kbq-checkbox__layout {
+
         padding-left: 0;
         padding-right: calc(
-            var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
+            var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width))
+            +
             var(
                 --kbq-checkbox-size-normal-horizontal-content-padding,
                 map.get($tokens, checkbox-size-normal-horizontal-content-padding)

package/code-block/_code-block-theme.scss

@@ -354,7 +354,7 @@
 
             .kbq-tab-body__wrapper {
                 border-color: kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
-                box-shadow: inset 0 0 0 1px kbq-css-variable(
+                box-shadow: inset 0 0 0.1 1px kbq-css-variable(
                     states-focused-color, map.get($theme, states, focused-color));
             }
         }

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

@@ -1,7 +1,9 @@
 import { InjectionToken } from '@angular/core';
 export interface KbqFormFieldRef {
     control: any;
+    canCleanerClearByEsc: boolean;
     shouldForward(str: string): boolean;
+    focusViaKeyboard(): void;
 }
 /**
  * Injection token that can be used to inject an instances of `KbqFormField`. It serves

package/core/locales/locale-service.d.ts

@@ -407,6 +407,7 @@ export declare const KBQ_LOCALE_SERVICE: InjectionToken<KbqLocaleService>;
 export declare class KbqLocaleService {
     readonly changes: BehaviorSubject<string>;
     readonly locales: any;
+    private readonly document;
     id: string;
     current: any;
     constructor(id: string, localeData: any);

package/core/select/common.d.ts

@@ -0,0 +1,35 @@
+import { AfterContentInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { KbqFormFieldRef } from '../form-field';
+import * as i0 from "@angular/core";
+export declare class KbqSelectTrigger {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectTrigger, "kbq-select-trigger, [kbq-select-trigger]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectMatcher {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectMatcher, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectFooter, "kbq-select-footer, [kbq-select-footer]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectSearch implements AfterContentInit, OnDestroy {
+    protected formField: KbqFormFieldRef;
+    searchChangesSubscription: Subscription;
+    isSearchChanged: boolean;
+    get ngControl(): any;
+    constructor(formField: KbqFormFieldRef);
+    focus(): void;
+    reset(): void;
+    value(): any;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearch, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearch, "[kbqSelectSearch]", ["kbqSelectSearch"], {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectSearchEmptyResult {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearchEmptyResult, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearchEmptyResult, "[kbq-select-search-empty-result]", ["kbqSelectSearchEmptyResult"], {}, {}, never, never, true, never>;
+}

package/core/select/index.d.ts

@@ -1,3 +1,4 @@
 export * from './events';
 export * from './errors';
 export * from './constants';
+export * from './common';

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -9,6 +9,7 @@
     $base: checkbox-#{$style-name};
 
     border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
+    background: kbq-css-variable(#{$base}-default-background, map.get($style, default, background));
 
     & .kbq-checkbox-checkmark,
     & .kbq-checkbox-mixedmark {

package/dropdown/dropdown-item.scss

@@ -7,6 +7,8 @@
 
 
 .kbq-dropdown-item {
+    width: 100%;
+
     @include common.user-select(none);
     @include common.kbq-list-item-base();
 

package/dropdown/dropdown-trigger.directive.d.ts

@@ -31,7 +31,7 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     private parent;
     private dropdownItemInstance;
     private _dir;
-    private changeDetecotrRef;
+    private changeDetectorRef;
     private focusMonitor?;
     lastDestroyReason: DropdownCloseReason;
     /** Data to be passed along to any lazily-rendered content. */
@@ -61,7 +61,7 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     private overlayRef;
     private closeSubscription;
     private hoverSubscription;
-    constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, viewContainerRef: ViewContainerRef, scrollStrategy: any, parent: KbqDropdown, dropdownItemInstance: KbqDropdownItem, _dir: Directionality, changeDetecotrRef: ChangeDetectorRef, focusMonitor?: FocusMonitor | undefined);
+    constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, viewContainerRef: ViewContainerRef, scrollStrategy: any, parent: KbqDropdown, dropdownItemInstance: KbqDropdownItem, _dir: Directionality, changeDetectorRef: ChangeDetectorRef, focusMonitor?: FocusMonitor | undefined);
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     /** Whether the dropdown triggers a nested dropdown or a top-level one. */

package/esm2022/alert/alert.component.mjs

@@ -76,7 +76,7 @@ export class KbqAlert {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqAlert, selector: "kbq-alert", inputs: { compact: "compact", alertStyle: "alertStyle", alertColor: "alertColor" }, host: { properties: { "class": "alertColor", "class.kbq-alert_normal": "!compact", "class.kbq-alert_compact": "compact", "class.kbq-alert_default": "!isColored", "class.kbq-alert_colored": "isColored", "class.kbq-alert_dismissible": "closeButton" }, classAttribute: "kbq-alert" }, queries: [{ propertyName: "iconItem", first: true, predicate: KbqIconItem, descendants: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }, { propertyName: "title", first: true, predicate: KbqAlertTitle, descendants: true }, { propertyName: "control", first: true, predicate: KbqAlertControl, descendants: true }, { propertyName: "closeButton", first: true, predicate: KbqAlertCloseButton, descendants: true }], ngImport: i0, template: "<div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title\" *ngIf=\"iconItem || icon\">\n    <ng-content select=\"[kbq-icon-item],[kbq-icon]\"></ng-content>\n</div>\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title\">\n    <ng-content select=\"[kbq-alert-title]\"></ng-content>\n\n    <div class=\"kbq-alert__text\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"kbq-alert__button-stack\" *ngIf=\"control\">\n        <ng-content select=\"[kbq-alert-control]\"></ng-content>\n    </div>\n</div>\n\n<div class=\"kbq-alert__close-button\" [hidden]=\"!closeButton\">\n    <ng-content select=\"[kbq-alert-close-button]\"></ng-content>\n</div>\n", styles: [".kbq-alert{display:flex;box-sizing:border-box}.kbq-alert .kbq-alert__content_title{margin-bottom:var(--kbq-size-xxs, 4px)}.kbq-alert__content{display:flex;flex-direction:column;flex:1;justify-content:center}.kbq-alert.kbq-alert_normal{border-radius:var(--kbq-alert-size-normal-container-border-radius, 12px);padding:var(--kbq-alert-size-normal-container-padding-top, 0) var(--kbq-alert-size-normal-container-padding-right, 8px) var(--kbq-alert-size-normal-container-padding-bottom, 0) var(--kbq-alert-size-normal-container-padding-left, 8px)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{margin:var(--kbq-alert-size-normal-icon-margin-top, 16px) var(--kbq-alert-size-normal-icon-margin-right, 0) var(--kbq-alert-size-normal-icon-margin-bottom, 16px) var(--kbq-alert-size-normal-icon-margin-left, 12px);display:inline-flex;align-items:flex-start}.kbq-alert.kbq-alert_normal .kbq-alert__icon.kbq-alert__icon_title .kbq-icon{margin-top:var(--kbq-alert-size-normal-icon-margin-addon-title, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__content{padding:var(--kbq-alert-size-normal-content-padding-top, 16px) var(--kbq-alert-size-normal-content-padding-right, 8px) var(--kbq-alert-size-normal-content-padding-bottom, 16px) var(--kbq-alert-size-normal-content-padding-left, 12px)}.kbq-alert.kbq-alert_normal .kbq-alert__title{margin-bottom:var(--kbq-alert-size-normal-title-margin-bottom, 4px)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-normal-button-stack-padding-top, 6px);padding-bottom:var(--kbq-alert-size-normal-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button{margin-top:var(--kbq-alert-size-normal-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-normal-close-button-margin-left, 2px)}.kbq-alert.kbq-alert_compact{border-radius:var(--kbq-alert-size-compact-container-border-radius, 12px);padding:var(--kbq-alert-size-compact-container-padding-top, 0) var(--kbq-alert-size-compact-container-padding-right, 8px) var(--kbq-alert-size-compact-container-padding-bottom, 0) var(--kbq-alert-size-compact-container-padding-left, 16px)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{margin-top:var(--kbq-alert-size-compact-icon-margin-top, 12px);margin-right:var(--kbq-alert-size-compact-icon-margin-right, 8px);display:inline-flex;align-items:flex-start}.kbq-alert.kbq-alert_compact .kbq-alert__icon.kbq-alert__icon_title .kbq-icon{margin-top:var(--kbq-alert-size-compact-icon-margin-addon-title, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__content{padding:var(--kbq-alert-size-compact-content-padding-top, 12px) var(--kbq-alert-size-compact-content-padding-right, 8px) var(--kbq-alert-size-compact-content-padding-bottom, 12px) var(--kbq-alert-size-compact-content-padding-left, 0)}.kbq-alert.kbq-alert_compact .kbq-alert__title{margin-bottom:var(--kbq-alert-size-compact-title-margin-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-compact-button-stack-padding-top, 8px);padding-bottom:var(--kbq-alert-size-compact-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button{margin-top:var(--kbq-alert-size-compact-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-compact-close-button-margin-left, 2px)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqAlert, selector: "kbq-alert", inputs: { compact: "compact", alertStyle: "alertStyle", alertColor: "alertColor" }, host: { properties: { "class": "alertColor", "class.kbq-alert_normal": "!compact", "class.kbq-alert_compact": "compact", "class.kbq-alert_default": "!isColored", "class.kbq-alert_colored": "isColored", "class.kbq-alert_dismissible": "closeButton" }, classAttribute: "kbq-alert" }, queries: [{ propertyName: "iconItem", first: true, predicate: KbqIconItem, descendants: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }, { propertyName: "title", first: true, predicate: KbqAlertTitle, descendants: true }, { propertyName: "control", first: true, predicate: KbqAlertControl, descendants: true }, { propertyName: "closeButton", first: true, predicate: KbqAlertCloseButton, descendants: true }], ngImport: i0, template: "<div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title\" *ngIf=\"iconItem || icon\">\n    <ng-content select=\"[kbq-icon-item],[kbq-icon]\"></ng-content>\n</div>\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title\">\n    <ng-content select=\"[kbq-alert-title]\"></ng-content>\n\n    <div class=\"kbq-alert__text\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"kbq-alert__button-stack\" *ngIf=\"control\">\n        <ng-content select=\"[kbq-alert-control]\"></ng-content>\n    </div>\n</div>\n\n<div class=\"kbq-alert__close-button\" [hidden]=\"!closeButton\">\n    <ng-content select=\"[kbq-alert-close-button]\"></ng-content>\n</div>\n", styles: [".kbq-alert{display:flex;box-sizing:border-box}.kbq-alert .kbq-alert__content_title{margin-bottom:var(--kbq-size-xxs, 4px)}.kbq-alert__content{display:flex;flex-direction:column;flex:1;justify-content:center}.kbq-alert.kbq-alert_normal{border-radius:var(--kbq-alert-size-normal-container-border-radius, 12px);padding:var(--kbq-alert-size-normal-container-padding-top, 0) var(--kbq-alert-size-normal-container-padding-right, 8px) var(--kbq-alert-size-normal-container-padding-bottom, 0) var(--kbq-alert-size-normal-container-padding-left, 8px)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{margin:var(--kbq-alert-size-normal-no-title-icon-margin-top, 16px) var(--kbq-alert-size-normal-icon-margin-right, 0) var(--kbq-alert-size-normal-icon-margin-bottom, 16px) var(--kbq-alert-size-normal-icon-margin-left, 12px);display:inline-flex;align-items:flex-start}.kbq-alert.kbq-alert_normal .kbq-alert__icon.kbq-alert__icon_title{margin-top:var(--kbq-alert-size-normal-icon-margin-top, 16px);padding-top:var(--kbq-alert-size-normal-no-title-icon-padding-top, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__content{padding:var(--kbq-alert-size-normal-content-padding-top, 16px) var(--kbq-alert-size-normal-content-padding-right, 8px) var(--kbq-alert-size-normal-content-padding-bottom, 16px) var(--kbq-alert-size-normal-content-padding-left, 12px)}.kbq-alert.kbq-alert_normal .kbq-alert__title{margin-bottom:var(--kbq-alert-size-normal-title-margin-bottom, 4px)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-normal-button-stack-padding-top, 8px);padding-bottom:var(--kbq-alert-size-normal-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button{margin-top:var(--kbq-alert-size-normal-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-normal-close-button-margin-left, 2px)}.kbq-alert.kbq-alert_compact{border-radius:var(--kbq-alert-size-compact-container-border-radius, 12px);padding:var(--kbq-alert-size-compact-container-padding-top, 0) var(--kbq-alert-size-compact-container-padding-right, 8px) var(--kbq-alert-size-compact-container-padding-bottom, 0) var(--kbq-alert-size-compact-container-padding-left, 16px)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{margin-top:var(--kbq-alert-size-compact-no-title-icon-margin-top, 12px);margin-right:var(--kbq-alert-size-compact-icon-margin-right, 8px);padding-top:var(--kbq-alert-size-compact-no-title-icon-padding-top, 2px);display:inline-flex;align-items:flex-start}.kbq-alert.kbq-alert_compact .kbq-alert__icon.kbq-alert__icon_title{margin-top:var(--kbq-alert-size-compact-icon-margin-top, 12px);padding-top:var(--kbq-alert-size-compact-icon-padding-top, 4px)}.kbq-alert.kbq-alert_compact .kbq-alert__content{padding:var(--kbq-alert-size-compact-content-padding-top, 12px) var(--kbq-alert-size-compact-content-padding-right, 8px) var(--kbq-alert-size-compact-content-padding-bottom, 12px) var(--kbq-alert-size-compact-content-padding-left, 0)}.kbq-alert.kbq-alert_compact .kbq-alert__title{margin-bottom:var(--kbq-alert-size-compact-title-margin-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-compact-button-stack-padding-top, 8px);padding-bottom:var(--kbq-alert-size-compact-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button{margin-top:var(--kbq-alert-size-compact-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-compact-close-button-margin-left, 2px)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqAlert, decorators: [{
             type: Component,
@@ -88,7 +88,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '[class.kbq-alert_default]': '!isColored',
                         '[class.kbq-alert_colored]': 'isColored',
                         '[class.kbq-alert_dismissible]': 'closeButton'
-                    }, template: "<div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title\" *ngIf=\"iconItem || icon\">\n    <ng-content select=\"[kbq-icon-item],[kbq-icon]\"></ng-content>\n</div>\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title\">\n    <ng-content select=\"[kbq-alert-title]\"></ng-content>\n\n    <div class=\"kbq-alert__text\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"kbq-alert__button-stack\" *ngIf=\"control\">\n        <ng-content select=\"[kbq-alert-control]\"></ng-content>\n    </div>\n</div>\n\n<div class=\"kbq-alert__close-button\" [hidden]=\"!closeButton\">\n    <ng-content select=\"[kbq-alert-close-button]\"></ng-content>\n</div>\n", styles: [".kbq-alert{display:flex;box-sizing:border-box}.kbq-alert .kbq-alert__content_title{margin-bottom:var(--kbq-size-xxs, 4px)}.kbq-alert__content{display:flex;flex-direction:column;flex:1;justify-content:center}.kbq-alert.kbq-alert_normal{border-radius:var(--kbq-alert-size-normal-container-border-radius, 12px);padding:var(--kbq-alert-size-normal-container-padding-top, 0) var(--kbq-alert-size-normal-container-padding-right, 8px) var(--kbq-alert-size-normal-container-padding-bottom, 0) var(--kbq-alert-size-normal-container-padding-left, 8px)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{margin:var(--kbq-alert-size-normal-icon-margin-top, 16px) var(--kbq-alert-size-normal-icon-margin-right, 0) var(--kbq-alert-size-normal-icon-margin-bottom, 16px) var(--kbq-alert-size-normal-icon-margin-left, 12px);display:inline-flex;align-items:flex-start}.kbq-alert.kbq-alert_normal .kbq-alert__icon.kbq-alert__icon_title .kbq-icon{margin-top:var(--kbq-alert-size-normal-icon-margin-addon-title, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__content{padding:var(--kbq-alert-size-normal-content-padding-top, 16px) var(--kbq-alert-size-normal-content-padding-right, 8px) var(--kbq-alert-size-normal-content-padding-bottom, 16px) var(--kbq-alert-size-normal-content-padding-left, 12px)}.kbq-alert.kbq-alert_normal .kbq-alert__title{margin-bottom:var(--kbq-alert-size-normal-title-margin-bottom, 4px)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-normal-button-stack-padding-top, 6px);padding-bottom:var(--kbq-alert-size-normal-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button{margin-top:var(--kbq-alert-size-normal-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-normal-close-button-margin-left, 2px)}.kbq-alert.kbq-alert_compact{border-radius:var(--kbq-alert-size-compact-container-border-radius, 12px);padding:var(--kbq-alert-size-compact-container-padding-top, 0) var(--kbq-alert-size-compact-container-padding-right, 8px) var(--kbq-alert-size-compact-container-padding-bottom, 0) var(--kbq-alert-size-compact-container-padding-left, 16px)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{margin-top:var(--kbq-alert-size-compact-icon-margin-top, 12px);margin-right:var(--kbq-alert-size-compact-icon-margin-right, 8px);display:inline-flex;align-items:flex-start}.kbq-alert.kbq-alert_compact .kbq-alert__icon.kbq-alert__icon_title .kbq-icon{margin-top:var(--kbq-alert-size-compact-icon-margin-addon-title, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__content{padding:var(--kbq-alert-size-compact-content-padding-top, 12px) var(--kbq-alert-size-compact-content-padding-right, 8px) var(--kbq-alert-size-compact-content-padding-bottom, 12px) var(--kbq-alert-size-compact-content-padding-left, 0)}.kbq-alert.kbq-alert_compact .kbq-alert__title{margin-bottom:var(--kbq-alert-size-compact-title-margin-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-compact-button-stack-padding-top, 8px);padding-bottom:var(--kbq-alert-size-compact-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button{margin-top:var(--kbq-alert-size-compact-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-compact-close-button-margin-left, 2px)}\n"] }]
+                    }, template: "<div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title\" *ngIf=\"iconItem || icon\">\n    <ng-content select=\"[kbq-icon-item],[kbq-icon]\"></ng-content>\n</div>\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title\">\n    <ng-content select=\"[kbq-alert-title]\"></ng-content>\n\n    <div class=\"kbq-alert__text\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"kbq-alert__button-stack\" *ngIf=\"control\">\n        <ng-content select=\"[kbq-alert-control]\"></ng-content>\n    </div>\n</div>\n\n<div class=\"kbq-alert__close-button\" [hidden]=\"!closeButton\">\n    <ng-content select=\"[kbq-alert-close-button]\"></ng-content>\n</div>\n", styles: [".kbq-alert{display:flex;box-sizing:border-box}.kbq-alert .kbq-alert__content_title{margin-bottom:var(--kbq-size-xxs, 4px)}.kbq-alert__content{display:flex;flex-direction:column;flex:1;justify-content:center}.kbq-alert.kbq-alert_normal{border-radius:var(--kbq-alert-size-normal-container-border-radius, 12px);padding:var(--kbq-alert-size-normal-container-padding-top, 0) var(--kbq-alert-size-normal-container-padding-right, 8px) var(--kbq-alert-size-normal-container-padding-bottom, 0) var(--kbq-alert-size-normal-container-padding-left, 8px)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{margin:var(--kbq-alert-size-normal-no-title-icon-margin-top, 16px) var(--kbq-alert-size-normal-icon-margin-right, 0) var(--kbq-alert-size-normal-icon-margin-bottom, 16px) var(--kbq-alert-size-normal-icon-margin-left, 12px);display:inline-flex;align-items:flex-start}.kbq-alert.kbq-alert_normal .kbq-alert__icon.kbq-alert__icon_title{margin-top:var(--kbq-alert-size-normal-icon-margin-top, 16px);padding-top:var(--kbq-alert-size-normal-no-title-icon-padding-top, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__content{padding:var(--kbq-alert-size-normal-content-padding-top, 16px) var(--kbq-alert-size-normal-content-padding-right, 8px) var(--kbq-alert-size-normal-content-padding-bottom, 16px) var(--kbq-alert-size-normal-content-padding-left, 12px)}.kbq-alert.kbq-alert_normal .kbq-alert__title{margin-bottom:var(--kbq-alert-size-normal-title-margin-bottom, 4px)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-normal-button-stack-padding-top, 8px);padding-bottom:var(--kbq-alert-size-normal-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button{margin-top:var(--kbq-alert-size-normal-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-normal-close-button-margin-left, 2px)}.kbq-alert.kbq-alert_compact{border-radius:var(--kbq-alert-size-compact-container-border-radius, 12px);padding:var(--kbq-alert-size-compact-container-padding-top, 0) var(--kbq-alert-size-compact-container-padding-right, 8px) var(--kbq-alert-size-compact-container-padding-bottom, 0) var(--kbq-alert-size-compact-container-padding-left, 16px)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{margin-top:var(--kbq-alert-size-compact-no-title-icon-margin-top, 12px);margin-right:var(--kbq-alert-size-compact-icon-margin-right, 8px);padding-top:var(--kbq-alert-size-compact-no-title-icon-padding-top, 2px);display:inline-flex;align-items:flex-start}.kbq-alert.kbq-alert_compact .kbq-alert__icon.kbq-alert__icon_title{margin-top:var(--kbq-alert-size-compact-icon-margin-top, 12px);padding-top:var(--kbq-alert-size-compact-icon-padding-top, 4px)}.kbq-alert.kbq-alert_compact .kbq-alert__content{padding:var(--kbq-alert-size-compact-content-padding-top, 12px) var(--kbq-alert-size-compact-content-padding-right, 8px) var(--kbq-alert-size-compact-content-padding-bottom, 12px) var(--kbq-alert-size-compact-content-padding-left, 0)}.kbq-alert.kbq-alert_compact .kbq-alert__title{margin-bottom:var(--kbq-alert-size-compact-title-margin-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-compact-button-stack-padding-top, 8px);padding-bottom:var(--kbq-alert-size-compact-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button{margin-top:var(--kbq-alert-size-compact-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-compact-close-button-margin-left, 2px)}\n"] }]
         }], propDecorators: { iconItem: [{
                 type: ContentChild,
                 args: [KbqIconItem]

package/esm2022/badge/badge.component.mjs

@@ -99,7 +99,7 @@ export class KbqBadge {
         this._badgeColor = value || KbqBadgeColors.FadeContrast;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqBadge, selector: "kbq-badge", inputs: { compact: "compact", outline: "outline", badgeColor: "badgeColor" }, host: { properties: { "class.kbq-badge_compact": "compact", "class.kbq-badge-filled": "!outline", "class.kbq-badge-outline": "outline", "class": "badgeColor" }, classAttribute: "kbq-badge" }, queries: [{ propertyName: "iconItem", first: true, predicate: KbqIconItem, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".kbq-badge{display:inline-flex;flex-direction:row;justify-content:flex-start;align-items:center;text-align:center;white-space:nowrap;border-style:solid;box-sizing:border-box;padding:var(--kbq-badge-size-normal-vertical-padding, 4px) var(--kbq-badge-size-normal-horizontal-padding, 8px);border-width:var(--kbq-badge-size-normal-border-width, 1px);border-radius:var(--kbq-badge-size-normal-border-radius, 4px)}.kbq-badge .kbq-badge-caption{padding-left:var(--kbq-badge-size-normal-content-padding, 4px)}.kbq-badge .kbq-icon_left{margin-right:var(--kbq-badge-size-normal-icon-left-margin-right, 4px)}.kbq-badge .kbq-icon_right{margin-left:var(--kbq-badge-size-normal-icon-right-margin-left, 4px)}.kbq-badge.kbq-badge_compact{padding:var(--kbq-badge-size-compact-vertical-padding, 0) var(--kbq-badge-size-compact-horizontal-padding, 4px);border-width:var(--kbq-badge-size-compact-border-width, 1px);border-radius:var(--kbq-badge-size-compact-border-radius, 4px)}.kbq-badge.kbq-badge_compact .kbq-badge-caption{padding-left:var(--kbq-badge-size-compact-content-padding, 2px)}.kbq-badge.kbq-badge_compact .kbq-icon_left{margin-right:var(--kbq-badge-size-compact-icon-left-margin-right, 2px)}.kbq-badge.kbq-badge_compact .kbq-icon_right{margin-left:var(--kbq-badge-size-compact-icon-right-margin-left, 2px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqBadge, selector: "kbq-badge", inputs: { compact: "compact", outline: "outline", badgeColor: "badgeColor" }, host: { properties: { "class.kbq-badge_compact": "compact", "class.kbq-badge-filled": "!outline", "class.kbq-badge-outline": "outline", "class": "badgeColor" }, classAttribute: "kbq-badge" }, queries: [{ propertyName: "iconItem", first: true, predicate: KbqIconItem, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".kbq-badge{display:inline-flex;flex-direction:row;justify-content:flex-start;align-items:center;height:var(--kbq-badge-size-normal-height, 24px);text-align:center;white-space:nowrap;border-style:solid;box-sizing:border-box;padding-right:var(--kbq-badge-size-normal-horizontal-padding, 8px);padding-left:var(--kbq-badge-size-normal-horizontal-padding, 8px);border-width:var(--kbq-badge-size-normal-border-width, 1px);border-radius:var(--kbq-badge-size-normal-border-radius, 4px)}.kbq-badge .kbq-badge-caption{padding-left:var(--kbq-badge-size-normal-content-padding, 4px)}.kbq-badge .kbq-icon_left{margin-right:var(--kbq-badge-size-normal-icon-left-margin-right, 4px)}.kbq-badge .kbq-icon_right{margin-left:var(--kbq-badge-size-normal-icon-right-margin-left, 4px)}.kbq-badge.kbq-badge_compact{height:var(--kbq-badge-size-compact-height, 16px);padding-right:var(--kbq-badge-size-compact-horizontal-padding, 4px);padding-left:var(--kbq-badge-size-compact-horizontal-padding, 4px);border-width:var(--kbq-badge-size-compact-border-width, 1px);border-radius:var(--kbq-badge-size-compact-border-radius, 4px)}.kbq-badge.kbq-badge_compact .kbq-badge-caption{padding-left:var(--kbq-badge-size-compact-content-padding, 2px)}.kbq-badge.kbq-badge_compact .kbq-icon_left{margin-right:var(--kbq-badge-size-compact-icon-left-margin-right, 2px)}.kbq-badge.kbq-badge_compact .kbq-icon_right{margin-left:var(--kbq-badge-size-compact-icon-right-margin-left, 2px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqBadge, decorators: [{
             type: Component,
@@ -109,7 +109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '[class.kbq-badge-filled]': '!outline',
                         '[class.kbq-badge-outline]': 'outline',
                         '[class]': 'badgeColor'
-                    }, styles: [".kbq-badge{display:inline-flex;flex-direction:row;justify-content:flex-start;align-items:center;text-align:center;white-space:nowrap;border-style:solid;box-sizing:border-box;padding:var(--kbq-badge-size-normal-vertical-padding, 4px) var(--kbq-badge-size-normal-horizontal-padding, 8px);border-width:var(--kbq-badge-size-normal-border-width, 1px);border-radius:var(--kbq-badge-size-normal-border-radius, 4px)}.kbq-badge .kbq-badge-caption{padding-left:var(--kbq-badge-size-normal-content-padding, 4px)}.kbq-badge .kbq-icon_left{margin-right:var(--kbq-badge-size-normal-icon-left-margin-right, 4px)}.kbq-badge .kbq-icon_right{margin-left:var(--kbq-badge-size-normal-icon-right-margin-left, 4px)}.kbq-badge.kbq-badge_compact{padding:var(--kbq-badge-size-compact-vertical-padding, 0) var(--kbq-badge-size-compact-horizontal-padding, 4px);border-width:var(--kbq-badge-size-compact-border-width, 1px);border-radius:var(--kbq-badge-size-compact-border-radius, 4px)}.kbq-badge.kbq-badge_compact .kbq-badge-caption{padding-left:var(--kbq-badge-size-compact-content-padding, 2px)}.kbq-badge.kbq-badge_compact .kbq-icon_left{margin-right:var(--kbq-badge-size-compact-icon-left-margin-right, 2px)}.kbq-badge.kbq-badge_compact .kbq-icon_right{margin-left:var(--kbq-badge-size-compact-icon-right-margin-left, 2px)}\n"] }]
+                    }, styles: [".kbq-badge{display:inline-flex;flex-direction:row;justify-content:flex-start;align-items:center;height:var(--kbq-badge-size-normal-height, 24px);text-align:center;white-space:nowrap;border-style:solid;box-sizing:border-box;padding-right:var(--kbq-badge-size-normal-horizontal-padding, 8px);padding-left:var(--kbq-badge-size-normal-horizontal-padding, 8px);border-width:var(--kbq-badge-size-normal-border-width, 1px);border-radius:var(--kbq-badge-size-normal-border-radius, 4px)}.kbq-badge .kbq-badge-caption{padding-left:var(--kbq-badge-size-normal-content-padding, 4px)}.kbq-badge .kbq-icon_left{margin-right:var(--kbq-badge-size-normal-icon-left-margin-right, 4px)}.kbq-badge .kbq-icon_right{margin-left:var(--kbq-badge-size-normal-icon-right-margin-left, 4px)}.kbq-badge.kbq-badge_compact{height:var(--kbq-badge-size-compact-height, 16px);padding-right:var(--kbq-badge-size-compact-horizontal-padding, 4px);padding-left:var(--kbq-badge-size-compact-horizontal-padding, 4px);border-width:var(--kbq-badge-size-compact-border-width, 1px);border-radius:var(--kbq-badge-size-compact-border-radius, 4px)}.kbq-badge.kbq-badge_compact .kbq-badge-caption{padding-left:var(--kbq-badge-size-compact-content-padding, 2px)}.kbq-badge.kbq-badge_compact .kbq-icon_left{margin-right:var(--kbq-badge-size-compact-icon-left-margin-right, 2px)}.kbq-badge.kbq-badge_compact .kbq-icon_right{margin-left:var(--kbq-badge-size-compact-icon-right-margin-left, 2px)}\n"] }]
         }], propDecorators: { iconItem: [{
                 type: ContentChild,
                 args: [KbqIconItem]

package/esm2022/button/button.component.mjs

@@ -150,7 +150,7 @@ export class KbqButton extends KbqButtonMixinBase {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqButton, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: KbqButtonCssStyler }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqButton, selector: "[kbq-button]", inputs: { color: "color", tabIndex: "tabIndex", kbqStyle: "kbqStyle", disabled: "disabled" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur()" }, properties: { "attr.disabled": "disabled || null", "class.kbq-disabled": "disabled", "attr.tabIndex": "tabIndex", "class": "kbqStyle" } }, providers: [
             { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqButton }
-        ], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-button-wrapper\" #kbqTitleText (cdkObserveContent)=\"projectContentChanged()\">\n    <ng-content></ng-content>\n</div>\n<div class=\"kbq-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".kbq-button,.kbq-light-button,.kbq-button-icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;height:var(--kbq-button-size-height, 32px);min-height:var(--kbq-button-size-height, 32px);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:var(--kbq-button-size-border-width, 2px) solid transparent;border-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-button::-moz-focus-inner,.kbq-light-button::-moz-focus-inner,.kbq-button-icon::-moz-focus-inner{border:0}.kbq-button:focus,.kbq-light-button:focus,.kbq-button-icon:focus{outline:none}.kbq-disabled.kbq-button,.kbq-disabled.kbq-light-button,.kbq-disabled.kbq-button-icon{cursor:default}.cdk-focused.kbq-button,.cdk-focused.kbq-light-button,.cdk-focused.kbq-button-icon{z-index:1}.kbq-button .kbq-button-wrapper,.kbq-light-button .kbq-button-wrapper,.kbq-button-icon .kbq-button-wrapper{display:flex;align-items:center}.kbq-button .kbq-icon_left,.kbq-light-button .kbq-icon_left,.kbq-button-icon .kbq-icon_left{margin-right:var(--kbq-button-size-content-padding, 8px)}.kbq-button .kbq-icon_right,.kbq-light-button .kbq-icon_right,.kbq-button-icon .kbq-icon_right{margin-left:var(--kbq-button-size-content-padding, 8px)}.kbq-button{padding-left:calc(var(--kbq-button-size-horizontal-padding, 12px) + 4px);padding-right:calc(var(--kbq-button-size-horizontal-padding, 12px) + 4px)}.kbq-button.kbq-button-icon_left{padding-left:var(--kbq-button-size-horizontal-padding, 12px)}.kbq-button.kbq-button-icon_right{padding-right:var(--kbq-button-size-horizontal-padding, 12px)}.kbq-button-icon{padding-left:var(--kbq-button-icon-size-horizontal-padding, 8px);padding-right:var(--kbq-button-icon-size-horizontal-padding, 8px)}.kbq-button-overlay{position:absolute;inset:-2px;border-radius:inherit}\n"], dependencies: [{ kind: "directive", type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-button-wrapper\" #kbqTitleText (cdkObserveContent)=\"projectContentChanged()\">\n    <ng-content></ng-content>\n</div>\n<div class=\"kbq-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".kbq-button,.kbq-light-button,.kbq-button-icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;height:var(--kbq-button-size-height, 32px);min-height:var(--kbq-button-size-height, 32px);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:var(--kbq-button-size-border-width, 2px) solid transparent;border-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-button::-moz-focus-inner,.kbq-light-button::-moz-focus-inner,.kbq-button-icon::-moz-focus-inner{border:0}.kbq-button:focus,.kbq-light-button:focus,.kbq-button-icon:focus{outline:none}.kbq-disabled.kbq-button,.kbq-disabled.kbq-light-button,.kbq-disabled.kbq-button-icon{cursor:default}.cdk-focused.kbq-button,.cdk-focused.kbq-light-button,.cdk-focused.kbq-button-icon{z-index:1}.kbq-button .kbq-button-wrapper,.kbq-light-button .kbq-button-wrapper,.kbq-button-icon .kbq-button-wrapper{display:flex;align-items:center}.kbq-button .kbq-icon_left,.kbq-light-button .kbq-icon_left,.kbq-button-icon .kbq-icon_left{margin-right:var(--kbq-button-size-content-padding, 6px)}.kbq-button .kbq-icon_right,.kbq-light-button .kbq-icon_right,.kbq-button-icon .kbq-icon_right{margin-left:var(--kbq-button-size-content-padding, 6px)}.kbq-button{padding-left:calc(var(--kbq-button-size-horizontal-padding, 12px) + 4px);padding-right:calc(var(--kbq-button-size-horizontal-padding, 12px) + 4px)}.kbq-button.kbq-button-icon_left{padding-left:var(--kbq-button-size-horizontal-padding, 12px)}.kbq-button.kbq-button-icon_right{padding-right:var(--kbq-button-size-horizontal-padding, 12px)}.kbq-button-icon{padding-left:var(--kbq-button-icon-size-horizontal-padding, 8px);padding-right:var(--kbq-button-icon-size-horizontal-padding, 8px)}.kbq-button-overlay{position:absolute;inset:-2px;border-radius:inherit}\n"], dependencies: [{ kind: "directive", type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqButton, decorators: [{
             type: Component,
@@ -163,7 +163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '(blur)': 'onBlur()'
                     }, providers: [
                         { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqButton }
-                    ], template: "<div class=\"kbq-button-wrapper\" #kbqTitleText (cdkObserveContent)=\"projectContentChanged()\">\n    <ng-content></ng-content>\n</div>\n<div class=\"kbq-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".kbq-button,.kbq-light-button,.kbq-button-icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;height:var(--kbq-button-size-height, 32px);min-height:var(--kbq-button-size-height, 32px);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:var(--kbq-button-size-border-width, 2px) solid transparent;border-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-button::-moz-focus-inner,.kbq-light-button::-moz-focus-inner,.kbq-button-icon::-moz-focus-inner{border:0}.kbq-button:focus,.kbq-light-button:focus,.kbq-button-icon:focus{outline:none}.kbq-disabled.kbq-button,.kbq-disabled.kbq-light-button,.kbq-disabled.kbq-button-icon{cursor:default}.cdk-focused.kbq-button,.cdk-focused.kbq-light-button,.cdk-focused.kbq-button-icon{z-index:1}.kbq-button .kbq-button-wrapper,.kbq-light-button .kbq-button-wrapper,.kbq-button-icon .kbq-button-wrapper{display:flex;align-items:center}.kbq-button .kbq-icon_left,.kbq-light-button .kbq-icon_left,.kbq-button-icon .kbq-icon_left{margin-right:var(--kbq-button-size-content-padding, 8px)}.kbq-button .kbq-icon_right,.kbq-light-button .kbq-icon_right,.kbq-button-icon .kbq-icon_right{margin-left:var(--kbq-button-size-content-padding, 8px)}.kbq-button{padding-left:calc(var(--kbq-button-size-horizontal-padding, 12px) + 4px);padding-right:calc(var(--kbq-button-size-horizontal-padding, 12px) + 4px)}.kbq-button.kbq-button-icon_left{padding-left:var(--kbq-button-size-horizontal-padding, 12px)}.kbq-button.kbq-button-icon_right{padding-right:var(--kbq-button-size-horizontal-padding, 12px)}.kbq-button-icon{padding-left:var(--kbq-button-icon-size-horizontal-padding, 8px);padding-right:var(--kbq-button-icon-size-horizontal-padding, 8px)}.kbq-button-overlay{position:absolute;inset:-2px;border-radius:inherit}\n"] }]
+                    ], template: "<div class=\"kbq-button-wrapper\" #kbqTitleText (cdkObserveContent)=\"projectContentChanged()\">\n    <ng-content></ng-content>\n</div>\n<div class=\"kbq-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".kbq-button,.kbq-light-button,.kbq-button-icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;height:var(--kbq-button-size-height, 32px);min-height:var(--kbq-button-size-height, 32px);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:var(--kbq-button-size-border-width, 2px) solid transparent;border-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-button::-moz-focus-inner,.kbq-light-button::-moz-focus-inner,.kbq-button-icon::-moz-focus-inner{border:0}.kbq-button:focus,.kbq-light-button:focus,.kbq-button-icon:focus{outline:none}.kbq-disabled.kbq-button,.kbq-disabled.kbq-light-button,.kbq-disabled.kbq-button-icon{cursor:default}.cdk-focused.kbq-button,.cdk-focused.kbq-light-button,.cdk-focused.kbq-button-icon{z-index:1}.kbq-button .kbq-button-wrapper,.kbq-light-button .kbq-button-wrapper,.kbq-button-icon .kbq-button-wrapper{display:flex;align-items:center}.kbq-button .kbq-icon_left,.kbq-light-button .kbq-icon_left,.kbq-button-icon .kbq-icon_left{margin-right:var(--kbq-button-size-content-padding, 6px)}.kbq-button .kbq-icon_right,.kbq-light-button .kbq-icon_right,.kbq-button-icon .kbq-icon_right{margin-left:var(--kbq-button-size-content-padding, 6px)}.kbq-button{padding-left:calc(var(--kbq-button-size-horizontal-padding, 12px) + 4px);padding-right:calc(var(--kbq-button-size-horizontal-padding, 12px) + 4px)}.kbq-button.kbq-button-icon_left{padding-left:var(--kbq-button-size-horizontal-padding, 12px)}.kbq-button.kbq-button-icon_right{padding-right:var(--kbq-button-size-horizontal-padding, 12px)}.kbq-button-icon{padding-left:var(--kbq-button-icon-size-horizontal-padding, 8px);padding-right:var(--kbq-button-icon-size-horizontal-padding, 8px)}.kbq-button-overlay{position:absolute;inset:-2px;border-radius:inherit}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: KbqButtonCssStyler }], propDecorators: { textElement: [{
                 type: ViewChild,
                 args: ['kbqTitleText', { static: false }]

package/esm2022/button-toggle/button-toggle.component.mjs

@@ -337,7 +337,7 @@ export class KbqButtonToggle {
                 <ng-content></ng-content>
             </div>
         </button>
-    `, isInline: true, styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.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: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){border-bottom-left-radius:0;border-top-left-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){border-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-button-size-border-radius, 8px)}.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){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-button-toggle-group{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;gap:var(--kbq-button-toggle-size-container-content-gap-horizontal, 4px);border-radius:var(--kbq-button-toggle-size-container-border-radius, 8px);padding:var(--kbq-button-toggle-size-container-padding-vertical, 4px) var(--kbq-button-toggle-size-container-padding-horizontal, 4px)}.kbq-button-toggle-group .kbq-button-toggle{display:flex;overflow:hidden;justify-content:flex-start;border-radius:var(--kbq-button-toggle-size-item-border-radius, 4px)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon{border-radius:var(--kbq-button-toggle-size-item-border-radius, 4px);padding:calc(var(--kbq-button-toggle-size-item-padding-vertical, 4px) - 2px) calc(var(--kbq-button-toggle-size-item-padding-horizontal, 8px) - 2px)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-wrapper{width:100%}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper{display:inline-flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%;gap:var(--kbq-button-toggle-size-item-content-gap-horizontal, 4px)}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button-icon{max-width:100%;height:unset;min-height:unset}.kbq-button-toggle_vertical{flex-direction:column}.kbq-button-toggle_vertical .kbq-button-toggle{width:100%}.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button,.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button-icon{width:100%;border-radius:var(--kbq-button-toggle-size-item-border-radius, 4px)}\n"], dependencies: [{ kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i3.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.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: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){border-bottom-left-radius:0;border-top-left-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){border-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-button-size-border-radius, 8px)}.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){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-button-toggle-group{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;gap:var(--kbq-button-toggle-size-container-content-gap-horizontal, 4px);border-radius:var(--kbq-button-toggle-size-container-border-radius, 8px);padding:var(--kbq-button-toggle-size-container-padding-vertical, 4px) var(--kbq-button-toggle-size-container-padding-horizontal, 4px)}.kbq-button-toggle-group .kbq-button-toggle{display:flex;overflow:hidden;justify-content:flex-start;align-items:center;height:var(--kbq-button-toggle-size-item-height, 24px);border-radius:var(--kbq-button-toggle-size-item-border-radius, 4px)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon{border-radius:var(--kbq-button-toggle-size-item-border-radius, 4px);padding:calc(var(--kbq-button-toggle-size-item-padding-vertical, 2px) - 2px) calc(var(--kbq-button-toggle-size-item-padding-horizontal, 8px) - 2px)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-wrapper{width:100%}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper{display:inline-flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;align-items:center;width:100%;gap:var(--kbq-button-toggle-size-item-content-gap-horizontal, 4px)}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button-icon{max-width:100%;height:var(--kbq-button-toggle-size-item-height, 24px)}.kbq-button-toggle_vertical{flex-direction:column}.kbq-button-toggle_vertical .kbq-button-toggle{width:100%}.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button,.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button-icon{width:100%;border-radius:var(--kbq-button-toggle-size-item-border-radius, 4px)}\n"], dependencies: [{ kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i3.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqButtonToggle, decorators: [{
             type: Component,
@@ -358,7 +358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
     `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'kbq-button-toggle',
                         '[class]': '"kbq-button-toggle" + iconType'
-                    }, styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.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: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){border-bottom-left-radius:0;border-top-left-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){border-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-button-size-border-radius, 8px)}.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){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-button-toggle-group{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;gap:var(--kbq-button-toggle-size-container-content-gap-horizontal, 4px);border-radius:var(--kbq-button-toggle-size-container-border-radius, 8px);padding:var(--kbq-button-toggle-size-container-padding-vertical, 4px) var(--kbq-button-toggle-size-container-padding-horizontal, 4px)}.kbq-button-toggle-group .kbq-button-toggle{display:flex;overflow:hidden;justify-content:flex-start;border-radius:var(--kbq-button-toggle-size-item-border-radius, 4px)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon{border-radius:var(--kbq-button-toggle-size-item-border-radius, 4px);padding:calc(var(--kbq-button-toggle-size-item-padding-vertical, 4px) - 2px) calc(var(--kbq-button-toggle-size-item-padding-horizontal, 8px) - 2px)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-wrapper{width:100%}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper{display:inline-flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%;gap:var(--kbq-button-toggle-size-item-content-gap-horizontal, 4px)}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button-icon{max-width:100%;height:unset;min-height:unset}.kbq-button-toggle_vertical{flex-direction:column}.kbq-button-toggle_vertical .kbq-button-toggle{width:100%}.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button,.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button-icon{width:100%;border-radius:var(--kbq-button-toggle-size-item-border-radius, 4px)}\n"] }]
+                    }, styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.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: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){border-bottom-left-radius:0;border-top-left-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){border-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-button-size-border-radius, 8px)}.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){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-button-toggle-group{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;gap:var(--kbq-button-toggle-size-container-content-gap-horizontal, 4px);border-radius:var(--kbq-button-toggle-size-container-border-radius, 8px);padding:var(--kbq-button-toggle-size-container-padding-vertical, 4px) var(--kbq-button-toggle-size-container-padding-horizontal, 4px)}.kbq-button-toggle-group .kbq-button-toggle{display:flex;overflow:hidden;justify-content:flex-start;align-items:center;height:var(--kbq-button-toggle-size-item-height, 24px);border-radius:var(--kbq-button-toggle-size-item-border-radius, 4px)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon{border-radius:var(--kbq-button-toggle-size-item-border-radius, 4px);padding:calc(var(--kbq-button-toggle-size-item-padding-vertical, 2px) - 2px) calc(var(--kbq-button-toggle-size-item-padding-horizontal, 8px) - 2px)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-wrapper{width:100%}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper{display:inline-flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;align-items:center;width:100%;gap:var(--kbq-button-toggle-size-item-content-gap-horizontal, 4px)}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button-icon{max-width:100%;height:var(--kbq-button-toggle-size-item-height, 24px)}.kbq-button-toggle_vertical{flex-direction:column}.kbq-button-toggle_vertical .kbq-button-toggle{width:100%}.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button,.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button-icon{width:100%;border-radius:var(--kbq-button-toggle-size-item-border-radius, 4px)}\n"] }]
         }], ctorParameters: () => [{ type: KbqButtonToggleGroup, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }, { type: i0.ElementRef }], propDecorators: { icons: [{

package/esm2022/checkbox/checkbox.mjs

@@ -255,7 +255,7 @@ export class KbqCheckbox extends KbqCheckboxMixinBase {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqCheckbox, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: KBQ_CHECKBOX_CLICK_ACTION, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqCheckbox, selector: "kbq-checkbox", inputs: { color: "color", tabIndex: "tabIndex", big: "big", id: "id", labelPosition: "labelPosition", name: "name", value: "value", required: "required", checked: "checked", disabled: "disabled", indeterminate: "indeterminate" }, outputs: { change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "id": "id", "attr.id": "id", "attr.disabled": "disabled", "class.kbq-checkbox_big": "big", "class.kbq-indeterminate": "indeterminate", "class.kbq-checked": "checked", "class.kbq-disabled": "disabled", "class.kbq-checkbox_label-before": "labelPosition == \"before\"" }, classAttribute: "kbq-checkbox" }, providers: [KBQ_CHECKBOX_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["kbqCheckbox"], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"inputId\" class=\"kbq-checkbox__layout\" #label>\n    <div class=\"kbq-checkbox__inner-container\"\n         [class.kbq-checkbox__inner-container_no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\">\n        <input #input\n               type=\"checkbox\"\n               class=\"kbq-checkbox-input cdk-visually-hidden\"\n               [id]=\"inputId\"\n               [required]=\"required\"\n               [checked]=\"checked\"\n               [attr.value]=\"value\"\n               [disabled]=\"disabled\"\n               [attr.name]=\"name\"\n               [tabIndex]=\"tabIndex\"\n               [indeterminate]=\"indeterminate\"\n               [attr.aria-checked]=\"getAriaChecked()\"\n               (change)=\"onInteractionEvent($event)\"\n               (click)=\"onInputClick($event)\">\n        <div class=\"kbq-checkbox__frame\">\n            <i class=\"kbq-checkbox-checkmark mc mc-check_16\"></i>\n            <i class=\"kbq-checkbox-mixedmark mc mc-minus_16\"></i>\n        </div>\n    </div>\n\n    <div class=\"kbq-checkbox__text-container\">\n        <span class=\"kbq-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"onLabelTextChange()\">\n            <ng-content></ng-content>\n        </span>\n\n        <ng-content select=\"kbq-hint\"></ng-content>\n    </div>\n</label>\n", styles: [".kbq-checkbox-checkmark,.kbq-checkbox-mixedmark{display:none}.kbq-checkbox__frame{display:flex;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;background-color:transparent;border-radius:var(--kbq-checkbox-size-normal-border-radius, 4px);border-width:var(--kbq-checkbox-size-normal-border-width, 1px);border-style:solid;height:var(--kbq-checkbox-size-normal-width, 16px);width:var(--kbq-checkbox-size-normal-width, 16px)}.kbq-checkbox__layout{position:relative;display:inline-flex;cursor:inherit;padding-left:calc(var(--kbq-checkbox-size-normal-width, 16px) + var(--kbq-checkbox-size-normal-horizontal-content-padding, 8px));vertical-align:top}.kbq-checkbox__inner-container{display:inline-block;position:absolute;top:0;left:0;height:var(--kbq-checkbox-size-normal-width, 16px);width:var(--kbq-checkbox-size-normal-width, 16px)}.kbq-checkbox{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}.kbq-checkbox.kbq-checked .kbq-checkbox-checkmark{display:block}.kbq-checkbox.kbq-checked .kbq-checkbox-mixedmark,.kbq-checkbox.kbq-indeterminate .kbq-checkbox-checkmark{display:none}.kbq-checkbox.kbq-indeterminate .kbq-checkbox-mixedmark{display:block}.kbq-checkbox.kbq-disabled{cursor:default}.kbq-checkbox.kbq-disabled .kbq-checkbox__frame{box-shadow:none}.kbq-checkbox .kbq-hint{margin-top:var(--kbq-checkbox-size-normal-vertical-content-padding, 2px)}.kbq-checkbox.kbq-checkbox_big .kbq-checkbox__layout{padding-left:calc(var(--kbq-checkbox-size-normal-width, 16px) + var(--kbq-checkbox-size-normal-horizontal-content-padding, 8px))}.kbq-checkbox.kbq-checkbox_big .kbq-checkbox__inner-container{top:2px;height:var(--kbq-checkbox-size-big-width, 16px);width:var(--kbq-checkbox-size-big-width, 16px)}.kbq-checkbox.kbq-checkbox_big .kbq-checkbox__frame{border-radius:var(--kbq-checkbox-size-big-border-radius, 4px);border-width:var(--kbq-checkbox-size-big-border-width, 1px);border-style:solid}.kbq-checkbox.kbq-checkbox_big .kbq-hint{margin-top:var(--kbq-checkbox-size-big-vertical-content-padding, 2px)}.kbq-checkbox__text-container{display:flex;flex-direction:column}.kbq-checkbox__inner-container_no-side-margin{margin-left:0;margin-right:0}.kbq-checkbox_label-before .kbq-checkbox__layout{padding-left:0;padding-right:calc(var(--kbq-checkbox-size-normal-width, 16px) + var(--kbq-checkbox-size-normal-horizontal-content-padding, 8px))}.kbq-checkbox_label-before .kbq-checkbox__inner-container{right:0;left:unset}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqCheckbox, selector: "kbq-checkbox", inputs: { color: "color", tabIndex: "tabIndex", big: "big", id: "id", labelPosition: "labelPosition", name: "name", value: "value", required: "required", checked: "checked", disabled: "disabled", indeterminate: "indeterminate" }, outputs: { change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "id": "id", "attr.id": "id", "attr.disabled": "disabled", "class.kbq-checkbox_big": "big", "class.kbq-indeterminate": "indeterminate", "class.kbq-checked": "checked", "class.kbq-disabled": "disabled", "class.kbq-checkbox_label-before": "labelPosition == \"before\"" }, classAttribute: "kbq-checkbox" }, providers: [KBQ_CHECKBOX_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["kbqCheckbox"], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"inputId\" class=\"kbq-checkbox__layout\" #label>\n    <div class=\"kbq-checkbox__inner-container\"\n         [class.kbq-checkbox__inner-container_no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\">\n        <input #input\n               type=\"checkbox\"\n               class=\"kbq-checkbox-input cdk-visually-hidden\"\n               [id]=\"inputId\"\n               [required]=\"required\"\n               [checked]=\"checked\"\n               [attr.value]=\"value\"\n               [disabled]=\"disabled\"\n               [attr.name]=\"name\"\n               [tabIndex]=\"tabIndex\"\n               [indeterminate]=\"indeterminate\"\n               [attr.aria-checked]=\"getAriaChecked()\"\n               (change)=\"onInteractionEvent($event)\"\n               (click)=\"onInputClick($event)\">\n        <div class=\"kbq-checkbox__frame\">\n            <i class=\"kbq-checkbox-checkmark mc mc-check_16\"></i>\n            <i class=\"kbq-checkbox-mixedmark mc mc-minus_16\"></i>\n        </div>\n    </div>\n\n    <div class=\"kbq-checkbox__text-container\">\n        <span class=\"kbq-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"onLabelTextChange()\">\n            <ng-content></ng-content>\n        </span>\n\n        <ng-content select=\"kbq-hint\"></ng-content>\n    </div>\n</label>\n", styles: [".kbq-checkbox-checkmark,.kbq-checkbox-mixedmark{display:none}.kbq-checkbox__frame{display:flex;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;background-color:transparent;border-radius:var(--kbq-checkbox-size-normal-border-radius, 4px);border-width:var(--kbq-checkbox-size-normal-border-width, 1px);border-style:solid;height:var(--kbq-checkbox-size-normal-width, 16px);width:var(--kbq-checkbox-size-normal-width, 16px)}.kbq-checkbox__layout{position:relative;display:inline-flex;cursor:inherit;padding-top:var(--kbq-checkbox-size-normal-paddding-top, );padding-bottom:var(--kbq-checkbox-size-normal-paddding-bottom, );padding-left:calc(var(--kbq-checkbox-size-normal-width, 16px) + var(--kbq-checkbox-size-normal-horizontal-content-padding, 8px));vertical-align:top}.kbq-checkbox__inner-container{display:inline-block;position:absolute;top:var(--kbq-checkbox-size-normal-top, 2px);left:0;height:var(--kbq-checkbox-size-normal-width, 16px);width:var(--kbq-checkbox-size-normal-width, 16px)}.kbq-checkbox{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}.kbq-checkbox.kbq-checked .kbq-checkbox-checkmark{display:block}.kbq-checkbox.kbq-checked .kbq-checkbox-mixedmark,.kbq-checkbox.kbq-indeterminate .kbq-checkbox-checkmark{display:none}.kbq-checkbox.kbq-indeterminate .kbq-checkbox-mixedmark{display:block}.kbq-checkbox.kbq-disabled{cursor:default}.kbq-checkbox.kbq-disabled .kbq-checkbox__frame{box-shadow:none}.kbq-checkbox .kbq-hint{margin-top:var(--kbq-checkbox-size-normal-vertical-content-padding, 2px)}.kbq-checkbox.kbq-checkbox_big .kbq-checkbox__layout{padding-left:calc(var(--kbq-checkbox-size-normal-width, 16px) + var(--kbq-checkbox-size-normal-horizontal-content-padding, 8px))}.kbq-checkbox.kbq-checkbox_big .kbq-checkbox__inner-container{top:var(--kbq-checkbox-size-big-top, 4px);height:var(--kbq-checkbox-size-big-width, 16px);width:var(--kbq-checkbox-size-big-width, 16px)}.kbq-checkbox.kbq-checkbox_big .kbq-checkbox__frame{border-radius:var(--kbq-checkbox-size-big-border-radius, 4px);border-width:var(--kbq-checkbox-size-big-border-width, 1px);border-style:solid}.kbq-checkbox.kbq-checkbox_big .kbq-hint{margin-top:var(--kbq-checkbox-size-big-vertical-content-padding, 2px)}.kbq-checkbox__text-container{display:flex;flex-direction:column}.kbq-checkbox__inner-container_no-side-margin{margin-left:0;margin-right:0}.kbq-checkbox_label-before .kbq-checkbox__layout{padding-left:0;padding-right:calc(var(--kbq-checkbox-size-normal-width, 16px) + var(--kbq-checkbox-size-normal-horizontal-content-padding, 8px))}.kbq-checkbox_label-before .kbq-checkbox__inner-container{right:0;left:unset}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqCheckbox, decorators: [{
             type: Component,
@@ -269,7 +269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '[class.kbq-checked]': 'checked',
                         '[class.kbq-disabled]': 'disabled',
                         '[class.kbq-checkbox_label-before]': 'labelPosition == "before"'
-                    }, providers: [KBQ_CHECKBOX_CONTROL_VALUE_ACCESSOR], inputs: ['color', 'tabIndex'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"inputId\" class=\"kbq-checkbox__layout\" #label>\n    <div class=\"kbq-checkbox__inner-container\"\n         [class.kbq-checkbox__inner-container_no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\">\n        <input #input\n               type=\"checkbox\"\n               class=\"kbq-checkbox-input cdk-visually-hidden\"\n               [id]=\"inputId\"\n               [required]=\"required\"\n               [checked]=\"checked\"\n               [attr.value]=\"value\"\n               [disabled]=\"disabled\"\n               [attr.name]=\"name\"\n               [tabIndex]=\"tabIndex\"\n               [indeterminate]=\"indeterminate\"\n               [attr.aria-checked]=\"getAriaChecked()\"\n               (change)=\"onInteractionEvent($event)\"\n               (click)=\"onInputClick($event)\">\n        <div class=\"kbq-checkbox__frame\">\n            <i class=\"kbq-checkbox-checkmark mc mc-check_16\"></i>\n            <i class=\"kbq-checkbox-mixedmark mc mc-minus_16\"></i>\n        </div>\n    </div>\n\n    <div class=\"kbq-checkbox__text-container\">\n        <span class=\"kbq-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"onLabelTextChange()\">\n            <ng-content></ng-content>\n        </span>\n\n        <ng-content select=\"kbq-hint\"></ng-content>\n    </div>\n</label>\n", styles: [".kbq-checkbox-checkmark,.kbq-checkbox-mixedmark{display:none}.kbq-checkbox__frame{display:flex;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;background-color:transparent;border-radius:var(--kbq-checkbox-size-normal-border-radius, 4px);border-width:var(--kbq-checkbox-size-normal-border-width, 1px);border-style:solid;height:var(--kbq-checkbox-size-normal-width, 16px);width:var(--kbq-checkbox-size-normal-width, 16px)}.kbq-checkbox__layout{position:relative;display:inline-flex;cursor:inherit;padding-left:calc(var(--kbq-checkbox-size-normal-width, 16px) + var(--kbq-checkbox-size-normal-horizontal-content-padding, 8px));vertical-align:top}.kbq-checkbox__inner-container{display:inline-block;position:absolute;top:0;left:0;height:var(--kbq-checkbox-size-normal-width, 16px);width:var(--kbq-checkbox-size-normal-width, 16px)}.kbq-checkbox{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}.kbq-checkbox.kbq-checked .kbq-checkbox-checkmark{display:block}.kbq-checkbox.kbq-checked .kbq-checkbox-mixedmark,.kbq-checkbox.kbq-indeterminate .kbq-checkbox-checkmark{display:none}.kbq-checkbox.kbq-indeterminate .kbq-checkbox-mixedmark{display:block}.kbq-checkbox.kbq-disabled{cursor:default}.kbq-checkbox.kbq-disabled .kbq-checkbox__frame{box-shadow:none}.kbq-checkbox .kbq-hint{margin-top:var(--kbq-checkbox-size-normal-vertical-content-padding, 2px)}.kbq-checkbox.kbq-checkbox_big .kbq-checkbox__layout{padding-left:calc(var(--kbq-checkbox-size-normal-width, 16px) + var(--kbq-checkbox-size-normal-horizontal-content-padding, 8px))}.kbq-checkbox.kbq-checkbox_big .kbq-checkbox__inner-container{top:2px;height:var(--kbq-checkbox-size-big-width, 16px);width:var(--kbq-checkbox-size-big-width, 16px)}.kbq-checkbox.kbq-checkbox_big .kbq-checkbox__frame{border-radius:var(--kbq-checkbox-size-big-border-radius, 4px);border-width:var(--kbq-checkbox-size-big-border-width, 1px);border-style:solid}.kbq-checkbox.kbq-checkbox_big .kbq-hint{margin-top:var(--kbq-checkbox-size-big-vertical-content-padding, 2px)}.kbq-checkbox__text-container{display:flex;flex-direction:column}.kbq-checkbox__inner-container_no-side-margin{margin-left:0;margin-right:0}.kbq-checkbox_label-before .kbq-checkbox__layout{padding-left:0;padding-right:calc(var(--kbq-checkbox-size-normal-width, 16px) + var(--kbq-checkbox-size-normal-horizontal-content-padding, 8px))}.kbq-checkbox_label-before .kbq-checkbox__inner-container{right:0;left:unset}\n"] }]
+                    }, providers: [KBQ_CHECKBOX_CONTROL_VALUE_ACCESSOR], inputs: ['color', 'tabIndex'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"inputId\" class=\"kbq-checkbox__layout\" #label>\n    <div class=\"kbq-checkbox__inner-container\"\n         [class.kbq-checkbox__inner-container_no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\">\n        <input #input\n               type=\"checkbox\"\n               class=\"kbq-checkbox-input cdk-visually-hidden\"\n               [id]=\"inputId\"\n               [required]=\"required\"\n               [checked]=\"checked\"\n               [attr.value]=\"value\"\n               [disabled]=\"disabled\"\n               [attr.name]=\"name\"\n               [tabIndex]=\"tabIndex\"\n               [indeterminate]=\"indeterminate\"\n               [attr.aria-checked]=\"getAriaChecked()\"\n               (change)=\"onInteractionEvent($event)\"\n               (click)=\"onInputClick($event)\">\n        <div class=\"kbq-checkbox__frame\">\n            <i class=\"kbq-checkbox-checkmark mc mc-check_16\"></i>\n            <i class=\"kbq-checkbox-mixedmark mc mc-minus_16\"></i>\n        </div>\n    </div>\n\n    <div class=\"kbq-checkbox__text-container\">\n        <span class=\"kbq-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"onLabelTextChange()\">\n            <ng-content></ng-content>\n        </span>\n\n        <ng-content select=\"kbq-hint\"></ng-content>\n    </div>\n</label>\n", styles: [".kbq-checkbox-checkmark,.kbq-checkbox-mixedmark{display:none}.kbq-checkbox__frame{display:flex;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;background-color:transparent;border-radius:var(--kbq-checkbox-size-normal-border-radius, 4px);border-width:var(--kbq-checkbox-size-normal-border-width, 1px);border-style:solid;height:var(--kbq-checkbox-size-normal-width, 16px);width:var(--kbq-checkbox-size-normal-width, 16px)}.kbq-checkbox__layout{position:relative;display:inline-flex;cursor:inherit;padding-top:var(--kbq-checkbox-size-normal-paddding-top, );padding-bottom:var(--kbq-checkbox-size-normal-paddding-bottom, );padding-left:calc(var(--kbq-checkbox-size-normal-width, 16px) + var(--kbq-checkbox-size-normal-horizontal-content-padding, 8px));vertical-align:top}.kbq-checkbox__inner-container{display:inline-block;position:absolute;top:var(--kbq-checkbox-size-normal-top, 2px);left:0;height:var(--kbq-checkbox-size-normal-width, 16px);width:var(--kbq-checkbox-size-normal-width, 16px)}.kbq-checkbox{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}.kbq-checkbox.kbq-checked .kbq-checkbox-checkmark{display:block}.kbq-checkbox.kbq-checked .kbq-checkbox-mixedmark,.kbq-checkbox.kbq-indeterminate .kbq-checkbox-checkmark{display:none}.kbq-checkbox.kbq-indeterminate .kbq-checkbox-mixedmark{display:block}.kbq-checkbox.kbq-disabled{cursor:default}.kbq-checkbox.kbq-disabled .kbq-checkbox__frame{box-shadow:none}.kbq-checkbox .kbq-hint{margin-top:var(--kbq-checkbox-size-normal-vertical-content-padding, 2px)}.kbq-checkbox.kbq-checkbox_big .kbq-checkbox__layout{padding-left:calc(var(--kbq-checkbox-size-normal-width, 16px) + var(--kbq-checkbox-size-normal-horizontal-content-padding, 8px))}.kbq-checkbox.kbq-checkbox_big .kbq-checkbox__inner-container{top:var(--kbq-checkbox-size-big-top, 4px);height:var(--kbq-checkbox-size-big-width, 16px);width:var(--kbq-checkbox-size-big-width, 16px)}.kbq-checkbox.kbq-checkbox_big .kbq-checkbox__frame{border-radius:var(--kbq-checkbox-size-big-border-radius, 4px);border-width:var(--kbq-checkbox-size-big-border-width, 1px);border-style:solid}.kbq-checkbox.kbq-checkbox_big .kbq-hint{margin-top:var(--kbq-checkbox-size-big-vertical-content-padding, 2px)}.kbq-checkbox__text-container{display:flex;flex-direction:column}.kbq-checkbox__inner-container_no-side-margin{margin-left:0;margin-right:0}.kbq-checkbox_label-before .kbq-checkbox__layout{padding-left:0;padding-right:calc(var(--kbq-checkbox-size-normal-width, 16px) + var(--kbq-checkbox-size-normal-horizontal-content-padding, 8px))}.kbq-checkbox_label-before .kbq-checkbox__inner-container{right:0;left:unset}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
                     type: Optional
                 }, {