@koobiq/components 20.1.0 → 20.2.0

package/fesm2022/koobiq-components-alert.mjs

@@ -1,16 +1,18 @@
 import * as i0 from '@angular/core';
-import { Directive, contentChild, input, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Directive, contentChild, input, booleanAttribute, output, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { KbqButton } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
 import { KbqIconItem, KbqIcon } from '@koobiq/components/icon';
-import { A11yModule } from '@angular/cdk/a11y';
-import { PlatformModule } from '@angular/cdk/platform';
 
+/** Visual style of an alert. */
 var KbqAlertStyles;
 (function (KbqAlertStyles) {
+    /** Neutral background; the status is conveyed by the icon color only. */
     KbqAlertStyles["Default"] = "default";
+    /** Colored background matching the status — use to draw attention when a default alert gets lost on screen. */
     KbqAlertStyles["Colored"] = "colored";
 })(KbqAlertStyles || (KbqAlertStyles = {}));
+/** Status conveyed by an alert. Drives the background (colored style) and the auto-tinted status icon. */
 var KbqAlertColors;
 (function (KbqAlertColors) {
     KbqAlertColors["Error"] = "error";
@@ -18,9 +20,17 @@ var KbqAlertColors;
     KbqAlertColors["Success"] = "success";
     KbqAlertColors["Info"] = "info";
 })(KbqAlertColors || (KbqAlertColors = {}));
+/** Maps an alert status to the projected status icon's color. `Info` has no icon color of its own, so it uses `Contrast`. */
+const alertIconColors = {
+    [KbqAlertColors.Error]: KbqComponentColors.Error,
+    [KbqAlertColors.Warning]: KbqComponentColors.Warning,
+    [KbqAlertColors.Success]: KbqComponentColors.Success,
+    [KbqAlertColors.Info]: KbqComponentColors.Contrast
+};
+/** Marks the projected alert heading. */
 class KbqAlertTitle {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlertTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAlertTitle, isStandalone: true, selector: "[kbq-alert-title]", host: { classAttribute: "kbq-alert__title" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAlertTitle, isStandalone: true, selector: "[kbq-alert-title]", host: { classAttribute: "kbq-alert__title" }, exportAs: ["kbqAlertTitle"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlertTitle, decorators: [{
             type: Directive,
@@ -28,12 +38,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     selector: '[kbq-alert-title]',
                     host: {
                         class: 'kbq-alert__title'
-                    }
+                    },
+                    exportAs: 'kbqAlertTitle'
                 }]
         }] });
+/** Marks the projected close control (place it on a native `<button>` with an accessible name). */
 class KbqAlertCloseButton {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlertCloseButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAlertCloseButton, isStandalone: true, selector: "[kbq-alert-close-button]", host: { classAttribute: "kbq-alert-close-button" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAlertCloseButton, isStandalone: true, selector: "[kbq-alert-close-button]", host: { classAttribute: "kbq-alert-close-button" }, exportAs: ["kbqAlertCloseButton"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlertCloseButton, decorators: [{
             type: Directive,
@@ -41,12 +53,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     selector: '[kbq-alert-close-button]',
                     host: {
                         class: 'kbq-alert-close-button'
-                    }
+                    },
+                    exportAs: 'kbqAlertCloseButton'
                 }]
         }] });
+/** Marks a projected action control (link or button) shown in the alert's button stack. */
 class KbqAlertControl {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlertControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAlertControl, isStandalone: true, selector: "[kbq-alert-control]", host: { classAttribute: "kbq-alert-control" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAlertControl, isStandalone: true, selector: "[kbq-alert-control]", host: { classAttribute: "kbq-alert-control" }, exportAs: ["kbqAlertControl"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlertControl, decorators: [{
             type: Directive,
@@ -54,76 +68,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     selector: '[kbq-alert-control]',
                     host: {
                         class: 'kbq-alert-control'
-                    }
+                    },
+                    exportAs: 'kbqAlertControl'
                 }]
         }] });
