npm - @c8y/ngx-components - Versions diffs - 1023.90.1 → 1023.96.0 - Mend

@c8y/ngx-components 1023.90.1 → 1023.96.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

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

@@ -4,7 +4,7 @@ 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, 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, forkJoin, firstValueFrom } 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, EMPTY, defer, forkJoin, firstValueFrom } from 'rxjs';
 import { gettext } from '@c8y/ngx-components/gettext';
 import { __decorate, __metadata } from 'tslib';
 import * as i3 from '@angular/common';
@@ -4487,15 +4487,16 @@ class AssetPropertyMappingsService {
      *
      * @param mappings - The asset property mappings configuration.
      * @param realtimeControl$ - Observable that controls realtime notifications (true = enabled, false = disabled, default = enabled).
+     * @param refresh$ - Optional trigger; each emission forces a fresh REST fetch of all property values.
      * @returns Observable emitting updated asset property values as they change.
      */
-    getValues$(mappings, realtimeControl$ = of(true)) {
+    getValues$(mappings, realtimeControl$ = of(true), refresh$ = EMPTY) {
         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({}));
+        return merge(...computed.map(mapping => this.getComputedPropertyValues$(mapping, realtimeControl$, refresh$)), ...Object.entries(_regularByAssetId).map(([assetId, mappings]) => this.getRegularPropertyValues$(assetId, mappings, realtimeControl$, refresh$))).pipe(scan((acc, update) => ({ ...acc, ...update }), {}), startWith({}));
     }
     groupByType(mappings) {
         const regular = [];
@@ -4525,7 +4526,7 @@ class AssetPropertyMappingsService {
             return acc;
         }, {});
     }
