@koobiq/components 19.0.0 → 19.1.0

package/app-switcher/app-switcher.d.ts

@@ -116,8 +116,7 @@ export declare class KbqAppSwitcherTrigger extends KbqPopUpTrigger<KbqAppSwitche
     /** Whether the sites are used or not
      * @docs-private */
     get sitesMode(): boolean;
-    /** Whether the sites are used or not
-     * @docs-private */
+    /** @docs-private */
     get currentApps(): KbqAppSwitcherApp[];
     /** Selected application */
     selectedApp: KbqAppSwitcherApp;
@@ -131,7 +130,9 @@ export declare class KbqAppSwitcherTrigger extends KbqPopUpTrigger<KbqAppSwitche
     get sites(): KbqAppSwitcherSite[];
     set sites(value: KbqAppSwitcherSite[]);
     private _parsedSites;
-    /** Array of applications */
+    /**
+     * @deprecated Will be removed in next major release, use `sites` with one element instead.
+     */
     get apps(): KbqAppSwitcherApp[];
     set apps(apps: KbqAppSwitcherApp[]);
     private makeGroupsForApps;

package/checkbox/checkbox.scss

@@ -1,4 +1,3 @@
-@use '../core/styles/common/tokens' as *;
 @use './checkbox-theme' as *;
 
 .kbq-checkbox-checkmark,
@@ -27,10 +26,7 @@
 }
 
 .kbq-checkbox__layout {
-    $padding-left: kbq-sum-series-css-variables(
-        [checkbox-size-normal-width,
-        checkbox-size-normal-horizontal-content-padding]
-    );
+    --padding: calc(var(--kbq-checkbox-size-normal-width) + var(--kbq-checkbox-size-normal-horizontal-content-padding));
 
     box-sizing: initial;
 
@@ -39,7 +35,7 @@
 
     display: inline-flex;
 
-    max-width: calc(100% - $padding-left);
+    max-width: calc(100% - var(--padding));
 
     // `cursor: inherit` ensures that the wrapper element gets the same cursor as the kbq-checkbox
     // (e.g. pointer by default, regular when disabled), instead of the browser default.
@@ -49,7 +45,7 @@
 
     padding-bottom: var(--kbq-checkbox-size-normal-padding-bottom);
 
-    padding-left: $padding-left;
+    padding-left: var(--padding);
 
     vertical-align: top;
 }
