@c8y/ngx-components 1017.0.7 → 1017.0.8
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.
- package/ecosystem/packages/package-list/packages-list.component.d.ts +1 -0
- package/esm2020/context-dashboard/widget-config.component.mjs +7 -6
- package/esm2020/core/authentication/sms-challenge.component.mjs +3 -3
- package/esm2020/core/common/empty-state/empty-state.component.mjs +3 -3
- package/esm2020/core/login/recover-password.component.mjs +3 -3
- package/esm2020/core/tabs/tabs-outlet.component.mjs +3 -3
- package/esm2020/ecosystem/applications/install-from-package/install-from-package.component.mjs +3 -3
- package/esm2020/ecosystem/packages/package-list/packages-list.component.mjs +5 -4
- package/fesm2015/c8y-ngx-components-context-dashboard.mjs +6 -5
- package/fesm2015/c8y-ngx-components-context-dashboard.mjs.map +1 -1
- package/fesm2015/c8y-ngx-components-ecosystem.mjs +5 -4
- package/fesm2015/c8y-ngx-components-ecosystem.mjs.map +1 -1
- package/fesm2015/c8y-ngx-components.mjs +8 -8
- package/fesm2015/c8y-ngx-components.mjs.map +1 -1
- package/fesm2020/c8y-ngx-components-context-dashboard.mjs +6 -5
- package/fesm2020/c8y-ngx-components-context-dashboard.mjs.map +1 -1
- package/fesm2020/c8y-ngx-components-ecosystem.mjs +5 -4
- package/fesm2020/c8y-ngx-components-ecosystem.mjs.map +1 -1
- package/fesm2020/c8y-ngx-components.mjs +8 -8
- package/fesm2020/c8y-ngx-components.mjs.map +1 -1
- package/locales/locales.pot +15 -7
- package/package.json +2 -2
|
@@ -1114,9 +1114,10 @@ class WidgetConfigComponent {
|
|
|
1114
1114
|
});
|
|
1115
1115
|
}
|
|
1116
1116
|
checkIfDeviceRequired() {
|
|
1117
|
-
return (!this.widgetConfig
|
|
1118
|
-
!this.widgetConfig.
|
|
1119
|
-
|
|
1117
|
+
return (!this.widgetConfig ||
|
|
1118
|
+
(!this.widgetConfig.settings.deviceTargetNotRequired &&
|
|
1119
|
+
!this.widgetConfig.device &&
|
|
1120
|
+
!this.widgetConfig.settings.noDeviceTarget));
|
|
1120
1121
|
}
|
|
1121
1122
|
selectionChanged(selection) {
|
|
1122
1123
|
this.widgetConfig.device = selection.change.item;
|
|
@@ -1255,10 +1256,10 @@ class WidgetConfigComponent {
|
|
|
1255
1256
|
}
|
|
1256
1257
|
}
|
|
1257
1258
|
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 });
|
|
1258
|
-
WidgetConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WidgetConfigComponent, selector: "c8y-widget-config", viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["config"], descendants: true }], ngImport: i0, template: "<div class=\"modal-header separator\">\n <h3 id=\"mdoal-title\" title=\"{{ 'Add widget' | translate }}\" *ngIf=\"!current\" translate>Add widget</h3>\n <h3 id=\"modal-title\" title=\"{{ 'Edit widget' | translate }}\" *ngIf=\"current\" translate>Edit widget</h3>\n</div>\n<form #configForm=\"ngForm\" name=\"form\">\n <div class=\"c8y-modal-tabs\" id=\"modal-body\">\n <div class=\"tabContainer\">\n <ul class=\"nav nav-tabs nav-tabsc8y p-l-24\">\n <li [class.active]=\"mode === 'select'\">\n <button\n title=\"{{ 'Select widget' | translate }}\"\n type=\"button\"\n class=\"btn\"\n (click)=\"changeMode('select'); (false)\"\n >\n <i c8yIcon=\"th-large\"></i>\n <span translate>Select widget</span>\n </button>\n </li>\n <li [class.active]=\"mode === 'config'\">\n <button\n title=\"{{ 'Configuration' | translate }}\"\n type=\"button\"\n class=\"btn\"\n [disabled]=\"!selected\"\n (click)=\"changeMode('config'); (false)\"\n >\n <i c8yIcon=\"cog\"></i>\n <span translate>Configuration</span>\n </button>\n </li>\n <li [class.active]=\"mode === 'style'\">\n <button\n title=\"{{ 'Appearance' | translate }}\"\n type=\"button\"\n class=\"btn\"\n [disabled]=\"!selected\"\n (click)=\"changeMode('style'); (false)\"\n >\n <i c8yIcon=\"paint-brush\"></i>\n <span translate>Appearance</span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n\n <div class=\"modal-inner-scroll\">\n <div\n *ngIf=\"mode === 'select'\"\n class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0\"\n style=\"z-index: 2\"\n >\n <div class=\"row\">\n <div class=\"col-sm-6\">\n <div class=\"input-group input-group-search\">\n <input\n [attr.aria-label]=\"'Search' | translate\"\n class=\"form-control\"\n placeholder=\"{{ 'Search\u2026' | translate }}\"\n type=\"text\"\n [(ngModel)]=\"searchTerm\"\n [ngModelOptions]=\"{ standalone: true }\"\n (keydown)=\"searchChange$.next($event)\"\n />\n <span class=\"input-group-btn\">\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Search' | translate }}\"\n type=\"button\"\n (click)=\"resetSearch()\"\n >\n <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n </button>\n </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"modal-body bg-level-2\" *ngIf=\"mode === 'select'\">\n <div class=\"card-group card-select m-b-0\">\n <div\n class=\"col-md-3 col-sm-4 col-xs-6\"\n *ngFor=\"let cmp of searchResult || components\"\n title=\"{{ cmp.description | translate }}\"\n >\n <div class=\"card p-8\" [class.active]=\"selected === cmp\" (click)=\"select(cmp)\">\n <div class=\"text-center p-8 m-b-8 d-col flex-center bg-level-2\" role=\"none\">\n <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n <h1><i c8yIcon=\"file-image-o\"></i></h1>\n <small translate>Preview not available</small>\n </ng-container>\n <ng-template #previewImage>\n <img class=\"img-responsive\" alt=\"\" [src]=\"cmp.previewImage\" />\n </ng-template>\n </div>\n <p class=\"card-title text-truncate\">\n <c8y-highlight\n text=\"{{ cmp.label | translate }}\"\n [pattern]=\"searchTerm\"\n ></c8y-highlight>\n </p>\n </div>\n </div>\n\n <div class=\"c8y-empty-state text-center\" *ngIf=\"searchResult && searchResult.length === 0\">\n <h1 c8yIcon=\"search\"></h1>\n <h3 translate>No widgets found.</h3>\n <div class=\"d-flex\">\n <p translate class=\"m-r-8\">Rephrase your search term.</p>\n <button\n title=\"{{ 'Reset search' | translate }}\"\n class=\"btn btn-primary\"\n type=\"button\"\n (click)=\"resetSearch()\"\n >\n {{ 'Reset search' | translate }}\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- The following is intentional set to hidden to allow the ViewChild ref in the controller -->\n <div *ngIf=\"selected\" [hidden]=\"mode !== 'config'\" style=\"max-height: calc(100vh - 290px)\">\n <div class=\"p-t-16 flex-no-grow\">\n <div class=\"row\">\n <div class=\"col-sm-4\">\n <div class=\"p-l-24\">\n <h4 class=\"text-left text-medium\">\n {{ selected.label | translate }}\n </h4>\n <p>\n {{ selected.description | translate }}\n </p>\n </div>\n </div>\n <div class=\"col-sm-8\">\n <div class=\"p-r-24\">\n <c8y-form-group>\n <label for=\"widgetTitle\" translate>Title</label>\n <input\n id=\"widgetTitle\"\n [(ngModel)]=\"selected.data.title\"\n type=\"text\"\n name=\"title\"\n class=\"form-control\"\n placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n required\n />\n </c8y-form-group>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"row flex-grow separator-top\"\n [ngClass]=\"{ 'd-flex m-l-0': widgetConfig.options || hasConfig() }\"\n >\n <div\n *ngIf=\"!widgetConfig.settings?.noDeviceTarget\"\n class=\"a-i-stretch\"\n [ngClass]=\"{\n 'bg-level-1 col-sm-4 p-l-0 p-r-0': hasConfig(),\n 'bg-level-0 col-sm-12': !hasConfig()\n }\"\n style=\"height: 360px\"\n >\n <div class=\"p-l-16 fit-h bg-inherit\" [ngClass]=\"{ 'p-r-16': !hasConfig() }\">\n <c8y-asset-selector-miller\n (onSelected)=\"selectionChanged($event)\"\n [config]=\"{\n view: 'miller',\n groupsSelectable: this.widgetConfig.settings?.groupsSelectable,\n showChildDevices: true,\n columnHeaders: true,\n showUnassignedDevices: true,\n search: !this.widgetConfig.settings.context?.additionParents,\n showFilter: true,\n singleColumn: !!this.hasConfig()\n }\"\n [asset]=\"widgetConfig.settings?.context\"\n [selectedDevice]=\"selectedDevice\"\n class=\"bg-inherit p-relative\"\n ></c8y-asset-selector-miller>\n </div>\n </div>\n <div\n [ngClass]=\"{\n 'col-sm-8': !widgetConfig.settings?.noDeviceTarget,\n 'col-sm-12 p-l-32 p-r-8': widgetConfig.settings?.noDeviceTarget\n }\"\n >\n <c8y-dynamic-component\n class=\"d-block p-t-8 p-r-24\"\n [componentId]=\"selected.id\"\n mode=\"config\"\n [config]=\"widgetConfig\"\n [notFoundError]=\"false\"\n #config\n ></c8y-dynamic-component>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"mode === 'style'\" class=\"modal-body p-t-0\" style=\"min-height: calc(100vh - 290px)\">\n <div class=\"row\">\n <div class=\"col-xs-6\">\n <c8y-appearance-settings\n [(themeClass)]=\"styling.contentClass\"\n [(headerClass)]=\"styling.headerClass\"\n [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n [defaultThemeClass]=\"defaultStyling.contentClass\"\n [defaultHeaderClass]=\"defaultStyling.headerClass\"\n ></c8y-appearance-settings>\n </div>\n <div class=\"col-xs-6 sticky-header-top-0\">\n <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"modal-footer\">\n <button\n title=\"{{ 'Cancel' | translate }}\"\n type=\"button\"\n class=\"btn btn-default\"\n (click)=\"close()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n <button\n title=\"{{ 'Save' | translate }}\"\n type=\"submit\"\n class=\"btn btn-primary\"\n (click)=\"save()\"\n [disabled]=\"\n contextDashboardService.formDisabled || configForm.invalid || checkIfDeviceRequired()\n \"\n c8yProductExperience\n [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n [actionData]=\"{ widgetName: selected && selected.id }\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</form>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { kind: "component", type: i8$1.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "possibleStylingTheme", "possibleStylingHeader"], outputs: ["themeClassChange", "headerClassChange"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses", "tab"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
|
|
1259
|
+
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" }] });
|
|
1259
1260
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetConfigComponent, decorators: [{
|
|
1260
1261
|
type: Component,
|
|
1261
|
-
args: [{ selector: 'c8y-widget-config', template: "<div class=\"modal-header separator\">\n <
|
|
1262
|
+
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" }]
|
|
1262
1263
|
}], ctorParameters: function () { return [{ type: WidgetService }, { type: i3$1.BsModalRef }, { type: i1.InventoryService }, { type: ContextDashboardService }]; }, propDecorators: { dynamicComponent: [{
|
|
1263
1264
|
type: ViewChild,
|
|
1264
1265
|
args: ['config', { static: false }]
|