@koobiq/components 17.0.0-beta.2 → 17.0.0-rc.10

package/dl/dl.scss

@@ -1,21 +1,12 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-dl {
     display: grid;
-    column-gap: var(
-        --kbq-description-list-size-horizontal-content-gap-horizontal,
-        map.get($tokens, description-list-size-horizontal-content-gap-horizontal)
-    );
-    row-gap: var(
-        --kbq-description-list-size-horizontal-gap-vertical,
-        map.get($tokens, description-list-size-horizontal-gap-vertical)
-    );
+    column-gap: kbq-css-variable(description-list-size-horizontal-content-gap-horizontal);
+    row-gap: kbq-css-variable(description-list-size-horizontal-gap-vertical);
 
     grid-template-columns: repeat(4, 1fr);
 
@@ -42,10 +33,7 @@ $tokens: meta.module-variables(tokens) !default;
     &.kbq-dl_vertical {
         grid-template-columns: repeat(1, 1fr);
 
-        row-gap: var(
-            --kbq-description-list-size-vertical-content-gap-vertical,
-            map.get($tokens, description-list-size-vertical-content-gap-vertical)
-        );
+        row-gap: kbq-css-variable(description-list-size-vertical-content-gap-vertical);
 
         .kbq-dt,
         .kbq-dd {
@@ -53,10 +41,7 @@ $tokens: meta.module-variables(tokens) !default;
         }
 
         .kbq-dd {
-            margin-bottom: var(
-                --kbq-description-list-size-vertical-gap-vertical,
-                map.get($tokens, description-list-size-vertical-gap-vertical)
-            );
+            margin-bottom: kbq-css-variable(description-list-size-vertical-gap-vertical);
         }
     }
 }

package/dropdown/_dropdown-theme.scss

@@ -3,50 +3,57 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-dropdown-item-state($component, $style-name) {
+    $state: map.get($component, $style-name);
 
-@mixin kbq-dropdown-item-state($state) {
-    background: map.get($state, container-background);
-    color: map.get($state, text);
+    background: kbq-css-variable(list-#{$style-name}-container-background, map.get($state, container-background));
+    color: kbq-css-variable(list-#{$style-name}-text, map.get($state, text));
 
     .kbq-dropdown-item__caption {
-        color: map.get($state, caption);
+        color: kbq-css-variable(list-#{$style-name}-caption, map.get($state, caption));
     }
 }
 
 @mixin kbq-dropdown-theme($theme) {
     $dropdown: map.get(map.get($theme, components), dropdown);
-    $divider: map.get(map.get($theme, components), divider);
 
     .kbq-dropdown__panel {
-        box-shadow: map.get($dropdown, box-shadow);
-        background: map.get($dropdown, background);
+        box-shadow: kbq-css-variable(dropdown-box-shadow, map.get($dropdown, box-shadow));
+        background: kbq-css-variable(dropdown-background, map.get($dropdown, background));
     }
 
     .kbq-dropdown-item {
-        $dropdown-item: map.get(map.get($theme, components), list-item);
+        $list-item: map.get(map.get($theme, components), list-item);
 
-        @include kbq-dropdown-item-state(map.get($dropdown-item, default));
+        @include kbq-dropdown-item-state($list-item, default);
 
         &.kbq-dropdown-item_highlighted,
         &:hover:not(.kbq-disabled) {
-            @include kbq-dropdown-item-state(map.get($dropdown-item, hover));
+            @include kbq-dropdown-item-state($list-item, states-hover);
         }
 
         &.cdk-keyboard-focused {
-            border-color: map.get(map.get($dropdown-item, focused), focus-outline);
+            border-color: kbq-css-variable(list-focused-focus-outline, map.get($list-item, focused, focus-outline));
         }
 
         &.kbq-selected {
-            @include kbq-dropdown-item-state(map.get($dropdown-item, selected));
+            @include kbq-dropdown-item-state($list-item, states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-dropdown-item-state(map.get($dropdown-item, selected-hover));
+                @include kbq-dropdown-item-state($list-item, states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-dropdown-item-state(map.get($dropdown-item, disabled));
+            @include kbq-dropdown-item-state($list-item, states-disabled);
+        }
+    }
+
+    .kbq-dropdown__group-header {
+        &.kbq-dropdown__group-header_small {
+            color: kbq-css-variable(foreground-contrast-secondary, map.get($theme, foreground, contrast-secondary));
         }
     }
 
@@ -56,22 +63,20 @@
 }
 
 @mixin kbq-dropdown-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-dropdown-item,
     .kbq-dropdown__content {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-text));
-    }
+        @include kbq-typography-css-variables(list, text);
 
-    .kbq-dropdown-item__caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-caption));
+        .kbq-dropdown-item__caption {
+            @include kbq-typography-css-variables(list, caption);
+        }
     }
 
     .kbq-dropdown__group-header {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-header));
+        @include kbq-typography-css-variables(list, header);
 
         &.kbq-dropdown__group-header_small {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-subheading));
+            @include kbq-typography-css-variables(list, subheading);
         }
     }
 }

package/dropdown/dropdown-item.scss

