@c8y/ngx-components 1018.0.21 → 1018.0.22

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.
@@ -783,7 +783,7 @@ class DashboardDetailComponent {
783
783
  }
784
784
  ngAfterContentInit() {
785
785
  const defaultDashboardCfg = {
786
- name: this.isReport ? 'Report' : 'Dashboard',
786
+ name: this.translateService.instant(this.isReport ? gettext('Report') : gettext('Dashboard')),
787
787
  priority: this.isReport
788
788
  ? REPORT_DEFAULT_NAVIGATION_NODE_PRIORITY
789
789
  : this.DEFAULT_DASHBOARD_PRIORITY,
@@ -807,8 +807,12 @@ class DashboardDetailComponent {
807
807
  this.globalRolesIds = this.dashboard.globalRolesIds;
808
808
  }
809
809
  setTitle() {
810
- this.titleName = this.isReport ? gettext('report') : gettext('dashboard');
811
- this.titleAction = this.currentDashboard ? gettext('Edit') : gettext('Add');
810
+ if (!this.currentDashboard) {
811
+ this.title = this.isReport ? gettext('Add report') : gettext('Add dashboard');
812
+ }
813
+ else {
814
+ this.title = this.isReport ? gettext('Edit report') : gettext('Edit dashboard');
815
+ }
812
816
  }
813
817
  setupApplyToDevicesOfTypeCheckbox() {
814
818
  const rolesToCheck = ['ROLE_INVENTORY_CREATE', 'ROLE_INVENTORY_ADMIN'];
@@ -862,10 +866,10 @@ class DashboardDetailComponent {
862
866
  }
863
867
  }
864
868
  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: i5.NavigatorService }, { token: i5.Permissions }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
865
- 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 type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Menu label to display in submenu when dashboard is attached' | translate\n }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n ></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 type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Position in navigation menu (10000 first, -10000 last)' | translate\n }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n ></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 type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"positionInNavPop\"\n triggers=\"focus\"\n placement=\"right\"\n container=\"body\"\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 [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n ngNonBindable\n translate\n >\n Apply dashboard to all devices of type\n <i>{{ type }}</i>\n </span>\n </label>\n </div>\n\n <div 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 class=\"btn btn-default\"\n type=\"button\"\n title=\"{{ 'Cancel' | translate }}\"\n (click)=\"close()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n <button\n class=\"btn btn-primary\"\n type=\"button\"\n title=\"{{ 'Save' | translate }}\"\n (click)=\"save()\"\n [disabled]=\"dashboardDetailForm.form.invalid || dashboardDetailForm.form.pristine\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i5.MaxValidationDirective, selector: "[max]", inputs: ["max"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i5.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "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: i5.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.SlicePipe, name: "slice" }] });
869
+ 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 type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Menu label to display in submenu when dashboard is attached' | translate\n }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n ></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 type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Position in navigation menu (10000 first, -10000 last)' | translate\n }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n ></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 type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"positionInNavPop\"\n triggers=\"focus\"\n placement=\"right\"\n container=\"body\"\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 [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n ngNonBindable\n translate\n >\n Apply dashboard to all devices of type\n <i>{{ type }}</i>\n </span>\n </label>\n </div>\n\n <div 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 class=\"btn btn-default\"\n type=\"button\"\n title=\"{{ 'Cancel' | translate }}\"\n (click)=\"close()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n <button\n class=\"btn btn-primary\"\n type=\"button\"\n title=\"{{ 'Save' | translate }}\"\n (click)=\"save()\"\n [disabled]=\"dashboardDetailForm.form.invalid || dashboardDetailForm.form.pristine\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i5.MaxValidationDirective, selector: "[max]", inputs: ["max"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i5.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "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: i5.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.SlicePipe, name: "slice" }] });
866
870
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DashboardDetailComponent, decorators: [{
867
871
  type: Component,
868
- 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 type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Menu label to display in submenu when dashboard is attached' | translate\n }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n ></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 type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Position in navigation menu (10000 first, -10000 last)' | translate\n }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n ></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 type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"positionInNavPop\"\n triggers=\"focus\"\n placement=\"right\"\n container=\"body\"\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 [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n ngNonBindable\n translate\n >\n Apply dashboard to all devices of type\n <i>{{ type }}</i>\n </span>\n </label>\n </div>\n\n <div 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 class=\"btn btn-default\"\n type=\"button\"\n title=\"{{ 'Cancel' | translate }}\"\n (click)=\"close()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n <button\n class=\"btn btn-primary\"\n type=\"button\"\n title=\"{{ 'Save' | translate }}\"\n (click)=\"save()\"\n [disabled]=\"dashboardDetailForm.form.invalid || dashboardDetailForm.form.pristine\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</div>\n" }]
872
+ 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 type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Menu label to display in submenu when dashboard is attached' | translate\n }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n ></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 type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Position in navigation menu (10000 first, -10000 last)' | translate\n }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n ></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 type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"positionInNavPop\"\n triggers=\"focus\"\n placement=\"right\"\n container=\"body\"\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 [translateParams]=\"{ type: dashboard.deviceTypeValue }\"\n ngNonBindable\n translate\n >\n Apply dashboard to all devices of type\n <i>{{ type }}</i>\n </span>\n </label>\n </div>\n\n <div 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 class=\"btn btn-default\"\n type=\"button\"\n title=\"{{ 'Cancel' | translate }}\"\n (click)=\"close()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n <button\n class=\"btn btn-primary\"\n type=\"button\"\n title=\"{{ 'Save' | translate }}\"\n (click)=\"save()\"\n [disabled]=\"dashboardDetailForm.form.invalid || dashboardDetailForm.form.pristine\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</div>\n" }]
869
873
  }], ctorParameters: function () { return [{ type: i3$1.BsModalRef }, { type: undefined, decorators: [{
870
874
  type: Inject,
871
875
  args: [ICON_LIST]