@c8y/ngx-components 1022.27.0 → 1022.30.0

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, inject, InjectionToken, EventEmitter, Output, Input, TemplateRef, ViewChild, Optional, Inject, HostListener, HostBinding, NgModule } from '@angular/core';
 import * as i2 from '@c8y/ngx-components';
-import { gettext, IconDirective, C8yTranslatePipe, Permissions, ContextRouteService, Status, NavigatorNode, NEW_DASHBOARD_ROUTER_STATE_PROP, getActivatedRoute, ViewContext, TabsOutletComponent, memoize, hookGeneric, ExtensionPointForPlugins, fromTriggerOnce, getInjectedHooks, stateToFactory, ListGroupModule, C8yComponentOutlet, AlertService, DynamicComponentModule, DynamicComponentComponent, sortByPriority, isPromise, CoreModule, C8yTranslateDirective, HighlightComponent, EmptyStateComponent, FormGroupComponent, RequiredInputPlaceholderDirective, ProductExperienceDirective, DashboardChildChange, CopyDashboardDisabledReason, TitleComponent, ActionBarItemComponent, HelpComponent, WidgetsDashboardComponent, DatePipe, hookRoute, hookTab, hookNavigator } from '@c8y/ngx-components';
+import { gettext, IconDirective, C8yTranslatePipe, Permissions, ContextRouteService, Status, NavigatorNode, NEW_DASHBOARD_ROUTER_STATE_PROP, getActivatedRoute, ViewContext, TabsOutletComponent, memoize, hookGeneric, ExtensionPointForPlugins, fromTriggerOnce, getInjectedHooks, stateToFactory, ListGroupModule, C8yComponentOutlet, AlertService, DynamicComponentModule, DynamicComponentComponent, sortByPriority, isPromise, CoreModule, WIDGET_CONFIGURATION_GRID_SIZE, C8yTranslateDirective, HighlightComponent, EmptyStateComponent, FormGroupComponent, RequiredInputPlaceholderDirective, ProductExperienceDirective, ResizableGridComponent, DashboardChildChange, CopyDashboardDisabledReason, TitleComponent, ActionBarItemComponent, HelpComponent, WidgetsDashboardComponent, DatePipe, hookRoute, hookTab, hookNavigator } from '@c8y/ngx-components';
 import * as i1 from '@angular/router';
 import { RouterOutlet, ActivatedRoute, RouterModule } from '@angular/router';
 import { of, Subject, from, combineLatest, map as map$1, timer, BehaviorSubject, tap as tap$1, withLatestFrom, mergeMap as mergeMap$1, shareReplay as shareReplay$1, merge, scan, debounceTime, isObservable, iif } from 'rxjs';
