@c8y/ngx-components 1022.13.0 → 1022.21.3

package/fesm2022/c8y-ngx-components-user-roles.mjs

@@ -13,7 +13,7 @@ class InventoryRoleSelector extends UpgradeComponent {
         super('c8yInventoryRoleSelector', elementRef, injector);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InventoryRoleSelector, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: InventoryRoleSelector, isStandalone: true, selector: "c8y-inventory-role-selector-upgraded", inputs: { assignedRoles: "assignedRoles", inheritedRoles: "inheritedRoles", inventoryRoles: "inventoryRoles", ownerAllowedRoles: "ownerAllowedRoles" }, outputs: { onApply: "onApply" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: InventoryRoleSelector, isStandalone: true, selector: "c8y-inventory-role-selector-upgraded", inputs: { assignedRoles: "assignedRoles", inheritedRoles: "inheritedRoles", inventoryRoles: "inventoryRoles", ownerAllowedRoles: "ownerAllowedRoles", disableEditForExternalUsers: "disableEditForExternalUsers" }, outputs: { onApply: "onApply" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InventoryRoleSelector, decorators: [{
             type: Directive,
@@ -26,6 +26,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], ownerAllowedRoles: [{
                 type: Input
+            }], disableEditForExternalUsers: [{
+                type: Input
             }], onApply: [{
                 type: Output
             }] } });
@@ -34,6 +36,7 @@ class RolesAssetTreeComponent {
     constructor(c8yUserInventoryRoles, c8yRoles) {
         this.c8yUserInventoryRoles = c8yUserInventoryRoles;
         this.c8yRoles = c8yRoles;
+        this.disableEditForExternalUsers = false;
         this.onChangeRoles = new EventEmitter();
         this.onChangeItemCount = new EventEmitter();
         this.noSubgroupTitle = gettext('No subgroups');
@@ -143,7 +146,7 @@ class RolesAssetTreeComponent {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RolesAssetTreeComponent, deps: [{ token: i1.Ng1UserInventoryRolesService, optional: true }, { token: i1.Ng1RolesService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: RolesAssetTreeComponent, isStandalone: true, selector: "c8y-roles-asset-tree-upgraded", inputs: { user: "user", searchFilter: "searchFilter", assignedRoles: "assignedRoles", ownerAssignedRoles: "ownerAssignedRoles", expandGroups: "expandGroups", pageSize: "pageSize", paginationOffset: "paginationOffset" }, outputs: { onChangeRoles: "onChangeRoles", onChangeItemCount: "onChangeItemCount" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"c8y-list__group m-b-0 no-border-last\">\n  <div\n    class=\"c8y-list__item\"\n    *ngFor=\"\n      let asset of flatAssetTree$ | async | slice: paginationOffset:paginationOffset + pageSize\n    \"\n  >\n    <div\n      class=\"c8y-list__item__block\"\n      [title]=\"\n        (asset._subGroups && asset.isOpened\n          ? asset._subGroups.length\n            ? asset._subGroups.length > 1\n              ? manySubgroupsTitle\n              : oneSubgroupTitle\n            : noSubgroupTitle\n          : clickToOpenTitle\n        ) | translate: { count: asset._subGroups?.length }\n      \"\n    >\n      <div [ngStyle]=\"{ 'padding-left': asset._depth * 8 + 'px' }\"></div>\n      <div class=\"c8y-list__item__icon m-t-4 p-l-0\">\n        <button\n          class=\"btn-clean\"\n          [attr.aria-label]=\"(!asset.isOpened ? expandAriaLabel : collapseAriaLabel) | translate\"\n          type=\"button\"\n          (click)=\"loadChildren(asset)\"\n        >\n          <i\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"c8y-group\"\n            *ngIf=\"!asset.isOpened\"\n          ></i>\n          <i\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"c8y-group-open\"\n            *ngIf=\"asset.isOpened\"\n          ></i>\n        </button>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"d-flex a-i-center\">\n          <div class=\"col-sm-7 p-l-0 col-xs-12\">\n            <button\n              class=\"btn-clean\"\n              type=\"button\"\n              (click)=\"loadChildren(asset)\"\n            >\n              <span\n                class=\"text-truncate\"\n                [ngStyle]=\"{ cursor: 'pointer' }\"\n                title=\"{{ asset.name }}\"\n              >\n                {{ asset.name }}\n              </span>\n            </button>\n          </div>\n          <div class=\"p-t-8 col-xs-12 visible-xs\"></div>\n          <div class=\"col-sm-5 p-l-0 col-xs-12 p-r-0\">\n            <div class=\"d-flex\">\n              <div class=\"flex-grow form-group-sm max-width-100\">\n                <c8y-inventory-role-selector-upgraded\n                  [ownerAllowedRoles]=\"\n                    ownerAllAssignedRoles ? ownerAllAssignedRoles[asset.id] : undefined\n                  \"\n                  [inheritedRoles]=\"inheritedRoles ? inheritedRoles[asset.id] : undefined\"\n                  [assignedRoles]=\"assignedRoles ? assignedRoles[asset.id] : undefined\"\n                  [inventoryRoles]=\"inventoryRoles\"\n                  (onApply)=\"onApply($event, asset.id)\"\n                  (click)=\"$event.stopPropagation()\"\n                ></c8y-inventory-role-selector-upgraded>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <c8y-ui-empty-state\n    [icon]=\"'search'\"\n    [title]=\"'No matching group found among the expanded groups.' | translate\"\n    [subtitle]=\"'Try to expand more groups or to refine your search term.' | translate\"\n    *ngIf=\"searchFilter && !(flatAssetTree$ | async).length\"\n    [horizontal]=\"false\"\n  ></c8y-ui-empty-state>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: InventoryRoleSelector, selector: "c8y-inventory-role-selector-upgraded", inputs: ["assignedRoles", "inheritedRoles", "inventoryRoles", "ownerAllowedRoles"], outputs: ["onApply"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: RolesAssetTreeComponent, isStandalone: true, selector: "c8y-roles-asset-tree-upgraded", inputs: { user: "user", searchFilter: "searchFilter", assignedRoles: "assignedRoles", ownerAssignedRoles: "ownerAssignedRoles", expandGroups: "expandGroups", pageSize: "pageSize", paginationOffset: "paginationOffset", disableEditForExternalUsers: "disableEditForExternalUsers" }, outputs: { onChangeRoles: "onChangeRoles", onChangeItemCount: "onChangeItemCount" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"c8y-list__group m-b-0 no-border-last\">\n  <div\n    class=\"c8y-list__item\"\n    *ngFor=\"\n      let asset of flatAssetTree$ | async | slice: paginationOffset:paginationOffset + pageSize\n    \"\n  >\n    <div\n      class=\"c8y-list__item__block\"\n      [title]=\"\n        (asset._subGroups && asset.isOpened\n          ? asset._subGroups.length\n            ? asset._subGroups.length > 1\n              ? manySubgroupsTitle\n              : oneSubgroupTitle\n            : noSubgroupTitle\n          : clickToOpenTitle\n        ) | translate: { count: asset._subGroups?.length }\n      \"\n    >\n      <div [ngStyle]=\"{ 'padding-left': asset._depth * 8 + 'px' }\"></div>\n      <div class=\"c8y-list__item__icon m-t-4 p-l-0\">\n        <button\n          class=\"btn-clean\"\n          [attr.aria-label]=\"(!asset.isOpened ? expandAriaLabel : collapseAriaLabel) | translate\"\n          type=\"button\"\n          (click)=\"loadChildren(asset)\"\n        >\n          <i\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"c8y-group\"\n            *ngIf=\"!asset.isOpened\"\n          ></i>\n          <i\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"c8y-group-open\"\n            *ngIf=\"asset.isOpened\"\n          ></i>\n        </button>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"d-flex a-i-center\">\n          <div class=\"col-sm-7 p-l-0 col-xs-12\">\n            <button\n              class=\"btn-clean\"\n              type=\"button\"\n              (click)=\"loadChildren(asset)\"\n            >\n              <span\n                class=\"text-truncate\"\n                [ngStyle]=\"{ cursor: 'pointer' }\"\n                title=\"{{ asset.name }}\"\n              >\n                {{ asset.name }}\n              </span>\n            </button>\n          </div>\n          <div class=\"p-t-8 col-xs-12 visible-xs\"></div>\n          <div class=\"col-sm-5 p-l-0 col-xs-12 p-r-0\">\n            <div class=\"d-flex\">\n              <div class=\"flex-grow form-group-sm max-width-100\">\n                <c8y-inventory-role-selector-upgraded\n                  [ownerAllowedRoles]=\"\n                    ownerAllAssignedRoles ? ownerAllAssignedRoles[asset.id] : undefined\n                  \"\n                  [inheritedRoles]=\"inheritedRoles ? inheritedRoles[asset.id] : undefined\"\n                  [assignedRoles]=\"assignedRoles ? assignedRoles[asset.id] : undefined\"\n                  [inventoryRoles]=\"inventoryRoles\"\n                  [disableEditForExternalUsers]=\"disableEditForExternalUsers\"\n                  (onApply)=\"onApply($event, asset.id)\"\n                  (click)=\"$event.stopPropagation()\"\n                ></c8y-inventory-role-selector-upgraded>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <c8y-ui-empty-state\n    [icon]=\"'search'\"\n    [title]=\"'No matching group found among the expanded groups.' | translate\"\n    [subtitle]=\"'Try to expand more groups or to refine your search term.' | translate\"\n    *ngIf=\"searchFilter && !(flatAssetTree$ | async).length\"\n    [horizontal]=\"false\"\n  ></c8y-ui-empty-state>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: InventoryRoleSelector, selector: "c8y-inventory-role-selector-upgraded", inputs: ["assignedRoles", "inheritedRoles", "inventoryRoles", "ownerAllowedRoles", "disableEditForExternalUsers"], outputs: ["onApply"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RolesAssetTreeComponent, decorators: [{
             type: Component,
@@ -157,7 +160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         C8yTranslatePipe,
                         AsyncPipe,
                         SlicePipe
-                    ], template: "<div class=\"c8y-list__group m-b-0 no-border-last\">\n  <div\n    class=\"c8y-list__item\"\n    *ngFor=\"\n      let asset of flatAssetTree$ | async | slice: paginationOffset:paginationOffset + pageSize\n    \"\n  >\n    <div\n      class=\"c8y-list__item__block\"\n      [title]=\"\n        (asset._subGroups && asset.isOpened\n          ? asset._subGroups.length\n            ? asset._subGroups.length > 1\n              ? manySubgroupsTitle\n              : oneSubgroupTitle\n            : noSubgroupTitle\n          : clickToOpenTitle\n        ) | translate: { count: asset._subGroups?.length }\n      \"\n    >\n      <div [ngStyle]=\"{ 'padding-left': asset._depth * 8 + 'px' }\"></div>\n      <div class=\"c8y-list__item__icon m-t-4 p-l-0\">\n        <button\n          class=\"btn-clean\"\n          [attr.aria-label]=\"(!asset.isOpened ? expandAriaLabel : collapseAriaLabel) | translate\"\n          type=\"button\"\n          (click)=\"loadChildren(asset)\"\n        >\n          <i\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"c8y-group\"\n            *ngIf=\"!asset.isOpened\"\n          ></i>\n          <i\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"c8y-group-open\"\n            *ngIf=\"asset.isOpened\"\n          ></i>\n        </button>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"d-flex a-i-center\">\n          <div class=\"col-sm-7 p-l-0 col-xs-12\">\n            <button\n              class=\"btn-clean\"\n              type=\"button\"\n              (click)=\"loadChildren(asset)\"\n            >\n              <span\n                class=\"text-truncate\"\n                [ngStyle]=\"{ cursor: 'pointer' }\"\n                title=\"{{ asset.name }}\"\n              >\n                {{ asset.name }}\n              </span>\n            </button>\n          </div>\n          <div class=\"p-t-8 col-xs-12 visible-xs\"></div>\n          <div class=\"col-sm-5 p-l-0 col-xs-12 p-r-0\">\n            <div class=\"d-flex\">\n              <div class=\"flex-grow form-group-sm max-width-100\">\n                <c8y-inventory-role-selector-upgraded\n                  [ownerAllowedRoles]=\"\n                    ownerAllAssignedRoles ? ownerAllAssignedRoles[asset.id] : undefined\n                  \"\n                  [inheritedRoles]=\"inheritedRoles ? inheritedRoles[asset.id] : undefined\"\n                  [assignedRoles]=\"assignedRoles ? assignedRoles[asset.id] : undefined\"\n                  [inventoryRoles]=\"inventoryRoles\"\n                  (onApply)=\"onApply($event, asset.id)\"\n                  (click)=\"$event.stopPropagation()\"\n                ></c8y-inventory-role-selector-upgraded>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <c8y-ui-empty-state\n    [icon]=\"'search'\"\n    [title]=\"'No matching group found among the expanded groups.' | translate\"\n    [subtitle]=\"'Try to expand more groups or to refine your search term.' | translate\"\n    *ngIf=\"searchFilter && !(flatAssetTree$ | async).length\"\n    [horizontal]=\"false\"\n  ></c8y-ui-empty-state>\n</div>\n" }]
+                    ], template: "<div class=\"c8y-list__group m-b-0 no-border-last\">\n  <div\n    class=\"c8y-list__item\"\n    *ngFor=\"\n      let asset of flatAssetTree$ | async | slice: paginationOffset:paginationOffset + pageSize\n    \"\n  >\n    <div\n      class=\"c8y-list__item__block\"\n      [title]=\"\n        (asset._subGroups && asset.isOpened\n          ? asset._subGroups.length\n            ? asset._subGroups.length > 1\n              ? manySubgroupsTitle\n              : oneSubgroupTitle\n            : noSubgroupTitle\n          : clickToOpenTitle\n        ) | translate: { count: asset._subGroups?.length }\n      \"\n    >\n      <div [ngStyle]=\"{ 'padding-left': asset._depth * 8 + 'px' }\"></div>\n      <div class=\"c8y-list__item__icon m-t-4 p-l-0\">\n        <button\n          class=\"btn-clean\"\n          [attr.aria-label]=\"(!asset.isOpened ? expandAriaLabel : collapseAriaLabel) | translate\"\n          type=\"button\"\n          (click)=\"loadChildren(asset)\"\n        >\n          <i\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"c8y-group\"\n            *ngIf=\"!asset.isOpened\"\n          ></i>\n          <i\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"c8y-group-open\"\n            *ngIf=\"asset.isOpened\"\n          ></i>\n        </button>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"d-flex a-i-center\">\n          <div class=\"col-sm-7 p-l-0 col-xs-12\">\n            <button\n              class=\"btn-clean\"\n              type=\"button\"\n              (click)=\"loadChildren(asset)\"\n            >\n              <span\n                class=\"text-truncate\"\n                [ngStyle]=\"{ cursor: 'pointer' }\"\n                title=\"{{ asset.name }}\"\n              >\n                {{ asset.name }}\n              </span>\n            </button>\n          </div>\n          <div class=\"p-t-8 col-xs-12 visible-xs\"></div>\n          <div class=\"col-sm-5 p-l-0 col-xs-12 p-r-0\">\n            <div class=\"d-flex\">\n              <div class=\"flex-grow form-group-sm max-width-100\">\n                <c8y-inventory-role-selector-upgraded\n                  [ownerAllowedRoles]=\"\n                    ownerAllAssignedRoles ? ownerAllAssignedRoles[asset.id] : undefined\n                  \"\n                  [inheritedRoles]=\"inheritedRoles ? inheritedRoles[asset.id] : undefined\"\n                  [assignedRoles]=\"assignedRoles ? assignedRoles[asset.id] : undefined\"\n                  [inventoryRoles]=\"inventoryRoles\"\n                  [disableEditForExternalUsers]=\"disableEditForExternalUsers\"\n                  (onApply)=\"onApply($event, asset.id)\"\n                  (click)=\"$event.stopPropagation()\"\n                ></c8y-inventory-role-selector-upgraded>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <c8y-ui-empty-state\n    [icon]=\"'search'\"\n    [title]=\"'No matching group found among the expanded groups.' | translate\"\n    [subtitle]=\"'Try to expand more groups or to refine your search term.' | translate\"\n    *ngIf=\"searchFilter && !(flatAssetTree$ | async).length\"\n    [horizontal]=\"false\"\n  ></c8y-ui-empty-state>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Ng1UserInventoryRolesService, decorators: [{
                     type: Optional
                 }] }, { type: i1.Ng1RolesService, decorators: [{
@@ -176,6 +179,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], paginationOffset: [{
                 type: Input
+            }], disableEditForExternalUsers: [{
+                type: Input
             }], onChangeRoles: [{
                 type: Output
             }], onChangeItemCount: [{

package/fesm2022/c8y-ngx-components-user-roles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-user-roles.mjs","sources":["../../user-roles/inventory-role-selector/inventory-role-selector.component.ts","../../user-roles/roles-asset-tree/roles-asset-tree.component.ts","../../user-roles/roles-asset-tree/roles-asset-tree.component.html","../../user-roles/user-roles.module.ts","../../user-roles/c8y-ngx-components-user-roles.ts"],"sourcesContent":["import { Directive, ElementRef, EventEmitter, Injector, Input, Output } from '@angular/core';\nimport { UpgradeComponent } from '@angular/upgrade/static';\n\n@Directive({ selector: 'c8y-inventory-role-selector-upgraded' })\nexport class InventoryRoleSelector extends UpgradeComponent {\n  @Input() assignedRoles: any;\n  @Input() inheritedRoles: any;\n  @Input() inventoryRoles: any;\n  @Input() ownerAllowedRoles: any;\n  @Output() onApply: EventEmitter<any>;\n\n  constructor(elementRef: ElementRef, injector: Injector) {\n    super('c8yInventoryRoleSelector', elementRef, injector);\n  }\n}\n","import { Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output } from '@angular/core';\nimport { gettext, IconDirective, EmptyStateComponent, C8yTranslatePipe } from '@c8y/ngx-components';\n\nimport {\n  mergeWith,\n  map as _map,\n  filter,\n  flatten,\n  uniqBy,\n  identity,\n  property,\n  get,\n  reduce\n} from 'lodash-es';\nimport { BehaviorSubject, combineLatest } from 'rxjs';\nimport { map, tap } from 'rxjs/operators';\nimport { IIdentified } from '@c8y/client';\nimport {\n  Ng1RolesService,\n  Ng1UserInventoryRolesService\n} from '@c8y/ngx-components/upgrade/upgraded-services';\nimport { NgFor, NgStyle, NgIf, AsyncPipe, SlicePipe } from '@angular/common';\nimport { InventoryRoleSelector } from '../inventory-role-selector/inventory-role-selector.component';\n\n@Component({\n  selector: 'c8y-roles-asset-tree-upgraded',\n  templateUrl: './roles-asset-tree.component.html',\n  imports: [\n    NgFor,\n    NgStyle,\n    NgIf,\n    IconDirective,\n    InventoryRoleSelector,\n    EmptyStateComponent,\n    C8yTranslatePipe,\n    AsyncPipe,\n    SlicePipe\n  ]\n})\nexport class RolesAssetTreeComponent implements OnInit, OnChanges {\n  @Input() user;\n  @Input() searchFilter;\n  @Input() assignedRoles;\n  @Input() ownerAssignedRoles;\n  @Input() expandGroups;\n  @Input() pageSize;\n  @Input() paginationOffset;\n  @Output() onChangeRoles = new EventEmitter();\n  @Output() onChangeItemCount = new EventEmitter();\n\n  rootGroups;\n  flatAssetTree;\n  inventoryRoles;\n  loadingAssetTree;\n  inheritedRoles;\n  ownerAllAssignedRoles;\n\n  noSubgroupTitle = gettext('No subgroups');\n  manySubgroupsTitle = gettext('Subgroups: {{ count }}');\n  oneSubgroupTitle = gettext('Subgroup: 1');\n  clickToOpenTitle = gettext('Click to fetch subgroups');\n  expandAriaLabel = gettext('Expand');\n  collapseAriaLabel = gettext('Collapse');\n\n  searchTermSubject = new BehaviorSubject<string>('');\n  flatTreeSubject = new BehaviorSubject<IIdentified[]>([]);\n\n  flatAssetTree$ = combineLatest([this.searchTermSubject, this.flatTreeSubject]).pipe(\n    map(([searchTerm, flatTree]) => {\n      return flatTree\n        .filter(group => group.name.toLowerCase().includes(searchTerm.toLowerCase()))\n        .filter(this.filterAsset.bind(this));\n    }),\n    tap(flatTree => {\n      this.onChangeItemCount.emit(flatTree.length);\n    })\n  );\n\n  constructor(\n    @Optional() public c8yUserInventoryRoles: Ng1UserInventoryRolesService,\n    @Optional() public c8yRoles: Ng1RolesService\n  ) {}\n\n  ngOnInit() {\n    this.loadInventoryRoles();\n  }\n\n  loadAssetTree() {\n    const onlyRootsUser = this.user.owner;\n    return this.c8yUserInventoryRoles.listRootGroups({ onlyRootsUser }).then(result => {\n      this.rootGroups = result;\n      this.updateTree();\n    });\n  }\n\n  updateTree() {\n    this.flatAssetTree = this.c8yUserInventoryRoles.flatTree(this.rootGroups);\n    this.setInheritedRoles();\n    this.flatTreeSubject.next(this.flatAssetTree);\n  }\n\n  loadChildren(mo) {\n    if (mo.isOpened) {\n      // eslint-disable-next-line no-underscore-dangle\n      mo._subGroups = [];\n      mo.isOpened = false;\n      this.updateTree();\n    } else {\n      this.c8yUserInventoryRoles.loadChildren(mo).then(_ => {\n        this.updateTree();\n      });\n      mo.isOpened = true;\n    }\n  }\n\n  loadInventoryRoles() {\n    this.c8yRoles.list({ pageSize: 1000 }).then(roles => {\n      this.inventoryRoles = roles;\n    });\n  }\n\n  ngOnChanges(changes) {\n    if (changes.searchFilter) {\n      this.searchTermSubject.next(this.searchFilter || '');\n    }\n    if (changes.user && !this.loadingAssetTree) {\n      this.loadingAssetTree = this.loadAssetTree();\n    }\n    if (changes.assignedRoles || changes.ownerAssignedRoles) {\n      this.loadingAssetTree.then(this.setInheritedRoles.bind(this));\n    }\n    if (changes.expandGroups && this.expandGroups) {\n      this.c8yUserInventoryRoles.expandAll(this.rootGroups, this.updateTree.bind(this));\n    }\n  }\n\n  setInheritedRoles() {\n    if (this.assignedRoles) {\n      this.inheritedRoles = this.getInventoryInheritedRoles(this.flatAssetTree, this.assignedRoles);\n    }\n    if (this.ownerAssignedRoles) {\n      const ownerInheritedRoles = this.getInventoryInheritedRoles(\n        this.flatAssetTree,\n        this.ownerAssignedRoles\n      );\n      this.ownerAllAssignedRoles = mergeWith(\n        ownerInheritedRoles,\n        this.ownerAssignedRoles,\n        (objValue, srcValue) => {\n          if (srcValue) {\n            if (objValue) {\n              return uniqBy(objValue.concat(srcValue.roles), 'id');\n            }\n            return srcValue.roles;\n          }\n          return objValue;\n        }\n      );\n    }\n  }\n\n  getInventoryInheritedRoles(flatTree, assignedRoles) {\n    return reduce(\n      flatTree,\n      (inheritedRoles, asset) => {\n        // eslint-disable-next-line no-underscore-dangle\n        let chain = asset._parentGroups;\n        chain = _map(chain, group => get(assignedRoles, group.id));\n        chain = filter(chain, identity);\n        chain = _map(chain, property('roles'));\n        chain = flatten(chain);\n        chain = uniqBy(chain, 'id');\n        inheritedRoles[asset.id] = chain;\n        return inheritedRoles;\n      },\n      {}\n    );\n  }\n\n  onApply(ev, managedObjectId) {\n    return this.onChangeRoles.emit({\n      managedObjectId: managedObjectId,\n      roles: ev.roles\n    });\n  }\n\n  filterAsset(asset) {\n    if (this.ownerAllAssignedRoles) {\n      return get(this.ownerAllAssignedRoles, [asset.id, 'length']);\n    }\n    return true;\n  }\n}\n","<div class=\"c8y-list__group m-b-0 no-border-last\">\n  <div\n    class=\"c8y-list__item\"\n    *ngFor=\"\n      let asset of flatAssetTree$ | async | slice: paginationOffset:paginationOffset + pageSize\n    \"\n  >\n    <div\n      class=\"c8y-list__item__block\"\n      [title]=\"\n        (asset._subGroups && asset.isOpened\n          ? asset._subGroups.length\n            ? asset._subGroups.length > 1\n              ? manySubgroupsTitle\n              : oneSubgroupTitle\n            : noSubgroupTitle\n          : clickToOpenTitle\n        ) | translate: { count: asset._subGroups?.length }\n      \"\n    >\n      <div [ngStyle]=\"{ 'padding-left': asset._depth * 8 + 'px' }\"></div>\n      <div class=\"c8y-list__item__icon m-t-4 p-l-0\">\n        <button\n          class=\"btn-clean\"\n          [attr.aria-label]=\"(!asset.isOpened ? expandAriaLabel : collapseAriaLabel) | translate\"\n          type=\"button\"\n          (click)=\"loadChildren(asset)\"\n        >\n          <i\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"c8y-group\"\n            *ngIf=\"!asset.isOpened\"\n          ></i>\n          <i\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"c8y-group-open\"\n            *ngIf=\"asset.isOpened\"\n          ></i>\n        </button>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"d-flex a-i-center\">\n          <div class=\"col-sm-7 p-l-0 col-xs-12\">\n            <button\n              class=\"btn-clean\"\n              type=\"button\"\n              (click)=\"loadChildren(asset)\"\n            >\n              <span\n                class=\"text-truncate\"\n                [ngStyle]=\"{ cursor: 'pointer' }\"\n                title=\"{{ asset.name }}\"\n              >\n                {{ asset.name }}\n              </span>\n            </button>\n          </div>\n          <div class=\"p-t-8 col-xs-12 visible-xs\"></div>\n          <div class=\"col-sm-5 p-l-0 col-xs-12 p-r-0\">\n            <div class=\"d-flex\">\n              <div class=\"flex-grow form-group-sm max-width-100\">\n                <c8y-inventory-role-selector-upgraded\n                  [ownerAllowedRoles]=\"\n                    ownerAllAssignedRoles ? ownerAllAssignedRoles[asset.id] : undefined\n                  \"\n                  [inheritedRoles]=\"inheritedRoles ? inheritedRoles[asset.id] : undefined\"\n                  [assignedRoles]=\"assignedRoles ? assignedRoles[asset.id] : undefined\"\n                  [inventoryRoles]=\"inventoryRoles\"\n                  (onApply)=\"onApply($event, asset.id)\"\n                  (click)=\"$event.stopPropagation()\"\n                ></c8y-inventory-role-selector-upgraded>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <c8y-ui-empty-state\n    [icon]=\"'search'\"\n    [title]=\"'No matching group found among the expanded groups.' | translate\"\n    [subtitle]=\"'Try to expand more groups or to refine your search term.' | translate\"\n    *ngIf=\"searchFilter && !(flatAssetTree$ | async).length\"\n    [horizontal]=\"false\"\n  ></c8y-ui-empty-state>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CoreModule } from '@c8y/ngx-components';\nimport { InventoryRoleSelector } from './inventory-role-selector/inventory-role-selector.component';\nimport { RolesAssetTreeComponent } from './roles-asset-tree/roles-asset-tree.component';\n\n@NgModule({\n  imports: [CoreModule, InventoryRoleSelector, RolesAssetTreeComponent]\n})\nexport class UserRolesModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["_map"],"mappings":";;;;;;;;;;AAIM,MAAO,qBAAsB,SAAQ,gBAAgB,CAAA;IAOzD,WAAY,CAAA,UAAsB,EAAE,QAAkB,EAAA;AACpD,QAAA,KAAK,CAAC,0BAA0B,EAAE,UAAU,EAAE,QAAQ,CAAC;;+GAR9C,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,QAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBADjC,SAAS;mBAAC,EAAE,QAAQ,EAAE,sCAAsC,EAAE;sGAEpD,aAAa,EAAA,CAAA;sBAArB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;gBACS,OAAO,EAAA,CAAA;sBAAhB;;;MC8BU,uBAAuB,CAAA;IAuClC,WACqB,CAAA,qBAAmD,EACnD,QAAyB,EAAA;QADzB,IAAqB,CAAA,qBAAA,GAArB,qBAAqB;QACrB,IAAQ,CAAA,QAAA,GAAR,QAAQ;AAjCnB,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAE;AAClC,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,YAAY,EAAE;AAShD,QAAA,IAAA,CAAA,eAAe,GAAG,OAAO,CAAC,cAAc,CAAC;AACzC,QAAA,IAAA,CAAA,kBAAkB,GAAG,OAAO,CAAC,wBAAwB,CAAC;AACtD,QAAA,IAAA,CAAA,gBAAgB,GAAG,OAAO,CAAC,aAAa,CAAC;AACzC,QAAA,IAAA,CAAA,gBAAgB,GAAG,OAAO,CAAC,0BAA0B,CAAC;AACtD,QAAA,IAAA,CAAA,eAAe,GAAG,OAAO,CAAC,QAAQ,CAAC;AACnC,QAAA,IAAA,CAAA,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC;AAEvC,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,eAAe,CAAS,EAAE,CAAC;AACnD,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,eAAe,CAAgB,EAAE,CAAC;QAExD,IAAc,CAAA,cAAA,GAAG,aAAa,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CACjF,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,QAAQ,CAAC,KAAI;AAC7B,YAAA,OAAO;AACJ,iBAAA,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;iBAC3E,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACxC,SAAC,CAAC,EACF,GAAG,CAAC,QAAQ,IAAG;YACb,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;SAC7C,CAAC,CACH;;IAOD,QAAQ,GAAA;QACN,IAAI,CAAC,kBAAkB,EAAE;;IAG3B,aAAa,GAAA;AACX,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK;AACrC,QAAA,OAAO,IAAI,CAAC,qBAAqB,CAAC,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,IAAG;AAChF,YAAA,IAAI,CAAC,UAAU,GAAG,MAAM;YACxB,IAAI,CAAC,UAAU,EAAE;AACnB,SAAC,CAAC;;IAGJ,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;QACzE,IAAI,CAAC,iBAAiB,EAAE;QACxB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;AAG/C,IAAA,YAAY,CAAC,EAAE,EAAA;AACb,QAAA,IAAI,EAAE,CAAC,QAAQ,EAAE;;AAEf,YAAA,EAAE,CAAC,UAAU,GAAG,EAAE;AAClB,YAAA,EAAE,CAAC,QAAQ,GAAG,KAAK;YACnB,IAAI,CAAC,UAAU,EAAE;;aACZ;AACL,YAAA,IAAI,CAAC,qBAAqB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAG;gBACnD,IAAI,CAAC,UAAU,EAAE;AACnB,aAAC,CAAC;AACF,YAAA,EAAE,CAAC,QAAQ,GAAG,IAAI;;;IAItB,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IAAG;AAClD,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAC7B,SAAC,CAAC;;AAGJ,IAAA,WAAW,CAAC,OAAO,EAAA;AACjB,QAAA,IAAI,OAAO,CAAC,YAAY,EAAE;YACxB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC;;QAEtD,IAAI,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;AAC1C,YAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,aAAa,EAAE;;QAE9C,IAAI,OAAO,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,EAAE;AACvD,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;QAE/D,IAAI,OAAO,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,EAAE;AAC7C,YAAA,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;IAIrF,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;;AAE/F,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;AAC3B,YAAA,MAAM,mBAAmB,GAAG,IAAI,CAAC,0BAA0B,CACzD,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,kBAAkB,CACxB;AACD,YAAA,IAAI,CAAC,qBAAqB,GAAG,SAAS,CACpC,mBAAmB,EACnB,IAAI,CAAC,kBAAkB,EACvB,CAAC,QAAQ,EAAE,QAAQ,KAAI;gBACrB,IAAI,QAAQ,EAAE;oBACZ,IAAI,QAAQ,EAAE;AACZ,wBAAA,OAAO,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;;oBAEtD,OAAO,QAAQ,CAAC,KAAK;;AAEvB,gBAAA,OAAO,QAAQ;AACjB,aAAC,CACF;;;IAIL,0BAA0B,CAAC,QAAQ,EAAE,aAAa,EAAA;QAChD,OAAO,MAAM,CACX,QAAQ,EACR,CAAC,cAAc,EAAE,KAAK,KAAI;;AAExB,YAAA,IAAI,KAAK,GAAG,KAAK,CAAC,aAAa;AAC/B,YAAA,KAAK,GAAGA,KAAI,CAAC,KAAK,EAAE,KAAK,IAAI,GAAG,CAAC,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;AAC1D,YAAA,KAAK,GAAG,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC;YAC/B,KAAK,GAAGA,KAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;AACtC,YAAA,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;AACtB,YAAA,KAAK,GAAG,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC;AAC3B,YAAA,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,KAAK;AAChC,YAAA,OAAO,cAAc;SACtB,EACD,EAAE,CACH;;IAGH,OAAO,CAAC,EAAE,EAAE,eAAe,EAAA;AACzB,QAAA,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC7B,YAAA,eAAe,EAAE,eAAe;YAChC,KAAK,EAAE,EAAE,CAAC;AACX,SAAA,CAAC;;AAGJ,IAAA,WAAW,CAAC,KAAK,EAAA;AACf,QAAA,IAAI,IAAI,CAAC,qBAAqB,EAAE;AAC9B,YAAA,OAAO,GAAG,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;;AAE9D,QAAA,OAAO,IAAI;;+GAvJF,uBAAuB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,4BAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,+ZCvCpC,wmGAsFA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED1DI,KAAK,EACL,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,OAAO,2EACP,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACJ,aAAa,EACb,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,qBAAqB,2LACrB,mBAAmB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EACnB,gBAAgB,EAChB,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,SAAS,yCACT,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAGA,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAfnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,+BAA+B,EAEhC,OAAA,EAAA;wBACP,KAAK;wBACL,OAAO;wBACP,IAAI;wBACJ,aAAa;wBACb,qBAAqB;wBACrB,mBAAmB;wBACnB,gBAAgB;wBAChB,SAAS;wBACT;AACD,qBAAA,EAAA,QAAA,EAAA,wmGAAA,EAAA;;0BA0CE;;0BACA;yCAxCM,IAAI,EAAA,CAAA;sBAAZ;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,kBAAkB,EAAA,CAAA;sBAA1B;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,gBAAgB,EAAA,CAAA;sBAAxB;gBACS,aAAa,EAAA,CAAA;sBAAtB;gBACS,iBAAiB,EAAA,CAAA;sBAA1B;;;MExCU,eAAe,CAAA;+GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,EAFhB,OAAA,EAAA,CAAA,UAAU,EAAE,qBAAqB,EAAE,uBAAuB,CAAA,EAAA,CAAA,CAAA;gHAEzD,eAAe,EAAA,OAAA,EAAA,CAFhB,UAAU,EAAyB,uBAAuB,CAAA,EAAA,CAAA,CAAA;;4FAEzD,eAAe,EAAA,UAAA,EAAA,CAAA;kBAH3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,UAAU,EAAE,qBAAqB,EAAE,uBAAuB;AACrE,iBAAA;;;ACPD;;AAEG;;;;"}
+{"version":3,"file":"c8y-ngx-components-user-roles.mjs","sources":["../../user-roles/inventory-role-selector/inventory-role-selector.component.ts","../../user-roles/roles-asset-tree/roles-asset-tree.component.ts","../../user-roles/roles-asset-tree/roles-asset-tree.component.html","../../user-roles/user-roles.module.ts","../../user-roles/c8y-ngx-components-user-roles.ts"],"sourcesContent":["import { Directive, ElementRef, EventEmitter, Injector, Input, Output } from '@angular/core';\nimport { UpgradeComponent } from '@angular/upgrade/static';\n\n@Directive({ selector: 'c8y-inventory-role-selector-upgraded' })\nexport class InventoryRoleSelector extends UpgradeComponent {\n  @Input() assignedRoles: any;\n  @Input() inheritedRoles: any;\n  @Input() inventoryRoles: any;\n  @Input() ownerAllowedRoles: any;\n  @Input() disableEditForExternalUsers: any;\n  @Output() onApply: EventEmitter<any>;\n\n  constructor(elementRef: ElementRef, injector: Injector) {\n    super('c8yInventoryRoleSelector', elementRef, injector);\n  }\n}\n","import { Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output } from '@angular/core';\nimport { gettext, IconDirective, EmptyStateComponent, C8yTranslatePipe } from '@c8y/ngx-components';\n\nimport {\n  mergeWith,\n  map as _map,\n  filter,\n  flatten,\n  uniqBy,\n  identity,\n  property,\n  get,\n  reduce\n} from 'lodash-es';\nimport { BehaviorSubject, combineLatest } from 'rxjs';\nimport { map, tap } from 'rxjs/operators';\nimport { IIdentified } from '@c8y/client';\nimport {\n  Ng1RolesService,\n  Ng1UserInventoryRolesService\n} from '@c8y/ngx-components/upgrade/upgraded-services';\nimport { NgFor, NgStyle, NgIf, AsyncPipe, SlicePipe } from '@angular/common';\nimport { InventoryRoleSelector } from '../inventory-role-selector/inventory-role-selector.component';\n\n@Component({\n  selector: 'c8y-roles-asset-tree-upgraded',\n  templateUrl: './roles-asset-tree.component.html',\n  imports: [\n    NgFor,\n    NgStyle,\n    NgIf,\n    IconDirective,\n    InventoryRoleSelector,\n    EmptyStateComponent,\n    C8yTranslatePipe,\n    AsyncPipe,\n    SlicePipe\n  ]\n})\nexport class RolesAssetTreeComponent implements OnInit, OnChanges {\n  @Input() user;\n  @Input() searchFilter;\n  @Input() assignedRoles;\n  @Input() ownerAssignedRoles;\n  @Input() expandGroups;\n  @Input() pageSize;\n  @Input() paginationOffset;\n  @Input() disableEditForExternalUsers = false;\n  @Output() onChangeRoles = new EventEmitter();\n  @Output() onChangeItemCount = new EventEmitter();\n\n  rootGroups;\n  flatAssetTree;\n  inventoryRoles;\n  loadingAssetTree;\n  inheritedRoles;\n  ownerAllAssignedRoles;\n\n  noSubgroupTitle = gettext('No subgroups');\n  manySubgroupsTitle = gettext('Subgroups: {{ count }}');\n  oneSubgroupTitle = gettext('Subgroup: 1');\n  clickToOpenTitle = gettext('Click to fetch subgroups');\n  expandAriaLabel = gettext('Expand');\n  collapseAriaLabel = gettext('Collapse');\n\n  searchTermSubject = new BehaviorSubject<string>('');\n  flatTreeSubject = new BehaviorSubject<IIdentified[]>([]);\n\n  flatAssetTree$ = combineLatest([this.searchTermSubject, this.flatTreeSubject]).pipe(\n    map(([searchTerm, flatTree]) => {\n      return flatTree\n        .filter(group => group.name.toLowerCase().includes(searchTerm.toLowerCase()))\n        .filter(this.filterAsset.bind(this));\n    }),\n    tap(flatTree => {\n      this.onChangeItemCount.emit(flatTree.length);\n    })\n  );\n\n  constructor(\n    @Optional() public c8yUserInventoryRoles: Ng1UserInventoryRolesService,\n    @Optional() public c8yRoles: Ng1RolesService\n  ) {}\n\n  ngOnInit() {\n    this.loadInventoryRoles();\n  }\n\n  loadAssetTree() {\n    const onlyRootsUser = this.user.owner;\n    return this.c8yUserInventoryRoles.listRootGroups({ onlyRootsUser }).then(result => {\n      this.rootGroups = result;\n      this.updateTree();\n    });\n  }\n\n  updateTree() {\n    this.flatAssetTree = this.c8yUserInventoryRoles.flatTree(this.rootGroups);\n    this.setInheritedRoles();\n    this.flatTreeSubject.next(this.flatAssetTree);\n  }\n\n  loadChildren(mo) {\n    if (mo.isOpened) {\n      // eslint-disable-next-line no-underscore-dangle\n      mo._subGroups = [];\n      mo.isOpened = false;\n      this.updateTree();\n    } else {\n      this.c8yUserInventoryRoles.loadChildren(mo).then(_ => {\n        this.updateTree();\n      });\n      mo.isOpened = true;\n    }\n  }\n\n  loadInventoryRoles() {\n    this.c8yRoles.list({ pageSize: 1000 }).then(roles => {\n      this.inventoryRoles = roles;\n    });\n  }\n\n  ngOnChanges(changes) {\n    if (changes.searchFilter) {\n      this.searchTermSubject.next(this.searchFilter || '');\n    }\n    if (changes.user && !this.loadingAssetTree) {\n      this.loadingAssetTree = this.loadAssetTree();\n    }\n    if (changes.assignedRoles || changes.ownerAssignedRoles) {\n      this.loadingAssetTree.then(this.setInheritedRoles.bind(this));\n    }\n    if (changes.expandGroups && this.expandGroups) {\n      this.c8yUserInventoryRoles.expandAll(this.rootGroups, this.updateTree.bind(this));\n    }\n  }\n\n  setInheritedRoles() {\n    if (this.assignedRoles) {\n      this.inheritedRoles = this.getInventoryInheritedRoles(this.flatAssetTree, this.assignedRoles);\n    }\n    if (this.ownerAssignedRoles) {\n      const ownerInheritedRoles = this.getInventoryInheritedRoles(\n        this.flatAssetTree,\n        this.ownerAssignedRoles\n      );\n      this.ownerAllAssignedRoles = mergeWith(\n        ownerInheritedRoles,\n        this.ownerAssignedRoles,\n        (objValue, srcValue) => {\n          if (srcValue) {\n            if (objValue) {\n              return uniqBy(objValue.concat(srcValue.roles), 'id');\n            }\n            return srcValue.roles;\n          }\n          return objValue;\n        }\n      );\n    }\n  }\n\n  getInventoryInheritedRoles(flatTree, assignedRoles) {\n    return reduce(\n      flatTree,\n      (inheritedRoles, asset) => {\n        // eslint-disable-next-line no-underscore-dangle\n        let chain = asset._parentGroups;\n        chain = _map(chain, group => get(assignedRoles, group.id));\n        chain = filter(chain, identity);\n        chain = _map(chain, property('roles'));\n        chain = flatten(chain);\n        chain = uniqBy(chain, 'id');\n        inheritedRoles[asset.id] = chain;\n        return inheritedRoles;\n      },\n      {}\n    );\n  }\n\n  onApply(ev, managedObjectId) {\n    return this.onChangeRoles.emit({\n      managedObjectId: managedObjectId,\n      roles: ev.roles\n    });\n  }\n\n  filterAsset(asset) {\n    if (this.ownerAllAssignedRoles) {\n      return get(this.ownerAllAssignedRoles, [asset.id, 'length']);\n    }\n    return true;\n  }\n}\n","<div class=\"c8y-list__group m-b-0 no-border-last\">\n  <div\n    class=\"c8y-list__item\"\n    *ngFor=\"\n      let asset of flatAssetTree$ | async | slice: paginationOffset:paginationOffset + pageSize\n    \"\n  >\n    <div\n      class=\"c8y-list__item__block\"\n      [title]=\"\n        (asset._subGroups && asset.isOpened\n          ? asset._subGroups.length\n            ? asset._subGroups.length > 1\n              ? manySubgroupsTitle\n              : oneSubgroupTitle\n            : noSubgroupTitle\n          : clickToOpenTitle\n        ) | translate: { count: asset._subGroups?.length }\n      \"\n    >\n      <div [ngStyle]=\"{ 'padding-left': asset._depth * 8 + 'px' }\"></div>\n      <div class=\"c8y-list__item__icon m-t-4 p-l-0\">\n        <button\n          class=\"btn-clean\"\n          [attr.aria-label]=\"(!asset.isOpened ? expandAriaLabel : collapseAriaLabel) | translate\"\n          type=\"button\"\n          (click)=\"loadChildren(asset)\"\n        >\n          <i\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"c8y-group\"\n            *ngIf=\"!asset.isOpened\"\n          ></i>\n          <i\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"c8y-group-open\"\n            *ngIf=\"asset.isOpened\"\n          ></i>\n        </button>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"d-flex a-i-center\">\n          <div class=\"col-sm-7 p-l-0 col-xs-12\">\n            <button\n              class=\"btn-clean\"\n              type=\"button\"\n              (click)=\"loadChildren(asset)\"\n            >\n              <span\n                class=\"text-truncate\"\n                [ngStyle]=\"{ cursor: 'pointer' }\"\n                title=\"{{ asset.name }}\"\n              >\n                {{ asset.name }}\n              </span>\n            </button>\n          </div>\n          <div class=\"p-t-8 col-xs-12 visible-xs\"></div>\n          <div class=\"col-sm-5 p-l-0 col-xs-12 p-r-0\">\n            <div class=\"d-flex\">\n              <div class=\"flex-grow form-group-sm max-width-100\">\n                <c8y-inventory-role-selector-upgraded\n                  [ownerAllowedRoles]=\"\n                    ownerAllAssignedRoles ? ownerAllAssignedRoles[asset.id] : undefined\n                  \"\n                  [inheritedRoles]=\"inheritedRoles ? inheritedRoles[asset.id] : undefined\"\n                  [assignedRoles]=\"assignedRoles ? assignedRoles[asset.id] : undefined\"\n                  [inventoryRoles]=\"inventoryRoles\"\n                  [disableEditForExternalUsers]=\"disableEditForExternalUsers\"\n                  (onApply)=\"onApply($event, asset.id)\"\n                  (click)=\"$event.stopPropagation()\"\n                ></c8y-inventory-role-selector-upgraded>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <c8y-ui-empty-state\n    [icon]=\"'search'\"\n    [title]=\"'No matching group found among the expanded groups.' | translate\"\n    [subtitle]=\"'Try to expand more groups or to refine your search term.' | translate\"\n    *ngIf=\"searchFilter && !(flatAssetTree$ | async).length\"\n    [horizontal]=\"false\"\n  ></c8y-ui-empty-state>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CoreModule } from '@c8y/ngx-components';\nimport { InventoryRoleSelector } from './inventory-role-selector/inventory-role-selector.component';\nimport { RolesAssetTreeComponent } from './roles-asset-tree/roles-asset-tree.component';\n\n@NgModule({\n  imports: [CoreModule, InventoryRoleSelector, RolesAssetTreeComponent]\n})\nexport class UserRolesModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["_map"],"mappings":"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"}

package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs

@@ -232,7 +232,7 @@ class DatapointsGraphWidgetConfigComponent {
             (this.config?.datapoints?.filter(dp => dp.__active)?.length || 0) > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatapointsGraphWidgetConfigComponent, deps: [{ token: i1.WidgetConfigComponent, optional: true }, { token: i1.ContextDashboardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatapointsGraphWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-config", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [ChartEventsService, ChartAlarmsService], viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["dataPointsGraphPreview"], descendants: true }], ngImport: i0, template: "<div class=\"no-card-context\">\n  <div class=\"conf-col\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-datapoint-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"1\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <label\n        [title]=\"'Number of decimal places' | translate\"\n        translate\n      >\n        Number of decimal places\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></c8y-messages>\n    </form>\n  </div>\n\n  <div class=\"p-t-32 separator-top\">\n    <div class=\"d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label\n        class=\"text-12\"\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n      >\n        {{ 'Options' | translate }}\n      </label>\n      <c8y-time-context\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: true,\n          interval: true,\n          aggregation: true\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n\n      <form\n        class=\"d-block p-t-16\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <input\n                  name=\"yAxisSplitLines\"\n                  type=\"checkbox\"\n                  formControlName=\"yAxisSplitLines\"\n                />\n                <span></span>\n                <span translate>Y-axis helper lines</span>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show labels and units' | translate\"\n            >\n              <input\n                name=\"showLabelAndUnit\"\n                type=\"checkbox\"\n                formControlName=\"showLabelAndUnit\"\n              />\n              <span></span>\n              <span translate>Display labels and units on Y-axis</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show slider' | translate\"\n            >\n              <input\n                name=\"showSlider\"\n                type=\"checkbox\"\n                formControlName=\"showSlider\"\n              />\n              <span></span>\n              <span translate>Show slider</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n\n<ng-template #dataPointsGraphPreview>\n  <c8y-charts\n    class=\"d-block p-relative\"\n    *ngIf=\"activeDatapointsExists\"\n    [config]=\"config\"\n    [alerts]=\"alerts\"\n    (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  ></c8y-charts>\n\n  <c8y-ui-empty-state\n    class=\"d-block m-t-24\"\n    [icon]=\"'search'\"\n    [title]=\"'No data points selected' | translate\"\n    [subtitle]=\"'Select data point to render chart' | translate\"\n    *ngIf=\"!activeDatapointsExists\"\n  ></c8y-ui-empty-state>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.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: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i7.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i8.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "context"], outputs: ["contextChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatapointsGraphWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-config", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [ChartEventsService, ChartAlarmsService], viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["dataPointsGraphPreview"], descendants: true }], ngImport: i0, template: "<div class=\"no-card-context\">\n  <div class=\"conf-col\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-datapoint-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"1\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <label\n        [title]=\"'Number of decimal places' | translate\"\n        translate\n      >\n        Number of decimal places\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></c8y-messages>\n    </form>\n  </div>\n\n  <div class=\"p-t-32 separator-top\">\n    <div class=\"d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label\n        class=\"text-12\"\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n      >\n        {{ 'Options' | translate }}\n      </label>\n      <c8y-time-context\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: true,\n          interval: true,\n          aggregation: true\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n\n      <form\n        class=\"d-block p-t-16\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show labels and units' | translate\"\n            >\n              <input\n                name=\"showLabelAndUnit\"\n                type=\"checkbox\"\n                formControlName=\"showLabelAndUnit\"\n              />\n              <span></span>\n              <span translate>Display labels and units on Y-axis</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show slider' | translate\"\n            >\n              <input\n                name=\"showSlider\"\n                type=\"checkbox\"\n                formControlName=\"showSlider\"\n              />\n              <span></span>\n              <span translate>Show slider</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n\n<ng-template #dataPointsGraphPreview>\n  <c8y-charts\n    class=\"d-block p-relative\"\n    *ngIf=\"activeDatapointsExists\"\n    [config]=\"config\"\n    [alerts]=\"alerts\"\n    (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  ></c8y-charts>\n\n  <c8y-ui-empty-state\n    class=\"d-block m-t-24\"\n    [icon]=\"'search'\"\n    [title]=\"'No data points selected' | translate\"\n    [subtitle]=\"'Select data point to render chart' | translate\"\n    *ngIf=\"!activeDatapointsExists\"\n  ></c8y-ui-empty-state>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.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: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i7.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i8.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "context"], outputs: ["contextChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatapointsGraphWidgetConfigComponent, decorators: [{
             type: Component,
@@ -246,7 +246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         DatapointSelectorModule,
                         AlarmEventSelectorModule,
                         TimeContextComponent
-                    ], providers: [ChartEventsService, ChartAlarmsService], template: "<div class=\"no-card-context\">\n  <div class=\"conf-col\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-datapoint-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"1\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <label\n        [title]=\"'Number of decimal places' | translate\"\n        translate\n      >\n        Number of decimal places\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></c8y-messages>\n    </form>\n  </div>\n\n  <div class=\"p-t-32 separator-top\">\n    <div class=\"d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label\n        class=\"text-12\"\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n      >\n        {{ 'Options' | translate }}\n      </label>\n      <c8y-time-context\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: true,\n          interval: true,\n          aggregation: true\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n\n      <form\n        class=\"d-block p-t-16\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <input\n                  name=\"yAxisSplitLines\"\n                  type=\"checkbox\"\n                  formControlName=\"yAxisSplitLines\"\n                />\n                <span></span>\n                <span translate>Y-axis helper lines</span>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show labels and units' | translate\"\n            >\n              <input\n                name=\"showLabelAndUnit\"\n                type=\"checkbox\"\n                formControlName=\"showLabelAndUnit\"\n              />\n              <span></span>\n              <span translate>Display labels and units on Y-axis</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show slider' | translate\"\n            >\n              <input\n                name=\"showSlider\"\n                type=\"checkbox\"\n                formControlName=\"showSlider\"\n              />\n              <span></span>\n              <span translate>Show slider</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n\n<ng-template #dataPointsGraphPreview>\n  <c8y-charts\n    class=\"d-block p-relative\"\n    *ngIf=\"activeDatapointsExists\"\n    [config]=\"config\"\n    [alerts]=\"alerts\"\n    (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  ></c8y-charts>\n\n  <c8y-ui-empty-state\n    class=\"d-block m-t-24\"\n    [icon]=\"'search'\"\n    [title]=\"'No data points selected' | translate\"\n    [subtitle]=\"'Select data point to render chart' | translate\"\n    *ngIf=\"!activeDatapointsExists\"\n  ></c8y-ui-empty-state>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n" }]
+                    ], providers: [ChartEventsService, ChartAlarmsService], template: "<div class=\"no-card-context\">\n  <div class=\"conf-col\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-datapoint-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"1\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <label\n        [title]=\"'Number of decimal places' | translate\"\n        translate\n      >\n        Number of decimal places\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></c8y-messages>\n    </form>\n  </div>\n\n  <div class=\"p-t-32 separator-top\">\n    <div class=\"d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label\n        class=\"text-12\"\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n      >\n        {{ 'Options' | translate }}\n      </label>\n      <c8y-time-context\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: true,\n          interval: true,\n          aggregation: true\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n\n      <form\n        class=\"d-block p-t-16\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show labels and units' | translate\"\n            >\n              <input\n                name=\"showLabelAndUnit\"\n                type=\"checkbox\"\n                formControlName=\"showLabelAndUnit\"\n              />\n              <span></span>\n              <span translate>Display labels and units on Y-axis</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show slider' | translate\"\n            >\n              <input\n                name=\"showSlider\"\n                type=\"checkbox\"\n                formControlName=\"showSlider\"\n              />\n              <span></span>\n              <span translate>Show slider</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n\n<ng-template #dataPointsGraphPreview>\n  <c8y-charts\n    class=\"d-block p-relative\"\n    *ngIf=\"activeDatapointsExists\"\n    [config]=\"config\"\n    [alerts]=\"alerts\"\n    (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  ></c8y-charts>\n\n  <c8y-ui-empty-state\n    class=\"d-block m-t-24\"\n    [icon]=\"'search'\"\n    [title]=\"'No data points selected' | translate\"\n    [subtitle]=\"'Select data point to render chart' | translate\"\n    *ngIf=\"!activeDatapointsExists\"\n  ></c8y-ui-empty-state>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.WidgetConfigComponent, decorators: [{
                     type: Optional
                 }] }, { type: i1.ContextDashboardComponent, decorators: [{
@@ -343,7 +343,7 @@ class DatapointsGraphWidgetViewComponent {
             this.widgetTimeContextDateRangeService.updateInitialTimeRange(null);
         }
         if (timeProps.realtime !== this.displayConfig?.realtime ||
-            (timeProps.realtime === this.displayConfig?.realtime) === false) {
+            (!timeProps.realtime && !this.displayConfig?.realtime)) {
             const patchValues = {
                 dateFrom: new Date(timeProps.currentDateContextFromDate),
                 dateTo: new Date(timeProps.currentDateContextToDate),
@@ -472,7 +472,7 @@ class DatapointsGraphWidgetViewComponent {
         return form;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatapointsGraphWidgetViewComponent, deps: [{ token: i4.FormBuilder }, { token: i2$1.TranslateService }, { token: i2.WidgetTimeContextDateRangeService }, { token: i1.ContextDashboardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatapointsGraphWidgetViewComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-view", inputs: { config: "config" }, providers: [ChartEventsService, ChartAlarmsService], viewQueries: [{ propertyName: "chartComponent", first: true, predicate: ChartsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-l-16 p-r-16\">\n  <div class=\"d-flex gap-16 a-i-start\">\n    <div\n      class=\"btn-group btn-group-sm flex-no-shrink\"\n      *ngIf=\"\n        !displayConfig?.widgetInstanceGlobalTimeContext && displayConfig?.datapoints.length > 0 && displayConfig?.displayDateSelection || displayConfig?.displayAggregationSelection\n      \"\n    >\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Aggregation' | translate\"\n        tooltip=\"{{\n          (displayConfig?.aggregation\n            ? AGGREGATION_TEXTS[displayConfig.aggregation]\n            : AGGREGATION_TEXTS.undefined\n          ) | translate\n        }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            displayConfig?.aggregation\n              ? AGGREGATION_ICONS[displayConfig.aggregation]\n              : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n      </button>\n\n      <c8y-time-context\n        class=\"d-contents\"\n        (contextChange)=\"timePropsChanged($event)\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: displayConfig?.displayDateSelection,\n          interval: displayConfig?.displayDateSelection,\n          aggregation: displayConfig?.displayAggregationSelection\n        }\"\n      ></c8y-time-context>\n    </div>\n    <c8y-alarms-filter\n      class=\"d-contents form-group-sm\"\n      *ngIf=\"hasAtLeastOneAlarmActive\"\n      (filterApplied)=\"filterSeverity($event)\"\n    ></c8y-alarms-filter>\n\n    <div class=\"m-l-auto btn-group btn-group-sm flex-no-shrink\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Save as image' | translate\"\n        tooltip=\"{{ 'Save as image' | translate }}\"\n        container=\"body\"\n        type=\"button\"\n        (click)=\"chart.saveAsImage()\"\n        [adaptivePosition]=\"false\"\n      >\n        <i\n          class=\"icon-14\"\n          c8yIcon=\"image-file-checked\"\n        ></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"d-flex\"\n    style=\"align-items: center\"\n    *ngIf=\"displayConfig?.datapoints.length > 0\"\n  >\n    <button\n      class=\"btn-help btn-help--sm m-r-8\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"legendHelpTemplate\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      container=\"body\"\n      [adaptivePosition]=\"false\"\n    ></button>\n    <div class=\"inner-scroll\">\n      <div class=\"flex-grow p-t-8 d-flex a-i-start gap-8 p-b-4\">\n        <div\n          class=\"c8y-datapoint-pill flex-no-shrink\"\n          title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n          *ngFor=\"let datapoint of displayConfig.datapoints\"\n          [ngClass]=\"{ active: datapoint.__active }\"\n        >\n          <i\n            class=\"text-warning m-l-4\"\n            c8yIcon=\"exclamation-triangle\"\n            [tooltip]=\"'At least 1 data point must be active.' | translate\"\n            container=\"body\"\n            *ngIf=\"!hasAtLeastOneDatapointActive && datapoint.__active\"\n            [adaptivePosition]=\"false\"\n          ></i>\n          <button\n            class=\"c8y-datapoint-pill__btn\"\n            title=\"{{\n              (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n            }} \"\n            type=\"button\"\n            (click)=\"toggleChart(datapoint)\"\n          >\n            <i\n              class=\"icon-14\"\n              [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n            ></i>\n          </button>\n          <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n            <i\n              class=\"m-r-4 icon-14\"\n              c8yIcon=\"circle\"\n              [ngStyle]=\"{\n                color: datapoint.color\n              }\"\n            ></i>\n            <span\n              class=\"text-truncate\"\n              [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n            >\n              <span class=\"text-truncate\">\n                {{ datapoint.label }}\n              </span>\n              <small class=\"text-muted text-10\">\n                {{ datapoint.__target.name }}\n              </small>\n            </span>\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Measurements received for this data point may be out of sync.' | translate\n              \"\n              container=\"body\"\n              *ngIf=\"datapointsOutOfSync.get(datapoint)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n          </div>\n        </div>\n        <!-- Alarms  -->\n\n        <ng-container *ngFor=\"let alarm of alarms\">\n          <div\n            class=\"c8y-alarm-pill flex-no-shrink\"\n            title=\"{{ alarm.filters.type }} \"\n            *ngIf=\"alarm.__active\"\n          >\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Alarm of this type is currently active and outside of the selected time range'\n                  | translate\n              \"\n              container=\"body\"\n              *ngIf=\"displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n            <button\n              class=\"c8y-alarm-pill__btn\"\n              title=\"{{ alarm.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(alarm)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"alarm.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <button\n              class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n              (click)=\"toggleMarkedArea(alarm)\"\n              [ngClass]=\"{\n                active: !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n              }\"\n            >\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [style.background-color]=\"alarm.color\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"bell\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ alarm.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ alarm.__target.name }}\n                </small>\n              </span>\n            </button>\n          </div>\n        </ng-container>\n\n        <!-- Events -->\n        <ng-container *ngFor=\"let event of events\">\n          <div\n            class=\"c8y-event-pill flex-no-shrink\"\n            title=\"{{ event.filters.type }}\"\n            *ngIf=\"event.__active\"\n          >\n            <button\n              class=\"c8y-event-pill__btn\"\n              title=\"{{ event.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(event)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"event.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [ngStyle]=\"{ 'background-color': event.color }\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"online1\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': event.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ event.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ event.__target.name }}\n                </small>\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<c8y-charts\n  #chart\n  [config]=\"displayConfig\"\n  [alerts]=\"alerts\"\n  (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n  (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n  (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n  (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n></c8y-charts>\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.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: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: AlarmsModule }, { kind: "component", type: i8$1.AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "context"], outputs: ["contextChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatapointsGraphWidgetViewComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-view", inputs: { config: "config" }, providers: [ChartEventsService, ChartAlarmsService], viewQueries: [{ propertyName: "chartComponent", first: true, predicate: ChartsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-l-16 p-r-16\">\n  <div class=\"d-flex gap-16 a-i-start\">\n    <div\n      class=\"btn-group btn-group-sm flex-no-shrink\"\n      *ngIf=\"\n        !displayConfig?.widgetInstanceGlobalTimeContext && displayConfig?.datapoints.length > 0 && displayConfig?.displayDateSelection || displayConfig?.displayAggregationSelection\n      \"\n    >\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Aggregation' | translate\"\n        tooltip=\"{{\n          (displayConfig?.aggregation\n            ? AGGREGATION_TEXTS[displayConfig.aggregation]\n            : AGGREGATION_TEXTS.undefined\n          ) | translate\n        }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            displayConfig?.aggregation\n              ? AGGREGATION_ICONS[displayConfig.aggregation]\n              : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n      </button>\n\n      <c8y-time-context\n        class=\"d-contents\"\n        (contextChange)=\"timePropsChanged($event)\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: displayConfig?.displayDateSelection,\n          interval: displayConfig?.displayDateSelection,\n          aggregation: displayConfig?.displayAggregationSelection\n        }\"\n      ></c8y-time-context>\n    </div>\n    <c8y-alarms-filter\n      class=\"d-contents form-group-sm\"\n      *ngIf=\"hasAtLeastOneAlarmActive\"\n      (filterApplied)=\"filterSeverity($event)\"\n    ></c8y-alarms-filter>\n\n    <div class=\"m-l-auto btn-group btn-group-sm flex-no-shrink\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Save as image' | translate\"\n        tooltip=\"{{ 'Save as image' | translate }}\"\n        container=\"body\"\n        type=\"button\"\n        (click)=\"chart.saveAsImage()\"\n        [adaptivePosition]=\"false\"\n      >\n        <i\n          class=\"icon-14\"\n          c8yIcon=\"image-file-checked\"\n        ></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"d-flex\"\n    style=\"align-items: center\"\n    *ngIf=\"displayConfig?.datapoints.length > 0\"\n  >\n    <button\n      class=\"btn-help btn-help--sm m-r-8\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"legendHelpTemplate\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      container=\"body\"\n      [adaptivePosition]=\"false\"\n    ></button>\n    <div class=\"inner-scroll\">\n      <div class=\"flex-grow p-t-8 d-flex a-i-start gap-8 p-b-4\">\n        <div\n          class=\"c8y-datapoint-pill flex-no-shrink\"\n          title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n          *ngFor=\"let datapoint of displayConfig.datapoints\"\n          [ngClass]=\"{ active: datapoint.__active }\"\n        >\n          <i\n            class=\"text-warning m-l-4\"\n            c8yIcon=\"exclamation-triangle\"\n            [tooltip]=\"'At least 1 data point must be active.' | translate\"\n            container=\"body\"\n            *ngIf=\"!hasAtLeastOneDatapointActive && datapoint.__active\"\n            [adaptivePosition]=\"false\"\n          ></i>\n          <button\n            class=\"c8y-datapoint-pill__btn\"\n            title=\"{{\n              (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n            }} \"\n            type=\"button\"\n            (click)=\"toggleChart(datapoint)\"\n          >\n            <i\n              class=\"icon-14\"\n              [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n            ></i>\n          </button>\n          <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n            <i\n              class=\"m-r-4 icon-14\"\n              c8yIcon=\"circle\"\n              [ngStyle]=\"{\n                color: datapoint.color\n              }\"\n            ></i>\n            <span\n              class=\"text-truncate\"\n              [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n            >\n              <span class=\"text-truncate\">\n                {{ datapoint.label }}\n              </span>\n              <small class=\"text-muted text-10\">\n                {{ datapoint.__target.name }}\n              </small>\n            </span>\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Measurements received for this data point may be out of sync.' | translate\n              \"\n              container=\"body\"\n              *ngIf=\"datapointsOutOfSync.get(datapoint)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n          </div>\n        </div>\n        <!-- Alarms  -->\n\n        <ng-container *ngFor=\"let alarm of alarms\">\n          <div\n            class=\"c8y-alarm-pill flex-no-shrink\"\n            title=\"{{ alarm.filters.type }} \"\n            *ngIf=\"alarm.__active\"\n          >\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Alarm of this type is currently active and outside of the selected time range'\n                  | translate\n              \"\n              container=\"body\"\n              *ngIf=\"displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n            <button\n              class=\"c8y-alarm-pill__btn\"\n              title=\"{{ alarm.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(alarm)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"alarm.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <button\n              class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n              (click)=\"toggleMarkedArea(alarm)\"\n              [ngClass]=\"{\n                active: !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n              }\"\n            >\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [style.background-color]=\"alarm.color\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"bell\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ alarm.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ alarm.__target.name }}\n                </small>\n              </span>\n            </button>\n          </div>\n        </ng-container>\n\n        <!-- Events -->\n        <ng-container *ngFor=\"let event of events\">\n          <div\n            class=\"c8y-event-pill flex-no-shrink\"\n            title=\"{{ event.filters.type }}\"\n            *ngIf=\"event.__active\"\n          >\n            <button\n              class=\"c8y-event-pill__btn\"\n              title=\"{{ event.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(event)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"event.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [ngStyle]=\"{ 'background-color': event.color }\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"online1\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': event.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ event.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ event.__target.name }}\n                </small>\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<c8y-charts\n  #chart\n  [config]=\"displayConfig\"\n  [alerts]=\"alerts\"\n  (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n  (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n  (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n  (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n></c8y-charts>\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.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: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: AlarmsModule }, { kind: "component", type: i8$1.AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "context"], outputs: ["contextChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatapointsGraphWidgetViewComponent, decorators: [{
             type: Component,