@@ -104,16 +100,7 @@
 }
 
 .kbq-checkbox.kbq-checkbox_big {
-    & .kbq-checkbox__layout {
-        $padding-left: kbq-sum-series-css-variables(
-            [ checkbox-size-normal-width,
-            checkbox-size-normal-horizontal-content-padding]
-        );
-
-        max-width: calc(100% - $padding-left);
-
-        padding-left: $padding-left;
-    }
+    --padding: calc(var(--kbq-checkbox-size-big-width) + var(--kbq-checkbox-size-big-horizontal-content-padding));
 
     & .kbq-checkbox__inner-container {
         top: var(--kbq-checkbox-size-big-top);
@@ -152,10 +139,7 @@
 .kbq-checkbox_label-before {
     .kbq-checkbox__layout {
         padding-left: 0;
-        padding-right: kbq-sum-series-css-variables(
-            [ checkbox-size-normal-width,
-            checkbox-size-normal-horizontal-content-padding]
-        );
+        padding-right: var(--padding);
     }
 
     .kbq-checkbox__inner-container {

package/core/locales/en-US.d.ts

@@ -15,13 +15,21 @@ export declare const enUSLocaleData: {
     fileUpload: {
         single: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
         };
         multiple: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             captionTextWhenSelected: string;
             captionTextForCompactSize: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
             title: string;
             gridHeaders: {
                 file: string;

package/core/locales/es-LA.d.ts

@@ -14,13 +14,21 @@ export declare const esLALocaleData: {
     fileUpload: {
         single: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
         };
         multiple: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             captionTextWhenSelected: string;
             captionTextForCompactSize: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
             title: string;
             gridHeaders: {
                 file: string;

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

@@ -60,13 +60,21 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         fileUpload: {
             single: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
             };
             multiple: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 captionTextWhenSelected: string;
                 captionTextForCompactSize: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
                 title: string;
                 gridHeaders: {
                     file: string;
@@ -266,13 +274,21 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         fileUpload: {
             single: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
             };
             multiple: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 captionTextWhenSelected: string;
                 captionTextForCompactSize: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
                 title: string;
                 gridHeaders: {
                     file: string;
@@ -468,13 +484,21 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         fileUpload: {
             single: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
             };
             multiple: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 captionTextWhenSelected: string;
                 captionTextForCompactSize: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
                 title: string;
                 gridHeaders: {
                     file: string;
@@ -676,13 +700,21 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         fileUpload: {
             single: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
             };
             multiple: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 captionTextWhenSelected: string;
                 captionTextForCompactSize: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
                 title: string;
                 gridHeaders: {
                     file: string;
@@ -880,13 +912,21 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         fileUpload: {
             single: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
             };
             multiple: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 captionTextWhenSelected: string;
                 captionTextForCompactSize: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
                 title: string;
                 gridHeaders: {
                     file: string;

package/core/locales/pt-BR.d.ts

@@ -14,13 +14,21 @@ export declare const ptBRLocaleData: {
     fileUpload: {
         single: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
         };
         multiple: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             captionTextWhenSelected: string;
             captionTextForCompactSize: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
             title: string;
             gridHeaders: {
                 file: string;

package/core/locales/ru-RU.d.ts

@@ -15,13 +15,21 @@ export declare const ruRULocaleData: {
     fileUpload: {
         single: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
         };
         multiple: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             captionTextWhenSelected: string;
             captionTextForCompactSize: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
             title: string;
             gridHeaders: {
                 file: string;

package/core/locales/tk-TM.d.ts

@@ -15,13 +15,21 @@ export declare const tkTMLocaleData: {
     fileUpload: {
         single: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
         };
         multiple: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             captionTextWhenSelected: string;
             captionTextForCompactSize: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
             title: string;
             gridHeaders: {
                 file: string;

package/core/locales/types.d.ts

@@ -56,3 +56,24 @@ export type KbqTimeRangeLocaleConfig = {
         option: FormatterDurationTemplate;
     };
 };
+export interface KbqBaseFileUploadLocaleConfig {
+    captionText: string;
+    captionTextOnlyFolder: string;
+    captionTextWithFolder: string;
+    browseLink: string;
+    browseLinkFolder: string;
+    browseLinkFolderMixed?: string;
+}
+export interface KbqMultipleFileUploadLocaleConfig extends KbqBaseFileUploadLocaleConfig {
+    captionTextWhenSelected: string;
+    captionTextForCompactSize: string;
+    title: string;
+    gridHeaders: {
+        file: string;
+        size: string;
+    };
+}
+export type KbqFileUploadLocaleConfig = {
+    single: KbqBaseFileUploadLocaleConfig;
+    multiple: KbqMultipleFileUploadLocaleConfig;
+};

package/core/option/option.d.ts

@@ -17,6 +17,7 @@ export declare class KbqOptionSelectionChange<T = KbqOption> {
 export interface KbqOptionParentComponent {
     multiple?: boolean;
     multiSelection?: boolean;
+    withVirtualScroll?: boolean;
     setSelectedOptionsByClick: (option: KbqOption) => void;
 }
 /**

package/core/styles/common/_visually-hidden.scss

@@ -3,6 +3,7 @@
 @mixin a11y-visually-hidden() {
     .cdk-visually-hidden {
         border: 0;
+        /* stylelint-disable-next-line property-no-deprecated */
         clip: rect(0 0 0 0);
         height: 1px;
         margin: -1px;

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

@@ -20,6 +20,7 @@
 @mixin _kbq-scrollbar() {
     // For Firefox compatibility
     @supports not selector(::-webkit-scrollbar) {
+        /* stylelint-disable-next-line no-invalid-position-declaration */
         scrollbar-width: auto;
     }
 

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

@@ -2,7 +2,7 @@ import { AfterContentInit, DoCheck, ElementRef, EventEmitter, InjectionToken, On
 import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
 import { DateAdapter, ErrorStateMatcher, KbqDateFormats } from '@koobiq/components/core';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
-import { KbqWarningTooltipTrigger } from '@koobiq/components/tooltip';
+import type { KbqWarningTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
 import { KbqCalendar } from './calendar.component';
 import { KbqDatepicker } from './datepicker.component';

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

@@ -355,7 +355,7 @@ class KbqAppSwitcherComponent extends KbqPopUp {
         this.configuration = KBQ_APP_SWITCHER_DEFAULT_CONFIGURATION;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqAppSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 }, { propertyName: "otherSites", first: true, predicate: ["otherSites"], descendants: 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 (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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i2.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i5.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "inset", "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", "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: "19.2.17", 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 }, { propertyName: "otherSites", first: true, predicate: ["otherSites"], descendants: 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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i2.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i5.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "inset", "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", "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: "19.2.17", ngImport: i0, type: KbqAppSwitcherComponent, decorators: [{
             type: Component,
@@ -375,7 +375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         KbqAppSwitcherListItem
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, host: {
                         class: 'kbq-app-switcher'
-                    }, animations: [kbqAppSwitcherAnimations.state], 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 (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"] }]
+                    }, animations: [kbqAppSwitcherAnimations.state], 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"] }]
         }], ctorParameters: () => [], propDecorators: { trigger: [{
                 type: Input
             }], input: [{
@@ -436,18 +436,14 @@ class KbqAppSwitcherTrigger extends KbqPopUpTrigger {
     /** Number of applications to choose from
      * @docs-private */
     get appsCount() {
-        if (this.sitesMode) {
-            return this.originalSites.reduce((acc, site) => acc + site.apps.length, 0);
-        }
-        return this.originalApps.length;
+        return this.originalSites.reduce((acc, site) => acc + site.apps.length, 0);
     }
     /** Whether the sites are used or not
      * @docs-private */
     get sitesMode() {
-        return this.originalSites?.length > 0;
+        return this.originalSites.length > 1;
     }
-    /** Whether the sites are used or not
-     * @docs-private */
+    /** @docs-private */
     get currentApps() {
         return this.sitesMode ? this.selectedSite.apps : this._parsedApps;
     }
@@ -457,14 +453,21 @@ class KbqAppSwitcherTrigger extends KbqPopUpTrigger {
     }
     set sites(value) {
         this.originalSites = value;
-        this._parsedSites = [];
-        value.forEach((site) => {
-            const newSite = { ...site, apps: [] };
-            newSite.apps = this.makeGroupsForApps(site.apps, KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_GROUPING);
-            this._parsedSites.push(newSite);
-        });
+        if (this.originalSites.length === 1) {
+            this._parsedApps = this.makeGroupsForApps(this.originalSites[0].apps, KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_GROUPING);
+        }
+        else {
+            this._parsedSites = [];
+            value.forEach((site) => {
+                const newSite = { ...site, apps: [] };
+                newSite.apps = this.makeGroupsForApps(site.apps, KBQ_MIN_NUMBER_OF_APPS_TO_ENABLE_GROUPING);
+                this._parsedSites.push(newSite);
+            });
+        }
     }
-    /** Array of applications */
+    /**
+     * @deprecated Will be removed in next major release, use `sites` with one element instead.
+     */
     get apps() {
         return this._parsedApps;
     }