@@ -1965,6 +1965,11 @@ class WidgetConfigService {
     constructor(widgetConfigSectionService) {
         this.widgetConfigSectionService = widgetConfigSectionService;
         this._currentConfig$ = new BehaviorSubject(null);
+        this._instanceId$ = new BehaviorSubject(null);
+        /**
+         * The unique identifier of the current widget instance.
+         */
+        this.instanceId$ = this._instanceId$.asObservable();
         /**
          * The preview of the currently selected widget. If `null` no preview is shown
          * (except if the selected widget has no configuration).
@@ -2091,7 +2096,7 @@ class WidgetConfigService {
      * Updates the configuration of the selected widget.
      * @param change The change to apply to the configuration.
      * @param force If set to true, the configuration will be updated even if no changes are made. Also concurrency checks are ignored and no change is emitted on the component.
-     *              Use with caution and only if you want to reset the configuration to some default.
+     * Use with caution and only if you want to reset the configuration to some default.
      */
     updateConfig(change, force = false) {
         if (force) {
@@ -2110,9 +2115,11 @@ class WidgetConfigService {
     /**
      * Select a widget
      * @param selected The widget to select.
+     * @param identifier An optional unique identifier for the widget instance. Only used if the widget is not new.
      */
-    selectWidget(selected) {
+    selectWidget(selected, identifier = null) {
         this.selected$.next(selected);
+        this._instanceId$.next(identifier);
     }
     /**
      * Deselect the currently selected.
@@ -2122,18 +2129,19 @@ class WidgetConfigService {
         this.preview$.next(null);
         this.configChangeReset$.next();
         this._currentConfig$.next(null);
+        this._instanceId$.next(null);
     }
     /**
      * Enables a preview.
      * @param preview If set to true, the view component of the current widget will be taken to render the preview.
-     *                If set to a DynamicComponentDefinition, the preview will be rendered with the given component.
-     *                If set to a TemplateRef, the preview will be rendered with the given template.
+     * If set to a DynamicComponentDefinition, the preview will be rendered with the given component.
+     * If set to a TemplateRef, the preview will be rendered with the given template.
      */
     setPreview(preview) {
         this.preview$.next(preview);
     }
     /**
-     * By default, no sections are added to the configuration. However, to ensure
+     * By default, no sections are added to the configuration. But to ensure
      * backwards compatibility with old plugins, we check if the default asset selector
      * and config section should be shown.
      * @param selectedWidget The currently selected widget.
@@ -2173,9 +2181,9 @@ class WidgetConfigService {
      * Sections should not be added by default anymore. But to ensure backwards compatibility, we
      * check if the default selector should be shown. We assume that a default selector will be shown
      * when:
-     *  1. The widget has a dynamic component for configuration (which is also deprecated).
-     *  OR
-     *  2. The widget has not disabled the default selector.
+     * 1. The widget has a dynamic component for configuration (which is also deprecated).
+     * OR
+     * 2. The widget has not disabled the default selector.
      */
     isDefaultDeviceSelectorNeeded(selectedWidget, config) {
         if (!selectedWidget.loadConfigComponent && !selectedWidget.configComponent) {
@@ -2375,6 +2383,7 @@ class WidgetConfigComponent {
         this.widgetConfigService = widgetConfigService;
         this.searchChange$ = new Subject();
         this.searchTerm = '';
+        this.identifier = crypto.randomUUID();
         this.styling = {
             headerClass: 'panel-title-regular',
             contentClass: 'panel-content-light'
@@ -2385,6 +2394,7 @@ class WidgetConfigComponent {
         };
         this.isUpgrade = false;
         this.possibleStyling = { WIDGET_HEADER_CLASSES, WIDGET_CONTENT_CLASSES };
+        this.WIDGET_CONFIGURATION_GRID_SIZE = WIDGET_CONFIGURATION_GRID_SIZE;
         /**
          * Used as wrapper component to inject providers.
          */
@@ -2445,7 +2455,7 @@ class WidgetConfigComponent {
             config: omit(this.widgetConfig, ['settings', 'displaySettings']),
             title: this.selected.data.title,
             componentId: this.selected.id,
-            id: this.isEdit ? this.current.data.id : String(Math.random()).substr(2),
+            id: this.isEdit ? this.current.data.id : this.identifier,
             classes: this.getStyle(),
             ...(!this.isEdit ? this.widgetConfig.settings.widgetDefaults : {})
         };
@@ -2465,14 +2475,15 @@ class WidgetConfigComponent {
         this.isUpgrade = !!get(cmp, 'data.settings.upgrade');
         this.contextDashboardService.formDisabled = this.isUpgrade;
         if (this.isEdit) {
-            const { _x, _y, _width, _height, classes, title } = this.current.data;
+            const { id, _x, _y, _width, _height, classes, title } = this.current.data;
             this.selected.data = { ...this.selected.data, _x, _y, _width, _height, classes, title };
+            this.identifier = id;
         }
         this.widgetConfig = cloneDeep(this.composeWidgetConfig(this.selected, this.context));
         this.selected.data.title = this.selected.data.title || cmp.label;
         this.componentLabel = cmp.label;
         this.widgetConfigService.initConfig(this.widgetConfig);
-        this.widgetConfigService.selectWidget(this.selected);
+        this.widgetConfigService.selectWidget(this.selected, this.identifier);
     }
     search() {
         if (this.searchTerm.length > 0) {
@@ -2585,7 +2596,7 @@ class WidgetConfigComponent {
         return widgetConfig;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetConfigComponent, deps: [{ token: WidgetService }, { token: i2.BottomDrawerRef }, { token: ContextDashboardService }, { token: WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WidgetConfigComponent, isStandalone: true, selector: "c8y-widget-config", host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "configForm", first: true, predicate: ["configForm"], descendants: true }], ngImport: i0, template: "<!-- select widget -->\n<ng-container *ngIf=\"!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header j-c-center separator\">\n    <div class=\"h4 text-center\">\n      {{ 'Select widget' | translate }}\n    </div>\n  </div>\n  <div class=\"card-inner-scroll fit-h bg-level-2\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6 col-sm-offset-3\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              data-cy=\"widget-config--Search\"\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=\"card-block\">\n      <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n        <button\n          class=\"btn-clean d-col card m-b-0\"\n          [title]=\"cmp.description || cmp.label | translate\"\n          type=\"button\"\n          data-cy=\"widget-config--widget-list\"\n          *ngFor=\"let cmp of searchResult || components\"\n          (click)=\"select(cmp)\"\n        >\n          <div\n            class=\"border-bottom\"\n            role=\"presentation\"\n          >\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\n                class=\"widget-thumbnail\"\n                alt=\"{{ cmp.label | translate }}\"\n                [src]=\"cmp.previewImage\"\n              />\n            </ng-template>\n          </div>\n          <div class=\"card-block\">\n            <p class=\"card-title text-truncate text-medium\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n            <p\n              class=\"small text-default\"\n              style=\"white-space: wrap\"\n            >\n              {{ cmp.description | translate }}\n            </p>\n          </div>\n        </button>\n        <c8y-ui-empty-state\n          class=\"p-24 grid__col--fullspan\"\n          [icon]=\"'search'\"\n          [title]=\"'No widgets found.' | translate\"\n          [subtitle]=\"' Rephrase your search term.' | translate\"\n          *ngIf=\"searchResult && searchResult.length === 0\"\n        >\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Reset search' | translate }}\"\n            type=\"button\"\n            (click)=\"resetSearch()\"\n          >\n            {{ 'Reset search' | translate }}\n          </button>\n        </c8y-ui-empty-state>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer text-center separator flex-no-shrink\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n  </div>\n</ng-container>\n\n<!-- widget configuration -->\n<ng-container *ngIf=\"!!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n    <div\n      class=\"h3 p-t-16\"\n      title=\"{{ selected?.label | translate }}\"\n    >\n      <span>{{ selected?.label | translate }}</span>\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        [title]=\"'Change widget' | translate\"\n        (click)=\"backToWidgetSelection(); (false)\"\n      >\n        <i c8yIcon=\"replace\"></i>\n        {{ 'Change widget' | translate }}\n      </button>\n    </div>\n    <div\n      class=\"p-t-8\"\n      *ngIf=\"selected\"\n    >\n      <p>\n        {{ selected.description | translate }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"d-grid grid__col--560-auto min-height-0 flex-grow\">\n    <div class=\"bg-level-1 inner-scroll\">\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"title\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"selected?.data.title\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-ui-empty-state\n        class=\"p-24\"\n        [icon]=\"'settings'\"\n        [title]=\"'No configuration needed.' | translate\"\n        [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n        [horizontal]=\"true\"\n        *ngIf=\"!(widgetConfigService.hasConfig$ | async)\"\n      ></c8y-ui-empty-state>\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          <ng-container *ngIf=\"widgetConfigService.hasConfig$ | async\">\n            <ng-container *ngIf=\"widgetConfigService.providers$ | async as providers\">\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            </ng-container>\n          </ng-container>\n        </form>\n      </div>\n    </div>\n    <div class=\"inner-scroll p-32 p-t-0\">\n      <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\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        [columns]=\"2\"\n      ></c8y-appearance-settings>\n    </div>\n  </div>\n\n  <div class=\"card-footer separator text-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      data-cy=\"widget-config--save-widget\"\n      (click)=\"save()\"\n      [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange", "onChange"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WidgetConfigComponent, isStandalone: true, selector: "c8y-widget-config", host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "configForm", first: true, predicate: ["configForm"], descendants: true }], ngImport: i0, template: "<!-- select widget -->\n<ng-container *ngIf=\"!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header j-c-center separator\">\n    <div class=\"h4 text-center\">\n      {{ 'Select widget' | translate }}\n    </div>\n  </div>\n  <div class=\"card-inner-scroll fit-h bg-level-2\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6 col-sm-offset-3\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              data-cy=\"widget-config--Search\"\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=\"card-block\">\n      <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n        <button\n          class=\"btn-clean d-col card m-b-0\"\n          [title]=\"cmp.description || cmp.label | translate\"\n          type=\"button\"\n          data-cy=\"widget-config--widget-list\"\n          *ngFor=\"let cmp of searchResult || components\"\n          (click)=\"select(cmp)\"\n        >\n          <div\n            class=\"border-bottom\"\n            role=\"presentation\"\n          >\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\n                class=\"widget-thumbnail\"\n                alt=\"{{ cmp.label | translate }}\"\n                [src]=\"cmp.previewImage\"\n              />\n            </ng-template>\n          </div>\n          <div class=\"card-block\">\n            <p class=\"card-title text-truncate text-medium\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n            <p\n              class=\"small text-default\"\n              style=\"white-space: wrap\"\n            >\n              {{ cmp.description | translate }}\n            </p>\n          </div>\n        </button>\n        <c8y-ui-empty-state\n          class=\"p-24 grid__col--fullspan\"\n          [icon]=\"'search'\"\n          [title]=\"'No widgets found.' | translate\"\n          [subtitle]=\"' Rephrase your search term.' | translate\"\n          *ngIf=\"searchResult && searchResult.length === 0\"\n        >\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Reset search' | translate }}\"\n            type=\"button\"\n            (click)=\"resetSearch()\"\n          >\n            {{ 'Reset search' | translate }}\n          </button>\n        </c8y-ui-empty-state>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer text-center separator flex-no-shrink\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n  </div>\n</ng-container>\n\n<!-- widget configuration -->\n<ng-container *ngIf=\"!!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n    <div\n      class=\"h3 p-t-16\"\n      title=\"{{ selected?.label | translate }}\"\n    >\n      <span>{{ selected?.label | translate }}</span>\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        [title]=\"'Change widget' | translate\"\n        (click)=\"backToWidgetSelection(); (false)\"\n      >\n        <i c8yIcon=\"replace\"></i>\n        {{ 'Change widget' | translate }}\n      </button>\n    </div>\n    <div\n      class=\"p-t-8\"\n      *ngIf=\"selected\"\n    >\n      <p>\n        {{ selected.description | translate }}\n      </p>\n    </div>\n  </div>\n\n  <c8y-resizable-grid\n    class=\"min-height-0 flex-grow\"\n    [trackId]=\"'c8y-widget-resizable-grid-size-' + (widgetConfigService.instanceId$ | async)\"\n    [leftColumnWidth]=\"\n      (widgetConfigService.currentConfig$ | async)?.settings?.configurationViewGridSize ||\n      WIDGET_CONFIGURATION_GRID_SIZE.HALF\n    \"\n  >\n    <div\n      class=\"bg-level-1 inner-scroll\"\n      left-pane\n    >\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"title\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"selected?.data.title\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-ui-empty-state\n        class=\"p-24\"\n        [icon]=\"'settings'\"\n        [title]=\"'No configuration needed.' | translate\"\n        [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n        [horizontal]=\"true\"\n        *ngIf=\"!(widgetConfigService.hasConfig$ | async)\"\n      ></c8y-ui-empty-state>\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          <ng-container *ngIf=\"widgetConfigService.hasConfig$ | async\">\n            <ng-container *ngIf=\"widgetConfigService.providers$ | async as providers\">\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            </ng-container>\n          </ng-container>\n        </form>\n      </div>\n    </div>\n    <div\n      class=\"inner-scroll p-32 p-t-0\"\n      right-pane\n    >\n      <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\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        [columns]=\"2\"\n      ></c8y-appearance-settings>\n    </div>\n  </c8y-resizable-grid>\n  <div class=\"card-footer separator text-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      data-cy=\"widget-config--save-widget\"\n      (click)=\"save()\"\n      [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange", "onChange"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetConfigComponent, decorators: [{
             type: Component,
@@ -2604,8 +2615,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         AppearanceSettingsComponent,
                         ProductExperienceDirective,
                         C8yTranslatePipe,
-                        AsyncPipe
-                    ], template: "<!-- select widget -->\n<ng-container *ngIf=\"!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header j-c-center separator\">\n    <div class=\"h4 text-center\">\n      {{ 'Select widget' | translate }}\n    </div>\n  </div>\n  <div class=\"card-inner-scroll fit-h bg-level-2\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6 col-sm-offset-3\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              data-cy=\"widget-config--Search\"\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=\"card-block\">\n      <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n        <button\n          class=\"btn-clean d-col card m-b-0\"\n          [title]=\"cmp.description || cmp.label | translate\"\n          type=\"button\"\n          data-cy=\"widget-config--widget-list\"\n          *ngFor=\"let cmp of searchResult || components\"\n          (click)=\"select(cmp)\"\n        >\n          <div\n            class=\"border-bottom\"\n            role=\"presentation\"\n          >\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\n                class=\"widget-thumbnail\"\n                alt=\"{{ cmp.label | translate }}\"\n                [src]=\"cmp.previewImage\"\n              />\n            </ng-template>\n          </div>\n          <div class=\"card-block\">\n            <p class=\"card-title text-truncate text-medium\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n            <p\n              class=\"small text-default\"\n              style=\"white-space: wrap\"\n            >\n              {{ cmp.description | translate }}\n            </p>\n          </div>\n        </button>\n        <c8y-ui-empty-state\n          class=\"p-24 grid__col--fullspan\"\n          [icon]=\"'search'\"\n          [title]=\"'No widgets found.' | translate\"\n          [subtitle]=\"' Rephrase your search term.' | translate\"\n          *ngIf=\"searchResult && searchResult.length === 0\"\n        >\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Reset search' | translate }}\"\n            type=\"button\"\n            (click)=\"resetSearch()\"\n          >\n            {{ 'Reset search' | translate }}\n          </button>\n        </c8y-ui-empty-state>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer text-center separator flex-no-shrink\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n  </div>\n</ng-container>\n\n<!-- widget configuration -->\n<ng-container *ngIf=\"!!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n    <div\n      class=\"h3 p-t-16\"\n      title=\"{{ selected?.label | translate }}\"\n    >\n      <span>{{ selected?.label | translate }}</span>\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        [title]=\"'Change widget' | translate\"\n        (click)=\"backToWidgetSelection(); (false)\"\n      >\n        <i c8yIcon=\"replace\"></i>\n        {{ 'Change widget' | translate }}\n      </button>\n    </div>\n    <div\n      class=\"p-t-8\"\n      *ngIf=\"selected\"\n    >\n      <p>\n        {{ selected.description | translate }}\n      </p>\n    </div>\n  </div>\n\n  <div class=\"d-grid grid__col--560-auto min-height-0 flex-grow\">\n    <div class=\"bg-level-1 inner-scroll\">\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"title\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"selected?.data.title\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-ui-empty-state\n        class=\"p-24\"\n        [icon]=\"'settings'\"\n        [title]=\"'No configuration needed.' | translate\"\n        [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n        [horizontal]=\"true\"\n        *ngIf=\"!(widgetConfigService.hasConfig$ | async)\"\n      ></c8y-ui-empty-state>\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          <ng-container *ngIf=\"widgetConfigService.hasConfig$ | async\">\n            <ng-container *ngIf=\"widgetConfigService.providers$ | async as providers\">\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            </ng-container>\n          </ng-container>\n        </form>\n      </div>\n    </div>\n    <div class=\"inner-scroll p-32 p-t-0\">\n      <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\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        [columns]=\"2\"\n      ></c8y-appearance-settings>\n    </div>\n  </div>\n\n  <div class=\"card-footer separator text-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      data-cy=\"widget-config--save-widget\"\n      (click)=\"save()\"\n      [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</ng-container>\n" }]
+                        AsyncPipe,
+                        ResizableGridComponent
+                    ], standalone: true, template: "<!-- select widget -->\n<ng-container *ngIf=\"!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header j-c-center separator\">\n    <div class=\"h4 text-center\">\n      {{ 'Select widget' | translate }}\n    </div>\n  </div>\n  <div class=\"card-inner-scroll fit-h bg-level-2\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6 col-sm-offset-3\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              data-cy=\"widget-config--Search\"\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=\"card-block\">\n      <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n        <button\n          class=\"btn-clean d-col card m-b-0\"\n          [title]=\"cmp.description || cmp.label | translate\"\n          type=\"button\"\n          data-cy=\"widget-config--widget-list\"\n          *ngFor=\"let cmp of searchResult || components\"\n          (click)=\"select(cmp)\"\n        >\n          <div\n            class=\"border-bottom\"\n            role=\"presentation\"\n          >\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\n                class=\"widget-thumbnail\"\n                alt=\"{{ cmp.label | translate }}\"\n                [src]=\"cmp.previewImage\"\n              />\n            </ng-template>\n          </div>\n          <div class=\"card-block\">\n            <p class=\"card-title text-truncate text-medium\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n            <p\n              class=\"small text-default\"\n              style=\"white-space: wrap\"\n            >\n              {{ cmp.description | translate }}\n            </p>\n          </div>\n        </button>\n        <c8y-ui-empty-state\n          class=\"p-24 grid__col--fullspan\"\n          [icon]=\"'search'\"\n          [title]=\"'No widgets found.' | translate\"\n          [subtitle]=\"' Rephrase your search term.' | translate\"\n          *ngIf=\"searchResult && searchResult.length === 0\"\n        >\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Reset search' | translate }}\"\n            type=\"button\"\n            (click)=\"resetSearch()\"\n          >\n            {{ 'Reset search' | translate }}\n          </button>\n        </c8y-ui-empty-state>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer text-center separator flex-no-shrink\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n  </div>\n</ng-container>\n\n<!-- widget configuration -->\n<ng-container *ngIf=\"!!(widgetConfigService.selected$ | async)\">\n  <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n    <div\n      class=\"h3 p-t-16\"\n      title=\"{{ selected?.label | translate }}\"\n    >\n      <span>{{ selected?.label | translate }}</span>\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        [title]=\"'Change widget' | translate\"\n        (click)=\"backToWidgetSelection(); (false)\"\n      >\n        <i c8yIcon=\"replace\"></i>\n        {{ 'Change widget' | translate }}\n      </button>\n    </div>\n    <div\n      class=\"p-t-8\"\n      *ngIf=\"selected\"\n    >\n      <p>\n        {{ selected.description | translate }}\n      </p>\n    </div>\n  </div>\n\n  <c8y-resizable-grid\n    class=\"min-height-0 flex-grow\"\n    [trackId]=\"'c8y-widget-resizable-grid-size-' + (widgetConfigService.instanceId$ | async)\"\n    [leftColumnWidth]=\"\n      (widgetConfigService.currentConfig$ | async)?.settings?.configurationViewGridSize ||\n      WIDGET_CONFIGURATION_GRID_SIZE.HALF\n    \"\n  >\n    <div\n      class=\"bg-level-1 inner-scroll\"\n      left-pane\n    >\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"title\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"selected?.data.title\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-ui-empty-state\n        class=\"p-24\"\n        [icon]=\"'settings'\"\n        [title]=\"'No configuration needed.' | translate\"\n        [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n        [horizontal]=\"true\"\n        *ngIf=\"!(widgetConfigService.hasConfig$ | async)\"\n      ></c8y-ui-empty-state>\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          <ng-container *ngIf=\"widgetConfigService.hasConfig$ | async\">\n            <ng-container *ngIf=\"widgetConfigService.providers$ | async as providers\">\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            </ng-container>\n          </ng-container>\n        </form>\n      </div>\n    </div>\n    <div\n      class=\"inner-scroll p-32 p-t-0\"\n      right-pane\n    >\n      <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\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        [columns]=\"2\"\n      ></c8y-appearance-settings>\n    </div>\n  </c8y-resizable-grid>\n  <div class=\"card-footer separator text-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      data-cy=\"widget-config--save-widget\"\n      (click)=\"save()\"\n      [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: WidgetService }, { type: i2.BottomDrawerRef }, { type: ContextDashboardService }, { type: WidgetConfigService }], propDecorators: { configForm: [{
                 type: ViewChild,
                 args: ['configForm', { static: false }]