@c8y/ngx-components 1022.4.5 → 1022.4.8

package/fesm2022/c8y-ngx-components.mjs

@@ -13078,7 +13078,7 @@ class HeaderBarComponent {
         this.headerService.closeRightDrawer();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HeaderBarComponent, deps: [{ token: HeaderService }, { token: ActionService }, { token: BreadcrumbService }, { token: SearchService }, { token: AppStateService }, { token: UserMenuService }, { token: DocsService }, { token: i4.ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: HeaderBarComponent, isStandalone: true, selector: "c8y-header-bar", inputs: { simple: "simple" }, ngImport: i0, template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app?.name\"\n        [contextPath]=\"(appState$ | async).app?.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      title=\"{{ 'Search' | translate }}\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n    <ng-container *ngIf=\"showNotification$ | async; else noNotification\">\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\n{{ 'New features available' | translate }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n      <div\n        class=\"p-relative a-s-stretch no-pointer\"\n        *ngIf=\"!(headerService.rightDrawerOpen$ | async)\"\n      >\n        <span\n          class=\"c8y-pulse c8y-pulse--md active\"\n          *ngIf=\"showNotification$ | async\"\n        ></span>\n      </div>\n    </ng-container>\n    <ng-template #noNotification>\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: TitleOutletComponent, selector: "c8y-title-outlet" }, { kind: "component", type: BreadcrumbOutletComponent, selector: "c8y-breadcrumb-outlet", inputs: ["breadcrumbs"] }, { kind: "component", type: SearchOutletComponent, selector: "c8y-search-outlet", inputs: ["search"] }, { kind: "component", type: ActionOutletComponent, selector: "c8y-action-outlet", inputs: ["items"] }, { kind: "component", type: AppSwitcherComponent, selector: "c8y-app-switcher" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ShortenUserNamePipe, name: "shortenUserName" }, { kind: "pipe", type: UserNameInitialsPipe, name: "userNameInitials" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: HeaderBarComponent, isStandalone: true, selector: "c8y-header-bar", inputs: { simple: "simple" }, ngImport: i0, template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app?.name\"\n        [contextPath]=\"(appState$ | async).app?.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      title=\"{{ 'Search' | translate }}\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n    <ng-container *ngIf=\"showNotification$ | async; else noNotification\">\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\n{{ 'New features available' | translate }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n      <div\n        class=\"p-relative a-s-stretch no-pointer\"\n        *ngIf=\"!(headerService.rightDrawerOpen$ | async)\"\n      >\n        <span\n          class=\"c8y-pulse c8y-pulse--md active\"\n          *ngIf=\"showNotification$ | async\"\n        ></span>\n      </div>\n    </ng-container>\n    <ng-template #noNotification>\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      data-cy=\"header-bar--toggle\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: TitleOutletComponent, selector: "c8y-title-outlet" }, { kind: "component", type: BreadcrumbOutletComponent, selector: "c8y-breadcrumb-outlet", inputs: ["breadcrumbs"] }, { kind: "component", type: SearchOutletComponent, selector: "c8y-search-outlet", inputs: ["search"] }, { kind: "component", type: ActionOutletComponent, selector: "c8y-action-outlet", inputs: ["items"] }, { kind: "component", type: AppSwitcherComponent, selector: "c8y-app-switcher" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ShortenUserNamePipe, name: "shortenUserName" }, { kind: "pipe", type: UserNameInitialsPipe, name: "userNameInitials" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HeaderBarComponent, decorators: [{
             type: Component,
@@ -13098,7 +13098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         AsyncPipe,
                         ShortenUserNamePipe,
                         UserNameInitialsPipe
-                    ], template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app?.name\"\n        [contextPath]=\"(appState$ | async).app?.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      title=\"{{ 'Search' | translate }}\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n    <ng-container *ngIf=\"showNotification$ | async; else noNotification\">\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\n{{ 'New features available' | translate }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n      <div\n        class=\"p-relative a-s-stretch no-pointer\"\n        *ngIf=\"!(headerService.rightDrawerOpen$ | async)\"\n      >\n        <span\n          class=\"c8y-pulse c8y-pulse--md active\"\n          *ngIf=\"showNotification$ | async\"\n        ></span>\n      </div>\n    </ng-container>\n    <ng-template #noNotification>\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app?.name\"\n        [contextPath]=\"(appState$ | async).app?.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      title=\"{{ 'Search' | translate }}\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n    <ng-container *ngIf=\"showNotification$ | async; else noNotification\">\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\n{{ 'New features available' | translate }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n      <div\n        class=\"p-relative a-s-stretch no-pointer\"\n        *ngIf=\"!(headerService.rightDrawerOpen$ | async)\"\n      >\n        <span\n          class=\"c8y-pulse c8y-pulse--md active\"\n          *ngIf=\"showNotification$ | async\"\n        ></span>\n      </div>\n    </ng-container>\n    <ng-template #noNotification>\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      data-cy=\"header-bar--toggle\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: HeaderService }, { type: ActionService }, { type: BreadcrumbService }, { type: SearchService }, { type: AppStateService }, { type: UserMenuService }, { type: DocsService }, { type: i4.ApiService }], propDecorators: { simple: [{
                 type: Input
             }] } });
