@c8y/ngx-components 1017.0.134 → 1017.0.135

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.
Files changed (12) hide show
  1. package/esm2020/assets-navigator/asset-selector/miller-view.component.mjs +3 -3
  2. package/esm2020/context-dashboard/widget-config.component.mjs +3 -3
  3. package/fesm2015/c8y-ngx-components-assets-navigator.mjs +2 -2
  4. package/fesm2015/c8y-ngx-components-assets-navigator.mjs.map +1 -1
  5. package/fesm2015/c8y-ngx-components-context-dashboard.mjs +2 -2
  6. package/fesm2015/c8y-ngx-components-context-dashboard.mjs.map +1 -1
  7. package/fesm2020/c8y-ngx-components-assets-navigator.mjs +2 -2
  8. package/fesm2020/c8y-ngx-components-assets-navigator.mjs.map +1 -1
  9. package/fesm2020/c8y-ngx-components-context-dashboard.mjs +2 -2
  10. package/fesm2020/c8y-ngx-components-context-dashboard.mjs.map +1 -1
  11. package/locales/locales.pot +18 -6
  12. package/package.json +2 -2
package/fesm2015/c8y-ngx-components-context-dashboard.mjs CHANGED
@@ -1260,10 +1260,10 @@ class WidgetConfigComponent {
1260
1260
  }
1261
1261
  }
1262
1262
  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 });
