@c8y/ngx-components 1023.88.4 → 1023.92.0

package/fesm2022/c8y-ngx-components-context-dashboard.mjs

@@ -2470,11 +2470,11 @@ class WidgetPreviewComponent {
         return this.widgetConfig?.mo.c8y_Dashboard.translateWidgetTitle ?? false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WidgetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: WidgetPreviewComponent, isStandalone: true, selector: "c8y-widget-preview", inputs: { previewClasses: "previewClasses" }, host: { classAttribute: "flex-grow d-flex d-col" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16 flex-grow d-flex d-col min-height-0\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot flex-grow min-height-0\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    <c8y-dashboard-child\n      [isFrozen]=\"true\"\n      [width]=\"1\"\n      [height]=\"6\"\n    >\n      <c8y-dashboard-child-title>\n        <span>\n          {{\n            (widgetConfigService.selected$ | async)?.data?.title\n              | translate: { noTranslateRemoveContext: !translateWidgetTitle }\n          }}\n        </span>\n      </c8y-dashboard-child-title>\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'noPreview') {\n        <div class=\"fit-h d-flex d-col j-c-center a-i-center\">\n          <c8y-ui-empty-state\n            [icon]=\"'visibility-off'\"\n            [title]=\"'No preview available.' | translate\"\n            [subtitle]=\"'This widget does not provide any preview.' | translate\"\n            [horizontal]=\"false\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'configPreview') {\n        <c8y-dynamic-component\n          [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n          [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n        ></c8y-dynamic-component>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'templatePreview') {\n        <ng-template [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"></ng-template>\n      }\n    </c8y-dashboard-child>\n  </c8y-dashboard>\n</fieldset>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "component", type: i2.DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: i2.DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: i2.DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: WidgetPreviewComponent, isStandalone: true, selector: "c8y-widget-preview", inputs: { previewClasses: "previewClasses" }, host: { classAttribute: "flex-grow d-flex d-col" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16 flex-grow d-flex d-col min-height-0\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot flex-grow min-height-0\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    <c8y-dashboard-child\n      [isFrozen]=\"true\"\n      [width]=\"1\"\n      [height]=\"6\"\n    >\n      @let widgetTitle =\n        (widgetConfigService.selected$ | async)?.data?.title\n          | translate: { noTranslateRemoveContext: !translateWidgetTitle };\n      <c8y-dashboard-child-title [attr.title]=\"widgetTitle\">\n        <span>\n          {{ widgetTitle }}\n        </span>\n      </c8y-dashboard-child-title>\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'noPreview') {\n        <div class=\"fit-h d-flex d-col j-c-center a-i-center\">\n          <c8y-ui-empty-state\n            [icon]=\"'visibility-off'\"\n            [title]=\"'No preview available.' | translate\"\n            [subtitle]=\"'This widget does not provide any preview.' | translate\"\n            [horizontal]=\"false\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'configPreview') {\n        <c8y-dynamic-component\n          [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n          [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n        ></c8y-dynamic-component>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'templatePreview') {\n        <ng-template [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"></ng-template>\n      }\n    </c8y-dashboard-child>\n  </c8y-dashboard>\n</fieldset>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "component", type: i2.DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: i2.DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: i2.DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WidgetPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-widget-preview', host: { class: 'flex-grow d-flex d-col' }, standalone: true, imports: [NgClass, C8yTranslatePipe, CommonModule, CoreModule], template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16 flex-grow d-flex d-col min-height-0\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot flex-grow min-height-0\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    <c8y-dashboard-child\n      [isFrozen]=\"true\"\n      [width]=\"1\"\n      [height]=\"6\"\n    >\n      <c8y-dashboard-child-title>\n        <span>\n          {{\n            (widgetConfigService.selected$ | async)?.data?.title\n              | translate: { noTranslateRemoveContext: !translateWidgetTitle }\n          }}\n        </span>\n      </c8y-dashboard-child-title>\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'noPreview') {\n        <div class=\"fit-h d-flex d-col j-c-center a-i-center\">\n          <c8y-ui-empty-state\n            [icon]=\"'visibility-off'\"\n            [title]=\"'No preview available.' | translate\"\n            [subtitle]=\"'This widget does not provide any preview.' | translate\"\n            [horizontal]=\"false\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'configPreview') {\n        <c8y-dynamic-component\n          [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n          [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n        ></c8y-dynamic-component>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'templatePreview') {\n        <ng-template [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"></ng-template>\n      }\n    </c8y-dashboard-child>\n  </c8y-dashboard>\n</fieldset>\n" }]
+            args: [{ selector: 'c8y-widget-preview', host: { class: 'flex-grow d-flex d-col' }, standalone: true, imports: [NgClass, C8yTranslatePipe, CommonModule, CoreModule], template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16 flex-grow d-flex d-col min-height-0\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot flex-grow min-height-0\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    <c8y-dashboard-child\n      [isFrozen]=\"true\"\n      [width]=\"1\"\n      [height]=\"6\"\n    >\n      @let widgetTitle =\n        (widgetConfigService.selected$ | async)?.data?.title\n          | translate: { noTranslateRemoveContext: !translateWidgetTitle };\n      <c8y-dashboard-child-title [attr.title]=\"widgetTitle\">\n        <span>\n          {{ widgetTitle }}\n        </span>\n      </c8y-dashboard-child-title>\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'noPreview') {\n        <div class=\"fit-h d-flex d-col j-c-center a-i-center\">\n          <c8y-ui-empty-state\n            [icon]=\"'visibility-off'\"\n            [title]=\"'No preview available.' | translate\"\n            [subtitle]=\"'This widget does not provide any preview.' | translate\"\n            [horizontal]=\"false\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'configPreview') {\n        <c8y-dynamic-component\n          [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n          [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n        ></c8y-dynamic-component>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'templatePreview') {\n        <ng-template [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"></ng-template>\n      }\n    </c8y-dashboard-child>\n  </c8y-dashboard>\n</fieldset>\n" }]
         }], propDecorators: { previewClasses: [{
                 type: Input
             }] } });
