@c8y/ngx-components 1023.83.4 → 1023.88.1

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

@@ -1890,7 +1890,7 @@ class WidgetConfigSectionComponent {
         return Array.from(controlNames);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetConfigSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: WidgetConfigSectionComponent, isStandalone: true, selector: "c8y-widget-config-section", inputs: { section: "section" }, ngImport: i0, template: "<c8y-li\n  class=\"c8y-list__item--no-expand c8y-list__item--sticky-top c8y-list__item--dense full-w-collapse\"\n  [collapsed]=\"!section.expanded\"\n  #li\n>\n  <div class=\"d-flex p-r-16 fit-w\">\n    <button\n      class=\"btn-clean flex-no-shrink p-r-8 flex-grow\"\n      type=\"button\"\n      [attr.data-cy]=\"section.label\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <i\n        class=\"p-r-4\"\n        [c8yIcon]=\"li.collapsed ? 'chevron-right' : 'chevron-down'\"\n      ></i>\n      <span class=\"text-medium\">\n        {{ section.label | translate }}\n      </span>\n    </button>\n    <ng-container *ngTemplateOutlet=\"feedbackTemplate\"></ng-container>\n    @for (error of section.validationErrors | keyvalue; track error.key) {\n      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {\n        <button\n          class=\"btn-clean\"\n          [tooltip]=\"error.value | translate\"\n          type=\"button\"\n          [delay]=\"500\"\n        >\n          <i\n            class=\"status major\"\n            [c8yIcon]=\"'warning'\"\n          ></i>\n        </button>\n      }\n    }\n  </div>\n  <c8y-list-item-collapse>\n    @for (error of section.validationErrors | keyvalue; track error.key) {\n      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {\n        <div\n          class=\"alert alert-warning m-t-8\"\n          role=\"alert\"\n        >\n          {{ error.value | translate }}\n        </div>\n      }\n    }\n    <ng-container\n      *c8yComponentOutlet=\"\n        section.component;\n        initialState: section.initialState;\n        environmentInjector: section.injector\n      \"\n    ></ng-container>\n  </c8y-list-item-collapse>\n</c8y-li>\n", dependencies: [{ kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: WidgetConfigSectionComponent, isStandalone: true, selector: "c8y-widget-config-section", inputs: { section: "section" }, ngImport: i0, template: "<c8y-li\n  class=\"c8y-list__item--no-expand c8y-list__item--sticky-top c8y-list__item--dense full-w-collapse\"\n  [collapsed]=\"!section.expanded\"\n  #li\n>\n  <div class=\"d-flex p-r-16 fit-w m-t-4 m-b-4\">\n    <button\n      class=\"btn-clean flex-no-shrink p-r-8 flex-grow\"\n      type=\"button\"\n      [attr.data-cy]=\"section.label\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <i\n        class=\"p-r-4\"\n        [c8yIcon]=\"li.collapsed ? 'chevron-right' : 'chevron-down'\"\n      ></i>\n      <span class=\"text-medium\">\n        {{ section.label | translate }}\n      </span>\n    </button>\n    <ng-container *ngTemplateOutlet=\"feedbackTemplate\"></ng-container>\n    @for (error of section.validationErrors | keyvalue; track error.key) {\n      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {\n        <button\n          class=\"btn-clean\"\n          [attr.aria-label]=\"error.value | translate\"\n          [tooltip]=\"error.value | translate\"\n          type=\"button\"\n          [delay]=\"500\"\n        >\n          <i\n            class=\"status major\"\n            [c8yIcon]=\"'warning'\"\n          ></i>\n        </button>\n      }\n    }\n  </div>\n  <c8y-list-item-collapse>\n    @for (error of section.validationErrors | keyvalue; track error.key) {\n      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {\n        <div\n          class=\"alert alert-warning m-t-8\"\n          role=\"alert\"\n        >\n          {{ error.value | translate }}\n        </div>\n      }\n    }\n    <ng-container\n      *c8yComponentOutlet=\"\n        section.component;\n        initialState: section.initialState;\n        environmentInjector: section.injector\n      \"\n    ></ng-container>\n  </c8y-list-item-collapse>\n</c8y-li>\n", dependencies: [{ kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetConfigSectionComponent, decorators: [{
             type: Component,
@@ -1902,7 +1902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         CommonModule,
                         C8yTranslatePipe,
                         TooltipDirective
-                    ], template: "<c8y-li\n  class=\"c8y-list__item--no-expand c8y-list__item--sticky-top c8y-list__item--dense full-w-collapse\"\n  [collapsed]=\"!section.expanded\"\n  #li\n>\n  <div class=\"d-flex p-r-16 fit-w\">\n    <button\n      class=\"btn-clean flex-no-shrink p-r-8 flex-grow\"\n      type=\"button\"\n      [attr.data-cy]=\"section.label\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <i\n        class=\"p-r-4\"\n        [c8yIcon]=\"li.collapsed ? 'chevron-right' : 'chevron-down'\"\n      ></i>\n      <span class=\"text-medium\">\n        {{ section.label | translate }}\n      </span>\n    </button>\n    <ng-container *ngTemplateOutlet=\"feedbackTemplate\"></ng-container>\n    @for (error of section.validationErrors | keyvalue; track error.key) {\n      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {\n        <button\n          class=\"btn-clean\"\n          [tooltip]=\"error.value | translate\"\n          type=\"button\"\n          [delay]=\"500\"\n        >\n          <i\n            class=\"status major\"\n            [c8yIcon]=\"'warning'\"\n          ></i>\n        </button>\n      }\n    }\n  </div>\n  <c8y-list-item-collapse>\n    @for (error of section.validationErrors | keyvalue; track error.key) {\n      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {\n        <div\n          class=\"alert alert-warning m-t-8\"\n          role=\"alert\"\n        >\n          {{ error.value | translate }}\n        </div>\n      }\n    }\n    <ng-container\n      *c8yComponentOutlet=\"\n        section.component;\n        initialState: section.initialState;\n        environmentInjector: section.injector\n      \"\n    ></ng-container>\n  </c8y-list-item-collapse>\n</c8y-li>\n" }]
+                    ], template: "<c8y-li\n  class=\"c8y-list__item--no-expand c8y-list__item--sticky-top c8y-list__item--dense full-w-collapse\"\n  [collapsed]=\"!section.expanded\"\n  #li\n>\n  <div class=\"d-flex p-r-16 fit-w m-t-4 m-b-4\">\n    <button\n      class=\"btn-clean flex-no-shrink p-r-8 flex-grow\"\n      type=\"button\"\n      [attr.data-cy]=\"section.label\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <i\n        class=\"p-r-4\"\n        [c8yIcon]=\"li.collapsed ? 'chevron-right' : 'chevron-down'\"\n      ></i>\n      <span class=\"text-medium\">\n        {{ section.label | translate }}\n      </span>\n    </button>\n    <ng-container *ngTemplateOutlet=\"feedbackTemplate\"></ng-container>\n    @for (error of section.validationErrors | keyvalue; track error.key) {\n      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {\n        <button\n          class=\"btn-clean\"\n          [attr.aria-label]=\"error.value | translate\"\n          [tooltip]=\"error.value | translate\"\n          type=\"button\"\n          [delay]=\"500\"\n        >\n          <i\n            class=\"status major\"\n            [c8yIcon]=\"'warning'\"\n          ></i>\n        </button>\n      }\n    }\n  </div>\n  <c8y-list-item-collapse>\n    @for (error of section.validationErrors | keyvalue; track error.key) {\n      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {\n        <div\n          class=\"alert alert-warning m-t-8\"\n          role=\"alert\"\n        >\n          {{ error.value | translate }}\n        </div>\n      }\n    }\n    <ng-container\n      *c8yComponentOutlet=\"\n        section.component;\n        initialState: section.initialState;\n        environmentInjector: section.injector\n      \"\n    ></ng-container>\n  </c8y-list-item-collapse>\n</c8y-li>\n" }]
         }], propDecorators: { section: [{
                 type: Input
             }] } });