@@ -3,12 +3,11 @@
 
 @use '../core/styles/common';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-dropdown-item {
+    width: 100%;
+
     @include common.user-select(none);
     @include common.kbq-list-item-base();
 
@@ -19,19 +18,13 @@ $tokens: meta.module-variables(tokens) !default;
     text-align: left;
 
     & > .kbq-icon:first-child {
-        $outline-width: map.get($tokens, list-size-container-focus-outline-width);
-        $padding-vertical: map.get($tokens, list-size-container-padding-vertical);
-
         align-self: flex-start;
 
-        margin-top: var(--kbq-list-size-container-padding-vertical, $padding-vertical);
+        margin-top: kbq-css-variable(list-size-container-padding-vertical);
     }
 
     & .kbq-dropdown-item__caption {
-        padding-top: var(
-            --kbq-list-size-container-content-gap-vertical,
-            map.get($tokens, list-size-container-content-gap-vertical)
-        );
+        padding-top: kbq-css-variable(list-size-container-content-gap-vertical);
     }
 }
 

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/dropdown/dropdown.scss

@@ -1,10 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-dropdown-trigger.kbq-button-icon_right.kbq-button-icon_left {
     & .kbq-icon_left {
@@ -23,20 +20,14 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-dropdown__panel {
     margin-top: 2px;
 
-    min-width: var(--kbq-dropdown-size-container-width-min, map.get($tokens, dropdown-size-container-width-min));
-    max-width: var(--kbq-dropdown-size-container-width-max, map.get($tokens, dropdown-size-container-width-max));
+    min-width: kbq-css-variable(dropdown-size-container-width-min);
+    max-width: kbq-css-variable(dropdown-size-container-width-max);
 
-    border-radius: var(
-        --kbq-dropdown-size-container-border-radius, map.get($tokens, dropdown-size-container-border-radius)
-    );
+    border-radius: kbq-css-variable(dropdown-size-container-border-radius);
 
-    padding-top: var(
-        --kbq-dropdown-size-container-padding-vertical, map.get($tokens, dropdown-size-container-padding-vertical)
-    );
+    padding-top: kbq-css-variable(dropdown-size-container-padding-vertical);
 
-    padding-bottom: var(
-        --kbq-dropdown-size-container-padding-vertical, map.get($tokens, dropdown-size-container-padding-vertical)
-    );
+    padding-bottom: kbq-css-variable(dropdown-size-container-padding-vertical);
 
     // Prevent users from interacting with the panel while it's animating. Note that
     // people won't be able to click through it, because the overlay pane will catch the click.

package/ellipsis-center/ellipsis-center.directive.d.ts

@@ -1,3 +1,4 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
 import { ElementRef, OnInit, OnDestroy, NgZone, ViewContainerRef, Renderer2, AfterViewInit } from '@angular/core';
@@ -12,12 +13,12 @@ export declare class KbqEllipsisCenterDirective extends KbqTooltipTrigger implem
     private _kbqEllipsisCenter;
     private resizeSubscription;
     private readonly debounceInterval;
-    constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, renderer: Renderer2);
+    constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, focusMonitor: FocusMonitor, renderer: Renderer2);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private refresh;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEllipsisCenterDirective, [null, null, null, null, null, null, { optional: true; }, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEllipsisCenterDirective, [null, null, null, null, null, null, { optional: true; }, null, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEllipsisCenterDirective, "[kbqEllipsisCenter]", never, { "kbqEllipsisCenter": { "alias": "kbqEllipsisCenter"; "required": false; }; "minVisibleLength": { "alias": "minVisibleLength"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqEllipsisCenterModule {

package/empty-state/_empty-state-theme.scss

@@ -0,0 +1,56 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
+@mixin kbq-empty-state-theme($theme) {
+    $empty-state: map.get($theme, components, empty-state);
+
+    .kbq-empty-state_normal-color {
+        .kbq-empty-state-title {
+            color: kbq-css-variable(empty-state-title, map.get($empty-state, title));
+        }
+
+        .kbq-empty-state-text {
+            color: kbq-css-variable(empty-state-title, map.get($empty-state, title));
+        }
+    }
+
+    .kbq-empty-state_error-color {
+        .kbq-empty-state-title {
+            color: kbq-css-variable(empty-state-title, map.get($theme, foreground, error));
+        }
+
+        .kbq-empty-state-text {
+            color: kbq-css-variable(empty-state-title, map.get($theme, foreground, error));
+        }
+    }
+}
+
+@mixin kbq-empty-state-typography($config) {
+    .kbq-empty-state-title,
+    .kbq-empty-state-text {
+        text-align: center;
+    }
+
+    .kbq-empty-state_normal {
+        .kbq-empty-state-title {
+            @include kbq-typography-css-variables(empty-state, normal-title);
+        }
+
+        .kbq-empty-state-text {
+            @include kbq-typography-css-variables(empty-state, normal-text);
+        }
+    }
+
+    .kbq-empty-state_big {
+        .kbq-empty-state-title {
+            @include kbq-typography-css-variables(empty-state, big-title);
+        }
+
+        .kbq-empty-state-text {
+            @include kbq-typography-css-variables(empty-state, big-text);
+        }
+    }
+}

package/empty-state/empty-state.component.d.ts

@@ -0,0 +1,31 @@
+import { AfterContentInit } from '@angular/core';
+import { KbqIconItem } from '@koobiq/components/icon';
+import * as i0 from "@angular/core";
+export declare class KbqEmptyStateIcon {
+    private icon;
+    constructor(icon: KbqIconItem);
+    setErrorColor(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateIcon, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEmptyStateIcon, "[kbq-empty-state-icon]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqEmptyStateText {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateText, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEmptyStateText, "[kbq-empty-state-text]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqEmptyStateTitle {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEmptyStateTitle, "[kbq-empty-state-title]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqEmptyStateActions {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEmptyStateActions, "[kbq-empty-state-actions]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqEmptyState implements AfterContentInit {
+    errorColor: boolean;
+    big: boolean;
+    alignTop: boolean;
+    icon: KbqEmptyStateIcon | null;
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyState, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqEmptyState, "kbq-empty-state", never, { "errorColor": { "alias": "errorColor"; "required": false; }; "big": { "alias": "big"; "required": false; }; "alignTop": { "alias": "alignTop"; "required": false; }; }, {}, ["icon"], ["[kbq-empty-state-icon]", "[kbq-empty-state-title]", "[kbq-empty-state-text]", "[kbq-empty-state-actions]"], false, never>;
+}

package/empty-state/empty-state.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./empty-state.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/a11y";
+import * as i4 from "@angular/cdk/platform";
+export declare class KbqEmptyStateModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqEmptyStateModule, [typeof i1.KbqEmptyState, typeof i1.KbqEmptyStateIcon, typeof i1.KbqEmptyStateText, typeof i1.KbqEmptyStateTitle, typeof i1.KbqEmptyStateTitle, typeof i1.KbqEmptyStateActions], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqEmptyState, typeof i1.KbqEmptyStateIcon, typeof i1.KbqEmptyStateText, typeof i1.KbqEmptyStateTitle, typeof i1.KbqEmptyStateActions]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqEmptyStateModule>;
+}

package/empty-state/empty-state.scss

@@ -0,0 +1,81 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
+
+.kbq-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    flex: 1;
+
+    &.kbq-empty-state_normal {
+        padding: kbq-css-variable(empty-state-size-normal-padding-top)
+            kbq-css-variable(empty-state-size-normal-padding-horizontal)
+            kbq-css-variable(empty-state-size-normal-padding-bottom);
+
+        & .kbq-empty-state-icon {
+            margin-bottom: kbq-css-variable(empty-state-size-normal-image-margin-bottom);
+        }
+
+        & .kbq-empty-state-text {
+            max-width: kbq-css-variable(empty-state-size-normal-max-width);
+        }
+
+        & .kbq-empty-state-title {
+            max-width: kbq-css-variable(empty-state-size-normal-max-width);
+
+            margin-bottom: kbq-css-variable(empty-state-size-normal-title-margin-bottom);
+        }
+
+        & .kbq-empty-state-actions {
+            max-width: kbq-css-variable(empty-state-size-normal-max-width);
+
+            margin-top: kbq-css-variable(empty-state-size-normal-actions-margin-top);
+        }
+
+        &.kbq-empty-state_align-center.kbq-empty-state_has-icon {
+            margin-bottom: kbq-css-variable(empty-state-size-normal-image-addon-height);
+        }
+    }
+
+    &.kbq-empty-state_big {
+        padding: kbq-css-variable(empty-state-size-big-padding-top)
+            kbq-css-variable(empty-state-size-big-padding-horizontal)
+            kbq-css-variable(empty-state-size-big-padding-bottom);
+
+        & .kbq-empty-state-icon {
+            margin-bottom: kbq-css-variable(empty-state-size-big-image-margin-bottom);
+        }
+
+        & .kbq-empty-state-text {
+            max-width: kbq-css-variable(empty-state-size-big-max-width);
+        }
+
+        & .kbq-empty-state-title {
+            max-width: kbq-css-variable(empty-state-size-big-max-width);
+
+            margin-bottom: kbq-css-variable(empty-state-size-big-title-margin-bottom);
+        }
+
+        & .kbq-empty-state-actions {
+            max-width: kbq-css-variable(empty-state-size-big-max-width);
+
+            margin-top: kbq-css-variable(empty-state-size-big-actions-margin-top);
+        }
+
+        &.kbq-empty-state_align-center.kbq-empty-state_has-icon {
+            margin-bottom: kbq-css-variable(empty-state-size-big-image-addon-height);
+        }
+    }
+
+    &.kbq-empty-state_align-center {
+        justify-content: center;
+    }
+
+    &.kbq-empty-state_align-top {
+        justify-content: flex-start;
+    }
+}

package/empty-state/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/empty-state/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './empty-state.module';
+export * from './empty-state.component';

package/esm2022/alert/alert.component.mjs

@@ -1,7 +1,20 @@
-import { ChangeDetectionStrategy, Component, ContentChild, Directive, ViewEncapsulation } from '@angular/core';
-import { KbqIconItem } from '@koobiq/components/icon';
+import { ChangeDetectionStrategy, Component, ContentChild, Directive, Input, ViewEncapsulation } from '@angular/core';
+import { KbqIcon, KbqIconItem } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
+export var KbqAlertStyles;
+(function (KbqAlertStyles) {
+    KbqAlertStyles["Default"] = "default";
+    KbqAlertStyles["Colored"] = "colored";
+})(KbqAlertStyles || (KbqAlertStyles = {}));
+export var KbqAlertColors;
+(function (KbqAlertColors) {
+    KbqAlertColors["Contrast"] = "contrast";
+    KbqAlertColors["Error"] = "error";
+    KbqAlertColors["Warning"] = "warning";
+    KbqAlertColors["Success"] = "success";
+    KbqAlertColors["Theme"] = "theme";
+})(KbqAlertColors || (KbqAlertColors = {}));
 export class KbqAlertTitle {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqAlertTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqAlertTitle, selector: "[kbq-alert-title]", host: { classAttribute: "kbq-alert__title" }, ngImport: i0 }); }
@@ -42,18 +55,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                 }]
         }] });
 export class KbqAlert {
+    constructor() {
+        this.compact = false;
+        this.alertStyle = KbqAlertStyles.Default;
+        this._alertColor = KbqAlertColors.Contrast;
+    }
+    get alertColor() {
+        return `kbq-alert_${this._alertColor}`;
+    }
+    set alertColor(value) {
+        this._alertColor = value || KbqAlertColors.Contrast;
+    }
+    get isColored() {
+        return this.alertStyle === KbqAlertStyles.Colored;
+    }
+    ngAfterContentInit() {
+        const icon = this.icon || this.iconItem;
+        if (icon) {
+            icon.color = this._alertColor;
+        }
+    }
     /** @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", host: { properties: { "class.kbq-alert_dismissible": "closeButton" }, classAttribute: "kbq-alert" }, queries: [{ propertyName: "iconItem", first: true, predicate: KbqIconItem, 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\" *ngIf=\"iconItem\">\n    <ng-content select=\"[kbq-icon-item]\"></ng-content>\n</div>\n\n<div class=\"kbq-alert__content\">\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__controls\" *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;border-radius:var(--kbq-alert-size-container-border-radius, 12px);min-width:var(--kbq-alert-size-container-min-width, );min-height:calc(var(--kbq-alert-size-container-min-height, 48px) - var(--kbq-alert-size-container-padding-vertical, 16px) * 2);padding:var(--kbq-alert-size-container-padding-vertical, 16px) var(--kbq-alert-size-container-padding-horizontal, 20px)}.kbq-alert__icon{margin-right:var(--kbq-alert-size-container-content-gap-horizontal, 12px)}.kbq-alert__title{margin-bottom:var(--kbq-alert-size-container-content-gap-vertical, 4px)}.kbq-alert__controls{margin-top:var(--kbq-alert-size-container-content-gap-vertical, 4px);padding-top:var(--kbq-alert-size-button-stack-content-padding-top, 8px)}.kbq-alert__controls .kbq-button{margin-right:var(--kbq-alert-size-button-stack-content-content-gap-horizontal, 4px)}.kbq-alert__controls .kbq-link{margin-right:16px}.kbq-alert__content{display:flex;flex-direction:column;flex:1;justify-content:center}.kbq-alert__close-button{margin-left:var(--kbq-alert-size-container-content-gap-horizontal, 12px)}.kbq-alert_dismissible .kbq-alert__close-button{margin-top:var(--kbq-alert-size-close-button-margin-top, -8px);margin-right:var(--kbq-alert-size-close-button-margin-right, -12px)}\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,
             args: [{ selector: 'kbq-alert', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-alert',
+                        '[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'
-                    }, template: "<div class=\"kbq-alert__icon\" *ngIf=\"iconItem\">\n    <ng-content select=\"[kbq-icon-item]\"></ng-content>\n</div>\n\n<div class=\"kbq-alert__content\">\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__controls\" *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;border-radius:var(--kbq-alert-size-container-border-radius, 12px);min-width:var(--kbq-alert-size-container-min-width, );min-height:calc(var(--kbq-alert-size-container-min-height, 48px) - var(--kbq-alert-size-container-padding-vertical, 16px) * 2);padding:var(--kbq-alert-size-container-padding-vertical, 16px) var(--kbq-alert-size-container-padding-horizontal, 20px)}.kbq-alert__icon{margin-right:var(--kbq-alert-size-container-content-gap-horizontal, 12px)}.kbq-alert__title{margin-bottom:var(--kbq-alert-size-container-content-gap-vertical, 4px)}.kbq-alert__controls{margin-top:var(--kbq-alert-size-container-content-gap-vertical, 4px);padding-top:var(--kbq-alert-size-button-stack-content-padding-top, 8px)}.kbq-alert__controls .kbq-button{margin-right:var(--kbq-alert-size-button-stack-content-content-gap-horizontal, 4px)}.kbq-alert__controls .kbq-link{margin-right:16px}.kbq-alert__content{display:flex;flex-direction:column;flex:1;justify-content:center}.kbq-alert__close-button{margin-left:var(--kbq-alert-size-container-content-gap-horizontal, 12px)}.kbq-alert_dismissible .kbq-alert__close-button{margin-top:var(--kbq-alert-size-close-button-margin-top, -8px);margin-right:var(--kbq-alert-size-close-button-margin-right, -12px)}\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]
+            }], icon: [{
+                type: ContentChild,
+                args: [KbqIcon]
             }], title: [{
                 type: ContentChild,
                 args: [KbqAlertTitle]
@@ -63,5 +104,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
             }], closeButton: [{
                 type: ContentChild,
                 args: [KbqAlertCloseButton]
+            }], compact: [{
+                type: Input
+            }], alertStyle: [{
+                type: Input
+            }], alertColor: [{
+                type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tcG9uZW50cy9hbGVydC9hbGVydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21wb25lbnRzL2FsZXJ0L2FsZXJ0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixTQUFTLEVBQ1QsaUJBQWlCLEVBQ3BCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQzs7O0FBU3RELE1BQU0sT0FBTyxhQUFhO2lJQUFiLGFBQWE7cUhBQWIsYUFBYTs7MkZBQWIsYUFBYTtrQkFOekIsU0FBUzttQkFBQztvQkFDUCxRQUFRLEVBQUUsbUJBQW1CO29CQUM3QixJQUFJLEVBQUU7d0JBQ0YsS0FBSyxFQUFFLGtCQUFrQjtxQkFDNUI7aUJBQ0o7O0FBU0QsTUFBTSxPQUFPLG1CQUFtQjtpSUFBbkIsbUJBQW1CO3FIQUFuQixtQkFBbUI7OzJGQUFuQixtQkFBbUI7a0JBTi9CLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLDBCQUEwQjtvQkFDcEMsSUFBSSxFQUFFO3dCQUNGLEtBQUssRUFBRSx3QkFBd0I7cUJBQ2xDO2lCQUNKOztBQVNELE1BQU0sT0FBTyxlQUFlO2lJQUFmLGVBQWU7cUhBQWYsZUFBZTs7MkZBQWYsZUFBZTtrQkFOM0IsU0FBUzttQkFBQztvQkFDUCxRQUFRLEVBQUUscUJBQXFCO29CQUMvQixJQUFJLEVBQUU7d0JBQ0YsS0FBSyxFQUFFLG1CQUFtQjtxQkFDN0I7aUJBQ0o7O0FBY0QsTUFBTSxPQUFPLFFBQVE7aUlBQVIsUUFBUTtxSEFBUixRQUFRLDRMQUNILFdBQVcsd0VBQ1gsYUFBYSwwRUFDYixlQUFlLDhFQUNmLG1CQUFtQixnRENqRHJDLG1sQkFtQkE7OzJGRDBCYSxRQUFRO2tCQVhwQixTQUFTOytCQUNJLFdBQVcsbUJBR0osdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSSxRQUMvQjt3QkFDRixLQUFLLEVBQUUsV0FBVzt3QkFDbEIsK0JBQStCLEVBQUUsYUFBYTtxQkFDakQ7OEJBRzBCLFFBQVE7c0JBQWxDLFlBQVk7dUJBQUMsV0FBVztnQkFDSSxLQUFLO3NCQUFqQyxZQUFZO3VCQUFDLGFBQWE7Z0JBQ0ksT0FBTztzQkFBckMsWUFBWTt1QkFBQyxlQUFlO2dCQUNNLFdBQVc7c0JBQTdDLFlBQVk7dUJBQUMsbUJBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgQ29udGVudENoaWxkLFxuICAgIERpcmVjdGl2ZSxcbiAgICBWaWV3RW5jYXBzdWxhdGlvblxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEticUljb25JdGVtIH0gZnJvbSAnQGtvb2JpcS9jb21wb25lbnRzL2ljb24nO1xuXG5cbkBEaXJlY3RpdmUoe1xuICAgIHNlbGVjdG9yOiAnW2ticS1hbGVydC10aXRsZV0nLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICdrYnEtYWxlcnRfX3RpdGxlJ1xuICAgIH1cbn0pXG5leHBvcnQgY2xhc3MgS2JxQWxlcnRUaXRsZSB7fVxuXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1trYnEtYWxlcnQtY2xvc2UtYnV0dG9uXScsXG4gICAgaG9zdDoge1xuICAgICAgICBjbGFzczogJ2ticS1hbGVydC1jbG9zZS1idXR0b24nXG4gICAgfVxufSlcbmV4cG9ydCBjbGFzcyBLYnFBbGVydENsb3NlQnV0dG9uIHt9XG5cbkBEaXJlY3RpdmUoe1xuICAgIHNlbGVjdG9yOiAnW2ticS1hbGVydC1jb250cm9sXScsXG4gICAgaG9zdDoge1xuICAgICAgICBjbGFzczogJ2ticS1hbGVydC1jb250cm9sJ1xuICAgIH1cbn0pXG5leHBvcnQgY2xhc3MgS2JxQWxlcnRDb250cm9sIHt9XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAna2JxLWFsZXJ0JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vYWxlcnQuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWydhbGVydC5jb21wb25lbnQuc2NzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgaG9zdDoge1xuICAgICAgICBjbGFzczogJ2ticS1hbGVydCcsXG4gICAgICAgICdbY2xhc3Mua2JxLWFsZXJ0X2Rpc21pc3NpYmxlXSc6ICdjbG9zZUJ1dHRvbidcbiAgICB9XG59KVxuZXhwb3J0IGNsYXNzIEticUFsZXJ0IHtcbiAgICBAQ29udGVudENoaWxkKEticUljb25JdGVtKSBpY29uSXRlbTogS2JxSWNvbkl0ZW07XG4gICAgQENvbnRlbnRDaGlsZChLYnFBbGVydFRpdGxlKSB0aXRsZTogS2JxQWxlcnRUaXRsZTtcbiAgICBAQ29udGVudENoaWxkKEticUFsZXJ0Q29udHJvbCkgY29udHJvbDogS2JxQWxlcnRDb250cm9sO1xuICAgIEBDb250ZW50Q2hpbGQoS2JxQWxlcnRDbG9zZUJ1dHRvbikgY2xvc2VCdXR0b246IEticUFsZXJ0Q2xvc2VCdXR0b247XG59XG4iLCI8ZGl2IGNsYXNzPVwia2JxLWFsZXJ0X19pY29uXCIgKm5nSWY9XCJpY29uSXRlbVwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltrYnEtaWNvbi1pdGVtXVwiPjwvbmctY29udGVudD5cbjwvZGl2PlxuXG48ZGl2IGNsYXNzPVwia2JxLWFsZXJ0X19jb250ZW50XCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2ticS1hbGVydC10aXRsZV1cIj48L25nLWNvbnRlbnQ+XG5cbiAgICA8ZGl2IGNsYXNzPVwia2JxLWFsZXJ0X190ZXh0XCI+XG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJrYnEtYWxlcnRfX2NvbnRyb2xzXCIgKm5nSWY9XCJjb250cm9sXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltrYnEtYWxlcnQtY29udHJvbF1cIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG48L2Rpdj5cblxuPGRpdiBjbGFzcz1cImticS1hbGVydF9fY2xvc2UtYnV0dG9uXCIgW2hpZGRlbl09XCIhY2xvc2VCdXR0b25cIj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJba2JxLWFsZXJ0LWNsb3NlLWJ1dHRvbl1cIj48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tcG9uZW50cy9hbGVydC9hbGVydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21wb25lbnRzL2FsZXJ0L2FsZXJ0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixTQUFTLEVBQ1QsS0FBSyxFQUNMLGlCQUFpQixFQUNwQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHlCQUF5QixDQUFDOzs7QUFHL0QsTUFBTSxDQUFOLElBQVksY0FHWDtBQUhELFdBQVksY0FBYztJQUN0QixxQ0FBbUIsQ0FBQTtJQUNuQixxQ0FBbUIsQ0FBQTtBQUN2QixDQUFDLEVBSFcsY0FBYyxLQUFkLGNBQWMsUUFHekI7QUFFRCxNQUFNLENBQU4sSUFBWSxjQU1YO0FBTkQsV0FBWSxjQUFjO0lBQ3RCLHVDQUFxQixDQUFBO0lBQ3JCLGlDQUFlLENBQUE7SUFDZixxQ0FBbUIsQ0FBQTtJQUNuQixxQ0FBbUIsQ0FBQTtJQUNuQixpQ0FBZSxDQUFBO0FBQ25CLENBQUMsRUFOVyxjQUFjLEtBQWQsY0FBYyxRQU16QjtBQVFELE1BQU0sT0FBTyxhQUFhO2lJQUFiLGFBQWE7cUhBQWIsYUFBYTs7MkZBQWIsYUFBYTtrQkFOekIsU0FBUzttQkFBQztvQkFDUCxRQUFRLEVBQUUsbUJBQW1CO29CQUM3QixJQUFJLEVBQUU7d0JBQ0YsS0FBSyxFQUFFLGtCQUFrQjtxQkFDNUI7aUJBQ0o7O0FBU0QsTUFBTSxPQUFPLG1CQUFtQjtpSUFBbkIsbUJBQW1CO3FIQUFuQixtQkFBbUI7OzJGQUFuQixtQkFBbUI7a0JBTi9CLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLDBCQUEwQjtvQkFDcEMsSUFBSSxFQUFFO3dCQUNGLEtBQUssRUFBRSx3QkFBd0I7cUJBQ2xDO2lCQUNKOztBQVNELE1BQU0sT0FBTyxlQUFlO2lJQUFmLGVBQWU7cUhBQWYsZUFBZTs7MkZBQWYsZUFBZTtrQkFOM0IsU0FBUzttQkFBQztvQkFDUCxRQUFRLEVBQUUscUJBQXFCO29CQUMvQixJQUFJLEVBQUU7d0JBQ0YsS0FBSyxFQUFFLG1CQUFtQjtxQkFDN0I7aUJBQ0o7O0FBbUJELE1BQU0sT0FBTyxRQUFRO0lBaEJyQjtRQXVCYSxZQUFPLEdBQVksS0FBSyxDQUFDO1FBQ3pCLGVBQVUsR0FBNEIsY0FBYyxDQUFDLE9BQU8sQ0FBQztRQVc5RCxnQkFBVyxHQUE0QixjQUFjLENBQUMsUUFBUSxDQUFDO0tBYTFFO0lBdEJHLElBQ0ksVUFBVTtRQUNWLE9BQU8sYUFBYSxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDM0MsQ0FBQztJQUVELElBQUksVUFBVSxDQUFDLEtBQThCO1FBQ3pDLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxJQUFJLGNBQWMsQ0FBQyxRQUFRLENBQUM7SUFDeEQsQ0FBQztJQUlELElBQUksU0FBUztRQUNULE9BQU8sSUFBSSxDQUFDLFVBQVUsS0FBSyxjQUFjLENBQUMsT0FBTyxDQUFBO0lBQ3JELENBQUM7SUFFRCxrQkFBa0I7UUFDZCxNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUM7UUFFeEMsSUFBSSxJQUFJLEVBQUUsQ0FBQztZQUNQLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQztRQUNsQyxDQUFDO0lBQ0wsQ0FBQztpSUEvQlEsUUFBUTtxSEFBUixRQUFRLG9jQUNILFdBQVcsdUVBQ1gsT0FBTyx3RUFDUCxhQUFhLDBFQUNiLGVBQWUsOEVBQ2YsbUJBQW1CLGdEQ3RFckMsNnJCQW1CQTs7MkZEOENhLFFBQVE7a0JBaEJwQixTQUFTOytCQUNJLFdBQVcsbUJBR0osdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSSxRQUMvQjt3QkFDRixLQUFLLEVBQUUsV0FBVzt3QkFDbEIsU0FBUyxFQUFFLFlBQVk7d0JBQ3ZCLDBCQUEwQixFQUFFLFVBQVU7d0JBQ3RDLDJCQUEyQixFQUFFLFNBQVM7d0JBQ3RDLDJCQUEyQixFQUFFLFlBQVk7d0JBQ3pDLDJCQUEyQixFQUFFLFdBQVc7d0JBQ3hDLCtCQUErQixFQUFFLGFBQWE7cUJBQ2pEOzhCQUcwQixRQUFRO3NCQUFsQyxZQUFZO3VCQUFDLFdBQVc7Z0JBQ0YsSUFBSTtzQkFBMUIsWUFBWTt1QkFBQyxPQUFPO2dCQUNRLEtBQUs7c0JBQWpDLFlBQVk7dUJBQUMsYUFBYTtnQkFDSSxPQUFPO3NCQUFyQyxZQUFZO3VCQUFDLGVBQWU7Z0JBQ00sV0FBVztzQkFBN0MsWUFBWTt1QkFBQyxtQkFBbUI7Z0JBRXhCLE9BQU87c0JBQWYsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUdGLFVBQVU7c0JBRGIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQWZ0ZXJDb250ZW50SW5pdCxcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgQ29udGVudENoaWxkLFxuICAgIERpcmVjdGl2ZSxcbiAgICBJbnB1dCxcbiAgICBWaWV3RW5jYXBzdWxhdGlvblxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEticUljb24sIEticUljb25JdGVtIH0gZnJvbSAnQGtvb2JpcS9jb21wb25lbnRzL2ljb24nO1xuXG5cbmV4cG9ydCBlbnVtIEticUFsZXJ0U3R5bGVzIHtcbiAgICBEZWZhdWx0ID0gJ2RlZmF1bHQnLFxuICAgIENvbG9yZWQgPSAnY29sb3JlZCdcbn1cblxuZXhwb3J0IGVudW0gS2JxQWxlcnRDb2xvcnMge1xuICAgIENvbnRyYXN0ID0gJ2NvbnRyYXN0JyxcbiAgICBFcnJvciA9ICdlcnJvcicsXG4gICAgV2FybmluZyA9ICd3YXJuaW5nJyxcbiAgICBTdWNjZXNzID0gJ3N1Y2Nlc3MnLFxuICAgIFRoZW1lID0gJ3RoZW1lJ1xufVxuXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1trYnEtYWxlcnQtdGl0bGVdJyxcbiAgICBob3N0OiB7XG4gICAgICAgIGNsYXNzOiAna2JxLWFsZXJ0X190aXRsZSdcbiAgICB9XG59KVxuZXhwb3J0IGNsYXNzIEticUFsZXJ0VGl0bGUge31cblxuQERpcmVjdGl2ZSh7XG4gICAgc2VsZWN0b3I6ICdba2JxLWFsZXJ0LWNsb3NlLWJ1dHRvbl0nLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICdrYnEtYWxlcnQtY2xvc2UtYnV0dG9uJ1xuICAgIH1cbn0pXG5leHBvcnQgY2xhc3MgS2JxQWxlcnRDbG9zZUJ1dHRvbiB7fVxuXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1trYnEtYWxlcnQtY29udHJvbF0nLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICdrYnEtYWxlcnQtY29udHJvbCdcbiAgICB9XG59KVxuZXhwb3J0IGNsYXNzIEticUFsZXJ0Q29udHJvbCB7fVxuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2ticS1hbGVydCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2FsZXJ0LmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnYWxlcnQuY29tcG9uZW50LnNjc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICdrYnEtYWxlcnQnLFxuICAgICAgICAnW2NsYXNzXSc6ICdhbGVydENvbG9yJyxcbiAgICAgICAgJ1tjbGFzcy5rYnEtYWxlcnRfbm9ybWFsXSc6ICchY29tcGFjdCcsXG4gICAgICAgICdbY2xhc3Mua2JxLWFsZXJ0X2NvbXBhY3RdJzogJ2NvbXBhY3QnLFxuICAgICAgICAnW2NsYXNzLmticS1hbGVydF9kZWZhdWx0XSc6ICchaXNDb2xvcmVkJyxcbiAgICAgICAgJ1tjbGFzcy5rYnEtYWxlcnRfY29sb3JlZF0nOiAnaXNDb2xvcmVkJyxcbiAgICAgICAgJ1tjbGFzcy5rYnEtYWxlcnRfZGlzbWlzc2libGVdJzogJ2Nsb3NlQnV0dG9uJ1xuICAgIH1cbn0pXG5leHBvcnQgY2xhc3MgS2JxQWxlcnQgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcbiAgICBAQ29udGVudENoaWxkKEticUljb25JdGVtKSBpY29uSXRlbTogS2JxSWNvbkl0ZW07XG4gICAgQENvbnRlbnRDaGlsZChLYnFJY29uKSBpY29uOiBLYnFJY29uO1xuICAgIEBDb250ZW50Q2hpbGQoS2JxQWxlcnRUaXRsZSkgdGl0bGU6IEticUFsZXJ0VGl0bGU7XG4gICAgQENvbnRlbnRDaGlsZChLYnFBbGVydENvbnRyb2wpIGNvbnRyb2w6IEticUFsZXJ0Q29udHJvbDtcbiAgICBAQ29udGVudENoaWxkKEticUFsZXJ0Q2xvc2VCdXR0b24pIGNsb3NlQnV0dG9uOiBLYnFBbGVydENsb3NlQnV0dG9uO1xuXG4gICAgQElucHV0KCkgY29tcGFjdDogYm9vbGVhbiA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIGFsZXJ0U3R5bGU6IEticUFsZXJ0U3R5bGVzIHwgc3RyaW5nID0gS2JxQWxlcnRTdHlsZXMuRGVmYXVsdDtcblxuICAgIEBJbnB1dCgpXG4gICAgZ2V0IGFsZXJ0Q29sb3IoKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIGBrYnEtYWxlcnRfJHt0aGlzLl9hbGVydENvbG9yfWA7XG4gICAgfVxuXG4gICAgc2V0IGFsZXJ0Q29sb3IodmFsdWU6IHN0cmluZyB8IEticUFsZXJ0Q29sb3JzKSB7XG4gICAgICAgIHRoaXMuX2FsZXJ0Q29sb3IgPSB2YWx1ZSB8fCBLYnFBbGVydENvbG9ycy5Db250cmFzdDtcbiAgICB9XG5cbiAgICBwcml2YXRlIF9hbGVydENvbG9yOiBzdHJpbmcgfCBLYnFBbGVydENvbG9ycyA9IEticUFsZXJ0Q29sb3JzLkNvbnRyYXN0O1xuXG4gICAgZ2V0IGlzQ29sb3JlZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuYWxlcnRTdHlsZSA9PT0gS2JxQWxlcnRTdHlsZXMuQ29sb3JlZFxuICAgIH1cblxuICAgIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgY29uc3QgaWNvbiA9IHRoaXMuaWNvbiB8fCB0aGlzLmljb25JdGVtO1xuXG4gICAgICAgIGlmIChpY29uKSB7XG4gICAgICAgICAgICBpY29uLmNvbG9yID0gdGhpcy5fYWxlcnRDb2xvcjtcbiAgICAgICAgfVxuICAgIH1cbn1cblxuIiwiPGRpdiBjbGFzcz1cImticS1hbGVydF9faWNvblwiIFtjbGFzcy5rYnEtYWxlcnRfX2ljb25fdGl0bGVdPVwidGl0bGVcIiAqbmdJZj1cImljb25JdGVtIHx8IGljb25cIj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJba2JxLWljb24taXRlbV0sW2ticS1pY29uXVwiPjwvbmctY29udGVudD5cbjwvZGl2PlxuXG48ZGl2IGNsYXNzPVwia2JxLWFsZXJ0X19jb250ZW50XCIgW2NsYXNzLmticS1hbGVydF9fY29udGVudF90aXRsZV09XCJ0aXRsZVwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltrYnEtYWxlcnQtdGl0bGVdXCI+PC9uZy1jb250ZW50PlxuXG4gICAgPGRpdiBjbGFzcz1cImticS1hbGVydF9fdGV4dFwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2IGNsYXNzPVwia2JxLWFsZXJ0X19idXR0b24tc3RhY2tcIiAqbmdJZj1cImNvbnRyb2xcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2ticS1hbGVydC1jb250cm9sXVwiPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuXG48ZGl2IGNsYXNzPVwia2JxLWFsZXJ0X19jbG9zZS1idXR0b25cIiBbaGlkZGVuXT1cIiFjbG9zZUJ1dHRvblwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltrYnEtYWxlcnQtY2xvc2UtYnV0dG9uXVwiPjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19

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]