@c8y/ngx-components 1017.0.8 → 1017.0.10

package/fesm2015/c8y-ngx-components.mjs

@@ -9136,6 +9136,12 @@ const HOOK_COMPONENTS = new InjectionToken('HOOK_COMPONENTS');
 function hookComponent(components, options) {
     return hookGeneric(components, HOOK_COMPONENTS, options);
 }
+function isLazyDynamicComponents(componentDefinition) {
+    return !!(componentDefinition === null || componentDefinition === void 0 ? void 0 : componentDefinition.loadComponent);
+}
+function isEagerDynamicComponents(componentDefinition) {
+    return !!(componentDefinition === null || componentDefinition === void 0 ? void 0 : componentDefinition.component);
+}
 var DynamicComponentErrorStrategy;
 (function (DynamicComponentErrorStrategy) {
     /**
@@ -10576,10 +10582,10 @@ class BreadcrumbOutletComponent {
     }
 }
 BreadcrumbOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BreadcrumbOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BreadcrumbOutletComponent, selector: "c8y-breadcrumb-outlet", inputs: { breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "<div\n  class=\"breadcrumbs-container\"\n  [ngClass]=\"{\n    multiple: breadcrumbs.length > 1,\n    open: showAll\n  }\"\n  *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n  <button\n    *ngIf=\"breadcrumbs.length > 1\"\n    class=\"btn-show-all-breadcrumbs pull-left\"\n    (click)=\"showAll = !showAll\"\n  >\n    <i\n      *ngIf=\"!showAll\"\n      [c8yIcon]=\"'caret-right'\"\n      tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n    <i\n      *ngIf=\"showAll\"\n      [c8yIcon]=\"'caret-down'\"\n      tooltip=\"{{ 'Collapse breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n  </button>\n\n  <ul class=\"breadcrumbs text-muted\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n    <ng-container *ngIf=\"first || showAll\">\n      <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n        <span *ngIf=\"!firstItem\">></span>\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n        ></ng-container>\n        <ng-container *ngIf=\"item.label && item.path\">\n          <a\n            [routerLink]=\"normalizePath(item.path)\"\n            class=\"word-break\"\n            title=\"{{ item.label | translate }}\"\n          >\n            <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n            <span>{{ item.label | translate }}</span>\n          </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.label && !item.path\">\n          <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n          <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$8.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: "pipe", type: C8yTranslatePipe, name: "translate" }] });
+BreadcrumbOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BreadcrumbOutletComponent, selector: "c8y-breadcrumb-outlet", inputs: { breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "<div\n  class=\"breadcrumbs-container\"\n  [ngClass]=\"{\n    multiple: breadcrumbs.length > 1,\n    open: showAll\n  }\"\n  *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n  <button\n    title=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n    aria-label=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n    *ngIf=\"breadcrumbs.length > 1\"\n    class=\"btn-show-all-breadcrumbs pull-left\"\n    (click)=\"showAll = !showAll\"\n  >\n    <i\n      *ngIf=\"!showAll\"\n      [c8yIcon]=\"'caret-right'\"\n      tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n    <i\n      *ngIf=\"showAll\"\n      [c8yIcon]=\"'caret-down'\"\n      tooltip=\"{{ 'Expand breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n  </button>\n\n  <ul class=\"breadcrumbs text-muted\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n    <ng-container *ngIf=\"first || showAll\">\n      <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n        <span *ngIf=\"!firstItem\">></span>\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n        ></ng-container>\n        <ng-container *ngIf=\"item.label && item.path\">\n          <a\n            [routerLink]=\"normalizePath(item.path)\"\n            class=\"word-break\"\n            title=\"{{ item.label | translate }}\"\n          >\n            <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n            <span>{{ item.label | translate }}</span>\n          </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.label && !item.path\">\n          <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n          <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$8.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: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BreadcrumbOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-breadcrumb-outlet', template: "<div\n  class=\"breadcrumbs-container\"\n  [ngClass]=\"{\n    multiple: breadcrumbs.length > 1,\n    open: showAll\n  }\"\n  *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n  <button\n    *ngIf=\"breadcrumbs.length > 1\"\n    class=\"btn-show-all-breadcrumbs pull-left\"\n    (click)=\"showAll = !showAll\"\n  >\n    <i\n      *ngIf=\"!showAll\"\n      [c8yIcon]=\"'caret-right'\"\n      tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n    <i\n      *ngIf=\"showAll\"\n      [c8yIcon]=\"'caret-down'\"\n      tooltip=\"{{ 'Collapse breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n  </button>\n\n  <ul class=\"breadcrumbs text-muted\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n    <ng-container *ngIf=\"first || showAll\">\n      <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n        <span *ngIf=\"!firstItem\">></span>\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n        ></ng-container>\n        <ng-container *ngIf=\"item.label && item.path\">\n          <a\n            [routerLink]=\"normalizePath(item.path)\"\n            class=\"word-break\"\n            title=\"{{ item.label | translate }}\"\n          >\n            <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n            <span>{{ item.label | translate }}</span>\n          </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.label && !item.path\">\n          <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n          <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n" }]
+            args: [{ selector: 'c8y-breadcrumb-outlet', template: "<div\n  class=\"breadcrumbs-container\"\n  [ngClass]=\"{\n    multiple: breadcrumbs.length > 1,\n    open: showAll\n  }\"\n  *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n  <button\n    title=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n    aria-label=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n    *ngIf=\"breadcrumbs.length > 1\"\n    class=\"btn-show-all-breadcrumbs pull-left\"\n    (click)=\"showAll = !showAll\"\n  >\n    <i\n      *ngIf=\"!showAll\"\n      [c8yIcon]=\"'caret-right'\"\n      tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n    <i\n      *ngIf=\"showAll\"\n      [c8yIcon]=\"'caret-down'\"\n      tooltip=\"{{ 'Expand breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n  </button>\n\n  <ul class=\"breadcrumbs text-muted\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n    <ng-container *ngIf=\"first || showAll\">\n      <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n        <span *ngIf=\"!firstItem\">></span>\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n        ></ng-container>\n        <ng-container *ngIf=\"item.label && item.path\">\n          <a\n            [routerLink]=\"normalizePath(item.path)\"\n            class=\"word-break\"\n            title=\"{{ item.label | translate }}\"\n          >\n            <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n            <span>{{ item.label | translate }}</span>\n          </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.label && !item.path\">\n          <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n          <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n" }]
         }], propDecorators: { breadcrumbs: [{
                 type: Input
             }] } });
@@ -10857,10 +10863,10 @@ class AppSwitcherComponent {
     }
 }
 AppSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppSwitcherComponent, deps: [{ token: AppSwitcherService }], target: i0.ɵɵFactoryTarget.Component });
-AppSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AppSwitcherComponent, selector: "c8y-app-switcher", ngImport: i0, template: "<div class=\"app-switcher-dropdown\" dropdown #appSwitcherDropdown=\"bs-dropdown\" [cdkTrapFocus]=\"appSwitcherDropdown.isOpen\">\n  <button\n    class=\"main-header-button c8y-dropdown dropdown-toggle\"\n    id=\"appSwitcherDropdown\"\n    dropdownToggle\n    title=\"{{ 'Application switcher' | translate }}\"\n    type=\"button\"\n  >\n    <i c8yIcon=\"th\" class=\"icon-2x\"></i>\n  </button>\n  <div\n    *dropdownMenu\n    class=\"app-switcher-dropdown-menu dropdown-menu\"\n    aria-labelledby=\"appSwitcherDropdown\"\n    role=\"group\"\n  >\n    <div *ngIf=\"!(switcherService.finishedLoading$ | async)\" class=\"d-flex a-i-center j-c-center p-4\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <ng-container *ngIf=\"switcherService.oneCloudApps$ | async as oneCloudApps\">\n      <div class=\"app-switcher-sagcloud\" *ngIf=\"oneCloudApps.length > 0\">\n        <a\n          title=\"{{ app.name | humanizeAppName | async }}\"\n          class=\"appLink\"\n          *ngFor=\"let app of oneCloudApps\"\n          [href]=\"app | appHref\"\n          c8yProductExperience\n          [actionName]=\"'appSwitched'\"\n          [actionData]=\"{ applicationName: app && app.name }\"\n        >\n          <c8y-app-icon [app]=\"app\" [name]=\"app.name\" [contextPath]=\"app.contextPath\"></c8y-app-icon>\n          <span class=\"text-truncate-wrap\">{{ app | humanizeAppName | async }}</span>\n        </a>\n      </div>\n    </ng-container>\n    <div class=\"app-switcher\" *ngIf=\"switcherService.apps$ | async as apps\">\n      <a\n        title=\"{{ app.name | humanizeAppName | async }}\"\n        class=\"appLink\"\n        [ngClass]=\"(app | isActiveApp | async) ? 'active' : ''\"\n        *ngFor=\"let app of apps\"\n        [href]=\"app | appHref\"\n        [rel]=\"app.type === 'EXTERNAL' ? 'noopener noreferrer' : ''\"\n        c8yProductExperience\n        [actionName]=\"'appSwitched'\"\n        [actionData]=\"{ applicationName: app && app.name }\"\n      >\n        <c8y-app-icon [app]=\"app\" [name]=\"app.name\" [contextPath]=\"app.contextPath\"></c8y-app-icon>\n        <span class=\"text-truncate-wrap\">{{ app | humanizeAppName | async }}</span>\n      </a>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading" }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AppHrefPipe, name: "appHref" }, { kind: "pipe", type: IsActiveAppPipe, name: "isActiveApp" }] });
+AppSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AppSwitcherComponent, selector: "c8y-app-switcher", ngImport: i0, template: "<div\n  class=\"app-switcher-dropdown\"\n  dropdown\n  #appSwitcherDropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"appSwitcherDropdown.isOpen\"\n>\n  <button\n    class=\"main-header-button c8y-dropdown dropdown-toggle\"\n    id=\"appSwitcherDropdown\"\n    dropdownToggle\n    title=\"{{ 'Application switcher' | translate }}\"\n    type=\"button\"\n  >\n    <i c8yIcon=\"th\" class=\"icon-2x\"></i>\n  </button>\n  <div\n    *dropdownMenu\n    class=\"app-switcher-dropdown-menu dropdown-menu\"\n    aria-labelledby=\"appSwitcherDropdown\"\n    role=\"group\"\n  >\n    <div\n      *ngIf=\"!(switcherService.finishedLoading$ | async)\"\n      class=\"d-flex a-i-center j-c-center p-4\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n    <ng-container *ngIf=\"switcherService.oneCloudApps$ | async as oneCloudApps\">\n      <div class=\"app-switcher-sagcloud\" *ngIf=\"oneCloudApps.length > 0\">\n        <a\n          title=\"{{ app.name | humanizeAppName | async }}\"\n          class=\"appLink\"\n          *ngFor=\"let app of oneCloudApps\"\n          [href]=\"app | appHref\"\n          c8yProductExperience\n          [actionName]=\"'appSwitched'\"\n          [actionData]=\"{ applicationName: app && app.name }\"\n        >\n          <c8y-app-icon\n            [app]=\"app\"\n            [name]=\"app.name\"\n            [contextPath]=\"app.contextPath\"\n          ></c8y-app-icon>\n          <span class=\"text-truncate-wrap\">{{ app | humanizeAppName | async }}</span>\n        </a>\n      </div>\n    </ng-container>\n    <div class=\"app-switcher\" *ngIf=\"switcherService.apps$ | async as apps\">\n      <a\n        title=\"{{ app.name | humanizeAppName | async }}\"\n        class=\"appLink\"\n        [ngClass]=\"(app | isActiveApp | async) ? 'active' : ''\"\n        *ngFor=\"let app of apps\"\n        [href]=\"app | appHref\"\n        [rel]=\"app.type === 'EXTERNAL' ? 'noopener noreferrer' : ''\"\n        c8yProductExperience\n        [actionName]=\"'appSwitched'\"\n        [actionData]=\"{ applicationName: app && app.name }\"\n      >\n        <c8y-app-icon [app]=\"app\" [name]=\"app.name\" [contextPath]=\"app.contextPath\"></c8y-app-icon>\n        <span class=\"text-truncate-wrap\">{{ app | humanizeAppName | async }}</span>\n      </a>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading" }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AppHrefPipe, name: "appHref" }, { kind: "pipe", type: IsActiveAppPipe, name: "isActiveApp" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-app-switcher', template: "<div class=\"app-switcher-dropdown\" dropdown #appSwitcherDropdown=\"bs-dropdown\" [cdkTrapFocus]=\"appSwitcherDropdown.isOpen\">\n  <button\n    class=\"main-header-button c8y-dropdown dropdown-toggle\"\n    id=\"appSwitcherDropdown\"\n    dropdownToggle\n    title=\"{{ 'Application switcher' | translate }}\"\n    type=\"button\"\n  >\n    <i c8yIcon=\"th\" class=\"icon-2x\"></i>\n  </button>\n  <div\n    *dropdownMenu\n    class=\"app-switcher-dropdown-menu dropdown-menu\"\n    aria-labelledby=\"appSwitcherDropdown\"\n    role=\"group\"\n  >\n    <div *ngIf=\"!(switcherService.finishedLoading$ | async)\" class=\"d-flex a-i-center j-c-center p-4\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <ng-container *ngIf=\"switcherService.oneCloudApps$ | async as oneCloudApps\">\n      <div class=\"app-switcher-sagcloud\" *ngIf=\"oneCloudApps.length > 0\">\n        <a\n          title=\"{{ app.name | humanizeAppName | async }}\"\n          class=\"appLink\"\n          *ngFor=\"let app of oneCloudApps\"\n          [href]=\"app | appHref\"\n          c8yProductExperience\n          [actionName]=\"'appSwitched'\"\n          [actionData]=\"{ applicationName: app && app.name }\"\n        >\n          <c8y-app-icon [app]=\"app\" [name]=\"app.name\" [contextPath]=\"app.contextPath\"></c8y-app-icon>\n          <span class=\"text-truncate-wrap\">{{ app | humanizeAppName | async }}</span>\n        </a>\n      </div>\n    </ng-container>\n    <div class=\"app-switcher\" *ngIf=\"switcherService.apps$ | async as apps\">\n      <a\n        title=\"{{ app.name | humanizeAppName | async }}\"\n        class=\"appLink\"\n        [ngClass]=\"(app | isActiveApp | async) ? 'active' : ''\"\n        *ngFor=\"let app of apps\"\n        [href]=\"app | appHref\"\n        [rel]=\"app.type === 'EXTERNAL' ? 'noopener noreferrer' : ''\"\n        c8yProductExperience\n        [actionName]=\"'appSwitched'\"\n        [actionData]=\"{ applicationName: app && app.name }\"\n      >\n        <c8y-app-icon [app]=\"app\" [name]=\"app.name\" [contextPath]=\"app.contextPath\"></c8y-app-icon>\n        <span class=\"text-truncate-wrap\">{{ app | humanizeAppName | async }}</span>\n      </a>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-app-switcher', template: "<div\n  class=\"app-switcher-dropdown\"\n  dropdown\n  #appSwitcherDropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"appSwitcherDropdown.isOpen\"\n>\n  <button\n    class=\"main-header-button c8y-dropdown dropdown-toggle\"\n    id=\"appSwitcherDropdown\"\n    dropdownToggle\n    title=\"{{ 'Application switcher' | translate }}\"\n    type=\"button\"\n  >\n    <i c8yIcon=\"th\" class=\"icon-2x\"></i>\n  </button>\n  <div\n    *dropdownMenu\n    class=\"app-switcher-dropdown-menu dropdown-menu\"\n    aria-labelledby=\"appSwitcherDropdown\"\n    role=\"group\"\n  >\n    <div\n      *ngIf=\"!(switcherService.finishedLoading$ | async)\"\n      class=\"d-flex a-i-center j-c-center p-4\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n    <ng-container *ngIf=\"switcherService.oneCloudApps$ | async as oneCloudApps\">\n      <div class=\"app-switcher-sagcloud\" *ngIf=\"oneCloudApps.length > 0\">\n        <a\n          title=\"{{ app.name | humanizeAppName | async }}\"\n          class=\"appLink\"\n          *ngFor=\"let app of oneCloudApps\"\n          [href]=\"app | appHref\"\n          c8yProductExperience\n          [actionName]=\"'appSwitched'\"\n          [actionData]=\"{ applicationName: app && app.name }\"\n        >\n          <c8y-app-icon\n            [app]=\"app\"\n            [name]=\"app.name\"\n            [contextPath]=\"app.contextPath\"\n          ></c8y-app-icon>\n          <span class=\"text-truncate-wrap\">{{ app | humanizeAppName | async }}</span>\n        </a>\n      </div>\n    </ng-container>\n    <div class=\"app-switcher\" *ngIf=\"switcherService.apps$ | async as apps\">\n      <a\n        title=\"{{ app.name | humanizeAppName | async }}\"\n        class=\"appLink\"\n        [ngClass]=\"(app | isActiveApp | async) ? 'active' : ''\"\n        *ngFor=\"let app of apps\"\n        [href]=\"app | appHref\"\n        [rel]=\"app.type === 'EXTERNAL' ? 'noopener noreferrer' : ''\"\n        c8yProductExperience\n        [actionName]=\"'appSwitched'\"\n        [actionData]=\"{ applicationName: app && app.name }\"\n      >\n        <c8y-app-icon [app]=\"app\" [name]=\"app.name\" [contextPath]=\"app.contextPath\"></c8y-app-icon>\n        <span class=\"text-truncate-wrap\">{{ app | humanizeAppName | async }}</span>\n      </a>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: AppSwitcherService }]; } });
 
 class ConfirmModalComponent {
@@ -12069,10 +12075,10 @@ class ModalComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ModalComponent, deps: [{ token: i1$9.BsModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ModalComponent, selector: "c8y-modal", inputs: { disabled: "disabled", close: "close", dismiss: "dismiss", title: "title", body: "body", customFooter: "customFooter", headerClasses: "headerClasses", labels: "labels" }, outputs: { onDismiss: "onDismiss", onClose: "onClose" }, host: { listeners: { "document:keydown.enter": "onEnterKeyDown($event)" } }, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header {{ headerClasses }}\" [ngClass]=\"{ separator: title }\">\n    <ng-content select=\"[c8y-modal-title]\"></ng-content>\n    <h3 [hidden]=\"!title\" id=\"modal-title\">\n      {{ title | translate }}\n    </h3>\n  </div>\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <div [ngClass]=\"{ 'modal-body': !customFooter, 'd-contents': customFooter }\">\n      <p *ngIf=\"title\" class=\"text-center text-break-word\">\n        {{ body }}\n      </p>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div class=\"modal-footer\" *ngIf=\"!customFooter\">\n    <ng-content select=\"[c8y-modal-footer]\"></ng-content>\n    <button\n      title=\"{{ labels.cancel | translate }}\"\n      *ngIf=\"labels.cancel\"\n      class=\"btn btn-default\"\n      (click)=\"_dismiss()\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      title=\"{{ labels.ok | translate }}\"\n      *ngIf=\"labels.ok\"\n      class=\"btn btn-primary\"\n      (click)=\"_close()\"\n      [disabled]=\"disabled\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ModalComponent, selector: "c8y-modal", inputs: { disabled: "disabled", close: "close", dismiss: "dismiss", title: "title", body: "body", customFooter: "customFooter", headerClasses: "headerClasses", labels: "labels" }, outputs: { onDismiss: "onDismiss", onClose: "onClose" }, host: { listeners: { "document:keydown.enter": "onEnterKeyDown($event)" } }, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header {{ headerClasses }}\" [ngClass]=\"{ separator: title }\">\n    <ng-content select=\"[c8y-modal-title]\"></ng-content>\n    <div [hidden]=\"!title\" id=\"modal-title\" class=\"modal-title\">\n      {{ title | translate }}\n    </div>\n  </div>\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <div [ngClass]=\"{ 'modal-body': !customFooter, 'd-contents': customFooter }\">\n      <p *ngIf=\"title\" class=\"text-center text-break-word\">\n        {{ body }}\n      </p>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div class=\"modal-footer\" *ngIf=\"!customFooter\">\n    <ng-content select=\"[c8y-modal-footer]\"></ng-content>\n    <button\n      type=\"button\"\n      title=\"{{ labels.cancel | translate }}\"\n      *ngIf=\"labels.cancel\"\n      class=\"btn btn-default\"\n      (click)=\"_dismiss()\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      type=\"button\"\n      title=\"{{ labels.ok | translate }}\"\n      *ngIf=\"labels.ok\"\n      class=\"btn btn-primary\"\n      (click)=\"_close()\"\n      [disabled]=\"disabled\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-modal', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header {{ headerClasses }}\" [ngClass]=\"{ separator: title }\">\n    <ng-content select=\"[c8y-modal-title]\"></ng-content>\n    <h3 [hidden]=\"!title\" id=\"modal-title\">\n      {{ title | translate }}\n    </h3>\n  </div>\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <div [ngClass]=\"{ 'modal-body': !customFooter, 'd-contents': customFooter }\">\n      <p *ngIf=\"title\" class=\"text-center text-break-word\">\n        {{ body }}\n      </p>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div class=\"modal-footer\" *ngIf=\"!customFooter\">\n    <ng-content select=\"[c8y-modal-footer]\"></ng-content>\n    <button\n      title=\"{{ labels.cancel | translate }}\"\n      *ngIf=\"labels.cancel\"\n      class=\"btn btn-default\"\n      (click)=\"_dismiss()\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      title=\"{{ labels.ok | translate }}\"\n      *ngIf=\"labels.ok\"\n      class=\"btn btn-primary\"\n      (click)=\"_close()\"\n      [disabled]=\"disabled\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-modal', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header {{ headerClasses }}\" [ngClass]=\"{ separator: title }\">\n    <ng-content select=\"[c8y-modal-title]\"></ng-content>\n    <div [hidden]=\"!title\" id=\"modal-title\" class=\"modal-title\">\n      {{ title | translate }}\n    </div>\n  </div>\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <div [ngClass]=\"{ 'modal-body': !customFooter, 'd-contents': customFooter }\">\n      <p *ngIf=\"title\" class=\"text-center text-break-word\">\n        {{ body }}\n      </p>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div class=\"modal-footer\" *ngIf=\"!customFooter\">\n    <ng-content select=\"[c8y-modal-footer]\"></ng-content>\n    <button\n      type=\"button\"\n      title=\"{{ labels.cancel | translate }}\"\n      *ngIf=\"labels.cancel\"\n      class=\"btn btn-default\"\n      (click)=\"_dismiss()\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      type=\"button\"\n      title=\"{{ labels.ok | translate }}\"\n      *ngIf=\"labels.ok\"\n      class=\"btn btn-primary\"\n      (click)=\"_close()\"\n      [disabled]=\"disabled\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: i1$9.BsModalRef, decorators: [{
                         type: Optional
@@ -12321,10 +12327,10 @@ class TotpChallengeComponent {
     }
 }
 TotpChallengeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TotpChallengeComponent, deps: [{ token: LoginService }, { token: i1$2.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component });
-TotpChallengeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: TotpChallengeComponent, selector: "c8y-totp-challenge", inputs: { verify: "verify", loading: "loading", hasError: "hasError" }, outputs: { onSuccess: "onSuccess", totpUnconfirmedEmitter: "totpUnconfirmedEmitter" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<form #totpForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyCode()\" novalidate>\n  <div class=\"d-block p-24 p-b-0\">\n    <c8y-form-group\n      [hasError]=\"hasError\"\n      [novalidation]=\"true\"\n      [ngClass]=\"hasError ? 'p-b-24' : ''\"\n    >\n      <label translate for=\"totpToken\">Verification code</label>\n\n      <input\n        id=\"totpToken\"\n        [(ngModel)]=\"model.token\"\n        name=\"totpToken\"\n        type=\"text\"\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n        placeholder=\"{{ 'e.g.' | translate }} 624327\"\n        required\n      />\n\n      <c8y-messages>\n        <c8y-message *ngIf=\"hasError\" translate>\n          Invalid verification code. In case of key loss, contact your platform administrator.\n        </c8y-message>\n      </c8y-messages>\n      <p id=\"helpinput\" *ngIf=\"!hasError\" class=\"help-block\" translate>\n        In case of key loss, please contact your platform administrator.\n      </p>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom p-b-0\">\n    <button\n      title=\"{{ 'Cancel' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      *ngIf=\"!loading\"\n      title=\"{{ 'Verify' | translate }}\"\n      [disabled]=\"!totpForm.form.valid\"\n      type=\"submit\"\n      class=\"btn btn-primary\"\n    >\n      {{ 'Verify' | translate }}\n    </button>\n\n    <button\n      *ngIf=\"loading\"\n      title=\"{{ 'Verifying\u2026' | translate }}\"\n      type=\"submit\"\n      class=\"btn btn-primary btn-pending\"\n    >\n      {{ 'Verifying\u2026' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+TotpChallengeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: TotpChallengeComponent, selector: "c8y-totp-challenge", inputs: { verify: "verify", loading: "loading", hasError: "hasError" }, outputs: { onSuccess: "onSuccess", totpUnconfirmedEmitter: "totpUnconfirmedEmitter" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<form #totpForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyCode()\" novalidate>\n  <div class=\"d-block p-24 p-b-0\">\n    <c8y-form-group\n      [hasError]=\"hasError\"\n      [novalidation]=\"true\"\n      [ngClass]=\"hasError ? 'p-b-24' : ''\"\n    >\n      <label translate for=\"totpToken\">Verification code</label>\n\n      <input\n        id=\"totpToken\"\n        [(ngModel)]=\"model.token\"\n        name=\"totpToken\"\n        type=\"text\"\n        autofocus\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n        placeholder=\"{{ 'e.g.' | translate }} 624327\"\n        required\n      />\n\n      <c8y-messages>\n        <c8y-message *ngIf=\"hasError\" translate>\n          Invalid verification code. In case of key loss, contact your platform administrator.\n        </c8y-message>\n      </c8y-messages>\n      <p id=\"helpinput\" *ngIf=\"!hasError\" class=\"help-block\" translate>\n        In case of key loss, please contact your platform administrator.\n      </p>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom p-b-0\">\n    <button\n      title=\"{{ 'Cancel' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      *ngIf=\"!loading\"\n      title=\"{{ 'Verify' | translate }}\"\n      [disabled]=\"!totpForm.form.valid\"\n      type=\"submit\"\n      class=\"btn btn-primary\"\n    >\n      {{ 'Verify' | translate }}\n    </button>\n\n    <button\n      *ngIf=\"loading\"\n      title=\"{{ 'Verifying\u2026' | translate }}\"\n      type=\"submit\"\n      class=\"btn btn-primary btn-pending\"\n    >\n      {{ 'Verifying\u2026' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TotpChallengeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-totp-challenge', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<form #totpForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyCode()\" novalidate>\n  <div class=\"d-block p-24 p-b-0\">\n    <c8y-form-group\n      [hasError]=\"hasError\"\n      [novalidation]=\"true\"\n      [ngClass]=\"hasError ? 'p-b-24' : ''\"\n    >\n      <label translate for=\"totpToken\">Verification code</label>\n\n      <input\n        id=\"totpToken\"\n        [(ngModel)]=\"model.token\"\n        name=\"totpToken\"\n        type=\"text\"\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n        placeholder=\"{{ 'e.g.' | translate }} 624327\"\n        required\n      />\n\n      <c8y-messages>\n        <c8y-message *ngIf=\"hasError\" translate>\n          Invalid verification code. In case of key loss, contact your platform administrator.\n        </c8y-message>\n      </c8y-messages>\n      <p id=\"helpinput\" *ngIf=\"!hasError\" class=\"help-block\" translate>\n        In case of key loss, please contact your platform administrator.\n      </p>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom p-b-0\">\n    <button\n      title=\"{{ 'Cancel' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      *ngIf=\"!loading\"\n      title=\"{{ 'Verify' | translate }}\"\n      [disabled]=\"!totpForm.form.valid\"\n      type=\"submit\"\n      class=\"btn btn-primary\"\n    >\n      {{ 'Verify' | translate }}\n    </button>\n\n    <button\n      *ngIf=\"loading\"\n      title=\"{{ 'Verifying\u2026' | translate }}\"\n      type=\"submit\"\n      class=\"btn btn-primary btn-pending\"\n    >\n      {{ 'Verifying\u2026' | translate }}\n    </button>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'c8y-totp-challenge', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<form #totpForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyCode()\" novalidate>\n  <div class=\"d-block p-24 p-b-0\">\n    <c8y-form-group\n      [hasError]=\"hasError\"\n      [novalidation]=\"true\"\n      [ngClass]=\"hasError ? 'p-b-24' : ''\"\n    >\n      <label translate for=\"totpToken\">Verification code</label>\n\n      <input\n        id=\"totpToken\"\n        [(ngModel)]=\"model.token\"\n        name=\"totpToken\"\n        type=\"text\"\n        autofocus\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n        placeholder=\"{{ 'e.g.' | translate }} 624327\"\n        required\n      />\n\n      <c8y-messages>\n        <c8y-message *ngIf=\"hasError\" translate>\n          Invalid verification code. In case of key loss, contact your platform administrator.\n        </c8y-message>\n      </c8y-messages>\n      <p id=\"helpinput\" *ngIf=\"!hasError\" class=\"help-block\" translate>\n        In case of key loss, please contact your platform administrator.\n      </p>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom p-b-0\">\n    <button\n      title=\"{{ 'Cancel' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      *ngIf=\"!loading\"\n      title=\"{{ 'Verify' | translate }}\"\n      [disabled]=\"!totpForm.form.valid\"\n      type=\"submit\"\n      class=\"btn btn-primary\"\n    >\n      {{ 'Verify' | translate }}\n    </button>\n\n    <button\n      *ngIf=\"loading\"\n      title=\"{{ 'Verifying\u2026' | translate }}\"\n      type=\"submit\"\n      class=\"btn btn-primary btn-pending\"\n    >\n      {{ 'Verifying\u2026' | translate }}\n    </button>\n  </div>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: LoginService }, { type: i1$2.UserService }, { type: AlertService }]; }, propDecorators: { verify: [{
                 type: Input
             }], onSuccess: [{
@@ -13777,10 +13783,10 @@ class SmsChallengeComponent {
     }
 }
 SmsChallengeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SmsChallengeComponent, deps: [{ token: LoginService }, { token: i1$2.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component });
-SmsChallengeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: SmsChallengeComponent, selector: "c8y-sms-challenge", inputs: { credentials: "credentials" }, outputs: { onCancel: "onCancel" }, ngImport: i0, template: "<form #twoFactorForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyTFACode()\" novalidate>\n  <div class=\"legend form-block center\" translate>Two-factor authentication</div>\n\n  <c8y-form-group>\n    <label translate>Verification code</label>\n    <input\n      [(ngModel)]=\"model.smsToken\"\n      #sms_token=\"ngModel\"\n      type=\"text\"\n      name=\"sms_token\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} 624327\"\n      required\n    />\n    <p *ngIf=\"!twoFactorForm.form.valid || isLoading\" class=\"help-block\" translate>\n      Insert the code received via SMS.\n    </p>\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Verify' | translate }}\"\n    [disabled]=\"!twoFactorForm.form.valid || isLoading\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Verify' | translate }}\n  </button>\n\n  <div class=\"d-flex m-t-8\">\n    <button\n      type=\"button\"\n      title=\"{{ 'Send new code' | translate }}\"\n      [ngClass]=\"{ disabled: isLoading }\"\n      class=\"small pointer m-r-auto\"\n      (click)=\"resendTFASms()\"\n    >\n      {{ 'Send new code' | translate }}\n    </button>\n    <button\n      type=\"button\"\n      title=\"{{ 'Log in' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onCancel.emit()\"\n    >\n      {{ 'Log in' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
+SmsChallengeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: SmsChallengeComponent, selector: "c8y-sms-challenge", inputs: { credentials: "credentials" }, outputs: { onCancel: "onCancel" }, ngImport: i0, template: "<form #twoFactorForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyTFACode()\" novalidate>\n  <div class=\"legend form-block center\" translate>Two-factor authentication</div>\n\n  <c8y-form-group>\n    <label translate>Verification code</label>\n    <input\n      [(ngModel)]=\"model.smsToken\"\n      #sms_token=\"ngModel\"\n      type=\"text\"\n      name=\"sms_token\"\n      autofocus\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} 624327\"\n      required\n    />\n    <p *ngIf=\"!twoFactorForm.form.valid || isLoading\" class=\"help-block\" translate>\n      Insert the code received via SMS.\n    </p>\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Verify' | translate }}\"\n    [disabled]=\"!twoFactorForm.form.valid || isLoading\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Verify' | translate }}\n  </button>\n\n  <div class=\"d-flex m-t-8\">\n    <button\n      type=\"button\"\n      title=\"{{ 'Send new code' | translate }}\"\n      [ngClass]=\"{ disabled: isLoading }\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"resendTFASms()\"\n    >\n      {{ 'Send new code' | translate }}\n    </button>\n    <button\n      type=\"button\"\n      title=\"{{ 'Log in' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onCancel.emit()\"\n    >\n      {{ 'Log in' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SmsChallengeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-sms-challenge', template: "<form #twoFactorForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyTFACode()\" novalidate>\n  <div class=\"legend form-block center\" translate>Two-factor authentication</div>\n\n  <c8y-form-group>\n    <label translate>Verification code</label>\n    <input\n      [(ngModel)]=\"model.smsToken\"\n      #sms_token=\"ngModel\"\n      type=\"text\"\n      name=\"sms_token\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} 624327\"\n      required\n    />\n    <p *ngIf=\"!twoFactorForm.form.valid || isLoading\" class=\"help-block\" translate>\n      Insert the code received via SMS.\n    </p>\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Verify' | translate }}\"\n    [disabled]=\"!twoFactorForm.form.valid || isLoading\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Verify' | translate }}\n  </button>\n\n  <div class=\"d-flex m-t-8\">\n    <button\n      type=\"button\"\n      title=\"{{ 'Send new code' | translate }}\"\n      [ngClass]=\"{ disabled: isLoading }\"\n      class=\"small pointer m-r-auto\"\n      (click)=\"resendTFASms()\"\n    >\n      {{ 'Send new code' | translate }}\n    </button>\n    <button\n      type=\"button\"\n      title=\"{{ 'Log in' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onCancel.emit()\"\n    >\n      {{ 'Log in' | translate }}\n    </button>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'c8y-sms-challenge', template: "<form #twoFactorForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyTFACode()\" novalidate>\n  <div class=\"legend form-block center\" translate>Two-factor authentication</div>\n\n  <c8y-form-group>\n    <label translate>Verification code</label>\n    <input\n      [(ngModel)]=\"model.smsToken\"\n      #sms_token=\"ngModel\"\n      type=\"text\"\n      name=\"sms_token\"\n      autofocus\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} 624327\"\n      required\n    />\n    <p *ngIf=\"!twoFactorForm.form.valid || isLoading\" class=\"help-block\" translate>\n      Insert the code received via SMS.\n    </p>\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Verify' | translate }}\"\n    [disabled]=\"!twoFactorForm.form.valid || isLoading\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Verify' | translate }}\n  </button>\n\n  <div class=\"d-flex m-t-8\">\n    <button\n      type=\"button\"\n      title=\"{{ 'Send new code' | translate }}\"\n      [ngClass]=\"{ disabled: isLoading }\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"resendTFASms()\"\n    >\n      {{ 'Send new code' | translate }}\n    </button>\n    <button\n      type=\"button\"\n      title=\"{{ 'Log in' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onCancel.emit()\"\n    >\n      {{ 'Log in' | translate }}\n    </button>\n  </div>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: LoginService }, { type: i1$2.UserService }, { type: AlertService }]; }, propDecorators: { credentials: [{
                 type: Input
             }], onCancel: [{
@@ -14896,10 +14902,10 @@ class CredentialsComponent {
     }
 }
 CredentialsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CredentialsComponent, deps: [{ token: LoginService }, { token: AlertService }, { token: AppStateService }, { token: CredentialsFromQueryParamsService }], target: i0.ɵɵFactoryTarget.Component });
-CredentialsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: CredentialsComponent, selector: "c8y-credentials", inputs: { loginViewParams: "loginViewParams" }, outputs: { onChangeView: "onChangeView" }, ngImport: i0, template: "<div id=\"oauth\" *ngIf=\"oauthOptions.initRequest && oauthOptions.visibleOnLoginPage\">\n  <button\n    title=\"{{ oauthOptions.buttonName | translate }}\"\n    type=\"button\"\n    (click)=\"redirectToOauth()\"\n    class=\"btn btn-block btn-lg form-group\"\n  >\n    <i [c8yIcon]=\"'sign-in'\" class=\"pull-left\"></i>\n    {{ oauthOptions.buttonName | translate }}\n  </button>\n</div>\n\n<form class=\"loginForm\" (ngSubmit)=\"login()\" #loginForm=\"ngForm\" *ngIf=\"showLoginForm\" novalidate>\n  <div\n    class=\"legend form-block center\"\n    *ngIf=\"!(oauthOptions.initRequest && oauthOptions.visibleOnLoginPage); else orLegend\"\n    translate\n  >\n    Login\n  </div>\n  <ng-template #orLegend>\n    <div class=\"legend form-block center\" translate>or</div>\n  </ng-template>\n\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"showTenant\">\n    <label for=\"tenant\" translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenant\"\n      #tenant=\"ngModel\"\n      type=\"text\"\n      name=\"tenant\"\n      id=\"tenant\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} t12345\"\n      placeholder-no-required-hint\n      [readonly]=\"loginViewParams.disableTenant\"\n      required\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label for=\"user\" translate>Username</label>\n    <input\n      [(ngModel)]=\"model.user\"\n      #user=\"ngModel\"\n      type=\"text\"\n      name=\"user\"\n      id=\"user\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. joe or joe.doe@example.com`LOCALIZE`' | translate }}\"\n      placeholder-no-required-hint\n      required\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label for=\"password\" translate>Password</label>\n    <input\n      [(ngModel)]=\"model.password\"\n      #password=\"ngModel\"\n      type=\"password\"\n      name=\"password\"\n      id=\"password\"\n      class=\"form-control\"\n      placeholder-no-required-hint\n      required\n    />\n  </c8y-form-group>\n  <div class=\"form-group\" *ngIf=\"showBasicAuth\">\n    <label title=\"{{ 'Remember me' | translate }}\" class=\"c8y-checkbox\">\n      <input type=\"checkbox\" name=\"remember\" [(ngModel)]=\"loginService.rememberMe\" />\n      <span></span>\n      <span>{{ 'Remember me' | translate }}</span>\n    </label>\n  </div>\n  <button\n    title=\"{{ 'Log in' | translate }}\"\n    [disabled]=\"!loginForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Log in' | translate }}\n  </button>\n  <div class=\"text-center m-t-8\">\n    <a\n      title=\"{{ 'Forgot password?' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onChangeView.emit({ view: LOGIN_VIEWS.RecoverPassword })\"\n    >\n      {{ 'Forgot password?' | translate }}\n    </a>\n  </div>\n  <div class=\"text-center m-t-8\" *ngIf=\"!!(ui.state$ | async).loginExtraLink\">\n    <a\n      title=\"{{ (ui.state$ | async).loginExtraLink.label }}\"\n      [href]=\"(ui.state$ | async).loginExtraLink.url\"\n      class=\"btn btn-link btn-sm\"\n    >\n      {{ (ui.state$ | async).loginExtraLink.label }}\n    </a>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }] });
+CredentialsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: CredentialsComponent, selector: "c8y-credentials", inputs: { loginViewParams: "loginViewParams" }, outputs: { onChangeView: "onChangeView" }, ngImport: i0, template: "<div id=\"oauth\" *ngIf=\"oauthOptions.initRequest && oauthOptions.visibleOnLoginPage\">\n  <button\n    title=\"{{ oauthOptions.buttonName | translate }}\"\n    type=\"button\"\n    (click)=\"redirectToOauth()\"\n    class=\"btn btn-block btn-lg form-group\"\n  >\n    <i [c8yIcon]=\"'sign-in'\" class=\"pull-left\"></i>\n    {{ oauthOptions.buttonName | translate }}\n  </button>\n</div>\n\n<form class=\"loginForm\" (ngSubmit)=\"login()\" #loginForm=\"ngForm\" *ngIf=\"showLoginForm\" novalidate>\n  <span\n    class=\"legend form-block center\"\n    *ngIf=\"!(oauthOptions.initRequest && oauthOptions.visibleOnLoginPage); else orLegend\"\n    translate\n  >\n    Login\n  </span>\n  <ng-template #orLegend>\n    <div class=\"legend form-block center\" translate>or</div>\n  </ng-template>\n\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"showTenant\">\n    <label for=\"tenant\" translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenant\"\n      #tenant=\"ngModel\"\n      type=\"text\"\n      name=\"tenant\"\n      id=\"tenant\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} t12345\"\n      placeholder-no-required-hint\n      [readonly]=\"loginViewParams.disableTenant\"\n      required\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label for=\"user\" translate>Username</label>\n    <input\n      [(ngModel)]=\"model.user\"\n      #user=\"ngModel\"\n      type=\"text\"\n      name=\"user\"\n      id=\"user\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. joe or joe.doe@example.com`LOCALIZE`' | translate }}\"\n      placeholder-no-required-hint\n      required\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label for=\"password\" translate>Password</label>\n    <input\n      [(ngModel)]=\"model.password\"\n      #password=\"ngModel\"\n      type=\"password\"\n      name=\"password\"\n      id=\"password\"\n      class=\"form-control\"\n      placeholder-no-required-hint\n      required\n    />\n  </c8y-form-group>\n  <div class=\"form-group\" *ngIf=\"showBasicAuth\">\n    <label title=\"{{ 'Remember me' | translate }}\" class=\"c8y-checkbox\">\n      <input type=\"checkbox\" name=\"remember\" [(ngModel)]=\"loginService.rememberMe\" />\n      <span></span>\n      <span>{{ 'Remember me' | translate }}</span>\n    </label>\n  </div>\n  <button\n    title=\"{{ 'Log in' | translate }}\"\n    [disabled]=\"!loginForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Log in' | translate }}\n  </button>\n  <div class=\"text-center m-t-8\">\n    <button\n      type=\"button\"\n      title=\"{{ 'Forgot password?' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onChangeView.emit({ view: LOGIN_VIEWS.RecoverPassword })\"\n    >\n      {{ 'Forgot password?' | translate }}\n    </button>\n  </div>\n  <div class=\"text-center m-t-8\" *ngIf=\"!!(ui.state$ | async).loginExtraLink\">\n    <a\n      role=\"button\"\n      title=\"{{ (ui.state$ | async).loginExtraLink.label }}\"\n      [href]=\"(ui.state$ | async).loginExtraLink.url\"\n      class=\"btn btn-link btn-sm\"\n    >\n      {{ (ui.state$ | async).loginExtraLink.label }}\n    </a>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CredentialsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-credentials', template: "<div id=\"oauth\" *ngIf=\"oauthOptions.initRequest && oauthOptions.visibleOnLoginPage\">\n  <button\n    title=\"{{ oauthOptions.buttonName | translate }}\"\n    type=\"button\"\n    (click)=\"redirectToOauth()\"\n    class=\"btn btn-block btn-lg form-group\"\n  >\n    <i [c8yIcon]=\"'sign-in'\" class=\"pull-left\"></i>\n    {{ oauthOptions.buttonName | translate }}\n  </button>\n</div>\n\n<form class=\"loginForm\" (ngSubmit)=\"login()\" #loginForm=\"ngForm\" *ngIf=\"showLoginForm\" novalidate>\n  <div\n    class=\"legend form-block center\"\n    *ngIf=\"!(oauthOptions.initRequest && oauthOptions.visibleOnLoginPage); else orLegend\"\n    translate\n  >\n    Login\n  </div>\n  <ng-template #orLegend>\n    <div class=\"legend form-block center\" translate>or</div>\n  </ng-template>\n\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"showTenant\">\n    <label for=\"tenant\" translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenant\"\n      #tenant=\"ngModel\"\n      type=\"text\"\n      name=\"tenant\"\n      id=\"tenant\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} t12345\"\n      placeholder-no-required-hint\n      [readonly]=\"loginViewParams.disableTenant\"\n      required\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label for=\"user\" translate>Username</label>\n    <input\n      [(ngModel)]=\"model.user\"\n      #user=\"ngModel\"\n      type=\"text\"\n      name=\"user\"\n      id=\"user\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. joe or joe.doe@example.com`LOCALIZE`' | translate }}\"\n      placeholder-no-required-hint\n      required\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label for=\"password\" translate>Password</label>\n    <input\n      [(ngModel)]=\"model.password\"\n      #password=\"ngModel\"\n      type=\"password\"\n      name=\"password\"\n      id=\"password\"\n      class=\"form-control\"\n      placeholder-no-required-hint\n      required\n    />\n  </c8y-form-group>\n  <div class=\"form-group\" *ngIf=\"showBasicAuth\">\n    <label title=\"{{ 'Remember me' | translate }}\" class=\"c8y-checkbox\">\n      <input type=\"checkbox\" name=\"remember\" [(ngModel)]=\"loginService.rememberMe\" />\n      <span></span>\n      <span>{{ 'Remember me' | translate }}</span>\n    </label>\n  </div>\n  <button\n    title=\"{{ 'Log in' | translate }}\"\n    [disabled]=\"!loginForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Log in' | translate }}\n  </button>\n  <div class=\"text-center m-t-8\">\n    <a\n      title=\"{{ 'Forgot password?' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onChangeView.emit({ view: LOGIN_VIEWS.RecoverPassword })\"\n    >\n      {{ 'Forgot password?' | translate }}\n    </a>\n  </div>\n  <div class=\"text-center m-t-8\" *ngIf=\"!!(ui.state$ | async).loginExtraLink\">\n    <a\n      title=\"{{ (ui.state$ | async).loginExtraLink.label }}\"\n      [href]=\"(ui.state$ | async).loginExtraLink.url\"\n      class=\"btn btn-link btn-sm\"\n    >\n      {{ (ui.state$ | async).loginExtraLink.label }}\n    </a>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'c8y-credentials', template: "<div id=\"oauth\" *ngIf=\"oauthOptions.initRequest && oauthOptions.visibleOnLoginPage\">\n  <button\n    title=\"{{ oauthOptions.buttonName | translate }}\"\n    type=\"button\"\n    (click)=\"redirectToOauth()\"\n    class=\"btn btn-block btn-lg form-group\"\n  >\n    <i [c8yIcon]=\"'sign-in'\" class=\"pull-left\"></i>\n    {{ oauthOptions.buttonName | translate }}\n  </button>\n</div>\n\n<form class=\"loginForm\" (ngSubmit)=\"login()\" #loginForm=\"ngForm\" *ngIf=\"showLoginForm\" novalidate>\n  <span\n    class=\"legend form-block center\"\n    *ngIf=\"!(oauthOptions.initRequest && oauthOptions.visibleOnLoginPage); else orLegend\"\n    translate\n  >\n    Login\n  </span>\n  <ng-template #orLegend>\n    <div class=\"legend form-block center\" translate>or</div>\n  </ng-template>\n\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"showTenant\">\n    <label for=\"tenant\" translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenant\"\n      #tenant=\"ngModel\"\n      type=\"text\"\n      name=\"tenant\"\n      id=\"tenant\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} t12345\"\n      placeholder-no-required-hint\n      [readonly]=\"loginViewParams.disableTenant\"\n      required\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label for=\"user\" translate>Username</label>\n    <input\n      [(ngModel)]=\"model.user\"\n      #user=\"ngModel\"\n      type=\"text\"\n      name=\"user\"\n      id=\"user\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. joe or joe.doe@example.com`LOCALIZE`' | translate }}\"\n      placeholder-no-required-hint\n      required\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label for=\"password\" translate>Password</label>\n    <input\n      [(ngModel)]=\"model.password\"\n      #password=\"ngModel\"\n      type=\"password\"\n      name=\"password\"\n      id=\"password\"\n      class=\"form-control\"\n      placeholder-no-required-hint\n      required\n    />\n  </c8y-form-group>\n  <div class=\"form-group\" *ngIf=\"showBasicAuth\">\n    <label title=\"{{ 'Remember me' | translate }}\" class=\"c8y-checkbox\">\n      <input type=\"checkbox\" name=\"remember\" [(ngModel)]=\"loginService.rememberMe\" />\n      <span></span>\n      <span>{{ 'Remember me' | translate }}</span>\n    </label>\n  </div>\n  <button\n    title=\"{{ 'Log in' | translate }}\"\n    [disabled]=\"!loginForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Log in' | translate }}\n  </button>\n  <div class=\"text-center m-t-8\">\n    <button\n      type=\"button\"\n      title=\"{{ 'Forgot password?' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onChangeView.emit({ view: LOGIN_VIEWS.RecoverPassword })\"\n    >\n      {{ 'Forgot password?' | translate }}\n    </button>\n  </div>\n  <div class=\"text-center m-t-8\" *ngIf=\"!!(ui.state$ | async).loginExtraLink\">\n    <a\n      role=\"button\"\n      title=\"{{ (ui.state$ | async).loginExtraLink.label }}\"\n      [href]=\"(ui.state$ | async).loginExtraLink.url\"\n      class=\"btn btn-link btn-sm\"\n    >\n      {{ (ui.state$ | async).loginExtraLink.label }}\n    </a>\n  </div>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: LoginService }, { type: AlertService }, { type: AppStateService }, { type: CredentialsFromQueryParamsService }]; }, propDecorators: { onChangeView: [{
                 type: Output
             }], loginViewParams: [{
@@ -15136,10 +15142,10 @@ class LoginComponent {
     }
 }
 LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: LoginComponent, deps: [{ token: LoginService }, { token: OptionsService }, { token: AlertService }, { token: CredentialsFromQueryParamsService }], target: i0.ɵɵFactoryTarget.Component });
-LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: LoginComponent, selector: "c8y-login", inputs: { name: "name" }, host: { listeners: { "keyup": "onkeyup($event)" } }, ngImport: i0, template: "<div\n  class=\"loading card fadeInUp animated shadow5\"\n  *ngIf=\"currentView !== LOGIN_VIEWS.None\"\n  [ngSwitch]=\"currentView\"\n>\n  <div class=\"card-block p-b-0\">\n    <div class=\"mainlogo\"></div>\n    <c8y-credentials\n      *ngSwitchCase=\"LOGIN_VIEWS.Credentials\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [loginViewParams]=\"loginViewParams\"\n    ></c8y-credentials>\n    <c8y-recover-password\n      *ngSwitchCase=\"LOGIN_VIEWS.RecoverPassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-recover-password>\n    <c8y-change-password\n      *ngSwitchCase=\"LOGIN_VIEWS.ChangePassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-change-password>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpChallenge\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    >\n    </c8y-totp-auth>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpSetup\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    >\n    </c8y-totp-auth>\n    <c8y-sms-challenge\n      *ngSwitchCase=\"LOGIN_VIEWS.SmsChallenge\"\n      (onCancel)=\"reset()\"\n      [credentials]=\"credentials\"\n    ></c8y-sms-challenge>\n\n    <c8y-provide-phone-number\n      *ngSwitchCase=\"LOGIN_VIEWS.ProvidePhoneNumber\"\n      (onCancel)=\"reset()\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-provide-phone-number>\n    <c8y-tenant-id-setup\n      *ngSwitchCase=\"LOGIN_VIEWS.TenantIdSetup\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-tenant-id-setup>\n\n    <c8y-alert-outlet position=\"static\"></c8y-alert-outlet>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SmsChallengeComponent, selector: "c8y-sms-challenge", inputs: ["credentials"], outputs: ["onCancel"] }, { kind: "component", type: ProvidePhoneNumberComponent, selector: "c8y-provide-phone-number", inputs: ["credentials"], outputs: ["onCancel", "onChangeView"] }, { kind: "component", type: AlertOutletComponent, selector: "c8y-alert-outlet" }, { kind: "component", type: RecoverPasswordComponent, selector: "c8y-recover-password", outputs: ["onChangeView"] }, { kind: "component", type: ChangePasswordComponent, selector: "c8y-change-password", inputs: ["credentials"], outputs: ["onChangeView"] }, { kind: "component", type: CredentialsComponent, selector: "c8y-credentials", inputs: ["loginViewParams"], outputs: ["onChangeView"] }, { kind: "component", type: TotpAuthComponent, selector: "c8y-totp-auth", inputs: ["credentials", "view"], outputs: ["onCancel"] }, { kind: "component", type: TenantIdSetupComponent, selector: "c8y-tenant-id-setup", outputs: ["onChangeView"] }] });
+LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: LoginComponent, selector: "c8y-login", inputs: { name: "name" }, host: { listeners: { "keyup": "onkeyup($event)" } }, ngImport: i0, template: "<div\n  class=\"loading card fadeInUp animated shadow5\"\n  *ngIf=\"currentView !== LOGIN_VIEWS.None\"\n  [ngSwitch]=\"currentView\"\n>\n  <main class=\"card-block p-b-0\">\n    <span class=\"mainlogo\"></span>\n\n    <c8y-credentials\n      *ngSwitchCase=\"LOGIN_VIEWS.Credentials\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [loginViewParams]=\"loginViewParams\"\n    ></c8y-credentials>\n    <c8y-recover-password\n      *ngSwitchCase=\"LOGIN_VIEWS.RecoverPassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-recover-password>\n    <c8y-change-password\n      *ngSwitchCase=\"LOGIN_VIEWS.ChangePassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-change-password>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpChallenge\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    ></c8y-totp-auth>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpSetup\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    ></c8y-totp-auth>\n    <c8y-sms-challenge\n      *ngSwitchCase=\"LOGIN_VIEWS.SmsChallenge\"\n      (onCancel)=\"reset()\"\n      [credentials]=\"credentials\"\n    ></c8y-sms-challenge>\n\n    <c8y-provide-phone-number\n      *ngSwitchCase=\"LOGIN_VIEWS.ProvidePhoneNumber\"\n      (onCancel)=\"reset()\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-provide-phone-number>\n    <c8y-tenant-id-setup\n      *ngSwitchCase=\"LOGIN_VIEWS.TenantIdSetup\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-tenant-id-setup>\n\n    <c8y-alert-outlet position=\"static\"></c8y-alert-outlet>\n  </main>\n</div>\n", dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SmsChallengeComponent, selector: "c8y-sms-challenge", inputs: ["credentials"], outputs: ["onCancel"] }, { kind: "component", type: ProvidePhoneNumberComponent, selector: "c8y-provide-phone-number", inputs: ["credentials"], outputs: ["onCancel", "onChangeView"] }, { kind: "component", type: AlertOutletComponent, selector: "c8y-alert-outlet" }, { kind: "component", type: RecoverPasswordComponent, selector: "c8y-recover-password", outputs: ["onChangeView"] }, { kind: "component", type: ChangePasswordComponent, selector: "c8y-change-password", inputs: ["credentials"], outputs: ["onChangeView"] }, { kind: "component", type: CredentialsComponent, selector: "c8y-credentials", inputs: ["loginViewParams"], outputs: ["onChangeView"] }, { kind: "component", type: TotpAuthComponent, selector: "c8y-totp-auth", inputs: ["credentials", "view"], outputs: ["onCancel"] }, { kind: "component", type: TenantIdSetupComponent, selector: "c8y-tenant-id-setup", outputs: ["onChangeView"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-login', template: "<div\n  class=\"loading card fadeInUp animated shadow5\"\n  *ngIf=\"currentView !== LOGIN_VIEWS.None\"\n  [ngSwitch]=\"currentView\"\n>\n  <div class=\"card-block p-b-0\">\n    <div class=\"mainlogo\"></div>\n    <c8y-credentials\n      *ngSwitchCase=\"LOGIN_VIEWS.Credentials\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [loginViewParams]=\"loginViewParams\"\n    ></c8y-credentials>\n    <c8y-recover-password\n      *ngSwitchCase=\"LOGIN_VIEWS.RecoverPassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-recover-password>\n    <c8y-change-password\n      *ngSwitchCase=\"LOGIN_VIEWS.ChangePassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-change-password>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpChallenge\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    >\n    </c8y-totp-auth>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpSetup\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    >\n    </c8y-totp-auth>\n    <c8y-sms-challenge\n      *ngSwitchCase=\"LOGIN_VIEWS.SmsChallenge\"\n      (onCancel)=\"reset()\"\n      [credentials]=\"credentials\"\n    ></c8y-sms-challenge>\n\n    <c8y-provide-phone-number\n      *ngSwitchCase=\"LOGIN_VIEWS.ProvidePhoneNumber\"\n      (onCancel)=\"reset()\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-provide-phone-number>\n    <c8y-tenant-id-setup\n      *ngSwitchCase=\"LOGIN_VIEWS.TenantIdSetup\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-tenant-id-setup>\n\n    <c8y-alert-outlet position=\"static\"></c8y-alert-outlet>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-login', template: "<div\n  class=\"loading card fadeInUp animated shadow5\"\n  *ngIf=\"currentView !== LOGIN_VIEWS.None\"\n  [ngSwitch]=\"currentView\"\n>\n  <main class=\"card-block p-b-0\">\n    <span class=\"mainlogo\"></span>\n\n    <c8y-credentials\n      *ngSwitchCase=\"LOGIN_VIEWS.Credentials\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [loginViewParams]=\"loginViewParams\"\n    ></c8y-credentials>\n    <c8y-recover-password\n      *ngSwitchCase=\"LOGIN_VIEWS.RecoverPassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-recover-password>\n    <c8y-change-password\n      *ngSwitchCase=\"LOGIN_VIEWS.ChangePassword\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-change-password>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpChallenge\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    ></c8y-totp-auth>\n    <c8y-totp-auth\n      *ngSwitchCase=\"LOGIN_VIEWS.TotpSetup\"\n      (onCancel)=\"reset()\"\n      [view]=\"currentView\"\n      [credentials]=\"credentials\"\n    ></c8y-totp-auth>\n    <c8y-sms-challenge\n      *ngSwitchCase=\"LOGIN_VIEWS.SmsChallenge\"\n      (onCancel)=\"reset()\"\n      [credentials]=\"credentials\"\n    ></c8y-sms-challenge>\n\n    <c8y-provide-phone-number\n      *ngSwitchCase=\"LOGIN_VIEWS.ProvidePhoneNumber\"\n      (onCancel)=\"reset()\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n      [credentials]=\"credentials\"\n    ></c8y-provide-phone-number>\n    <c8y-tenant-id-setup\n      *ngSwitchCase=\"LOGIN_VIEWS.TenantIdSetup\"\n      (onChangeView)=\"handleLoginTemplate($event)\"\n    ></c8y-tenant-id-setup>\n\n    <c8y-alert-outlet position=\"static\"></c8y-alert-outlet>\n  </main>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: LoginService }, { type: OptionsService }, { type: AlertService }, { type: CredentialsFromQueryParamsService }]; }, propDecorators: { name: [{
                 type: Input
             }], onkeyup: [{
@@ -17388,7 +17394,7 @@ TypeaheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             useExisting: forwardRef(() => TypeaheadComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "list", predicate: ListItemComponent }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "searchControlModel", first: true, predicate: ["searchControlModel"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  dropdown\n  [container]=\"container\"\n  placement=\"bottom left\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"true\"\n  (onShown)=\"onShown()\"\n  [isDisabled]=\"disabled\"\n>\n  <div class=\"input-group input-group-dropdown\">\n    <input\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      type=\"text\"\n      class=\"form-control text-truncate\"\n      [ngClass]=\"{\n        'p-r-80':\n          !hideNew &&\n          (selected\n            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n            : false),\n        'p-r-40': hideNew || getDisplayProperty()?.length === 0\n      }\"\n      [required]=\"required\"\n      [ngModel]=\"selected ? getDisplayProperty() : ''\"\n      [placeholder]=\"placeholder | translate\"\n      (blur)=\"doBlur()\"\n      [name]=\"name\"\n      [maxlength]=\"maxlength\"\n      [disabled]=\"disabled\"\n    />\n    <span\n      class=\"label label-info p-absolute\"\n      style=\"top: 10px; right: 40px; z-index: 10\"\n      *ngIf=\"\n        !hideNew &&\n        (selected\n          ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n          : false)\n      \"\n    >\n      {{ 'New' | translate }}\n    </span>\n\n    <span class=\"input-group-btn\">\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event });\"\n        dropdownToggle\n        data-cy=\"typeahead-button\"\n      >\n        <i [c8yIcon]=\"icon\" class=\"text-primary\"></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    *dropdownMenu\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
+    ], queries: [{ propertyName: "list", predicate: ListItemComponent }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "searchControlModel", first: true, predicate: ["searchControlModel"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  dropdown\n  [container]=\"container\"\n  placement=\"bottom left\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"true\"\n  (onShown)=\"onShown()\"\n  [isDisabled]=\"disabled\"\n>\n  <div role=\"button\" class=\"input-group input-group-dropdown\">\n    <input\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      type=\"text\"\n      class=\"form-control text-truncate\"\n      [ngClass]=\"{\n        'p-r-80':\n          !hideNew &&\n          (selected\n            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n            : false),\n        'p-r-40': hideNew || getDisplayProperty()?.length === 0\n      }\"\n      [required]=\"required\"\n      [ngModel]=\"selected ? getDisplayProperty() : ''\"\n      [placeholder]=\"placeholder | translate\"\n      (blur)=\"doBlur()\"\n      [name]=\"name\"\n      [maxlength]=\"maxlength\"\n      [disabled]=\"disabled\"\n    />\n    <span\n      class=\"label label-info p-absolute\"\n      style=\"top: 10px; right: 40px; z-index: 10\"\n      *ngIf=\"\n        !hideNew &&\n        (selected\n          ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n          : false)\n      \"\n    >\n      {{ 'New' | translate }}\n    </span>\n\n    <span class=\"input-group-btn\">\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event });\"\n        dropdownToggle\n        data-cy=\"typeahead-button\"\n      >\n        <i [c8yIcon]=\"icon\" class=\"text-primary\"></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    role=\"menu\"\n    *dropdownMenu\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TypeaheadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-typeahead', providers: [
@@ -17402,7 +17408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                             useExisting: forwardRef(() => TypeaheadComponent),
                             multi: true
                         }
-                    ], template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  dropdown\n  [container]=\"container\"\n  placement=\"bottom left\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"true\"\n  (onShown)=\"onShown()\"\n  [isDisabled]=\"disabled\"\n>\n  <div class=\"input-group input-group-dropdown\">\n    <input\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      type=\"text\"\n      class=\"form-control text-truncate\"\n      [ngClass]=\"{\n        'p-r-80':\n          !hideNew &&\n          (selected\n            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n            : false),\n        'p-r-40': hideNew || getDisplayProperty()?.length === 0\n      }\"\n      [required]=\"required\"\n      [ngModel]=\"selected ? getDisplayProperty() : ''\"\n      [placeholder]=\"placeholder | translate\"\n      (blur)=\"doBlur()\"\n      [name]=\"name\"\n      [maxlength]=\"maxlength\"\n      [disabled]=\"disabled\"\n    />\n    <span\n      class=\"label label-info p-absolute\"\n      style=\"top: 10px; right: 40px; z-index: 10\"\n      *ngIf=\"\n        !hideNew &&\n        (selected\n          ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n          : false)\n      \"\n    >\n      {{ 'New' | translate }}\n    </span>\n\n    <span class=\"input-group-btn\">\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event });\"\n        dropdownToggle\n        data-cy=\"typeahead-button\"\n      >\n        <i [c8yIcon]=\"icon\" class=\"text-primary\"></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    *dropdownMenu\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></ng-content>\n  </c8y-list-group>\n</div>\n" }]
+                    ], template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  dropdown\n  [container]=\"container\"\n  placement=\"bottom left\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"true\"\n  (onShown)=\"onShown()\"\n  [isDisabled]=\"disabled\"\n>\n  <div role=\"button\" class=\"input-group input-group-dropdown\">\n    <input\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      type=\"text\"\n      class=\"form-control text-truncate\"\n      [ngClass]=\"{\n        'p-r-80':\n          !hideNew &&\n          (selected\n            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n            : false),\n        'p-r-40': hideNew || getDisplayProperty()?.length === 0\n      }\"\n      [required]=\"required\"\n      [ngModel]=\"selected ? getDisplayProperty() : ''\"\n      [placeholder]=\"placeholder | translate\"\n      (blur)=\"doBlur()\"\n      [name]=\"name\"\n      [maxlength]=\"maxlength\"\n      [disabled]=\"disabled\"\n    />\n    <span\n      class=\"label label-info p-absolute\"\n      style=\"top: 10px; right: 40px; z-index: 10\"\n      *ngIf=\"\n        !hideNew &&\n        (selected\n          ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n          : false)\n      \"\n    >\n      {{ 'New' | translate }}\n    </span>\n\n    <span class=\"input-group-btn\">\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event });\"\n        dropdownToggle\n        data-cy=\"typeahead-button\"\n      >\n        <i [c8yIcon]=\"icon\" class=\"text-primary\"></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    role=\"menu\"\n    *dropdownMenu\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></ng-content>\n  </c8y-list-group>\n</div>\n" }]
         }], propDecorators: { searchControl: [{
                 type: ViewChild,
                 args: ['searchControl', { static: false }]
@@ -19863,10 +19869,10 @@ class DropAreaComponent {
     }
 }
 DropAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DropAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FilesService }, { token: i1$3.TranslateService }, { token: BytesPipe }], target: i0.ɵɵFactoryTarget.Component });
-DropAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DropAreaComponent, selector: "c8y-drop-area", inputs: { formControl: "formControl", title: "title", message: "message", icon: "icon", loadingMessage: "loadingMessage", forceHideList: "forceHideList", alwaysShow: "alwaysShow", clickToOpen: "clickToOpen", loading: "loading", progress: "progress", maxAllowedFiles: "maxAllowedFiles", files: "files", accept: "accept" }, outputs: { dropped: "dropped" }, host: { listeners: { "keyup": "onkeyup($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, static: true }, { propertyName: "zone", first: true, predicate: ["zone"], descendants: true }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<div\n  class=\"drop-zone\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors }\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  (click)=\"showPicker($event)\"\n  tabindex=\"0\"\n>\n  <div class=\"file-placeholder\" [ngClass]=\"{ 'drag-over': isOver }\">\n    <div *ngIf=\"loading\" class=\"d-flex p-4 flex-center\">\n      <div\n        class=\"progress progress-striped active m-0\"\n        *ngIf=\"progress !== -1\"\n        style=\"min-width: 50%\"\n      >\n        <div\n          class=\"progress-bar\"\n          role=\"progressbar\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          [style.width]=\"progress + '%'\"\n        ></div>\n      </div>\n      <div class=\"spinner-snake\" *ngIf=\"progress === -1\"></div>\n      <p class=\"m-t-auto m-b-auto m-r-8\">\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n\n    <div *ngIf=\"!loading\" class=\"hint-placeholder pointer\">\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p *ngIf=\"!errors\">\n        <b>{{ message | translate }}</b>\n        <br />\n        <span *ngIf=\"alwaysShow && clickToOpen\" translate></span>\n      </p>\n      <div *ngIf=\"errors\" class=\"has-errors\">\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  *ngIf=\"shouldShowFilesList()\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n>\n  <div *ngIf=\"loading\" class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\">\n    <p class=\"m-b-8\">\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n    <div\n      class=\"progress progress-striped active m-0\"\n      *ngIf=\"progress !== -1\"\n      style=\"min-width: 80%\"\n    >\n      <div\n        class=\"progress-bar\"\n        role=\"progressbar\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        [style.width]=\"progress + '%'\"\n      ></div>\n    </div>\n    <div class=\"spinner p-relative m-0\" *ngIf=\"progress === -1\">\n      <div class=\"rect1\"></div>\n      <div class=\"rect2\"></div>\n      <div class=\"rect3\"></div>\n      <div class=\"rect4\"></div>\n      <div class=\"rect5\"></div>\n    </div>\n  </div>\n  <div *ngIf=\"!loading\" class=\"file-placeholder p-4\">\n    <div class=\"d-flex p-4\">\n      <i c8yIcon=\"file-o\" class=\"m-r-8\"></i>\n      <span title=\"{{ filesNameString }}\" class=\"text-truncate\">\n        {{ filesNameString }}\n      </span>\n      <button\n        title=\"{{ 'Remove' | translate }}\"\n        type=\"button\"\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n      >\n        <i c8yIcon=\"minus-circle\" (click)=\"onDelete()\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n\n<input\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  type=\"file\"\n  class=\"hidden\"\n/>\n<div #area [hidden]=\"isOver || loading\" (dragover)=\"toggle()\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
+DropAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DropAreaComponent, selector: "c8y-drop-area", inputs: { formControl: "formControl", title: "title", message: "message", icon: "icon", loadingMessage: "loadingMessage", forceHideList: "forceHideList", alwaysShow: "alwaysShow", clickToOpen: "clickToOpen", loading: "loading", progress: "progress", maxAllowedFiles: "maxAllowedFiles", files: "files", accept: "accept" }, outputs: { dropped: "dropped" }, host: { listeners: { "keyup": "onkeyup($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, static: true }, { propertyName: "zone", first: true, predicate: ["zone"], descendants: true }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<div\n  class=\"drop-zone\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors }\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  (click)=\"showPicker($event)\"\n  tabindex=\"0\"\n>\n  <div class=\"file-placeholder\" [ngClass]=\"{ 'drag-over': isOver }\">\n    <div *ngIf=\"loading\" class=\"d-flex p-4 flex-center\">\n      <div\n        class=\"progress progress-striped active m-0\"\n        *ngIf=\"progress !== -1\"\n        style=\"min-width: 50%\"\n      >\n        <div\n          [attr.aria-label]=\"progress + '%'\"\n          class=\"progress-bar\"\n          role=\"progressbar\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          [style.width]=\"progress + '%'\"\n        ></div>\n      </div>\n      <div class=\"spinner-snake\" *ngIf=\"progress === -1\"></div>\n      <p class=\"m-t-auto m-b-auto m-r-8\">\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n\n    <div *ngIf=\"!loading\" class=\"hint-placeholder pointer\">\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p *ngIf=\"!errors\">\n        <b>{{ message | translate }}</b>\n        <br />\n        <span *ngIf=\"alwaysShow && clickToOpen\" translate></span>\n      </p>\n      <div *ngIf=\"errors\" class=\"has-errors\">\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  *ngIf=\"shouldShowFilesList()\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n>\n  <div *ngIf=\"loading\" class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\">\n    <p class=\"m-b-8\">\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n    <div\n      class=\"progress progress-striped active m-0\"\n      *ngIf=\"progress !== -1\"\n      style=\"min-width: 80%\"\n    >\n      <div\n        [attr.aria-label]=\"progress + '%'\"\n        class=\"progress-bar\"\n        role=\"progressbar\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        [style.width]=\"progress + '%'\"\n      ></div>\n    </div>\n    <div class=\"spinner p-relative m-0\" *ngIf=\"progress === -1\">\n      <div class=\"rect1\"></div>\n      <div class=\"rect2\"></div>\n      <div class=\"rect3\"></div>\n      <div class=\"rect4\"></div>\n      <div class=\"rect5\"></div>\n    </div>\n  </div>\n  <div *ngIf=\"!loading\" class=\"file-placeholder p-4\">\n    <div class=\"d-flex p-4\">\n      <i c8yIcon=\"file-o\" class=\"m-r-8\"></i>\n      <span title=\"{{ filesNameString }}\" class=\"text-truncate\">\n        {{ filesNameString }}\n      </span>\n      <button\n        title=\"{{ 'Remove' | translate }}\"\n        aria-label=\"{{ 'Remove' | translate }}\"\n        type=\"button\"\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n      >\n        <i c8yIcon=\"minus-circle\" (click)=\"onDelete()\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label for=\"file\" class=\"sr-only\">{{ 'Select file' | translate }}</label>\n<input\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  type=\"file\"\n  class=\"hidden\"\n  id=\"file\"\n/>\n<div #area [hidden]=\"isOver || loading\" (dragover)=\"toggle()\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DropAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-drop-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], template: "<div\n  class=\"drop-zone\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors }\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  (click)=\"showPicker($event)\"\n  tabindex=\"0\"\n>\n  <div class=\"file-placeholder\" [ngClass]=\"{ 'drag-over': isOver }\">\n    <div *ngIf=\"loading\" class=\"d-flex p-4 flex-center\">\n      <div\n        class=\"progress progress-striped active m-0\"\n        *ngIf=\"progress !== -1\"\n        style=\"min-width: 50%\"\n      >\n        <div\n          class=\"progress-bar\"\n          role=\"progressbar\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          [style.width]=\"progress + '%'\"\n        ></div>\n      </div>\n      <div class=\"spinner-snake\" *ngIf=\"progress === -1\"></div>\n      <p class=\"m-t-auto m-b-auto m-r-8\">\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n\n    <div *ngIf=\"!loading\" class=\"hint-placeholder pointer\">\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p *ngIf=\"!errors\">\n        <b>{{ message | translate }}</b>\n        <br />\n        <span *ngIf=\"alwaysShow && clickToOpen\" translate></span>\n      </p>\n      <div *ngIf=\"errors\" class=\"has-errors\">\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  *ngIf=\"shouldShowFilesList()\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n>\n  <div *ngIf=\"loading\" class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\">\n    <p class=\"m-b-8\">\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n    <div\n      class=\"progress progress-striped active m-0\"\n      *ngIf=\"progress !== -1\"\n      style=\"min-width: 80%\"\n    >\n      <div\n        class=\"progress-bar\"\n        role=\"progressbar\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        [style.width]=\"progress + '%'\"\n      ></div>\n    </div>\n    <div class=\"spinner p-relative m-0\" *ngIf=\"progress === -1\">\n      <div class=\"rect1\"></div>\n      <div class=\"rect2\"></div>\n      <div class=\"rect3\"></div>\n      <div class=\"rect4\"></div>\n      <div class=\"rect5\"></div>\n    </div>\n  </div>\n  <div *ngIf=\"!loading\" class=\"file-placeholder p-4\">\n    <div class=\"d-flex p-4\">\n      <i c8yIcon=\"file-o\" class=\"m-r-8\"></i>\n      <span title=\"{{ filesNameString }}\" class=\"text-truncate\">\n        {{ filesNameString }}\n      </span>\n      <button\n        title=\"{{ 'Remove' | translate }}\"\n        type=\"button\"\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n      >\n        <i c8yIcon=\"minus-circle\" (click)=\"onDelete()\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n\n<input\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  type=\"file\"\n  class=\"hidden\"\n/>\n<div #area [hidden]=\"isOver || loading\" (dragover)=\"toggle()\">\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'c8y-drop-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], template: "<div\n  class=\"drop-zone\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors }\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  (click)=\"showPicker($event)\"\n  tabindex=\"0\"\n>\n  <div class=\"file-placeholder\" [ngClass]=\"{ 'drag-over': isOver }\">\n    <div *ngIf=\"loading\" class=\"d-flex p-4 flex-center\">\n      <div\n        class=\"progress progress-striped active m-0\"\n        *ngIf=\"progress !== -1\"\n        style=\"min-width: 50%\"\n      >\n        <div\n          [attr.aria-label]=\"progress + '%'\"\n          class=\"progress-bar\"\n          role=\"progressbar\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          [style.width]=\"progress + '%'\"\n        ></div>\n      </div>\n      <div class=\"spinner-snake\" *ngIf=\"progress === -1\"></div>\n      <p class=\"m-t-auto m-b-auto m-r-8\">\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n\n    <div *ngIf=\"!loading\" class=\"hint-placeholder pointer\">\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p *ngIf=\"!errors\">\n        <b>{{ message | translate }}</b>\n        <br />\n        <span *ngIf=\"alwaysShow && clickToOpen\" translate></span>\n      </p>\n      <div *ngIf=\"errors\" class=\"has-errors\">\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  *ngIf=\"shouldShowFilesList()\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n>\n  <div *ngIf=\"loading\" class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\">\n    <p class=\"m-b-8\">\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n    <div\n      class=\"progress progress-striped active m-0\"\n      *ngIf=\"progress !== -1\"\n      style=\"min-width: 80%\"\n    >\n      <div\n        [attr.aria-label]=\"progress + '%'\"\n        class=\"progress-bar\"\n        role=\"progressbar\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        [style.width]=\"progress + '%'\"\n      ></div>\n    </div>\n    <div class=\"spinner p-relative m-0\" *ngIf=\"progress === -1\">\n      <div class=\"rect1\"></div>\n      <div class=\"rect2\"></div>\n      <div class=\"rect3\"></div>\n      <div class=\"rect4\"></div>\n      <div class=\"rect5\"></div>\n    </div>\n  </div>\n  <div *ngIf=\"!loading\" class=\"file-placeholder p-4\">\n    <div class=\"d-flex p-4\">\n      <i c8yIcon=\"file-o\" class=\"m-r-8\"></i>\n      <span title=\"{{ filesNameString }}\" class=\"text-truncate\">\n        {{ filesNameString }}\n      </span>\n      <button\n        title=\"{{ 'Remove' | translate }}\"\n        aria-label=\"{{ 'Remove' | translate }}\"\n        type=\"button\"\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n      >\n        <i c8yIcon=\"minus-circle\" (click)=\"onDelete()\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label for=\"file\" class=\"sr-only\">{{ 'Select file' | translate }}</label>\n<input\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  type=\"file\"\n  class=\"hidden\"\n  id=\"file\"\n/>\n<div #area [hidden]=\"isOver || loading\" (dragover)=\"toggle()\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FilesService }, { type: i1$3.TranslateService }, { type: BytesPipe }]; }, propDecorators: { formControl: [{
                 type: Input
             }], title: [{
@@ -20006,10 +20012,10 @@ class FilePickerComponent {
     }
 }
 FilePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: FilePickerComponent, selector: "c8y-file-picker", inputs: { maxAllowedFiles: "maxAllowedFiles", uploadChoice: "uploadChoice", fileUrl: "fileUrl", fileBinary: "fileBinary", config: "config", fileUrlPopover: "fileUrlPopover" }, outputs: { onFilesPicked: "onFilesPicked" }, viewQueries: [{ propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <label title=\"{{ 'Upload a binary' | translate }}\" class=\"c8y-radio radio-inline\">\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadBinary\"\n      name=\"uploadChoice\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label title=\"{{ 'Provide a file path' | translate }}\" class=\"c8y-radio radio-inline m-l-8\">\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadUrl\"\n      name=\"uploadChoice\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      *ngIf=\"isPopoverUsed()\"\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      type=\"button\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      triggers=\"focus\"\n      container=\"body\"\n      placement=\"top\"\n    >\n      <i [c8yIcon]=\"'question-circle-o'\"></i>\n    </button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      (dropped)=\"onFileDropped($event)\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          maxlength=\"{{ config.maxlength }}\"\n          required\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "directive", type: i5.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: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "accept"], outputs: ["dropped"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
+FilePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: FilePickerComponent, selector: "c8y-file-picker", inputs: { maxAllowedFiles: "maxAllowedFiles", uploadChoice: "uploadChoice", fileUrl: "fileUrl", fileBinary: "fileBinary", config: "config", fileUrlPopover: "fileUrlPopover" }, outputs: { onFilesPicked: "onFilesPicked" }, viewQueries: [{ propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <label title=\"{{ 'Upload a binary' | translate }}\" class=\"c8y-radio radio-inline\">\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadBinary\"\n      name=\"uploadChoice\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label title=\"{{ 'Provide a file path' | translate }}\" class=\"c8y-radio radio-inline m-l-8\">\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadUrl\"\n      name=\"uploadChoice\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      *ngIf=\"isPopoverUsed()\"\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      type=\"button\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      triggers=\"focus\"\n      container=\"body\"\n      placement=\"top\"\n    >\n      <i [c8yIcon]=\"'question-circle-o'\"></i>\n    </button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      (dropped)=\"onFileDropped($event)\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          maxlength=\"{{ config.maxlength }}\"\n          required\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "directive", type: i5.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: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "accept"], outputs: ["dropped"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FilePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-file-picker', template: "<div class=\"form-group\">\n  <label title=\"{{ 'Upload a binary' | translate }}\" class=\"c8y-radio radio-inline\">\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadBinary\"\n      name=\"uploadChoice\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label title=\"{{ 'Provide a file path' | translate }}\" class=\"c8y-radio radio-inline m-l-8\">\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadUrl\"\n      name=\"uploadChoice\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      *ngIf=\"isPopoverUsed()\"\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      type=\"button\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      triggers=\"focus\"\n      container=\"body\"\n      placement=\"top\"\n    >\n      <i [c8yIcon]=\"'question-circle-o'\"></i>\n    </button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      (dropped)=\"onFileDropped($event)\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          maxlength=\"{{ config.maxlength }}\"\n          required\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n" }]
+            args: [{ selector: 'c8y-file-picker', template: "<div class=\"form-group\">\n  <label title=\"{{ 'Upload a binary' | translate }}\" class=\"c8y-radio radio-inline\">\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadBinary\"\n      name=\"uploadChoice\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label title=\"{{ 'Provide a file path' | translate }}\" class=\"c8y-radio radio-inline m-l-8\">\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadUrl\"\n      name=\"uploadChoice\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      *ngIf=\"isPopoverUsed()\"\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      type=\"button\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      triggers=\"focus\"\n      container=\"body\"\n      placement=\"top\"\n    >\n      <i [c8yIcon]=\"'question-circle-o'\"></i>\n    </button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      (dropped)=\"onFileDropped($event)\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          maxlength=\"{{ config.maxlength }}\"\n          required\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n" }]
         }], propDecorators: { dropArea: [{
                 type: ViewChild,
                 args: [DropAreaComponent, { static: true }]
@@ -20090,10 +20096,10 @@ class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatePickerComponent, selector: "c8y-date-picker", outputs: { onDateSelected: "onDateSelected" }, ngImport: i0, template: "<div\n  dropdown\n  class=\"c8y-child-assets-selector dropdown\"\n  #datefilter=\"bs-dropdown\"\n  placement=\"bottom left\"\n  [insideClick]=\"true\"\n>\n  <button\n    id=\"date-range\"\n    dropdownToggle\n    title=\"{{ 'Date filter' | translate }}\"\n    type=\"button\"\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n  >\n    <i c8yIcon=\"calendar-o\" class=\"m-r-4 text-primary\"></i>\n    <span class=\"text-truncate\">\n      <span *ngIf=\"dateFrom\">\n        <span class=\"text-label-small\">{{ 'From`date`' | translate }}</span>\n        {{ dateFrom | date }}\n      </span>\n      <span *ngIf=\"dateTo\">\n        <span class=\"text-label-small\">{{ 'To`date`' | translate }}</span>\n        {{ dateTo | date }}\n      </span>\n      <span *ngIf=\"!dateFrom && !dateTo\">\n        {{ 'Filter by date' | translate }}\n      </span>\n    </span>\n  </button>\n  <div\n    id=\"dropdown-date-range\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"date-range\"\n  >\n    <form [formGroup]=\"fgDatePicker\" class=\"dropdown-form\">\n      <span for=\"dateFrom\" class=\"text-medium m-b-4\" translate>Date from</span>\n      <c8y-form-group class=\"datepicker d-block m-b-16\" style=\"max-height: 32px\">\n        <input\n          id=\"dateFrom\"\n          formControlName=\"dateFrom\"\n          class=\"form-control fit-w text-left\"\n          placeholder=\"{{ 'Date from' | translate }}\"\n          bsDatepicker\n          [maxDate]=\"dateTo\"\n          (bsValueChange)=\"dateFrom = $event\"\n          [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true }\"\n        />\n      </c8y-form-group>\n      <span for=\"dateTo\" class=\"text-medium m-b-4\" translate>Date to</span>\n      <c8y-form-group class=\"datepicker m-l-0 d-block\" style=\"max-height: 32px\">\n        <input\n          name=\"dateTo\"\n          id=\"dateTo\"\n          formControlName=\"dateTo\"\n          class=\"form-control fit-w text-left\"\n          placeholder=\"{{ 'Date to' | translate }}\"\n          bsDatepicker\n          [minDate]=\"dateFrom\"\n          (bsValueChange)=\"dateTo = $event\"\n          [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true }\"\n        />\n      </c8y-form-group>\n      <div class=\"p-t-24\">\n        <button\n          title=\"{{ 'Clear selection' | translate }}\"\n          type=\"button\"\n          class=\"btn btn-default btn-sm\"\n          (click)=\"clearFilter(); datefilter.isOpen = !datefilter.isOpen\"\n        >\n          {{ 'Clear`selection`' | translate }}\n        </button>\n        <button\n          [disabled]=\"!fgDatePicker.get('dateFrom').value && !fgDatePicker.get('dateTo').value\"\n          title=\"{{ 'Apply selection' | translate }}\"\n          type=\"submit\"\n          class=\"btn btn-primary btn-sm\"\n          (click)=\"filter(); datefilter.isOpen = !datefilter.isOpen\"\n        >\n          {{ 'Apply`selection`' | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i6.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i6.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: i1$5.DatePipe, name: "date" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatePickerComponent, selector: "c8y-date-picker", outputs: { onDateSelected: "onDateSelected" }, ngImport: i0, template: "<div\n  dropdown\n  class=\"c8y-child-assets-selector dropdown\"\n  #datefilter=\"bs-dropdown\"\n  placement=\"bottom left\"\n  [insideClick]=\"true\"\n>\n  <button\n    id=\"date-range\"\n    dropdownToggle\n    title=\"{{ 'Date filter' | translate }}\"\n    type=\"button\"\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n    aria-haspopup=\"true\"\n  >\n    <i c8yIcon=\"calendar-o\" class=\"m-r-4 text-primary\"></i>\n    <span class=\"text-truncate\">\n      <span *ngIf=\"dateFrom\">\n        <span class=\"text-label-small\">{{ 'From`date`' | translate }}</span>\n        {{ dateFrom | date }}\n      </span>\n      <span *ngIf=\"dateTo\">\n        <span class=\"text-label-small\">{{ 'To`date`' | translate }}</span>\n        {{ dateTo | date }}\n      </span>\n      <span *ngIf=\"!dateFrom && !dateTo\">\n        {{ 'Filter by date' | translate }}\n      </span>\n    </span>\n  </button>\n  <div\n    id=\"dropdown-date-range\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"date-range\"\n  >\n    <form [formGroup]=\"fgDatePicker\" class=\"dropdown-form\">\n      <span for=\"dateFrom\" class=\"text-medium m-b-4\" translate>Date from</span>\n      <c8y-form-group class=\"datepicker d-block m-b-16\" style=\"max-height: 32px\">\n        <input\n          id=\"dateFrom\"\n          formControlName=\"dateFrom\"\n          class=\"form-control fit-w text-left\"\n          placeholder=\"{{ 'Date from' | translate }}\"\n          bsDatepicker\n          [maxDate]=\"dateTo\"\n          (bsValueChange)=\"dateFrom = $event\"\n          [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true }\"\n        />\n      </c8y-form-group>\n      <span for=\"dateTo\" class=\"text-medium m-b-4\" translate>Date to</span>\n      <c8y-form-group class=\"datepicker m-l-0 d-block\" style=\"max-height: 32px\">\n        <input\n          name=\"dateTo\"\n          id=\"dateTo\"\n          formControlName=\"dateTo\"\n          class=\"form-control fit-w text-left\"\n          placeholder=\"{{ 'Date to' | translate }}\"\n          bsDatepicker\n          [minDate]=\"dateFrom\"\n          (bsValueChange)=\"dateTo = $event\"\n          [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true }\"\n        />\n      </c8y-form-group>\n      <div class=\"p-t-24\">\n        <button\n          title=\"{{ 'Clear selection' | translate }}\"\n          type=\"button\"\n          class=\"btn btn-default btn-sm\"\n          (click)=\"clearFilter(); datefilter.isOpen = !datefilter.isOpen\"\n        >\n          {{ 'Clear`selection`' | translate }}\n        </button>\n        <button\n          [disabled]=\"!fgDatePicker.get('dateFrom').value && !fgDatePicker.get('dateTo').value\"\n          title=\"{{ 'Apply selection' | translate }}\"\n          type=\"submit\"\n          class=\"btn btn-primary btn-sm\"\n          (click)=\"filter(); datefilter.isOpen = !datefilter.isOpen\"\n        >\n          {{ 'Apply`selection`' | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i6.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i6.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: i1$5.DatePipe, name: "date" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-date-picker', template: "<div\n  dropdown\n  class=\"c8y-child-assets-selector dropdown\"\n  #datefilter=\"bs-dropdown\"\n  placement=\"bottom left\"\n  [insideClick]=\"true\"\n>\n  <button\n    id=\"date-range\"\n    dropdownToggle\n    title=\"{{ 'Date filter' | translate }}\"\n    type=\"button\"\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n  >\n    <i c8yIcon=\"calendar-o\" class=\"m-r-4 text-primary\"></i>\n    <span class=\"text-truncate\">\n      <span *ngIf=\"dateFrom\">\n        <span class=\"text-label-small\">{{ 'From`date`' | translate }}</span>\n        {{ dateFrom | date }}\n      </span>\n      <span *ngIf=\"dateTo\">\n        <span class=\"text-label-small\">{{ 'To`date`' | translate }}</span>\n        {{ dateTo | date }}\n      </span>\n      <span *ngIf=\"!dateFrom && !dateTo\">\n        {{ 'Filter by date' | translate }}\n      </span>\n    </span>\n  </button>\n  <div\n    id=\"dropdown-date-range\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"date-range\"\n  >\n    <form [formGroup]=\"fgDatePicker\" class=\"dropdown-form\">\n      <span for=\"dateFrom\" class=\"text-medium m-b-4\" translate>Date from</span>\n      <c8y-form-group class=\"datepicker d-block m-b-16\" style=\"max-height: 32px\">\n        <input\n          id=\"dateFrom\"\n          formControlName=\"dateFrom\"\n          class=\"form-control fit-w text-left\"\n          placeholder=\"{{ 'Date from' | translate }}\"\n          bsDatepicker\n          [maxDate]=\"dateTo\"\n          (bsValueChange)=\"dateFrom = $event\"\n          [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true }\"\n        />\n      </c8y-form-group>\n      <span for=\"dateTo\" class=\"text-medium m-b-4\" translate>Date to</span>\n      <c8y-form-group class=\"datepicker m-l-0 d-block\" style=\"max-height: 32px\">\n        <input\n          name=\"dateTo\"\n          id=\"dateTo\"\n          formControlName=\"dateTo\"\n          class=\"form-control fit-w text-left\"\n          placeholder=\"{{ 'Date to' | translate }}\"\n          bsDatepicker\n          [minDate]=\"dateFrom\"\n          (bsValueChange)=\"dateTo = $event\"\n          [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true }\"\n        />\n      </c8y-form-group>\n      <div class=\"p-t-24\">\n        <button\n          title=\"{{ 'Clear selection' | translate }}\"\n          type=\"button\"\n          class=\"btn btn-default btn-sm\"\n          (click)=\"clearFilter(); datefilter.isOpen = !datefilter.isOpen\"\n        >\n          {{ 'Clear`selection`' | translate }}\n        </button>\n        <button\n          [disabled]=\"!fgDatePicker.get('dateFrom').value && !fgDatePicker.get('dateTo').value\"\n          title=\"{{ 'Apply selection' | translate }}\"\n          type=\"submit\"\n          class=\"btn btn-primary btn-sm\"\n          (click)=\"filter(); datefilter.isOpen = !datefilter.isOpen\"\n        >\n          {{ 'Apply`selection`' | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-date-picker', template: "<div\n  dropdown\n  class=\"c8y-child-assets-selector dropdown\"\n  #datefilter=\"bs-dropdown\"\n  placement=\"bottom left\"\n  [insideClick]=\"true\"\n>\n  <button\n    id=\"date-range\"\n    dropdownToggle\n    title=\"{{ 'Date filter' | translate }}\"\n    type=\"button\"\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n    aria-haspopup=\"true\"\n  >\n    <i c8yIcon=\"calendar-o\" class=\"m-r-4 text-primary\"></i>\n    <span class=\"text-truncate\">\n      <span *ngIf=\"dateFrom\">\n        <span class=\"text-label-small\">{{ 'From`date`' | translate }}</span>\n        {{ dateFrom | date }}\n      </span>\n      <span *ngIf=\"dateTo\">\n        <span class=\"text-label-small\">{{ 'To`date`' | translate }}</span>\n        {{ dateTo | date }}\n      </span>\n      <span *ngIf=\"!dateFrom && !dateTo\">\n        {{ 'Filter by date' | translate }}\n      </span>\n    </span>\n  </button>\n  <div\n    id=\"dropdown-date-range\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"date-range\"\n  >\n    <form [formGroup]=\"fgDatePicker\" class=\"dropdown-form\">\n      <span for=\"dateFrom\" class=\"text-medium m-b-4\" translate>Date from</span>\n      <c8y-form-group class=\"datepicker d-block m-b-16\" style=\"max-height: 32px\">\n        <input\n          id=\"dateFrom\"\n          formControlName=\"dateFrom\"\n          class=\"form-control fit-w text-left\"\n          placeholder=\"{{ 'Date from' | translate }}\"\n          bsDatepicker\n          [maxDate]=\"dateTo\"\n          (bsValueChange)=\"dateFrom = $event\"\n          [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true }\"\n        />\n      </c8y-form-group>\n      <span for=\"dateTo\" class=\"text-medium m-b-4\" translate>Date to</span>\n      <c8y-form-group class=\"datepicker m-l-0 d-block\" style=\"max-height: 32px\">\n        <input\n          name=\"dateTo\"\n          id=\"dateTo\"\n          formControlName=\"dateTo\"\n          class=\"form-control fit-w text-left\"\n          placeholder=\"{{ 'Date to' | translate }}\"\n          bsDatepicker\n          [minDate]=\"dateFrom\"\n          (bsValueChange)=\"dateTo = $event\"\n          [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true }\"\n        />\n      </c8y-form-group>\n      <div class=\"p-t-24\">\n        <button\n          title=\"{{ 'Clear selection' | translate }}\"\n          type=\"button\"\n          class=\"btn btn-default btn-sm\"\n          (click)=\"clearFilter(); datefilter.isOpen = !datefilter.isOpen\"\n        >\n          {{ 'Clear`selection`' | translate }}\n        </button>\n        <button\n          [disabled]=\"!fgDatePicker.get('dateFrom').value && !fgDatePicker.get('dateTo').value\"\n          title=\"{{ 'Apply selection' | translate }}\"\n          type=\"submit\"\n          class=\"btn btn-primary btn-sm\"\n          (click)=\"filter(); datefilter.isOpen = !datefilter.isOpen\"\n        >\n          {{ 'Apply`selection`' | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n" }]
         }], propDecorators: { onDateSelected: [{
                 type: Output
             }] } });
@@ -21979,7 +21985,7 @@ class DynamicComponentComponent {
                     return;
                 }
             }
-            this.loadComponent(cmp, errors);
+            yield this.loadComponent(cmp, errors);
             const ngOnChanges = (_b = (_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.instance) === null || _b === void 0 ? void 0 : _b.ngOnChanges;
             if (ngOnChanges) {
                 ngOnChanges.call(this.componentRef.instance, changes);
@@ -21991,22 +21997,42 @@ class DynamicComponentComponent {
         this.destroy$.complete();
     }
     loadComponent(dynamicComponent, errors = []) {
-        try {
-            this.error = undefined;
-            const componentType = this.mode === 'component' ? dynamicComponent.component : dynamicComponent.configComponent;
-            this.host.clear();
-            this.componentRef = this.host.createComponent(componentType, {
-                environmentInjector: (dynamicComponent.injector || this.injector)
-            });
-            this.componentInstance = this.componentRef.instance;
-            this.componentInstance.config = this.config;
-            this.componentInstance.alerts = new DynamicComponentAlertAggregator(errors);
-            this.subscribeForOverlayChange();
-        }
-        catch (ex) {
-            this.error = ex;
-            console.warn(ex);
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                this.error = undefined;
+                const componentType = yield this.getComponentType(dynamicComponent);
+                this.host.clear();
+                this.componentRef = this.host.createComponent(componentType, {
+                    environmentInjector: (dynamicComponent.injector || this.injector)
+                });
+                this.componentInstance = this.componentRef.instance;
+                this.componentInstance.config = this.config;
+                this.componentInstance.alerts = new DynamicComponentAlertAggregator(errors);
+                this.subscribeForOverlayChange();
+            }
+            catch (ex) {
+                this.error = ex;
+                console.warn(ex);
+            }
+        });
+    }
+    getComponentType(dynamicComponent) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (isLazyDynamicComponents(dynamicComponent)) {
+                const componentPromiseFunction = this.mode === 'component'
+                    ? dynamicComponent.loadComponent
+                    : dynamicComponent.loadConfigComponent;
+                if (!componentPromiseFunction) {
+                    return;
+                }
+                return yield componentPromiseFunction();
+            }
+            else if (isEagerDynamicComponents(dynamicComponent)) {
+                return this.mode === 'component'
+                    ? dynamicComponent.component
+                    : dynamicComponent.configComponent;
+            }
+        });
     }
     subscribeForOverlayChange() {
         this.componentInstance.alerts.anyAlertExists$
@@ -22922,12 +22948,12 @@ class DashboardChildComponent {
     }
 }
 DashboardChildComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DashboardChildComponent, deps: [{ token: DashboardComponent }, { token: i1$6.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DashboardChildComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: { x: "x", y: "y", width: "width", height: "height", data: "data", margin: "margin", isFrozen: "isFrozen", useIntersection: "useIntersection", class: "class" }, outputs: { changeStart: "changeStart", changeEnd: "changeEnd" }, host: { properties: { "attr.style": "this.inlineStyle" }, classAttribute: "dashboard-grid-child" }, queries: [{ propertyName: "actions", predicate: DashboardChildActionComponent }], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList>\n  <div *ngIf=\"isResize\" class=\"card-placeholder\"></div>\n  <div\n    [ngClass]=\"klasses\"\n    cdkDrag\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"isFrozen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{ 'drag-handle': !isFrozen, draggableCursor: !isFrozen }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n      <div class=\"header-actions\" *ngIf=\"!isFrozen && actions.length > 0\">\n        <div class=\"optionsBtn dropdown\" dropdown placement=\"bottom right\">\n          <button\n            title=\"{{ 'Settings' | translate }}\"\n            class=\"btnIcon c8y-dropdown\"\n            (click)=\"(false)\"\n            dropdownToggle\n          >\n            <i [c8yIcon]=\"'cog'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu dropdown-menu-right\"\n            style=\"right:-1px;\"\n            *dropdownMenu\n          >\n            <ng-container *ngFor=\"let action of actions\">\n              <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n            </ng-container>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"!isFrozen && !isDragging\"\n      class=\"resize-handle hidden-xs\"\n      cdkDrag\n      [cdkDragDisabled]=\"isFrozen\"\n      (cdkDragStarted)=\"resizeStarted($event)\"\n      (cdkDragEnded)=\"reset($event)\"\n    ></div>\n    <div class=\"resize-icon hidden-xs\" *ngIf=\"!isFrozen && !isDragging\"></div>\n\n    <div *cdkDragPlaceholder class=\"card-placeholder\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
+DashboardChildComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: { x: "x", y: "y", width: "width", height: "height", data: "data", margin: "margin", isFrozen: "isFrozen", useIntersection: "useIntersection", class: "class" }, outputs: { changeStart: "changeStart", changeEnd: "changeEnd" }, host: { properties: { "attr.style": "this.inlineStyle" }, classAttribute: "dashboard-grid-child" }, queries: [{ propertyName: "actions", predicate: DashboardChildActionComponent }], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList>\n  <div *ngIf=\"isResize\" class=\"card-placeholder\"></div>\n  <div\n    [ngClass]=\"klasses\"\n    cdkDrag\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"isFrozen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{ 'drag-handle': !isFrozen, draggableCursor: !isFrozen }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n      <div class=\"header-actions\" *ngIf=\"!isFrozen && actions.length > 0\">\n        <div class=\"optionsBtn dropdown\" dropdown placement=\"bottom right\">\n          <button\n            title=\"{{ 'Settings' | translate }}\"\n            class=\"btnIcon c8y-dropdown\"\n            (click)=\"(false)\"\n            dropdownToggle\n            aria-haspopup=\"true\"\n          >\n            <i [c8yIcon]=\"'cog'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu dropdown-menu-right\"\n            style=\"right:-1px;\"\n            *dropdownMenu\n          >\n            <ng-container *ngFor=\"let action of actions\">\n              <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n            </ng-container>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"!isFrozen && !isDragging\"\n      class=\"resize-handle hidden-xs\"\n      cdkDrag\n      [cdkDragDisabled]=\"isFrozen\"\n      (cdkDragStarted)=\"resizeStarted($event)\"\n      (cdkDragEnded)=\"reset($event)\"\n    ></div>\n    <div class=\"resize-icon hidden-xs\" *ngIf=\"!isFrozen && !isDragging\"></div>\n\n    <div *cdkDragPlaceholder class=\"card-placeholder\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DashboardChildComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-dashboard-child', host: {
                         class: 'dashboard-grid-child'
-                    }, template: "<div cdkDropList>\n  <div *ngIf=\"isResize\" class=\"card-placeholder\"></div>\n  <div\n    [ngClass]=\"klasses\"\n    cdkDrag\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"isFrozen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{ 'drag-handle': !isFrozen, draggableCursor: !isFrozen }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n      <div class=\"header-actions\" *ngIf=\"!isFrozen && actions.length > 0\">\n        <div class=\"optionsBtn dropdown\" dropdown placement=\"bottom right\">\n          <button\n            title=\"{{ 'Settings' | translate }}\"\n            class=\"btnIcon c8y-dropdown\"\n            (click)=\"(false)\"\n            dropdownToggle\n          >\n            <i [c8yIcon]=\"'cog'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu dropdown-menu-right\"\n            style=\"right:-1px;\"\n            *dropdownMenu\n          >\n            <ng-container *ngFor=\"let action of actions\">\n              <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n            </ng-container>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"!isFrozen && !isDragging\"\n      class=\"resize-handle hidden-xs\"\n      cdkDrag\n      [cdkDragDisabled]=\"isFrozen\"\n      (cdkDragStarted)=\"resizeStarted($event)\"\n      (cdkDragEnded)=\"reset($event)\"\n    ></div>\n    <div class=\"resize-icon hidden-xs\" *ngIf=\"!isFrozen && !isDragging\"></div>\n\n    <div *cdkDragPlaceholder class=\"card-placeholder\"></div>\n  </div>\n</div>\n" }]
+                    }, template: "<div cdkDropList>\n  <div *ngIf=\"isResize\" class=\"card-placeholder\"></div>\n  <div\n    [ngClass]=\"klasses\"\n    cdkDrag\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"isFrozen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{ 'drag-handle': !isFrozen, draggableCursor: !isFrozen }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n      <div class=\"header-actions\" *ngIf=\"!isFrozen && actions.length > 0\">\n        <div class=\"optionsBtn dropdown\" dropdown placement=\"bottom right\">\n          <button\n            title=\"{{ 'Settings' | translate }}\"\n            class=\"btnIcon c8y-dropdown\"\n            (click)=\"(false)\"\n            dropdownToggle\n            aria-haspopup=\"true\"\n          >\n            <i [c8yIcon]=\"'cog'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu dropdown-menu-right\"\n            style=\"right:-1px;\"\n            *dropdownMenu\n          >\n            <ng-container *ngFor=\"let action of actions\">\n              <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n            </ng-container>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"!isFrozen && !isDragging\"\n      class=\"resize-handle hidden-xs\"\n      cdkDrag\n      [cdkDragDisabled]=\"isFrozen\"\n      (cdkDragStarted)=\"resizeStarted($event)\"\n      (cdkDragEnded)=\"reset($event)\"\n    ></div>\n    <div class=\"resize-icon hidden-xs\" *ngIf=\"!isFrozen && !isDragging\"></div>\n\n    <div *cdkDragPlaceholder class=\"card-placeholder\"></div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: DashboardComponent }, { type: i1$6.DomSanitizer }, { type: i0.ElementRef }]; }, propDecorators: { actions: [{
                 type: ContentChildren,
                 args: [DashboardChildActionComponent]
@@ -23249,10 +23275,10 @@ class WidgetTimeContextComponent {
     }
 }
 WidgetTimeContextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetTimeContextComponent, deps: [{ token: WidgetsDashboardEventService }, { token: DashboardChildComponent }, { token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-WidgetTimeContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: { canDecouple: "canDecouple" }, outputs: { dateContextChange: "dateContextChange" }, host: { classAttribute: "d-flex a-i-center gap-4" }, viewQueries: [{ propertyName: "action", first: true, predicate: DashboardChildActionComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item\n  *ngIf=\"isCoupled\"\n  [groupId]=\"'timecontext'\"\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{ date: globalDate }\"\n  ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n  *ngIf=\"!isCoupled\"\n  [ngTemplateOutlet]=\"dateTimePicker\"\n  [ngTemplateOutletContext]=\"{ date: localDate }\"\n></ng-container>\n\n<ng-template #dateTimePicker let-date=\"date\">\n  <label>{{ 'Time range' | translate }}</label>\n  <div\n    class=\"dropdown m-r-4\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    container=\"body\"\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-1 d-flex a-i-center\"\n      dropdownToggle\n      title=\"{{ date[0] | c8yDate: 'short' }} \u2014 {{ date[1] | c8yDate: 'short' }}\"\n    >\n      <span>{{ date[0] | c8yDate: 'shortDate' }} \u2014 {{ date[1] | c8yDate: 'shortDate' }}</span>\n      <span class=\"caret m-r-8 m-l-4\"></span>\n    </button>\n\n    <div *dropdownMenu class=\"dropdown-menu dropdown-menu--date-range\">\n      <div class=\"p-16\">\n        <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          (click)=\"reset(); dropdown.isOpen = false\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Reset\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n          [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Apply\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"c8y-select-wrapper\">\n    <select\n      class=\"form-control\"\n      [ngModel]=\"currentPredefinedTimeSpan\"\n      (ngModelChange)=\"predefinedDateFromSelected($event)\"\n    >\n      <option value=\"undefined\" disabled=\"true\">{{ 'Custom range`time`' | translate }}</option>\n      <option *ngFor=\"let dateFrom of predefinedTimeSpanList\" [ngValue]=\"dateFrom\">\n        {{ dateFrom.title }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</ng-template>\n\n<c8y-dashboard-child-action *ngIf=\"canDecouple\">\n  <a href=\"\" (click)=\"toggleDecoupling(); (false)\">\n    <i [c8yIcon]=\"isCoupled ? 'unlock' : 'lock'\"></i>\n    <span class=\"m-l-4\">\n      {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n    </span>\n  </a>\n</c8y-dashboard-child-action>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.FormlyForm, selector: "formly-form", inputs: ["model", "fields", "options", "form"], outputs: ["modelChange"] }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] });
+WidgetTimeContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: { canDecouple: "canDecouple" }, outputs: { dateContextChange: "dateContextChange" }, host: { classAttribute: "d-flex a-i-center gap-4" }, viewQueries: [{ propertyName: "action", first: true, predicate: DashboardChildActionComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item\n  *ngIf=\"isCoupled\"\n  [groupId]=\"'timecontext'\"\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{ date: globalDate }\"\n  ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n  *ngIf=\"!isCoupled\"\n  [ngTemplateOutlet]=\"dateTimePicker\"\n  [ngTemplateOutletContext]=\"{ date: localDate }\"\n></ng-container>\n\n<ng-template #dateTimePicker let-date=\"date\">\n  <label>{{ 'Time range' | translate }}</label>\n  <div\n    class=\"dropdown m-r-4\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    container=\"body\"\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-1 d-flex a-i-center\"\n      dropdownToggle\n      title=\"{{ date[0] | c8yDate: 'short' }} \u2014 {{ date[1] | c8yDate: 'short' }}\"\n      aria-haspopup=\"true\"\n    >\n      <span>{{ date[0] | c8yDate: 'shortDate' }} \u2014 {{ date[1] | c8yDate: 'shortDate' }}</span>\n      <span class=\"caret m-r-8 m-l-4\"></span>\n    </button>\n\n    <div *dropdownMenu class=\"dropdown-menu dropdown-menu--date-range\">\n      <div class=\"p-16\">\n        <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          (click)=\"reset(); dropdown.isOpen = false\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Reset\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n          [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Apply\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"c8y-select-wrapper\">\n    <select\n      class=\"form-control\"\n      [ngModel]=\"currentPredefinedTimeSpan\"\n      (ngModelChange)=\"predefinedDateFromSelected($event)\"\n    >\n      <option value=\"undefined\" disabled=\"true\">{{ 'Custom range`time`' | translate }}</option>\n      <option *ngFor=\"let dateFrom of predefinedTimeSpanList\" [ngValue]=\"dateFrom\">\n        {{ dateFrom.title }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</ng-template>\n\n<c8y-dashboard-child-action *ngIf=\"canDecouple\">\n  <a href=\"\" (click)=\"toggleDecoupling(); (false)\">\n    <i [c8yIcon]=\"isCoupled ? 'unlock' : 'lock'\"></i>\n    <span class=\"m-l-4\">\n      {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n    </span>\n  </a>\n</c8y-dashboard-child-action>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.FormlyForm, selector: "formly-form", inputs: ["model", "fields", "options", "form"], outputs: ["modelChange"] }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetTimeContextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-widget-time-context', host: { class: 'd-flex a-i-center gap-4' }, template: "<c8y-action-bar-item\n  *ngIf=\"isCoupled\"\n  [groupId]=\"'timecontext'\"\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{ date: globalDate }\"\n  ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n  *ngIf=\"!isCoupled\"\n  [ngTemplateOutlet]=\"dateTimePicker\"\n  [ngTemplateOutletContext]=\"{ date: localDate }\"\n></ng-container>\n\n<ng-template #dateTimePicker let-date=\"date\">\n  <label>{{ 'Time range' | translate }}</label>\n  <div\n    class=\"dropdown m-r-4\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    container=\"body\"\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-1 d-flex a-i-center\"\n      dropdownToggle\n      title=\"{{ date[0] | c8yDate: 'short' }} \u2014 {{ date[1] | c8yDate: 'short' }}\"\n    >\n      <span>{{ date[0] | c8yDate: 'shortDate' }} \u2014 {{ date[1] | c8yDate: 'shortDate' }}</span>\n      <span class=\"caret m-r-8 m-l-4\"></span>\n    </button>\n\n    <div *dropdownMenu class=\"dropdown-menu dropdown-menu--date-range\">\n      <div class=\"p-16\">\n        <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          (click)=\"reset(); dropdown.isOpen = false\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Reset\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n          [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Apply\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"c8y-select-wrapper\">\n    <select\n      class=\"form-control\"\n      [ngModel]=\"currentPredefinedTimeSpan\"\n      (ngModelChange)=\"predefinedDateFromSelected($event)\"\n    >\n      <option value=\"undefined\" disabled=\"true\">{{ 'Custom range`time`' | translate }}</option>\n      <option *ngFor=\"let dateFrom of predefinedTimeSpanList\" [ngValue]=\"dateFrom\">\n        {{ dateFrom.title }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</ng-template>\n\n<c8y-dashboard-child-action *ngIf=\"canDecouple\">\n  <a href=\"\" (click)=\"toggleDecoupling(); (false)\">\n    <i [c8yIcon]=\"isCoupled ? 'unlock' : 'lock'\"></i>\n    <span class=\"m-l-4\">\n      {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n    </span>\n  </a>\n</c8y-dashboard-child-action>\n" }]
+            args: [{ selector: 'c8y-widget-time-context', host: { class: 'd-flex a-i-center gap-4' }, template: "<c8y-action-bar-item\n  *ngIf=\"isCoupled\"\n  [groupId]=\"'timecontext'\"\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{ date: globalDate }\"\n  ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n  *ngIf=\"!isCoupled\"\n  [ngTemplateOutlet]=\"dateTimePicker\"\n  [ngTemplateOutletContext]=\"{ date: localDate }\"\n></ng-container>\n\n<ng-template #dateTimePicker let-date=\"date\">\n  <label>{{ 'Time range' | translate }}</label>\n  <div\n    class=\"dropdown m-r-4\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    container=\"body\"\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-1 d-flex a-i-center\"\n      dropdownToggle\n      title=\"{{ date[0] | c8yDate: 'short' }} \u2014 {{ date[1] | c8yDate: 'short' }}\"\n      aria-haspopup=\"true\"\n    >\n      <span>{{ date[0] | c8yDate: 'shortDate' }} \u2014 {{ date[1] | c8yDate: 'shortDate' }}</span>\n      <span class=\"caret m-r-8 m-l-4\"></span>\n    </button>\n\n    <div *dropdownMenu class=\"dropdown-menu dropdown-menu--date-range\">\n      <div class=\"p-16\">\n        <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          (click)=\"reset(); dropdown.isOpen = false\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Reset\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n          [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          translate\n        >\n          Apply\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"c8y-select-wrapper\">\n    <select\n      class=\"form-control\"\n      [ngModel]=\"currentPredefinedTimeSpan\"\n      (ngModelChange)=\"predefinedDateFromSelected($event)\"\n    >\n      <option value=\"undefined\" disabled=\"true\">{{ 'Custom range`time`' | translate }}</option>\n      <option *ngFor=\"let dateFrom of predefinedTimeSpanList\" [ngValue]=\"dateFrom\">\n        {{ dateFrom.title }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</ng-template>\n\n<c8y-dashboard-child-action *ngIf=\"canDecouple\">\n  <a href=\"\" (click)=\"toggleDecoupling(); (false)\">\n    <i [c8yIcon]=\"isCoupled ? 'unlock' : 'lock'\"></i>\n    <span class=\"m-l-4\">\n      {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n    </span>\n  </a>\n</c8y-dashboard-child-action>\n" }]
         }], ctorParameters: function () { return [{ type: WidgetsDashboardEventService }, { type: DashboardChildComponent }, { type: i1.Router }, { type: i1.ActivatedRoute }]; }, propDecorators: { canDecouple: [{
                 type: Input
             }], dateContextChange: [{
@@ -25020,7 +25046,7 @@ DataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
             useExisting: forwardRef(() => DataGridComponent)
         }
-    ], queries: [{ propertyName: "columnRenderers", predicate: ColumnDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scroll"], descendants: true, static: true }, { propertyName: "infiniteScrollContainer", first: true, predicate: ["infiniteScrollContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scroll\n  class=\"table-data-grid-scroll\"\n  [ngClass]=\"{ 'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent }\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-progress-bar [message]=\"loadingItemsLabel\"></c8y-progress-bar>\n    </div>\n  </div>\n\n  <div *ngIf=\"displayOptions.gridHeader\" class=\"table-data-grid-header separator large-padding\">\n    <div class=\"h4\" [ngClass]=\"{ 'm-r-16': !!title }\">{{ title | translate }}</div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <span class=\"label label-default m-r-4\" translate>No filters</span>\n        <small\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          class=\"m-r-4\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n      </span>\n      <span *ngIf=\"filteringApplied\">\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <span class=\"badge badge-info m-r-4\">\n            {{ (dataSource.stats$ | async).filteredSize }}\n          </span>\n          <small ngNonBindable translate [translateParams]=\"filteringLabelsParams\">\n            of {{ allItemsCount }} items\n          </small>\n        </ng-container>\n        <button\n          title=\" {{ 'Clear filters' | translate }}\"\n          class=\"btn btn-sm btn-default m-l-8 m-r-4\"\n          (click)=\"clearFilters()\"\n        >\n          {{ 'Clear filters' | translate }}\n        </button>\n      </span>\n\n      <span class=\"hidden-xs hidden-sm\" *ngIf=\"displayOptions.filter\">\n        <button\n          class=\"btn-help\"\n          type=\"button\"\n          popover=\"{{ 'Click the column headers to apply filters.' | translate }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n          [attr.aria-label]=\"'Help' | translate\"\n        >\n          <i c8yIcon=\"question-circle-o\"></i>\n        </button>\n      </span>\n\n      <span class=\"hidden-xs hidden-sm\" *ngIf=\"showCounterWarning\">\n        <button\n          class=\"btn-clean text-primary\"\n          popover=\"{{\n            'The counter for the total number of items might be inaccurate.' | translate\n          }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n        >\n          <i c8yIcon=\"warning\"></i>\n        </button>\n      </span>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container *ngFor=\"let headerActionControl of headerActionControls\">\n          <ng-container *ngIf=\"headerActionControl | isControlVisible\">\n            <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n              <button\n                title=\"{{ headerActionControl.text | translate }}\"\n                class=\"btnbar-btn btn-link\"\n                (click)=\"headerActionControl.callback()\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.CUSTOM_ACTION,\n                  customActionName: headerActionControl.text,\n                  type: headerActionControl.type\n                }\"\n              >\n                <i [c8yIcon]=\"headerActionControl.icon\" class=\"m-r-4\"></i>\n                <span>{{ headerActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n            <ng-template #customTemplate>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  headerActionControl.template;\n                  context: { headerActionControl: headerActionControl }\n                \"\n              ></ng-container>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n\n        <div\n          *ngIf=\"configureColumnsEnabled\"\n          class=\"dropdown\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n          placement=\"bottom left\"\n        >\n          <button title=\"{{ 'Configure columns' | translate }}\" class=\"btnbar-btn\" dropdownToggle>\n            <i c8yIcon=\"columns\" class=\"m-r-4\"></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul *dropdownMenu class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n            <li class=\"bg-level-0\">\n              <div cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" class=\"list-group m-0\">\n                <div *ngFor=\"let column of columns\" cdkDrag cdkDragLockAxis=\"y\">\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        class=\"c8y-checkbox p-l-16\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        *ngIf=\"column.custom\"\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        placement=\"left\"\n                        container=\"body\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                      >\n                        <c8y-popover-confirm\n                          [placement]=\"'left'\"\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i c8yIcon=\"minus-circle\"></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li *ngIf=\"isConfigContextKnown\" class=\"list-group-item\">\n              <button\n                title=\"{{ 'Add custom column' | translate }}\"\n                class=\"btn btn-default btn-block\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          title=\"{{ 'Reload' | translate }}\"\n          class=\"btnbar-btn btn-link\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i c8yIcon=\"refresh\" class=\"m-r-4\"></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n          class=\"input-group input-group-search m-l-sm-16\"\n        >\n          <input\n            type=\"search\"\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i c8yIcon=\"search\" *ngIf=\"searchText.length === 0\"></i>\n            <i\n              c8yIcon=\"times\"\n              class=\"pointer\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <span ngNonBindable translate [translateParams]=\"{ count: selectedItemIds.length }\">\n          {{ count }} selected item(s).\n        </span>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            (click)=\"setAllItemsSelected(true)\"\n            class=\"interact\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container *ngFor=\"let bulkActionControl of bulkActionControls\">\n            <ng-container\n              *ngIf=\"bulkActionControl | isControlVisible: selectedItemIds\"\n              [ngSwitch]=\"bulkActionControl.type\"\n            >\n              <button\n                title=\"{{ 'Export' | translate }}\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                class=\"btnbar-btn\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                title=\"{{ 'Delete' | translate }}\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                class=\"btnbar-btn\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                title=\"{{ bulkActionControl.text | translate }}\"\n                *ngSwitchDefault\n                class=\"btnbar-btn\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n              >\n                <i c8yIcon=\"{{ bulkActionControl.icon }}\"></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            title=\"{{ 'Cancel' | translate }}\"\n            class=\"btnbar-btn\"\n            (click)=\"cancel()\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-hover table-filtered-sorted table-data-grid large-padding\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [trackBy]=\"trackByName\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\n            <ng-container *ngIf=\"actionControls.length <= 2\">\n              <ng-container *ngFor=\"let actionControl of actionControls\">\n                <ng-container\n                  *ngIf=\"actionControl | isControlVisible: row\"\n                  [ngSwitch]=\"actionControl.type\"\n                >\n                  <button\n                    *ngSwitchCase=\"builtInActionType.Edit\"\n                    class=\"btn btn-dot\"\n                    tooltip=\"{{ 'Edit' | translate }}\"\n                    [attr.aria-label]=\"'Edit' | translate\"\n                    [delay]=\"500\"\n                    container=\"body\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{\n                      action: PX_ACTIONS.EDIT_ITEM,\n                      id: row.id\n                    }\"\n                  >\n                    <i c8yIcon=\"pencil\"></i>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    *ngSwitchCase=\"builtInActionType.Delete\"\n                    class=\"btn btn-dot btn-dot--danger showOnHover\"\n                    tooltip=\"{{ 'Delete' | translate }}\"\n                    [attr.aria-label]=\"'Delete' | translate\"\n                    [delay]=\"500\"\n                    container=\"body\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{\n                      action: PX_ACTIONS.DELETE_ITEM,\n                      id: row.id\n                    }\"\n                  >\n                    <i c8yIcon=\"delete\"></i>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    *ngSwitchDefault\n                    class=\"btn btn-dot\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{\n                      action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                      customActionName: actionControl.text,\n                      id: row.id\n                    }\"\n                    tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                    [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                    container=\"body\"\n                    [delay]=\"500\"\n                  >\n                    <i *ngIf=\"actionControl.icon\" c8yIcon=\"{{ actionControl.icon }}\"></i>\n                    <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                  </button>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n\n            <div [ngClass]=\"{ 'm-l-auto overflow-visible': actionControls.length > 2 }\">\n              <div\n                *ngIf=\"actionControls.length > 2\"\n                class=\"dropdown\"\n                dropdown\n                container=\"body\"\n                placement=\"bottom right\"\n              >\n                <button\n                  title=\"{{ 'Actions' | translate }}\"\n                  type=\"button\"\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul class=\"dropdown-menu dropdown-menu-right\" *dropdownMenu>\n                  <li *ngFor=\"let actionControl of actionControls\">\n                    <ng-container\n                      *ngIf=\"actionControl | isControlVisible: row\"\n                      [ngSwitch]=\"actionControl.type\"\n                    >\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"download\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n          >\n            <div *ngIf=\"!column.filterable\" [title]=\"(column.header | translate) || column.name\">\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec:this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              *ngIf=\"column.filterable\"\n              class=\"dropdown\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              [insideClick]=\"true\"\n            >\n              <button\n                type=\"button\"\n                class=\"btn-header\"\n                dropdownToggle\n                [title]=\"(column.header | translate) || column.name\"\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec:this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                </ng-container>\n                <i c8yIcon=\"filter\" title=\"{{ 'Filter' | translate }}\"></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                *dropdownMenu\n                class=\"dropdown-menu\"\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec:this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      [spec]=\"filteringFormRendererSpec\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              *ngIf=\"column.sortable\"\n              class=\"btn-sort\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i *ngSwitchCase=\"'asc'\" c8yIcon=\"long-arrow-up\"></i>\n                <i *ngSwitchCase=\"'desc'\" c8yIcon=\"long-arrow-down\"></i>\n                <i *ngSwitchDefault c8yIcon=\"exchange\"></i>\n              </ng-container>\n            </button>\n\n            <span\n              *ngIf=\"column.resizable\"\n              class=\"resize-handle\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            [attr.data-type]=\"column.dataType\"\n            [class.hidden]=\"!column.visible\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec:this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td cdk-footer-cell *cdkFooterCellDef [style.grid-column]=\"styles.gridInfiniteScrollColumn\">\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr cdk-header-row *cdkHeaderRowDef=\"columnNames\"></tr>\n\n    <tr\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"rowClick.emit(row)\"\n    ></tr>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0\"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n    </div>\n  </div>\n\n  <div *ngIf=\"pagination && !infiniteScroll\" class=\"table-data-grid-footer separator large-padding\">\n    <div class=\"col-sm-4 no-gutter\">\n      <div *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\" class=\"counter p-t-8 p-b-8\">\n        <span class=\"text-muted\" ngNonBindable translate [translateParams]=\"paginationLabelParams\">\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n        class=\"form-group form-inline p-t-8 p-b-8\"\n      >\n        <label class=\"m-r-4\" for=\"filteredSize\">{{ 'Items per page' | translate }}</label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option *ngFor=\"let pageSize of possiblePageSizes\" [ngValue]=\"pageSize\">\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [class.hidden]=\"hidePagination$ | async\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n        class=\"p-t-8 p-b-8\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i7.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i7.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i7.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i7.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i7.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i7.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { kind: "directive", type: i7.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i7.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i7.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i7.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i7.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i7.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i7.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i7.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: i5$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ProgressBarComponent, selector: "c8y-progress-bar", inputs: ["message", "progress"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick"] }, { kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i1$8.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: i17.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CellRendererComponent, selector: "c8y-cell-renderer", inputs: ["spec"] }, { kind: "component", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: ["spec"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: IsControlVisiblePipe, name: "isControlVisible" }] });
+    ], queries: [{ propertyName: "columnRenderers", predicate: ColumnDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scroll"], descendants: true, static: true }, { propertyName: "infiniteScrollContainer", first: true, predicate: ["infiniteScrollContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scroll\n  class=\"table-data-grid-scroll\"\n  [ngClass]=\"{ 'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent }\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-progress-bar [message]=\"loadingItemsLabel\"></c8y-progress-bar>\n    </div>\n  </div>\n\n  <div *ngIf=\"displayOptions.gridHeader\" class=\"table-data-grid-header separator large-padding\">\n    <div class=\"h4\" [ngClass]=\"{ 'm-r-16': !!title }\">{{ title | translate }}</div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <span class=\"label label-default m-r-4\" translate>No filters</span>\n        <small\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          class=\"m-r-4\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n      </span>\n      <span *ngIf=\"filteringApplied\">\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <span class=\"badge badge-info m-r-4\">\n            {{ (dataSource.stats$ | async).filteredSize }}\n          </span>\n          <small ngNonBindable translate [translateParams]=\"filteringLabelsParams\">\n            of {{ allItemsCount }} items\n          </small>\n        </ng-container>\n        <button\n          title=\"{{ 'Clear filters' | translate }}\"\n          class=\"btn btn-sm btn-default m-l-8 m-r-4\"\n          (click)=\"clearFilters()\"\n        >\n          {{ 'Clear filters' | translate }}\n        </button>\n      </span>\n\n      <span class=\"hidden-xs hidden-sm\" *ngIf=\"displayOptions.filter\">\n        <button\n          class=\"btn-help btn-help--sm\"\n          type=\"button\"\n          popover=\"{{ 'Click the column headers to apply filters.' | translate }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n          [attr.aria-label]=\"'Click the column headers to apply filters.' | translate\"\n          data-cy=\"help\"\n        >\n          <i c8yIcon=\"question-circle-o\"></i>\n        </button>\n      </span>\n\n      <span class=\"hidden-xs hidden-sm\" *ngIf=\"showCounterWarning\">\n        <button\n          class=\"btn-clean text-primary\"\n          popover=\"{{\n            'The counter for the total number of items might be inaccurate.' | translate\n          }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n          aria-label=\"{{\n            'The counter for the total number of items might be inaccurate.' | translate\n          }}\"\n        >\n          <i c8yIcon=\"warning\"></i>\n        </button>\n      </span>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container *ngFor=\"let headerActionControl of headerActionControls\">\n          <ng-container *ngIf=\"headerActionControl | isControlVisible\">\n            <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n              <button\n                title=\"{{ headerActionControl.text | translate }}\"\n                class=\"btnbar-btn btn-link\"\n                (click)=\"headerActionControl.callback()\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.CUSTOM_ACTION,\n                  customActionName: headerActionControl.text,\n                  type: headerActionControl.type\n                }\"\n              >\n                <i [c8yIcon]=\"headerActionControl.icon\" class=\"m-r-4\"></i>\n                <span>{{ headerActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n            <ng-template #customTemplate>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  headerActionControl.template;\n                  context: { headerActionControl: headerActionControl }\n                \"\n              ></ng-container>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n\n        <div\n          *ngIf=\"configureColumnsEnabled\"\n          class=\"dropdown\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n          placement=\"bottom left\"\n        >\n          <button\n            title=\"{{ 'Configure columns' | translate }}\"\n            class=\"btnbar-btn\"\n            dropdownToggle\n            aria-haspopup=\"true\"\n          >\n            <i c8yIcon=\"columns\" class=\"m-r-4\"></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul *dropdownMenu class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n            <li class=\"bg-level-0\">\n              <div cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" class=\"list-group m-0\">\n                <div *ngFor=\"let column of columns\" cdkDrag cdkDragLockAxis=\"y\">\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        class=\"c8y-checkbox p-l-16\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        *ngIf=\"column.custom\"\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        placement=\"left\"\n                        container=\"body\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                      >\n                        <c8y-popover-confirm\n                          [placement]=\"'left'\"\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i c8yIcon=\"minus-circle\"></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li *ngIf=\"isConfigContextKnown\" class=\"list-group-item\">\n              <button\n                title=\"{{ 'Add custom column' | translate }}\"\n                class=\"btn btn-default btn-block\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          title=\"{{ 'Reload' | translate }}\"\n          class=\"btnbar-btn btn-link\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i c8yIcon=\"refresh\" class=\"m-r-4\"></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n          class=\"input-group input-group-search m-l-sm-16\"\n        >\n          <input\n            type=\"search\"\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i c8yIcon=\"search\" *ngIf=\"searchText.length === 0\"></i>\n            <i\n              c8yIcon=\"times\"\n              class=\"pointer\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <span ngNonBindable translate [translateParams]=\"{ count: selectedItemIds.length }\">\n          {{ count }} selected item(s).\n        </span>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            (click)=\"setAllItemsSelected(true)\"\n            class=\"interact\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container *ngFor=\"let bulkActionControl of bulkActionControls\">\n            <ng-container\n              *ngIf=\"bulkActionControl | isControlVisible: selectedItemIds\"\n              [ngSwitch]=\"bulkActionControl.type\"\n            >\n              <button\n                title=\"{{ 'Export' | translate }}\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                class=\"btnbar-btn\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                title=\"{{ 'Delete' | translate }}\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                class=\"btnbar-btn\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                title=\"{{ bulkActionControl.text | translate }}\"\n                *ngSwitchDefault\n                class=\"btnbar-btn\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n              >\n                <i c8yIcon=\"{{ bulkActionControl.icon }}\"></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            title=\"{{ 'Cancel' | translate }}\"\n            class=\"btnbar-btn\"\n            (click)=\"cancel()\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-hover table-filtered-sorted table-data-grid large-padding\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [trackBy]=\"trackByName\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\n            <ng-container *ngIf=\"actionControls.length <= 2\">\n              <ng-container *ngFor=\"let actionControl of actionControls\">\n                <ng-container\n                  *ngIf=\"actionControl | isControlVisible: row\"\n                  [ngSwitch]=\"actionControl.type\"\n                >\n                  <button\n                    *ngSwitchCase=\"builtInActionType.Edit\"\n                    class=\"btn btn-dot\"\n                    tooltip=\"{{ 'Edit' | translate }}\"\n                    [attr.aria-label]=\"'Edit' | translate\"\n                    [delay]=\"500\"\n                    container=\"body\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{\n                      action: PX_ACTIONS.EDIT_ITEM,\n                      id: row.id\n                    }\"\n                  >\n                    <i c8yIcon=\"pencil\"></i>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    *ngSwitchCase=\"builtInActionType.Delete\"\n                    class=\"btn btn-dot btn-dot--danger showOnHover\"\n                    tooltip=\"{{ 'Delete' | translate }}\"\n                    [attr.aria-label]=\"'Delete' | translate\"\n                    [delay]=\"500\"\n                    container=\"body\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{\n                      action: PX_ACTIONS.DELETE_ITEM,\n                      id: row.id\n                    }\"\n                  >\n                    <i c8yIcon=\"delete\"></i>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    *ngSwitchDefault\n                    class=\"btn btn-dot\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{\n                      action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                      customActionName: actionControl.text,\n                      id: row.id\n                    }\"\n                    tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                    [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                    container=\"body\"\n                    [delay]=\"500\"\n                  >\n                    <i *ngIf=\"actionControl.icon\" c8yIcon=\"{{ actionControl.icon }}\"></i>\n                    <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                  </button>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n\n            <div [ngClass]=\"{ 'm-l-auto overflow-visible': actionControls.length > 2 }\">\n              <div\n                *ngIf=\"actionControls.length > 2\"\n                class=\"dropdown\"\n                dropdown\n                container=\"body\"\n                placement=\"bottom right\"\n              >\n                <button\n                  title=\"{{ 'Actions' | translate }}\"\n                  type=\"button\"\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  dropdownToggle\n                  aria-haspopup=\"true\"\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul class=\"dropdown-menu dropdown-menu-right\" *dropdownMenu>\n                  <li *ngFor=\"let actionControl of actionControls\">\n                    <ng-container\n                      *ngIf=\"actionControl | isControlVisible: row\"\n                      [ngSwitch]=\"actionControl.type\"\n                    >\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"download\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n          >\n            <div *ngIf=\"!column.filterable\" [title]=\"(column.header | translate) || column.name\">\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec:this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              *ngIf=\"column.filterable\"\n              class=\"dropdown\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              [insideClick]=\"true\"\n            >\n              <button\n                type=\"button\"\n                class=\"btn-header\"\n                dropdownToggle\n                [title]=\"(column.header | translate) || column.name\"\n                aria-haspopup=\"true\"\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec:this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                </ng-container>\n                <i c8yIcon=\"filter\" title=\"{{ 'Filter' | translate }}\"></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                *dropdownMenu\n                class=\"dropdown-menu\"\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec:this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      [spec]=\"filteringFormRendererSpec\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              *ngIf=\"column.sortable\"\n              class=\"btn-sort\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i *ngSwitchCase=\"'asc'\" c8yIcon=\"long-arrow-up\"></i>\n                <i *ngSwitchCase=\"'desc'\" c8yIcon=\"long-arrow-down\"></i>\n                <i *ngSwitchDefault c8yIcon=\"exchange\"></i>\n              </ng-container>\n            </button>\n\n            <span\n              *ngIf=\"column.resizable\"\n              class=\"resize-handle\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            [attr.data-type]=\"column.dataType\"\n            [class.hidden]=\"!column.visible\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec:this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td cdk-footer-cell *cdkFooterCellDef [style.grid-column]=\"styles.gridInfiniteScrollColumn\">\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr cdk-header-row *cdkHeaderRowDef=\"columnNames\"></tr>\n\n    <tr\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"rowClick.emit(row)\"\n    ></tr>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0\"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n    </div>\n  </div>\n\n  <div *ngIf=\"pagination && !infiniteScroll\" class=\"table-data-grid-footer separator large-padding\">\n    <div class=\"col-sm-4 no-gutter\">\n      <div *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\" class=\"counter p-t-8 p-b-8\">\n        <span class=\"text-muted\" ngNonBindable translate [translateParams]=\"paginationLabelParams\">\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n        class=\"form-group form-inline p-t-8 p-b-8\"\n      >\n        <label class=\"m-r-4\" for=\"filteredSize\">{{ 'Items per page' | translate }}</label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option *ngFor=\"let pageSize of possiblePageSizes\" [ngValue]=\"pageSize\">\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [class.hidden]=\"hidePagination$ | async\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n        class=\"p-t-8 p-b-8\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i7.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i7.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i7.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i7.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i7.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i7.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { kind: "directive", type: i7.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i7.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i7.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i7.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i7.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i7.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i7.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i7.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: i5$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ProgressBarComponent, selector: "c8y-progress-bar", inputs: ["message", "progress"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick"] }, { kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i1$8.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: i17.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CellRendererComponent, selector: "c8y-cell-renderer", inputs: ["spec"] }, { kind: "component", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: ["spec"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: IsControlVisiblePipe, name: "isControlVisible" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-data-grid', host: { class: 'd-contents' }, providers: [
@@ -25028,7 +25054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                             provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                             useExisting: forwardRef(() => DataGridComponent)
                         }
-                    ], template: "<div\n  #scroll\n  class=\"table-data-grid-scroll\"\n  [ngClass]=\"{ 'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent }\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-progress-bar [message]=\"loadingItemsLabel\"></c8y-progress-bar>\n    </div>\n  </div>\n\n  <div *ngIf=\"displayOptions.gridHeader\" class=\"table-data-grid-header separator large-padding\">\n    <div class=\"h4\" [ngClass]=\"{ 'm-r-16': !!title }\">{{ title | translate }}</div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <span class=\"label label-default m-r-4\" translate>No filters</span>\n        <small\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          class=\"m-r-4\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n      </span>\n      <span *ngIf=\"filteringApplied\">\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <span class=\"badge badge-info m-r-4\">\n            {{ (dataSource.stats$ | async).filteredSize }}\n          </span>\n          <small ngNonBindable translate [translateParams]=\"filteringLabelsParams\">\n            of {{ allItemsCount }} items\n          </small>\n        </ng-container>\n        <button\n          title=\" {{ 'Clear filters' | translate }}\"\n          class=\"btn btn-sm btn-default m-l-8 m-r-4\"\n          (click)=\"clearFilters()\"\n        >\n          {{ 'Clear filters' | translate }}\n        </button>\n      </span>\n\n      <span class=\"hidden-xs hidden-sm\" *ngIf=\"displayOptions.filter\">\n        <button\n          class=\"btn-help\"\n          type=\"button\"\n          popover=\"{{ 'Click the column headers to apply filters.' | translate }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n          [attr.aria-label]=\"'Help' | translate\"\n        >\n          <i c8yIcon=\"question-circle-o\"></i>\n        </button>\n      </span>\n\n      <span class=\"hidden-xs hidden-sm\" *ngIf=\"showCounterWarning\">\n        <button\n          class=\"btn-clean text-primary\"\n          popover=\"{{\n            'The counter for the total number of items might be inaccurate.' | translate\n          }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n        >\n          <i c8yIcon=\"warning\"></i>\n        </button>\n      </span>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container *ngFor=\"let headerActionControl of headerActionControls\">\n          <ng-container *ngIf=\"headerActionControl | isControlVisible\">\n            <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n              <button\n                title=\"{{ headerActionControl.text | translate }}\"\n                class=\"btnbar-btn btn-link\"\n                (click)=\"headerActionControl.callback()\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.CUSTOM_ACTION,\n                  customActionName: headerActionControl.text,\n                  type: headerActionControl.type\n                }\"\n              >\n                <i [c8yIcon]=\"headerActionControl.icon\" class=\"m-r-4\"></i>\n                <span>{{ headerActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n            <ng-template #customTemplate>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  headerActionControl.template;\n                  context: { headerActionControl: headerActionControl }\n                \"\n              ></ng-container>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n\n        <div\n          *ngIf=\"configureColumnsEnabled\"\n          class=\"dropdown\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n          placement=\"bottom left\"\n        >\n          <button title=\"{{ 'Configure columns' | translate }}\" class=\"btnbar-btn\" dropdownToggle>\n            <i c8yIcon=\"columns\" class=\"m-r-4\"></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul *dropdownMenu class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n            <li class=\"bg-level-0\">\n              <div cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" class=\"list-group m-0\">\n                <div *ngFor=\"let column of columns\" cdkDrag cdkDragLockAxis=\"y\">\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        class=\"c8y-checkbox p-l-16\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        *ngIf=\"column.custom\"\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        placement=\"left\"\n                        container=\"body\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                      >\n                        <c8y-popover-confirm\n                          [placement]=\"'left'\"\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i c8yIcon=\"minus-circle\"></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li *ngIf=\"isConfigContextKnown\" class=\"list-group-item\">\n              <button\n                title=\"{{ 'Add custom column' | translate }}\"\n                class=\"btn btn-default btn-block\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          title=\"{{ 'Reload' | translate }}\"\n          class=\"btnbar-btn btn-link\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i c8yIcon=\"refresh\" class=\"m-r-4\"></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n          class=\"input-group input-group-search m-l-sm-16\"\n        >\n          <input\n            type=\"search\"\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i c8yIcon=\"search\" *ngIf=\"searchText.length === 0\"></i>\n            <i\n              c8yIcon=\"times\"\n              class=\"pointer\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <span ngNonBindable translate [translateParams]=\"{ count: selectedItemIds.length }\">\n          {{ count }} selected item(s).\n        </span>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            (click)=\"setAllItemsSelected(true)\"\n            class=\"interact\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container *ngFor=\"let bulkActionControl of bulkActionControls\">\n            <ng-container\n              *ngIf=\"bulkActionControl | isControlVisible: selectedItemIds\"\n              [ngSwitch]=\"bulkActionControl.type\"\n            >\n              <button\n                title=\"{{ 'Export' | translate }}\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                class=\"btnbar-btn\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                title=\"{{ 'Delete' | translate }}\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                class=\"btnbar-btn\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                title=\"{{ bulkActionControl.text | translate }}\"\n                *ngSwitchDefault\n                class=\"btnbar-btn\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n              >\n                <i c8yIcon=\"{{ bulkActionControl.icon }}\"></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            title=\"{{ 'Cancel' | translate }}\"\n            class=\"btnbar-btn\"\n            (click)=\"cancel()\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-hover table-filtered-sorted table-data-grid large-padding\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [trackBy]=\"trackByName\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\n            <ng-container *ngIf=\"actionControls.length <= 2\">\n              <ng-container *ngFor=\"let actionControl of actionControls\">\n                <ng-container\n                  *ngIf=\"actionControl | isControlVisible: row\"\n                  [ngSwitch]=\"actionControl.type\"\n                >\n                  <button\n                    *ngSwitchCase=\"builtInActionType.Edit\"\n                    class=\"btn btn-dot\"\n                    tooltip=\"{{ 'Edit' | translate }}\"\n                    [attr.aria-label]=\"'Edit' | translate\"\n                    [delay]=\"500\"\n                    container=\"body\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{\n                      action: PX_ACTIONS.EDIT_ITEM,\n                      id: row.id\n                    }\"\n                  >\n                    <i c8yIcon=\"pencil\"></i>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    *ngSwitchCase=\"builtInActionType.Delete\"\n                    class=\"btn btn-dot btn-dot--danger showOnHover\"\n                    tooltip=\"{{ 'Delete' | translate }}\"\n                    [attr.aria-label]=\"'Delete' | translate\"\n                    [delay]=\"500\"\n                    container=\"body\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{\n                      action: PX_ACTIONS.DELETE_ITEM,\n                      id: row.id\n                    }\"\n                  >\n                    <i c8yIcon=\"delete\"></i>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    *ngSwitchDefault\n                    class=\"btn btn-dot\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{\n                      action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                      customActionName: actionControl.text,\n                      id: row.id\n                    }\"\n                    tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                    [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                    container=\"body\"\n                    [delay]=\"500\"\n                  >\n                    <i *ngIf=\"actionControl.icon\" c8yIcon=\"{{ actionControl.icon }}\"></i>\n                    <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                  </button>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n\n            <div [ngClass]=\"{ 'm-l-auto overflow-visible': actionControls.length > 2 }\">\n              <div\n                *ngIf=\"actionControls.length > 2\"\n                class=\"dropdown\"\n                dropdown\n                container=\"body\"\n                placement=\"bottom right\"\n              >\n                <button\n                  title=\"{{ 'Actions' | translate }}\"\n                  type=\"button\"\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul class=\"dropdown-menu dropdown-menu-right\" *dropdownMenu>\n                  <li *ngFor=\"let actionControl of actionControls\">\n                    <ng-container\n                      *ngIf=\"actionControl | isControlVisible: row\"\n                      [ngSwitch]=\"actionControl.type\"\n                    >\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"download\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n          >\n            <div *ngIf=\"!column.filterable\" [title]=\"(column.header | translate) || column.name\">\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec:this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              *ngIf=\"column.filterable\"\n              class=\"dropdown\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              [insideClick]=\"true\"\n            >\n              <button\n                type=\"button\"\n                class=\"btn-header\"\n                dropdownToggle\n                [title]=\"(column.header | translate) || column.name\"\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec:this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                </ng-container>\n                <i c8yIcon=\"filter\" title=\"{{ 'Filter' | translate }}\"></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                *dropdownMenu\n                class=\"dropdown-menu\"\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec:this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      [spec]=\"filteringFormRendererSpec\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              *ngIf=\"column.sortable\"\n              class=\"btn-sort\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i *ngSwitchCase=\"'asc'\" c8yIcon=\"long-arrow-up\"></i>\n                <i *ngSwitchCase=\"'desc'\" c8yIcon=\"long-arrow-down\"></i>\n                <i *ngSwitchDefault c8yIcon=\"exchange\"></i>\n              </ng-container>\n            </button>\n\n            <span\n              *ngIf=\"column.resizable\"\n              class=\"resize-handle\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            [attr.data-type]=\"column.dataType\"\n            [class.hidden]=\"!column.visible\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec:this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td cdk-footer-cell *cdkFooterCellDef [style.grid-column]=\"styles.gridInfiniteScrollColumn\">\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr cdk-header-row *cdkHeaderRowDef=\"columnNames\"></tr>\n\n    <tr\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"rowClick.emit(row)\"\n    ></tr>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0\"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n    </div>\n  </div>\n\n  <div *ngIf=\"pagination && !infiniteScroll\" class=\"table-data-grid-footer separator large-padding\">\n    <div class=\"col-sm-4 no-gutter\">\n      <div *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\" class=\"counter p-t-8 p-b-8\">\n        <span class=\"text-muted\" ngNonBindable translate [translateParams]=\"paginationLabelParams\">\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n        class=\"form-group form-inline p-t-8 p-b-8\"\n      >\n        <label class=\"m-r-4\" for=\"filteredSize\">{{ 'Items per page' | translate }}</label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option *ngFor=\"let pageSize of possiblePageSizes\" [ngValue]=\"pageSize\">\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [class.hidden]=\"hidePagination$ | async\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n        class=\"p-t-8 p-b-8\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  #scroll\n  class=\"table-data-grid-scroll\"\n  [ngClass]=\"{ 'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent }\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-progress-bar [message]=\"loadingItemsLabel\"></c8y-progress-bar>\n    </div>\n  </div>\n\n  <div *ngIf=\"displayOptions.gridHeader\" class=\"table-data-grid-header separator large-padding\">\n    <div class=\"h4\" [ngClass]=\"{ 'm-r-16': !!title }\">{{ title | translate }}</div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <span class=\"label label-default m-r-4\" translate>No filters</span>\n        <small\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          class=\"m-r-4\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n      </span>\n      <span *ngIf=\"filteringApplied\">\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <span class=\"badge badge-info m-r-4\">\n            {{ (dataSource.stats$ | async).filteredSize }}\n          </span>\n          <small ngNonBindable translate [translateParams]=\"filteringLabelsParams\">\n            of {{ allItemsCount }} items\n          </small>\n        </ng-container>\n        <button\n          title=\"{{ 'Clear filters' | translate }}\"\n          class=\"btn btn-sm btn-default m-l-8 m-r-4\"\n          (click)=\"clearFilters()\"\n        >\n          {{ 'Clear filters' | translate }}\n        </button>\n      </span>\n\n      <span class=\"hidden-xs hidden-sm\" *ngIf=\"displayOptions.filter\">\n        <button\n          class=\"btn-help btn-help--sm\"\n          type=\"button\"\n          popover=\"{{ 'Click the column headers to apply filters.' | translate }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n          [attr.aria-label]=\"'Click the column headers to apply filters.' | translate\"\n          data-cy=\"help\"\n        >\n          <i c8yIcon=\"question-circle-o\"></i>\n        </button>\n      </span>\n\n      <span class=\"hidden-xs hidden-sm\" *ngIf=\"showCounterWarning\">\n        <button\n          class=\"btn-clean text-primary\"\n          popover=\"{{\n            'The counter for the total number of items might be inaccurate.' | translate\n          }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n          aria-label=\"{{\n            'The counter for the total number of items might be inaccurate.' | translate\n          }}\"\n        >\n          <i c8yIcon=\"warning\"></i>\n        </button>\n      </span>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container *ngFor=\"let headerActionControl of headerActionControls\">\n          <ng-container *ngIf=\"headerActionControl | isControlVisible\">\n            <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n              <button\n                title=\"{{ headerActionControl.text | translate }}\"\n                class=\"btnbar-btn btn-link\"\n                (click)=\"headerActionControl.callback()\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.CUSTOM_ACTION,\n                  customActionName: headerActionControl.text,\n                  type: headerActionControl.type\n                }\"\n              >\n                <i [c8yIcon]=\"headerActionControl.icon\" class=\"m-r-4\"></i>\n                <span>{{ headerActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n            <ng-template #customTemplate>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  headerActionControl.template;\n                  context: { headerActionControl: headerActionControl }\n                \"\n              ></ng-container>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n\n        <div\n          *ngIf=\"configureColumnsEnabled\"\n          class=\"dropdown\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n          placement=\"bottom left\"\n        >\n          <button\n            title=\"{{ 'Configure columns' | translate }}\"\n            class=\"btnbar-btn\"\n            dropdownToggle\n            aria-haspopup=\"true\"\n          >\n            <i c8yIcon=\"columns\" class=\"m-r-4\"></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul *dropdownMenu class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n            <li class=\"bg-level-0\">\n              <div cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" class=\"list-group m-0\">\n                <div *ngFor=\"let column of columns\" cdkDrag cdkDragLockAxis=\"y\">\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        class=\"c8y-checkbox p-l-16\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        *ngIf=\"column.custom\"\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        placement=\"left\"\n                        container=\"body\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                      >\n                        <c8y-popover-confirm\n                          [placement]=\"'left'\"\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i c8yIcon=\"minus-circle\"></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li *ngIf=\"isConfigContextKnown\" class=\"list-group-item\">\n              <button\n                title=\"{{ 'Add custom column' | translate }}\"\n                class=\"btn btn-default btn-block\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          title=\"{{ 'Reload' | translate }}\"\n          class=\"btnbar-btn btn-link\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i c8yIcon=\"refresh\" class=\"m-r-4\"></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n          class=\"input-group input-group-search m-l-sm-16\"\n        >\n          <input\n            type=\"search\"\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i c8yIcon=\"search\" *ngIf=\"searchText.length === 0\"></i>\n            <i\n              c8yIcon=\"times\"\n              class=\"pointer\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <span ngNonBindable translate [translateParams]=\"{ count: selectedItemIds.length }\">\n          {{ count }} selected item(s).\n        </span>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            (click)=\"setAllItemsSelected(true)\"\n            class=\"interact\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container *ngFor=\"let bulkActionControl of bulkActionControls\">\n            <ng-container\n              *ngIf=\"bulkActionControl | isControlVisible: selectedItemIds\"\n              [ngSwitch]=\"bulkActionControl.type\"\n            >\n              <button\n                title=\"{{ 'Export' | translate }}\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                class=\"btnbar-btn\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                title=\"{{ 'Delete' | translate }}\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                class=\"btnbar-btn\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                title=\"{{ bulkActionControl.text | translate }}\"\n                *ngSwitchDefault\n                class=\"btnbar-btn\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n              >\n                <i c8yIcon=\"{{ bulkActionControl.icon }}\"></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            title=\"{{ 'Cancel' | translate }}\"\n            class=\"btnbar-btn\"\n            (click)=\"cancel()\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-hover table-filtered-sorted table-data-grid large-padding\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [trackBy]=\"trackByName\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\n            <ng-container *ngIf=\"actionControls.length <= 2\">\n              <ng-container *ngFor=\"let actionControl of actionControls\">\n                <ng-container\n                  *ngIf=\"actionControl | isControlVisible: row\"\n                  [ngSwitch]=\"actionControl.type\"\n                >\n                  <button\n                    *ngSwitchCase=\"builtInActionType.Edit\"\n                    class=\"btn btn-dot\"\n                    tooltip=\"{{ 'Edit' | translate }}\"\n                    [attr.aria-label]=\"'Edit' | translate\"\n                    [delay]=\"500\"\n                    container=\"body\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{\n                      action: PX_ACTIONS.EDIT_ITEM,\n                      id: row.id\n                    }\"\n                  >\n                    <i c8yIcon=\"pencil\"></i>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    *ngSwitchCase=\"builtInActionType.Delete\"\n                    class=\"btn btn-dot btn-dot--danger showOnHover\"\n                    tooltip=\"{{ 'Delete' | translate }}\"\n                    [attr.aria-label]=\"'Delete' | translate\"\n                    [delay]=\"500\"\n                    container=\"body\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{\n                      action: PX_ACTIONS.DELETE_ITEM,\n                      id: row.id\n                    }\"\n                  >\n                    <i c8yIcon=\"delete\"></i>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    *ngSwitchDefault\n                    class=\"btn btn-dot\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{\n                      action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                      customActionName: actionControl.text,\n                      id: row.id\n                    }\"\n                    tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                    [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                    container=\"body\"\n                    [delay]=\"500\"\n                  >\n                    <i *ngIf=\"actionControl.icon\" c8yIcon=\"{{ actionControl.icon }}\"></i>\n                    <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                  </button>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n\n            <div [ngClass]=\"{ 'm-l-auto overflow-visible': actionControls.length > 2 }\">\n              <div\n                *ngIf=\"actionControls.length > 2\"\n                class=\"dropdown\"\n                dropdown\n                container=\"body\"\n                placement=\"bottom right\"\n              >\n                <button\n                  title=\"{{ 'Actions' | translate }}\"\n                  type=\"button\"\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  dropdownToggle\n                  aria-haspopup=\"true\"\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul class=\"dropdown-menu dropdown-menu-right\" *dropdownMenu>\n                  <li *ngFor=\"let actionControl of actionControls\">\n                    <ng-container\n                      *ngIf=\"actionControl | isControlVisible: row\"\n                      [ngSwitch]=\"actionControl.type\"\n                    >\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"download\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n          >\n            <div *ngIf=\"!column.filterable\" [title]=\"(column.header | translate) || column.name\">\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec:this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              *ngIf=\"column.filterable\"\n              class=\"dropdown\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              [insideClick]=\"true\"\n            >\n              <button\n                type=\"button\"\n                class=\"btn-header\"\n                dropdownToggle\n                [title]=\"(column.header | translate) || column.name\"\n                aria-haspopup=\"true\"\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec:this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                </ng-container>\n                <i c8yIcon=\"filter\" title=\"{{ 'Filter' | translate }}\"></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                *dropdownMenu\n                class=\"dropdown-menu\"\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec:this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      [spec]=\"filteringFormRendererSpec\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              *ngIf=\"column.sortable\"\n              class=\"btn-sort\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i *ngSwitchCase=\"'asc'\" c8yIcon=\"long-arrow-up\"></i>\n                <i *ngSwitchCase=\"'desc'\" c8yIcon=\"long-arrow-down\"></i>\n                <i *ngSwitchDefault c8yIcon=\"exchange\"></i>\n              </ng-container>\n            </button>\n\n            <span\n              *ngIf=\"column.resizable\"\n              class=\"resize-handle\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            [attr.data-type]=\"column.dataType\"\n            [class.hidden]=\"!column.visible\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec:this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td cdk-footer-cell *cdkFooterCellDef [style.grid-column]=\"styles.gridInfiniteScrollColumn\">\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr cdk-header-row *cdkHeaderRowDef=\"columnNames\"></tr>\n\n    <tr\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"rowClick.emit(row)\"\n    ></tr>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0\"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n    </div>\n  </div>\n\n  <div *ngIf=\"pagination && !infiniteScroll\" class=\"table-data-grid-footer separator large-padding\">\n    <div class=\"col-sm-4 no-gutter\">\n      <div *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\" class=\"counter p-t-8 p-b-8\">\n        <span class=\"text-muted\" ngNonBindable translate [translateParams]=\"paginationLabelParams\">\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n        class=\"form-group form-inline p-t-8 p-b-8\"\n      >\n        <label class=\"m-r-4\" for=\"filteredSize\">{{ 'Items per page' | translate }}</label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option *ngFor=\"let pageSize of possiblePageSizes\" [ngValue]=\"pageSize\">\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [class.hidden]=\"hidePagination$ | async\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n        class=\"p-t-8 p-b-8\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Optional
@@ -27382,5 +27408,5 @@ class RealtimeMessage {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionModule, ActionOutletComponent, ActionService, AlarmRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherService, ApplicationOptions, ApplicationPluginStatus, AssetTypesModule, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BootstrapComponent, BootstrapModule, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BytesPipe, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangePasswordComponent, ClipboardModule, ClipboardService, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CoreModule, CredentialsComponent, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EventRealtimeService, FilePickerComponent, FilePickerModule, FilesService, FilterInputComponent, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GainsightService, GetGroupIconPipe, GridDataSource, GroupFragment, GroupService, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, I18nModule$1 as I18nModule, ICONS, ICON_LIST, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InventorySearchService, IpRangeInputListComponent, IsControlVisiblePipe, JsonValidationPrettifierDirective, LANGUAGES, LOCALE_PATH, LegacyGridConfigMapperService, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoginComponent, LoginModule, LoginService, LoginViews, MAX_PAGE_SIZE, MESSAGES, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NUMBER_FORMAT_REGEXP, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthValidatorDirective, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, ProvidePhoneNumberComponent, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RecoverPasswordComponent, RequiredInputPlaceholderDirective, RightDrawerComponent, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SearchComponent, SearchFilters, SearchInputComponent, SearchModule, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent$1 as SelectComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SendStatus, SendStatusLabels, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SkipLinkDirective, SmsChallengeComponent, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StrengthValidatorService, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, TitleComponent, TitleOutletComponent, TotpAuthComponent, TotpChallengeComponent, TotpSetupComponent, TranslateCustomLoader, TranslateParserCustom, TranslateService, TypeaheadComponent, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionDetailsModalComponent, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, WebSDKVersionFactory, WidgetTimeContextComponent, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _, _virtualScrollWindowStrategyFactory, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getInjectedHooks, gettext, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDocs, hookDynamicProviderConfig, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookRoute, hookSearch, hookStepper, hookTab, hookVersion, hookWizard, initializeServices, isExtensionFactory, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, ratiosByColumnTypes, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, translateLoaderFactory, trimTranslationKey, uniqueInCollectionByPathValidator };
+export { ACTIONS, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionModule, ActionOutletComponent, ActionService, AlarmRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherService, ApplicationOptions, ApplicationPluginStatus, AssetTypesModule, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BootstrapComponent, BootstrapModule, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BytesPipe, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangePasswordComponent, ClipboardModule, ClipboardService, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CoreModule, CredentialsComponent, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EventRealtimeService, FilePickerComponent, FilePickerModule, FilesService, FilterInputComponent, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GainsightService, GetGroupIconPipe, GridDataSource, GroupFragment, GroupService, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, I18nModule$1 as I18nModule, ICONS, ICON_LIST, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InventorySearchService, IpRangeInputListComponent, IsControlVisiblePipe, JsonValidationPrettifierDirective, LANGUAGES, LOCALE_PATH, LegacyGridConfigMapperService, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoginComponent, LoginModule, LoginService, LoginViews, MAX_PAGE_SIZE, MESSAGES, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NUMBER_FORMAT_REGEXP, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthValidatorDirective, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, ProvidePhoneNumberComponent, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RecoverPasswordComponent, RequiredInputPlaceholderDirective, RightDrawerComponent, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SearchComponent, SearchFilters, SearchInputComponent, SearchModule, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent$1 as SelectComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SendStatus, SendStatusLabels, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SkipLinkDirective, SmsChallengeComponent, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StrengthValidatorService, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, TitleComponent, TitleOutletComponent, TotpAuthComponent, TotpChallengeComponent, TotpSetupComponent, TranslateCustomLoader, TranslateParserCustom, TranslateService, TypeaheadComponent, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionDetailsModalComponent, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, WebSDKVersionFactory, WidgetTimeContextComponent, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _, _virtualScrollWindowStrategyFactory, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getInjectedHooks, gettext, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDocs, hookDynamicProviderConfig, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookRoute, hookSearch, hookStepper, hookTab, hookVersion, hookWizard, initializeServices, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, ratiosByColumnTypes, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, translateLoaderFactory, trimTranslationKey, uniqueInCollectionByPathValidator };
 //# sourceMappingURL=c8y-ngx-components.mjs.map