@@ -2006,7 +2006,7 @@ class WidgetAssetSelectorComponent {
         this.widgetConfigService.updateConfig({ device });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetAssetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: WidgetAssetSelectorComponent, isStandalone: true, selector: "c8y-widget-asset-selector", inputs: { isRequired: "isRequired", showUnassigned: "showUnassigned", groupsSelectable: "groupsSelectable", assetSelectorConfig: "assetSelectorConfig", selectedDevice: "selectedDevice" }, host: { classAttribute: "bg-level-1" }, ngImport: i0, template: "<div class=\"card borderless\">\n  <div\n    class=\"card-block p-0 bg-inherit\"\n    style=\"height: 315px\"\n  >\n    @if (widgetConfigService.isDeviceTypeDashboard$ | async) {\n      <div class=\"alert alert-info m-4\">\n        <span translate>\n          This widget is used within a dashboard template, so the asset selector is unavailable. The\n          widget automatically inherits the asset from the context in which the dashboard is\n          displayed.\n        </span>\n\n        @if (!isRequired) {\n          <div class=\"p-t-8\">\n            <p translate>Asset selection is optional for this widget.</p>\n            @if (!selectedDevice) {\n              <button\n                class=\"btn btn-primary btn-sm m-t-8 text-truncate\"\n                (click)=\"selectCurrentContext()\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  deviceName:\n                    (widgetConfigService.currentConfig$ | async)?.settings?.context?.name ||\n                    (deviceWithIdTpl\n                      | translate\n                        : {\n                            id: (widgetConfigService.currentConfig$ | async)?.settings?.context?.id\n                          })\n                }\"\n              >\n                Use context asset \"{{ deviceName }}\"\n              </button>\n            }\n            @if (selectedDevice) {\n              <button\n                class=\"btn btn-default btn-sm m-t-8 text-truncate\"\n                (click)=\"selectedDevice = null; updateConfig(null)\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  deviceName:\n                    selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })\n                }\"\n              >\n                Use without asset \"{{ deviceName }}\"\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n    @if (!(widgetConfigService.isDeviceTypeDashboard$ | async) && assetSelectorConfig) {\n      <c8y-asset-selector-miller\n        class=\"d-block bg-inherit p-relative\"\n        name=\"configAsset\"\n        (onSelected)=\"selectionChanged($event)\"\n        [config]=\"assetSelectorConfig\"\n        [asset]=\"(widgetConfigService.currentConfig$ | async).settings?.context\"\n        [(ngModel)]=\"selectedDevice\"\n        [required]=\"isRequired\"\n      ></c8y-asset-selector-miller>\n    }\n\n    <c8y-widget-config-feedback>\n      <span\n        class=\"tag chip text-12 m-4\"\n        [ngClass]=\"{\n          'tag--info': selectedDevice || !isRequired,\n          'tag--danger': !selectedDevice && isRequired\n        }\"\n      >\n        @if (\n          selectedDevice &&\n          (!(widgetConfigService.isDeviceTypeDashboard$ | async) ||\n            (!isRequired && (widgetConfigService.isDeviceTypeDashboard$ | async)))\n        ) {\n          <button\n            class=\"btn-clean text-12 m-r-4\"\n            title=\"{{ 'Deselect' | translate }}\"\n            type=\"button\"\n            (click)=\"selectedDevice = null; updateConfig(null)\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        }\n        @if (selectedDevice) {\n          <span\n            class=\"text-truncate\"\n            title=\"{{\n              selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })\n            }}\"\n          >\n            {{ selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id }) }}\n          </span>\n        }\n        @if (!selectedDevice) {\n          <span translate>No asset selected</span>\n        }\n      </span>\n    </c8y-widget-config-feedback>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AssetSelectorModule }, { kind: "component", type: i1$3.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: WidgetAssetSelectorComponent, isStandalone: true, selector: "c8y-widget-asset-selector", inputs: { isRequired: "isRequired", showUnassigned: "showUnassigned", groupsSelectable: "groupsSelectable", assetSelectorConfig: "assetSelectorConfig", selectedDevice: "selectedDevice" }, host: { classAttribute: "bg-level-1" }, ngImport: i0, template: "<div class=\"card borderless\">\n  <div\n    class=\"card-block p-0 bg-inherit\"\n    style=\"height: 315px\"\n  >\n    @if (widgetConfigService.isDeviceTypeDashboard$ | async) {\n      <div class=\"alert alert-info m-4\">\n        <span translate>\n          This widget is used within a dashboard template, so the asset selector is unavailable. The\n          widget automatically inherits the asset from the context in which the dashboard is\n          displayed.\n        </span>\n\n        @if (!isRequired) {\n          <div class=\"p-t-8\">\n            <p translate>Asset selection is optional for this widget.</p>\n            @if (!selectedDevice) {\n              <button\n                class=\"btn btn-primary btn-sm m-t-8 text-truncate\"\n                (click)=\"selectCurrentContext()\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  deviceName:\n                    (widgetConfigService.currentConfig$ | async)?.settings?.context?.name ||\n                    (deviceWithIdTpl\n                      | translate\n                        : {\n                            id: (widgetConfigService.currentConfig$ | async)?.settings?.context?.id\n                          })\n                }\"\n              >\n                Use context asset \"{{ deviceName }}\"\n              </button>\n            }\n            @if (selectedDevice) {\n              <button\n                class=\"btn btn-default btn-sm m-t-8 text-truncate\"\n                (click)=\"selectedDevice = null; updateConfig(null)\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  deviceName:\n                    selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })\n                }\"\n              >\n                Use without asset \"{{ deviceName }}\"\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n    @if (!(widgetConfigService.isDeviceTypeDashboard$ | async) && assetSelectorConfig) {\n      <c8y-asset-selector-miller\n        class=\"d-block bg-inherit p-relative\"\n        name=\"configAsset\"\n        (onSelected)=\"selectionChanged($event)\"\n        [config]=\"assetSelectorConfig\"\n        [asset]=\"(widgetConfigService.currentConfig$ | async).settings?.context\"\n        [(ngModel)]=\"selectedDevice\"\n        [required]=\"isRequired\"\n      ></c8y-asset-selector-miller>\n    }\n\n    <c8y-widget-config-feedback>\n      <span\n        class=\"tag chip text-12\"\n        [ngClass]=\"{\n          'tag--info': selectedDevice || !isRequired,\n          'tag--danger': !selectedDevice && isRequired\n        }\"\n      >\n        @if (\n          selectedDevice &&\n          (!(widgetConfigService.isDeviceTypeDashboard$ | async) ||\n            (!isRequired && (widgetConfigService.isDeviceTypeDashboard$ | async)))\n        ) {\n          <button\n            class=\"btn-clean text-12 m-r-4\"\n            title=\"{{ 'Deselect' | translate }}\"\n            type=\"button\"\n            (click)=\"selectedDevice = null; updateConfig(null)\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        }\n        @if (selectedDevice) {\n          <span\n            class=\"text-truncate\"\n            title=\"{{\n              selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })\n            }}\"\n          >\n            {{ selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id }) }}\n          </span>\n        }\n        @if (!selectedDevice) {\n          <span translate>No asset selected</span>\n        }\n      </span>\n    </c8y-widget-config-feedback>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AssetSelectorModule }, { kind: "component", type: i1$3.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetAssetSelectorComponent, decorators: [{
             type: Component,
@@ -2019,7 +2019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         IconDirective,
                         FormsModule,
                         C8yTranslateDirective
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class=\"card borderless\">\n  <div\n    class=\"card-block p-0 bg-inherit\"\n    style=\"height: 315px\"\n  >\n    @if (widgetConfigService.isDeviceTypeDashboard$ | async) {\n      <div class=\"alert alert-info m-4\">\n        <span translate>\n          This widget is used within a dashboard template, so the asset selector is unavailable. The\n          widget automatically inherits the asset from the context in which the dashboard is\n          displayed.\n        </span>\n\n        @if (!isRequired) {\n          <div class=\"p-t-8\">\n            <p translate>Asset selection is optional for this widget.</p>\n            @if (!selectedDevice) {\n              <button\n                class=\"btn btn-primary btn-sm m-t-8 text-truncate\"\n                (click)=\"selectCurrentContext()\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  deviceName:\n                    (widgetConfigService.currentConfig$ | async)?.settings?.context?.name ||\n                    (deviceWithIdTpl\n                      | translate\n                        : {\n                            id: (widgetConfigService.currentConfig$ | async)?.settings?.context?.id\n                          })\n                }\"\n              >\n                Use context asset \"{{ deviceName }}\"\n              </button>\n            }\n            @if (selectedDevice) {\n              <button\n                class=\"btn btn-default btn-sm m-t-8 text-truncate\"\n                (click)=\"selectedDevice = null; updateConfig(null)\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  deviceName:\n                    selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })\n                }\"\n              >\n                Use without asset \"{{ deviceName }}\"\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n    @if (!(widgetConfigService.isDeviceTypeDashboard$ | async) && assetSelectorConfig) {\n      <c8y-asset-selector-miller\n        class=\"d-block bg-inherit p-relative\"\n        name=\"configAsset\"\n        (onSelected)=\"selectionChanged($event)\"\n        [config]=\"assetSelectorConfig\"\n        [asset]=\"(widgetConfigService.currentConfig$ | async).settings?.context\"\n        [(ngModel)]=\"selectedDevice\"\n        [required]=\"isRequired\"\n      ></c8y-asset-selector-miller>\n    }\n\n    <c8y-widget-config-feedback>\n      <span\n        class=\"tag chip text-12 m-4\"\n        [ngClass]=\"{\n          'tag--info': selectedDevice || !isRequired,\n          'tag--danger': !selectedDevice && isRequired\n        }\"\n      >\n        @if (\n          selectedDevice &&\n          (!(widgetConfigService.isDeviceTypeDashboard$ | async) ||\n            (!isRequired && (widgetConfigService.isDeviceTypeDashboard$ | async)))\n        ) {\n          <button\n            class=\"btn-clean text-12 m-r-4\"\n            title=\"{{ 'Deselect' | translate }}\"\n            type=\"button\"\n            (click)=\"selectedDevice = null; updateConfig(null)\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        }\n        @if (selectedDevice) {\n          <span\n            class=\"text-truncate\"\n            title=\"{{\n              selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })\n            }}\"\n          >\n            {{ selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id }) }}\n          </span>\n        }\n        @if (!selectedDevice) {\n          <span translate>No asset selected</span>\n        }\n      </span>\n    </c8y-widget-config-feedback>\n  </div>\n</div>\n" }]
+                    ], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class=\"card borderless\">\n  <div\n    class=\"card-block p-0 bg-inherit\"\n    style=\"height: 315px\"\n  >\n    @if (widgetConfigService.isDeviceTypeDashboard$ | async) {\n      <div class=\"alert alert-info m-4\">\n        <span translate>\n          This widget is used within a dashboard template, so the asset selector is unavailable. The\n          widget automatically inherits the asset from the context in which the dashboard is\n          displayed.\n        </span>\n\n        @if (!isRequired) {\n          <div class=\"p-t-8\">\n            <p translate>Asset selection is optional for this widget.</p>\n            @if (!selectedDevice) {\n              <button\n                class=\"btn btn-primary btn-sm m-t-8 text-truncate\"\n                (click)=\"selectCurrentContext()\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  deviceName:\n                    (widgetConfigService.currentConfig$ | async)?.settings?.context?.name ||\n                    (deviceWithIdTpl\n                      | translate\n                        : {\n                            id: (widgetConfigService.currentConfig$ | async)?.settings?.context?.id\n                          })\n                }\"\n              >\n                Use context asset \"{{ deviceName }}\"\n              </button>\n            }\n            @if (selectedDevice) {\n              <button\n                class=\"btn btn-default btn-sm m-t-8 text-truncate\"\n                (click)=\"selectedDevice = null; updateConfig(null)\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  deviceName:\n                    selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })\n                }\"\n              >\n                Use without asset \"{{ deviceName }}\"\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n    @if (!(widgetConfigService.isDeviceTypeDashboard$ | async) && assetSelectorConfig) {\n      <c8y-asset-selector-miller\n        class=\"d-block bg-inherit p-relative\"\n        name=\"configAsset\"\n        (onSelected)=\"selectionChanged($event)\"\n        [config]=\"assetSelectorConfig\"\n        [asset]=\"(widgetConfigService.currentConfig$ | async).settings?.context\"\n        [(ngModel)]=\"selectedDevice\"\n        [required]=\"isRequired\"\n      ></c8y-asset-selector-miller>\n    }\n\n    <c8y-widget-config-feedback>\n      <span\n        class=\"tag chip text-12\"\n        [ngClass]=\"{\n          'tag--info': selectedDevice || !isRequired,\n          'tag--danger': !selectedDevice && isRequired\n        }\"\n      >\n        @if (\n          selectedDevice &&\n          (!(widgetConfigService.isDeviceTypeDashboard$ | async) ||\n            (!isRequired && (widgetConfigService.isDeviceTypeDashboard$ | async)))\n        ) {\n          <button\n            class=\"btn-clean text-12 m-r-4\"\n            title=\"{{ 'Deselect' | translate }}\"\n            type=\"button\"\n            (click)=\"selectedDevice = null; updateConfig(null)\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        }\n        @if (selectedDevice) {\n          <span\n            class=\"text-truncate\"\n            title=\"{{\n              selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })\n            }}\"\n          >\n            {{ selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id }) }}\n          </span>\n        }\n        @if (!selectedDevice) {\n          <span translate>No asset selected</span>\n        }\n      </span>\n    </c8y-widget-config-feedback>\n  </div>\n</div>\n" }]
         }], propDecorators: { isRequired: [{
                 type: Input
             }], showUnassigned: [{
@@ -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.19", ngImport: i0, type: WidgetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: WidgetPreviewComponent, isStandalone: true, selector: "c8y-widget-preview", inputs: { previewClasses: "previewClasses" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot\"\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.19", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-widget-preview', standalone: true, imports: [NgClass, C8yTranslatePipe, CommonModule, CoreModule], template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot\"\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      <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" }]
         }], propDecorators: { previewClasses: [{
                 type: Input
             }] } });