+/**
+ * Shows important information on a page. Can carry a hint, signal a status change, or indicate a problem.
+ *
+ * ```html
+ * <kbq-alert [alertColor]="'error'" [alertStyle]="'colored'">Something went wrong</kbq-alert>
+ * ```
+ *
+ * For a dynamically inserted alert, add `role="alert"` (or `aria-live`) on the host so assistive
+ * technology announces it — see the component guide.
+ */
 class KbqAlert {
     constructor() {
-        this.iconItem = contentChild(KbqIconItem, ...(ngDevMode ? [{ debugName: "iconItem" }] : []));
-        this.icon = contentChild(KbqIcon, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        /** @docs-private */
+        this.iconItem = contentChild(KbqIconItem, ...(ngDevMode ? [{ debugName: "iconItem", descendants: false }] : [{ descendants: false }]));
+        /** @docs-private */
+        this.icon = contentChild(KbqIcon, ...(ngDevMode ? [{ debugName: "icon", descendants: false }] : [{ descendants: false }]));
+        // NB: `button` must keep the default `descendants: true` — it does not gate a projection slot, it
+        // reports whether the already-projected `[kbq-alert-control]` slot contains a button (which can sit
+        // inside a wrapper element), and drives the `_has-button` button-stack padding.
+        /** @docs-private */
         this.button = contentChild(KbqButton, ...(ngDevMode ? [{ debugName: "button" }] : []));
-        this.title = contentChild(KbqAlertTitle, ...(ngDevMode ? [{ debugName: "title" }] : []));
-        this.control = contentChild(KbqAlertControl, ...(ngDevMode ? [{ debugName: "control" }] : []));
-        this.closeButton = contentChild(KbqAlertCloseButton, ...(ngDevMode ? [{ debugName: "closeButton" }] : []));
-        this.compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
+        /** @docs-private */
+        this.title = contentChild(KbqAlertTitle, ...(ngDevMode ? [{ debugName: "title", descendants: false }] : [{ descendants: false }]));
+        /** @docs-private */
+        this.control = contentChild(KbqAlertControl, ...(ngDevMode ? [{ debugName: "control", descendants: false }] : [{ descendants: false }]));
+        /** @docs-private */
+        this.closeButton = contentChild(KbqAlertCloseButton, ...(ngDevMode ? [{ debugName: "closeButton", descendants: false }] : [{ descendants: false }]));
+        /** Whether the alert uses the denser compact size. */
+        this.compact = input(false, ...(ngDevMode ? [{ debugName: "compact", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Visual style — neutral `default` or the attention-drawing `colored` background. */
         this.alertStyle = input(KbqAlertStyles.Default, ...(ngDevMode ? [{ debugName: "alertStyle" }] : []));
-        this._alertColor = KbqAlertColors.Info;
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get alertColor() {
-        return `kbq-alert_${this._alertColor}`;
-    }
-    set alertColor(value) {
-        this._alertColor = value || KbqAlertColors.Info;
-    }
-    get isColored() {
-        return this.alertStyle() === KbqAlertStyles.Colored;
-    }
-    ngAfterContentInit() {
-        const icon = this.icon() || this.iconItem();
-        if (icon?.color === KbqComponentColors.Empty) {
-            icon.color = this._alertColor === KbqAlertColors.Info ? KbqComponentColors.Contrast : this._alertColor;
-        }
+        /**
+         * Status of the alert. Drives the background in the `colored` style and auto-tints an uncolored
+         * projected status icon to the matching color (`info` icons become `contrast`).
+         * @default 'info'
+         */
+        this.alertColor = input(KbqAlertColors.Info, ...(ngDevMode ? [{ debugName: "alertColor", transform: (value) => value || KbqAlertColors.Info }] : [{
+                transform: (value) => value || KbqAlertColors.Info
+            }]));
+        /** Emitted when the projected close control is activated. The consumer is responsible for hiding the alert. */
+        this.closed = output();
+        /** @docs-private */
+        this.alertColorClass = computed(() => `kbq-alert_${this.alertColor()}`, ...(ngDevMode ? [{ debugName: "alertColorClass" }] : []));
+        /** @docs-private */
+        this.isColored = computed(() => this.alertStyle() === KbqAlertStyles.Colored, ...(ngDevMode ? [{ debugName: "isColored" }] : []));
+        /** The projected status icon, whichever slot it came from. @docs-private */
+        this.projectedIcon = computed(() => this.icon() || this.iconItem(), ...(ngDevMode ? [{ debugName: "projectedIcon" }] : []));
+        /** Last color this component auto-assigned to the icon; lets us correct color on change without ignoring consumer's color. */
+        this.lastAutoColor = null;
+        // Keep the uncolored projected icon in sync with the alert status, reacting to both a later
+        // `alertColor` change and a late-arriving icon. Only re-tint an icon we own — one that is still
+        // `Empty` or still carries the color we last set — so an explicit consumer `[color]` is respected.
+        effect(() => {
+            const icon = this.projectedIcon();
+            const nextColor = alertIconColors[this.alertColor()];
+            if (icon && (icon.color === KbqComponentColors.Empty || icon.color === this.lastAutoColor)) {
+                icon.color = nextColor;
+                this.lastAutoColor = nextColor;
+            }
+        });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqAlert, isStandalone: true, selector: "kbq-alert", inputs: { compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, alertStyle: { classPropertyName: "alertStyle", publicName: "alertStyle", isSignal: true, isRequired: false, transformFunction: null }, alertColor: { classPropertyName: "alertColor", publicName: "alertColor", isSignal: false, isRequired: false, transformFunction: null } }, 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, isSignal: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true, isSignal: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true, isSignal: true }, { propertyName: "title", first: true, predicate: KbqAlertTitle, descendants: true, isSignal: true }, { propertyName: "control", first: true, predicate: KbqAlertControl, descendants: true, isSignal: true }, { propertyName: "closeButton", first: true, predicate: KbqAlertCloseButton, descendants: true, isSignal: true }], ngImport: i0, template: "@if (iconItem() || icon()) {\n    <div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title()\">\n        <ng-content select=\"[kbq-icon-item],[kbq-icon]\" />\n    </div>\n}\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title()\">\n    <ng-content select=\"[kbq-alert-title]\" />\n\n    <div class=\"kbq-alert__text\">\n        <ng-content />\n    </div>\n\n    @if (control()) {\n        <div class=\"kbq-alert__button-stack\" [class.kbq-alert__button-stack_has-button]=\"button()\">\n            <ng-content select=\"[kbq-alert-control]\" />\n        </div>\n    }\n</div>\n\n<div class=\"kbq-alert__close-button\" [hidden]=\"!closeButton()\">\n    <ng-content select=\"[kbq-alert-close-button]\" />\n</div>\n", styles: [".kbq-alert{display:flex;box-sizing:border-box}.kbq-alert .kbq-alert__content_title{margin-bottom:var(--kbq-size-xxs)}.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);padding:var(--kbq-alert-size-normal-container-padding-top) var(--kbq-alert-size-normal-container-padding-right) var(--kbq-alert-size-normal-container-padding-bottom) var(--kbq-alert-size-normal-container-padding-left)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{margin:var(--kbq-alert-size-normal-no-title-icon-margin-top) var(--kbq-alert-size-normal-icon-margin-right) var(--kbq-alert-size-normal-icon-margin-bottom) var(--kbq-alert-size-normal-icon-margin-left)}.kbq-alert.kbq-alert_normal .kbq-alert__icon.kbq-alert__icon_title{margin-top:var(--kbq-alert-size-normal-icon-margin-top);padding-top:var(--kbq-alert-size-normal-no-title-icon-padding-top)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{display:inline-flex;align-items:flex-start}.kbq-alert.kbq-alert_normal .kbq-alert__content{padding:var(--kbq-alert-size-normal-content-padding-top) var(--kbq-alert-size-normal-content-padding-right) var(--kbq-alert-size-normal-content-padding-bottom) var(--kbq-alert-size-normal-content-padding-left)}.kbq-alert.kbq-alert_normal .kbq-alert__title{margin-bottom:var(--kbq-alert-size-normal-title-margin-bottom)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-normal-button-stack-padding-top);padding-bottom:var(--kbq-alert-size-normal-button-stack-padding-bottom)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack_has-button{padding-top:12px}.kbq-alert.kbq-alert_normal .kbq-alert__close-button{margin-top:var(--kbq-alert-size-normal-close-button-margin-top);margin-left:var(--kbq-alert-size-normal-close-button-margin-left)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button .kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: 4px;--kbq-icon-button-size-normal-vertical-padding: 4px}.kbq-alert.kbq-alert_compact{border-radius:var(--kbq-alert-size-compact-container-border-radius);padding:var(--kbq-alert-size-compact-container-padding-top) var(--kbq-alert-size-compact-container-padding-right) var(--kbq-alert-size-compact-container-padding-bottom) var(--kbq-alert-size-compact-container-padding-left)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{margin-top:var(--kbq-alert-size-compact-no-title-icon-margin-top);margin-right:var(--kbq-alert-size-compact-icon-margin-right);padding-top:var(--kbq-alert-size-compact-no-title-icon-padding-top)}.kbq-alert.kbq-alert_compact .kbq-alert__icon.kbq-alert__icon_title{margin-top:var(--kbq-alert-size-compact-icon-margin-top);padding-top:var(--kbq-alert-size-compact-icon-padding-top)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{display:inline-flex;align-items:flex-start}.kbq-alert.kbq-alert_compact .kbq-alert__content{padding:var(--kbq-alert-size-compact-content-padding-top) var(--kbq-alert-size-compact-content-padding-right) var(--kbq-alert-size-compact-content-padding-bottom) var(--kbq-alert-size-compact-content-padding-left)}.kbq-alert.kbq-alert_compact .kbq-alert__title{margin-bottom:var(--kbq-alert-size-compact-title-margin-bottom)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-compact-button-stack-padding-top);padding-bottom:var(--kbq-alert-size-compact-button-stack-padding-bottom)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack_has-button{padding-top:12px}.kbq-alert.kbq-alert_compact .kbq-alert__close-button{margin-top:var(--kbq-alert-size-compact-close-button-margin-top);margin-left:var(--kbq-alert-size-compact-close-button-margin-left)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button .kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: 4px;--kbq-icon-button-size-normal-vertical-padding: 4px}.kbq-alert.kbq-alert_default.kbq-alert_error{background:var(--kbq-alert-default-error-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_error .kbq-alert__title{color:var(--kbq-alert-default-error-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_error .kbq-alert__text{color:var(--kbq-alert-default-error-container-text)}.kbq-alert.kbq-alert_default.kbq-alert_warning{background:var(--kbq-alert-default-warning-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_warning .kbq-alert__title{color:var(--kbq-alert-default-warning-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_warning .kbq-alert__text{color:var(--kbq-alert-default-warning-container-text)}.kbq-alert.kbq-alert_default.kbq-alert_success{background:var(--kbq-alert-default-success-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_success .kbq-alert__title{color:var(--kbq-alert-default-success-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_success .kbq-alert__text{color:var(--kbq-alert-default-success-container-text)}.kbq-alert.kbq-alert_default.kbq-alert_info{background:var(--kbq-alert-default-info-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_info .kbq-alert__title{color:var(--kbq-alert-default-info-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_info .kbq-alert__text{color:var(--kbq-alert-default-info-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_error{background:var(--kbq-alert-colored-error-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_error .kbq-alert__title{color:var(--kbq-alert-colored-error-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_error .kbq-alert__text{color:var(--kbq-alert-colored-error-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_warning{background:var(--kbq-alert-colored-warning-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_warning .kbq-alert__title{color:var(--kbq-alert-colored-warning-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_warning .kbq-alert__text{color:var(--kbq-alert-colored-warning-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_success{background:var(--kbq-alert-colored-success-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_success .kbq-alert__title{color:var(--kbq-alert-colored-success-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_success .kbq-alert__text{color:var(--kbq-alert-colored-success-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_info{background:var(--kbq-alert-colored-info-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_info .kbq-alert__title{color:var(--kbq-alert-colored-info-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_info .kbq-alert__text{color:var(--kbq-alert-colored-info-container-text)}.kbq-alert{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-alert .kbq-alert__title{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-alert.kbq-alert_compact .kbq-alert__title{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n", ":where(.kbq-alert){--kbq-alert-size-normal-container-border-radius: var(--kbq-size-m);--kbq-alert-size-normal-container-padding-top: 0;--kbq-alert-size-normal-container-padding-right: var(--kbq-size-s);--kbq-alert-size-normal-container-padding-bottom: 0;--kbq-alert-size-normal-container-padding-left: var(--kbq-size-s);--kbq-alert-size-normal-content-padding-top: var(--kbq-size-l);--kbq-alert-size-normal-content-padding-right: var(--kbq-size-s);--kbq-alert-size-normal-content-padding-bottom: var(--kbq-size-l);--kbq-alert-size-normal-content-padding-left: var(--kbq-size-m);--kbq-alert-size-normal-icon-margin-top: var(--kbq-size-l);--kbq-alert-size-normal-icon-margin-right: 0;--kbq-alert-size-normal-icon-margin-bottom: var(--kbq-size-l);--kbq-alert-size-normal-icon-margin-left: var(--kbq-size-m);--kbq-alert-size-normal-icon-padding-top: var(--kbq-size-xxs);--kbq-alert-size-normal-title-margin-bottom: var(--kbq-size-xxs);--kbq-alert-size-normal-close-button-margin-top: 10px;--kbq-alert-size-normal-close-button-margin-left: var(--kbq-size-3xs);--kbq-alert-size-normal-button-stack-padding-top: var(--kbq-size-s);--kbq-alert-size-normal-button-stack-padding-bottom: var(--kbq-size-3xs);--kbq-alert-size-normal-no-title-icon-margin-top: var(--kbq-size-l);--kbq-alert-size-normal-no-title-icon-padding-top: var(--kbq-size-3xs);--kbq-alert-size-compact-container-border-radius: var(--kbq-size-m);--kbq-alert-size-compact-container-padding-top: 0;--kbq-alert-size-compact-container-padding-right: var(--kbq-size-s);--kbq-alert-size-compact-container-padding-bottom: 0;--kbq-alert-size-compact-container-padding-left: var(--kbq-size-l);--kbq-alert-size-compact-content-padding-top: var(--kbq-size-m);--kbq-alert-size-compact-content-padding-right: var(--kbq-size-s);--kbq-alert-size-compact-content-padding-bottom: var(--kbq-size-m);--kbq-alert-size-compact-content-padding-left: 0;--kbq-alert-size-compact-icon-margin-top: var(--kbq-size-m);--kbq-alert-size-compact-icon-margin-right: var(--kbq-size-s);--kbq-alert-size-compact-icon-padding-top: var(--kbq-size-xxs);--kbq-alert-size-compact-title-margin-bottom: var(--kbq-size-3xs);--kbq-alert-size-compact-close-button-margin-top: 10px;--kbq-alert-size-compact-close-button-margin-left: var(--kbq-size-3xs);--kbq-alert-size-compact-button-stack-padding-top: var(--kbq-size-s);--kbq-alert-size-compact-button-stack-padding-bottom: var(--kbq-size-3xs);--kbq-alert-size-compact-no-title-icon-margin-top: var(--kbq-size-m);--kbq-alert-size-compact-no-title-icon-padding-top: var(--kbq-size-3xs);--kbq-alert-default-error-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-error-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-error-container-text: var(--kbq-foreground-contrast);--kbq-alert-default-warning-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-warning-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-warning-container-text: var(--kbq-foreground-contrast);--kbq-alert-default-success-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-success-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-success-container-text: var(--kbq-foreground-contrast);--kbq-alert-default-info-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-info-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-info-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-error-container-background: var(--kbq-background-error-less);--kbq-alert-colored-error-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-error-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-warning-container-background: var(--kbq-background-warning-less);--kbq-alert-colored-warning-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-warning-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-success-container-background: var(--kbq-background-success-less);--kbq-alert-colored-success-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-success-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-info-container-background: var(--kbq-background-theme-less);--kbq-alert-colored-info-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-info-container-text: var(--kbq-foreground-contrast)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqAlert, isStandalone: true, selector: "kbq-alert", inputs: { compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, alertStyle: { classPropertyName: "alertStyle", publicName: "alertStyle", isSignal: true, isRequired: false, transformFunction: null }, alertColor: { classPropertyName: "alertColor", publicName: "alertColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "alertColorClass()", "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, isSignal: true }, { propertyName: "icon", first: true, predicate: KbqIcon, isSignal: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true, isSignal: true }, { propertyName: "title", first: true, predicate: KbqAlertTitle, isSignal: true }, { propertyName: "control", first: true, predicate: KbqAlertControl, isSignal: true }, { propertyName: "closeButton", first: true, predicate: KbqAlertCloseButton, isSignal: true }], exportAs: ["kbqAlert"], ngImport: i0, template: "@if (projectedIcon()) {\n    <div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title()\">\n        <ng-content select=\"[kbq-icon-item],[kbq-icon]\" />\n    </div>\n}\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title()\">\n    <ng-content select=\"[kbq-alert-title]\" />\n\n    <div class=\"kbq-alert__text\">\n        <ng-content />\n    </div>\n\n    @if (control()) {\n        <div class=\"kbq-alert__button-stack\" [class.kbq-alert__button-stack_has-button]=\"button()\">\n            <ng-content select=\"[kbq-alert-control]\" />\n        </div>\n    }\n</div>\n\n@if (closeButton()) {\n    <div class=\"kbq-alert__close-button\" (click)=\"closed.emit()\">\n        <ng-content select=\"[kbq-alert-close-button]\" />\n    </div>\n}\n", styles: [".kbq-alert{display:flex;box-sizing:border-box}.kbq-alert .kbq-alert__content_title{margin-bottom:var(--kbq-size-xxs)}.kbq-alert__icon{display:inline-flex;align-items:flex-start}.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);padding:var(--kbq-alert-size-normal-container-padding-top) var(--kbq-alert-size-normal-container-padding-right) var(--kbq-alert-size-normal-container-padding-bottom) var(--kbq-alert-size-normal-container-padding-left)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{margin:var(--kbq-alert-size-normal-no-title-icon-margin-top) var(--kbq-alert-size-normal-icon-margin-right) var(--kbq-alert-size-normal-icon-margin-bottom) var(--kbq-alert-size-normal-icon-margin-left);padding-top:var(--kbq-alert-size-normal-no-title-icon-padding-top)}.kbq-alert.kbq-alert_normal .kbq-alert__icon.kbq-alert__icon_title{margin-top:var(--kbq-alert-size-normal-icon-margin-top);padding-top:var(--kbq-alert-size-normal-icon-padding-top)}.kbq-alert.kbq-alert_normal .kbq-alert__content{padding:var(--kbq-alert-size-normal-content-padding-top) var(--kbq-alert-size-normal-content-padding-right) var(--kbq-alert-size-normal-content-padding-bottom) var(--kbq-alert-size-normal-content-padding-left)}.kbq-alert.kbq-alert_normal .kbq-alert__title{margin-bottom:var(--kbq-alert-size-normal-title-margin-bottom)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kbq-size-m);padding-top:var(--kbq-alert-size-normal-button-stack-padding-top);padding-bottom:var(--kbq-alert-size-normal-button-stack-padding-bottom)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack_has-button{padding-top:var(--kbq-size-m)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button{margin-top:var(--kbq-alert-size-normal-close-button-margin-top);margin-left:var(--kbq-alert-size-normal-close-button-margin-left)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button .kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-normal-vertical-padding: var(--kbq-size-xxs)}.kbq-alert.kbq-alert_compact{border-radius:var(--kbq-alert-size-compact-container-border-radius);padding:var(--kbq-alert-size-compact-container-padding-top) var(--kbq-alert-size-compact-container-padding-right) var(--kbq-alert-size-compact-container-padding-bottom) var(--kbq-alert-size-compact-container-padding-left)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{margin-top:var(--kbq-alert-size-compact-no-title-icon-margin-top);margin-right:var(--kbq-alert-size-compact-icon-margin-right);padding-top:var(--kbq-alert-size-compact-no-title-icon-padding-top)}.kbq-alert.kbq-alert_compact .kbq-alert__icon.kbq-alert__icon_title{margin-top:var(--kbq-alert-size-compact-icon-margin-top);padding-top:var(--kbq-alert-size-compact-icon-padding-top)}.kbq-alert.kbq-alert_compact .kbq-alert__content{padding:var(--kbq-alert-size-compact-content-padding-top) var(--kbq-alert-size-compact-content-padding-right) var(--kbq-alert-size-compact-content-padding-bottom) var(--kbq-alert-size-compact-content-padding-left)}.kbq-alert.kbq-alert_compact .kbq-alert__title{margin-bottom:var(--kbq-alert-size-compact-title-margin-bottom)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kbq-size-m);padding-top:var(--kbq-alert-size-compact-button-stack-padding-top);padding-bottom:var(--kbq-alert-size-compact-button-stack-padding-bottom)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack_has-button{padding-top:var(--kbq-size-m)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button{margin-top:var(--kbq-alert-size-compact-close-button-margin-top);margin-left:var(--kbq-alert-size-compact-close-button-margin-left)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button .kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-normal-vertical-padding: var(--kbq-size-xxs)}.kbq-alert.kbq-alert_default.kbq-alert_error{background:var(--kbq-alert-default-error-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_error .kbq-alert__title{color:var(--kbq-alert-default-error-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_error .kbq-alert__text{color:var(--kbq-alert-default-error-container-text)}.kbq-alert.kbq-alert_default.kbq-alert_warning{background:var(--kbq-alert-default-warning-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_warning .kbq-alert__title{color:var(--kbq-alert-default-warning-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_warning .kbq-alert__text{color:var(--kbq-alert-default-warning-container-text)}.kbq-alert.kbq-alert_default.kbq-alert_success{background:var(--kbq-alert-default-success-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_success .kbq-alert__title{color:var(--kbq-alert-default-success-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_success .kbq-alert__text{color:var(--kbq-alert-default-success-container-text)}.kbq-alert.kbq-alert_default.kbq-alert_info{background:var(--kbq-alert-default-info-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_info .kbq-alert__title{color:var(--kbq-alert-default-info-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_info .kbq-alert__text{color:var(--kbq-alert-default-info-container-text)}.kbq-alert.kbq-alert_default .kbq-alert__icon>.kbq-icon:not(.kbq-icon-item,.kbq-icon-button){--kbq-icon-warning-color: var(--kbq-foreground-warning);--kbq-icon-success-color: var(--kbq-foreground-success)}.kbq-alert.kbq-alert_colored.kbq-alert_error{background:var(--kbq-alert-colored-error-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_error .kbq-alert__title{color:var(--kbq-alert-colored-error-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_error .kbq-alert__text{color:var(--kbq-alert-colored-error-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_warning{background:var(--kbq-alert-colored-warning-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_warning .kbq-alert__title{color:var(--kbq-alert-colored-warning-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_warning .kbq-alert__text{color:var(--kbq-alert-colored-warning-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_success{background:var(--kbq-alert-colored-success-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_success .kbq-alert__title{color:var(--kbq-alert-colored-success-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_success .kbq-alert__text{color:var(--kbq-alert-colored-success-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_info{background:var(--kbq-alert-colored-info-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_info .kbq-alert__title{color:var(--kbq-alert-colored-info-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_info .kbq-alert__text{color:var(--kbq-alert-colored-info-container-text)}.kbq-alert{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-alert .kbq-alert__title{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-alert.kbq-alert_compact .kbq-alert__title{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n", ":where(.kbq-alert){--kbq-alert-size-normal-container-border-radius: var(--kbq-size-m);--kbq-alert-size-normal-container-padding-top: 0;--kbq-alert-size-normal-container-padding-right: var(--kbq-size-s);--kbq-alert-size-normal-container-padding-bottom: 0;--kbq-alert-size-normal-container-padding-left: var(--kbq-size-s);--kbq-alert-size-normal-content-padding-top: var(--kbq-size-l);--kbq-alert-size-normal-content-padding-right: var(--kbq-size-s);--kbq-alert-size-normal-content-padding-bottom: var(--kbq-size-l);--kbq-alert-size-normal-content-padding-left: var(--kbq-size-m);--kbq-alert-size-normal-icon-margin-top: var(--kbq-size-l);--kbq-alert-size-normal-icon-margin-right: 0;--kbq-alert-size-normal-icon-margin-bottom: var(--kbq-size-l);--kbq-alert-size-normal-icon-margin-left: var(--kbq-size-m);--kbq-alert-size-normal-icon-padding-top: var(--kbq-size-xxs);--kbq-alert-size-normal-title-margin-bottom: var(--kbq-size-xxs);--kbq-alert-size-normal-close-button-margin-top: 10px;--kbq-alert-size-normal-close-button-margin-left: var(--kbq-size-3xs);--kbq-alert-size-normal-button-stack-padding-top: var(--kbq-size-s);--kbq-alert-size-normal-button-stack-padding-bottom: var(--kbq-size-3xs);--kbq-alert-size-normal-no-title-icon-margin-top: var(--kbq-size-l);--kbq-alert-size-normal-no-title-icon-padding-top: var(--kbq-size-3xs);--kbq-alert-size-compact-container-border-radius: var(--kbq-size-m);--kbq-alert-size-compact-container-padding-top: 0;--kbq-alert-size-compact-container-padding-right: var(--kbq-size-s);--kbq-alert-size-compact-container-padding-bottom: 0;--kbq-alert-size-compact-container-padding-left: var(--kbq-size-l);--kbq-alert-size-compact-content-padding-top: var(--kbq-size-m);--kbq-alert-size-compact-content-padding-right: var(--kbq-size-s);--kbq-alert-size-compact-content-padding-bottom: var(--kbq-size-m);--kbq-alert-size-compact-content-padding-left: 0;--kbq-alert-size-compact-icon-margin-top: var(--kbq-size-m);--kbq-alert-size-compact-icon-margin-right: var(--kbq-size-s);--kbq-alert-size-compact-icon-padding-top: var(--kbq-size-xxs);--kbq-alert-size-compact-title-margin-bottom: var(--kbq-size-3xs);--kbq-alert-size-compact-close-button-margin-top: 10px;--kbq-alert-size-compact-close-button-margin-left: var(--kbq-size-3xs);--kbq-alert-size-compact-button-stack-padding-top: var(--kbq-size-s);--kbq-alert-size-compact-button-stack-padding-bottom: var(--kbq-size-3xs);--kbq-alert-size-compact-no-title-icon-margin-top: var(--kbq-size-m);--kbq-alert-size-compact-no-title-icon-padding-top: var(--kbq-size-3xs);--kbq-alert-default-error-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-error-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-error-container-text: var(--kbq-foreground-contrast);--kbq-alert-default-warning-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-warning-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-warning-container-text: var(--kbq-foreground-contrast);--kbq-alert-default-success-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-success-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-success-container-text: var(--kbq-foreground-contrast);--kbq-alert-default-info-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-info-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-info-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-error-container-background: var(--kbq-background-error-less);--kbq-alert-colored-error-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-error-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-warning-container-background: var(--kbq-background-warning-less);--kbq-alert-colored-warning-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-warning-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-success-container-background: var(--kbq-background-success-less);--kbq-alert-colored-success-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-success-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-info-container-background: var(--kbq-background-theme-less);--kbq-alert-colored-info-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-info-container-text: var(--kbq-foreground-contrast)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlert, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-alert', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-alert',
-                        '[class]': 'alertColor',
+                        '[class]': 'alertColorClass()',
                         '[class.kbq-alert_normal]': '!compact()',
                         '[class.kbq-alert_compact]': 'compact()',
-                        '[class.kbq-alert_default]': '!isColored',
-                        '[class.kbq-alert_colored]': 'isColored',
+                        '[class.kbq-alert_default]': '!isColored()',
+                        '[class.kbq-alert_colored]': 'isColored()',
                         '[class.kbq-alert_dismissible]': 'closeButton()'
-                    }, template: "@if (iconItem() || icon()) {\n    <div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title()\">\n        <ng-content select=\"[kbq-icon-item],[kbq-icon]\" />\n    </div>\n}\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title()\">\n    <ng-content select=\"[kbq-alert-title]\" />\n\n    <div class=\"kbq-alert__text\">\n        <ng-content />\n    </div>\n\n    @if (control()) {\n        <div class=\"kbq-alert__button-stack\" [class.kbq-alert__button-stack_has-button]=\"button()\">\n            <ng-content select=\"[kbq-alert-control]\" />\n        </div>\n    }\n</div>\n\n<div class=\"kbq-alert__close-button\" [hidden]=\"!closeButton()\">\n    <ng-content select=\"[kbq-alert-close-button]\" />\n</div>\n", styles: [".kbq-alert{display:flex;box-sizing:border-box}.kbq-alert .kbq-alert__content_title{margin-bottom:var(--kbq-size-xxs)}.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);padding:var(--kbq-alert-size-normal-container-padding-top) var(--kbq-alert-size-normal-container-padding-right) var(--kbq-alert-size-normal-container-padding-bottom) var(--kbq-alert-size-normal-container-padding-left)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{margin:var(--kbq-alert-size-normal-no-title-icon-margin-top) var(--kbq-alert-size-normal-icon-margin-right) var(--kbq-alert-size-normal-icon-margin-bottom) var(--kbq-alert-size-normal-icon-margin-left)}.kbq-alert.kbq-alert_normal .kbq-alert__icon.kbq-alert__icon_title{margin-top:var(--kbq-alert-size-normal-icon-margin-top);padding-top:var(--kbq-alert-size-normal-no-title-icon-padding-top)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{display:inline-flex;align-items:flex-start}.kbq-alert.kbq-alert_normal .kbq-alert__content{padding:var(--kbq-alert-size-normal-content-padding-top) var(--kbq-alert-size-normal-content-padding-right) var(--kbq-alert-size-normal-content-padding-bottom) var(--kbq-alert-size-normal-content-padding-left)}.kbq-alert.kbq-alert_normal .kbq-alert__title{margin-bottom:var(--kbq-alert-size-normal-title-margin-bottom)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-normal-button-stack-padding-top);padding-bottom:var(--kbq-alert-size-normal-button-stack-padding-bottom)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack_has-button{padding-top:12px}.kbq-alert.kbq-alert_normal .kbq-alert__close-button{margin-top:var(--kbq-alert-size-normal-close-button-margin-top);margin-left:var(--kbq-alert-size-normal-close-button-margin-left)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button .kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: 4px;--kbq-icon-button-size-normal-vertical-padding: 4px}.kbq-alert.kbq-alert_compact{border-radius:var(--kbq-alert-size-compact-container-border-radius);padding:var(--kbq-alert-size-compact-container-padding-top) var(--kbq-alert-size-compact-container-padding-right) var(--kbq-alert-size-compact-container-padding-bottom) var(--kbq-alert-size-compact-container-padding-left)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{margin-top:var(--kbq-alert-size-compact-no-title-icon-margin-top);margin-right:var(--kbq-alert-size-compact-icon-margin-right);padding-top:var(--kbq-alert-size-compact-no-title-icon-padding-top)}.kbq-alert.kbq-alert_compact .kbq-alert__icon.kbq-alert__icon_title{margin-top:var(--kbq-alert-size-compact-icon-margin-top);padding-top:var(--kbq-alert-size-compact-icon-padding-top)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{display:inline-flex;align-items:flex-start}.kbq-alert.kbq-alert_compact .kbq-alert__content{padding:var(--kbq-alert-size-compact-content-padding-top) var(--kbq-alert-size-compact-content-padding-right) var(--kbq-alert-size-compact-content-padding-bottom) var(--kbq-alert-size-compact-content-padding-left)}.kbq-alert.kbq-alert_compact .kbq-alert__title{margin-bottom:var(--kbq-alert-size-compact-title-margin-bottom)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-compact-button-stack-padding-top);padding-bottom:var(--kbq-alert-size-compact-button-stack-padding-bottom)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack_has-button{padding-top:12px}.kbq-alert.kbq-alert_compact .kbq-alert__close-button{margin-top:var(--kbq-alert-size-compact-close-button-margin-top);margin-left:var(--kbq-alert-size-compact-close-button-margin-left)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button .kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: 4px;--kbq-icon-button-size-normal-vertical-padding: 4px}.kbq-alert.kbq-alert_default.kbq-alert_error{background:var(--kbq-alert-default-error-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_error .kbq-alert__title{color:var(--kbq-alert-default-error-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_error .kbq-alert__text{color:var(--kbq-alert-default-error-container-text)}.kbq-alert.kbq-alert_default.kbq-alert_warning{background:var(--kbq-alert-default-warning-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_warning .kbq-alert__title{color:var(--kbq-alert-default-warning-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_warning .kbq-alert__text{color:var(--kbq-alert-default-warning-container-text)}.kbq-alert.kbq-alert_default.kbq-alert_success{background:var(--kbq-alert-default-success-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_success .kbq-alert__title{color:var(--kbq-alert-default-success-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_success .kbq-alert__text{color:var(--kbq-alert-default-success-container-text)}.kbq-alert.kbq-alert_default.kbq-alert_info{background:var(--kbq-alert-default-info-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_info .kbq-alert__title{color:var(--kbq-alert-default-info-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_info .kbq-alert__text{color:var(--kbq-alert-default-info-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_error{background:var(--kbq-alert-colored-error-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_error .kbq-alert__title{color:var(--kbq-alert-colored-error-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_error .kbq-alert__text{color:var(--kbq-alert-colored-error-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_warning{background:var(--kbq-alert-colored-warning-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_warning .kbq-alert__title{color:var(--kbq-alert-colored-warning-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_warning .kbq-alert__text{color:var(--kbq-alert-colored-warning-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_success{background:var(--kbq-alert-colored-success-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_success .kbq-alert__title{color:var(--kbq-alert-colored-success-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_success .kbq-alert__text{color:var(--kbq-alert-colored-success-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_info{background:var(--kbq-alert-colored-info-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_info .kbq-alert__title{color:var(--kbq-alert-colored-info-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_info .kbq-alert__text{color:var(--kbq-alert-colored-info-container-text)}.kbq-alert{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-alert .kbq-alert__title{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-alert.kbq-alert_compact .kbq-alert__title{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n", ":where(.kbq-alert){--kbq-alert-size-normal-container-border-radius: var(--kbq-size-m);--kbq-alert-size-normal-container-padding-top: 0;--kbq-alert-size-normal-container-padding-right: var(--kbq-size-s);--kbq-alert-size-normal-container-padding-bottom: 0;--kbq-alert-size-normal-container-padding-left: var(--kbq-size-s);--kbq-alert-size-normal-content-padding-top: var(--kbq-size-l);--kbq-alert-size-normal-content-padding-right: var(--kbq-size-s);--kbq-alert-size-normal-content-padding-bottom: var(--kbq-size-l);--kbq-alert-size-normal-content-padding-left: var(--kbq-size-m);--kbq-alert-size-normal-icon-margin-top: var(--kbq-size-l);--kbq-alert-size-normal-icon-margin-right: 0;--kbq-alert-size-normal-icon-margin-bottom: var(--kbq-size-l);--kbq-alert-size-normal-icon-margin-left: var(--kbq-size-m);--kbq-alert-size-normal-icon-padding-top: var(--kbq-size-xxs);--kbq-alert-size-normal-title-margin-bottom: var(--kbq-size-xxs);--kbq-alert-size-normal-close-button-margin-top: 10px;--kbq-alert-size-normal-close-button-margin-left: var(--kbq-size-3xs);--kbq-alert-size-normal-button-stack-padding-top: var(--kbq-size-s);--kbq-alert-size-normal-button-stack-padding-bottom: var(--kbq-size-3xs);--kbq-alert-size-normal-no-title-icon-margin-top: var(--kbq-size-l);--kbq-alert-size-normal-no-title-icon-padding-top: var(--kbq-size-3xs);--kbq-alert-size-compact-container-border-radius: var(--kbq-size-m);--kbq-alert-size-compact-container-padding-top: 0;--kbq-alert-size-compact-container-padding-right: var(--kbq-size-s);--kbq-alert-size-compact-container-padding-bottom: 0;--kbq-alert-size-compact-container-padding-left: var(--kbq-size-l);--kbq-alert-size-compact-content-padding-top: var(--kbq-size-m);--kbq-alert-size-compact-content-padding-right: var(--kbq-size-s);--kbq-alert-size-compact-content-padding-bottom: var(--kbq-size-m);--kbq-alert-size-compact-content-padding-left: 0;--kbq-alert-size-compact-icon-margin-top: var(--kbq-size-m);--kbq-alert-size-compact-icon-margin-right: var(--kbq-size-s);--kbq-alert-size-compact-icon-padding-top: var(--kbq-size-xxs);--kbq-alert-size-compact-title-margin-bottom: var(--kbq-size-3xs);--kbq-alert-size-compact-close-button-margin-top: 10px;--kbq-alert-size-compact-close-button-margin-left: var(--kbq-size-3xs);--kbq-alert-size-compact-button-stack-padding-top: var(--kbq-size-s);--kbq-alert-size-compact-button-stack-padding-bottom: var(--kbq-size-3xs);--kbq-alert-size-compact-no-title-icon-margin-top: var(--kbq-size-m);--kbq-alert-size-compact-no-title-icon-padding-top: var(--kbq-size-3xs);--kbq-alert-default-error-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-error-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-error-container-text: var(--kbq-foreground-contrast);--kbq-alert-default-warning-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-warning-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-warning-container-text: var(--kbq-foreground-contrast);--kbq-alert-default-success-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-success-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-success-container-text: var(--kbq-foreground-contrast);--kbq-alert-default-info-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-info-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-info-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-error-container-background: var(--kbq-background-error-less);--kbq-alert-colored-error-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-error-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-warning-container-background: var(--kbq-background-warning-less);--kbq-alert-colored-warning-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-warning-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-success-container-background: var(--kbq-background-success-less);--kbq-alert-colored-success-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-success-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-info-container-background: var(--kbq-background-theme-less);--kbq-alert-colored-info-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-info-container-text: var(--kbq-foreground-contrast)}\n"] }]
-        }], propDecorators: { iconItem: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqIconItem), { isSignal: true }] }], icon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqIcon), { isSignal: true }] }], button: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqButton), { isSignal: true }] }], title: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqAlertTitle), { isSignal: true }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqAlertControl), { isSignal: true }] }], closeButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqAlertCloseButton), { isSignal: true }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], alertStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertStyle", required: false }] }], alertColor: [{
-                type: Input
-            }] } });
+                    }, exportAs: 'kbqAlert', template: "@if (projectedIcon()) {\n    <div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title()\">\n        <ng-content select=\"[kbq-icon-item],[kbq-icon]\" />\n    </div>\n}\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title()\">\n    <ng-content select=\"[kbq-alert-title]\" />\n\n    <div class=\"kbq-alert__text\">\n        <ng-content />\n    </div>\n\n    @if (control()) {\n        <div class=\"kbq-alert__button-stack\" [class.kbq-alert__button-stack_has-button]=\"button()\">\n            <ng-content select=\"[kbq-alert-control]\" />\n        </div>\n    }\n</div>\n\n@if (closeButton()) {\n    <div class=\"kbq-alert__close-button\" (click)=\"closed.emit()\">\n        <ng-content select=\"[kbq-alert-close-button]\" />\n    </div>\n}\n", styles: [".kbq-alert{display:flex;box-sizing:border-box}.kbq-alert .kbq-alert__content_title{margin-bottom:var(--kbq-size-xxs)}.kbq-alert__icon{display:inline-flex;align-items:flex-start}.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);padding:var(--kbq-alert-size-normal-container-padding-top) var(--kbq-alert-size-normal-container-padding-right) var(--kbq-alert-size-normal-container-padding-bottom) var(--kbq-alert-size-normal-container-padding-left)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{margin:var(--kbq-alert-size-normal-no-title-icon-margin-top) var(--kbq-alert-size-normal-icon-margin-right) var(--kbq-alert-size-normal-icon-margin-bottom) var(--kbq-alert-size-normal-icon-margin-left);padding-top:var(--kbq-alert-size-normal-no-title-icon-padding-top)}.kbq-alert.kbq-alert_normal .kbq-alert__icon.kbq-alert__icon_title{margin-top:var(--kbq-alert-size-normal-icon-margin-top);padding-top:var(--kbq-alert-size-normal-icon-padding-top)}.kbq-alert.kbq-alert_normal .kbq-alert__content{padding:var(--kbq-alert-size-normal-content-padding-top) var(--kbq-alert-size-normal-content-padding-right) var(--kbq-alert-size-normal-content-padding-bottom) var(--kbq-alert-size-normal-content-padding-left)}.kbq-alert.kbq-alert_normal .kbq-alert__title{margin-bottom:var(--kbq-alert-size-normal-title-margin-bottom)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kbq-size-m);padding-top:var(--kbq-alert-size-normal-button-stack-padding-top);padding-bottom:var(--kbq-alert-size-normal-button-stack-padding-bottom)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack_has-button{padding-top:var(--kbq-size-m)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button{margin-top:var(--kbq-alert-size-normal-close-button-margin-top);margin-left:var(--kbq-alert-size-normal-close-button-margin-left)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button .kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-normal-vertical-padding: var(--kbq-size-xxs)}.kbq-alert.kbq-alert_compact{border-radius:var(--kbq-alert-size-compact-container-border-radius);padding:var(--kbq-alert-size-compact-container-padding-top) var(--kbq-alert-size-compact-container-padding-right) var(--kbq-alert-size-compact-container-padding-bottom) var(--kbq-alert-size-compact-container-padding-left)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{margin-top:var(--kbq-alert-size-compact-no-title-icon-margin-top);margin-right:var(--kbq-alert-size-compact-icon-margin-right);padding-top:var(--kbq-alert-size-compact-no-title-icon-padding-top)}.kbq-alert.kbq-alert_compact .kbq-alert__icon.kbq-alert__icon_title{margin-top:var(--kbq-alert-size-compact-icon-margin-top);padding-top:var(--kbq-alert-size-compact-icon-padding-top)}.kbq-alert.kbq-alert_compact .kbq-alert__content{padding:var(--kbq-alert-size-compact-content-padding-top) var(--kbq-alert-size-compact-content-padding-right) var(--kbq-alert-size-compact-content-padding-bottom) var(--kbq-alert-size-compact-content-padding-left)}.kbq-alert.kbq-alert_compact .kbq-alert__title{margin-bottom:var(--kbq-alert-size-compact-title-margin-bottom)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kbq-size-m);padding-top:var(--kbq-alert-size-compact-button-stack-padding-top);padding-bottom:var(--kbq-alert-size-compact-button-stack-padding-bottom)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack_has-button{padding-top:var(--kbq-size-m)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button{margin-top:var(--kbq-alert-size-compact-close-button-margin-top);margin-left:var(--kbq-alert-size-compact-close-button-margin-left)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button .kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-normal-vertical-padding: var(--kbq-size-xxs)}.kbq-alert.kbq-alert_default.kbq-alert_error{background:var(--kbq-alert-default-error-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_error .kbq-alert__title{color:var(--kbq-alert-default-error-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_error .kbq-alert__text{color:var(--kbq-alert-default-error-container-text)}.kbq-alert.kbq-alert_default.kbq-alert_warning{background:var(--kbq-alert-default-warning-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_warning .kbq-alert__title{color:var(--kbq-alert-default-warning-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_warning .kbq-alert__text{color:var(--kbq-alert-default-warning-container-text)}.kbq-alert.kbq-alert_default.kbq-alert_success{background:var(--kbq-alert-default-success-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_success .kbq-alert__title{color:var(--kbq-alert-default-success-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_success .kbq-alert__text{color:var(--kbq-alert-default-success-container-text)}.kbq-alert.kbq-alert_default.kbq-alert_info{background:var(--kbq-alert-default-info-container-background)}.kbq-alert.kbq-alert_default.kbq-alert_info .kbq-alert__title{color:var(--kbq-alert-default-info-container-title)}.kbq-alert.kbq-alert_default.kbq-alert_info .kbq-alert__text{color:var(--kbq-alert-default-info-container-text)}.kbq-alert.kbq-alert_default .kbq-alert__icon>.kbq-icon:not(.kbq-icon-item,.kbq-icon-button){--kbq-icon-warning-color: var(--kbq-foreground-warning);--kbq-icon-success-color: var(--kbq-foreground-success)}.kbq-alert.kbq-alert_colored.kbq-alert_error{background:var(--kbq-alert-colored-error-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_error .kbq-alert__title{color:var(--kbq-alert-colored-error-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_error .kbq-alert__text{color:var(--kbq-alert-colored-error-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_warning{background:var(--kbq-alert-colored-warning-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_warning .kbq-alert__title{color:var(--kbq-alert-colored-warning-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_warning .kbq-alert__text{color:var(--kbq-alert-colored-warning-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_success{background:var(--kbq-alert-colored-success-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_success .kbq-alert__title{color:var(--kbq-alert-colored-success-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_success .kbq-alert__text{color:var(--kbq-alert-colored-success-container-text)}.kbq-alert.kbq-alert_colored.kbq-alert_info{background:var(--kbq-alert-colored-info-container-background)}.kbq-alert.kbq-alert_colored.kbq-alert_info .kbq-alert__title{color:var(--kbq-alert-colored-info-container-title)}.kbq-alert.kbq-alert_colored.kbq-alert_info .kbq-alert__text{color:var(--kbq-alert-colored-info-container-text)}.kbq-alert{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-alert .kbq-alert__title{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-alert.kbq-alert_compact .kbq-alert__title{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n", ":where(.kbq-alert){--kbq-alert-size-normal-container-border-radius: var(--kbq-size-m);--kbq-alert-size-normal-container-padding-top: 0;--kbq-alert-size-normal-container-padding-right: var(--kbq-size-s);--kbq-alert-size-normal-container-padding-bottom: 0;--kbq-alert-size-normal-container-padding-left: var(--kbq-size-s);--kbq-alert-size-normal-content-padding-top: var(--kbq-size-l);--kbq-alert-size-normal-content-padding-right: var(--kbq-size-s);--kbq-alert-size-normal-content-padding-bottom: var(--kbq-size-l);--kbq-alert-size-normal-content-padding-left: var(--kbq-size-m);--kbq-alert-size-normal-icon-margin-top: var(--kbq-size-l);--kbq-alert-size-normal-icon-margin-right: 0;--kbq-alert-size-normal-icon-margin-bottom: var(--kbq-size-l);--kbq-alert-size-normal-icon-margin-left: var(--kbq-size-m);--kbq-alert-size-normal-icon-padding-top: var(--kbq-size-xxs);--kbq-alert-size-normal-title-margin-bottom: var(--kbq-size-xxs);--kbq-alert-size-normal-close-button-margin-top: 10px;--kbq-alert-size-normal-close-button-margin-left: var(--kbq-size-3xs);--kbq-alert-size-normal-button-stack-padding-top: var(--kbq-size-s);--kbq-alert-size-normal-button-stack-padding-bottom: var(--kbq-size-3xs);--kbq-alert-size-normal-no-title-icon-margin-top: var(--kbq-size-l);--kbq-alert-size-normal-no-title-icon-padding-top: var(--kbq-size-3xs);--kbq-alert-size-compact-container-border-radius: var(--kbq-size-m);--kbq-alert-size-compact-container-padding-top: 0;--kbq-alert-size-compact-container-padding-right: var(--kbq-size-s);--kbq-alert-size-compact-container-padding-bottom: 0;--kbq-alert-size-compact-container-padding-left: var(--kbq-size-l);--kbq-alert-size-compact-content-padding-top: var(--kbq-size-m);--kbq-alert-size-compact-content-padding-right: var(--kbq-size-s);--kbq-alert-size-compact-content-padding-bottom: var(--kbq-size-m);--kbq-alert-size-compact-content-padding-left: 0;--kbq-alert-size-compact-icon-margin-top: var(--kbq-size-m);--kbq-alert-size-compact-icon-margin-right: var(--kbq-size-s);--kbq-alert-size-compact-icon-padding-top: var(--kbq-size-xxs);--kbq-alert-size-compact-title-margin-bottom: var(--kbq-size-3xs);--kbq-alert-size-compact-close-button-margin-top: 10px;--kbq-alert-size-compact-close-button-margin-left: var(--kbq-size-3xs);--kbq-alert-size-compact-button-stack-padding-top: var(--kbq-size-s);--kbq-alert-size-compact-button-stack-padding-bottom: var(--kbq-size-3xs);--kbq-alert-size-compact-no-title-icon-margin-top: var(--kbq-size-m);--kbq-alert-size-compact-no-title-icon-padding-top: var(--kbq-size-3xs);--kbq-alert-default-error-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-error-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-error-container-text: var(--kbq-foreground-contrast);--kbq-alert-default-warning-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-warning-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-warning-container-text: var(--kbq-foreground-contrast);--kbq-alert-default-success-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-success-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-success-container-text: var(--kbq-foreground-contrast);--kbq-alert-default-info-container-background: var(--kbq-background-contrast-less);--kbq-alert-default-info-container-title: var(--kbq-foreground-contrast);--kbq-alert-default-info-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-error-container-background: var(--kbq-background-error-less);--kbq-alert-colored-error-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-error-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-warning-container-background: var(--kbq-background-warning-less);--kbq-alert-colored-warning-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-warning-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-success-container-background: var(--kbq-background-success-less);--kbq-alert-colored-success-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-success-container-text: var(--kbq-foreground-contrast);--kbq-alert-colored-info-container-background: var(--kbq-background-theme-less);--kbq-alert-colored-info-container-title: var(--kbq-foreground-contrast);--kbq-alert-colored-info-container-text: var(--kbq-foreground-contrast)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { iconItem: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqIconItem), { ...{ descendants: false }, isSignal: true }] }], icon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqIcon), { ...{ descendants: false }, isSignal: true }] }], button: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqButton), { isSignal: true }] }], title: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqAlertTitle), { ...{ descendants: false }, isSignal: true }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqAlertControl), { ...{ descendants: false }, isSignal: true }] }], closeButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqAlertCloseButton), { ...{ descendants: false }, isSignal: true }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], alertStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertStyle", required: false }] }], alertColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertColor", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 class KbqAlertModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqAlertModule, imports: [A11yModule,
-            PlatformModule,
-            KbqAlert,
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqAlertModule, imports: [KbqAlert,
             KbqAlertTitle,
             KbqAlertCloseButton,
             KbqAlertControl], exports: [KbqAlert,
             KbqAlertTitle,
             KbqAlertCloseButton,
             KbqAlertControl] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlertModule, imports: [A11yModule,
-            PlatformModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlertModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        A11yModule,
-                        PlatformModule,
                         KbqAlert,
                         KbqAlertTitle,
                         KbqAlertCloseButton,

package/fesm2022/koobiq-components-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-alert.mjs","sources":["../../../packages/components/alert/alert.component.ts","../../../packages/components/alert/alert.component.html","../../../packages/components/alert/alert.module.ts","../../../packages/components/alert/koobiq-components-alert.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    Component,\n    Directive,\n    Input,\n    ViewEncapsulation,\n    contentChild,\n    input\n} from '@angular/core';\nimport { KbqButton } from '@koobiq/components/button';\nimport { KbqComponentColors } from '@koobiq/components/core';\nimport { KbqIcon, KbqIconItem } from '@koobiq/components/icon';\n\nexport enum KbqAlertStyles {\n    Default = 'default',\n    Colored = 'colored'\n}\n\nexport enum KbqAlertColors {\n    Error = 'error',\n    Warning = 'warning',\n    Success = 'success',\n    Info = 'info'\n}\n\n@Directive({\n    selector: '[kbq-alert-title]',\n    host: {\n        class: 'kbq-alert__title'\n    }\n})\nexport class KbqAlertTitle {}\n\n@Directive({\n    selector: '[kbq-alert-close-button]',\n    host: {\n        class: 'kbq-alert-close-button'\n    }\n})\nexport class KbqAlertCloseButton {}\n\n@Directive({\n    selector: '[kbq-alert-control]',\n    host: {\n        class: 'kbq-alert-control'\n    }\n})\nexport class KbqAlertControl {}\n\n@Component({\n    selector: 'kbq-alert',\n    templateUrl: './alert.component.html',\n    styleUrls: ['alert.component.scss', 'alert-tokens.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-alert',\n        '[class]': 'alertColor',\n        '[class.kbq-alert_normal]': '!compact()',\n        '[class.kbq-alert_compact]': 'compact()',\n        '[class.kbq-alert_default]': '!isColored',\n        '[class.kbq-alert_colored]': 'isColored',\n        '[class.kbq-alert_dismissible]': 'closeButton()'\n    }\n})\nexport class KbqAlert implements AfterContentInit {\n    readonly iconItem = contentChild(KbqIconItem);\n    readonly icon = contentChild(KbqIcon);\n    readonly button = contentChild(KbqButton);\n    readonly title = contentChild(KbqAlertTitle);\n    readonly control = contentChild(KbqAlertControl);\n    readonly closeButton = contentChild(KbqAlertCloseButton);\n\n    readonly compact = input<boolean>(false);\n    readonly alertStyle = input<KbqAlertStyles | string>(KbqAlertStyles.Default);\n\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input()\n    get alertColor(): string {\n        return `kbq-alert_${this._alertColor}`;\n    }\n\n    set alertColor(value: string | KbqAlertColors) {\n        this._alertColor = value || KbqAlertColors.Info;\n    }\n\n    private _alertColor: string | KbqAlertColors = KbqAlertColors.Info;\n\n    get isColored(): boolean {\n        return this.alertStyle() === KbqAlertStyles.Colored;\n    }\n\n    ngAfterContentInit(): void {\n        const icon = this.icon() || this.iconItem();\n\n        if (icon?.color === KbqComponentColors.Empty) {\n            icon.color = this._alertColor === KbqAlertColors.Info ? KbqComponentColors.Contrast : this._alertColor;\n        }\n    }\n}\n","@if (iconItem() || icon()) {\n    <div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title()\">\n        <ng-content select=\"[kbq-icon-item],[kbq-icon]\" />\n    </div>\n}\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title()\">\n    <ng-content select=\"[kbq-alert-title]\" />\n\n    <div class=\"kbq-alert__text\">\n        <ng-content />\n    </div>\n\n    @if (control()) {\n        <div class=\"kbq-alert__button-stack\" [class.kbq-alert__button-stack_has-button]=\"button()\">\n            <ng-content select=\"[kbq-alert-control]\" />\n        </div>\n    }\n</div>\n\n<div class=\"kbq-alert__close-button\" [hidden]=\"!closeButton()\">\n    <ng-content select=\"[kbq-alert-close-button]\" />\n</div>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { PlatformModule } from '@angular/cdk/platform';\nimport { NgModule } from '@angular/core';\nimport { KbqAlert, KbqAlertCloseButton, KbqAlertControl, KbqAlertTitle } from './alert.component';\n\n@NgModule({\n    imports: [\n        A11yModule,\n        PlatformModule,\n        KbqAlert,\n        KbqAlertTitle,\n        KbqAlertCloseButton,\n        KbqAlertControl\n    ],\n    exports: [\n        KbqAlert,\n        KbqAlertTitle,\n        KbqAlertCloseButton,\n        KbqAlertControl\n    ]\n})\nexport class KbqAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koobiq-components-alert.mjs","sources":["../../../packages/components/alert/alert.component.ts","../../../packages/components/alert/alert.component.html","../../../packages/components/alert/alert.module.ts","../../../packages/components/alert/koobiq-components-alert.ts"],"sourcesContent":["import {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    Directive,\n    effect,\n    input,\n    output,\n    ViewEncapsulation\n} from '@angular/core';\nimport { KbqButton } from '@koobiq/components/button';\nimport { KbqComponentColors, KbqEnumValues } from '@koobiq/components/core';\nimport { KbqIcon, KbqIconItem } from '@koobiq/components/icon';\n\n/** Visual style of an alert. */\nexport enum KbqAlertStyles {\n    /** Neutral background; the status is conveyed by the icon color only. */\n    Default = 'default',\n    /** Colored background matching the status — use to draw attention when a default alert gets lost on screen. */\n    Colored = 'colored'\n}\n\n/** Status conveyed by an alert. Drives the background (colored style) and the auto-tinted status icon. */\nexport enum KbqAlertColors {\n    Error = 'error',\n    Warning = 'warning',\n    Success = 'success',\n    Info = 'info'\n}\n\n/** Maps an alert status to the projected status icon's color. `Info` has no icon color of its own, so it uses `Contrast`. */\nconst alertIconColors: Record<KbqEnumValues<KbqAlertColors>, KbqComponentColors> = {\n    [KbqAlertColors.Error]: KbqComponentColors.Error,\n    [KbqAlertColors.Warning]: KbqComponentColors.Warning,\n    [KbqAlertColors.Success]: KbqComponentColors.Success,\n    [KbqAlertColors.Info]: KbqComponentColors.Contrast\n};\n\n/** Marks the projected alert heading. */\n@Directive({\n    selector: '[kbq-alert-title]',\n    host: {\n        class: 'kbq-alert__title'\n    },\n    exportAs: 'kbqAlertTitle'\n})\nexport class KbqAlertTitle {}\n\n/** Marks the projected close control (place it on a native `<button>` with an accessible name). */\n@Directive({\n    selector: '[kbq-alert-close-button]',\n    host: {\n        class: 'kbq-alert-close-button'\n    },\n    exportAs: 'kbqAlertCloseButton'\n})\nexport class KbqAlertCloseButton {}\n\n/** Marks a projected action control (link or button) shown in the alert's button stack. */\n@Directive({\n    selector: '[kbq-alert-control]',\n    host: {\n        class: 'kbq-alert-control'\n    },\n    exportAs: 'kbqAlertControl'\n})\nexport class KbqAlertControl {}\n\n/**\n * Shows important information on a page. Can carry a hint, signal a status change, or indicate a problem.\n *\n * ```html\n * <kbq-alert [alertColor]=\"'error'\" [alertStyle]=\"'colored'\">Something went wrong</kbq-alert>\n * ```\n *\n * For a dynamically inserted alert, add `role=\"alert\"` (or `aria-live`) on the host so assistive\n * technology announces it — see the component guide.\n */\n@Component({\n    selector: 'kbq-alert',\n    templateUrl: './alert.component.html',\n    styleUrls: ['alert.component.scss', 'alert-tokens.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-alert',\n        '[class]': 'alertColorClass()',\n        '[class.kbq-alert_normal]': '!compact()',\n        '[class.kbq-alert_compact]': 'compact()',\n        '[class.kbq-alert_default]': '!isColored()',\n        '[class.kbq-alert_colored]': 'isColored()',\n        '[class.kbq-alert_dismissible]': 'closeButton()'\n    },\n    exportAs: 'kbqAlert'\n})\nexport class KbqAlert {\n    /** @docs-private */\n    protected readonly iconItem = contentChild(KbqIconItem, { descendants: false });\n    /** @docs-private */\n    protected readonly icon = contentChild(KbqIcon, { descendants: false });\n    // NB: `button` must keep the default `descendants: true` — it does not gate a projection slot, it\n    // reports whether the already-projected `[kbq-alert-control]` slot contains a button (which can sit\n    // inside a wrapper element), and drives the `_has-button` button-stack padding.\n    /** @docs-private */\n    protected readonly button = contentChild(KbqButton);\n    /** @docs-private */\n    protected readonly title = contentChild(KbqAlertTitle, { descendants: false });\n    /** @docs-private */\n    protected readonly control = contentChild(KbqAlertControl, { descendants: false });\n    /** @docs-private */\n    protected readonly closeButton = contentChild(KbqAlertCloseButton, { descendants: false });\n\n    /** Whether the alert uses the denser compact size. */\n    readonly compact = input(false, { transform: booleanAttribute });\n\n    /** Visual style — neutral `default` or the attention-drawing `colored` background. */\n    readonly alertStyle = input<KbqEnumValues<KbqAlertStyles>>(KbqAlertStyles.Default);\n\n    /**\n     * Status of the alert. Drives the background in the `colored` style and auto-tints an uncolored\n     * projected status icon to the matching color (`info` icons become `contrast`).\n     * @default 'info'\n     */\n    readonly alertColor = input(KbqAlertColors.Info, {\n        transform: (value: KbqEnumValues<KbqAlertColors> | null | undefined): KbqEnumValues<KbqAlertColors> =>\n            value || KbqAlertColors.Info\n    });\n\n    /** Emitted when the projected close control is activated. The consumer is responsible for hiding the alert. */\n    readonly closed = output<void>();\n\n    /** @docs-private */\n    protected readonly alertColorClass = computed(() => `kbq-alert_${this.alertColor()}`);\n    /** @docs-private */\n    protected readonly isColored = computed(() => this.alertStyle() === KbqAlertStyles.Colored);\n    /** The projected status icon, whichever slot it came from. @docs-private */\n    protected readonly projectedIcon = computed(() => this.icon() || this.iconItem());\n\n    /** Last color this component auto-assigned to the icon; lets us correct color on change without ignoring consumer's color. */\n    private lastAutoColor: KbqComponentColors | null = null;\n\n    constructor() {\n        // Keep the uncolored projected icon in sync with the alert status, reacting to both a later\n        // `alertColor` change and a late-arriving icon. Only re-tint an icon we own — one that is still\n        // `Empty` or still carries the color we last set — so an explicit consumer `[color]` is respected.\n        effect(() => {\n            const icon = this.projectedIcon();\n            const nextColor = alertIconColors[this.alertColor()];\n\n            if (icon && (icon.color === KbqComponentColors.Empty || icon.color === this.lastAutoColor)) {\n                icon.color = nextColor;\n                this.lastAutoColor = nextColor;\n            }\n        });\n    }\n}\n","@if (projectedIcon()) {\n    <div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title()\">\n        <ng-content select=\"[kbq-icon-item],[kbq-icon]\" />\n    </div>\n}\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title()\">\n    <ng-content select=\"[kbq-alert-title]\" />\n\n    <div class=\"kbq-alert__text\">\n        <ng-content />\n    </div>\n\n    @if (control()) {\n        <div class=\"kbq-alert__button-stack\" [class.kbq-alert__button-stack_has-button]=\"button()\">\n            <ng-content select=\"[kbq-alert-control]\" />\n        </div>\n    }\n</div>\n\n@if (closeButton()) {\n    <div class=\"kbq-alert__close-button\" (click)=\"closed.emit()\">\n        <ng-content select=\"[kbq-alert-close-button]\" />\n    </div>\n}\n","import { NgModule } from '@angular/core';\nimport { KbqAlert, KbqAlertCloseButton, KbqAlertControl, KbqAlertTitle } from './alert.component';\n\n@NgModule({\n    imports: [\n        KbqAlert,\n        KbqAlertTitle,\n        KbqAlertCloseButton,\n        KbqAlertControl\n    ],\n    exports: [\n        KbqAlert,\n        KbqAlertTitle,\n        KbqAlertCloseButton,\n        KbqAlertControl\n    ]\n})\nexport class KbqAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koobiq-components-app-switcher.mjs

@@ -385,7 +385,7 @@ class KbqAppSwitcherComponent extends KbqPopUp {
         this.configuration = KBQ_APP_SWITCHER_DEFAULT_CONFIGURATION;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAppSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqAppSwitcherComponent, isStandalone: true, selector: "kbq-app-switcher", inputs: { trigger: "trigger" }, host: { classAttribute: "kbq-app-switcher" }, viewQueries: [{ propertyName: "input", first: true, predicate: KbqInput, descendants: true, isSignal: true }, { propertyName: "otherSites", first: true, predicate: ["otherSites"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (trigger.withSearch) {\n    <div class=\"kbq-app-switcher__search-container\" (mouseenter)=\"otherSites()?.close()\">\n        <kbq-form-field noBorders>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.searchPlaceholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                [formControl]=\"searchControl\"\n                (keydown.escape)=\"escapeHandler()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    </div>\n\n    <kbq-divider />\n}\n\n<div kbq-scrollbar>\n    @if (!searchControl.getRawValue()) {\n        <div class=\"kbq-app-switcher__app-container\" (mouseenter)=\"otherSites()?.close()\">\n            @if (trigger.sitesMode) {\n                <div class=\"kbq-app-switcher-group-header\">\n                    <div class=\"kbq-app-switcher-group-header__text\">{{ trigger.selectedSite?.name }}</div>\n                    @if (trigger.selectedSite?.status) {\n                        <kbq-badge class=\"kbq-app-switcher-group-header__badge\" [compact]=\"true\">\n                            {{ trigger.selectedSite.status }}\n                        </kbq-badge>\n                    }\n                </div>\n            }\n\n            <kbq-dropdown [class]=\"'kbq-app-switcher-sites'\">\n                <div kbqDropdownStaticContent class=\"kbq-app-switcher-site\">\n                    @for (app of trigger.currentApps; track app) {\n                        @if (!app.aliases) {\n                            <a\n                                href=\"{{ app.link }}\"\n                                kbq-app-switcher-list-item\n                                [class.kbq-selected]=\"app.id === trigger.selectedApp?.id\"\n                                [app]=\"app\"\n                                [toggle]=\"!!app.aliases\"\n                            ></a>\n                        } @else {\n                            <div\n                                #appSwitcherApp=\"kbqAppSwitcherApp\"\n                                kbq-app-switcher-list-item\n                                [app]=\"app\"\n                                [toggle]=\"!!app.aliases\"\n                            ></div>\n\n                            @if (!appSwitcherApp.collapsed) {\n                                @for (alias of app.aliases; track alias) {\n                                    <a\n                                        href=\"{{ alias.link }}\"\n                                        class=\"kbq-app-switcher-site_nested\"\n                                        kbq-app-switcher-list-item\n                                        [class.kbq-selected]=\"alias.id === trigger.selectedApp?.id\"\n                                        [app]=\"alias\"\n                                    ></a>\n                                }\n                            }\n                        }\n                    }\n                </div>\n            </kbq-dropdown>\n        </div>\n\n        @if (trigger.sitesMode) {\n            <kbq-divider />\n\n            <div class=\"kbq-app-switcher__sites-container\">\n                <div class=\"kbq-app-switcher-group-header\">\n                    <div class=\"kbq-app-switcher-group-header__text\">{{ localeData.sitesHeader }}</div>\n                </div>\n\n                <kbq-dropdown #otherSites=\"kbqDropdown\">\n                    <div kbqDropdownStaticContent class=\"kbq-app-switcher-sites\">\n                        @for (site of trigger.sites; track site) {\n                            @if (site.id !== trigger.selectedSite?.id) {\n                                <div\n                                    [kbq-app-switcher-dropdown-site]=\"site\"\n                                    [kbqDropdownTriggerFor]=\"dropdownWithSelectedSite\"\n                                    [offsetX]=\"0\"\n                                    (mouseenter)=\"activeSite = site\"\n                                ></div>\n                            }\n                        }\n                    </div>\n                </kbq-dropdown>\n            </div>\n\n            <kbq-dropdown #dropdownWithSelectedSite=\"kbqDropdown\" [class]=\"'kbq-app-switcher-sites'\">\n                @for (app of activeSite?.apps; track app) {\n                    @if (app.aliases) {\n                        <div\n                            #dropdownWithGroupedAppsTrigger=\"kbqDropdownTrigger\"\n                            [kbq-app-switcher-dropdown-app]=\"app\"\n                            [kbqDropdownTriggerFor]=\"dropdownWithGroupedApps\"\n                            [offsetX]=\"0\"\n                            [class.kbq-pressed]=\"dropdownWithGroupedAppsTrigger.opened\"\n                            (mouseenter)=\"activeApp = app\"\n                        ></div>\n                    } @else {\n                        <a\n                            href=\"{{ app.link }}\"\n                            [kbq-app-switcher-dropdown-app]=\"app\"\n                            (click)=\"selectAppInSite(activeSite, app)\"\n                        ></a>\n                    }\n                }\n            </kbq-dropdown>\n\n            <kbq-dropdown #dropdownWithGroupedApps=\"kbqDropdown\" [class]=\"'kbq-app-switcher-sites'\">\n                @for (alias of activeApp?.aliases; track alias) {\n                    <a\n                        href=\"{{ alias.link }}\"\n                        [kbq-app-switcher-dropdown-app]=\"alias\"\n                        (click)=\"selectAppInSite(activeSite, alias)\"\n                    ></a>\n                }\n            </kbq-dropdown>\n        }\n    } @else {\n        <div class=\"kbq-app-switcher__search-result\">\n            <kbq-dropdown [class]=\"'kbq-app-switcher-sites'\">\n                <div kbqDropdownStaticContent class=\"kbq-app-switcher-site\">\n                    @for (site of filteredSites; track site) {\n                        @if (trigger.sitesMode && site.apps) {\n                            <kbq-optgroup label=\"{{ site.name }}\" />\n                        }\n\n                        @for (app of site.apps; track app) {\n                            <a href=\"{{ app.link }}\" kbq-app-switcher-list-item [app]=\"app\"></a>\n                        }\n                    } @empty {\n                        <div class=\"kbq-app-switcher__empty-search-result\">{{ localeData.searchEmptyResult }}</div>\n                    }\n                </div>\n            </kbq-dropdown>\n        </div>\n    }\n</div>\n", styles: [".kbq-app-switcher{position:relative;display:flex;flex-direction:column;margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);width:320px;border-radius:var(--kbq-size-xs);box-shadow:var(--kbq-shadow-popup);box-sizing:border-box;z-index:1}.kbq-app-switcher__search-container{padding-top:var(--kbq-size-xxs)}.kbq-app-switcher__search-result{max-width:320px;min-height:0;padding:var(--kbq-size-s) var(--kbq-size-xxs)}.kbq-app-switcher__empty-search-result{display:flex;justify-content:center;align-items:center;height:96px}.kbq-app-switcher__app-container{display:flex;flex-direction:column;min-height:0;padding:var(--kbq-size-s) var(--kbq-size-xxs)}.kbq-app-switcher-group-header{padding:var(--kbq-size-s) var(--kbq-size-m);display:flex;flex-direction:row;justify-content:space-between}.kbq-app-switcher__sites-container{padding:var(--kbq-size-xxs)}.kbq-app-switcher{background:var(--kbq-background-card)}.kbq-app-switcher .kbq-app-switcher-group-header,.kbq-app-switcher__empty-search-result{color:var(--kbq-foreground-contrast-secondary)}.kbq-app-switcher,.kbq-app-switcher__empty-search-result{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-app-switcher-group-header__text{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}.kbq-app-switcher-group-header__badge{font-size:var(--kbq-typography-text-compact-medium-font-size);font-style:var(--kbq-typography-text-compact-medium-font-style);font-weight:var(--kbq-typography-text-compact-medium-font-weight);line-height:var(--kbq-typography-text-compact-medium-line-height);font-family:var(--kbq-typography-text-compact-medium-font-family);text-transform:var(--kbq-typography-text-compact-medium-text-transform);font-feature-settings:var(--kbq-typography-text-compact-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-medium-letter-spacing)}.kbq-app-switch-tree-option__text{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i2.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i3.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i3.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i3.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i3.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i5.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i1.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i1.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i7.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "directive", type: i7.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "demoteOverlay", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "directive", type: i7.KbqDropdownStaticContent, selector: "[kbqDropdownStaticContent]" }, { kind: "ngmodule", type: KbqScrollbarModule }, { kind: "component", type: i8.KbqScrollbar, selector: "kbq-scrollbar, [kbq-scrollbar]", inputs: ["initializationTarget", "options", "events", "defer"], outputs: ["onInitialize", "onUpdate", "onDestroy", "onScroll"], exportAs: ["kbqScrollbar"] }, { kind: "ngmodule", type: KbqOptionModule }, { kind: "component", type: i9.KbqOptgroup, selector: "kbq-optgroup", inputs: ["label", "disabled"], exportAs: ["kbqOptgroup"] }, { kind: "component", type: KbqAppSwitcherDropdownApp, selector: "[kbq-app-switcher-dropdown-app]", inputs: ["kbq-app-switcher-dropdown-app"], exportAs: ["kbqAppSwitcherDropdownApp"] }, { kind: "component", type: KbqAppSwitcherDropdownSite, selector: "[kbq-app-switcher-dropdown-site]", inputs: ["kbq-app-switcher-dropdown-site"], exportAs: ["kbqAppSwitcherDropdownSite"] }, { kind: "component", type: KbqAppSwitcherListItem, selector: "[kbq-app-switcher-list-item]", inputs: ["app", "toggle", "collapsed"], exportAs: ["kbqAppSwitcherApp"] }], animations: [kbqAppSwitcherAnimations.state], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqAppSwitcherComponent, isStandalone: true, selector: "kbq-app-switcher", inputs: { trigger: "trigger" }, host: { classAttribute: "kbq-app-switcher" }, viewQueries: [{ propertyName: "input", first: true, predicate: KbqInput, descendants: true, isSignal: true }, { propertyName: "otherSites", first: true, predicate: ["otherSites"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (trigger.withSearch) {\n    <div class=\"kbq-app-switcher__search-container\" (mouseenter)=\"otherSites()?.close()\">\n        <kbq-form-field noBorders>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.searchPlaceholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                [formControl]=\"searchControl\"\n                (keydown.escape)=\"escapeHandler()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    </div>\n\n    <kbq-divider />\n}\n\n<div kbq-scrollbar>\n    @if (!searchControl.getRawValue()) {\n        <div class=\"kbq-app-switcher__app-container\" (mouseenter)=\"otherSites()?.close()\">\n            @if (trigger.sitesMode) {\n                <div class=\"kbq-app-switcher-group-header\">\n                    <div class=\"kbq-app-switcher-group-header__text\">{{ trigger.selectedSite?.name }}</div>\n                    @if (trigger.selectedSite?.status) {\n                        <kbq-badge class=\"kbq-app-switcher-group-header__badge\" [compact]=\"true\">\n                            {{ trigger.selectedSite.status }}\n                        </kbq-badge>\n                    }\n                </div>\n            }\n\n            <kbq-dropdown [class]=\"'kbq-app-switcher-sites'\">\n                <div kbqDropdownStaticContent class=\"kbq-app-switcher-site\">\n                    @for (app of trigger.currentApps; track app) {\n                        @if (!app.aliases) {\n                            <a\n                                href=\"{{ app.link }}\"\n                                kbq-app-switcher-list-item\n                                [class.kbq-selected]=\"app.id === trigger.selectedApp?.id\"\n                                [app]=\"app\"\n                                [toggle]=\"!!app.aliases\"\n                            ></a>\n                        } @else {\n                            <div\n                                #appSwitcherApp=\"kbqAppSwitcherApp\"\n                                kbq-app-switcher-list-item\n                                [app]=\"app\"\n                                [toggle]=\"!!app.aliases\"\n                            ></div>\n\n                            @if (!appSwitcherApp.collapsed) {\n                                @for (alias of app.aliases; track alias) {\n                                    <a\n                                        href=\"{{ alias.link }}\"\n                                        class=\"kbq-app-switcher-site_nested\"\n                                        kbq-app-switcher-list-item\n                                        [class.kbq-selected]=\"alias.id === trigger.selectedApp?.id\"\n                                        [app]=\"alias\"\n                                    ></a>\n                                }\n                            }\n                        }\n                    }\n                </div>\n            </kbq-dropdown>\n        </div>\n\n        @if (trigger.sitesMode) {\n            <kbq-divider />\n\n            <div class=\"kbq-app-switcher__sites-container\">\n                <div class=\"kbq-app-switcher-group-header\">\n                    <div class=\"kbq-app-switcher-group-header__text\">{{ localeData.sitesHeader }}</div>\n                </div>\n\n                <kbq-dropdown #otherSites=\"kbqDropdown\">\n                    <div kbqDropdownStaticContent class=\"kbq-app-switcher-sites\">\n                        @for (site of trigger.sites; track site) {\n                            @if (site.id !== trigger.selectedSite?.id) {\n                                <div\n                                    [kbq-app-switcher-dropdown-site]=\"site\"\n                                    [kbqDropdownTriggerFor]=\"dropdownWithSelectedSite\"\n                                    [offsetX]=\"0\"\n                                    (mouseenter)=\"activeSite = site\"\n                                ></div>\n                            }\n                        }\n                    </div>\n                </kbq-dropdown>\n            </div>\n\n            <kbq-dropdown #dropdownWithSelectedSite=\"kbqDropdown\" [class]=\"'kbq-app-switcher-sites'\">\n                @for (app of activeSite?.apps; track app) {\n                    @if (app.aliases) {\n                        <div\n                            #dropdownWithGroupedAppsTrigger=\"kbqDropdownTrigger\"\n                            [kbq-app-switcher-dropdown-app]=\"app\"\n                            [kbqDropdownTriggerFor]=\"dropdownWithGroupedApps\"\n                            [offsetX]=\"0\"\n                            [class.kbq-pressed]=\"dropdownWithGroupedAppsTrigger.opened\"\n                            (mouseenter)=\"activeApp = app\"\n                        ></div>\n                    } @else {\n                        <a\n                            href=\"{{ app.link }}\"\n                            [kbq-app-switcher-dropdown-app]=\"app\"\n                            (click)=\"selectAppInSite(activeSite, app)\"\n                        ></a>\n                    }\n                }\n            </kbq-dropdown>\n\n            <kbq-dropdown #dropdownWithGroupedApps=\"kbqDropdown\" [class]=\"'kbq-app-switcher-sites'\">\n                @for (alias of activeApp?.aliases; track alias) {\n                    <a\n                        href=\"{{ alias.link }}\"\n                        [kbq-app-switcher-dropdown-app]=\"alias\"\n                        (click)=\"selectAppInSite(activeSite, alias)\"\n                    ></a>\n                }\n            </kbq-dropdown>\n        }\n    } @else {\n        <div class=\"kbq-app-switcher__search-result\">\n            <kbq-dropdown [class]=\"'kbq-app-switcher-sites'\">\n                <div kbqDropdownStaticContent class=\"kbq-app-switcher-site\">\n                    @for (site of filteredSites; track site) {\n                        @if (trigger.sitesMode && site.apps) {\n                            <kbq-optgroup label=\"{{ site.name }}\" />\n                        }\n\n                        @for (app of site.apps; track app) {\n                            <a href=\"{{ app.link }}\" kbq-app-switcher-list-item [app]=\"app\"></a>\n                        }\n                    } @empty {\n                        <div class=\"kbq-app-switcher__empty-search-result\">{{ localeData.searchEmptyResult }}</div>\n                    }\n                </div>\n            </kbq-dropdown>\n        </div>\n    }\n</div>\n", styles: [".kbq-app-switcher{position:relative;display:flex;flex-direction:column;margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);width:320px;border-radius:var(--kbq-size-xs);box-shadow:var(--kbq-shadow-popup);box-sizing:border-box;z-index:1}.kbq-app-switcher__search-container{padding-top:var(--kbq-size-xxs)}.kbq-app-switcher__search-result{max-width:320px;min-height:0;padding:var(--kbq-size-s) var(--kbq-size-xxs)}.kbq-app-switcher__empty-search-result{display:flex;justify-content:center;align-items:center;height:96px}.kbq-app-switcher__app-container{display:flex;flex-direction:column;min-height:0;padding:var(--kbq-size-s) var(--kbq-size-xxs)}.kbq-app-switcher-group-header{padding:var(--kbq-size-s) var(--kbq-size-m);display:flex;flex-direction:row;justify-content:space-between}.kbq-app-switcher__sites-container{padding:var(--kbq-size-xxs)}.kbq-app-switcher{background:var(--kbq-background-card)}.kbq-app-switcher .kbq-app-switcher-group-header,.kbq-app-switcher__empty-search-result{color:var(--kbq-foreground-contrast-secondary)}.kbq-app-switcher,.kbq-app-switcher__empty-search-result{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-app-switcher-group-header__text{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}.kbq-app-switcher-group-header__badge{font-size:var(--kbq-typography-text-compact-medium-font-size);font-style:var(--kbq-typography-text-compact-medium-font-style);font-weight:var(--kbq-typography-text-compact-medium-font-weight);line-height:var(--kbq-typography-text-compact-medium-line-height);font-family:var(--kbq-typography-text-compact-medium-font-family);text-transform:var(--kbq-typography-text-compact-medium-text-transform);font-feature-settings:var(--kbq-typography-text-compact-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-medium-letter-spacing)}.kbq-app-switch-tree-option__text{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i2.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i3.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i3.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i3.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i3.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i5.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i1.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i1.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i7.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "directive", type: i7.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "demoteOverlay", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "directive", type: i7.KbqDropdownStaticContent, selector: "[kbqDropdownStaticContent]" }, { kind: "ngmodule", type: KbqScrollbarModule }, { kind: "component", type: i8.KbqScrollbar, selector: "kbq-scrollbar, [kbq-scrollbar]", inputs: ["initializationTarget", "options", "events", "defer"], outputs: ["onInitialize", "onUpdate", "onDestroy", "onScroll"], exportAs: ["kbqScrollbar"] }, { kind: "ngmodule", type: KbqOptionModule }, { kind: "component", type: i9.KbqOptgroup, selector: "kbq-optgroup", inputs: ["label", "disabled"], exportAs: ["kbqOptgroup"] }, { kind: "component", type: KbqAppSwitcherDropdownApp, selector: "[kbq-app-switcher-dropdown-app]", inputs: ["kbq-app-switcher-dropdown-app"], exportAs: ["kbqAppSwitcherDropdownApp"] }, { kind: "component", type: KbqAppSwitcherDropdownSite, selector: "[kbq-app-switcher-dropdown-site]", inputs: ["kbq-app-switcher-dropdown-site"], exportAs: ["kbqAppSwitcherDropdownSite"] }, { kind: "component", type: KbqAppSwitcherListItem, selector: "[kbq-app-switcher-list-item]", inputs: ["app", "toggle", "collapsed"], exportAs: ["kbqAppSwitcherApp"] }], animations: [kbqAppSwitcherAnimations.state], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAppSwitcherComponent, decorators: [{
             type: Component,