@c8y/ngx-components 1017.0.129 → 1017.0.130

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -756,7 +756,7 @@ class DashboardDetailComponent {
756
756
  }
757
757
  ngAfterContentInit() {
758
758
  const defaultDashboardCfg = {
759
- name: this.isReport ? 'Report' : 'Dashboard',
759
+ name: this.translateService.instant(this.isReport ? gettext('Report') : gettext('Dashboard')),
760
760
  priority: this.isReport
761
761
  ? REPORT_DEFAULT_NAVIGATION_NODE_PRIORITY
762
762
  : this.DEFAULT_DASHBOARD_PRIORITY,
@@ -780,8 +780,12 @@ class DashboardDetailComponent {
780
780
  this.globalRolesIds = this.dashboard.globalRolesIds;
781
781
  }
782
782
  setTitle() {
783
- this.titleName = this.isReport ? gettext('report') : gettext('dashboard');
784
- this.titleAction = this.currentDashboard ? gettext('Edit') : gettext('Add');
783
+ if (!this.currentDashboard) {
784
+ this.title = this.isReport ? gettext('Add report') : gettext('Add dashboard');
785
+ }
786
+ else {
787
+ this.title = this.isReport ? gettext('Edit report') : gettext('Edit dashboard');
788
+ }
785
789
  }
786
790
  setupApplyToDevicesOfTypeCheckbox() {
787
791
  const rolesToCheck = ['ROLE_INVENTORY_CREATE', 'ROLE_INVENTORY_ADMIN'];
@@ -835,10 +839,10 @@ class DashboardDetailComponent {
835
839
  }
836
840
  }
837
841
  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 });
838
- 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" }] });
842
+ 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\">{{ title | 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" }] });
839
843
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DashboardDetailComponent, decorators: [{
840
844
  type: Component,
841
- 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" }]
845
+ args: [{ selector: 'c8y-dashboard-detail', template: "<div class=\"viewport-modal\">\n <div class=\"modal-header separator-bottom\">\n <h3 id=\"modal-title\">{{ title | translate }}</h3>\n </div>\n\n <div 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" }]
842
846
  }], ctorParameters: function () { return [{ type: i3$1.BsModalRef }, { type: undefined, decorators: [{
843
847
  type: Inject,
844
848
  args: [ICON_LIST]