@koobiq/components 17.0.3 → 17.2.0

package/badge/badge.component.scss

@@ -8,7 +8,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));
+    height: kbq-css-variable(badge-size-normal-height);
     text-align: center;
     white-space: nowrap;
 
@@ -37,7 +37,7 @@
     }
 
     &.kbq-badge_compact {
-        height: var(--kbq-badge-size-compact-height, map.get($tokens, badge-size-compact-height));
+        height: kbq-css-variable(badge-size-compact-height);
 
         padding-right: kbq-css-variable(badge-size-compact-horizontal-padding);
         padding-left: kbq-css-variable(badge-size-compact-horizontal-padding);

package/button/button.scss

@@ -12,12 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
     @extend %kbq-button-base;
 
     // base padding + compensation (4px) - border-width (2px)
-    padding-left: calc(
-        var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) + 4px
-    );
-    padding-right: calc(
-        var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) + 4px
-    );
+    padding-left: kbq-sum-series-css-variables([button-size-horizontal-padding, 4px]);
+    padding-right: kbq-sum-series-css-variables([button-size-horizontal-padding, 4px]);
 
     &.kbq-button-icon_left {
         padding-left: kbq-css-variable(button-size-horizontal-padding);

package/button-toggle/button-toggle.scss

@@ -29,18 +29,20 @@ $tokens: meta.module-variables(tokens) !default;
 
         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);
-        $outline-width: map.get($tokens, button-toggle-size-item-focus-outline-width);
-
         border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
 
         > .kbq-button,
         > .kbq-button-icon {
             border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
 
-            padding: calc(var(--kbq-button-toggle-size-item-padding-vertical, $padding-vertical) - $outline-width)
-                calc(var(--kbq-button-toggle-size-item-padding-horizontal, $padding-horizontal) - $outline-width);
+            padding: kbq-difference-series-css-variables(
+                    [ button-toggle-size-item-padding-vertical,
+                    button-toggle-size-item-focus-outline-width]
+                )
+                kbq-difference-series-css-variables(
+                    [ button-toggle-size-item-padding-horizontal,
+                    button-toggle-size-item-focus-outline-width]
+                );
 
             & .kbq-button-wrapper {
                 width: 100%;

package/checkbox/checkbox.scss

@@ -47,12 +47,9 @@ $tokens: meta.module-variables(tokens) !default;
 
     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(
-                --kbq-checkbox-size-normal-horizontal-content-padding,
-                map.get($tokens, checkbox-size-normal-horizontal-content-padding)
-            )
+    padding-left: kbq-sum-series-css-variables(
+        [checkbox-size-normal-width,
+        checkbox-size-normal-horizontal-content-padding]
     );
 
     vertical-align: top;
@@ -110,12 +107,9 @@ $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(
-                    --kbq-checkbox-size-normal-horizontal-content-padding,
-                    map.get($tokens, checkbox-size-normal-horizontal-content-padding)
-                )
+        padding-left: kbq-sum-series-css-variables(
+            [ checkbox-size-normal-width,
+            checkbox-size-normal-horizontal-content-padding]
         );
     }
 
@@ -154,12 +148,9 @@ $tokens: meta.module-variables(tokens) !default;
 .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-horizontal-content-padding,
-                    map.get($tokens, checkbox-size-normal-horizontal-content-padding)
-                )
+        padding-right: kbq-sum-series-css-variables(
+            [ checkbox-size-normal-width,
+            checkbox-size-normal-horizontal-content-padding]
         );
     }
 

package/code-block/code-block.scss

@@ -28,10 +28,7 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
         $buttons-margin: calc(32 * 4) + 24px;
 
         padding: calc(kbq-css-variable(code-block-size-header-padding-vertical) - $border-width)
-            calc(
-                var(--kbq-code-block-size-header-padding-right, map.get($tokens, code-block-size-header-padding-right)) +
-                    $buttons-margin
-            )
+            kbq-sum-series-css-variables([code-block-size-header-padding-right, $buttons-margin])
             kbq-css-variable(code-block-size-header-padding-vertical)
             kbq-css-variable(code-block-size-header-padding-left);
 

package/core/pop-up/index.d.ts