@@ -17305,7 +17305,7 @@ class ValidationPattern {
         httpUrl: gettext$1('Must be a valid HTTP(S) URL.'),
         colonedHexNumber: gettext$1('Must be a valid hexadecimal number. Must contain only the following characters: 0-9, a-f, A-F, :.'),
         noWhiteSpaceOnly: gettext$1('This field must not contain only whitespaces'),
-        noWhiteSpaceAtBeginning: gettext$1('Name must not contain white spaces at the beginning or ending.'),
+        noLeadingOrTrailingWhitespaces: gettext$1('Must not contain any leading or trailing whitespaces.'),
         noDots: gettext$1('Dots not allowed.'),
         integer: gettext$1('Invalid type, expected integer.'),
         simpleJsonPath: gettext$1('Must be a valid JSON path'),
@@ -17354,8 +17354,8 @@ class ValidationPattern {
         noWhiteSpaceOnly: {
             pattern: /^(?!\s*$).+/
         },
-        noWhiteSpaceAtBeginning: {
-            pattern: /^[^\s].+[^\s]$/
+        noLeadingOrTrailingWhitespaces: {
+            pattern: /^[^\s].*[^\s]$|^[^\s]$/
         },
         noDots: {
             pattern: /^[^.]*$/
@@ -18659,7 +18659,7 @@ class SelectComponent {
         /**
          * Placeholder text to be displayed in the select.
          */
-        this.placeholder = 'Select item…';
+        this.placeholder = gettext$1('Select item…');
         /**
          * The container to put the dropdown to. Defaults to body.
          */
@@ -18685,7 +18685,7 @@ class SelectComponent {
          */
         this.required = false;
         /**
-         * Allows the user to deselect an item.
+         * Allows the user to clear the selection.
          */
         this.canDeselect = false;
         /**
@@ -18782,7 +18782,7 @@ class SelectComponent {
         this.selectKeyboardService.unregister();
     }
     /**
-     * Selects an item
+     * Selects an item. In the multi mode, it will toggle the selection of the item.
      * @param item The item to select.
      */
     select(item) {
@@ -18930,7 +18930,7 @@ class SelectComponent {
                 multi: true
             },
             SelectKeyboardService
-        ], queries: [{ propertyName: "projectedSelectedItems", first: true, predicate: SelectedItemsDirective, descendants: true }, { propertyName: "projectedSelectableItems", predicate: SelectItemDirective }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "list", predicate: ListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      *ngIf=\"true\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let selectedItem of selected\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10 m-r-4\"\n              title=\"{{ selectedItem.label | translate }}\"\n              type=\"button\"\n              (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    \n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\n        [disabled]=\"disabled\"\n        (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\n      [selectable]=\"true\"\n      [dense]=\"true\"\n      [active]=\"!multi && item.value === selected[0]?.value\"\n      (click)=\"select(item)\"\n    >\n      <span [attr.data-search-label]=\"item.label | translate\"></span>\n      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault();\"\n      ></c8y-li-checkbox>\n      <c8y-li-body\n        *ngIf=\"!item.template\"\n      >\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+        ], queries: [{ propertyName: "projectedSelectedItems", first: true, predicate: SelectedItemsDirective, descendants: true }, { propertyName: "projectedSelectableItems", predicate: SelectItemDirective }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "list", predicate: ListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      *ngIf=\"true\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let selectedItem of selected\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10 m-r-4\"\n              title=\"{{ selectedItem.label | translate }}\"\n              type=\"button\"\n              [disabled]=\"disabled\"\n              (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n\n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\n        [disabled]=\"disabled\"\n        (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n        data-cy=\"deselect-all-button\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\n      [selectable]=\"true\"\n      [dense]=\"true\"\n      [active]=\"!multi && item.value === selected[0]?.value\"\n      (click)=\"select(item)\"\n    >\n      <span [attr.data-search-label]=\"item.label | translate\"></span>\n      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault()\"\n      ></c8y-li-checkbox>\n      <c8y-li-body *ngIf=\"!item.template\">\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -18959,7 +18959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         ListItemCheckboxComponent,
                         ListItemBodyComponent,
                         C8yTranslatePipe
-                    ], template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      *ngIf=\"true\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let selectedItem of selected\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10 m-r-4\"\n              title=\"{{ selectedItem.label | translate }}\"\n              type=\"button\"\n              (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    \n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\n        [disabled]=\"disabled\"\n        (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\n      [selectable]=\"true\"\n      [dense]=\"true\"\n      [active]=\"!multi && item.value === selected[0]?.value\"\n      (click)=\"select(item)\"\n    >\n      <span [attr.data-search-label]=\"item.label | translate\"></span>\n      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault();\"\n      ></c8y-li-checkbox>\n      <c8y-li-body\n        *ngIf=\"!item.template\"\n      >\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n" }]
+                    ], template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      *ngIf=\"true\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let selectedItem of selected\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10 m-r-4\"\n              title=\"{{ selectedItem.label | translate }}\"\n              type=\"button\"\n              [disabled]=\"disabled\"\n              (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n\n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\n        [disabled]=\"disabled\"\n        (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n        data-cy=\"deselect-all-button\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\n      [selectable]=\"true\"\n      [dense]=\"true\"\n      [active]=\"!multi && item.value === selected[0]?.value\"\n      (click)=\"select(item)\"\n    >\n      <span [attr.data-search-label]=\"item.label | translate\"></span>\n      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault()\"\n      ></c8y-li-checkbox>\n      <c8y-li-body *ngIf=\"!item.template\">\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n" }]
         }], ctorParameters: () => [{ type: SelectKeyboardService }], propDecorators: { placeholder: [{
                 type: Input
             }], items: [{