@koobiq/components 16.0.0-beta.6 → 16.0.0-beta.7

package/dl/_dl-theme.scss

@@ -21,65 +21,11 @@
 
     .kbq-dl {
         & .kbq-dt {
-            @include kbq-typography-level-to-styles(
-                $config,
-                map.get($tokens, description-list-font-default-horizontal-dt)
-            );
+            @include kbq-typography-level-to-styles($config, map.get($tokens, description-list-font-term));
         }
 
         & .kbq-dd {
-            @include kbq-typography-level-to-styles(
-                $config,
-                map.get($tokens, description-list-font-default-horizontal-dd)
-            );
-        }
-
-        &.kbq-dl_small {
-            & .kbq-dt {
-                @include kbq-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, description-list-font-small-horizontal-dt)
-                );
-            }
-
-            & .kbq-dd {
-                @include kbq-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, description-list-font-small-horizontal-dd)
-                );
-            }
-        }
-    }
-
-    .kbq-dl.kbq-dl_vertical {
-        & .kbq-dt {
-            @include kbq-typography-level-to-styles(
-                $config,
-                map.get($tokens, description-list-font-default-vertical-dt)
-            );
-        }
-
-        & .kbq-dd {
-            @include kbq-typography-level-to-styles(
-                $config,
-                map.get($tokens, description-list-font-default-vertical-dd)
-            );
-        }
-
-        &.kbq-dl_small {
-            & .kbq-dt {
-                @include kbq-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, description-list-font-small-vertical-dt)
-                );
-            }
-
-            & .kbq-dd {
-                @include kbq-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, description-list-font-small-vertical-dd)
-                );
-            }
+            @include kbq-typography-level-to-styles($config, map.get($tokens, description-list-font-description));
         }
     }
 }

package/dl/dl.component.d.ts

