@c8y/ngx-components 1018.503.52 → 1018.503.62

package/fesm2020/c8y-ngx-components-context-dashboard.mjs

@@ -822,10 +822,10 @@ class DashboardAvailabilityComponent {
     }
 }
 DashboardAvailabilityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DashboardAvailabilityComponent, deps: [{ token: i1.UserGroupService }, { token: i5.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardAvailabilityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DashboardAvailabilityComponent, selector: "c8y-dashboard-availability", inputs: { globalRolesIds: "globalRolesIds" }, outputs: { globalRolesIdsChange: "globalRolesIdsChange" }, ngImport: i0, template: "<c8y-form-group class=\"p-b-24 m-b-0\">\n  <div class=\"legend form-block\">\n    <span>{{ 'Availability' | translate }}</span>\n  </div>\n  <label for=\"availability\">\n    <span class=\"m-r-4\" id=\"availability\">\n      {{ 'Global roles' | translate }}\n    </span>\n    <button\n      class=\"btn-help btn-help--sm\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{\n        'Select the global roles for which the dashboard will be available' | translate\n      }}\"\n      triggers=\"focus\"\n      placement=\"right\"\n      container=\"body\"\n    >\n    </button>\n  </label>\n  <c8y-select\n    style=\"width: 180px\"\n    [items]=\"globalRolesItems\"\n    [selected]=\"globalRolesItemsSelected\"\n    (onChange)=\"onSelected($event)\"\n  ></c8y-select>\n</c8y-form-group>\n", dependencies: [{ kind: "component", type: i5.SelectComponent, selector: "c8y-select", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection"], outputs: ["onChange"] }, { kind: "component", type: i5.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }] });
+DashboardAvailabilityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DashboardAvailabilityComponent, selector: "c8y-dashboard-availability", inputs: { globalRolesIds: "globalRolesIds" }, outputs: { globalRolesIdsChange: "globalRolesIdsChange" }, ngImport: i0, template: "<c8y-form-group class=\"p-b-24 m-b-0\">\n  <div class=\"legend form-block\">\n    <span>{{ 'Availability`of dashboard based on permissions`' | translate }}</span>\n  </div>\n  <label for=\"availability\">\n    <span class=\"m-r-4\" id=\"availability\">\n      {{ 'Global roles' | translate }}\n    </span>\n    <button\n      class=\"btn-help btn-help--sm\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{\n        'Select the global roles for which the dashboard will be available' | translate\n      }}\"\n      triggers=\"focus\"\n      placement=\"right\"\n      container=\"body\"\n    >\n    </button>\n  </label>\n  <c8y-select\n    style=\"width: 180px\"\n    [items]=\"globalRolesItems\"\n    [selected]=\"globalRolesItemsSelected\"\n    (onChange)=\"onSelected($event)\"\n  ></c8y-select>\n</c8y-form-group>\n", dependencies: [{ kind: "component", type: i5.SelectComponent, selector: "c8y-select", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection"], outputs: ["onChange"] }, { kind: "component", type: i5.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DashboardAvailabilityComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-dashboard-availability', template: "<c8y-form-group class=\"p-b-24 m-b-0\">\n  <div class=\"legend form-block\">\n    <span>{{ 'Availability' | translate }}</span>\n  </div>\n  <label for=\"availability\">\n    <span class=\"m-r-4\" id=\"availability\">\n      {{ 'Global roles' | translate }}\n    </span>\n    <button\n      class=\"btn-help btn-help--sm\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{\n        'Select the global roles for which the dashboard will be available' | translate\n      }}\"\n      triggers=\"focus\"\n      placement=\"right\"\n      container=\"body\"\n    >\n    </button>\n  </label>\n  <c8y-select\n    style=\"width: 180px\"\n    [items]=\"globalRolesItems\"\n    [selected]=\"globalRolesItemsSelected\"\n    (onChange)=\"onSelected($event)\"\n  ></c8y-select>\n</c8y-form-group>\n" }]
+            args: [{ selector: 'c8y-dashboard-availability', template: "<c8y-form-group class=\"p-b-24 m-b-0\">\n  <div class=\"legend form-block\">\n    <span>{{ 'Availability`of dashboard based on permissions`' | translate }}</span>\n  </div>\n  <label for=\"availability\">\n    <span class=\"m-r-4\" id=\"availability\">\n      {{ 'Global roles' | translate }}\n    </span>\n    <button\n      class=\"btn-help btn-help--sm\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{\n        'Select the global roles for which the dashboard will be available' | translate\n      }}\"\n      triggers=\"focus\"\n      placement=\"right\"\n      container=\"body\"\n    >\n    </button>\n  </label>\n  <c8y-select\n    style=\"width: 180px\"\n    [items]=\"globalRolesItems\"\n    [selected]=\"globalRolesItemsSelected\"\n    (onChange)=\"onSelected($event)\"\n  ></c8y-select>\n</c8y-form-group>\n" }]
         }], ctorParameters: function () { return [{ type: i1.UserGroupService }, { type: i5.GainsightService }]; }, propDecorators: { globalRolesIds: [{
                 type: Input
             }], globalRolesIdsChange: [{
@@ -949,10 +949,10 @@ class DashboardDetailComponent {
     }
 }
 DashboardDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DashboardDetailComponent, deps: [{ token: i3$1.BsModalRef }, { token: ContextDashboardService }, { token: i5.NavigatorService }, { token: i5.Permissions }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DashboardDetailComponent, selector: "c8y-dashboard-detail", viewQueries: [{ propertyName: "dashboardDetailForm", first: true, predicate: ["dashboardDetailForm"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header separator-bottom\">\n    <h3 id=\"modal-title\">{{ title | translate }}</h3>\n  </div>\n\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"p-l-24 p-r-24\">\n      <form\n        class=\"d-contents\"\n        #dashboardDetailForm=\"ngForm\"\n      >\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <div *ngIf=\"!isNamedDashboard || isReport\">\n              <div class=\"legend form-block\">\n                <span>{{ 'General' | translate }}</span>\n              </div>\n              <div class=\"d-flex\">\n                <c8y-icon-selector-wrapper\n                  [selectedIcon]=\"dashboard.icon || 'th'\"\n                  (onSelect)=\"selectIcon($event)\"\n                ></c8y-icon-selector-wrapper>\n                <c8y-form-group class=\"flex-grow\">\n                  <label>\n                    <span\n                      class=\"m-r-4\"\n                      id=\"menuLabel\"\n                    >\n                      {{ 'Menu label' | translate }}\n                    </span>\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'Menu label to display in submenu when dashboard is attached' | translate\n                      }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button>\n                  </label>\n                  <input\n                    class=\"form-control\"\n                    id=\"menuLabel\"\n                    placeholder=\"{{ namePlaceholder | translate }}\"\n                    name=\"name\"\n                    type=\"text\"\n                    required\n                    [(ngModel)]=\"dashboardName\"\n                    maxlength=\"512\"\n                  />\n                </c8y-form-group>\n              </div>\n              <c8y-form-group *ngIf=\"isReport\">\n                <label id=\"description\">{{ 'Description ' | translate }}</label>\n                <textarea\n                  class=\"form-control\"\n                  aria-labelledby=\"description\"\n                  name=\"description\"\n                  rows=\"2\"\n                  [(ngModel)]=\"dashboard.description\"\n                ></textarea>\n              </c8y-form-group>\n              <div class=\"row\">\n                <div\n                  class=\"col-sm-6\"\n                  *ngIf=\"!isReport\"\n                >\n                  <c8y-form-group>\n                    <label for=\"positionNav\">\n                      <span\n                        class=\"m-r-4\"\n                        id=\"positionNav\"\n                      >\n                        {{ 'Position in navigation' | translate }}\n                      </span>\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        popover=\"{{\n                          'Position in navigation menu (10000 first, -10000 last)' | translate\n                        }}\"\n                        placement=\"right\"\n                        triggers=\"focus\"\n                        container=\"body\"\n                        type=\"button\"\n                      ></button>\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"positionNav\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                      name=\"priority\"\n                      type=\"number\"\n                      required\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"10000\"\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div\n                  class=\"col-sm-6\"\n                  *ngIf=\"isReport\"\n                >\n                  <label translate>Navigator menu item</label>\n                  <c8y-form-group>\n                    <label\n                      class=\"c8y-checkbox\"\n                      title=\"{{ 'Show in navigator' | translate }}\"\n                    >\n                      <input\n                        name=\"isNavigatorNode\"\n                        type=\"checkbox\"\n                        [(ngModel)]=\"!!dashboard.c8y_IsNavigatorNode\"\n                      />\n                      <span></span>\n                      <span>{{ 'Show in navigator' | translate }}</span>\n                    </label>\n                  </c8y-form-group>\n                </div>\n                <div\n                  class=\"col-sm-6\"\n                  *ngIf=\"isReport\"\n                >\n                  <c8y-form-group>\n                    <label for=\"position\">\n                      <span class=\"m-r-4\">{{ 'Position in navigator' | translate }}</span>\n                      <ng-template #positionInNavPop>\n                        <span>\n                          {{\n                            'Position in navigator (10001 first, -10000 last).' | translate\n                          }}&nbsp;\n                          {{ 'Existing nodes:' | translate }}\n                        </span>\n                        <ul class=\"list-unstyled m-t-16\">\n                          <li *ngFor=\"let node of navigatorNodes$ | async\">\n                            <i [c8yIcon]=\"node.icon\"></i>\n                            <span class=\"word-break m-l-4 m-r-16\">\n                              {{\n                                node.label.length > 15\n                                  ? (node.label | slice: 0:15) + '...'\n                                  : node.label\n                              }}\n                            </span>\n                            <span class=\"pull-right\">{{ node.priority }}</span>\n                          </li>\n                        </ul>\n                      </ng-template>\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        [popover]=\"positionInNavPop\"\n                        placement=\"right\"\n                        triggers=\"focus\"\n                        container=\"body\"\n                        type=\"button\"\n                      ></button>\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                      name=\"priority\"\n                      for=\"position\"\n                      type=\"number\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"20000\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n\n              <div *ngIf=\"!currentDashboard && deviceType\">\n                <div class=\"form-group\">\n                  <label\n                    class=\"c8y-checkbox\"\n                    title=\"{{ applyToDevicesOfTypeTitle }}\"\n                  >\n                    <input\n                      name=\"deviceType\"\n                      type=\"checkbox\"\n                      [(ngModel)]=\"dashboard.deviceType\"\n                      [disabled]=\"!applyToDevicesOfTypePermitted\"\n                    />\n                    <span></span>\n                    <span\n                      class=\"m-r-4\"\n                      [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n                      ngNonBindable\n                      translate\n                    >\n                      Apply dashboard to all devices of type\n                      <i>{{ type }}</i>\n                    </span>\n                  </label>\n                </div>\n\n                <div\n                  class=\"alert alert-info m-b-24\"\n                  *ngIf=\"isDeviceType\"\n                >\n                  <i c8y-icon=\"info\"></i>\n                  <span\n                    translate\n                    [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n                    ngNonBindable\n                  >\n                    This dashboard is shared between all devices of the type\n                    <i>{{ type }}</i>\n                    .\n                  </span>\n                </div>\n              </div>\n            </div>\n            <c8y-dashboard-availability\n              *ngIf=\"!!isReport === false\"\n              [(globalRolesIds)]=\"globalRolesIds\"\n              (globalRolesIdsChange)=\"dashboardDetailForm?.form?.markAsDirty()\"\n            ></c8y-dashboard-availability>\n            <c8y-appearance-settings\n              [(themeClass)]=\"styling.themeClass\"\n              [(headerClass)]=\"styling.headerClass\"\n            ></c8y-appearance-settings>\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group class=\"p-b-24 m-b-0\">\n                  <label for=\"margin\">{{ 'Widget margin' | translate }}</label>\n                  <div class=\"input-group\">\n                    <input\n                      class=\"form-control\"\n                      id=\"margin\"\n                      placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n                      name=\"margin\"\n                      type=\"number\"\n                      [(ngModel)]=\"dashboard.widgetMargin\"\n                      min=\"0\"\n                      max=\"50\"\n                    />\n                    <span class=\"input-group-addon\">px</span>\n                  </div>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-sm-6\">\n                <c8y-form-group class=\"p-b-24 m-b-0\">\n                  <label translate>Widget titles</label>\n                  <label\n                    class=\"c8y-checkbox\"\n                    title=\"{{ 'Translate if possible' | translate }}\"\n                  >\n                    <input\n                      name=\"translateWidgetTitle\"\n                      type=\"checkbox\"\n                      [(ngModel)]=\"dashboard.translateWidgetTitle\"\n                    />\n                    <span></span>\n                    <span>{{ 'Translate if possible' | translate }}</span>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-sm-6\">\n            <c8y-widget-preview\n              [tab]=\"!isNamedDashboard ? dashboard : undefined\"\n              [previewClasses]=\"getDashboardPreviewStyle()\"\n            ></c8y-widget-preview>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      (click)=\"save()\"\n      [disabled]=\"dashboardDetailForm.form.invalid || dashboardDetailForm.form.pristine\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i5.MaxValidationDirective, selector: "[max]", inputs: ["max"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i5.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.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: i8.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "possibleStylingTheme", "possibleStylingHeader"], outputs: ["themeClassChange", "headerClassChange"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses", "tab"] }, { kind: "component", type: DashboardAvailabilityComponent, selector: "c8y-dashboard-availability", inputs: ["globalRolesIds"], outputs: ["globalRolesIdsChange"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.SlicePipe, name: "slice" }] });
+DashboardDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DashboardDetailComponent, selector: "c8y-dashboard-detail", viewQueries: [{ propertyName: "dashboardDetailForm", first: true, predicate: ["dashboardDetailForm"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header separator-bottom\">\n    <h3 id=\"modal-title\">{{ title | translate }}</h3>\n  </div>\n\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"p-l-24 p-r-24\">\n      <form\n        class=\"d-contents\"\n        #dashboardDetailForm=\"ngForm\"\n      >\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <div *ngIf=\"!isNamedDashboard || isReport\">\n              <div class=\"legend form-block\">\n                <span>{{ 'General' | translate }}</span>\n              </div>\n              <div class=\"d-flex\">\n                <c8y-icon-selector-wrapper\n                  [selectedIcon]=\"dashboard.icon || 'th'\"\n                  (onSelect)=\"selectIcon($event)\"\n                ></c8y-icon-selector-wrapper>\n                <c8y-form-group class=\"flex-grow\">\n                  <label>\n                    <span\n                      class=\"m-r-4\"\n                      id=\"menuLabel\"\n                    >\n                      {{ 'Menu label' | translate }}\n                    </span>\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'Menu label to display in submenu when dashboard is attached' | translate\n                      }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button>\n                  </label>\n                  <input\n                    class=\"form-control\"\n                    id=\"menuLabel\"\n                    placeholder=\"{{ namePlaceholder | translate }}\"\n                    name=\"name\"\n                    type=\"text\"\n                    required\n                    [(ngModel)]=\"dashboardName\"\n                    maxlength=\"512\"\n                  />\n                </c8y-form-group>\n              </div>\n              <c8y-form-group *ngIf=\"isReport\">\n                <label id=\"description\">{{ 'Description ' | translate }}</label>\n                <textarea\n                  class=\"form-control\"\n                  aria-labelledby=\"description\"\n                  name=\"description\"\n                  rows=\"2\"\n                  [(ngModel)]=\"dashboard.description\"\n                ></textarea>\n              </c8y-form-group>\n              <div class=\"row\">\n                <div\n                  class=\"col-sm-6\"\n                  *ngIf=\"!isReport\"\n                >\n                  <c8y-form-group>\n                    <label for=\"positionNav\">\n                      <span\n                        class=\"m-r-4\"\n                        id=\"positionNav\"\n                      >\n                        {{ 'Position in navigation' | translate }}\n                      </span>\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        popover=\"{{\n                          'Position in navigation menu (10000 first, -10000 last)' | translate\n                        }}\"\n                        placement=\"right\"\n                        triggers=\"focus\"\n                        container=\"body\"\n                        type=\"button\"\n                      ></button>\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"positionNav\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                      name=\"priority\"\n                      type=\"number\"\n                      required\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"10000\"\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div\n                  class=\"col-sm-6\"\n                  *ngIf=\"isReport\"\n                >\n                  <label translate>Navigator menu item</label>\n                  <c8y-form-group>\n                    <label\n                      class=\"c8y-checkbox\"\n                      title=\"{{ 'Show in navigator' | translate }}\"\n                    >\n                      <input\n                        name=\"isNavigatorNode\"\n                        type=\"checkbox\"\n                        [(ngModel)]=\"!!dashboard.c8y_IsNavigatorNode\"\n                      />\n                      <span></span>\n                      <span>{{ 'Show in navigator' | translate }}</span>\n                    </label>\n                  </c8y-form-group>\n                </div>\n                <div\n                  class=\"col-sm-6\"\n                  *ngIf=\"isReport\"\n                >\n                  <c8y-form-group>\n                    <label for=\"position\">\n                      <span class=\"m-r-4\">{{ 'Position in navigator' | translate }}</span>\n                      <ng-template #positionInNavPop>\n                        <span>\n                          {{\n                            'Position in navigator (10001 first, -10000 last).' | translate\n                          }}&nbsp;\n                          {{ 'Existing nodes:' | translate }}\n                        </span>\n                        <ul class=\"list-unstyled m-t-16\">\n                          <li *ngFor=\"let node of navigatorNodes$ | async\">\n                            <i [c8yIcon]=\"node.icon\"></i>\n                            <span class=\"word-break m-l-4 m-r-16\">\n                              {{\n                                node.label.length > 15\n                                  ? (node.label | slice: 0:15) + '...'\n                                  : node.label\n                              }}\n                            </span>\n                            <span class=\"pull-right\">{{ node.priority }}</span>\n                          </li>\n                        </ul>\n                      </ng-template>\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        [popover]=\"positionInNavPop\"\n                        placement=\"right\"\n                        triggers=\"focus\"\n                        container=\"body\"\n                        type=\"button\"\n                      ></button>\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                      name=\"priority\"\n                      for=\"position\"\n                      type=\"number\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"20000\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n\n              <div *ngIf=\"!currentDashboard && deviceType\">\n                <div class=\"form-group\">\n                  <label\n                    class=\"c8y-checkbox\"\n                    title=\"{{ applyToDevicesOfTypeTitle }}\"\n                  >\n                    <input\n                      name=\"deviceType\"\n                      type=\"checkbox\"\n                      [(ngModel)]=\"dashboard.deviceType\"\n                      [disabled]=\"!applyToDevicesOfTypePermitted\"\n                    />\n                    <span></span>\n                    <span\n                      class=\"m-r-4\"\n                      [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n                      ngNonBindable\n                      translate\n                    >\n                      Apply dashboard to all devices of type\n                      <i>{{ type }}</i>\n                    </span>\n                  </label>\n                </div>\n\n                <div\n                  class=\"alert alert-info m-b-24\"\n                  *ngIf=\"isDeviceType\"\n                >\n                  <i c8y-icon=\"info\"></i>\n                  <span\n                    translate\n                    [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n                    ngNonBindable\n                  >\n                    This dashboard is shared between all devices of the type\n                    <i>{{ type }}</i>\n                    .\n                  </span>\n                </div>\n              </div>\n            </div>\n            <c8y-dashboard-availability\n              *ngIf=\"!!isReport === false && !hideAvailability\"\n              [(globalRolesIds)]=\"globalRolesIds\"\n              (globalRolesIdsChange)=\"dashboardDetailForm?.form?.markAsDirty()\"\n            ></c8y-dashboard-availability>\n            <c8y-appearance-settings\n              [(themeClass)]=\"styling.themeClass\"\n              [(headerClass)]=\"styling.headerClass\"\n            ></c8y-appearance-settings>\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group class=\"p-b-24 m-b-0\">\n                  <label for=\"margin\">{{ 'Widget margin' | translate }}</label>\n                  <div class=\"input-group\">\n                    <input\n                      class=\"form-control\"\n                      id=\"margin\"\n                      placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n                      name=\"margin\"\n                      type=\"number\"\n                      [(ngModel)]=\"dashboard.widgetMargin\"\n                      min=\"0\"\n                      max=\"50\"\n                    />\n                    <span class=\"input-group-addon\">px</span>\n                  </div>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-sm-6\">\n                <c8y-form-group class=\"p-b-24 m-b-0\">\n                  <label translate>Widget titles</label>\n                  <label\n                    class=\"c8y-checkbox\"\n                    title=\"{{ 'Translate if possible' | translate }}\"\n                  >\n                    <input\n                      name=\"translateWidgetTitle\"\n                      type=\"checkbox\"\n                      [(ngModel)]=\"dashboard.translateWidgetTitle\"\n                    />\n                    <span></span>\n                    <span>{{ 'Translate if possible' | translate }}</span>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-sm-6\">\n            <c8y-widget-preview\n              [tab]=\"!isNamedDashboard ? dashboard : undefined\"\n              [previewClasses]=\"getDashboardPreviewStyle()\"\n            ></c8y-widget-preview>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      (click)=\"save()\"\n      [disabled]=\"dashboardDetailForm.form.invalid || dashboardDetailForm.form.pristine\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i5.MaxValidationDirective, selector: "[max]", inputs: ["max"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i5.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.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: i8.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "possibleStylingTheme", "possibleStylingHeader"], outputs: ["themeClassChange", "headerClassChange"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses", "tab"] }, { kind: "component", type: DashboardAvailabilityComponent, selector: "c8y-dashboard-availability", inputs: ["globalRolesIds"], outputs: ["globalRolesIdsChange"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.SlicePipe, name: "slice" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DashboardDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-dashboard-detail', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header separator-bottom\">\n    <h3 id=\"modal-title\">{{ title | translate }}</h3>\n  </div>\n\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"p-l-24 p-r-24\">\n      <form\n        class=\"d-contents\"\n        #dashboardDetailForm=\"ngForm\"\n      >\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <div *ngIf=\"!isNamedDashboard || isReport\">\n              <div class=\"legend form-block\">\n                <span>{{ 'General' | translate }}</span>\n              </div>\n              <div class=\"d-flex\">\n                <c8y-icon-selector-wrapper\n                  [selectedIcon]=\"dashboard.icon || 'th'\"\n                  (onSelect)=\"selectIcon($event)\"\n                ></c8y-icon-selector-wrapper>\n                <c8y-form-group class=\"flex-grow\">\n                  <label>\n                    <span\n                      class=\"m-r-4\"\n                      id=\"menuLabel\"\n                    >\n                      {{ 'Menu label' | translate }}\n                    </span>\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'Menu label to display in submenu when dashboard is attached' | translate\n                      }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button>\n                  </label>\n                  <input\n                    class=\"form-control\"\n                    id=\"menuLabel\"\n                    placeholder=\"{{ namePlaceholder | translate }}\"\n                    name=\"name\"\n                    type=\"text\"\n                    required\n                    [(ngModel)]=\"dashboardName\"\n                    maxlength=\"512\"\n                  />\n                </c8y-form-group>\n              </div>\n              <c8y-form-group *ngIf=\"isReport\">\n                <label id=\"description\">{{ 'Description ' | translate }}</label>\n                <textarea\n                  class=\"form-control\"\n                  aria-labelledby=\"description\"\n                  name=\"description\"\n                  rows=\"2\"\n                  [(ngModel)]=\"dashboard.description\"\n                ></textarea>\n              </c8y-form-group>\n              <div class=\"row\">\n                <div\n                  class=\"col-sm-6\"\n                  *ngIf=\"!isReport\"\n                >\n                  <c8y-form-group>\n                    <label for=\"positionNav\">\n                      <span\n                        class=\"m-r-4\"\n                        id=\"positionNav\"\n                      >\n                        {{ 'Position in navigation' | translate }}\n                      </span>\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        popover=\"{{\n                          'Position in navigation menu (10000 first, -10000 last)' | translate\n                        }}\"\n                        placement=\"right\"\n                        triggers=\"focus\"\n                        container=\"body\"\n                        type=\"button\"\n                      ></button>\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"positionNav\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                      name=\"priority\"\n                      type=\"number\"\n                      required\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"10000\"\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div\n                  class=\"col-sm-6\"\n                  *ngIf=\"isReport\"\n                >\n                  <label translate>Navigator menu item</label>\n                  <c8y-form-group>\n                    <label\n                      class=\"c8y-checkbox\"\n                      title=\"{{ 'Show in navigator' | translate }}\"\n                    >\n                      <input\n                        name=\"isNavigatorNode\"\n                        type=\"checkbox\"\n                        [(ngModel)]=\"!!dashboard.c8y_IsNavigatorNode\"\n                      />\n                      <span></span>\n                      <span>{{ 'Show in navigator' | translate }}</span>\n                    </label>\n                  </c8y-form-group>\n                </div>\n                <div\n                  class=\"col-sm-6\"\n                  *ngIf=\"isReport\"\n                >\n                  <c8y-form-group>\n                    <label for=\"position\">\n                      <span class=\"m-r-4\">{{ 'Position in navigator' | translate }}</span>\n                      <ng-template #positionInNavPop>\n                        <span>\n                          {{\n                            'Position in navigator (10001 first, -10000 last).' | translate\n                          }}&nbsp;\n                          {{ 'Existing nodes:' | translate }}\n                        </span>\n                        <ul class=\"list-unstyled m-t-16\">\n                          <li *ngFor=\"let node of navigatorNodes$ | async\">\n                            <i [c8yIcon]=\"node.icon\"></i>\n                            <span class=\"word-break m-l-4 m-r-16\">\n                              {{\n                                node.label.length > 15\n                                  ? (node.label | slice: 0:15) + '...'\n                                  : node.label\n                              }}\n                            </span>\n                            <span class=\"pull-right\">{{ node.priority }}</span>\n                          </li>\n                        </ul>\n                      </ng-template>\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        [popover]=\"positionInNavPop\"\n                        placement=\"right\"\n                        triggers=\"focus\"\n                        container=\"body\"\n                        type=\"button\"\n                      ></button>\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                      name=\"priority\"\n                      for=\"position\"\n                      type=\"number\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"20000\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n\n              <div *ngIf=\"!currentDashboard && deviceType\">\n                <div class=\"form-group\">\n                  <label\n                    class=\"c8y-checkbox\"\n                    title=\"{{ applyToDevicesOfTypeTitle }}\"\n                  >\n                    <input\n                      name=\"deviceType\"\n                      type=\"checkbox\"\n                      [(ngModel)]=\"dashboard.deviceType\"\n                      [disabled]=\"!applyToDevicesOfTypePermitted\"\n                    />\n                    <span></span>\n                    <span\n                      class=\"m-r-4\"\n                      [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n                      ngNonBindable\n                      translate\n                    >\n                      Apply dashboard to all devices of type\n                      <i>{{ type }}</i>\n                    </span>\n                  </label>\n                </div>\n\n                <div\n                  class=\"alert alert-info m-b-24\"\n                  *ngIf=\"isDeviceType\"\n                >\n                  <i c8y-icon=\"info\"></i>\n                  <span\n                    translate\n                    [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n                    ngNonBindable\n                  >\n                    This dashboard is shared between all devices of the type\n                    <i>{{ type }}</i>\n                    .\n                  </span>\n                </div>\n              </div>\n            </div>\n            <c8y-dashboard-availability\n              *ngIf=\"!!isReport === false\"\n              [(globalRolesIds)]=\"globalRolesIds\"\n              (globalRolesIdsChange)=\"dashboardDetailForm?.form?.markAsDirty()\"\n            ></c8y-dashboard-availability>\n            <c8y-appearance-settings\n              [(themeClass)]=\"styling.themeClass\"\n              [(headerClass)]=\"styling.headerClass\"\n            ></c8y-appearance-settings>\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group class=\"p-b-24 m-b-0\">\n                  <label for=\"margin\">{{ 'Widget margin' | translate }}</label>\n                  <div class=\"input-group\">\n                    <input\n                      class=\"form-control\"\n                      id=\"margin\"\n                      placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n                      name=\"margin\"\n                      type=\"number\"\n                      [(ngModel)]=\"dashboard.widgetMargin\"\n                      min=\"0\"\n                      max=\"50\"\n                    />\n                    <span class=\"input-group-addon\">px</span>\n                  </div>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-sm-6\">\n                <c8y-form-group class=\"p-b-24 m-b-0\">\n                  <label translate>Widget titles</label>\n                  <label\n                    class=\"c8y-checkbox\"\n                    title=\"{{ 'Translate if possible' | translate }}\"\n                  >\n                    <input\n                      name=\"translateWidgetTitle\"\n                      type=\"checkbox\"\n                      [(ngModel)]=\"dashboard.translateWidgetTitle\"\n                    />\n                    <span></span>\n                    <span>{{ 'Translate if possible' | translate }}</span>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-sm-6\">\n            <c8y-widget-preview\n              [tab]=\"!isNamedDashboard ? dashboard : undefined\"\n              [previewClasses]=\"getDashboardPreviewStyle()\"\n            ></c8y-widget-preview>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      (click)=\"save()\"\n      [disabled]=\"dashboardDetailForm.form.invalid || dashboardDetailForm.form.pristine\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-dashboard-detail', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header separator-bottom\">\n    <h3 id=\"modal-title\">{{ title | translate }}</h3>\n  </div>\n\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"p-l-24 p-r-24\">\n      <form\n        class=\"d-contents\"\n        #dashboardDetailForm=\"ngForm\"\n      >\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <div *ngIf=\"!isNamedDashboard || isReport\">\n              <div class=\"legend form-block\">\n                <span>{{ 'General' | translate }}</span>\n              </div>\n              <div class=\"d-flex\">\n                <c8y-icon-selector-wrapper\n                  [selectedIcon]=\"dashboard.icon || 'th'\"\n                  (onSelect)=\"selectIcon($event)\"\n                ></c8y-icon-selector-wrapper>\n                <c8y-form-group class=\"flex-grow\">\n                  <label>\n                    <span\n                      class=\"m-r-4\"\n                      id=\"menuLabel\"\n                    >\n                      {{ 'Menu label' | translate }}\n                    </span>\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'Menu label to display in submenu when dashboard is attached' | translate\n                      }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button>\n                  </label>\n                  <input\n                    class=\"form-control\"\n                    id=\"menuLabel\"\n                    placeholder=\"{{ namePlaceholder | translate }}\"\n                    name=\"name\"\n                    type=\"text\"\n                    required\n                    [(ngModel)]=\"dashboardName\"\n                    maxlength=\"512\"\n                  />\n                </c8y-form-group>\n              </div>\n              <c8y-form-group *ngIf=\"isReport\">\n                <label id=\"description\">{{ 'Description ' | translate }}</label>\n                <textarea\n                  class=\"form-control\"\n                  aria-labelledby=\"description\"\n                  name=\"description\"\n                  rows=\"2\"\n                  [(ngModel)]=\"dashboard.description\"\n                ></textarea>\n              </c8y-form-group>\n              <div class=\"row\">\n                <div\n                  class=\"col-sm-6\"\n                  *ngIf=\"!isReport\"\n                >\n                  <c8y-form-group>\n                    <label for=\"positionNav\">\n                      <span\n                        class=\"m-r-4\"\n                        id=\"positionNav\"\n                      >\n                        {{ 'Position in navigation' | translate }}\n                      </span>\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        popover=\"{{\n                          'Position in navigation menu (10000 first, -10000 last)' | translate\n                        }}\"\n                        placement=\"right\"\n                        triggers=\"focus\"\n                        container=\"body\"\n                        type=\"button\"\n                      ></button>\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"positionNav\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                      name=\"priority\"\n                      type=\"number\"\n                      required\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"10000\"\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div\n                  class=\"col-sm-6\"\n                  *ngIf=\"isReport\"\n                >\n                  <label translate>Navigator menu item</label>\n                  <c8y-form-group>\n                    <label\n                      class=\"c8y-checkbox\"\n                      title=\"{{ 'Show in navigator' | translate }}\"\n                    >\n                      <input\n                        name=\"isNavigatorNode\"\n                        type=\"checkbox\"\n                        [(ngModel)]=\"!!dashboard.c8y_IsNavigatorNode\"\n                      />\n                      <span></span>\n                      <span>{{ 'Show in navigator' | translate }}</span>\n                    </label>\n                  </c8y-form-group>\n                </div>\n                <div\n                  class=\"col-sm-6\"\n                  *ngIf=\"isReport\"\n                >\n                  <c8y-form-group>\n                    <label for=\"position\">\n                      <span class=\"m-r-4\">{{ 'Position in navigator' | translate }}</span>\n                      <ng-template #positionInNavPop>\n                        <span>\n                          {{\n                            'Position in navigator (10001 first, -10000 last).' | translate\n                          }}&nbsp;\n                          {{ 'Existing nodes:' | translate }}\n                        </span>\n                        <ul class=\"list-unstyled m-t-16\">\n                          <li *ngFor=\"let node of navigatorNodes$ | async\">\n                            <i [c8yIcon]=\"node.icon\"></i>\n                            <span class=\"word-break m-l-4 m-r-16\">\n                              {{\n                                node.label.length > 15\n                                  ? (node.label | slice: 0:15) + '...'\n                                  : node.label\n                              }}\n                            </span>\n                            <span class=\"pull-right\">{{ node.priority }}</span>\n                          </li>\n                        </ul>\n                      </ng-template>\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        [popover]=\"positionInNavPop\"\n                        placement=\"right\"\n                        triggers=\"focus\"\n                        container=\"body\"\n                        type=\"button\"\n                      ></button>\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                      name=\"priority\"\n                      for=\"position\"\n                      type=\"number\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"20000\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n\n              <div *ngIf=\"!currentDashboard && deviceType\">\n                <div class=\"form-group\">\n                  <label\n                    class=\"c8y-checkbox\"\n                    title=\"{{ applyToDevicesOfTypeTitle }}\"\n                  >\n                    <input\n                      name=\"deviceType\"\n                      type=\"checkbox\"\n                      [(ngModel)]=\"dashboard.deviceType\"\n                      [disabled]=\"!applyToDevicesOfTypePermitted\"\n                    />\n                    <span></span>\n                    <span\n                      class=\"m-r-4\"\n                      [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n                      ngNonBindable\n                      translate\n                    >\n                      Apply dashboard to all devices of type\n                      <i>{{ type }}</i>\n                    </span>\n                  </label>\n                </div>\n\n                <div\n                  class=\"alert alert-info m-b-24\"\n                  *ngIf=\"isDeviceType\"\n                >\n                  <i c8y-icon=\"info\"></i>\n                  <span\n                    translate\n                    [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n                    ngNonBindable\n                  >\n                    This dashboard is shared between all devices of the type\n                    <i>{{ type }}</i>\n                    .\n                  </span>\n                </div>\n              </div>\n            </div>\n            <c8y-dashboard-availability\n              *ngIf=\"!!isReport === false && !hideAvailability\"\n              [(globalRolesIds)]=\"globalRolesIds\"\n              (globalRolesIdsChange)=\"dashboardDetailForm?.form?.markAsDirty()\"\n            ></c8y-dashboard-availability>\n            <c8y-appearance-settings\n              [(themeClass)]=\"styling.themeClass\"\n              [(headerClass)]=\"styling.headerClass\"\n            ></c8y-appearance-settings>\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group class=\"p-b-24 m-b-0\">\n                  <label for=\"margin\">{{ 'Widget margin' | translate }}</label>\n                  <div class=\"input-group\">\n                    <input\n                      class=\"form-control\"\n                      id=\"margin\"\n                      placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n                      name=\"margin\"\n                      type=\"number\"\n                      [(ngModel)]=\"dashboard.widgetMargin\"\n                      min=\"0\"\n                      max=\"50\"\n                    />\n                    <span class=\"input-group-addon\">px</span>\n                  </div>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-sm-6\">\n                <c8y-form-group class=\"p-b-24 m-b-0\">\n                  <label translate>Widget titles</label>\n                  <label\n                    class=\"c8y-checkbox\"\n                    title=\"{{ 'Translate if possible' | translate }}\"\n                  >\n                    <input\n                      name=\"translateWidgetTitle\"\n                      type=\"checkbox\"\n                      [(ngModel)]=\"dashboard.translateWidgetTitle\"\n                    />\n                    <span></span>\n                    <span>{{ 'Translate if possible' | translate }}</span>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-sm-6\">\n            <c8y-widget-preview\n              [tab]=\"!isNamedDashboard ? dashboard : undefined\"\n              [previewClasses]=\"getDashboardPreviewStyle()\"\n            ></c8y-widget-preview>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      (click)=\"save()\"\n      [disabled]=\"dashboardDetailForm.form.invalid || dashboardDetailForm.form.pristine\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i3$1.BsModalRef }, { type: ContextDashboardService }, { type: i5.NavigatorService }, { type: i5.Permissions }, { type: i3.TranslateService }]; }, propDecorators: { dashboardDetailForm: [{
                 type: ViewChild,
                 args: ['dashboardDetailForm', { static: true }]
@@ -1422,6 +1422,10 @@ class ContextDashboardComponent {
         this.canDelete = true;
         this.isLoading = true;
         this.showContextHelpButton = true;
+        /**
+         * Hides dashboard availability selection.
+         */
+        this.hideAvailability = false;
         this.class = '';
         this.widgets = [];
     }
@@ -1535,6 +1539,7 @@ class ContextDashboardComponent {
             deviceType: this.context.type,
             isDeviceType: this.contextDashboardService.isDeviceType(this.mo),
             isNamedDashboard: this.contextDashboardService.isNamed(this.mo),
+            hideAvailability: this.hideAvailability,
             isReport
         };
         const modal = this.bsModal.show(DashboardDetailComponent, {
@@ -1851,7 +1856,7 @@ class ContextDashboardComponent {
     }
 }
 ContextDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ContextDashboardComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: ContextDashboardService }, { token: i5.AlertService }, { token: i0.Renderer2 }, { token: CONTEXT_DASHBOARD_CONFIG }, { token: WidgetService }, { token: i3$1.BsModalService }, { token: i1.InventoryService }, { token: i5.GainsightService }, { token: i5.ActionBarService }, { token: i3.TranslateService }, { token: i5.ModalService }], target: i0.ɵɵFactoryTarget.Component });
-ContextDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: { name: "name", childrenClasses: "childrenClasses", context: "context", setTitle: "setTitle", disabled: "disabled", defaultWidgets: "defaultWidgets", canCopy: "canCopy", canDelete: "canDelete", isLoading: "isLoading", breadcrumbSettings: "breadcrumbSettings", showContextHelpButton: "showContextHelpButton", translateWidgetTitle: "translateWidgetTitle" }, host: { properties: { "class": "this.class" }, styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, ngImport: i0, template: "<c8y-title *ngIf=\"title\">\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-1\"\n  *ngIf=\"defaultWidgets.length > 0\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reset dashboard' | translate }}\"\n    type=\"button\"\n    px-event=\"Reset dashboard\"\n    (click)=\"restore()\"\n    [disabled]=\"dashboard?.isFrozen || disabled\"\n    data-cy=\"context-dashboard--button-reset-dashboard\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"reset\"\n    ></i>\n    {{ 'Reset dashboard' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/users-guide/cockpit/#dashboards\"\n  *ngIf=\"showContextHelpButton\"\n></c8y-help>\n\n<c8y-widgets-dashboard\n  [context]=\"context\"\n  [contextDashboard]=\"dashboard\"\n  [widgets]=\"widgets\"\n  [settings]=\"{\n    isLoading: isLoading,\n    isFrozen: dashboard?.isFrozen,\n    isDisabled: disabled,\n    canDelete: canDelete,\n    translateWidgetTitle: dashboard?.translateWidgetTitle ?? translateWidgetTitle,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard.name || title : undefined,\n    widgetMargin: dashboard?.widgetMargin,\n    canCopy: canCopy,\n    isCopyDisabled: isCopyDisabled,\n    defaultWidth: dashboard?.columns >= 24 ? 8 : 4,\n    columns: dashboard?.columns || 12\n  }\"\n  [breadcrumb]=\"breadcrumbSettings\"\n  (onFreeze)=\"toggleFreeze($event)\"\n  (onChangeDashboard)=\"updateDashboardChildren($event)\"\n  (onAddWidget)=\"addWidget()\"\n  (onEditWidget)=\"editWidget($event)\"\n  (onDeleteWidget)=\"deleteWidget($event)\"\n  (onChangeStart)=\"addDashboardClassToBody()\"\n  (onChangeEnd)=\"removeDashboardClassFromBody()\"\n  (onEditDashboard)=\"editDashboard()\"\n  (onCopyDashboard)=\"copyDashboard()\"\n  (onDeleteDashboard)=\"deleteDashboard()\"\n></c8y-widgets-dashboard>\n", dependencies: [{ kind: "component", type: i5.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i5.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i5.WidgetsDashboardComponent, selector: "c8y-widgets-dashboard", inputs: ["widgets", "context", "contextDashboard", "settings", "breadcrumb"], outputs: ["onAddWidget", "onEditWidget", "onDeleteWidget", "onChangeDashboard", "onEditDashboard", "onCopyDashboard", "onDeleteDashboard", "onFreeze", "onChangeStart", "onChangeEnd"] }, { kind: "component", type: i5.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }] });
+ContextDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: { name: "name", childrenClasses: "childrenClasses", context: "context", setTitle: "setTitle", disabled: "disabled", defaultWidgets: "defaultWidgets", canCopy: "canCopy", canDelete: "canDelete", isLoading: "isLoading", breadcrumbSettings: "breadcrumbSettings", showContextHelpButton: "showContextHelpButton", translateWidgetTitle: "translateWidgetTitle", hideAvailability: "hideAvailability" }, host: { properties: { "class": "this.class" }, styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, ngImport: i0, template: "<c8y-title *ngIf=\"title\">\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-1\"\n  *ngIf=\"defaultWidgets.length > 0\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reset dashboard' | translate }}\"\n    type=\"button\"\n    px-event=\"Reset dashboard\"\n    (click)=\"restore()\"\n    [disabled]=\"dashboard?.isFrozen || disabled\"\n    data-cy=\"context-dashboard--button-reset-dashboard\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"reset\"\n    ></i>\n    {{ 'Reset dashboard' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/users-guide/cockpit/#dashboards\"\n  *ngIf=\"showContextHelpButton\"\n></c8y-help>\n\n<c8y-widgets-dashboard\n  [context]=\"context\"\n  [contextDashboard]=\"dashboard\"\n  [widgets]=\"widgets\"\n  [settings]=\"{\n    isLoading: isLoading,\n    isFrozen: dashboard?.isFrozen,\n    isDisabled: disabled,\n    canDelete: canDelete,\n    translateWidgetTitle: dashboard?.translateWidgetTitle ?? translateWidgetTitle,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard.name || title : undefined,\n    widgetMargin: dashboard?.widgetMargin,\n    canCopy: canCopy,\n    isCopyDisabled: isCopyDisabled,\n    defaultWidth: dashboard?.columns >= 24 ? 8 : 4,\n    columns: dashboard?.columns || 12\n  }\"\n  [breadcrumb]=\"breadcrumbSettings\"\n  (onFreeze)=\"toggleFreeze($event)\"\n  (onChangeDashboard)=\"updateDashboardChildren($event)\"\n  (onAddWidget)=\"addWidget()\"\n  (onEditWidget)=\"editWidget($event)\"\n  (onDeleteWidget)=\"deleteWidget($event)\"\n  (onChangeStart)=\"addDashboardClassToBody()\"\n  (onChangeEnd)=\"removeDashboardClassFromBody()\"\n  (onEditDashboard)=\"editDashboard()\"\n  (onCopyDashboard)=\"copyDashboard()\"\n  (onDeleteDashboard)=\"deleteDashboard()\"\n></c8y-widgets-dashboard>\n", dependencies: [{ kind: "component", type: i5.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i5.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i5.WidgetsDashboardComponent, selector: "c8y-widgets-dashboard", inputs: ["widgets", "context", "contextDashboard", "settings", "breadcrumb"], outputs: ["onAddWidget", "onEditWidget", "onDeleteWidget", "onChangeDashboard", "onEditDashboard", "onCopyDashboard", "onDeleteDashboard", "onFreeze", "onChangeStart", "onChangeEnd"] }, { kind: "component", type: i5.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ContextDashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-context-dashboard', host: {
@@ -1887,6 +1892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], translateWidgetTitle: [{
                 type: Input
+            }], hideAvailability: [{
+                type: Input
             }], class: [{
                 type: HostBinding,
                 args: ['class']
@@ -1925,10 +1932,10 @@ class CockpitDashboardComponent {
     }
 }
 CockpitDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CockpitDashboardComponent, deps: [{ token: i5.AppStateService }, { token: COCKPIT_HOME_DASHBOARD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CockpitDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CockpitDashboardComponent, selector: "c8y-cockpit-dashboard", ngImport: i0, template: "<c8y-title>\n  {{ pageTitle | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n></c8y-context-dashboard>\n", dependencies: [{ kind: "component", type: i5.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "disabled", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }] });
+CockpitDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CockpitDashboardComponent, selector: "c8y-cockpit-dashboard", ngImport: i0, template: "<c8y-title>\n  {{ pageTitle | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n  [hideAvailability]=\"true\"\n></c8y-context-dashboard>\n", dependencies: [{ kind: "component", type: i5.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "disabled", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle", "hideAvailability"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CockpitDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-cockpit-dashboard', template: "<c8y-title>\n  {{ pageTitle | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n></c8y-context-dashboard>\n" }]
+            args: [{ selector: 'c8y-cockpit-dashboard', template: "<c8y-title>\n  {{ pageTitle | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n  [hideAvailability]=\"true\"\n></c8y-context-dashboard>\n" }]
         }], ctorParameters: function () { return [{ type: i5.AppStateService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -2267,15 +2274,15 @@ class DeviceInfoDashboardComponent {
                 _x: 0,
                 _y: 0,
                 _height: 5,
-                _width: 4
+                _width: 8
             },
             {
                 name: 'Data points graph',
                 title: gettext('Device and communication'),
-                _x: 4,
+                _x: 8,
                 _y: 0,
                 _height: 5,
-                _width: 8,
+                _width: 16,
                 config: {
                     interval: 'hours',
                     aggregation: 'NONE',
@@ -2443,15 +2450,15 @@ class DeviceInfoDashboardComponent {
                 _x: 0,
                 _y: 5,
                 _height: 8,
-                _width: 4
+                _width: 8
             },
             {
                 name: 'Alarm list',
                 title: gettext('Active, critical alarms'),
-                _x: 4,
+                _x: 8,
                 _y: 5,
                 _height: 4,
-                _width: 4,
+                _width: 8,
                 config: {
                     options: {
                         orderMode: 'ACTIVE_FIRST',
@@ -2468,18 +2475,18 @@ class DeviceInfoDashboardComponent {
             {
                 name: 'deviceGroupAssignmentWidget',
                 title: gettext('Group assignment'),
-                _x: 8,
+                _x: 16,
                 _y: 5,
                 _height: 4,
-                _width: 4
+                _width: 8
             },
             {
                 componentId: 'Map',
                 title: gettext('Location'),
-                _x: 4,
+                _x: 8,
                 _y: 9,
                 _height: 4,
-                _width: 8
+                _width: 16
             }
         ];
     }
@@ -2526,10 +2533,10 @@ class DeviceInfoDashboardComponent {
     }
 }
 DeviceInfoDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DeviceInfoDashboardComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: WidgetService }, { token: i3.TranslateService }, { token: i1.InventoryService }], target: i0.ɵɵFactoryTarget.Component });
-DeviceInfoDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DeviceInfoDashboardComponent, selector: "c8y-device-info-dashboard-dashboard", ngImport: i0, template: "<div *ngIf=\"!isLoading\">\n  <c8y-title>\n    {{ title }}\n  </c8y-title>\n  <c8y-context-dashboard\n    [translateWidgetTitle]=\"true\"\n    [name]=\"dashboardName\"\n    [context]=\"currentContext\"\n    [defaultWidgets]=\"widgetsList\"\n    [canDelete]=\"false\"\n  ></c8y-context-dashboard>\n</div>\n", dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "disabled", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle"] }] });
+DeviceInfoDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DeviceInfoDashboardComponent, selector: "c8y-device-info-dashboard-dashboard", ngImport: i0, template: "<div *ngIf=\"!isLoading\">\n  <c8y-title>\n    {{ title }}\n  </c8y-title>\n  <c8y-context-dashboard\n    [translateWidgetTitle]=\"true\"\n    [name]=\"dashboardName\"\n    [context]=\"currentContext\"\n    [defaultWidgets]=\"widgetsList\"\n    [canDelete]=\"false\"\n    [hideAvailability]=\"true\"\n  ></c8y-context-dashboard>\n</div>\n", dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "disabled", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle", "hideAvailability"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DeviceInfoDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-device-info-dashboard-dashboard', template: "<div *ngIf=\"!isLoading\">\n  <c8y-title>\n    {{ title }}\n  </c8y-title>\n  <c8y-context-dashboard\n    [translateWidgetTitle]=\"true\"\n    [name]=\"dashboardName\"\n    [context]=\"currentContext\"\n    [defaultWidgets]=\"widgetsList\"\n    [canDelete]=\"false\"\n  ></c8y-context-dashboard>\n</div>\n" }]
+            args: [{ selector: 'c8y-device-info-dashboard-dashboard', template: "<div *ngIf=\"!isLoading\">\n  <c8y-title>\n    {{ title }}\n  </c8y-title>\n  <c8y-context-dashboard\n    [translateWidgetTitle]=\"true\"\n    [name]=\"dashboardName\"\n    [context]=\"currentContext\"\n    [defaultWidgets]=\"widgetsList\"\n    [canDelete]=\"false\"\n    [hideAvailability]=\"true\"\n  ></c8y-context-dashboard>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: WidgetService }, { type: i3.TranslateService }, { type: i1.InventoryService }]; } });
 
 class DeviceInfoDashboardModule {
@@ -2599,10 +2606,10 @@ class DeviceManagementHomeDashboardComponent {
     }
 }
 DeviceManagementHomeDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DeviceManagementHomeDashboardComponent, deps: [{ token: WidgetService }], target: i0.ɵɵFactoryTarget.Component });
-DeviceManagementHomeDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DeviceManagementHomeDashboardComponent, selector: "c8y-device-management-home-dashboard", ngImport: i0, template: "<c8y-title>\n  {{ 'Home' | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n></c8y-context-dashboard>\n", dependencies: [{ kind: "component", type: i5.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "disabled", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }] });
+DeviceManagementHomeDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DeviceManagementHomeDashboardComponent, selector: "c8y-device-management-home-dashboard", ngImport: i0, template: "<c8y-title>\n  {{ 'Home' | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n  [hideAvailability]=\"true\"\n></c8y-context-dashboard>\n", dependencies: [{ kind: "component", type: i5.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "disabled", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle", "hideAvailability"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DeviceManagementHomeDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-device-management-home-dashboard', template: "<c8y-title>\n  {{ 'Home' | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n></c8y-context-dashboard>\n" }]
+            args: [{ selector: 'c8y-device-management-home-dashboard', template: "<c8y-title>\n  {{ 'Home' | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n  [hideAvailability]=\"true\"\n></c8y-context-dashboard>\n" }]
         }], ctorParameters: function () { return [{ type: WidgetService }]; } });
 
 class DeviceManagementHomeDashboardModule {