@@ -1,3 +1,4 @@
 export * from './constants';
 export * from './pop-up';
+export * from './pop-up-styles';
 export * from './pop-up-trigger';

package/core/pop-up/pop-up-styles.d.ts

@@ -0,0 +1,2 @@
+import { ElementRef } from '@angular/core';
+export declare const applyPopupMargins: (element: ElementRef, name: string, value: string) => void;

package/core/pop-up/pop-up.d.ts

@@ -7,8 +7,13 @@ export declare abstract class KbqPopUp implements OnDestroy {
     private changeDetectorRef;
     header: string | TemplateRef<any>;
     content: string | TemplateRef<any>;
+    context: {
+        $implicit: any;
+    } | null;
     classMap: {};
     warning: boolean;
+    arrow: boolean;
+    offset: number | null;
     visibility: PopUpVisibility;
     visibleChange: EventEmitter<boolean>;
     protected prefix: string;

package/core/styles/_koobiq-theme.scss

@@ -11,7 +11,6 @@
 @use '../../badge/badge-theme' as *;
 @use '../../button/button-theme' as *;
 @use '../../button-toggle/button-toggle-theme' as *;
-@use '../../card/card-theme' as *;
 @use '../../checkbox/checkbox-theme' as *;
 @use '../../code-block/code-block-theme' as *;
 @use '../../datepicker/datepicker-theme' as *;
@@ -65,7 +64,6 @@
     @include kbq-badge-theme($theme);
     @include kbq-button-theme($theme);
     @include kbq-button-toggle-theme($theme);
-    @include kbq-card-theme($theme);
     @include kbq-checkbox-theme($theme);
     @include kbq-code-block-theme($theme);
     @include kbq-datepicker-theme($theme);

package/core/styles/common/_groups.scss

@@ -45,7 +45,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-group-item + .kbq-group-item {
-        margin-left: calc(-1 * var(--kbq-button-size-border-width, #{map.get($tokens, button-size-border-width)}));
+        margin-left: calc(-1 * #{kbq-css-variable(button-size-border-width)});
     }
 
     & > .kbq-group-item:first-child:not(:last-child) {
@@ -108,6 +108,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-group-item + .kbq-group-item {
-        margin-top: calc(-1 * var(--kbq-button-size-border-width, #{map.get($tokens, button-size-border-width)}));
+        margin-top: calc(-1 * #{kbq-css-variable(button-size-border-width)});
     }
 }

package/core/styles/common/_select.scss

@@ -33,9 +33,6 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 
-    $border-width: map.get($tokens, form-field-size-border-width);
-    $height: map.get($tokens, form-field-size-height);
-
     .kbq-select__trigger {
         display: flex;
         box-sizing: border-box;
@@ -43,71 +40,37 @@ $tokens: meta.module-variables(tokens) !default;
 
         cursor: pointer;
 
-        height: calc(
-            var(--kbq-form-field-size-height, $height) - (var(--kbq-form-field-size-border-width, $border-width) * 2)
+        height: kbq-difference-series-css-variables(
+            [form-field-size-height,
+            calc(kbq-css-variable(form-field-size-border-width) * 2)]
         );
     }
 
     .kbq-select__trigger.kbq-select__trigger_single,
     .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty {
         & .kbq-select__matcher {
-            $padding-vertical: map.get($tokens, select-size-single-padding-vertical);
-
-            padding: calc(
-                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
-                )
-                calc(
-                    var(--kbq-select-size-single-padding-right, map.get($tokens, select-size-single-padding-right)) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
-                )
-                calc(
-                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
+            padding: kbq-difference-series-css-variables(
+                    [select-size-single-padding-vertical,
+                    form-field-size-border-width]
                 )
-                calc(
-                    var(--kbq-select-size-single-padding-left, map.get($tokens, select-size-single-padding-left)) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
-                );
+                kbq-difference-series-css-variables([select-size-single-padding-right, form-field-size-border-width])
+                kbq-difference-series-css-variables([select-size-single-padding-vertical, form-field-size-border-width])
+                kbq-difference-series-css-variables([select-size-single-padding-left, form-field-size-border-width]);
         }
     }
 
     .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) {
         & .kbq-select__matcher {
-            $padding-vertical: map.get($tokens, select-size-multiple-padding-vertical);
-
-            padding: calc(
-                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
+            padding: kbq-difference-series-css-variables(
+                    [select-size-multiple-padding-vertical,
+                    form-field-size-border-width]
                 )
-                calc(
-                    var(--kbq-select-size-multiple-padding-right, map.get($tokens, select-size-multiple-padding-right)) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
+                kbq-difference-series-css-variables([select-size-multiple-padding-right, form-field-size-border-width])
+                kbq-difference-series-css-variables(
+                    [select-size-multiple-padding-vertical,
+                    form-field-size-border-width]
                 )
-                calc(
-                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
-                )
-                calc(
-                    var(--kbq-select-size-multiple-padding-left, map.get($tokens, select-size-multiple-padding-left)) - var(
-                            --kbq-form-field-size-border-width,
-                            $border-width
-                        )
-                );
+                kbq-difference-series-css-variables([select-size-multiple-padding-left, form-field-size-border-width]);
 
             .kbq-select__match-container {
                 display: flex;
@@ -118,14 +81,14 @@ $tokens: meta.module-variables(tokens) !default;
                 flex-wrap: wrap;
                 overflow: hidden;
 
-                height: calc(
-                    var(--kbq-form-field-size-height, $height) -
-                        (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+                height: kbq-difference-series-css-variables(
+                    [form-field-size-height,
+                    calc(kbq-css-variable(select-size-multiple-padding-vertical) * 2)]
                 );
 
-                max-height: calc(
-                    var(--kbq-form-field-size-height, $height) -
-                        (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+                max-height: kbq-difference-series-css-variables(
+                    [form-field-size-height,
+                    calc(kbq-css-variable(select-size-multiple-padding-vertical) * 2)]
                 );
 
                 gap: kbq-css-variable(select-size-multiple-content-gap);

package/core/styles/common/_tokens.scss

@@ -45,3 +45,55 @@ $tokens: meta.module-variables(tokens) !default;
     @include kbq-css-font-variable($component, $property, font-feature-settings, '');
     @include kbq-css-font-variable($component, $property, letter-spacing, '');
 }
+
+@function kbq-sum-series-css-variables($variables) {
+    $sum: 0;
+    @each $variable in $variables {
+        @if ($sum == 0) {
+            @if (meta.type-of($variable) == number or meta.type-of($variable) == calculation) {
+                $sum: $variable;
+            } @else {
+                $sum: kbq-css-variable($variable);
+            }
+        } @else {
+            @if (meta.type-of($variable) == number or meta.type-of($variable) == calculation) {
+                $sum: calc($sum + $variable);
+            } @else {
+                $sum: calc($sum + kbq-css-variable($variable));
+            }
+        }
+    }
+    @return $sum;
+}
+
+@function kbq-difference-series-css-variables($variables) {
+    $difference: 0;
+    @each $variable in $variables {
+        @if ($difference == 0) {
+            @if (meta.type-of($variable) == number or meta.type-of($variable) == calculation) {
+                $difference: $variable;
+            } @else {
+                $difference: kbq-css-variable($variable);
+            }
+        } @else {
+            @if (meta.type-of($variable) == number or meta.type-of($variable) == calculation) {
+                $difference: calc($difference - $variable);
+            } @else {
+                $difference: calc($difference - kbq-css-variable($variable));
+            }
+        }
+    }
+    @return $difference;
+}
+
+@function kbq-css-half-difference($outer, $inner, $border: null) {
+    @if $border {
+        @if (meta.type-of($border) == number or meta.type-of($border) == calculation) {
+            @return calc((kbq-css-variable($outer) - kbq-css-variable($inner) - $border * 2) / 2);
+        } @else {
+            @return calc((kbq-css-variable($outer) - kbq-css-variable($inner) - kbq-css-variable($border * 2)) / 2);
+        }
+    } @else {
+        @return calc((kbq-css-variable($outer) - kbq-css-variable($inner)) / 2);
+    }
+}

package/core/styles/theming/_components-theming.scss

@@ -340,29 +340,6 @@
         )
     );
 
-    $card: (
-        error: (
-            vertical-line: map.get($tokens, 'card-#{$scheme}-error-vertical-line'),
-            background: map.get($tokens, 'card-#{$scheme}-error-background'),
-            shadow: map.get($tokens, 'card-#{$scheme}-error-shadow')
-        ),
-        warning: (
-            vertical-line: map.get($tokens, 'card-#{$scheme}-warning-vertical-line'),
-            background: map.get($tokens, 'card-#{$scheme}-warning-background'),
-            shadow: map.get($tokens, 'card-#{$scheme}-warning-shadow')
-        ),
-        success: (
-            vertical-line: map.get($tokens, 'card-#{$scheme}-success-vertical-line'),
-            background: map.get($tokens, 'card-#{$scheme}-success-background'),
-            shadow: map.get($tokens, 'card-#{$scheme}-success-shadow')
-        ),
-        info: (
-            vertical-line: map.get($tokens, 'card-#{$scheme}-info-vertical-line'),
-            background: map.get($tokens, 'card-#{$scheme}-info-background'),
-            shadow: map.get($tokens, 'card-#{$scheme}-info-shadow')
-        )
-    );
-
     $checkbox: (
         theme: (
             default: (
@@ -1759,6 +1736,16 @@
             background: map.get($tokens, 'tooltip-#{$scheme}-contrast-fade-off-background'),
             text: map.get($tokens, 'tooltip-#{$scheme}-contrast-fade-off-text'),
             shadow: map.get($tokens, 'tooltip-#{$scheme}-contrast-fade-off-shadow')
+        ),
+        warning-fade-off: (
+            background: map.get($tokens, 'tooltip-#{$scheme}-warning-fade-off-background'),
+            text: map.get($tokens, 'tooltip-#{$scheme}-warning-fade-off-text'),
+            shadow: map.get($tokens, 'tooltip-#{$scheme}-warning-fade-off-shadow')
+        ),
+        error-fade-off: (
+            background: map.get($tokens, 'tooltip-#{$scheme}-error-fade-off-background'),
+            text: map.get($tokens, 'tooltip-#{$scheme}-error-fade-off-text'),
+            shadow: map.get($tokens, 'tooltip-#{$scheme}-error-fade-off-shadow')
         )
     );
 
@@ -1827,7 +1814,6 @@
         badge: $badge,
         button: $button,
         button-toggle: $button-toggle,
-        card: $card,
         checkbox: $checkbox,
         code-block: $code-block,
         datepicker: $datepicker,

package/core/styles/theming/_scrollbar-theme.scss

@@ -3,18 +3,10 @@
 @use 'sass:meta';
 @use 'sass:map';
 
+@use '../common/tokens' as *;
 @use '../functions/string' as *;
 
 @mixin kbq-scrollbar($tokens) {
-    $border-width: calc(
-        (
-                var(--kbq-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension)) - var(
-                        --kbq-scrollbar-size-thumb-width,
-                        map.get($tokens, scrollbar-size-thumb-width)
-                    )
-            ) / 2
-    );
-
     //firefox
     @supports not selector(::-webkit-scrollbar) {
         scrollbar-width: thin;
@@ -26,32 +18,29 @@
         cursor: default;
 
         &:vertical {
-            width: var(--kbq-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
+            width: kbq-css-variable(scrollbar-size-track-dimension);
         }
 
         &:horizontal {
-            height: var(--kbq-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
+            height: kbq-css-variable(scrollbar-size-track-dimension);
         }
     }
 
     &::-webkit-scrollbar-thumb,
     ::-webkit-scrollbar-thumb {
-        width: var(--kbq-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
+        width: kbq-css-variable(scrollbar-size-thumb-width);
         border-style: solid;
-        border-width: $border-width;
+        border-width: kbq-css-half-difference(scrollbar-size-track-dimension, scrollbar-size-thumb-width);
 
-        border-radius: var(
-            --kbq-scrollbar-size-thumb-inset-border-radius,
-            map.get($tokens, scrollbar-size-thumb-border-radius)
-        );
+        border-radius: kbq-css-variable(scrollbar-size-thumb-border-radius);
 
         // these props are used to set the user-friendly thumb for long content.
         &:vertical {
-            min-height: var(--kbq-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
+            min-height: kbq-css-variable(scrollbar-size-thumb-min-size);
         }
 
         &:horizontal {
-            min-width: var(--kbq-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
+            min-width: kbq-css-variable(scrollbar-size-thumb-min-size);
         }
     }
 

package/datepicker/_datepicker-theme.scss

@@ -66,6 +66,7 @@
         }
 
         &.kbq-disabled {
+            color: kbq-css-variable(states-foreground-disabled, map.get($theme, states, foreground, disabled));
             background: kbq-css-variable(
                 datepicker-cell-disabled-background,
                 map.get($datepicker, cell, disabled, background)

package/datepicker/calendar-header.component.d.ts

@@ -1,14 +1,16 @@
 import { AfterContentInit, EventEmitter } from '@angular/core';
 import { DateAdapter } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
+export type MonthName = {
+    name: string;
+    nameShort: string;
+    value: number;
+    disabled: boolean;
+};
 /** Default header for KbqCalendar */
 export declare class KbqCalendarHeader<D> implements AfterContentInit {
     private readonly adapter;
-    monthNames: {
-        name: string;
-        nameShort: string;
-        value: number;
-    }[];
+    monthNames: MonthName[];
     selectedMonth: number;
     years: {
         name: number;
@@ -46,7 +48,9 @@ export declare class KbqCalendarHeader<D> implements AfterContentInit {
     selectNextMonth(): void;
     private compareDate;
     private updateSelectedValues;
-    private updateYearsArray;
+    private updateSelectionOptions;
+    private updateYearsOptions;
+    private updateMonthOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCalendarHeader<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendarHeader<any>, "kbq-calendar-header", ["kbqCalendarHeader"], { "activeDate": { "alias": "activeDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; }, { "activeDateChange": "activeDateChange"; "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; }, never, never, false, never>;
 }

package/datepicker/calendar.scss

@@ -34,7 +34,6 @@ $tokens: meta.module-variables(tokens) !default;
         box-sizing: border-box;
         height: kbq-css-variable(datepicker-size-grid-content-gap-vertical);
 
-        $horizontal-padding: map.get($tokens, datepicker-size-grid-padding-horizontal);
         // We use an absolutely positioned pseudo-element as the divider line for the table header so we
         // can extend it all the way to the edge of the calendar.
         &::after {
@@ -42,8 +41,8 @@ $tokens: meta.module-variables(tokens) !default;
 
             position: absolute;
             top: 0;
-            left: calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal, #{$horizontal-padding}));
-            right: calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal, #{$horizontal-padding}));
+            left: calc(-1 * #{kbq-css-variable(datepicker-size-grid-padding-horizontal)});
+            right: calc(-1 * #{kbq-css-variable(datepicker-size-grid-padding-horizontal)});
 
             height: kbq-css-variable(datepicker-size-grid-divider-height);
         }

package/datepicker/datepicker-input.directive.d.ts

@@ -143,6 +143,16 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     private getDefaultValue;
     private getTimeStringFromDate;
     private getDateEditMetrics;
+    private isMaxMonth;
+    private isMinMonth;
+    private isMaxYear;
+    private isMinYear;
+    private getMaxDate;
+    private getMinDate;
+    private getMaxMonth;
+    private getMinMonth;
+    private getMaxYear;
+    private getMinYear;
     private incrementDate;
     private getLastDayFor;
     private decrementDate;

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

@@ -339,7 +339,7 @@ export class KbqButtonToggle {
                 <ng-content />
             </div>
         </button>
-    `, isInline: true, 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}.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, 1px))}.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, 1px))}.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 }); }
+    `, isInline: true, 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}.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, 1px))}.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, 1px))}.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) - var(--kbq-button-toggle-size-item-focus-outline-width, 2px)) calc(var(--kbq-button-toggle-size-item-padding-horizontal, 8px) - var(--kbq-button-toggle-size-item-focus-outline-width, 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,
@@ -364,7 +364,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: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}.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, 1px))}.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, 1px))}.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"] }]
+                    }, 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}.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, 1px))}.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, 1px))}.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) - var(--kbq-button-toggle-size-item-focus-outline-width, 2px)) calc(var(--kbq-button-toggle-size-item-padding-horizontal, 8px) - var(--kbq-button-toggle-size-item-focus-outline-width, 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: [{