1263
- 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" }] });
1263
+ 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\n class=\"h3\"\n title=\"{{ 'Add widget' | translate }}\"\n id=\"modal-title\"\n *ngIf=\"!current\"\n translate\n >\n Add widget\n </div>\n <div\n class=\"h3\"\n title=\"{{ 'Edit widget' | translate }}\"\n id=\"modal-title\"\n *ngIf=\"current\"\n translate\n >\n Edit widget\n </div>\n</div>\n<form name=\"form\" #configForm=\"ngForm\">\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 class=\"btn\"\n type=\"button\"\n title=\"{{ 'Select widget' | translate }}\"\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 class=\"btn\"\n type=\"button\"\n title=\"{{ 'Configuration' | translate }}\"\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 class=\"btn\"\n type=\"button\"\n title=\"{{ 'Appearance' | translate }}\"\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 modal-inner-scroll--fixed\">\n <div\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 *ngIf=\"mode === 'select'\"\n >\n <div class=\"row\">\n <div class=\"col-sm-6\">\n <div class=\"input-group input-group-search\">\n <input\n class=\"form-control\"\n data-cy=\"widget-config--Search\"\n type=\"text\"\n [attr.aria-label]=\"'Search' | translate\"\n placeholder=\"{{ 'Search\u2026' | translate }}\"\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 type=\"button\"\n title=\"{{ 'Search' | translate }}\"\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 title=\"{{ cmp.description | translate }}\"\n *ngFor=\"let cmp of searchResult || components\"\n >\n <button\n class=\"btn-clean card p-8\"\n type=\"button\"\n [class.active]=\"selected === cmp\"\n (click)=\"select(cmp)\"\n >\n <div class=\"text-center p-8 m-b-8 d-col flex-center bg-level-2\" role=\"presentation\">\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 </button>\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 class=\"m-r-8\" translate>Rephrase your search term.</p>\n <button\n class=\"btn btn-primary\"\n type=\"button\"\n title=\"{{ 'Reset search' | translate }}\"\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 class=\"d-flex d-col fit-h\" *ngIf=\"selected\" [ngClass]=\"{ hidden: mode !== 'config' }\">\n <div class=\"p-t-16 flex-no-shrink separator-bottom p-b-16\">\n <div class=\"row\">\n <div class=\"col-sm-4\">\n <div class=\"p-l-24\">\n <div class=\"text-left text-medium h4\">\n {{ selected.label | translate }}\n </div>\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 class=\"form-control\"\n type=\"text\"\n id=\"widgetTitle\"\n name=\"title\"\n [(ngModel)]=\"selected.data.title\"\n placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n required\n />\n </c8y-form-group>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row flex-grow\" [ngClass]=\"{ 'd-flex': widgetConfig.options || hasConfig() }\">\n <div\n class=\"a-s-stretch\"\n *ngIf=\"!widgetConfig.settings?.noDeviceTarget\"\n [ngClass]=\"{\n 'bg-level-1 col-sm-4 p-r-0': hasConfig(),\n 'bg-level-0 col-sm-12': !hasConfig()\n }\"\n >\n <div class=\"fit-h bg-inherit p-l-16\" [ngClass]=\"{ 'p-r-24': !hasConfig() }\">\n <div class=\"p-relative bg-inherit\">\n <c8y-asset-selector-miller\n class=\"d-block bg-inherit p-relative\"\n style=\"height: calc(100vh - 422px)\"\n (onSelected)=\"selectionChanged($event)\"\n (onClearSelected)=\"selectionChanged()\"\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 ></c8y-asset-selector-miller>\n </div>\n </div>\n </div>\n <div\n [ngClass]=\"{\n 'col-sm-8': !widgetConfig.settings?.noDeviceTarget,\n 'col-sm-12': widgetConfig.settings?.noDeviceTarget,\n 'sr-only': !hasConfig()\n }\"\n >\n <c8y-dynamic-component\n class=\"d-block\"\n style=\"height: {{ hasConfig() ? 'calc(100vh - 422px)' : '0' }}\"\n [ngClass]=\"{ 'inner-scroll p-r-24': !widgetConfig.settings?.noDeviceTarget }\"\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 class=\"modal-body p-t-0\" style=\"height: calc(100vh - 310px)\" *ngIf=\"mode === 'style'\">\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\n style=\"height: calc(100vh - 382px)\"\n [previewClasses]=\"getStyle(true)\"\n ></c8y-widget-preview>\n </div>\n </div>\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=\"submit\"\n title=\"{{ 'Save' | translate }}\"\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" }] });
1264
1264
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetConfigComponent, decorators: [{
1265
1265
  type: Component,
1266
- 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" }]
1266
+ args: [{ selector: 'c8y-widget-config', template: "<div class=\"modal-header separator\">\n <div\n class=\"h3\"\n title=\"{{ 'Add widget' | translate }}\"\n id=\"modal-title\"\n *ngIf=\"!current\"\n translate\n >\n Add widget\n </div>\n <div\n class=\"h3\"\n title=\"{{ 'Edit widget' | translate }}\"\n id=\"modal-title\"\n *ngIf=\"current\"\n translate\n >\n Edit widget\n </div>\n</div>\n<form name=\"form\" #configForm=\"ngForm\">\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 class=\"btn\"\n type=\"button\"\n title=\"{{ 'Select widget' | translate }}\"\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 class=\"btn\"\n type=\"button\"\n title=\"{{ 'Configuration' | translate }}\"\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 class=\"btn\"\n type=\"button\"\n title=\"{{ 'Appearance' | translate }}\"\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 modal-inner-scroll--fixed\">\n <div\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 *ngIf=\"mode === 'select'\"\n >\n <div class=\"row\">\n <div class=\"col-sm-6\">\n <div class=\"input-group input-group-search\">\n <input\n class=\"form-control\"\n data-cy=\"widget-config--Search\"\n type=\"text\"\n [attr.aria-label]=\"'Search' | translate\"\n placeholder=\"{{ 'Search\u2026' | translate }}\"\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 type=\"button\"\n title=\"{{ 'Search' | translate }}\"\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 title=\"{{ cmp.description | translate }}\"\n *ngFor=\"let cmp of searchResult || components\"\n >\n <button\n class=\"btn-clean card p-8\"\n type=\"button\"\n [class.active]=\"selected === cmp\"\n (click)=\"select(cmp)\"\n >\n <div class=\"text-center p-8 m-b-8 d-col flex-center bg-level-2\" role=\"presentation\">\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 </button>\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 class=\"m-r-8\" translate>Rephrase your search term.</p>\n <button\n class=\"btn btn-primary\"\n type=\"button\"\n title=\"{{ 'Reset search' | translate }}\"\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 class=\"d-flex d-col fit-h\" *ngIf=\"selected\" [ngClass]=\"{ hidden: mode !== 'config' }\">\n <div class=\"p-t-16 flex-no-shrink separator-bottom p-b-16\">\n <div class=\"row\">\n <div class=\"col-sm-4\">\n <div class=\"p-l-24\">\n <div class=\"text-left text-medium h4\">\n {{ selected.label | translate }}\n </div>\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 class=\"form-control\"\n type=\"text\"\n id=\"widgetTitle\"\n name=\"title\"\n [(ngModel)]=\"selected.data.title\"\n placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n required\n />\n </c8y-form-group>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row flex-grow\" [ngClass]=\"{ 'd-flex': widgetConfig.options || hasConfig() }\">\n <div\n class=\"a-s-stretch\"\n *ngIf=\"!widgetConfig.settings?.noDeviceTarget\"\n [ngClass]=\"{\n 'bg-level-1 col-sm-4 p-r-0': hasConfig(),\n 'bg-level-0 col-sm-12': !hasConfig()\n }\"\n >\n <div class=\"fit-h bg-inherit p-l-16\" [ngClass]=\"{ 'p-r-24': !hasConfig() }\">\n <div class=\"p-relative bg-inherit\">\n <c8y-asset-selector-miller\n class=\"d-block bg-inherit p-relative\"\n style=\"height: calc(100vh - 422px)\"\n (onSelected)=\"selectionChanged($event)\"\n (onClearSelected)=\"selectionChanged()\"\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 ></c8y-asset-selector-miller>\n </div>\n </div>\n </div>\n <div\n [ngClass]=\"{\n 'col-sm-8': !widgetConfig.settings?.noDeviceTarget,\n 'col-sm-12': widgetConfig.settings?.noDeviceTarget,\n 'sr-only': !hasConfig()\n }\"\n >\n <c8y-dynamic-component\n class=\"d-block\"\n style=\"height: {{ hasConfig() ? 'calc(100vh - 422px)' : '0' }}\"\n [ngClass]=\"{ 'inner-scroll p-r-24': !widgetConfig.settings?.noDeviceTarget }\"\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 class=\"modal-body p-t-0\" style=\"height: calc(100vh - 310px)\" *ngIf=\"mode === 'style'\">\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\n style=\"height: calc(100vh - 382px)\"\n [previewClasses]=\"getStyle(true)\"\n ></c8y-widget-preview>\n </div>\n </div>\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=\"submit\"\n title=\"{{ 'Save' | translate }}\"\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" }]
1267
1267
  }], ctorParameters: function () { return [{ type: WidgetService }, { type: i3$1.BsModalRef }, { type: i1.InventoryService }, { type: ContextDashboardService }]; }, propDecorators: { dynamicComponent: [{
1268
1268
  type: ViewChild,
1269
1269
  args: ['config', { static: false }]