@c8y/ngx-components 1023.71.1 → 1023.75.1

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

@@ -1,35 +1,37 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, inject, InjectionToken, EventEmitter, Output, Input, signal, DestroyRef, TemplateRef, ViewChild, Optional, Inject, HostListener, input, HostBinding, NgModule } from '@angular/core';
+import { Injectable, Component, inject, InjectionToken, EventEmitter, Output, Input, signal, DestroyRef, TemplateRef, ViewChild, Optional, Inject, HostListener, input, HostBinding, NgModule, Injector, runInInjectionContext, ChangeDetectionStrategy } from '@angular/core';
 import * as i2 from '@c8y/ngx-components';
-import { IconDirective, C8yTranslatePipe, Permissions, ContextRouteService, Status, NavigatorNode, NEW_DASHBOARD_ROUTER_STATE_PROP, getActivatedRoute, ViewContext, TabsOutletComponent, memoize, hookGeneric, ExtensionPointForPlugins, fromTriggerOnce, getInjectedHooks, stateToFactory, ListGroupModule, C8yComponentOutlet, AlertService, C8yTranslateDirective, DynamicComponentModule, DynamicComponentComponent, sortByPriority, isPromise, CoreModule, WIDGET_CONFIGURATION_GRID_SIZE, HighlightComponent, EmptyStateComponent, FormGroupComponent, RequiredInputPlaceholderDirective, ProductExperienceDirective, ResizableGridComponent, DashboardChildChange, CopyDashboardDisabledReason, TitleComponent, ActionBarItemComponent, HelpComponent, WidgetsDashboardComponent, DatePipe, hookRoute, hookTab, PreviewService, hookNavigator } from '@c8y/ngx-components';
+import { IconDirective, C8yTranslatePipe, Permissions, ContextRouteService, Status, NavigatorNode, NEW_DASHBOARD_ROUTER_STATE_PROP, getActivatedRoute, ViewContext, TabsOutletComponent, memoize, hookGeneric, ExtensionPointForPlugins, fromTriggerOnce, getInjectedHooks, stateToFactory, ListGroupModule, C8yComponentOutlet, AlertService, C8yTranslateDirective, DynamicComponentModule, DynamicComponentComponent, sortByPriority, isPromise, CoreModule, WIDGET_CONFIGURATION_GRID_SIZE, HighlightComponent, EmptyStateComponent, FormGroupComponent, RequiredInputPlaceholderDirective, ProductExperienceDirective, ResizableGridComponent, DashboardChildChange, CopyDashboardDisabledReason, TitleComponent, ActionBarItemComponent, HelpComponent, WidgetsDashboardComponent, DatePipe, hookRoute, hookTab, PreviewService, hookNavigator, ManagedObjectRealtimeService, BottomDrawerService, ClipboardService, InputGroupEditableComponent, MessageDirective } from '@c8y/ngx-components';
 import * as i1 from '@angular/router';
 import { RouterOutlet, ActivatedRoute, RouterModule } from '@angular/router';
-import { of, Subject, from, combineLatest, map as map$1, merge, BehaviorSubject, tap as tap$1, withLatestFrom, mergeMap as mergeMap$1, shareReplay as shareReplay$1, scan, debounceTime, isObservable, iif, timer, filter as filter$1, switchMap as switchMap$1, take } from 'rxjs';
+import { of, Subject, from, combineLatest, map as map$1, merge, BehaviorSubject, tap as tap$1, withLatestFrom, mergeMap as mergeMap$1, shareReplay as shareReplay$1, scan, debounceTime, isObservable, iif, timer, filter as filter$1, switchMap as switchMap$1, take, forkJoin, firstValueFrom } from 'rxjs';
 import { gettext } from '@c8y/ngx-components/gettext';
 import { __decorate, __metadata } from 'tslib';
 import * as i3 from '@angular/common';
 import { NgTemplateOutlet, CommonModule, NgClass, AsyncPipe, NgIf, NgForOf, NgFor } from '@angular/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i6 from '@c8y/ngx-components/context-dashboard-state';
 import * as i2$1 from '@ngx-translate/core';
-import { assign, pick, isEmpty, cloneDeep, some, keys, keyBy, has, set, reduce, forEach, get, isEqual, clone, merge as merge$1, omit, sortBy, isNull, escapeRegExp, findIndex, kebabCase, every } from 'lodash-es';
+import { assign, pick, isEmpty, cloneDeep, some, keys, keyBy, has, set, reduce, forEach, get, isEqual, clone, merge as merge$1, omit, sortBy, isNull, escapeRegExp, findIndex, kebabCase, every, words, camelCase } from 'lodash-es';
 import * as i2$2 from 'ngx-bootstrap/popover';
 import { PopoverModule, PopoverDirective } from 'ngx-bootstrap/popover';
 import * as i1$1 from '@c8y/client';
 import { QueriesUtil, InventoryService } from '@c8y/client';
-import { tap, map, catchError, throwIfEmpty, filter, mergeMap, toArray, first, distinctUntilChanged, shareReplay, switchMap } from 'rxjs/operators';
-import * as i5 from '@angular/forms';
+import { tap, map, catchError, throwIfEmpty, filter, mergeMap, toArray, first, distinctUntilChanged, shareReplay, switchMap, startWith, take as take$1 } from 'rxjs/operators';
+import * as i1$2 from '@angular/forms';
 import { Validators, NgForm, ControlContainer, FormsModule } from '@angular/forms';
 import * as i2$3 from 'ngx-bootstrap/collapse';
 import { CollapseDirective, CollapseModule } from 'ngx-bootstrap/collapse';
-import * as i1$2 from '@c8y/ngx-components/assets-navigator';
+import * as i1$3 from '@c8y/ngx-components/assets-navigator';
 import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+import * as i2$4 from 'ngx-bootstrap/tooltip';
 import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
 import { IconSelectorModule } from '@c8y/ngx-components/icon-selector';
-import * as i1$3 from 'ngx-bootstrap/dropdown';
+import * as i1$4 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
 import { GlobalContextWidgetWrapperComponent, ConfigModeControlsComponent } from '@c8y/ngx-components/global-context';
