@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
|
@@ -1075,9 +1075,10 @@ class WidgetConfigComponent {
|
|
|
1075
1075
|
}
|
|
1076
1076
|
}
|
|
1077
1077
|
checkIfDeviceRequired() {
|
|
1078
|
-
return (!this.widgetConfig
|
|
1079
|
-
!this.widgetConfig.
|
|
1080
|
-
|
|
1078
|
+
return (!this.widgetConfig ||
|
|
1079
|
+
(!this.widgetConfig.settings.deviceTargetNotRequired &&
|
|
1080
|
+
!this.widgetConfig.device &&
|
|
1081
|
+
!this.widgetConfig.settings.noDeviceTarget));
|
|
1081
1082
|
}
|
|
1082
1083
|
selectionChanged(selection) {
|
|
1083
1084
|
this.widgetConfig.device = selection.change.item;
|
|
@@ -1231,10 +1232,10 @@ class WidgetConfigComponent {
|
|
|
1231
1232
|
}
|
|
1232
1233
|
}
|
|
1233
1234
|
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 });
|
|
1234
|
-
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" }] });
|
|
1235
|
+
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" }] });
|
|
1235
1236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetConfigComponent, decorators: [{
|
|
1236
1237
|
type: Component,
|
|
1237
|
-
args: [{ selector: 'c8y-widget-config', template: "<div class=\"modal-header separator\">\n <
|
|
1238
|
+
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" }]
|
|
1238
1239
|
}], ctorParameters: function () { return [{ type: WidgetService }, { type: i3$1.BsModalRef }, { type: i1.InventoryService }, { type: ContextDashboardService }]; }, propDecorators: { dynamicComponent: [{
|
|
1239
1240
|
type: ViewChild,
|
|
1240
1241
|
args: ['config', { static: false }]
|