@@ -2491,7 +2491,7 @@ class WidgetService {
     async getWidgetDefinition(componentId) {
         return this.dynamicComponentService.getById(componentId);
     }
-    getWidgetDefinitions() {
+    async getWidgetDefinitions(assetMo, dashboardMo) {
         const translatedComponents = this.widgets.map(cmp => ({
             ...cmp,
             label: this.translateService.instant(cmp.label)
@@ -2501,7 +2501,21 @@ class WidgetService {
         const translatedComponentsWithoutInjector = translatedComponents.map(cmp => omit(cmp, 'injector'));
         const filterFn = this.moduleConfig?.widgetFilter ||
             (({ data }) => !(data && data.settings && data.settings.noNewWidgets));
-        return cloneDeep(sortBy(translatedComponentsWithoutInjector, 'label').filter(filterFn));
+        const filtered = cloneDeep(sortBy(translatedComponentsWithoutInjector, 'label').filter(filterFn));
+        const selectableChecks = await Promise.all(filtered.map(async (cmp) => {
+            const isWidgetSelectableFn = cmp.data?.settings?.isWidgetSelectable;
+            if (!isWidgetSelectableFn) {
+                return true;
+            }
+            try {
+                return !!(await isWidgetSelectableFn({ assetMo, dashboardMo }));
+            }
+            catch (e) {
+                console.error(`Error while checking if widget ${cmp.id} is selectable for asset ${assetMo?.id} and dashboard ${dashboardMo?.id}`, e);
+                return false;
+            }
+        }));
+        return filtered.filter((_, i) => selectableChecks[i]);
     }
     async mapLegacy(widget) {
         const cmp = await this.getWidgetDefinition(widget.componentId || widget.name);
@@ -2587,7 +2601,7 @@ class WidgetConfigComponent {
         }
     }
     async ngAfterContentInit() {
-        this.components = this.widgetService.getWidgetDefinitions();
+        this.components = await this.widgetService.getWidgetDefinitions(this.context, this.mo);
         if (this.selected) {
             this.current = clone(this.selected);
             this.select(this.selected, this.isEdit ? 'config' : 'select');
@@ -4442,7 +4456,7 @@ class GlobalContextSectionComponent {
         this.widgetConfigService.updateConfig(event.context);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GlobalContextSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: GlobalContextSectionComponent, isStandalone: true, selector: "c8y-global-context-section", inputs: { widgetControls: "widgetControls", controls: "controls" }, ngImport: i0, template: "<div>\n  @if (useControls) {\n    <c8y-config-mode-controls\n      [controls]=\"controls\"\n      [config]=\"widgetConfigService.currentConfig$ | async\"\n      (configChange)=\"onConfigChange($event)\"\n    ></c8y-config-mode-controls>\n  } @else if (widgetControls) {\n    <c8y-global-context-widget-wrapper\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'config'\"\n      [config]=\"widgetConfigService.currentConfig$ | async\"\n      (globalContextChange)=\"onGlobalContext($event)\"\n    ></c8y-global-context-widget-wrapper>\n  }\n</div>\n\n<c8y-widget-config-feedback>\n  <span class=\"tag tag--info chip text-12\">\n    @if (widgetConfigService.currentConfig.displayMode === 'config') {\n      <span\n        class=\"text-truncate\"\n        [title]=\"'The time context can only get changed in the configuration.' | translate\"\n        translate\n      >\n        Configuration\n      </span>\n    }\n    @if (widgetConfigService.currentConfig.displayMode === 'dashboard') {\n      <span\n        [title]=\"'The widget is bound to the global time context.' | translate\"\n        translate\n      >\n        Dashboard\n      </span>\n    }\n    @if (widgetConfigService.currentConfig.displayMode === 'view_and_config') {\n      <span\n        [title]=\"'The time context can be configured in the widget view mode.' | translate\"\n        translate\n      >\n        Configuration and widget view\n      </span>\n    }\n  </span>\n</c8y-widget-config-feedback>\n", dependencies: [{ kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config", "disableRefreshEmits"], outputs: ["globalContextChange"] }, { kind: "component", type: ConfigModeControlsComponent, selector: "c8y-config-mode-controls", inputs: ["controls", "config"], outputs: ["configChange"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: GlobalContextSectionComponent, isStandalone: true, selector: "c8y-global-context-section", inputs: { widgetControls: "widgetControls", controls: "controls" }, ngImport: i0, template: "<div>\n  @if (useControls) {\n    <c8y-config-mode-controls\n      [controls]=\"controls\"\n      [config]=\"widgetConfigService.currentConfig$ | async\"\n      (configChange)=\"onConfigChange($event)\"\n    ></c8y-config-mode-controls>\n  } @else if (widgetControls) {\n    <c8y-global-context-widget-wrapper\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'config'\"\n      [config]=\"widgetConfigService.currentConfig$ | async\"\n      (globalContextChange)=\"onGlobalContext($event)\"\n    ></c8y-global-context-widget-wrapper>\n  }\n</div>\n\n<c8y-widget-config-feedback>\n  <span class=\"tag tag--info chip text-12\">\n    @if (widgetConfigService.currentConfig.displayMode === 'dashboard') {\n      <span\n        [title]=\"'The widget is bound to the global time context.' | translate\"\n        translate\n      >\n        Dashboard\n      </span>\n    }\n    @if (\n      widgetConfigService.currentConfig.displayMode === 'view_and_config' ||\n      widgetConfigService.currentConfig.displayMode === 'config'\n    ) {\n      <span\n        [title]=\"'The time context can be configured in the widget view mode.' | translate\"\n        translate\n      >\n        Configuration and widget view\n      </span>\n    }\n  </span>\n</c8y-widget-config-feedback>\n", dependencies: [{ kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config", "disableRefreshEmits"], outputs: ["globalContextChange"] }, { kind: "component", type: ConfigModeControlsComponent, selector: "c8y-config-mode-controls", inputs: ["controls", "config"], outputs: ["configChange"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GlobalContextSectionComponent, decorators: [{
             type: Component,
@@ -4452,7 +4466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         AsyncPipe,
                         WidgetConfigFeedbackComponent,
                         C8yTranslatePipe
-                    ], template: "<div>\n  @if (useControls) {\n    <c8y-config-mode-controls\n      [controls]=\"controls\"\n      [config]=\"widgetConfigService.currentConfig$ | async\"\n      (configChange)=\"onConfigChange($event)\"\n    ></c8y-config-mode-controls>\n  } @else if (widgetControls) {\n    <c8y-global-context-widget-wrapper\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'config'\"\n      [config]=\"widgetConfigService.currentConfig$ | async\"\n      (globalContextChange)=\"onGlobalContext($event)\"\n    ></c8y-global-context-widget-wrapper>\n  }\n</div>\n\n<c8y-widget-config-feedback>\n  <span class=\"tag tag--info chip text-12\">\n    @if (widgetConfigService.currentConfig.displayMode === 'config') {\n      <span\n        class=\"text-truncate\"\n        [title]=\"'The time context can only get changed in the configuration.' | translate\"\n        translate\n      >\n        Configuration\n      </span>\n    }\n    @if (widgetConfigService.currentConfig.displayMode === 'dashboard') {\n      <span\n        [title]=\"'The widget is bound to the global time context.' | translate\"\n        translate\n      >\n        Dashboard\n      </span>\n    }\n    @if (widgetConfigService.currentConfig.displayMode === 'view_and_config') {\n      <span\n        [title]=\"'The time context can be configured in the widget view mode.' | translate\"\n        translate\n      >\n        Configuration and widget view\n      </span>\n    }\n  </span>\n</c8y-widget-config-feedback>\n" }]
+                    ], template: "<div>\n  @if (useControls) {\n    <c8y-config-mode-controls\n      [controls]=\"controls\"\n      [config]=\"widgetConfigService.currentConfig$ | async\"\n      (configChange)=\"onConfigChange($event)\"\n    ></c8y-config-mode-controls>\n  } @else if (widgetControls) {\n    <c8y-global-context-widget-wrapper\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'config'\"\n      [config]=\"widgetConfigService.currentConfig$ | async\"\n      (globalContextChange)=\"onGlobalContext($event)\"\n    ></c8y-global-context-widget-wrapper>\n  }\n</div>\n\n<c8y-widget-config-feedback>\n  <span class=\"tag tag--info chip text-12\">\n    @if (widgetConfigService.currentConfig.displayMode === 'dashboard') {\n      <span\n        [title]=\"'The widget is bound to the global time context.' | translate\"\n        translate\n      >\n        Dashboard\n      </span>\n    }\n    @if (\n      widgetConfigService.currentConfig.displayMode === 'view_and_config' ||\n      widgetConfigService.currentConfig.displayMode === 'config'\n    ) {\n      <span\n        [title]=\"'The time context can be configured in the widget view mode.' | translate\"\n        translate\n      >\n        Configuration and widget view\n      </span>\n    }\n  </span>\n</c8y-widget-config-feedback>\n" }]
         }], propDecorators: { widgetControls: [{
                 type: Input
             }], controls: [{