@@ -2786,7 +2786,7 @@ class WidgetConfigComponent {
         return widgetConfig;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetConfigComponent, deps: [{ token: WidgetService }, { token: i2.BottomDrawerRef }, { token: ContextDashboardService }, { token: WidgetConfigService }, { token: i2.BottomDrawerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: WidgetConfigComponent, isStandalone: true, selector: "c8y-widget-config", host: { listeners: { "document:keydown.escape": "onEscapePress($event)" }, classAttribute: "d-contents" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "configForm", first: true, predicate: ["configForm"], descendants: true }], ngImport: i0, template: "<!-- select widget -->\n@if (!(widgetConfigService.selected$ | async)) {\n  <div class=\"card-header j-c-center separator\">\n    <div\n      class=\"h4 text-center\"\n      id=\"drawerTitle\"\n    >\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              #searchInput\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        @for (cmp of searchResult || components; track cmp) {\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            (click)=\"select(cmp)\"\n          >\n            <div\n              class=\"border-bottom\"\n              role=\"presentation\"\n            >\n              @if (!cmp.previewImage) {\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              } @else {\n                <img\n                  class=\"widget-thumbnail\"\n                  alt=\"{{ cmp.label | translate }}\"\n                  [src]=\"cmp.previewImage\"\n                />\n              }\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        }\n        @if (searchResult && searchResult.length === 0) {\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          >\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        }\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}\n\n<!-- widget configuration -->\n@if (!!(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    @if (selected) {\n      <div class=\"p-t-8\">\n        <p>\n          {{ selected.description | translate }}\n        </p>\n      </div>\n    }\n  </div>\n\n  <c8y-resizable-grid\n    class=\"min-height-0 flex-grow\"\n    [collapsible]=\"false\"\n    [trackId]=\"'c8y-widget-resizable-grid-size-' + (widgetConfigService.instanceId$ | async)\"\n    [leftColumnWidth]=\"\n      (widgetConfigService.currentConfig$ | async)?.settings?.configurationViewGridSize ||\n      WIDGET_CONFIGURATION_GRID_SIZE.DEFAULT\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=\"widgetTitle\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"widgetTitle\"\n            (ngModelChange)=\"onWidgetTitleChange($event)\"\n          />\n        </c8y-form-group>\n      </div>\n\n      @if (!(widgetConfigService.hasConfig$ | async)) {\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        ></c8y-ui-empty-state>\n      }\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          @if (widgetConfigService.hasConfig$ | async) {\n            @if (widgetConfigService.providers$ | async; as providers) {\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            }\n          }\n        </form>\n      </div>\n    </div>\n\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\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}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.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: 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: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: WidgetConfigComponent, isStandalone: true, selector: "c8y-widget-config", host: { listeners: { "document:keydown.escape": "onEscapePress($event)" }, classAttribute: "d-contents" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "configForm", first: true, predicate: ["configForm"], descendants: true }], ngImport: i0, template: "<!-- select widget -->\n@if (!(widgetConfigService.selected$ | async)) {\n  <div class=\"card-header j-c-center separator\">\n    <div\n      class=\"h4 text-center\"\n      id=\"drawerTitle\"\n    >\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              #searchInput\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        @for (cmp of searchResult || components; track cmp) {\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            (click)=\"select(cmp)\"\n          >\n            <div\n              class=\"border-bottom\"\n              role=\"presentation\"\n            >\n              @if (!cmp.previewImage) {\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              } @else {\n                <img\n                  class=\"widget-thumbnail\"\n                  alt=\"{{ cmp.label | translate }}\"\n                  [src]=\"cmp.previewImage\"\n                />\n              }\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        }\n        @if (searchResult && searchResult.length === 0) {\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          >\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        }\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}\n\n<!-- widget configuration -->\n@if (!!(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    @if (selected) {\n      <div class=\"p-t-8\">\n        <p>\n          {{ selected.description | translate }}\n        </p>\n      </div>\n    }\n  </div>\n\n  <c8y-resizable-grid\n    class=\"min-height-0 flex-grow\"\n    [collapsible]=\"false\"\n    [trackId]=\"'c8y-widget-resizable-grid-size-' + (widgetConfigService.instanceId$ | async)\"\n    [leftColumnWidth]=\"\n      (widgetConfigService.currentConfig$ | async)?.settings?.configurationViewGridSize ||\n      WIDGET_CONFIGURATION_GRID_SIZE.DEFAULT\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=\"widgetTitle\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"widgetTitle\"\n            (ngModelChange)=\"onWidgetTitleChange($event)\"\n          />\n        </c8y-form-group>\n      </div>\n\n      @if (!(widgetConfigService.hasConfig$ | async)) {\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        ></c8y-ui-empty-state>\n      }\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          @if (widgetConfigService.hasConfig$ | async) {\n            @if (widgetConfigService.providers$ | async; as providers) {\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            }\n          }\n        </form>\n      </div>\n    </div>\n\n    <div\n      class=\"inner-scroll d-col flex-grow 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\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}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.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: 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: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetConfigComponent, decorators: [{
             type: Component,
@@ -2805,7 +2805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         C8yTranslatePipe,
                         AsyncPipe,
                         ResizableGridComponent
-                    ], standalone: true, template: "<!-- select widget -->\n@if (!(widgetConfigService.selected$ | async)) {\n  <div class=\"card-header j-c-center separator\">\n    <div\n      class=\"h4 text-center\"\n      id=\"drawerTitle\"\n    >\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              #searchInput\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        @for (cmp of searchResult || components; track cmp) {\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            (click)=\"select(cmp)\"\n          >\n            <div\n              class=\"border-bottom\"\n              role=\"presentation\"\n            >\n              @if (!cmp.previewImage) {\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              } @else {\n                <img\n                  class=\"widget-thumbnail\"\n                  alt=\"{{ cmp.label | translate }}\"\n                  [src]=\"cmp.previewImage\"\n                />\n              }\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        }\n        @if (searchResult && searchResult.length === 0) {\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          >\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        }\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}\n\n<!-- widget configuration -->\n@if (!!(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    @if (selected) {\n      <div class=\"p-t-8\">\n        <p>\n          {{ selected.description | translate }}\n        </p>\n      </div>\n    }\n  </div>\n\n  <c8y-resizable-grid\n    class=\"min-height-0 flex-grow\"\n    [collapsible]=\"false\"\n    [trackId]=\"'c8y-widget-resizable-grid-size-' + (widgetConfigService.instanceId$ | async)\"\n    [leftColumnWidth]=\"\n      (widgetConfigService.currentConfig$ | async)?.settings?.configurationViewGridSize ||\n      WIDGET_CONFIGURATION_GRID_SIZE.DEFAULT\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=\"widgetTitle\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"widgetTitle\"\n            (ngModelChange)=\"onWidgetTitleChange($event)\"\n          />\n        </c8y-form-group>\n      </div>\n\n      @if (!(widgetConfigService.hasConfig$ | async)) {\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        ></c8y-ui-empty-state>\n      }\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          @if (widgetConfigService.hasConfig$ | async) {\n            @if (widgetConfigService.providers$ | async; as providers) {\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            }\n          }\n        </form>\n      </div>\n    </div>\n\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\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}\n" }]
+                    ], standalone: true, template: "<!-- select widget -->\n@if (!(widgetConfigService.selected$ | async)) {\n  <div class=\"card-header j-c-center separator\">\n    <div\n      class=\"h4 text-center\"\n      id=\"drawerTitle\"\n    >\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              #searchInput\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        @for (cmp of searchResult || components; track cmp) {\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            (click)=\"select(cmp)\"\n          >\n            <div\n              class=\"border-bottom\"\n              role=\"presentation\"\n            >\n              @if (!cmp.previewImage) {\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              } @else {\n                <img\n                  class=\"widget-thumbnail\"\n                  alt=\"{{ cmp.label | translate }}\"\n                  [src]=\"cmp.previewImage\"\n                />\n              }\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        }\n        @if (searchResult && searchResult.length === 0) {\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          >\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        }\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}\n\n<!-- widget configuration -->\n@if (!!(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    @if (selected) {\n      <div class=\"p-t-8\">\n        <p>\n          {{ selected.description | translate }}\n        </p>\n      </div>\n    }\n  </div>\n\n  <c8y-resizable-grid\n    class=\"min-height-0 flex-grow\"\n    [collapsible]=\"false\"\n    [trackId]=\"'c8y-widget-resizable-grid-size-' + (widgetConfigService.instanceId$ | async)\"\n    [leftColumnWidth]=\"\n      (widgetConfigService.currentConfig$ | async)?.settings?.configurationViewGridSize ||\n      WIDGET_CONFIGURATION_GRID_SIZE.DEFAULT\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=\"widgetTitle\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"widgetTitle\"\n            (ngModelChange)=\"onWidgetTitleChange($event)\"\n          />\n        </c8y-form-group>\n      </div>\n\n      @if (!(widgetConfigService.hasConfig$ | async)) {\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        ></c8y-ui-empty-state>\n      }\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          @if (widgetConfigService.hasConfig$ | async) {\n            @if (widgetConfigService.providers$ | async; as providers) {\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            }\n          }\n        </form>\n      </div>\n    </div>\n\n    <div\n      class=\"inner-scroll d-col flex-grow 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\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}\n" }]
         }], ctorParameters: () => [{ type: WidgetService }, { type: i2.BottomDrawerRef }, { type: ContextDashboardService }, { type: WidgetConfigService }, { type: i2.BottomDrawerService }, { type: i0.ChangeDetectorRef }], propDecorators: { searchInput: [{
                 type: ViewChild,
                 args: ['searchInput', { static: false }]
@@ -4442,7 +4442,7 @@ class GlobalContextSectionComponent {
         this.widgetConfigService.updateConfig(event.context);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GlobalContextSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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 m-4\">\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.19", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GlobalContextSectionComponent, decorators: [{
             type: Component,
@@ -4452,7 +4452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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 m-4\">\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 === '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" }]
         }], propDecorators: { widgetControls: [{
                 type: Input
             }], controls: [{