@c8y/ngx-components 1017.0.7 → 1017.0.9

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]
@@ -1075,9 +1075,10 @@ class WidgetConfigComponent {
         }
     }
     checkIfDeviceRequired() {
-        return (!this.widgetConfig.settings.deviceTargetNotRequired &&
-            !this.widgetConfig.device &&
-            !this.widgetConfig.settings.noDeviceTarget);
+        return (!this.widgetConfig ||
+            (!this.widgetConfig.settings.deviceTargetNotRequired &&
+                !this.widgetConfig.device &&
+                !this.widgetConfig.settings.noDeviceTarget));
     }
     selectionChanged(selection) {
         this.widgetConfig.device = selection.change.item;
@@ -1231,10 +1232,10 @@ class WidgetConfigComponent {
     }
 }
 WidgetConfigComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetConfigComponent, deps: [{ token: WidgetService }, { token: i3$1.BsModalRef }, { token: i1.InventoryService }, { token: ContextDashboardService }], target: i0.ɵɵFactoryTarget.Component });
-WidgetConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WidgetConfigComponent, selector: "c8y-widget-config", viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["config"], descendants: true }], ngImport: i0, template: "<div class=\"modal-header separator\">\n  <h3 id=\"mdoal-title\" title=\"{{ 'Add widget' | translate }}\" *ngIf=\"!current\" translate>Add widget</h3>\n  <h3 id=\"modal-title\" title=\"{{ 'Edit widget' | translate }}\" *ngIf=\"current\" translate>Edit widget</h3>\n</div>\n<form #configForm=\"ngForm\" name=\"form\">\n  <div class=\"c8y-modal-tabs\" id=\"modal-body\">\n    <div class=\"tabContainer\">\n      <ul class=\"nav nav-tabs nav-tabsc8y p-l-24\">\n        <li [class.active]=\"mode === 'select'\">\n          <button\n            title=\"{{ 'Select widget' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            (click)=\"changeMode('select'); (false)\"\n          >\n            <i c8yIcon=\"th-large\"></i>\n            <span translate>Select widget</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'config'\">\n          <button\n            title=\"{{ 'Configuration' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('config'); (false)\"\n          >\n            <i c8yIcon=\"cog\"></i>\n            <span translate>Configuration</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'style'\">\n          <button\n            title=\"{{ 'Appearance' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('style'); (false)\"\n          >\n            <i c8yIcon=\"paint-brush\"></i>\n            <span translate>Appearance</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"modal-inner-scroll\">\n    <div\n      *ngIf=\"mode === 'select'\"\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              [attr.aria-label]=\"'Search' | translate\"\n              class=\"form-control\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              [(ngModel)]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (keydown)=\"searchChange$.next($event)\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                title=\"{{ 'Search' | translate }}\"\n                type=\"button\"\n                (click)=\"resetSearch()\"\n              >\n                <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"modal-body bg-level-2\" *ngIf=\"mode === 'select'\">\n      <div class=\"card-group card-select m-b-0\">\n        <div\n          class=\"col-md-3 col-sm-4 col-xs-6\"\n          *ngFor=\"let cmp of searchResult || components\"\n          title=\"{{ cmp.description | translate }}\"\n        >\n          <div class=\"card p-8\" [class.active]=\"selected === cmp\" (click)=\"select(cmp)\">\n            <div class=\"text-center p-8 m-b-8 d-col flex-center bg-level-2\" role=\"none\">\n              <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n                <h1><i c8yIcon=\"file-image-o\"></i></h1>\n                <small translate>Preview not available</small>\n              </ng-container>\n              <ng-template #previewImage>\n                <img class=\"img-responsive\" alt=\"\" [src]=\"cmp.previewImage\" />\n              </ng-template>\n            </div>\n            <p class=\"card-title text-truncate\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n          </div>\n        </div>\n\n        <div class=\"c8y-empty-state text-center\" *ngIf=\"searchResult && searchResult.length === 0\">\n          <h1 c8yIcon=\"search\"></h1>\n          <h3 translate>No widgets found.</h3>\n          <div class=\"d-flex\">\n            <p translate class=\"m-r-8\">Rephrase your search term.</p>\n            <button\n              title=\"{{ 'Reset search' | translate }}\"\n              class=\"btn btn-primary\"\n              type=\"button\"\n              (click)=\"resetSearch()\"\n            >\n              {{ 'Reset search' | translate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- The following is intentional set to hidden to allow the ViewChild ref in the controller -->\n    <div *ngIf=\"selected\" [hidden]=\"mode !== 'config'\" style=\"max-height: calc(100vh - 290px)\">\n      <div class=\"p-t-16 flex-no-grow\">\n        <div class=\"row\">\n          <div class=\"col-sm-4\">\n            <div class=\"p-l-24\">\n              <h4 class=\"text-left text-medium\">\n                {{ selected.label | translate }}\n              </h4>\n              <p>\n                {{ selected.description | translate }}\n              </p>\n            </div>\n          </div>\n          <div class=\"col-sm-8\">\n            <div class=\"p-r-24\">\n              <c8y-form-group>\n                <label for=\"widgetTitle\" translate>Title</label>\n                <input\n                  id=\"widgetTitle\"\n                  [(ngModel)]=\"selected.data.title\"\n                  type=\"text\"\n                  name=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n                  required\n                />\n              </c8y-form-group>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"row flex-grow separator-top\"\n        [ngClass]=\"{ 'd-flex m-l-0': widgetConfig.options || hasConfig() }\"\n      >\n        <div\n          *ngIf=\"!widgetConfig.settings?.noDeviceTarget\"\n          class=\"a-i-stretch\"\n          [ngClass]=\"{\n            'bg-level-1 col-sm-4 p-l-0 p-r-0': hasConfig(),\n            'bg-level-0 col-sm-12': !hasConfig()\n          }\"\n          style=\"height: 360px\"\n        >\n          <div class=\"p-l-16 fit-h bg-inherit\" [ngClass]=\"{ 'p-r-16': !hasConfig() }\">\n            <c8y-asset-selector-miller\n              (onSelected)=\"selectionChanged($event)\"\n              [config]=\"{\n                view: 'miller',\n                groupsSelectable: this.widgetConfig.settings?.groupsSelectable,\n                showChildDevices: true,\n                columnHeaders: true,\n                showUnassignedDevices: true,\n                search: !this.widgetConfig.settings.context?.additionParents,\n                showFilter: true,\n                singleColumn: !!this.hasConfig()\n              }\"\n              [asset]=\"widgetConfig.settings?.context\"\n              [selectedDevice]=\"selectedDevice\"\n              class=\"bg-inherit p-relative\"\n            ></c8y-asset-selector-miller>\n          </div>\n        </div>\n        <div\n          [ngClass]=\"{\n            'col-sm-8': !widgetConfig.settings?.noDeviceTarget,\n            'col-sm-12 p-l-32 p-r-8': widgetConfig.settings?.noDeviceTarget\n          }\"\n        >\n          <c8y-dynamic-component\n            class=\"d-block p-t-8 p-r-24\"\n            [componentId]=\"selected.id\"\n            mode=\"config\"\n            [config]=\"widgetConfig\"\n            [notFoundError]=\"false\"\n            #config\n          ></c8y-dynamic-component>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"mode === 'style'\" class=\"modal-body p-t-0\" style=\"min-height: calc(100vh - 290px)\">\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\n          <c8y-appearance-settings\n            [(themeClass)]=\"styling.contentClass\"\n            [(headerClass)]=\"styling.headerClass\"\n            [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n            [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n            [defaultThemeClass]=\"defaultStyling.contentClass\"\n            [defaultHeaderClass]=\"defaultStyling.headerClass\"\n          ></c8y-appearance-settings>\n        </div>\n        <div class=\"col-xs-6 sticky-header-top-0\">\n          <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n        </div>\n      </div>\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=\"submit\"\n      class=\"btn btn-primary\"\n      (click)=\"save()\"\n      [disabled]=\"\n        contextDashboardService.formDisabled || configForm.invalid || checkIfDeviceRequired()\n      \"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\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: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { 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.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.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: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { kind: "component", type: i8$1.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected"] }, { 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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
+WidgetConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WidgetConfigComponent, selector: "c8y-widget-config", viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["config"], descendants: true }], ngImport: i0, template: "<div class=\"modal-header separator\">\n  <div id=\"modal-title\" class=\"h3\" title=\"{{ 'Add widget' | translate }}\" *ngIf=\"!current\" translate>Add widget</div>\n  <div id=\"modal-title\" class=\"h3\" title=\"{{ 'Edit widget' | translate }}\" *ngIf=\"current\" translate>Edit widget</div>\n</div>\n<form #configForm=\"ngForm\" name=\"form\">\n  <div class=\"c8y-modal-tabs\" id=\"modal-body\">\n    <div class=\"tabContainer\">\n      <ul class=\"nav nav-tabs nav-tabsc8y p-l-24\">\n        <li [class.active]=\"mode === 'select'\">\n          <button\n            title=\"{{ 'Select widget' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            (click)=\"changeMode('select'); (false)\"\n          >\n            <i c8yIcon=\"th-large\"></i>\n            <span translate>Select widget</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'config'\">\n          <button\n            title=\"{{ 'Configuration' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('config'); (false)\"\n          >\n            <i c8yIcon=\"cog\"></i>\n            <span translate>Configuration</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'style'\">\n          <button\n            title=\"{{ 'Appearance' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('style'); (false)\"\n          >\n            <i c8yIcon=\"paint-brush\"></i>\n            <span translate>Appearance</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"modal-inner-scroll\">\n    <div\n      *ngIf=\"mode === 'select'\"\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              [attr.aria-label]=\"'Search' | translate\"\n              class=\"form-control\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              [(ngModel)]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (keydown)=\"searchChange$.next($event)\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                title=\"{{ 'Search' | translate }}\"\n                type=\"button\"\n                (click)=\"resetSearch()\"\n              >\n                <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"modal-body bg-level-2\" *ngIf=\"mode === 'select'\">\n      <div class=\"card-group card-select m-b-0\">\n        <div\n          class=\"col-md-3 col-sm-4 col-xs-6\"\n          *ngFor=\"let cmp of searchResult || components\"\n          title=\"{{ cmp.description | translate }}\"\n        >\n          <div class=\"card p-8\" [class.active]=\"selected === cmp\" (click)=\"select(cmp)\">\n            <div class=\"text-center p-8 m-b-8 d-col flex-center bg-level-2\" role=\"none\">\n              <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              </ng-container>\n              <ng-template #previewImage>\n                <img class=\"img-responsive\" alt=\"\" [src]=\"cmp.previewImage\" />\n              </ng-template>\n            </div>\n            <p class=\"card-title text-truncate\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n          </div>\n        </div>\n\n        <div class=\"c8y-empty-state text-center\" *ngIf=\"searchResult && searchResult.length === 0\">\n          <div class=\"h1\" c8yIcon=\"search\"></div>\n          <h3 translate>No widgets found.</h3>\n          <div class=\"d-flex\">\n            <p translate class=\"m-r-8\">Rephrase your search term.</p>\n            <button\n              title=\"{{ 'Reset search' | translate }}\"\n              class=\"btn btn-primary\"\n              type=\"button\"\n              (click)=\"resetSearch()\"\n            >\n              {{ 'Reset search' | translate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- The following is intentional set to hidden to allow the ViewChild ref in the controller -->\n    <div *ngIf=\"selected\" [hidden]=\"mode !== 'config'\" style=\"max-height: calc(100vh - 290px)\">\n      <div class=\"p-t-16 flex-no-grow\">\n        <div class=\"row\">\n          <div class=\"col-sm-4\">\n            <div class=\"p-l-24\">\n              <h4 class=\"text-left text-medium\">\n                {{ selected.label | translate }}\n              </h4>\n              <p>\n                {{ selected.description | translate }}\n              </p>\n            </div>\n          </div>\n          <div class=\"col-sm-8\">\n            <div class=\"p-r-24\">\n              <c8y-form-group>\n                <label for=\"widgetTitle\" translate>Title</label>\n                <input\n                  id=\"widgetTitle\"\n                  [(ngModel)]=\"selected.data.title\"\n                  type=\"text\"\n                  name=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n                  required\n                />\n              </c8y-form-group>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"row flex-grow separator-top\"\n        [ngClass]=\"{ 'd-flex m-l-0': widgetConfig.options || hasConfig() }\"\n      >\n        <div\n          *ngIf=\"!widgetConfig.settings?.noDeviceTarget\"\n          class=\"a-i-stretch\"\n          [ngClass]=\"{\n            'bg-level-1 col-sm-4 p-l-0 p-r-0': hasConfig(),\n            'bg-level-0 col-sm-12': !hasConfig()\n          }\"\n          style=\"height: 360px\"\n        >\n          <div class=\"p-l-16 fit-h bg-inherit\" [ngClass]=\"{ 'p-r-16': !hasConfig() }\">\n            <c8y-asset-selector-miller\n              (onSelected)=\"selectionChanged($event)\"\n              [config]=\"{\n                view: 'miller',\n                groupsSelectable: this.widgetConfig.settings?.groupsSelectable,\n                showChildDevices: true,\n                columnHeaders: true,\n                showUnassignedDevices: true,\n                search: !this.widgetConfig.settings.context?.additionParents,\n                showFilter: true,\n                singleColumn: !!this.hasConfig()\n              }\"\n              [asset]=\"widgetConfig.settings?.context\"\n              [selectedDevice]=\"selectedDevice\"\n              class=\"bg-inherit p-relative\"\n            ></c8y-asset-selector-miller>\n          </div>\n        </div>\n        <div\n          [ngClass]=\"{\n            'col-sm-8': !widgetConfig.settings?.noDeviceTarget,\n            'col-sm-12 p-l-32 p-r-8': widgetConfig.settings?.noDeviceTarget\n          }\"\n        >\n          <c8y-dynamic-component\n            class=\"d-block p-t-8 p-r-24\"\n            [componentId]=\"selected.id\"\n            mode=\"config\"\n            [config]=\"widgetConfig\"\n            [notFoundError]=\"false\"\n            #config\n          ></c8y-dynamic-component>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"mode === 'style'\" class=\"modal-body p-t-0\" style=\"min-height: calc(100vh - 290px)\">\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\n          <c8y-appearance-settings\n            [(themeClass)]=\"styling.contentClass\"\n            [(headerClass)]=\"styling.headerClass\"\n            [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n            [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n            [defaultThemeClass]=\"defaultStyling.contentClass\"\n            [defaultHeaderClass]=\"defaultStyling.headerClass\"\n          ></c8y-appearance-settings>\n        </div>\n        <div class=\"col-xs-6 sticky-header-top-0\">\n          <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n        </div>\n      </div>\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=\"submit\"\n      class=\"btn btn-primary\"\n      (click)=\"save()\"\n      [disabled]=\"\n        contextDashboardService.formDisabled || configForm.invalid || checkIfDeviceRequired()\n      \"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\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: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { 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.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.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: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { kind: "component", type: i8$1.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected"] }, { 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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-widget-config', template: "<div class=\"modal-header separator\">\n  <h3 id=\"mdoal-title\" title=\"{{ 'Add widget' | translate }}\" *ngIf=\"!current\" translate>Add widget</h3>\n  <h3 id=\"modal-title\" title=\"{{ 'Edit widget' | translate }}\" *ngIf=\"current\" translate>Edit widget</h3>\n</div>\n<form #configForm=\"ngForm\" name=\"form\">\n  <div class=\"c8y-modal-tabs\" id=\"modal-body\">\n    <div class=\"tabContainer\">\n      <ul class=\"nav nav-tabs nav-tabsc8y p-l-24\">\n        <li [class.active]=\"mode === 'select'\">\n          <button\n            title=\"{{ 'Select widget' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            (click)=\"changeMode('select'); (false)\"\n          >\n            <i c8yIcon=\"th-large\"></i>\n            <span translate>Select widget</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'config'\">\n          <button\n            title=\"{{ 'Configuration' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('config'); (false)\"\n          >\n            <i c8yIcon=\"cog\"></i>\n            <span translate>Configuration</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'style'\">\n          <button\n            title=\"{{ 'Appearance' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('style'); (false)\"\n          >\n            <i c8yIcon=\"paint-brush\"></i>\n            <span translate>Appearance</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"modal-inner-scroll\">\n    <div\n      *ngIf=\"mode === 'select'\"\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              [attr.aria-label]=\"'Search' | translate\"\n              class=\"form-control\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              [(ngModel)]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (keydown)=\"searchChange$.next($event)\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                title=\"{{ 'Search' | translate }}\"\n                type=\"button\"\n                (click)=\"resetSearch()\"\n              >\n                <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"modal-body bg-level-2\" *ngIf=\"mode === 'select'\">\n      <div class=\"card-group card-select m-b-0\">\n        <div\n          class=\"col-md-3 col-sm-4 col-xs-6\"\n          *ngFor=\"let cmp of searchResult || components\"\n          title=\"{{ cmp.description | translate }}\"\n        >\n          <div class=\"card p-8\" [class.active]=\"selected === cmp\" (click)=\"select(cmp)\">\n            <div class=\"text-center p-8 m-b-8 d-col flex-center bg-level-2\" role=\"none\">\n              <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n                <h1><i c8yIcon=\"file-image-o\"></i></h1>\n                <small translate>Preview not available</small>\n              </ng-container>\n              <ng-template #previewImage>\n                <img class=\"img-responsive\" alt=\"\" [src]=\"cmp.previewImage\" />\n              </ng-template>\n            </div>\n            <p class=\"card-title text-truncate\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n          </div>\n        </div>\n\n        <div class=\"c8y-empty-state text-center\" *ngIf=\"searchResult && searchResult.length === 0\">\n          <h1 c8yIcon=\"search\"></h1>\n          <h3 translate>No widgets found.</h3>\n          <div class=\"d-flex\">\n            <p translate class=\"m-r-8\">Rephrase your search term.</p>\n            <button\n              title=\"{{ 'Reset search' | translate }}\"\n              class=\"btn btn-primary\"\n              type=\"button\"\n              (click)=\"resetSearch()\"\n            >\n              {{ 'Reset search' | translate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- The following is intentional set to hidden to allow the ViewChild ref in the controller -->\n    <div *ngIf=\"selected\" [hidden]=\"mode !== 'config'\" style=\"max-height: calc(100vh - 290px)\">\n      <div class=\"p-t-16 flex-no-grow\">\n        <div class=\"row\">\n          <div class=\"col-sm-4\">\n            <div class=\"p-l-24\">\n              <h4 class=\"text-left text-medium\">\n                {{ selected.label | translate }}\n              </h4>\n              <p>\n                {{ selected.description | translate }}\n              </p>\n            </div>\n          </div>\n          <div class=\"col-sm-8\">\n            <div class=\"p-r-24\">\n              <c8y-form-group>\n                <label for=\"widgetTitle\" translate>Title</label>\n                <input\n                  id=\"widgetTitle\"\n                  [(ngModel)]=\"selected.data.title\"\n                  type=\"text\"\n                  name=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n                  required\n                />\n              </c8y-form-group>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"row flex-grow separator-top\"\n        [ngClass]=\"{ 'd-flex m-l-0': widgetConfig.options || hasConfig() }\"\n      >\n        <div\n          *ngIf=\"!widgetConfig.settings?.noDeviceTarget\"\n          class=\"a-i-stretch\"\n          [ngClass]=\"{\n            'bg-level-1 col-sm-4 p-l-0 p-r-0': hasConfig(),\n            'bg-level-0 col-sm-12': !hasConfig()\n          }\"\n          style=\"height: 360px\"\n        >\n          <div class=\"p-l-16 fit-h bg-inherit\" [ngClass]=\"{ 'p-r-16': !hasConfig() }\">\n            <c8y-asset-selector-miller\n              (onSelected)=\"selectionChanged($event)\"\n              [config]=\"{\n                view: 'miller',\n                groupsSelectable: this.widgetConfig.settings?.groupsSelectable,\n                showChildDevices: true,\n                columnHeaders: true,\n                showUnassignedDevices: true,\n                search: !this.widgetConfig.settings.context?.additionParents,\n                showFilter: true,\n                singleColumn: !!this.hasConfig()\n              }\"\n              [asset]=\"widgetConfig.settings?.context\"\n              [selectedDevice]=\"selectedDevice\"\n              class=\"bg-inherit p-relative\"\n            ></c8y-asset-selector-miller>\n          </div>\n        </div>\n        <div\n          [ngClass]=\"{\n            'col-sm-8': !widgetConfig.settings?.noDeviceTarget,\n            'col-sm-12 p-l-32 p-r-8': widgetConfig.settings?.noDeviceTarget\n          }\"\n        >\n          <c8y-dynamic-component\n            class=\"d-block p-t-8 p-r-24\"\n            [componentId]=\"selected.id\"\n            mode=\"config\"\n            [config]=\"widgetConfig\"\n            [notFoundError]=\"false\"\n            #config\n          ></c8y-dynamic-component>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"mode === 'style'\" class=\"modal-body p-t-0\" style=\"min-height: calc(100vh - 290px)\">\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\n          <c8y-appearance-settings\n            [(themeClass)]=\"styling.contentClass\"\n            [(headerClass)]=\"styling.headerClass\"\n            [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n            [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n            [defaultThemeClass]=\"defaultStyling.contentClass\"\n            [defaultHeaderClass]=\"defaultStyling.headerClass\"\n          ></c8y-appearance-settings>\n        </div>\n        <div class=\"col-xs-6 sticky-header-top-0\">\n          <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n        </div>\n      </div>\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=\"submit\"\n      class=\"btn btn-primary\"\n      (click)=\"save()\"\n      [disabled]=\"\n        contextDashboardService.formDisabled || configForm.invalid || checkIfDeviceRequired()\n      \"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'c8y-widget-config', template: "<div class=\"modal-header separator\">\n  <div id=\"modal-title\" class=\"h3\" title=\"{{ 'Add widget' | translate }}\" *ngIf=\"!current\" translate>Add widget</div>\n  <div id=\"modal-title\" class=\"h3\" title=\"{{ 'Edit widget' | translate }}\" *ngIf=\"current\" translate>Edit widget</div>\n</div>\n<form #configForm=\"ngForm\" name=\"form\">\n  <div class=\"c8y-modal-tabs\" id=\"modal-body\">\n    <div class=\"tabContainer\">\n      <ul class=\"nav nav-tabs nav-tabsc8y p-l-24\">\n        <li [class.active]=\"mode === 'select'\">\n          <button\n            title=\"{{ 'Select widget' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            (click)=\"changeMode('select'); (false)\"\n          >\n            <i c8yIcon=\"th-large\"></i>\n            <span translate>Select widget</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'config'\">\n          <button\n            title=\"{{ 'Configuration' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('config'); (false)\"\n          >\n            <i c8yIcon=\"cog\"></i>\n            <span translate>Configuration</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'style'\">\n          <button\n            title=\"{{ 'Appearance' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('style'); (false)\"\n          >\n            <i c8yIcon=\"paint-brush\"></i>\n            <span translate>Appearance</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"modal-inner-scroll\">\n    <div\n      *ngIf=\"mode === 'select'\"\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              [attr.aria-label]=\"'Search' | translate\"\n              class=\"form-control\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              [(ngModel)]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (keydown)=\"searchChange$.next($event)\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                title=\"{{ 'Search' | translate }}\"\n                type=\"button\"\n                (click)=\"resetSearch()\"\n              >\n                <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"modal-body bg-level-2\" *ngIf=\"mode === 'select'\">\n      <div class=\"card-group card-select m-b-0\">\n        <div\n          class=\"col-md-3 col-sm-4 col-xs-6\"\n          *ngFor=\"let cmp of searchResult || components\"\n          title=\"{{ cmp.description | translate }}\"\n        >\n          <div class=\"card p-8\" [class.active]=\"selected === cmp\" (click)=\"select(cmp)\">\n            <div class=\"text-center p-8 m-b-8 d-col flex-center bg-level-2\" role=\"none\">\n              <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              </ng-container>\n              <ng-template #previewImage>\n                <img class=\"img-responsive\" alt=\"\" [src]=\"cmp.previewImage\" />\n              </ng-template>\n            </div>\n            <p class=\"card-title text-truncate\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n          </div>\n        </div>\n\n        <div class=\"c8y-empty-state text-center\" *ngIf=\"searchResult && searchResult.length === 0\">\n          <div class=\"h1\" c8yIcon=\"search\"></div>\n          <h3 translate>No widgets found.</h3>\n          <div class=\"d-flex\">\n            <p translate class=\"m-r-8\">Rephrase your search term.</p>\n            <button\n              title=\"{{ 'Reset search' | translate }}\"\n              class=\"btn btn-primary\"\n              type=\"button\"\n              (click)=\"resetSearch()\"\n            >\n              {{ 'Reset search' | translate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- The following is intentional set to hidden to allow the ViewChild ref in the controller -->\n    <div *ngIf=\"selected\" [hidden]=\"mode !== 'config'\" style=\"max-height: calc(100vh - 290px)\">\n      <div class=\"p-t-16 flex-no-grow\">\n        <div class=\"row\">\n          <div class=\"col-sm-4\">\n            <div class=\"p-l-24\">\n              <h4 class=\"text-left text-medium\">\n                {{ selected.label | translate }}\n              </h4>\n              <p>\n                {{ selected.description | translate }}\n              </p>\n            </div>\n          </div>\n          <div class=\"col-sm-8\">\n            <div class=\"p-r-24\">\n              <c8y-form-group>\n                <label for=\"widgetTitle\" translate>Title</label>\n                <input\n                  id=\"widgetTitle\"\n                  [(ngModel)]=\"selected.data.title\"\n                  type=\"text\"\n                  name=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n                  required\n                />\n              </c8y-form-group>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"row flex-grow separator-top\"\n        [ngClass]=\"{ 'd-flex m-l-0': widgetConfig.options || hasConfig() }\"\n      >\n        <div\n          *ngIf=\"!widgetConfig.settings?.noDeviceTarget\"\n          class=\"a-i-stretch\"\n          [ngClass]=\"{\n            'bg-level-1 col-sm-4 p-l-0 p-r-0': hasConfig(),\n            'bg-level-0 col-sm-12': !hasConfig()\n          }\"\n          style=\"height: 360px\"\n        >\n          <div class=\"p-l-16 fit-h bg-inherit\" [ngClass]=\"{ 'p-r-16': !hasConfig() }\">\n            <c8y-asset-selector-miller\n              (onSelected)=\"selectionChanged($event)\"\n              [config]=\"{\n                view: 'miller',\n                groupsSelectable: this.widgetConfig.settings?.groupsSelectable,\n                showChildDevices: true,\n                columnHeaders: true,\n                showUnassignedDevices: true,\n                search: !this.widgetConfig.settings.context?.additionParents,\n                showFilter: true,\n                singleColumn: !!this.hasConfig()\n              }\"\n              [asset]=\"widgetConfig.settings?.context\"\n              [selectedDevice]=\"selectedDevice\"\n              class=\"bg-inherit p-relative\"\n            ></c8y-asset-selector-miller>\n          </div>\n        </div>\n        <div\n          [ngClass]=\"{\n            'col-sm-8': !widgetConfig.settings?.noDeviceTarget,\n            'col-sm-12 p-l-32 p-r-8': widgetConfig.settings?.noDeviceTarget\n          }\"\n        >\n          <c8y-dynamic-component\n            class=\"d-block p-t-8 p-r-24\"\n            [componentId]=\"selected.id\"\n            mode=\"config\"\n            [config]=\"widgetConfig\"\n            [notFoundError]=\"false\"\n            #config\n          ></c8y-dynamic-component>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"mode === 'style'\" class=\"modal-body p-t-0\" style=\"min-height: calc(100vh - 290px)\">\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\n          <c8y-appearance-settings\n            [(themeClass)]=\"styling.contentClass\"\n            [(headerClass)]=\"styling.headerClass\"\n            [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n            [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n            [defaultThemeClass]=\"defaultStyling.contentClass\"\n            [defaultHeaderClass]=\"defaultStyling.headerClass\"\n          ></c8y-appearance-settings>\n        </div>\n        <div class=\"col-xs-6 sticky-header-top-0\">\n          <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n        </div>\n      </div>\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=\"submit\"\n      class=\"btn btn-primary\"\n      (click)=\"save()\"\n      [disabled]=\"\n        contextDashboardService.formDisabled || configForm.invalid || checkIfDeviceRequired()\n      \"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: WidgetService }, { type: i3$1.BsModalRef }, { type: i1.InventoryService }, { type: ContextDashboardService }]; }, propDecorators: { dynamicComponent: [{
                 type: ViewChild,
                 args: ['config', { static: false }]
@@ -1666,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: {
@@ -1674,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]
@@ -2329,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
             },
             {
@@ -2541,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'),
@@ -2556,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'),