@c8y/ngx-components 1017.0.8 → 1017.0.10

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

@@ -648,10 +648,10 @@ class WidgetPreviewComponent {
     }
 }
 WidgetPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WidgetPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: { previewClasses: "previewClasses", tab: "tab" }, ngImport: i0, template: "<div class=\"legend form-block\" translate>Preview</div>\n<label *ngIf=\"tab\" translate>Tab and layout</label>\n<label *ngIf=\"!tab\" translate>Layout</label>\n<div class=\"dashboard-preview-slot\" [ngClass]=\"previewClasses\">\n  <div\n    class=\"page-tabs page-tabs-horizontal navigator-open p-absolute overflow-hidden\"\n    style=\"left: 0; margin: 0 15px\"\n    *ngIf=\"tab\"\n  >\n    <div class=\"tabContainer hidden-xs\">\n      <ul role=\"menu\" class=\"nav nav-tabs nav-tabsc8y\">\n        <li role=\"menuitem\" class=\"active\" style=\"left: 16px\">\n          <a routerlinkactive=\"\" title=\"{{ tab.name }}\">\n            <i class=\"text-primary\" [c8yIcon]=\"tab.icon\"></i>\n            <span class=\"txt\">{{ tab.name }}</span>\n          </a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"visible-xs mobile-tabs\"></div>\n  </div>\n  <div [ngClass]=\"{ 'm-t-64': !!tab }\">\n    <div class=\"card card-dashboard\" style=\"height: 360px\">\n      <div class=\"card-header-actions\" style=\"z-index: 8\">\n        <div class=\"card-title\">\n          <span translate>Widget title</span>\n        </div>\n        <div class=\"header-actions\">\n          <div class=\"optionsBtn dropdown\">\n            <button\n              type=\"button\"\n              title=\"{{ 'Settings' | translate }}\"\n              (click)=\"(false)\"\n              class=\"btn btn-dot dropdown-toggle c8y-dropdown\"\n            >\n              <i c8yIcon=\"cog\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"card-inner-scroll p-t-16\">\n        <p translate>Widget example content.</p>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
+WidgetPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: { previewClasses: "previewClasses", tab: "tab" }, ngImport: i0, template: "<div class=\"legend form-block\" translate>Preview</div>\n<label *ngIf=\"tab\" translate>Tab and layout</label>\n<label *ngIf=\"!tab\" translate>Layout</label>\n<div class=\"dashboard-preview-slot\" [ngClass]=\"previewClasses\">\n  <div\n    class=\"page-tabs page-tabs-horizontal navigator-open p-absolute overflow-hidden\"\n    style=\"left: 0; margin: 0 15px\"\n    *ngIf=\"tab\"\n  >\n    <div class=\"tabContainer hidden-xs\">\n      <ul role=\"menu\" class=\"nav nav-tabs nav-tabsc8y\">\n        <li role=\"menuitem\" class=\"active\" style=\"left: 16px\">\n          <a routerlinkactive=\"\" title=\"{{ tab.name }}\">\n            <i class=\"text-primary\" [c8yIcon]=\"tab.icon\"></i>\n            <span class=\"txt\">{{ tab.name }}</span>\n          </a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"visible-xs mobile-tabs\"></div>\n  </div>\n  <div [ngClass]=\"{ 'm-t-64': !!tab }\">\n    <div class=\"card card-dashboard\" style=\"height: 360px\">\n      <div class=\"card-header-actions\" style=\"z-index: 8\">\n        <div class=\"card-title\">\n          <span translate>Widget title</span>\n        </div>\n        <div class=\"header-actions\">\n          <div class=\"optionsBtn dropdown\">\n            <button\n              type=\"button\"\n              title=\"{{ 'Settings' | translate }}\"\n              (click)=\"(false)\"\n              class=\"btn btn-dot dropdown-toggle c8y-dropdown\"\n              aria-haspopup=\"true\"\n            >\n              <i c8yIcon=\"cog\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"card-inner-scroll p-t-16\">\n        <p translate>Widget example content.</p>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-widget-preview', template: "<div class=\"legend form-block\" translate>Preview</div>\n<label *ngIf=\"tab\" translate>Tab and layout</label>\n<label *ngIf=\"!tab\" translate>Layout</label>\n<div class=\"dashboard-preview-slot\" [ngClass]=\"previewClasses\">\n  <div\n    class=\"page-tabs page-tabs-horizontal navigator-open p-absolute overflow-hidden\"\n    style=\"left: 0; margin: 0 15px\"\n    *ngIf=\"tab\"\n  >\n    <div class=\"tabContainer hidden-xs\">\n      <ul role=\"menu\" class=\"nav nav-tabs nav-tabsc8y\">\n        <li role=\"menuitem\" class=\"active\" style=\"left: 16px\">\n          <a routerlinkactive=\"\" title=\"{{ tab.name }}\">\n            <i class=\"text-primary\" [c8yIcon]=\"tab.icon\"></i>\n            <span class=\"txt\">{{ tab.name }}</span>\n          </a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"visible-xs mobile-tabs\"></div>\n  </div>\n  <div [ngClass]=\"{ 'm-t-64': !!tab }\">\n    <div class=\"card card-dashboard\" style=\"height: 360px\">\n      <div class=\"card-header-actions\" style=\"z-index: 8\">\n        <div class=\"card-title\">\n          <span translate>Widget title</span>\n        </div>\n        <div class=\"header-actions\">\n          <div class=\"optionsBtn dropdown\">\n            <button\n              type=\"button\"\n              title=\"{{ 'Settings' | translate }}\"\n              (click)=\"(false)\"\n              class=\"btn btn-dot dropdown-toggle c8y-dropdown\"\n            >\n              <i c8yIcon=\"cog\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"card-inner-scroll p-t-16\">\n        <p translate>Widget example content.</p>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-widget-preview', template: "<div class=\"legend form-block\" translate>Preview</div>\n<label *ngIf=\"tab\" translate>Tab and layout</label>\n<label *ngIf=\"!tab\" translate>Layout</label>\n<div class=\"dashboard-preview-slot\" [ngClass]=\"previewClasses\">\n  <div\n    class=\"page-tabs page-tabs-horizontal navigator-open p-absolute overflow-hidden\"\n    style=\"left: 0; margin: 0 15px\"\n    *ngIf=\"tab\"\n  >\n    <div class=\"tabContainer hidden-xs\">\n      <ul role=\"menu\" class=\"nav nav-tabs nav-tabsc8y\">\n        <li role=\"menuitem\" class=\"active\" style=\"left: 16px\">\n          <a routerlinkactive=\"\" title=\"{{ tab.name }}\">\n            <i class=\"text-primary\" [c8yIcon]=\"tab.icon\"></i>\n            <span class=\"txt\">{{ tab.name }}</span>\n          </a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"visible-xs mobile-tabs\"></div>\n  </div>\n  <div [ngClass]=\"{ 'm-t-64': !!tab }\">\n    <div class=\"card card-dashboard\" style=\"height: 360px\">\n      <div class=\"card-header-actions\" style=\"z-index: 8\">\n        <div class=\"card-title\">\n          <span translate>Widget title</span>\n        </div>\n        <div class=\"header-actions\">\n          <div class=\"optionsBtn dropdown\">\n            <button\n              type=\"button\"\n              title=\"{{ 'Settings' | translate }}\"\n              (click)=\"(false)\"\n              class=\"btn btn-dot dropdown-toggle c8y-dropdown\"\n              aria-haspopup=\"true\"\n            >\n              <i c8yIcon=\"cog\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"card-inner-scroll p-t-16\">\n        <p translate>Widget example content.</p>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { previewClasses: [{
                 type: Input
             }], tab: [{
@@ -835,10 +835,10 @@ class DashboardDetailComponent {
     }
 }
 DashboardDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DashboardDetailComponent, deps: [{ token: i3$1.BsModalRef }, { token: ICON_LIST }, { token: ContextDashboardService }, { token: i2.NavigatorService }, { token: i2.Permissions }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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\">{{ titleAction | translate }}&nbsp;{{ titleName | translate }}</h3>\n  </div>\n\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <div class=\"p-l-24 p-r-24\">\n      <form #dashboardDetailForm=\"ngForm\" class=\"d-contents\">\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-form-group class=\"m-r-16\">\n                  <label class=\"d-block\">{{ 'Icon' | translate }}</label>\n                  <div dropdown class=\"dropdown\">\n                    <button\n                      title=\"{{ 'Icon' | translate }}\"\n                      type=\"button\"\n                      class=\"btn-default btn btn-gray\"\n                      dropdownToggle\n                    >\n                      <i c8yIcon=\"{{ dashboard.icon }}\"></i>\n                      <span class=\"caret\"></span>\n                    </button>\n                    <ul\n                      *dropdownMenu\n                      class=\"dropdown-menu modal-inner-scroll dropdown-menu-grid-4 m-l-0\"\n                      style=\"max-height: 250px\"\n                    >\n                      <ng-container *ngFor=\"let icon of filteredIcons\">\n                        <li (click)=\"selectIcon(icon)\">\n                          <a\n                            class=\"interact\"\n                            title=\"{{ icon }}\"\n                            [ngClass]=\"{ active: dashboard.icon === icon }\"\n                          >\n                            <i class=\"icon\" [c8yIcon]=\"icon\"></i>\n                          </a>\n                        </li>\n                      </ng-container>\n                    </ul>\n                  </div>\n                </c8y-form-group>\n                <c8y-form-group class=\"flex-grow\">\n                  <label>\n                    <span class=\"m-r-4\" id=\"menuLabel\">{{ 'Menu label' | translate }}</span>\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      type=\"button\"\n                      popover=\"{{\n                        'Menu label to display in submenu when dashboard is attached' | translate\n                      }}\"\n                      triggers=\"focus\"\n                      placement=\"right\"\n                      container=\"body\"\n                    >\n                      <i [c8yIcon]=\"'question-circle-o'\"></i>\n                    </button>\n                  </label>\n                  <input\n                    id=\"menuLabel\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"name\"\n                    [(ngModel)]=\"dashboardName\"\n                    placeholder=\"{{ namePlaceholder | translate }}\"\n                    maxlength=\"512\"\n                    required\n                  />\n                </c8y-form-group>\n              </div>\n              <c8y-form-group *ngIf=\"isReport\">\n                <label id=\"description\">{{ 'Description ' | translate }}</label>\n                <textarea\n                  aria-labelledby=\"description\"\n                  class=\"form-control\"\n                  rows=\"2\"\n                  name=\"description\"\n                  [(ngModel)]=\"dashboard.description\"\n                ></textarea>\n              </c8y-form-group>\n              <div class=\"row\">\n                <div class=\"col-sm-6\" *ngIf=\"!isReport\">\n                  <c8y-form-group>\n                    <label for=\"positionNav\">\n                      <span class=\"m-r-4\" id=\"positionNav\">\n                        {{ 'Position in navigation' | translate }}\n                      </span>\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        type=\"button\"\n                        popover=\"{{\n                          'Position in navigation menu (10000 first, -10000 last)' | translate\n                        }}\"\n                        triggers=\"focus\"\n                        placement=\"right\"\n                        container=\"body\"\n                      >\n                        <i [c8yIcon]=\"'question-circle-o'\"></i>\n                      </button>\n                    </label>\n                    <input\n                      id=\"positionNav\"\n                      type=\"number\"\n                      class=\"form-control\"\n                      name=\"priority\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"10000\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                      required\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-sm-6\" *ngIf=\"isReport\">\n                  <label translate>Navigator menu item</label>\n                  <c8y-form-group>\n                    <label title=\"{{ 'Show in navigator' | translate }}\" class=\"c8y-checkbox\">\n                      <input\n                        type=\"checkbox\"\n                        name=\"isNavigatorNode\"\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 class=\"col-sm-6\" *ngIf=\"isReport\">\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                        type=\"button\"\n                        [popover]=\"positionInNavPop\"\n                        triggers=\"focus\"\n                        placement=\"right\"\n                        container=\"body\"\n                      >\n                        <i [c8yIcon]=\"'question-circle-o'\"></i>\n                      </button>\n                    </label>\n                    <input\n                      type=\"number\"\n                      for=\"position\"\n                      class=\"form-control\"\n                      name=\"priority\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"20000\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n\n              <div *ngIf=\"!currentDashboard && deviceType\">\n                <div class=\"form-group\">\n                  <label title=\"{{ applyToDevicesOfTypeTitle }}\" class=\"c8y-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      name=\"deviceType\"\n                      [(ngModel)]=\"dashboard.deviceType\"\n                      [disabled]=\"!applyToDevicesOfTypePermitted\"\n                    />\n                    <span></span>\n                    <span\n                      class=\"m-r-4\"\n                      translate\n                      [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n                      ngNonBindable\n                    >\n                      Apply dashboard to all devices of type\n                      <i>{{ type }}</i>\n                    </span>\n                  </label>\n                </div>\n\n                <div class=\"alert alert-info m-b-24\" *ngIf=\"isDeviceType\">\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                      id=\"margin\"\n                      name=\"margin\"\n                      type=\"number\"\n                      class=\"form-control\"\n                      [(ngModel)]=\"dashboard.widgetMargin\"\n                      min=\"0\"\n                      max=\"50\"\n                      placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\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 title=\"{{ 'Translate if possible' | translate }}\" class=\"c8y-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      name=\"translateWidgetTitle\"\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      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-default\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-primary\"\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: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: i2.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i2.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: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.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: "directive", type: i8.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i8.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i8.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { 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: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.SlicePipe, name: "slice" }] });
+DashboardDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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\">{{ titleAction | translate }}&nbsp;{{ titleName | translate }}</h3>\n  </div>\n\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <div class=\"p-l-24 p-r-24\">\n      <form #dashboardDetailForm=\"ngForm\" class=\"d-contents\">\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-form-group class=\"m-r-16\">\n                  <label class=\"d-block\">{{ 'Icon' | translate }}</label>\n                  <div dropdown class=\"dropdown\">\n                    <button\n                      title=\"{{ 'Icon' | translate }}\"\n                      type=\"button\"\n                      class=\"btn-default btn btn-gray\"\n                      aria-haspopup=\"true\"\n                      dropdownToggle\n                    >\n                      <i c8yIcon=\"{{ dashboard.icon }}\"></i>\n                      <span class=\"caret\"></span>\n                    </button>\n                    <ul\n                      *dropdownMenu\n                      class=\"dropdown-menu modal-inner-scroll dropdown-menu-grid-4 m-l-0\"\n                      style=\"max-height: 250px\"\n                    >\n                      <ng-container *ngFor=\"let icon of filteredIcons\">\n                        <li (click)=\"selectIcon(icon)\">\n                          <a\n                            class=\"interact\"\n                            title=\"{{ icon }}\"\n                            [ngClass]=\"{ active: dashboard.icon === icon }\"\n                          >\n                            <i class=\"icon\" [c8yIcon]=\"icon\"></i>\n                          </a>\n                        </li>\n                      </ng-container>\n                    </ul>\n                  </div>\n                </c8y-form-group>\n                <c8y-form-group class=\"flex-grow\">\n                  <label>\n                    <span class=\"m-r-4\" id=\"menuLabel\">{{ 'Menu label' | translate }}</span>\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      type=\"button\"\n                      popover=\"{{\n                        'Menu label to display in submenu when dashboard is attached' | translate\n                      }}\"\n                      triggers=\"focus\"\n                      placement=\"right\"\n                      container=\"body\"\n                    >\n                      <i [c8yIcon]=\"'question-circle-o'\"></i>\n                    </button>\n                  </label>\n                  <input\n                    id=\"menuLabel\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"name\"\n                    [(ngModel)]=\"dashboardName\"\n                    placeholder=\"{{ namePlaceholder | translate }}\"\n                    maxlength=\"512\"\n                    required\n                  />\n                </c8y-form-group>\n              </div>\n              <c8y-form-group *ngIf=\"isReport\">\n                <label id=\"description\">{{ 'Description ' | translate }}</label>\n                <textarea\n                  aria-labelledby=\"description\"\n                  class=\"form-control\"\n                  rows=\"2\"\n                  name=\"description\"\n                  [(ngModel)]=\"dashboard.description\"\n                ></textarea>\n              </c8y-form-group>\n              <div class=\"row\">\n                <div class=\"col-sm-6\" *ngIf=\"!isReport\">\n                  <c8y-form-group>\n                    <label for=\"positionNav\">\n                      <span class=\"m-r-4\" id=\"positionNav\">\n                        {{ 'Position in navigation' | translate }}\n                      </span>\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        type=\"button\"\n                        popover=\"{{\n                          'Position in navigation menu (10000 first, -10000 last)' | translate\n                        }}\"\n                        triggers=\"focus\"\n                        placement=\"right\"\n                        container=\"body\"\n                      >\n                        <i [c8yIcon]=\"'question-circle-o'\"></i>\n                      </button>\n                    </label>\n                    <input\n                      id=\"positionNav\"\n                      type=\"number\"\n                      class=\"form-control\"\n                      name=\"priority\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"10000\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                      required\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-sm-6\" *ngIf=\"isReport\">\n                  <label translate>Navigator menu item</label>\n                  <c8y-form-group>\n                    <label title=\"{{ 'Show in navigator' | translate }}\" class=\"c8y-checkbox\">\n                      <input\n                        type=\"checkbox\"\n                        name=\"isNavigatorNode\"\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 class=\"col-sm-6\" *ngIf=\"isReport\">\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                        type=\"button\"\n                        [popover]=\"positionInNavPop\"\n                        triggers=\"focus\"\n                        placement=\"right\"\n                        container=\"body\"\n                      >\n                        <i [c8yIcon]=\"'question-circle-o'\"></i>\n                      </button>\n                    </label>\n                    <input\n                      type=\"number\"\n                      for=\"position\"\n                      class=\"form-control\"\n                      name=\"priority\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"20000\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n\n              <div *ngIf=\"!currentDashboard && deviceType\">\n                <div class=\"form-group\">\n                  <label title=\"{{ applyToDevicesOfTypeTitle }}\" class=\"c8y-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      name=\"deviceType\"\n                      [(ngModel)]=\"dashboard.deviceType\"\n                      [disabled]=\"!applyToDevicesOfTypePermitted\"\n                    />\n                    <span></span>\n                    <span\n                      class=\"m-r-4\"\n                      translate\n                      [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n                      ngNonBindable\n                    >\n                      Apply dashboard to all devices of type\n                      <i>{{ type }}</i>\n                    </span>\n                  </label>\n                </div>\n\n                <div class=\"alert alert-info m-b-24\" *ngIf=\"isDeviceType\">\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                      id=\"margin\"\n                      name=\"margin\"\n                      type=\"number\"\n                      class=\"form-control\"\n                      [(ngModel)]=\"dashboard.widgetMargin\"\n                      min=\"0\"\n                      max=\"50\"\n                      placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\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 title=\"{{ 'Translate if possible' | translate }}\" class=\"c8y-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      name=\"translateWidgetTitle\"\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      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-default\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-primary\"\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: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: i2.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i2.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: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.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: "directive", type: i8.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i8.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i8.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { 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: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.SlicePipe, name: "slice" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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\">{{ titleAction | translate }}&nbsp;{{ titleName | translate }}</h3>\n  </div>\n\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <div class=\"p-l-24 p-r-24\">\n      <form #dashboardDetailForm=\"ngForm\" class=\"d-contents\">\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-form-group class=\"m-r-16\">\n                  <label class=\"d-block\">{{ 'Icon' | translate }}</label>\n                  <div dropdown class=\"dropdown\">\n                    <button\n                      title=\"{{ 'Icon' | translate }}\"\n                      type=\"button\"\n                      class=\"btn-default btn btn-gray\"\n                      dropdownToggle\n                    >\n                      <i c8yIcon=\"{{ dashboard.icon }}\"></i>\n                      <span class=\"caret\"></span>\n                    </button>\n                    <ul\n                      *dropdownMenu\n                      class=\"dropdown-menu modal-inner-scroll dropdown-menu-grid-4 m-l-0\"\n                      style=\"max-height: 250px\"\n                    >\n                      <ng-container *ngFor=\"let icon of filteredIcons\">\n                        <li (click)=\"selectIcon(icon)\">\n                          <a\n                            class=\"interact\"\n                            title=\"{{ icon }}\"\n                            [ngClass]=\"{ active: dashboard.icon === icon }\"\n                          >\n                            <i class=\"icon\" [c8yIcon]=\"icon\"></i>\n                          </a>\n                        </li>\n                      </ng-container>\n                    </ul>\n                  </div>\n                </c8y-form-group>\n                <c8y-form-group class=\"flex-grow\">\n                  <label>\n                    <span class=\"m-r-4\" id=\"menuLabel\">{{ 'Menu label' | translate }}</span>\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      type=\"button\"\n                      popover=\"{{\n                        'Menu label to display in submenu when dashboard is attached' | translate\n                      }}\"\n                      triggers=\"focus\"\n                      placement=\"right\"\n                      container=\"body\"\n                    >\n                      <i [c8yIcon]=\"'question-circle-o'\"></i>\n                    </button>\n                  </label>\n                  <input\n                    id=\"menuLabel\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"name\"\n                    [(ngModel)]=\"dashboardName\"\n                    placeholder=\"{{ namePlaceholder | translate }}\"\n                    maxlength=\"512\"\n                    required\n                  />\n                </c8y-form-group>\n              </div>\n              <c8y-form-group *ngIf=\"isReport\">\n                <label id=\"description\">{{ 'Description ' | translate }}</label>\n                <textarea\n                  aria-labelledby=\"description\"\n                  class=\"form-control\"\n                  rows=\"2\"\n                  name=\"description\"\n                  [(ngModel)]=\"dashboard.description\"\n                ></textarea>\n              </c8y-form-group>\n              <div class=\"row\">\n                <div class=\"col-sm-6\" *ngIf=\"!isReport\">\n                  <c8y-form-group>\n                    <label for=\"positionNav\">\n                      <span class=\"m-r-4\" id=\"positionNav\">\n                        {{ 'Position in navigation' | translate }}\n                      </span>\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        type=\"button\"\n                        popover=\"{{\n                          'Position in navigation menu (10000 first, -10000 last)' | translate\n                        }}\"\n                        triggers=\"focus\"\n                        placement=\"right\"\n                        container=\"body\"\n                      >\n                        <i [c8yIcon]=\"'question-circle-o'\"></i>\n                      </button>\n                    </label>\n                    <input\n                      id=\"positionNav\"\n                      type=\"number\"\n                      class=\"form-control\"\n                      name=\"priority\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"10000\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                      required\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-sm-6\" *ngIf=\"isReport\">\n                  <label translate>Navigator menu item</label>\n                  <c8y-form-group>\n                    <label title=\"{{ 'Show in navigator' | translate }}\" class=\"c8y-checkbox\">\n                      <input\n                        type=\"checkbox\"\n                        name=\"isNavigatorNode\"\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 class=\"col-sm-6\" *ngIf=\"isReport\">\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                        type=\"button\"\n                        [popover]=\"positionInNavPop\"\n                        triggers=\"focus\"\n                        placement=\"right\"\n                        container=\"body\"\n                      >\n                        <i [c8yIcon]=\"'question-circle-o'\"></i>\n                      </button>\n                    </label>\n                    <input\n                      type=\"number\"\n                      for=\"position\"\n                      class=\"form-control\"\n                      name=\"priority\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"20000\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n\n              <div *ngIf=\"!currentDashboard && deviceType\">\n                <div class=\"form-group\">\n                  <label title=\"{{ applyToDevicesOfTypeTitle }}\" class=\"c8y-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      name=\"deviceType\"\n                      [(ngModel)]=\"dashboard.deviceType\"\n                      [disabled]=\"!applyToDevicesOfTypePermitted\"\n                    />\n                    <span></span>\n                    <span\n                      class=\"m-r-4\"\n                      translate\n                      [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n                      ngNonBindable\n                    >\n                      Apply dashboard to all devices of type\n                      <i>{{ type }}</i>\n                    </span>\n                  </label>\n                </div>\n\n                <div class=\"alert alert-info m-b-24\" *ngIf=\"isDeviceType\">\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                      id=\"margin\"\n                      name=\"margin\"\n                      type=\"number\"\n                      class=\"form-control\"\n                      [(ngModel)]=\"dashboard.widgetMargin\"\n                      min=\"0\"\n                      max=\"50\"\n                      placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\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 title=\"{{ 'Translate if possible' | translate }}\" class=\"c8y-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      name=\"translateWidgetTitle\"\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      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-default\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-primary\"\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\">{{ titleAction | translate }}&nbsp;{{ titleName | translate }}</h3>\n  </div>\n\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <div class=\"p-l-24 p-r-24\">\n      <form #dashboardDetailForm=\"ngForm\" class=\"d-contents\">\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-form-group class=\"m-r-16\">\n                  <label class=\"d-block\">{{ 'Icon' | translate }}</label>\n                  <div dropdown class=\"dropdown\">\n                    <button\n                      title=\"{{ 'Icon' | translate }}\"\n                      type=\"button\"\n                      class=\"btn-default btn btn-gray\"\n                      aria-haspopup=\"true\"\n                      dropdownToggle\n                    >\n                      <i c8yIcon=\"{{ dashboard.icon }}\"></i>\n                      <span class=\"caret\"></span>\n                    </button>\n                    <ul\n                      *dropdownMenu\n                      class=\"dropdown-menu modal-inner-scroll dropdown-menu-grid-4 m-l-0\"\n                      style=\"max-height: 250px\"\n                    >\n                      <ng-container *ngFor=\"let icon of filteredIcons\">\n                        <li (click)=\"selectIcon(icon)\">\n                          <a\n                            class=\"interact\"\n                            title=\"{{ icon }}\"\n                            [ngClass]=\"{ active: dashboard.icon === icon }\"\n                          >\n                            <i class=\"icon\" [c8yIcon]=\"icon\"></i>\n                          </a>\n                        </li>\n                      </ng-container>\n                    </ul>\n                  </div>\n                </c8y-form-group>\n                <c8y-form-group class=\"flex-grow\">\n                  <label>\n                    <span class=\"m-r-4\" id=\"menuLabel\">{{ 'Menu label' | translate }}</span>\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      type=\"button\"\n                      popover=\"{{\n                        'Menu label to display in submenu when dashboard is attached' | translate\n                      }}\"\n                      triggers=\"focus\"\n                      placement=\"right\"\n                      container=\"body\"\n                    >\n                      <i [c8yIcon]=\"'question-circle-o'\"></i>\n                    </button>\n                  </label>\n                  <input\n                    id=\"menuLabel\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"name\"\n                    [(ngModel)]=\"dashboardName\"\n                    placeholder=\"{{ namePlaceholder | translate }}\"\n                    maxlength=\"512\"\n                    required\n                  />\n                </c8y-form-group>\n              </div>\n              <c8y-form-group *ngIf=\"isReport\">\n                <label id=\"description\">{{ 'Description ' | translate }}</label>\n                <textarea\n                  aria-labelledby=\"description\"\n                  class=\"form-control\"\n                  rows=\"2\"\n                  name=\"description\"\n                  [(ngModel)]=\"dashboard.description\"\n                ></textarea>\n              </c8y-form-group>\n              <div class=\"row\">\n                <div class=\"col-sm-6\" *ngIf=\"!isReport\">\n                  <c8y-form-group>\n                    <label for=\"positionNav\">\n                      <span class=\"m-r-4\" id=\"positionNav\">\n                        {{ 'Position in navigation' | translate }}\n                      </span>\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        type=\"button\"\n                        popover=\"{{\n                          'Position in navigation menu (10000 first, -10000 last)' | translate\n                        }}\"\n                        triggers=\"focus\"\n                        placement=\"right\"\n                        container=\"body\"\n                      >\n                        <i [c8yIcon]=\"'question-circle-o'\"></i>\n                      </button>\n                    </label>\n                    <input\n                      id=\"positionNav\"\n                      type=\"number\"\n                      class=\"form-control\"\n                      name=\"priority\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"10000\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                      required\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-sm-6\" *ngIf=\"isReport\">\n                  <label translate>Navigator menu item</label>\n                  <c8y-form-group>\n                    <label title=\"{{ 'Show in navigator' | translate }}\" class=\"c8y-checkbox\">\n                      <input\n                        type=\"checkbox\"\n                        name=\"isNavigatorNode\"\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 class=\"col-sm-6\" *ngIf=\"isReport\">\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                        type=\"button\"\n                        [popover]=\"positionInNavPop\"\n                        triggers=\"focus\"\n                        placement=\"right\"\n                        container=\"body\"\n                      >\n                        <i [c8yIcon]=\"'question-circle-o'\"></i>\n                      </button>\n                    </label>\n                    <input\n                      type=\"number\"\n                      for=\"position\"\n                      class=\"form-control\"\n                      name=\"priority\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"20000\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n\n              <div *ngIf=\"!currentDashboard && deviceType\">\n                <div class=\"form-group\">\n                  <label title=\"{{ applyToDevicesOfTypeTitle }}\" class=\"c8y-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      name=\"deviceType\"\n                      [(ngModel)]=\"dashboard.deviceType\"\n                      [disabled]=\"!applyToDevicesOfTypePermitted\"\n                    />\n                    <span></span>\n                    <span\n                      class=\"m-r-4\"\n                      translate\n                      [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n                      ngNonBindable\n                    >\n                      Apply dashboard to all devices of type\n                      <i>{{ type }}</i>\n                    </span>\n                  </label>\n                </div>\n\n                <div class=\"alert alert-info m-b-24\" *ngIf=\"isDeviceType\">\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                      id=\"margin\"\n                      name=\"margin\"\n                      type=\"number\"\n                      class=\"form-control\"\n                      [(ngModel)]=\"dashboard.widgetMargin\"\n                      min=\"0\"\n                      max=\"50\"\n                      placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\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 title=\"{{ 'Translate if possible' | translate }}\" class=\"c8y-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      name=\"translateWidgetTitle\"\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      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-default\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-primary\"\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: undefined, decorators: [{
                     type: Inject,
                     args: [ICON_LIST]
@@ -1667,7 +1667,7 @@ class ContextDashboardComponent {
     }
 }
 ContextDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ContextDashboardComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: ContextDashboardService }, { token: i2.AlertService }, { token: i0.Renderer2 }, { token: CONTEXT_DASHBOARD_CONFIG }, { token: WidgetService }, { token: i3$1.BsModalService }, { token: i1.InventoryService }, { token: i2.GainsightService }, { token: i2.ActionBarService }, { token: i3.TranslateService }, { token: i2.ModalService }], target: i0.ɵɵFactoryTarget.Component });
-ContextDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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" }, host: { properties: { "class": "this.class" }, styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, ngImport: i0, template: "<c8y-title>\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item [placement]=\"'more'\" *ngIf=\"defaultWidgets.length > 0\">\n  <button\n    (click)=\"restore()\"\n    px-event=\"Reset dashboard\"\n    [disabled]=\"dashboard?.isFrozen || disabled\"\n    class=\"btn btn-link\"\n  >\n    <i c8yIcon=\"rotate-left\"></i>\n    <span class=\"m-l-4\" translate>Reset dashboard</span>\n  </button>\n</c8y-action-bar-item>\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,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard.name || title : undefined,\n    widgetMargin: dashboard?.widgetMargin,\n    canCopy: canCopy\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: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i2.WidgetsDashboardComponent, selector: "c8y-widgets-dashboard", inputs: ["widgets", "context", "contextDashboard", "settings", "breadcrumb"], outputs: ["onAddWidget", "onEditWidget", "onDeleteWidget", "onChangeDashboard", "onEditDashboard", "onCopyDashboard", "onDeleteDashboard", "onFreeze", "onChangeStart", "onChangeEnd"] }] });
+ContextDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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" }, host: { properties: { "class": "this.class" }, styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, ngImport: i0, template: "<c8y-title>\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item [placement]=\"'more'\" *ngIf=\"defaultWidgets.length > 0\">\n  <button\n    type=\"button\"\n    title=\"{{ 'Reset dashboard' | translate }}\"\n    class=\"btn btn-clean\"\n    px-event=\"Reset dashboard\"\n    (click)=\"restore()\"\n    [disabled]=\"dashboard?.isFrozen || disabled\"\n  >\n    <i c8yIcon=\"reset\" class=\"m-r-4\"></i>\n    {{ 'Reset dashboard' | translate }}\n  </button>\n</c8y-action-bar-item>\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,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard.name || title : undefined,\n    widgetMargin: dashboard?.widgetMargin,\n    canCopy: canCopy\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: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i2.WidgetsDashboardComponent, selector: "c8y-widgets-dashboard", inputs: ["widgets", "context", "contextDashboard", "settings", "breadcrumb"], outputs: ["onAddWidget", "onEditWidget", "onDeleteWidget", "onChangeDashboard", "onEditDashboard", "onCopyDashboard", "onDeleteDashboard", "onFreeze", "onChangeStart", "onChangeEnd"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ContextDashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-context-dashboard', host: {
@@ -1675,7 +1675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
       display: block;
     `,
                         class: 'dashboard c8y-grid-dashboard'
-                    }, template: "<c8y-title>\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item [placement]=\"'more'\" *ngIf=\"defaultWidgets.length > 0\">\n  <button\n    (click)=\"restore()\"\n    px-event=\"Reset dashboard\"\n    [disabled]=\"dashboard?.isFrozen || disabled\"\n    class=\"btn btn-link\"\n  >\n    <i c8yIcon=\"rotate-left\"></i>\n    <span class=\"m-l-4\" translate>Reset dashboard</span>\n  </button>\n</c8y-action-bar-item>\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,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard.name || title : undefined,\n    widgetMargin: dashboard?.widgetMargin,\n    canCopy: canCopy\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" }]
+                    }, template: "<c8y-title>\n  {{ title }}\n</c8y-title>\n\n<c8y-action-bar-item [placement]=\"'more'\" *ngIf=\"defaultWidgets.length > 0\">\n  <button\n    type=\"button\"\n    title=\"{{ 'Reset dashboard' | translate }}\"\n    class=\"btn btn-clean\"\n    px-event=\"Reset dashboard\"\n    (click)=\"restore()\"\n    [disabled]=\"dashboard?.isFrozen || disabled\"\n  >\n    <i c8yIcon=\"reset\" class=\"m-r-4\"></i>\n    {{ 'Reset dashboard' | translate }}\n  </button>\n</c8y-action-bar-item>\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,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard.name || title : undefined,\n    widgetMargin: dashboard?.widgetMargin,\n    canCopy: canCopy\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" }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: ContextDashboardService }, { type: i2.AlertService }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CONTEXT_DASHBOARD_CONFIG]
@@ -2330,46 +2330,20 @@ class DeviceInfoDashboardComponent {
         this.isLoading$ = new BehaviorSubject(true);
         this.DEVICE_INFO_WIDGETS = [
             {
-                name: 'Alarm list',
-                title: gettext('Active, critical alarms'),
-                _x: 4,
-                _y: 7,
-                _height: 4,
-                _width: 4,
-                config: {
-                    options: {
-                        orderMode: 'ACTIVE_FIRST',
-                        severity: { CRITICAL: true },
-                        status: {
-                            ACTIVE: true,
-                            ACKNOWLEDGED: false,
-                            CLEARED: false
-                        },
-                        types: []
-                    }
-                }
-            },
-            {
-                name: 'Map',
-                title: gettext('Location'),
-                _x: 4,
-                _y: 11,
-                _height: 4,
-                _width: 8
+                componentId: 'assetNotesWidget',
+                title: gettext('Message of the day'),
+                classes: { 'panel-title-hidden': true },
+                _x: 0,
+                _y: 0,
+                _height: 2,
+                _width: 12
             },
             {
-                name: 'Asset Properties',
-                title: gettext('Device data'),
-                config: {
-                    options: {
-                        properties: [],
-                        allowDisplayAndEditKnownProperties: true,
-                        hiddenPropertiesKeyPaths: ['owner']
-                    }
-                },
+                name: 'deviceStatusWidget',
+                title: gettext('Device status'),
                 _x: 0,
-                _y: 7,
-                _height: 8,
+                _y: 2,
+                _height: 5,
                 _width: 4
             },
             {
@@ -2542,13 +2516,40 @@ class DeviceInfoDashboardComponent {
                 }
             },
             {
-                name: 'deviceStatusWidget',
-                title: gettext('Device status'),
+                name: 'Asset Properties',
+                title: gettext('Device data'),
+                config: {
+                    options: {
+                        properties: [],
+                        allowDisplayAndEditKnownProperties: true,
+                        hiddenPropertiesKeyPaths: ['owner']
+                    }
+                },
                 _x: 0,
-                _y: 2,
-                _height: 5,
+                _y: 7,
+                _height: 8,
                 _width: 4
             },
+            {
+                name: 'Alarm list',
+                title: gettext('Active, critical alarms'),
+                _x: 4,
+                _y: 7,
+                _height: 4,
+                _width: 4,
+                config: {
+                    options: {
+                        orderMode: 'ACTIVE_FIRST',
+                        severity: { CRITICAL: true },
+                        status: {
+                            ACTIVE: true,
+                            ACKNOWLEDGED: false,
+                            CLEARED: false
+                        },
+                        types: []
+                    }
+                }
+            },
             {
                 name: 'deviceGroupAssignmentWidget',
                 title: gettext('Group assignment'),
@@ -2557,15 +2558,6 @@ class DeviceInfoDashboardComponent {
                 _height: 4,
                 _width: 4
             },
-            {
-                componentId: 'assetNotesWidget',
-                title: gettext('Message of the day'),
-                classes: { 'panel-title-hidden': true },
-                _x: 0,
-                _y: 0,
-                _height: 2,
-                _width: 12
-            },
             {
                 componentId: 'Map',
                 title: gettext('Location'),