@@ -5,7 +5,6 @@ export declare class KbqDlComponent implements AfterContentInit, OnDestroy {
     protected elementRef: ElementRef;
     minWidth: number;
     wide: boolean;
-    small: boolean;
     vertical: boolean | null;
     readonly resizeStream: Subject<Event>;
     private readonly resizeDebounceInterval;
@@ -15,7 +14,7 @@ export declare class KbqDlComponent implements AfterContentInit, OnDestroy {
     ngOnDestroy(): void;
     updateState: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDlComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDlComponent, "kbq-dl", never, { "minWidth": { "alias": "minWidth"; "required": false; }; "wide": { "alias": "wide"; "required": false; }; "small": { "alias": "small"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDlComponent, "kbq-dl", never, { "minWidth": { "alias": "minWidth"; "required": false; }; "wide": { "alias": "wide"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 export declare class KbqDtComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDtComponent, never>;

package/dl/dl.scss

@@ -9,37 +9,22 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-dl {
     display: grid;
     column-gap: var(
-        --kbq-description-list-size-default-horizontal-column-gap,
-        map.get($tokens, description-list-size-default-horizontal-column-gap)
+        --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-default-horizontal-row-gap,
-        map.get($tokens, description-list-size-default-horizontal-row-gap)
+        --kbq-description-list-size-horizontal-gap-vertical,
+        map.get($tokens, description-list-size-horizontal-gap-vertical)
     );
 
     grid-template-columns: repeat(4, 1fr);
 
     .kbq-dt {
-        grid-column: var(
-            --kbq-description-list-size-dt-grid-column, map.get($tokens, description-list-size-dt-grid-column)
-        );
+        grid-column: 1;
     }
 
     .kbq-dd {
-        grid-column: var(
-            --kbq-description-list-size-dd-grid-column, map.get($tokens, description-list-size-dd-grid-column)
-        );
-    }
-
-    &.kbq-dl_small {
-        column-gap: var(
-            --kbq-description-list-size-small-horizontal-column-gap,
-            map.get($tokens, description-list-size-small-horizontal-column-gap)
-        );
-        row-gap: var(
-            --kbq-description-list-size-small-horizontal-row-gap,
-            map.get($tokens, description-list-size-small-horizontal-row-gap)
-        );
+        grid-column: 2 / span 3;
     }
 
     &.kbq-dl_wide {
@@ -57,13 +42,9 @@ $tokens: meta.module-variables(tokens) !default;
     &.kbq-dl_vertical {
         grid-template-columns: repeat(1, 1fr);
 
-        column-gap: var(
-            --kbq-description-list-size-default-vertical-column-gap,
-            map.get($tokens, description-list-size-default-vertical-column-gap)
-        );
         row-gap: var(
-            --kbq-description-list-size-default-vertical-row-gap,
-            map.get($tokens, description-list-size-default-vertical-row-gap)
+            --kbq-description-list-size-vertical-content-gap-vertical,
+            map.get($tokens, description-list-size-vertical-content-gap-vertical)
         );
 
         .kbq-dt,
@@ -73,27 +54,9 @@ $tokens: meta.module-variables(tokens) !default;
 
         .kbq-dd {
             margin-bottom: var(
-                --kbq-description-list-size-default-vertical-dd-margin-bottom,
-                map.get($tokens, description-list-size-default-vertical-dd-margin-bottom)
-            );
-        }
-
-        &.kbq-dl_small {
-            column-gap: var(
-                --kbq-description-list-size-small-vertical-column-gap,
-                map.get($tokens, description-list-size-small-vertical-column-gap)
-            );
-            row-gap: var(
-                --kbq-description-list-size-small-vertical-row-gap,
-                map.get($tokens, description-list-size-small-vertical-row-gap)
+                --kbq-description-list-size-vertical-gap-vertical,
+                map.get($tokens, description-list-size-vertical-gap-vertical)
             );
-
-            .kbq-dd {
-                margin-bottom: var(
-                    --kbq-description-list-size-small-vertical-dd-margin-bottom,
-                    map.get($tokens, description-list-size-small-vertical-dd-margin-bottom)
-                );
-            }
         }
     }
 }

package/dropdown/dropdown-animations.d.ts

@@ -3,7 +3,7 @@ import { AnimationTriggerMetadata } from '@angular/animations';
  * Animations used by the kbq-dropdown component.
  * @docs-private
  */
-export declare const mcDropdownAnimations: {
+export declare const kbqDropdownAnimations: {
     readonly transformDropdown: AnimationTriggerMetadata;
     readonly fadeInItems: AnimationTriggerMetadata;
 };

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

@@ -28,5 +28,5 @@ export declare class KbqDropdownContent implements OnDestroy {
     detach(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDropdownContent, "ng-template[mcDropdownContent]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDropdownContent, "ng-template[kbqDropdownContent]", never, {}, {}, never, never, false, never>;
 }

package/dropdown/dropdown-item.component.d.ts

@@ -47,6 +47,6 @@ export declare class KbqDropdownItem extends KbqDropdownItemMixinBase implements
     getLabel(): string;
     haltDisabledEvents(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownItem, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropdownItem, "kbq-dropdown-item, [kbq-dropdown-item]", ["mcDropdownItem"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["icon"], ["[kbq-icon]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropdownItem, "kbq-dropdown-item, [kbq-dropdown-item]", ["kbqDropdownItem"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["icon"], ["[kbq-icon]", "*"], false, never>;
 }
 export {};

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

@@ -97,7 +97,7 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     private setIsOpened;
     /**
      * This method checks that a valid instance of KbqDropdown has been passed into
-     * mcDropdownTriggerFor. If not, an exception is thrown.
+     * kbqDropdownTriggerFor. If not, an exception is thrown.
      */
     private check;
     /**
@@ -132,5 +132,5 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     private getPortal;
     private getWidth;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownTrigger, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDropdownTrigger, "[mcDropdownTriggerFor]", ["mcDropdownTrigger"], { "data": { "alias": "mcDropdownTriggerData"; "required": false; }; "openByArrowDown": { "alias": "openByArrowDown"; "required": false; }; "restoreFocus": { "alias": "mcDropdownTriggerRestoreFocus"; "required": false; }; "dropdown": { "alias": "mcDropdownTriggerFor"; "required": false; }; }, { "dropdownOpened": "dropdownOpened"; "dropdownClosed": "dropdownClosed"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDropdownTrigger, "[kbqDropdownTriggerFor]", ["kbqDropdownTrigger"], { "data": { "alias": "kbqDropdownTriggerData"; "required": false; }; "openByArrowDown": { "alias": "openByArrowDown"; "required": false; }; "restoreFocus": { "alias": "kbqDropdownTriggerRestoreFocus"; "required": false; }; "dropdown": { "alias": "kbqDropdownTriggerFor"; "required": false; }; }, { "dropdownOpened": "dropdownOpened"; "dropdownClosed": "dropdownClosed"; }, never, never, false, never>;
 }

package/dropdown/dropdown.component.d.ts

@@ -117,5 +117,5 @@ export declare class KbqDropdown implements AfterContentInit, KbqDropdownPanel,
      */
     private updateDirectDescendants;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdown, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropdown, "kbq-dropdown", ["mcDropdown"], { "navigationWithWrap": { "alias": "navigationWithWrap"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "overlapTriggerY": { "alias": "overlapTriggerY"; "required": false; }; "overlapTriggerX": { "alias": "overlapTriggerX"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "closed": "closed"; }, ["lazyContent", "items"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropdown, "kbq-dropdown", ["kbqDropdown"], { "navigationWithWrap": { "alias": "navigationWithWrap"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "overlapTriggerY": { "alias": "overlapTriggerY"; "required": false; }; "overlapTriggerX": { "alias": "overlapTriggerX"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "closed": "closed"; }, ["lazyContent", "items"], ["*"], false, never>;
 }

package/dropdown/dropdown.types.d.ts

@@ -7,7 +7,7 @@ export type DropdownPositionY = 'above' | 'below';
 /** Reason why the menu was closed. */
 export type DropdownCloseReason = void | 'click' | 'keydown' | 'tab';
 /**
- * Interface for a custom dropdown panel that can be used with `mcDropdownTriggerFor`.
+ * Interface for a custom dropdown panel that can be used with `kbqDropdownTriggerFor`.
  * @docs-private
  */
 export interface KbqDropdownPanel {

package/esm2022/alert/alert.component.mjs

@@ -43,14 +43,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
         }] });
 export class KbqAlert {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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, 12px)}.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: "16.1.5", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqAlert, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-alert', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-alert',
                         '[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, 12px)}.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\" *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"] }]
         }], propDecorators: { iconItem: [{
                 type: ContentChild,
                 args: [KbqIconItem]