+import { AssetPropertiesService, ComputedPropertiesService, AssetPropertySelectorDrawerComponent, AssetPropertyValuePipe } from '@c8y/ngx-components/asset-properties';
 
 const newDashboardTab = {
     featureId: 'newDashboard',
@@ -1170,12 +1172,12 @@ class DashboardDetailService {
             children: dashboard?.children || {}
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DashboardDetailService, deps: [{ token: i5.FormBuilder }, { token: i2$1.TranslateService }, { token: i2.TabsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DashboardDetailService, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.TranslateService }, { token: i2.TabsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DashboardDetailService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DashboardDetailService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i5.FormBuilder }, { type: i2$1.TranslateService }, { type: i2.TabsService }] });
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.TranslateService }, { type: i2.TabsService }] });
 
 class DashboardDetailComponent {
     constructor(contextDashboardService, translateService, contextRoute, activatedRoute, tabsService, router, inventory, route, dashboardDetailService, appState, groupService, modal, gainsightService) {
@@ -2004,7 +2006,7 @@ class WidgetAssetSelectorComponent {
         this.widgetConfigService.updateConfig({ device });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: WidgetAssetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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$2.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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.18", 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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: WidgetAssetSelectorComponent, decorators: [{
             type: Component,
@@ -2091,6 +2093,41 @@ class WidgetConfigService {
          * Indicates if the selected widget is placed on a device type dashboard.
          */
         this.isDeviceTypeDashboard$ = this._isDeviceTypeDashboard$.asObservable();
+        /**
+         * A bus for broadcasting {@link WidgetConfigNotification} events between independent
+         * widget config sections during an active configuration session.
+         *
+         * **Who emits:** Any config section component (or its service) that needs to
+         * inform other sections about a state change — for example,
+         * `AssetPropertyMappingsComponent` emits an
+         * `AssetPropertyMappingKeyRenamedNotification` whenever a mapping key is renamed
+         * so that referencing sections can update their stored keys.
+         *
+         * **Who subscribes:** Config section components that hold references to data owned
+         * by other sections.  Subscribers should filter by `type` and silently ignore
+         * unknown variants to stay forward-compatible:
+         *
+         * ```ts
+         * this.widgetConfigService.notify$
+         *   .pipe(takeUntil(this.destroy$))
+         *   .subscribe(notification => {
+         *     if (notification.type === 'asset-property-mapping-key-renamed') {
+         *       // handle rename
+         *     }
+         *     // ignore other types
+         *   });
+         * ```
+         *
+         * **Subscription management:** Each subscriber is responsible for unsubscribing
+         * (e.g. via `takeUntil(destroy$)` or `DestroyRef`).  The subject itself is never
+         * completed by the service — it lives for the lifetime of the service instance.
+         *
+         * **Unknown notification types:** Because `WidgetConfigNotification` is a
+         * discriminated union that may grow over time, always guard with an `if`/`switch`
+         * on `type` rather than exhaustive checks, so that future additions do not break
+         * existing subscribers.
+         */
+        this.notify$ = new Subject();
         /**
          * The current configuration of the selected widget as observable.
          * Only to read the value. Use `updateConfig` to update the configuration.
@@ -2379,7 +2416,7 @@ class AppearanceSettingsComponent {
         return value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AppearanceSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: AppearanceSettingsComponent, isStandalone: true, selector: "c8y-appearance-settings", inputs: { themeClass: "themeClass", headerClass: "headerClass", defaultThemeClass: "defaultThemeClass", defaultHeaderClass: "defaultHeaderClass", dashboardSettings: "dashboardSettings", possibleStylingTheme: "possibleStylingTheme", possibleStylingHeader: "possibleStylingHeader", columns: "columns" }, outputs: { themeClassChange: "themeClassChange", headerClassChange: "headerClassChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">{{ 'Default theme' | translate }}</legend>\n      <legend *ngIf=\"!dashboardSettings\">{{ 'Theme' | translate }}</legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0 fit-w\"\n          *ngFor=\"let themeClassItem of possibleStylingTheme; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"content\"\n                type=\"radio\"\n                [id]=\"'groupradiocontentclass' + i\"\n                [value]=\"themeClassItem.class\"\n                [ngModel]=\"themeClass\"\n                (click)=\"themeClassClick(themeClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ themeClassItem.label | translate }}{{\n                  themeClassItem.class === defaultThemeClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ themeClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"themeClassItem.class === defaultThemeClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ themeClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">\n        {{ 'Default widget header style' | translate }}\n      </legend>\n      <legend *ngIf=\"!dashboardSettings\">\n        {{ 'Widget header style' | translate }}\n      </legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0\"\n          *ngFor=\"let headerClassItem of possibleStylingHeader; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"header\"\n                type=\"radio\"\n                [id]=\"'groupradioheaderclass' + i\"\n                [value]=\"headerClassItem.class\"\n                [ngModel]=\"headerClass\"\n                (click)=\"headerClassClick(headerClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ headerClassItem.label | translate }}{{\n                  headerClassItem.class === defaultHeaderClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ headerClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"headerClassItem.class === defaultHeaderClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ headerClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: AppearanceSettingsComponent, isStandalone: true, selector: "c8y-appearance-settings", inputs: { themeClass: "themeClass", headerClass: "headerClass", defaultThemeClass: "defaultThemeClass", defaultHeaderClass: "defaultHeaderClass", dashboardSettings: "dashboardSettings", possibleStylingTheme: "possibleStylingTheme", possibleStylingHeader: "possibleStylingHeader", columns: "columns" }, outputs: { themeClassChange: "themeClassChange", headerClassChange: "headerClassChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">{{ 'Default theme' | translate }}</legend>\n      <legend *ngIf=\"!dashboardSettings\">{{ 'Theme' | translate }}</legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0 fit-w\"\n          *ngFor=\"let themeClassItem of possibleStylingTheme; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"content\"\n                type=\"radio\"\n                [id]=\"'groupradiocontentclass' + i\"\n                [value]=\"themeClassItem.class\"\n                [ngModel]=\"themeClass\"\n                (click)=\"themeClassClick(themeClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ themeClassItem.label | translate }}{{\n                  themeClassItem.class === defaultThemeClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ themeClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"themeClassItem.class === defaultThemeClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ themeClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">\n        {{ 'Default widget header style' | translate }}\n      </legend>\n      <legend *ngIf=\"!dashboardSettings\">\n        {{ 'Widget header style' | translate }}\n      </legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0\"\n          *ngFor=\"let headerClassItem of possibleStylingHeader; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"header\"\n                type=\"radio\"\n                [id]=\"'groupradioheaderclass' + i\"\n                [value]=\"headerClassItem.class\"\n                [ngModel]=\"headerClass\"\n                (click)=\"headerClassClick(headerClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ headerClassItem.label | translate }}{{\n                  headerClassItem.class === defaultHeaderClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ headerClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"headerClassItem.class === defaultHeaderClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ headerClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AppearanceSettingsComponent, decorators: [{
             type: Component,
@@ -2749,7 +2786,7 @@ class WidgetConfigComponent {
         return widgetConfig;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", 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.18", 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.HALF\n    \"\n  >\n    <div\n      class=\"bg-level-1 inner-scroll\"\n      left-pane\n    >\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"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: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: 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.18", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: WidgetConfigComponent, decorators: [{
             type: Component,
@@ -2768,7 +2805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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.HALF\n    \"\n  >\n    <div\n      class=\"bg-level-1 inner-scroll\"\n      left-pane\n    >\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"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 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 }]
@@ -3751,7 +3788,7 @@ class ContextDashboardModule {
             TooltipModule,
             PopoverModule,
             AssetSelectorModule,
-            IconSelectorModule, i1$3.BsDropdownModule, i2$3.CollapseModule, RouterModule,
+            IconSelectorModule, i1$4.BsDropdownModule, i2$3.CollapseModule, RouterModule,
             AppearanceSettingsComponent,
             TypeDashboardInfoComponent,
             WidgetPreviewComponent,
@@ -3777,13 +3814,13 @@ class ContextDashboardModule {
             hookRoute([
                 {
                     path: DashboardDetailsTabId.GENERAL,
-                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-general-settings.component-RdLW5nde.mjs').then(m => m.DashboardGeneralSettingsComponent),
+                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-general-settings.component-w8N16Z3t.mjs').then(m => m.DashboardGeneralSettingsComponent),
                     outlet: DASHBOARD_DETAILS_OUTLET,
                     context: ViewContext.Dashboard
                 },
                 {
                     path: DashboardDetailsTabId.APPEARANCE,
-                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-DsCDppJx.mjs').then(m => m.DashboardAppearanceSettingsComponent),
+                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-C7yXSDYC.mjs').then(m => m.DashboardAppearanceSettingsComponent),
                     outlet: DASHBOARD_DETAILS_OUTLET,
                     context: ViewContext.Dashboard
                 },
@@ -3850,13 +3887,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         hookRoute([
                             {
                                 path: DashboardDetailsTabId.GENERAL,
-                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-general-settings.component-RdLW5nde.mjs').then(m => m.DashboardGeneralSettingsComponent),
+                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-general-settings.component-w8N16Z3t.mjs').then(m => m.DashboardGeneralSettingsComponent),
                                 outlet: DASHBOARD_DETAILS_OUTLET,
                                 context: ViewContext.Dashboard
                             },
                             {
                                 path: DashboardDetailsTabId.APPEARANCE,
-                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-DsCDppJx.mjs').then(m => m.DashboardAppearanceSettingsComponent),
+                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-C7yXSDYC.mjs').then(m => m.DashboardAppearanceSettingsComponent),
                                 outlet: DASHBOARD_DETAILS_OUTLET,
                                 context: ViewContext.Dashboard
                             },
@@ -4419,9 +4456,512 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }] } });
 
+class AssetPropertyMappingsService {
+    constructor() {
+        this.injector = inject(Injector);
+        this.inventory = inject(InventoryService);
+        this.moRealtime = inject(ManagedObjectRealtimeService);
+        this.assetProperties = inject(AssetPropertiesService);
+        this.computedProperties = inject(ComputedPropertiesService);
+    }
+    /**
+     * Creates an Observable stream of asset property values that emits updates with realtime changes.
+     * Uses realtimeControl$ to enable/disable underlying realtime notifications.
+     *
+     * @param mappings - The asset property mappings configuration.
+     * @param realtimeControl$ - Observable that controls realtime notifications (true = enabled, false = disabled, default = enabled).
+     * @returns Observable emitting updated asset property values as they change.
+     */
+    getValues$(mappings, realtimeControl$ = of(true)) {
+        if (!mappings) {
+            return of({});
+        }
+        const { regular, computed } = this.groupByType(mappings);
+        const _regularByAssetId = this.groupByAssetId(regular);
+        return merge(...computed.map(mapping => this.getComputedPropertyValues$(mapping, realtimeControl$)), ...Object.entries(_regularByAssetId).map(([assetId, mappings]) => this.getRegularPropertyValues$(assetId, mappings, realtimeControl$))).pipe(scan((acc, update) => ({ ...acc, ...update }), {}), startWith({}));
+    }
+    groupByType(mappings) {
+        const regular = [];
+        const computed = [];
+        for (const [name, mapping] of Object.entries(mappings)) {
+            if (!mapping) {
+                continue;
+            }
+            if (mapping.assetProperty) {
+                if (mapping.assetProperty.computed) {
+                    computed.push({ name, ...mapping });
+                }
+                else {
+                    regular.push({ name, ...mapping });
+                }
+            }
+        }
+        return { regular, computed };
+    }
+    groupByAssetId(mappings) {
+        return mappings.reduce((acc, mapping) => {
+            const assetId = mapping.assetProperty.asset.id;
+            if (!acc[assetId]) {
+                acc[assetId] = [];
+            }
+            acc[assetId].push(mapping);
+            return acc;
+        }, {});
+    }
+    getComputedPropertyValues$(mapping, realtimeControl$) {
+        if (!mapping.assetProperty) {
+            return of(null);
+        }
+        const metadata = {
+            mode: 'realtime',
+            realtimeControl$
+        };
+        const computedValue$ = from(this.inventory.detail(mapping.assetProperty.asset.id, { withLatestValues: true })).pipe(switchMap(({ data: asset }) => from(this.computedProperties.getByName(mapping.assetProperty.name)).pipe(switchMap(definition => {
+            let value = null;
+            runInInjectionContext(definition.injector || this.injector, () => {
+                value = definition.value({
+                    config: mapping.assetProperty.config,
+                    context: asset,
+                    metadata
+                });
+            });
+            if (isObservable(value)) {
+                return value;
+            }
+            else if (value instanceof Promise) {
+                return from(value);
+            }
+            else {
+                return of(value);
+            }
+        }))));
+        return realtimeControl$.pipe(distinctUntilChanged(), switchMap(enabled => (enabled ? computedValue$ : computedValue$.pipe(take$1(1)))), map(value => ({ [mapping.name]: value })), catchError(err => {
+            // eslint-disable-next-line no-console
+            console.warn(`Error in computed property stream for asset ${mapping.assetProperty.asset.id}, property ${mapping.assetProperty.name}:`, err);
+            return of({ [mapping.name]: null });
+        }), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    getRegularPropertyValues$(assetId, mappings, realtimeControl$) {
+        return realtimeControl$.pipe(distinctUntilChanged(), switchMap(enabled => {
+            if (!enabled) {
+                return from(this.inventory.detail(assetId, { withLatestValues: true })).pipe(map(res => res?.data));
+            }
+            else {
+                return from(this.inventory.detail(assetId, { withLatestValues: true })).pipe(switchMap(initial => this.moRealtime.onAll$(assetId).pipe(map(update => update?.data), startWith(initial?.data))));
+            }
+        }), map(asset => mappings.reduce((acc, mapping) => ({
+            ...acc,
+            [mapping.name]: this.getRegularPropertyValue(asset, mapping.assetProperty)
+        }), {})), catchError(err => {
+            // eslint-disable-next-line no-console
+            console.warn(`Error in controlled asset stream for asset ${assetId}:`, err);
+            return of(mappings.reduce((acc, m) => ({ ...acc, [m.name]: null }), {}));
+        }), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    getRegularPropertyValue(asset, property) {
+        if (!asset || !property) {
+            return null;
+        }
+        let value;
+        if (this.assetProperties.isComplexProperty(property)) {
+            value = asset[property.name];
+        }
+        else if ('keyPath' in property) {
+            value = get(asset, property.keyPath);
+        }
+        else {
+            value = asset[property.name];
+        }
+        return value ?? null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyMappingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyMappingsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyMappingsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const IDENTIFIER_REGEX = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+function stripC8yPrefix(s) {
+    return s.startsWith('c8y_') ? s.slice(4) : s;
+}
+/**
+ * Returns a semantically meaningful base key for the given asset property.
+ *
+ * - Computed properties with a configured data point (e.g. Last measurement):
+ *   strips `c8y_` from fragment and series, deduplicates if they resolve to the
+ *   same word (e.g. `c8y_Humidity` / `Humidity` → `humidity`), then camelCases.
+ * - Nested properties with a keyPath longer than one segment:
+ *   uses `camelCase` of the joined, `c8y_`-stripped path segments, e.g. `addressCity`.
+ * - All other properties: strips leading `c8y_` and camelCases the name.
+ */
+function getPropertyBaseKey(property) {
+    if (property.computed) {
+        const dp = property.config?.dp?.[0];
+        if (dp?.fragment) {
+            const strippedFragment = stripC8yPrefix(dp.fragment);
+            const strippedSeries = stripC8yPrefix(dp.series);
+            const seriesLower = strippedSeries.toLowerCase();
+            const isDuplicate = words(strippedFragment).some(w => w.toLowerCase() === seriesLower);
+            const raw = isDuplicate ? strippedFragment : `${strippedFragment}_${strippedSeries}`;
+            return camelCase(raw);
+        }
+    }
+    if ('keyPath' in property && Array.isArray(property.keyPath) && property.keyPath.length > 1) {
+        return camelCase(property.keyPath.map(stripC8yPrefix).join('_'));
+    }
+    return camelCase(stripC8yPrefix(property.name));
+}
+function escapeForRegExp(key) {
+    return key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+/** Wraps key in quotes for bracket notation, choosing the quote style that requires fewest escapes. */
+function quoteAndEscape(key) {
+    const escaped = key.replace(/\\/g, '\\\\');
+    if (!key.includes("'")) {
+        return `'${escaped}'`;
+    }
+    if (!key.includes('"')) {
+        return `"${escaped}"`;
+    }
+    return `'${escaped.replace(/'/g, "\\'")}'`;
+}
+/** How the key would appear inside a JS single-quoted string literal. */
+function encodeForSingleQuote(key) {
+    return key.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+}
+/** How the key would appear inside a JS double-quoted string literal. */
+function encodeForDoubleQuote(key) {
+    return key.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+/**
+ * Replaces all references to `oldKey` via `expressionPrefixes` in the given code string with
+ * `newKey`, handling both bracket notation (`prefix?.['key']`, `prefix?.["key"]`) and dot notation
+ * (`prefix?.key`, `prefix.key`).
+ *
+ * Bracket notation matching correctly handles JS string escape sequences (e.g. `['it\'s']`).
+ *
+ * @param code - Source code to transform.
+ * @param oldKey - The property key to rename.
+ * @param newKey - The new property key.
+ * @param expressionPrefixes - One or more expression prefixes to match against (e.g. `['this.c8yProperties', 'c8yProperties']`).
+ */
+function renamePropertyKeyInCode(code, oldKey, newKey, expressionPrefixes = ['this.c8yProperties']) {
+    const encodedSingle = encodeForSingleQuote(oldKey);
+    const encodedDouble = encodeForDoubleQuote(oldKey);
+    const escapedDot = escapeForRegExp(oldKey);
+    for (const prefix of expressionPrefixes) {
+        const escapedPrefix = escapeForRegExp(prefix);
+        // Replace bracket notation: prefix?.['oldKey'] and prefix?.["oldKey"] (combined, handles escaped quotes)
+        code = code.replace(new RegExp(`(?<![.\\w$])(${escapedPrefix})(\\?\\.)?\\[(?:'${escapeForRegExp(encodedSingle)}'|"${escapeForRegExp(encodedDouble)}")\\]`, 'g'), (_match, obj, chain) => `${obj}${chain ?? ''}[${quoteAndEscape(newKey)}]`);
+        // Replace dot notation: prefix?.oldKey and prefix.oldKey
+        // Only applicable when the old key is a valid JS identifier.
+        if (IDENTIFIER_REGEX.test(oldKey)) {
+            code = code.replace(new RegExp(`(?<![.\\w$])(${escapedPrefix})(\\??)\\.(${escapedDot})(?=[^\\w$]|$)`, 'g'), (_match, obj, chain, _key) => {
+                if (IDENTIFIER_REGEX.test(newKey)) {
+                    return `${obj}${chain}.${newKey}`;
+                }
+                // newKey is not a valid identifier — convert to bracket notation
+                return `${obj}${chain ? '?.' : ''}[${quoteAndEscape(newKey)}]`;
+            });
+        }
+    }
+    return code;
+}
+
+class AssetPropertyMappingsComponent {
+    constructor() {
+        this.widgetConfigService = inject(WidgetConfigService);
+        this.bottomDrawerService = inject(BottomDrawerService);
+        this.inventory = inject(InventoryService);
+        this.clipboardService = inject(ClipboardService);
+        this.alert = inject(AlertService);
+        this.widgetConfigPath = input(['mappings'], ...(ngDevMode ? [{ debugName: "widgetConfigPath" }] : []));
+        this.initialMappings = input({}, ...(ngDevMode ? [{ debugName: "initialMappings" }] : []));
+        this.allowAddingNewMappings = input(true, ...(ngDevMode ? [{ debugName: "allowAddingNewMappings" }] : []));
+        this.allowRenamingMappings = input(true, ...(ngDevMode ? [{ debugName: "allowRenamingMappings" }] : []));
+        this.allowRelabellingMappings = input(true, ...(ngDevMode ? [{ debugName: "allowRelabellingMappings" }] : []));
+        this.allowEditingMappings = input(true, ...(ngDevMode ? [{ debugName: "allowEditingMappings" }] : []));
+        this.allowRemovingMappings = input(true, ...(ngDevMode ? [{ debugName: "allowRemovingMappings" }] : []));
+        this.showLabels = input(true, ...(ngDevMode ? [{ debugName: "showLabels" }] : []));
+        this.showNames = input(true, ...(ngDevMode ? [{ debugName: "showNames" }] : []));
+        this.showAssets = input(true, ...(ngDevMode ? [{ debugName: "showAssets" }] : []));
+        this.showProperties = input(true, ...(ngDevMode ? [{ debugName: "showProperties" }] : []));
+        this.showValues = input(true, ...(ngDevMode ? [{ debugName: "showValues" }] : []));
+        this.actionsColumnSpan = input(3, ...(ngDevMode ? [{ debugName: "actionsColumnSpan" }] : []));
+        /**
+         * Callback to transform a mapping into the text that gets copied to the clipboard.
+         * Exposed as an input so widget config factories can override the default (e.g. to
+         * produce a template expression like `${this.c8yProperties?.temperature}`).
+         */
+        this.onBeforeCopyMappingToClipboard = input((mapping) => String(mapping.name), ...(ngDevMode ? [{ debugName: "onBeforeCopyMappingToClipboard" }] : []));
+        this.emptyStateTitle = gettext('No asset property mappings');
+        this.emptyStateSubtitle = gettext('Add first asset property mapping.');
+        this.mappings$ = this.widgetConfigService.currentConfig$.pipe(map$1(config => get(config, this.widgetConfigPath())));
+        this.keys$ = this.mappings$.pipe(map$1(mappings => Object.keys(mappings || {}).sort((a, b) => a.localeCompare(b))));
+        this.mappingsSignal = toSignal(this.mappings$, { initialValue: null });
+        this.keysSignal = toSignal(this.keys$, { initialValue: null });
+        this.isDrawerOpen = signal(false, ...(ngDevMode ? [{ debugName: "isDrawerOpen" }] : []));
+        this.labelValidatorCache = new Map();
+        this.nameValidatorCache = new Map();
+        this.assetsCache = new Map();
+        this.resolvedAssets$ = this.mappings$.pipe(switchMap$1(mappings => {
+            const ids = [
+                ...new Set(Object.values(mappings || {})
+                    .map(m => m?.assetProperty?.asset?.id)
+                    .filter((id) => Boolean(id)))
+            ];
+            if (!ids.length)
+                return of(new Map(this.assetsCache));
+            return forkJoin(ids.map(id => from(this.getAsset(id)))).pipe(map$1(() => new Map(this.assetsCache)));
+        }));
+    }
+    /** Distributes (12 - actionsColumnSpan) columns evenly among visible row-1 columns (label, name). */
+    get row1ColumnSpans() {
+        return this.distributeColumns([
+            { key: 'label', visible: this.showLabels() },
+            { key: 'name', visible: this.showNames() }
+        ], 12 - this.actionsColumnSpan());
+    }
+    /** Distributes all 12 columns evenly among visible row-2 columns (asset, property, value). */
+    get row2ColumnSpans() {
+        return this.distributeColumns([
+            { key: 'asset', visible: this.showAssets() },
+            { key: 'property', visible: this.showProperties() },
+            { key: 'value', visible: this.showValues() }
+        ], 12);
+    }
+    async ngOnInit() {
+        const config = await firstValueFrom(this.widgetConfigService.currentConfig$);
+        if (!get(config, this.widgetConfigPath())) {
+            const newConfig = { ...config };
+            const mappings = structuredClone(this.initialMappings());
+            for (const [key, mapping] of Object.entries(mappings)) {
+                if (mapping.assetProperty && !mapping.assetProperty.asset) {
+                    if (!config.device) {
+                        delete mappings[key];
+                        continue;
+                    }
+                    mapping.assetProperty.asset = { id: config.device.id, name: config.device.name };
+                }
+            }
+            set(newConfig, this.widgetConfigPath(), mappings);
+            this.widgetConfigService.updateConfig(newConfig);
+        }
+    }
+    async getAsset(id) {
+        if (!this.assetsCache.has(id)) {
+            const asset = (await this.inventory.detail(id, { withLatestValues: true })).data;
+            this.assetsCache.set(id, asset);
+        }
+        return this.assetsCache.get(id);
+    }
+    async addMappings() {
+        if (this.isDrawerOpen())
+            return;
+        this.isDrawerOpen.set(true);
+        let latestConfig = await firstValueFrom(this.widgetConfigService.currentConfig$);
+        const drawer = this.bottomDrawerService.openDrawer(AssetPropertySelectorDrawerComponent, {
+            disableClickOutside: true,
+            initialState: {
+                allowChangingContext: true,
+                contextAsset: latestConfig.device ? await this.getAsset(latestConfig.device.id) : null,
+                hideSelection: false,
+                config: {
+                    selectMode: 'plus',
+                    expansionMode: 'collapsedByDefault',
+                    showValue: true,
+                    showKey: true,
+                    allowAddingCustomProperties: true,
+                    addAssetToProperty: true
+                }
+            }
+        });
+        try {
+            latestConfig = await firstValueFrom(this.widgetConfigService.currentConfig$);
+            const selectedProperties = await drawer.instance.result;
+            const newConfig = { ...latestConfig };
+            const mappings = (get(newConfig, this.widgetConfigPath()) || {});
+            for (const property of selectedProperties) {
+                const baseKey = getPropertyBaseKey(property);
+                let key = baseKey;
+                let counter = 0;
+                while (key in mappings) {
+                    key = `${baseKey}${++counter}`;
+                }
+                mappings[key] = {
+                    label: property.label,
+                    assetProperty: property
+                };
+            }
+            set(newConfig, this.widgetConfigPath(), mappings);
+            this.widgetConfigService.updateConfig(newConfig);
+        }
+        catch (ex) {
+            // cancelled
+        }
+        finally {
+            this.isDrawerOpen.set(false);
+        }
+    }
+    async editMapping(placeholderName, mapping) {
+        if (this.isDrawerOpen())
+            return;
+        this.isDrawerOpen.set(true);
+        let latestConfig = await firstValueFrom(this.widgetConfigService.currentConfig$);
+        const drawer = this.bottomDrawerService.openDrawer(AssetPropertySelectorDrawerComponent, {
+            disableClickOutside: true,
+            initialState: {
+                allowChangingContext: true,
+                contextAsset: latestConfig.device ? await this.getAsset(latestConfig.device.id) : null,
+                hideSelection: false,
+                config: {
+                    selectMode: 'single',
+                    expansionMode: 'collapsedByDefault',
+                    showValue: true,
+                    showKey: true,
+                    allowAddingCustomProperties: true,
+                    addAssetToProperty: true
+                }
+            }
+        });
+        try {
+            latestConfig = await firstValueFrom(this.widgetConfigService.currentConfig$);
+            const [selectedProperty] = await drawer.instance.result;
+            const newConfig = { ...latestConfig };
+            const mappings = (get(newConfig, this.widgetConfigPath()) || {});
+            mappings[placeholderName] = {
+                label: mapping.label,
+                assetProperty: selectedProperty
+            };
+            set(newConfig, this.widgetConfigPath(), mappings);
+            this.widgetConfigService.updateConfig(newConfig);
+        }
+        catch (ex) {
+            // cancelled
+        }
+        finally {
+            this.isDrawerOpen.set(false);
+        }
+    }
+    async clearMapping(placeholderName) {
+        const config = await firstValueFrom(this.widgetConfigService.currentConfig$);
+        set(config, [...this.widgetConfigPath(), placeholderName, 'assetProperty'], null);
+        this.widgetConfigService.updateConfig(config);
+    }
+    async copyMappingToClipboard(name, mapping) {
+        const mappingToTextFn = this.onBeforeCopyMappingToClipboard();
+        const text = mappingToTextFn({ name, ...mapping });
+        await this.clipboardService.writeText(text);
+    }
+    async removeMapping(name) {
+        const config = await firstValueFrom(this.widgetConfigService.currentConfig$);
+        const mappings = (get(config, this.widgetConfigPath()) || {});
+        delete mappings[name];
+        set(config, this.widgetConfigPath(), mappings);
+        this.widgetConfigService.updateConfig(config);
+    }
+    async removeAllMappings() {
+        const config = await firstValueFrom(this.widgetConfigService.currentConfig$);
+        set(config, this.widgetConfigPath(), {});
+        this.widgetConfigService.updateConfig(config);
+    }
+    getLabelValidators(key) {
+        if (!this.labelValidatorCache.has(key)) {
+            this.labelValidatorCache.set(key, [
+                Validators.required,
+                ctrl => this.isLabelAlreadyUsed(ctrl.value, key, this.mappingsSignal())
+                    ? { 'label-already-used': true }
+                    : null
+            ]);
+        }
+        return this.labelValidatorCache.get(key);
+    }
+    getNameValidators(key) {
+        if (!this.nameValidatorCache.has(key)) {
+            this.nameValidatorCache.set(key, [
+                Validators.required,
+                ctrl => this.isNameAlreadyUsed(ctrl.value, key, this.keysSignal())
+                    ? { 'key-already-used': true }
+                    : null
+            ]);
+        }
+        return this.nameValidatorCache.get(key);
+    }
+    isLabelAlreadyUsed(value, key, mappings) {
+        const trimmed = value.trim();
+        return (!!trimmed &&
+            Object.entries(mappings || {})
+                .filter(([k]) => k !== key)
+                .some(([k, m]) => (m?.label || k) === trimmed));
+    }
+    isNameAlreadyUsed(value, key, keys) {
+        const trimmed = value.trim();
+        return trimmed !== key && (keys || []).includes(trimmed);
+    }
+    async saveLabel(key, newLabel) {
+        const config = await firstValueFrom(this.widgetConfigService.currentConfig$);
+        const mappings = (get(config, this.widgetConfigPath()) || {});
+        if (!mappings[key]) {
+            return;
+        }
+        mappings[key] = { ...mappings[key], label: newLabel.trim() };
+        set(config, this.widgetConfigPath(), mappings);
+        this.widgetConfigService.updateConfig(config);
+    }
+    async saveName(key, newName) {
+        const trimmedName = newName.trim();
+        if (trimmedName === key) {
+            return;
+        }
+        const config = await firstValueFrom(this.widgetConfigService.currentConfig$);
+        const mappings = (get(config, this.widgetConfigPath()) || {});
+        mappings[trimmedName] = mappings[key];
+        delete mappings[key];
+        set(config, this.widgetConfigPath(), mappings);
+        this.widgetConfigService.updateConfig(config);
+        this.widgetConfigService.notify$.next({
+            type: 'asset-property-mapping-key-renamed',
+            oldKey: key,
+            newKey: trimmedName
+        });
+    }
+    distributeColumns(columns, available) {
+        const visible = columns.filter(c => c.visible);
+        const n = visible.length;
+        const base = n > 0 ? Math.floor(available / n) : 0;
+        const remainder = n > 0 ? available % n : 0;
+        const result = Object.fromEntries(columns.map(c => [c.key, 0]));
+        visible.forEach((col, i) => {
+            result[col.key] = base + (i < remainder ? 1 : 0);
+        });
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyMappingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AssetPropertyMappingsComponent, isStandalone: true, selector: "c8y-asset-property-mappings", inputs: { widgetConfigPath: { classPropertyName: "widgetConfigPath", publicName: "widgetConfigPath", isSignal: true, isRequired: false, transformFunction: null }, initialMappings: { classPropertyName: "initialMappings", publicName: "initialMappings", isSignal: true, isRequired: false, transformFunction: null }, allowAddingNewMappings: { classPropertyName: "allowAddingNewMappings", publicName: "allowAddingNewMappings", isSignal: true, isRequired: false, transformFunction: null }, allowRenamingMappings: { classPropertyName: "allowRenamingMappings", publicName: "allowRenamingMappings", isSignal: true, isRequired: false, transformFunction: null }, allowRelabellingMappings: { classPropertyName: "allowRelabellingMappings", publicName: "allowRelabellingMappings", isSignal: true, isRequired: false, transformFunction: null }, allowEditingMappings: { classPropertyName: "allowEditingMappings", publicName: "allowEditingMappings", isSignal: true, isRequired: false, transformFunction: null }, allowRemovingMappings: { classPropertyName: "allowRemovingMappings", publicName: "allowRemovingMappings", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showNames: { classPropertyName: "showNames", publicName: "showNames", isSignal: true, isRequired: false, transformFunction: null }, showAssets: { classPropertyName: "showAssets", publicName: "showAssets", isSignal: true, isRequired: false, transformFunction: null }, showProperties: { classPropertyName: "showProperties", publicName: "showProperties", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, actionsColumnSpan: { classPropertyName: "actionsColumnSpan", publicName: "actionsColumnSpan", isSignal: true, isRequired: false, transformFunction: null }, onBeforeCopyMappingToClipboard: { classPropertyName: "onBeforeCopyMappingToClipboard", publicName: "onBeforeCopyMappingToClipboard", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"responsive-grid-table-wrapper--300 responsive-grid-table-wrapper--striped inner-scroll separator-top\"\n  style=\"max-height: 300px\"\n>\n  @let keys = keys$ | async;\n  @let resolvedAssets = resolvedAssets$ | async;\n  @let allMappings = mappings$ | async;\n  @if (!keys?.length) {\n    <div class=\"p-24\">\n      <c8y-ui-empty-state\n        icon=\"code\"\n        [title]=\"emptyStateTitle | translate\"\n        [subtitle]=\"emptyStateSubtitle | translate\"\n      ></c8y-ui-empty-state>\n    </div>\n  } @else {\n    @for (key of keys; track key) {\n      @let mapping = allMappings?.[key];\n      @let property = mapping?.assetProperty;\n      @let asset = resolvedAssets?.get(property?.asset?.id);\n      <div\n        class=\"responsive-grid-table responsive-grid-table__body responsive-grid-table--condensed responsive-grid-table--separator p-l-16\"\n      >\n        @if (showLabels()) {\n          <div\n            [class]=\"'col-' + row1ColumnSpans.label\"\n            [attr.aria-label]=\"'Label' | translate\"\n          >\n            <div class=\"fit-w\">\n              <p class=\"text-label-small\">{{ 'Label' | translate }}</p>\n              @if (allowRelabellingMappings()) {\n                <c8y-input-group-editable\n                  name=\"label-{{ key }}\"\n                  size=\"sm\"\n                  [ariaLabel]=\"'Label' | translate\"\n                  [ngModel]=\"mapping?.label || key\"\n                  [validators]=\"getLabelValidators(key)\"\n                  (ngModelChange)=\"saveLabel(key, $event)\"\n                >\n                  <c8y-message\n                    name=\"label-already-used\"\n                    [text]=\"'Label already used. Use a different one.' | translate\"\n                  ></c8y-message>\n                </c8y-input-group-editable>\n              } @else {\n                <span class=\"tag tag--default text-bold\">{{ mapping?.label || key }}</span>\n              }\n            </div>\n          </div>\n        }\n        @if (showNames()) {\n          <div\n            [class]=\"'col-' + row1ColumnSpans.name\"\n            [attr.aria-label]=\"'Name' | translate\"\n          >\n            <div class=\"fit-w\">\n              <p class=\"text-label-small\">{{ 'Name' | translate }}</p>\n              @if (allowRenamingMappings()) {\n                <c8y-input-group-editable\n                  class=\"text-bold\"\n                  name=\"name-{{ key }}\"\n                  size=\"sm\"\n                  [ariaLabel]=\"'Name' | translate\"\n                  [ngModel]=\"key\"\n                  [validators]=\"getNameValidators(key)\"\n                  (ngModelChange)=\"saveName(key, $event)\"\n                >\n                  <c8y-message\n                    name=\"key-already-used\"\n                    [text]=\"'Name already used. Use a different one.' | translate\"\n                  ></c8y-message>\n                </c8y-input-group-editable>\n              } @else {\n                {{ key }}\n              }\n            </div>\n          </div>\n        }\n        <div [class]=\"'showOnHover col-' + actionsColumnSpan()\">\n          <div class=\"col-actions fit-w min-width-0\">\n            <button\n              class=\"btn-dot btn-sm m-0\"\n              [attr.aria-label]=\"'Copy mapping to clipboard' | translate\"\n              tooltip=\"{{ 'Copy mapping to clipboard' | translate }}\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"copyMappingToClipboard(key, mapping!)\"\n            >\n              <i\n                class=\"icon-14\"\n                c8yIcon=\"clipboard\"\n                aria-hidden=\"true\"\n              ></i>\n            </button>\n            @if (allowEditingMappings() && !mapping?.assetProperty) {\n              <button\n                class=\"btn-dot btn-sm m-0\"\n                [attr.aria-label]=\"'Assign property' | translate\"\n                tooltip=\"{{ 'Assign property' | translate }}\"\n                type=\"button\"\n                [delay]=\"500\"\n                [disabled]=\"isDrawerOpen()\"\n                (click)=\"editMapping(key, mapping!)\"\n              >\n                <i\n                  class=\"icon-14\"\n                  c8yIcon=\"pencil\"\n                  aria-hidden=\"true\"\n                ></i>\n              </button>\n            }\n            @if (allowEditingMappings() && mapping?.assetProperty) {\n              <button\n                class=\"btn-dot btn-sm m-0\"\n                [attr.aria-label]=\"'Clear mapping' | translate\"\n                tooltip=\"{{ 'Clear mapping' | translate }}\"\n                type=\"button\"\n                [delay]=\"500\"\n                (click)=\"clearMapping(key)\"\n              >\n                <i\n                  class=\"icon-14\"\n                  c8yIcon=\"remove-property\"\n                  aria-hidden=\"true\"\n                ></i>\n              </button>\n            }\n            @if (allowRemovingMappings()) {\n              <button\n                class=\"btn-dot btn-sm btn-dot--danger m-0\"\n                [attr.aria-label]=\"'Remove mapping' | translate\"\n                tooltip=\"{{ 'Remove mapping' | translate }}\"\n                type=\"button\"\n                [delay]=\"500\"\n                (click)=\"removeMapping(key)\"\n              >\n                <i\n                  class=\"icon-14\"\n                  c8yIcon=\"minus-circle\"\n                  aria-hidden=\"true\"\n                ></i>\n              </button>\n            }\n          </div>\n        </div>\n        @if (showAssets()) {\n          <div\n            [class]=\"'p-b-16 col-' + row2ColumnSpans.asset\"\n            [attr.aria-label]=\"'Asset' | translate\"\n          >\n            <div class=\"min-width-0\">\n              <p class=\"text-label-small\">{{ 'Asset' | translate }}</p>\n              {{ mapping?.assetProperty?.asset?.name || mapping?.assetProperty?.asset?.id || '\u2014' }}\n            </div>\n          </div>\n        }\n        @if (showProperties()) {\n          <div\n            [class]=\"'p-b-16 col-' + row2ColumnSpans.property\"\n            [attr.aria-label]=\"'Property' | translate\"\n          >\n            <div class=\"min-width-0\">\n              <p class=\"text-label-small\">{{ 'Property' | translate }}</p>\n              {{ property?.label || property?.name || '\u2014' }}\n            </div>\n          </div>\n        }\n        @if (showValues()) {\n          <div\n            [class]=\"'p-b-16 col-' + row2ColumnSpans.value\"\n            [attr.aria-label]=\"'Value' | translate\"\n          >\n            <div class=\"min-width-0\">\n              <p class=\"text-label-small\">{{ 'Value' | translate }}</p>\n              @if (property && asset) {\n                @let value = (property | c8yAssetPropertyValue: asset | async) ?? '\u2014';\n                <samp\n                  class=\"text-truncate min-width-0\"\n                  title=\"{{ value }}\"\n                >\n                  {{ value }}\n                </samp>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n@if (allowAddingNewMappings() || (allowRemovingMappings() && (keys$ | async)?.length)) {\n  <div class=\"p-16 separator-top d-flex j-c-between a-i-center\">\n    @if (allowAddingNewMappings()) {\n      <button\n        class=\"btn btn-default btn-sm\"\n        type=\"button\"\n        [disabled]=\"isDrawerOpen()\"\n        (click)=\"addMappings()\"\n      >\n        <i\n          c8yIcon=\"plus-circle\"\n          aria-hidden=\"true\"\n        ></i>\n        {{ 'Add mappings' | translate }}\n      </button>\n    }\n    @if (allowRemovingMappings() && (keys$ | async)?.length) {\n      <button\n        class=\"btn btn-danger btn-sm\"\n        type=\"button\"\n        [disabled]=\"isDrawerOpen()\"\n        (click)=\"removeAllMappings()\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          aria-hidden=\"true\"\n        ></i>\n        {{ 'Remove all mappings' | translate }}\n      </button>\n    }\n  </div>\n}\n\n<c8y-widget-config-feedback>\n  <span\n    class=\"tag tag--info chip text-12 m-4\"\n    ngNonBindable\n    translate\n    [translateParams]=\"{\n      count: (keys$ | async)?.length ?? 0\n    }\"\n  >\n    {{ count }} selected\n  </span>\n</c8y-widget-config-feedback>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: InputGroupEditableComponent, selector: "c8y-input-group-editable", inputs: ["ariaLabel", "name", "size", "placeholder", "validators", "asyncValidators"], outputs: ["save", "cancel"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$4.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: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPropertyValuePipe, name: "c8yAssetPropertyValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AssetPropertyMappingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-asset-property-mappings', imports: [
+                        AsyncPipe,
+                        FormsModule,
+                        IconDirective,
+                        C8yTranslatePipe,
+                        C8yTranslateDirective,
+                        InputGroupEditableComponent,
+                        MessageDirective,
+                        EmptyStateComponent,
+                        AssetPropertyValuePipe,
+                        BsDropdownModule,
+                        TooltipModule,
+                        WidgetConfigFeedbackComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"responsive-grid-table-wrapper--300 responsive-grid-table-wrapper--striped inner-scroll separator-top\"\n  style=\"max-height: 300px\"\n>\n  @let keys = keys$ | async;\n  @let resolvedAssets = resolvedAssets$ | async;\n  @let allMappings = mappings$ | async;\n  @if (!keys?.length) {\n    <div class=\"p-24\">\n      <c8y-ui-empty-state\n        icon=\"code\"\n        [title]=\"emptyStateTitle | translate\"\n        [subtitle]=\"emptyStateSubtitle | translate\"\n      ></c8y-ui-empty-state>\n    </div>\n  } @else {\n    @for (key of keys; track key) {\n      @let mapping = allMappings?.[key];\n      @let property = mapping?.assetProperty;\n      @let asset = resolvedAssets?.get(property?.asset?.id);\n      <div\n        class=\"responsive-grid-table responsive-grid-table__body responsive-grid-table--condensed responsive-grid-table--separator p-l-16\"\n      >\n        @if (showLabels()) {\n          <div\n            [class]=\"'col-' + row1ColumnSpans.label\"\n            [attr.aria-label]=\"'Label' | translate\"\n          >\n            <div class=\"fit-w\">\n              <p class=\"text-label-small\">{{ 'Label' | translate }}</p>\n              @if (allowRelabellingMappings()) {\n                <c8y-input-group-editable\n                  name=\"label-{{ key }}\"\n                  size=\"sm\"\n                  [ariaLabel]=\"'Label' | translate\"\n                  [ngModel]=\"mapping?.label || key\"\n                  [validators]=\"getLabelValidators(key)\"\n                  (ngModelChange)=\"saveLabel(key, $event)\"\n                >\n                  <c8y-message\n                    name=\"label-already-used\"\n                    [text]=\"'Label already used. Use a different one.' | translate\"\n                  ></c8y-message>\n                </c8y-input-group-editable>\n              } @else {\n                <span class=\"tag tag--default text-bold\">{{ mapping?.label || key }}</span>\n              }\n            </div>\n          </div>\n        }\n        @if (showNames()) {\n          <div\n            [class]=\"'col-' + row1ColumnSpans.name\"\n            [attr.aria-label]=\"'Name' | translate\"\n          >\n            <div class=\"fit-w\">\n              <p class=\"text-label-small\">{{ 'Name' | translate }}</p>\n              @if (allowRenamingMappings()) {\n                <c8y-input-group-editable\n                  class=\"text-bold\"\n                  name=\"name-{{ key }}\"\n                  size=\"sm\"\n                  [ariaLabel]=\"'Name' | translate\"\n                  [ngModel]=\"key\"\n                  [validators]=\"getNameValidators(key)\"\n                  (ngModelChange)=\"saveName(key, $event)\"\n                >\n                  <c8y-message\n                    name=\"key-already-used\"\n                    [text]=\"'Name already used. Use a different one.' | translate\"\n                  ></c8y-message>\n                </c8y-input-group-editable>\n              } @else {\n                {{ key }}\n              }\n            </div>\n          </div>\n        }\n        <div [class]=\"'showOnHover col-' + actionsColumnSpan()\">\n          <div class=\"col-actions fit-w min-width-0\">\n            <button\n              class=\"btn-dot btn-sm m-0\"\n              [attr.aria-label]=\"'Copy mapping to clipboard' | translate\"\n              tooltip=\"{{ 'Copy mapping to clipboard' | translate }}\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"copyMappingToClipboard(key, mapping!)\"\n            >\n              <i\n                class=\"icon-14\"\n                c8yIcon=\"clipboard\"\n                aria-hidden=\"true\"\n              ></i>\n            </button>\n            @if (allowEditingMappings() && !mapping?.assetProperty) {\n              <button\n                class=\"btn-dot btn-sm m-0\"\n                [attr.aria-label]=\"'Assign property' | translate\"\n                tooltip=\"{{ 'Assign property' | translate }}\"\n                type=\"button\"\n                [delay]=\"500\"\n                [disabled]=\"isDrawerOpen()\"\n                (click)=\"editMapping(key, mapping!)\"\n              >\n                <i\n                  class=\"icon-14\"\n                  c8yIcon=\"pencil\"\n                  aria-hidden=\"true\"\n                ></i>\n              </button>\n            }\n            @if (allowEditingMappings() && mapping?.assetProperty) {\n              <button\n                class=\"btn-dot btn-sm m-0\"\n                [attr.aria-label]=\"'Clear mapping' | translate\"\n                tooltip=\"{{ 'Clear mapping' | translate }}\"\n                type=\"button\"\n                [delay]=\"500\"\n                (click)=\"clearMapping(key)\"\n              >\n                <i\n                  class=\"icon-14\"\n                  c8yIcon=\"remove-property\"\n                  aria-hidden=\"true\"\n                ></i>\n              </button>\n            }\n            @if (allowRemovingMappings()) {\n              <button\n                class=\"btn-dot btn-sm btn-dot--danger m-0\"\n                [attr.aria-label]=\"'Remove mapping' | translate\"\n                tooltip=\"{{ 'Remove mapping' | translate }}\"\n                type=\"button\"\n                [delay]=\"500\"\n                (click)=\"removeMapping(key)\"\n              >\n                <i\n                  class=\"icon-14\"\n                  c8yIcon=\"minus-circle\"\n                  aria-hidden=\"true\"\n                ></i>\n              </button>\n            }\n          </div>\n        </div>\n        @if (showAssets()) {\n          <div\n            [class]=\"'p-b-16 col-' + row2ColumnSpans.asset\"\n            [attr.aria-label]=\"'Asset' | translate\"\n          >\n            <div class=\"min-width-0\">\n              <p class=\"text-label-small\">{{ 'Asset' | translate }}</p>\n              {{ mapping?.assetProperty?.asset?.name || mapping?.assetProperty?.asset?.id || '\u2014' }}\n            </div>\n          </div>\n        }\n        @if (showProperties()) {\n          <div\n            [class]=\"'p-b-16 col-' + row2ColumnSpans.property\"\n            [attr.aria-label]=\"'Property' | translate\"\n          >\n            <div class=\"min-width-0\">\n              <p class=\"text-label-small\">{{ 'Property' | translate }}</p>\n              {{ property?.label || property?.name || '\u2014' }}\n            </div>\n          </div>\n        }\n        @if (showValues()) {\n          <div\n            [class]=\"'p-b-16 col-' + row2ColumnSpans.value\"\n            [attr.aria-label]=\"'Value' | translate\"\n          >\n            <div class=\"min-width-0\">\n              <p class=\"text-label-small\">{{ 'Value' | translate }}</p>\n              @if (property && asset) {\n                @let value = (property | c8yAssetPropertyValue: asset | async) ?? '\u2014';\n                <samp\n                  class=\"text-truncate min-width-0\"\n                  title=\"{{ value }}\"\n                >\n                  {{ value }}\n                </samp>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n@if (allowAddingNewMappings() || (allowRemovingMappings() && (keys$ | async)?.length)) {\n  <div class=\"p-16 separator-top d-flex j-c-between a-i-center\">\n    @if (allowAddingNewMappings()) {\n      <button\n        class=\"btn btn-default btn-sm\"\n        type=\"button\"\n        [disabled]=\"isDrawerOpen()\"\n        (click)=\"addMappings()\"\n      >\n        <i\n          c8yIcon=\"plus-circle\"\n          aria-hidden=\"true\"\n        ></i>\n        {{ 'Add mappings' | translate }}\n      </button>\n    }\n    @if (allowRemovingMappings() && (keys$ | async)?.length) {\n      <button\n        class=\"btn btn-danger btn-sm\"\n        type=\"button\"\n        [disabled]=\"isDrawerOpen()\"\n        (click)=\"removeAllMappings()\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          aria-hidden=\"true\"\n        ></i>\n        {{ 'Remove all mappings' | translate }}\n      </button>\n    }\n  </div>\n}\n\n<c8y-widget-config-feedback>\n  <span\n    class=\"tag tag--info chip text-12 m-4\"\n    ngNonBindable\n    translate\n    [translateParams]=\"{\n      count: (keys$ | async)?.length ?? 0\n    }\"\n  >\n    {{ count }} selected\n  </span>\n</c8y-widget-config-feedback>\n" }]
+        }], propDecorators: { widgetConfigPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetConfigPath", required: false }] }], initialMappings: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMappings", required: false }] }], allowAddingNewMappings: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAddingNewMappings", required: false }] }], allowRenamingMappings: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRenamingMappings", required: false }] }], allowRelabellingMappings: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRelabellingMappings", required: false }] }], allowEditingMappings: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEditingMappings", required: false }] }], allowRemovingMappings: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRemovingMappings", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNames", required: false }] }], showAssets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAssets", required: false }] }], showProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProperties", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], actionsColumnSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsColumnSpan", required: false }] }], onBeforeCopyMappingToClipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "onBeforeCopyMappingToClipboard", required: false }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ALL_GLOBAL_ROLES_SELECTED, AddDashboardComponent, AddDashboardFactory, AppearanceSettingsComponent, CONTEXT_DASHBOARD_CONFIG, ContextDashboardComponent, ContextDashboardModule, ContextDashboardService, ContextDashboardType, DASHBOARD_CHILDREN_STATE_NAME, DASHBOARD_DETAILS_OUTLET, DASHBOARD_DETAILS_TABS_OUTLET_NAME, DASHBOARD_SETTINGS_CHANGES, DASHBOARD_THEME_CLASSES, DashboardActionBarFactory, DashboardDetailComponent, DashboardDetailService, DashboardDetailsTabId, DeviceInfoDashboardComponent, DeviceInfoDashboardModule, DeviceManagementHomeDashboardComponent, DeviceManagementHomeDashboardModule, GlobalContextSectionComponent, HOOK_WIDGET_CONFIG, NewDashboardGuard, PRODUCT_EXPERIENCE, PasteDashboardActionComponent, REPORT_DEFAULT_NAVIGATION_NODE_PRIORITY, STYLING_CLASS_PREFIXES, TypeDashboardInfoComponent, WIDGET_CONTENT_CLASSES, WIDGET_HEADER_CLASSES, WidgetAssetSelectorComponent, WidgetConfigAppearanceComponent, WidgetConfigComponent, WidgetConfigFeedbackComponent, WidgetConfigGeneralComponent, WidgetConfigSectionComponent, WidgetConfigSectionService, WidgetConfigService, WidgetPreviewComponent, WidgetPreviewWrapperComponent, WidgetService, hookWidgetConfig, newDashboardTab };
+export { ALL_GLOBAL_ROLES_SELECTED, AddDashboardComponent, AddDashboardFactory, AppearanceSettingsComponent, AssetPropertyMappingsComponent, AssetPropertyMappingsService, CONTEXT_DASHBOARD_CONFIG, ContextDashboardComponent, ContextDashboardModule, ContextDashboardService, ContextDashboardType, DASHBOARD_CHILDREN_STATE_NAME, DASHBOARD_DETAILS_OUTLET, DASHBOARD_DETAILS_TABS_OUTLET_NAME, DASHBOARD_SETTINGS_CHANGES, DASHBOARD_THEME_CLASSES, DashboardActionBarFactory, DashboardDetailComponent, DashboardDetailService, DashboardDetailsTabId, DeviceInfoDashboardComponent, DeviceInfoDashboardModule, DeviceManagementHomeDashboardComponent, DeviceManagementHomeDashboardModule, GlobalContextSectionComponent, HOOK_WIDGET_CONFIG, NewDashboardGuard, PRODUCT_EXPERIENCE, PasteDashboardActionComponent, REPORT_DEFAULT_NAVIGATION_NODE_PRIORITY, STYLING_CLASS_PREFIXES, TypeDashboardInfoComponent, WIDGET_CONTENT_CLASSES, WIDGET_HEADER_CLASSES, WidgetAssetSelectorComponent, WidgetConfigAppearanceComponent, WidgetConfigComponent, WidgetConfigFeedbackComponent, WidgetConfigGeneralComponent, WidgetConfigSectionComponent, WidgetConfigSectionService, WidgetConfigService, WidgetPreviewComponent, WidgetPreviewWrapperComponent, WidgetService, getPropertyBaseKey, hookWidgetConfig, newDashboardTab, quoteAndEscape, renamePropertyKeyInCode };
 //# sourceMappingURL=c8y-ngx-components-context-dashboard.mjs.map