-    getComputedPropertyValues$(mapping, realtimeControl$) {
+    getComputedPropertyValues$(mapping, realtimeControl$, refresh$) {
         if (!mapping.assetProperty) {
             return of(null);
         }
@@ -4552,28 +4553,21 @@ class AssetPropertyMappingsService {
                 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) => ({
+        return combineLatest([
+            realtimeControl$.pipe(distinctUntilChanged()),
+            refresh$.pipe(startWith(undefined))
+        ]).pipe(switchMap(([enabled]) => (enabled ? computedValue$ : computedValue$.pipe(take$1(1)))), map(value => ({ [mapping.name]: value })), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    getRegularPropertyValues$(assetId, mappings, realtimeControl$, refresh$) {
+        const fetchAsset$ = defer(() => from(this.inventory.detail(assetId, { withLatestValues: true }))).pipe(map(res => res?.data));
+        const liveAsset$ = (initial) => this.moRealtime.onAll$(assetId).pipe(map(update => update?.data), startWith(initial));
+        return combineLatest([
+            realtimeControl$.pipe(distinctUntilChanged()),
+            refresh$.pipe(startWith(undefined))
+        ]).pipe(switchMap(([enabled]) => (enabled ? fetchAsset$.pipe(switchMap(liveAsset$)) : fetchAsset$)), 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 }));
+        }), {})), shareReplay({ bufferSize: 1, refCount: true }));
     }
     getRegularPropertyValue(asset, property) {
         if (!asset || !property) {
@@ -4699,6 +4693,10 @@ class AssetPropertyMappingsComponent {
         this.allowAddingNewMappings = input(true, ...(ngDevMode ? [{ debugName: "allowAddingNewMappings" }] : []));
         this.allowRenamingMappings = input(true, ...(ngDevMode ? [{ debugName: "allowRenamingMappings" }] : []));
         this.allowRelabellingMappings = input(true, ...(ngDevMode ? [{ debugName: "allowRelabellingMappings" }] : []));
+        /** When set, mapping names must match this regex. Validated on rename. */
+        this.mappingNameFormatRegex = input(null, ...(ngDevMode ? [{ debugName: "mappingNameFormatRegex" }] : []));
+        /** Error message shown when a name fails the mappingNameFormatRegex check. */
+        this.mappingNameFormatErrorMessage = input(gettext('Name does not match the required format.'), ...(ngDevMode ? [{ debugName: "mappingNameFormatErrorMessage" }] : []));
         this.allowEditingMappings = input(true, ...(ngDevMode ? [{ debugName: "allowEditingMappings" }] : []));
         this.allowRemovingMappings = input(true, ...(ngDevMode ? [{ debugName: "allowRemovingMappings" }] : []));
         this.showLabels = input(true, ...(ngDevMode ? [{ debugName: "showLabels" }] : []));
@@ -4711,10 +4709,14 @@ class AssetPropertyMappingsComponent {
          * 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}`).
+         * The second argument is the current widget config, which can be used to adjust
+         * the output based on widget-specific settings (e.g. legacy mode).
          */
         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.emptyStateTitle = input(gettext('No asset property mappings'), ...(ngDevMode ? [{ debugName: "emptyStateTitle" }] : []));
+        this.emptyStateSubtitle = input(gettext('Add first asset property mapping.'), ...(ngDevMode ? [{ debugName: "emptyStateSubtitle" }] : []));
+        /** Message shown in the section's feedback area. Available placeholder: {{ count }} */
+        this.feedbackMessage = input(gettext('{{ count }} selected'), ...(ngDevMode ? [{ debugName: "feedbackMessage" }] : []));
         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 });
@@ -4753,7 +4755,7 @@ class AssetPropertyMappingsComponent {
         const config = await firstValueFrom(this.widgetConfigService.currentConfig$);
         if (!get(config, this.widgetConfigPath())) {
             const newConfig = { ...config };
-            const mappings = structuredClone(this.initialMappings());
+            const mappings = structuredClone(this.initialMappings() ?? {});
             for (const [key, mapping] of Object.entries(mappings)) {
                 if (mapping.assetProperty && !mapping.assetProperty.asset) {
                     if (!config.device) {
@@ -4815,7 +4817,7 @@ class AssetPropertyMappingsComponent {
             set(newConfig, this.widgetConfigPath(), mappings);
             this.widgetConfigService.updateConfig(newConfig);
         }
-        catch (ex) {
+        catch {
             // cancelled
         }
         finally {
@@ -4855,7 +4857,7 @@ class AssetPropertyMappingsComponent {
             set(newConfig, this.widgetConfigPath(), mappings);
             this.widgetConfigService.updateConfig(newConfig);
         }
-        catch (ex) {
+        catch {
             // cancelled
         }
         finally {
@@ -4869,7 +4871,8 @@ class AssetPropertyMappingsComponent {
     }
     async copyMappingToClipboard(name, mapping) {
         const mappingToTextFn = this.onBeforeCopyMappingToClipboard();
-        const text = mappingToTextFn({ name, ...mapping });
+        const config = await firstValueFrom(this.widgetConfigService.currentConfig$);
+        const text = mappingToTextFn({ name, ...mapping }, config);
         await this.clipboardService.writeText(text);
     }
     async removeMapping(name) {
@@ -4897,11 +4900,17 @@ class AssetPropertyMappingsComponent {
     }
     getNameValidators(key) {
         if (!this.nameValidatorCache.has(key)) {
+            const regex = this.mappingNameFormatRegex();
             this.nameValidatorCache.set(key, [
                 Validators.required,
                 ctrl => this.isNameAlreadyUsed(ctrl.value, key, this.keysSignal())
                     ? { 'key-already-used': true }
-                    : null
+                    : null,
+                ...(regex
+                    ? [
+                        (ctrl) => regex.test(ctrl.value?.trim()) ? null : { 'key-invalid-format': true }
+                    ]
+                    : [])
             ]);
         }
         return this.nameValidatorCache.get(key);
@@ -4956,7 +4965,7 @@ class AssetPropertyMappingsComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AssetPropertyMappingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 }, mappingNameFormatRegex: { classPropertyName: "mappingNameFormatRegex", publicName: "mappingNameFormatRegex", isSignal: true, isRequired: false, transformFunction: null }, mappingNameFormatErrorMessage: { classPropertyName: "mappingNameFormatErrorMessage", publicName: "mappingNameFormatErrorMessage", 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 }, emptyStateTitle: { classPropertyName: "emptyStateTitle", publicName: "emptyStateTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyStateSubtitle: { classPropertyName: "emptyStateSubtitle", publicName: "emptyStateSubtitle", isSignal: true, isRequired: false, transformFunction: null }, feedbackMessage: { classPropertyName: "feedbackMessage", publicName: "feedbackMessage", 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-message\n                    name=\"key-invalid-format\"\n                    [text]=\"mappingNameFormatErrorMessage() | 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 class=\"tag tag--info chip text-12 m-4\">\n    {{ feedbackMessage() | translate: { count: keys?.length ?? 0 } }}\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: "component", type: InputGroupEditableComponent, selector: "c8y-input-group-editable", inputs: ["ariaLabel", "name", "size", "placeholder", "validators", "asyncValidators", "autocomplete"], 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.25", ngImport: i0, type: AssetPropertyMappingsComponent, decorators: [{
             type: Component,
@@ -4965,7 +4974,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         FormsModule,
                         IconDirective,
                         C8yTranslatePipe,
-                        C8yTranslateDirective,
                         InputGroupEditableComponent,
                         MessageDirective,
                         EmptyStateComponent,
@@ -4973,12 +4981,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         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 }] }] } });
+                    ], 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-message\n                    name=\"key-invalid-format\"\n                    [text]=\"mappingNameFormatErrorMessage() | 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 class=\"tag tag--info chip text-12 m-4\">\n    {{ feedbackMessage() | translate: { count: keys?.length ?? 0 } }}\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 }] }], mappingNameFormatRegex: [{ type: i0.Input, args: [{ isSignal: true, alias: "mappingNameFormatRegex", required: false }] }], mappingNameFormatErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "mappingNameFormatErrorMessage", 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 }] }], emptyStateTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateTitle", required: false }] }], emptyStateSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateSubtitle", required: false }] }], feedbackMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackMessage", required: false }] }] } });
 /**
  * Generated bundle index. Do not edit.
  */
-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 };
+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, escapeForRegExp, getPropertyBaseKey, hookWidgetConfig, newDashboardTab, quoteAndEscape, renamePropertyKeyInCode };
 //# sourceMappingURL=c8y-ngx-components-context-dashboard.mjs.map