@c8y/ngx-components 1023.53.0 → 1023.55.5

package/fesm2022/c8y-ngx-components-sub-assets.mjs

@@ -11,7 +11,7 @@ import * as i4 from '@c8y/ngx-components/assets-navigator';
 import { AssetTypeGridColumn, AssetTypeCellRendererComponent } from '@c8y/ngx-components/data-grid-columns/asset-type';
 import * as i1 from '@ngx-translate/core';
 import { firstValueFrom, catchError, of, Subject, delay, takeUntil as takeUntil$1, tap } from 'rxjs';
-import { NgIf, NgClass, NgTemplateOutlet, NgStyle, NgSwitch, NgSwitchCase, NgFor, NgSwitchDefault, AsyncPipe } from '@angular/common';
+import { NgIf, NgClass, NgTemplateOutlet, NgStyle, AsyncPipe } from '@angular/common';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { CdkStep } from '@angular/cdk/stepper';
 import * as i4$1 from '@c8y/ngx-components/device-list';
@@ -76,15 +76,27 @@ class SubAssetsService extends DataGridService {
         this.IS_DYNAMIC_GROUP_FRAGMENT = 'c8y_IsDynamicGroup';
     }
     async getCustomProperties(group) {
-        const assetType$ = this.assetTypes.getAssetTypeByName$(group.type);
-        const assetType = await firstValueFrom(assetType$);
-        if (assetType) {
+        const assetType = await firstValueFrom(this.assetTypes.getAssetTypeByName$(group.type));
+        if (assetType?.c8y_IsAssetType) {
             const { data } = await this.inventoryService.childAdditionsList(assetType, {
                 pageSize: 2000,
                 query: "$filter=(has('c8y_IsAssetProperty'))"
             });
             return data;
         }
+        else if (assetType?.c8y_JsonSchema?.definitions) {
+            const data = [];
+            Object.entries(assetType.c8y_JsonSchema.definitions).forEach(([key, value]) => {
+                const required = assetType.c8y_JsonSchema.required?.includes(key) || false;
+                if (typeof value === 'object' && value !== null) {
+                    data.push({ ...value, key, isRequired: required });
+                }
+                else {
+                    data.push({ key, isRequired: required });
+                }
+            });
+            return data;
+        }
         return [];
     }
     getDefaultColumns(_filterable = true, _sortable = true) {
@@ -475,7 +487,7 @@ class DeleteAssetsModalComponent {
         this.deleteGroupSubAssetsMsg = this.translateService.instant(gettext('Also delete all devices inside "{{name}}" and its subassets.'), { name: this.asset.name });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeleteAssetsModalComponent, deps: [{ token: i1.TranslateService }, { token: i3.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DeleteAssetsModalComponent, isStandalone: true, selector: "c8y-delete-assets-modal", inputs: { showWithCascadeCheckbox: "showWithCascadeCheckbox", showWithDeviceUserCheckbox: "showWithDeviceUserCheckbox", asset: "asset" }, viewQueries: [{ propertyName: "modalRef", first: true, predicate: ["modalRef"], descendants: true }], ngImport: i0, template: "<c8y-confirm-modal [title]=\"title\" [status]=\"status\" [labels]=\"labels\" #modalRef>\n  <form #assetsForm=\"ngForm\">\n    <p class=\"text-wrap m-b-16\">\n      {{ message | translate }}\n    </p>\n    <c8y-form-group *ngIf=\"showWithCascadeCheckbox\" class=\"m-b-0\">\n      <label title=\"{{ 'Delete devices' | translate }}\" class=\"c8y-checkbox\">\n        <input\n          type=\"checkbox\"\n          name=\"cascade\"\n          [(ngModel)]=\"config.cascade\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE.DELETE_ASSET.COMPONENTS.DELETE_ASSETS_MODAL,\n            action: PRODUCT_EXPERIENCE.DELETE_ASSET.ACTIONS.CASCADE_DELETE\n          }\"\n          [disabled]=\"config?.withDeviceUser\"\n        />\n        <span></span>\n        <span class=\"text-break-word\">\n          {{ deleteGroupSubAssetsMsg | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n    <c8y-form-group *ngIf=\"showWithDeviceUserCheckbox\" class=\"m-b-0\">\n      <label title=\"{{ 'Delete associated device owner' | translate }}\" class=\"c8y-checkbox\">\n        <input\n          type=\"checkbox\"\n          name=\"withDeviceUser\"\n          [(ngModel)]=\"config.withDeviceUser\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE.DELETE_ASSET.COMPONENTS.DELETE_ASSETS_MODAL,\n            action: PRODUCT_EXPERIENCE.DELETE_ASSET.ACTIONS.DELETE_DEVICE_OWNER\n          }\"\n          [disabled]=\"config?.cascade\"\n        />\n        <span></span>\n        <span>\n          {{ 'Also delete associated device owner.' | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n  </form>\n</c8y-confirm-modal>\n", dependencies: [{ kind: "component", type: ConfirmModalComponent, selector: "c8y-confirm-modal", inputs: ["title", "body", "confirmOptions", "status", "labels"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DeleteAssetsModalComponent, isStandalone: true, selector: "c8y-delete-assets-modal", inputs: { showWithCascadeCheckbox: "showWithCascadeCheckbox", showWithDeviceUserCheckbox: "showWithDeviceUserCheckbox", asset: "asset" }, viewQueries: [{ propertyName: "modalRef", first: true, predicate: ["modalRef"], descendants: true }], ngImport: i0, template: "<c8y-confirm-modal [title]=\"title\" [status]=\"status\" [labels]=\"labels\" #modalRef>\n  <form #assetsForm=\"ngForm\">\n    <p class=\"text-wrap m-b-16\">\n      {{ message | translate }}\n    </p>\n    <c8y-form-group *ngIf=\"showWithCascadeCheckbox\" class=\"m-b-0\">\n      <label title=\"{{ 'Delete devices' | translate }}\" class=\"c8y-checkbox\">\n        <input\n          type=\"checkbox\"\n          name=\"cascade\"\n          [(ngModel)]=\"config.cascade\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE.DELETE_ASSET.COMPONENTS.DELETE_ASSETS_MODAL,\n            action: PRODUCT_EXPERIENCE.DELETE_ASSET.ACTIONS.CASCADE_DELETE\n          }\"\n          [disabled]=\"config?.withDeviceUser\"\n        />\n        <span></span>\n        <span class=\"text-break-word\">\n          {{ deleteGroupSubAssetsMsg | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n    <c8y-form-group *ngIf=\"showWithDeviceUserCheckbox\" class=\"m-b-0\">\n      <label title=\"{{ 'Delete associated device owner' | translate }}\" class=\"c8y-checkbox\">\n        <input\n          type=\"checkbox\"\n          name=\"withDeviceUser\"\n          [(ngModel)]=\"config.withDeviceUser\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE.DELETE_ASSET.COMPONENTS.DELETE_ASSETS_MODAL,\n            action: PRODUCT_EXPERIENCE.DELETE_ASSET.ACTIONS.DELETE_DEVICE_OWNER\n          }\"\n          [disabled]=\"config?.cascade\"\n        />\n        <span></span>\n        <span>\n          {{ 'Also delete associated device owner.' | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n  </form>\n</c8y-confirm-modal>\n", dependencies: [{ kind: "component", type: ConfirmModalComponent, selector: "c8y-confirm-modal", inputs: ["title", "body", "confirmOptions", "status", "requireCodeVerification", "labels"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeleteAssetsModalComponent, decorators: [{
             type: Component,
@@ -617,7 +629,7 @@ class UnassignModalComponent {
         this.closeSubject.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UnassignModalComponent, deps: [{ token: i1.TranslateService }, { token: i3.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: UnassignModalComponent, isStandalone: true, selector: "c8y-unassign-modal", inputs: { asset: "asset" }, viewQueries: [{ propertyName: "modalRef", first: true, predicate: ["modalRef"], descendants: true }], ngImport: i0, template: "<c8y-confirm-modal [title]=\"title\" [status]=\"status\" [labels]=\"labels\" #modalRef>\n  <span>{{ message | translate }}</span>\n</c8y-confirm-modal>\n", dependencies: [{ kind: "component", type: ConfirmModalComponent, selector: "c8y-confirm-modal", inputs: ["title", "body", "confirmOptions", "status", "labels"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: UnassignModalComponent, isStandalone: true, selector: "c8y-unassign-modal", inputs: { asset: "asset" }, viewQueries: [{ propertyName: "modalRef", first: true, predicate: ["modalRef"], descendants: true }], ngImport: i0, template: "<c8y-confirm-modal [title]=\"title\" [status]=\"status\" [labels]=\"labels\" #modalRef>\n  <span>{{ message | translate }}</span>\n</c8y-confirm-modal>\n", dependencies: [{ kind: "component", type: ConfirmModalComponent, selector: "c8y-confirm-modal", inputs: ["title", "body", "confirmOptions", "status", "requireCodeVerification", "labels"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UnassignModalComponent, decorators: [{
             type: Component,
@@ -1410,7 +1422,7 @@ class AssetPropertiesItemComponent {
     formComplexPropsValue() {
         const complexProps = {};
         this.complex.forEach(complexObj => {
-            if (complexObj.file) {
+            if (complexObj.file || complexObj.type === 'date') {
                 complexProps[complexObj.key] = complexObj.value;
             }
             else {
@@ -1445,21 +1457,11 @@ class AssetPropertiesItemComponent {
         return this.filesService.toBase64(imageFile);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertiesItemComponent, deps: [{ token: i3.AlertService }, { token: i3.C8yJSONSchema }, { token: i3.FilesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AssetPropertiesItemComponent, isStandalone: true, selector: "c8y-asset-properties-item", inputs: { key: "key", value: "value", label: "label", type: "type", file: "file", complex: "complex", isEdit: "isEdit", jsonSchema: "jsonSchema" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\" *ngIf=\"!isEdit\">\n  <ng-container *ngSwitchCase=\"'date'\">\n    {{ (value | c8yDate: 'fullDate') || ('Undefined' | translate) }}\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'file'\">\n    <ng-container *ngIf=\"file\">\n      <img *ngIf=\"previewImage\" [src]=\"previewImage\" class=\"img-responsive\" />\n      <button\n        *ngIf=\"!previewImage\"\n        (click)=\"filesService.download(file)\"\n        type=\"button\"\n        title=\"{{ 'Download' | translate }} {{ file.name }}\"\n        class=\"btn btn-clean text-truncate p-0\"\n      >\n        {{ file.name }}\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"!file\">\n      {{ 'No file attached.' | translate }}\n    </ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'object'\">\n    <ul class=\"list-unstyled c8y-custom-properties\">\n      <li\n        *ngFor=\"let prop of complex; let i = index\"\n        [ngClass]=\"{ 'separator-top-bottom': i === 0, 'separator-bottom': i > 0 }\"\n        class=\"p-t-4 p-b-4 d-flex text-nowrap\"\n      >\n        <label\n          class=\"small m-b-0 m-r-8 text-truncate\"\n          title=\"{{ prop.label | translate }}\"\n          [ngClass]=\"{ 'a-s-start': prop.file }\"\n        >\n          {{ prop.label | translate }}\n        </label>\n        <span class=\"m-l-auto\" style=\"max-width: {{ prop.file ? '50%' : '100%' }}; min-width:0;\">\n          <c8y-asset-properties-item\n            [file]=\"prop.file\"\n            [key]=\"prop.key\"\n            [type]=\"prop.type\"\n            [value]=\"prop.value\"\n          ></c8y-asset-properties-item>\n        </span>\n      </li>\n    </ul>\n  </ng-container>\n  <!--\n  <ng-container *ngSwitchCase=\"'boolean'\">\n      <input type=\"checkbox\" [checked]=\"value\" [disabled]=\"true\" />\n    </ng-container>\n  -->\n  <ng-container *ngSwitchCase=\"type === 'number' || type === 'boolean' ? type : ''\">\n    <p class=\"text-truncate\" title=\"{{ value != null ? value : ('Undefined' | translate) }}\">\n      {{ value != null ? value : ('Undefined' | translate) }}\n    </p>\n  </ng-container>\n  <ng-container *ngSwitchDefault>\n    <p class=\"text-truncate\" title=\"{{ (value | translate) || ('Undefined' | translate) }}\">\n      {{ (value | translate) || ('Undefined' | translate) }}\n    </p>\n  </ng-container>\n</ng-container>\n<formly-form *ngIf=\"isEdit\" [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n", dependencies: [{ kind: "component", type: AssetPropertiesItemComponent, selector: "c8y-asset-properties-item", inputs: ["key", "value", "label", "type", "file", "complex", "isEdit", "jsonSchema"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AssetPropertiesItemComponent, isStandalone: true, selector: "c8y-asset-properties-item", inputs: { key: "key", value: "value", label: "label", type: "type", file: "file", complex: "complex", isEdit: "isEdit", jsonSchema: "jsonSchema" }, usesOnChanges: true, ngImport: i0, template: "@if (!isEdit) {\n  @switch (type) {\n    @case ('date') {\n      {{ (value | c8yDate: 'fullDate') || ('Undefined' | translate) }}\n    }\n    @case ('file') {\n      @if (file) {\n        @if (previewImage) {\n          <img\n            class=\"img-responsive\"\n            [src]=\"previewImage\"\n          />\n        }\n        @if (!previewImage) {\n          <button\n            class=\"btn btn-clean text-truncate p-0\"\n            title=\"{{ 'Download' | translate }} {{ file.name }}\"\n            type=\"button\"\n            (click)=\"filesService.download(file)\"\n          >\n            {{ file.name }}\n          </button>\n        }\n      } @else {\n        {{ 'No file attached.' | translate }}\n      }\n    }\n    @case ('object') {\n      <ul class=\"list-unstyled c8y-custom-properties\">\n        @for (prop of complex; track prop.key; let i = $index) {\n          <li\n            class=\"p-t-4 p-b-4 d-flex text-nowrap\"\n            [ngClass]=\"{ 'separator-top-bottom': i === 0, 'separator-bottom': i > 0 }\"\n          >\n            <label\n              class=\"small m-b-0 m-r-8 text-truncate\"\n              title=\"{{ prop.label | translate }}\"\n              [ngClass]=\"{ 'a-s-start': prop.file }\"\n            >\n              {{ prop.label | translate }}\n            </label>\n            <span\n              class=\"m-l-auto\"\n              [ngStyle]=\"{\n                'max-width': prop.file ? '50%' : '100%',\n                'min-width': '0'\n              }\"\n            >\n              <c8y-asset-properties-item\n                [file]=\"prop.file\"\n                [key]=\"prop.key\"\n                [type]=\"prop.type\"\n                [value]=\"prop.value\"\n              ></c8y-asset-properties-item>\n            </span>\n          </li>\n        }\n      </ul>\n    }\n    @case (type === 'number' || type === 'boolean' ? type : '') {\n      <p\n        class=\"text-truncate\"\n        title=\"{{ value != null ? value : ('Undefined' | translate) }}\"\n      >\n        {{ value != null ? value : ('Undefined' | translate) }}\n      </p>\n    }\n    @default {\n      <p\n        class=\"text-truncate\"\n        title=\"{{ (value | translate) || ('Undefined' | translate) }}\"\n      >\n        {{ (value | translate) || ('Undefined' | translate) }}\n      </p>\n    }\n  }\n}\n@if (isEdit) {\n  <formly-form\n    [form]=\"form\"\n    [fields]=\"fields\"\n    [model]=\"model\"\n  ></formly-form>\n}\n", dependencies: [{ kind: "component", type: AssetPropertiesItemComponent, selector: "c8y-asset-properties-item", inputs: ["key", "value", "label", "type", "file", "complex", "isEdit", "jsonSchema"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertiesItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-asset-properties-item', imports: [
-                        NgIf,
-                        NgSwitch,
-                        NgSwitchCase,
-                        NgFor,
-                        NgClass,
-                        NgSwitchDefault,
-                        FormlyModule,
-                        C8yTranslatePipe,
-                        DatePipe
-                    ], template: "<ng-container [ngSwitch]=\"type\" *ngIf=\"!isEdit\">\n  <ng-container *ngSwitchCase=\"'date'\">\n    {{ (value | c8yDate: 'fullDate') || ('Undefined' | translate) }}\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'file'\">\n    <ng-container *ngIf=\"file\">\n      <img *ngIf=\"previewImage\" [src]=\"previewImage\" class=\"img-responsive\" />\n      <button\n        *ngIf=\"!previewImage\"\n        (click)=\"filesService.download(file)\"\n        type=\"button\"\n        title=\"{{ 'Download' | translate }} {{ file.name }}\"\n        class=\"btn btn-clean text-truncate p-0\"\n      >\n        {{ file.name }}\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"!file\">\n      {{ 'No file attached.' | translate }}\n    </ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'object'\">\n    <ul class=\"list-unstyled c8y-custom-properties\">\n      <li\n        *ngFor=\"let prop of complex; let i = index\"\n        [ngClass]=\"{ 'separator-top-bottom': i === 0, 'separator-bottom': i > 0 }\"\n        class=\"p-t-4 p-b-4 d-flex text-nowrap\"\n      >\n        <label\n          class=\"small m-b-0 m-r-8 text-truncate\"\n          title=\"{{ prop.label | translate }}\"\n          [ngClass]=\"{ 'a-s-start': prop.file }\"\n        >\n          {{ prop.label | translate }}\n        </label>\n        <span class=\"m-l-auto\" style=\"max-width: {{ prop.file ? '50%' : '100%' }}; min-width:0;\">\n          <c8y-asset-properties-item\n            [file]=\"prop.file\"\n            [key]=\"prop.key\"\n            [type]=\"prop.type\"\n            [value]=\"prop.value\"\n          ></c8y-asset-properties-item>\n        </span>\n      </li>\n    </ul>\n  </ng-container>\n  <!--\n  <ng-container *ngSwitchCase=\"'boolean'\">\n      <input type=\"checkbox\" [checked]=\"value\" [disabled]=\"true\" />\n    </ng-container>\n  -->\n  <ng-container *ngSwitchCase=\"type === 'number' || type === 'boolean' ? type : ''\">\n    <p class=\"text-truncate\" title=\"{{ value != null ? value : ('Undefined' | translate) }}\">\n      {{ value != null ? value : ('Undefined' | translate) }}\n    </p>\n  </ng-container>\n  <ng-container *ngSwitchDefault>\n    <p class=\"text-truncate\" title=\"{{ (value | translate) || ('Undefined' | translate) }}\">\n      {{ (value | translate) || ('Undefined' | translate) }}\n    </p>\n  </ng-container>\n</ng-container>\n<formly-form *ngIf=\"isEdit\" [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n" }]
+            args: [{ selector: 'c8y-asset-properties-item', imports: [NgClass, FormlyModule, C8yTranslatePipe, DatePipe], template: "@if (!isEdit) {\n  @switch (type) {\n    @case ('date') {\n      {{ (value | c8yDate: 'fullDate') || ('Undefined' | translate) }}\n    }\n    @case ('file') {\n      @if (file) {\n        @if (previewImage) {\n          <img\n            class=\"img-responsive\"\n            [src]=\"previewImage\"\n          />\n        }\n        @if (!previewImage) {\n          <button\n            class=\"btn btn-clean text-truncate p-0\"\n            title=\"{{ 'Download' | translate }} {{ file.name }}\"\n            type=\"button\"\n            (click)=\"filesService.download(file)\"\n          >\n            {{ file.name }}\n          </button>\n        }\n      } @else {\n        {{ 'No file attached.' | translate }}\n      }\n    }\n    @case ('object') {\n      <ul class=\"list-unstyled c8y-custom-properties\">\n        @for (prop of complex; track prop.key; let i = $index) {\n          <li\n            class=\"p-t-4 p-b-4 d-flex text-nowrap\"\n            [ngClass]=\"{ 'separator-top-bottom': i === 0, 'separator-bottom': i > 0 }\"\n          >\n            <label\n              class=\"small m-b-0 m-r-8 text-truncate\"\n              title=\"{{ prop.label | translate }}\"\n              [ngClass]=\"{ 'a-s-start': prop.file }\"\n            >\n              {{ prop.label | translate }}\n            </label>\n            <span\n              class=\"m-l-auto\"\n              [ngStyle]=\"{\n                'max-width': prop.file ? '50%' : '100%',\n                'min-width': '0'\n              }\"\n            >\n              <c8y-asset-properties-item\n                [file]=\"prop.file\"\n                [key]=\"prop.key\"\n                [type]=\"prop.type\"\n                [value]=\"prop.value\"\n              ></c8y-asset-properties-item>\n            </span>\n          </li>\n        }\n      </ul>\n    }\n    @case (type === 'number' || type === 'boolean' ? type : '') {\n      <p\n        class=\"text-truncate\"\n        title=\"{{ value != null ? value : ('Undefined' | translate) }}\"\n      >\n        {{ value != null ? value : ('Undefined' | translate) }}\n      </p>\n    }\n    @default {\n      <p\n        class=\"text-truncate\"\n        title=\"{{ (value | translate) || ('Undefined' | translate) }}\"\n      >\n        {{ (value | translate) || ('Undefined' | translate) }}\n      </p>\n    }\n  }\n}\n@if (isEdit) {\n  <formly-form\n    [form]=\"form\"\n    [fields]=\"fields\"\n    [model]=\"model\"\n  ></formly-form>\n}\n" }]
         }], ctorParameters: () => [{ type: i3.AlertService }, { type: i3.C8yJSONSchema }, { type: i3.FilesService }], propDecorators: { key: [{
                 type: Input
             }], value: [{
@@ -1716,10 +1718,14 @@ class AssetPropertiesComponent {
     }
     async loadAsset() {
         this.isLoading = true;
-        const assetType$ = this.assetTypes.getAssetTypeByName$(this.asset.type);
-        this.assetType = await firstValueFrom(assetType$);
+        this.assetType = await firstValueFrom(this.assetTypes.getAssetTypeByName$(this.asset.type));
         try {
-            this.properties = this.keepOrder(this.assetType?.c8y_IsAssetType?.properties, this.properties);
+            const sourceArray = this.assetType?.c8y_IsAssetType?.properties ||
+                this.assetType?.c8y_AllowedPropertyDefinitions;
+            const keyField = this.assetType?.c8y_IsAssetType?.properties ? 'id' : 'identifier';
+            if (sourceArray) {
+                this.properties = this.keepOrder(sourceArray, this.properties, keyField);
+            }
         }
         catch (ex) {
             console.warn(ex);
@@ -1729,16 +1735,41 @@ class AssetPropertiesComponent {
     }
     async resolveCustomProperties(managedObjects) {
         const properties = [];
-        for (const mo of managedObjects) {
-            if (mo.c8y_JsonSchema) {
-                const [item] = await this.parseItem(mo, mo.c8y_JsonSchema.properties, this.asset);
-                this.setItemRequired(item, mo);
+        for (const property of managedObjects) {
+            let item;
+            if (property.c8y_JsonSchema) {
+                [item] = await this.parseItem(property, property.c8y_JsonSchema.properties, this.asset);
+            }
+            else if (property.key) {
+                this.transformType(property);
+                const jsonSchema = {};
+                jsonSchema[property.key] = property;
+                [item] = await this.parseItem(null, jsonSchema, this.asset);
+            }
+            if (item) {
+                this.setItemRequired(item, property);
                 this.updatePositionKeyLabel(item);
                 properties.push(item);
             }
         }
         return properties;
     }
+    transformType(property) {
+        if (property.format === 'date-time') {
+            property.type = 'date';
+        }
+        else if (this.isFileTypeProperty(property)) {
+            property.type = 'file';
+            property.contentMediaType = property.properties?.binaryId?.contentMediaType;
+            property.maxSize = property.properties?.binarySize?.maximum;
+        }
+        else if (property.enum) {
+            property.type = 'enum';
+        }
+    }
+    isFileTypeProperty(property) {
+        return property.required?.[0] === 'binaryId';
+    }
     deleteTitleFromMOJsonSchema(mo) {
         const schemaProperties = mo?.c8y_JsonSchema?.properties;
         const property = Object.keys(schemaProperties || {})[0];
@@ -1746,13 +1777,35 @@ class AssetPropertiesComponent {
     }
     /**
      * This method is used to order the complex properties in the order specified by the user in asset properties screen.
-     * @param mo - Managed object of the complex property associated with the asset.
+     * @param mo - Managed object of the complex property associated with the asset (old structure) or properties object (new structure).
      */
     orderComplexProperties(mo) {
-        const complexProperties = mo.c8y_JsonSchema.properties[mo.name]?.['properties'];
-        const keyValuesArray = toPairs(complexProperties);
+        const target = mo.c8y_JsonSchema ? mo.c8y_JsonSchema.properties[mo.name]?.['properties'] : mo;
+        const keyValuesArray = toPairs(target);
         const orderedProperties = sortBy(keyValuesArray, ([, value]) => value.order);
-        mo.c8y_JsonSchema.properties[mo.name]['properties'] = fromPairs(orderedProperties);
+        const result = fromPairs(orderedProperties);
+        if (mo.c8y_JsonSchema) {
+            mo.c8y_JsonSchema.properties[mo.name]['properties'] = result;
+            return mo;
+        }
+        return result;
+    }
+    async addOrderDetails(properties, key) {
+        const propDetails = await this.getPropertyDetails(key);
+        propDetails.c8y_Order?.forEach(item => {
+            if (properties[item.identifier]) {
+                properties[item.identifier]['order'] = item.order;
+            }
+        });
+    }
+    async getPropertyDetails(identifier) {
+        const query = {
+            __filter: {
+                __and: [{ type: 'c8y_PropertyDefinition' }, { c8y_Contexts: 'asset' }, { name: identifier }]
+            }
+        };
+        const { data } = await this.inventory.listQuery(query);
+        return data[0];
     }
     async parseItem(mo, properties, asset) {
         if (!asset) {
@@ -1776,9 +1829,17 @@ class AssetPropertiesComponent {
                 value = !isNaN(valueDate.getTime()) ? valueDate : '';
             }
             if (type === 'object') {
-                // remove title to avoid excessive property name on asset complex properties form
-                this.deleteTitleFromMOJsonSchema(mo);
-                this.orderComplexProperties(mo);
+                if (mo?.c8y_JsonSchema) {
+                    this.deleteTitleFromMOJsonSchema(mo);
+                    this.orderComplexProperties(mo);
+                }
+                else {
+                    for (const [, value] of Object.entries(properties[key].properties)) {
+                        this.transformType(value);
+                    }
+                    await this.addOrderDetails(properties[key].properties, key);
+                    properties[key].properties = this.orderComplexProperties(properties[key].properties);
+                }
                 if (!value) {
                     value = {};
                     for (const prop in properties[key].properties) {
@@ -1786,18 +1847,19 @@ class AssetPropertiesComponent {
                     }
                 }
             }
+            const schema = mo?.c8y_JsonSchema || { properties: properties };
             items.push({
                 key,
                 value,
-                label: title || mo.label,
+                label: title || mo?.label,
                 type,
-                description: mo.description,
+                description: mo?.description || properties[key].description,
                 file,
                 complex: type === 'object'
                     ? await this.parseItem(mo, properties[key].properties, value)
                     : undefined,
                 isEdit: false,
-                jsonSchema: mo.c8y_JsonSchema
+                jsonSchema: schema
             });
         }
         return items;
@@ -1818,11 +1880,16 @@ class AssetPropertiesComponent {
         try {
             if (prop.type === 'object') {
                 this.updateUndefinedToPropTypeValue(prop, propertyValue[prop.key]);
+                for (const currentProp of prop.complex) {
+                    if (currentProp.type === 'file') {
+                        await this.uploadFileProperty(propertyValue, prop, currentProp);
+                    }
+                }
             }
             else {
                 this.updateUndefinedToPropTypeValue(prop, propertyValue);
+                propertyValue = await this.uploadFiles(propertyValue, prop.value);
             }
-            propertyValue = await this.uploadFiles(propertyValue, prop.value);
             // Avoid making a PUT request containing just the id, as response body might be incomplete
             const hasValues = Object.values(propertyValue).some(value => value !== undefined);
             if (!hasValues) {
@@ -1842,6 +1909,12 @@ class AssetPropertiesComponent {
             this.toggleEdit(prop);
         }
     }
+    async uploadFileProperty(propertyValue, prop, currentProp) {
+        const fileInfo = {};
+        fileInfo[currentProp.key] = propertyValue[prop.key][currentProp.key];
+        const value = await this.uploadFiles(fileInfo, currentProp.value);
+        propertyValue[prop.key][currentProp.key] = value[currentProp.key];
+    }
     updateUndefinedToPropTypeValue(prop, propertyValue) {
         for (const [key, value] of Object.entries(propertyValue)) {
             const property = prop.complex ? find(prop.complex, { key: key }) : prop;
@@ -1859,15 +1932,15 @@ class AssetPropertiesComponent {
                 return '';
         }
     }
-    keepOrder(correctOrderedIds, properties) {
-        const orderedProperties = correctOrderedIds.map(({ id }) => {
-            const foundProperty = properties.find(property => property.id === id);
+    keepOrder(correctOrderedIds, properties, keyField) {
+        return correctOrderedIds.map(item => {
+            const itemKey = item[keyField];
+            const foundProperty = properties.find(property => property.key === itemKey || property.id === itemKey);
             if (!foundProperty) {
                 throw new Error('Custom property mismatch');
             }
             return foundProperty;
         });
-        return orderedProperties;
     }
     async uploadFiles(model, moId) {
         const keys = Object.keys(model);
@@ -1899,36 +1972,37 @@ class AssetPropertiesComponent {
         }
     }
     setItemRequired(item, mo) {
-        const isAssetPropertyRequired = !!this.assetType?.c8y_IsAssetType?.properties.find(p => p.id === mo.id)?.isRequired;
+        const isAssetPropertyRequired = this.assetType?.c8y_IsAssetType
+            ? !!this.assetType.c8y_IsAssetType.properties.find(p => p.id === mo.id)?.isRequired
+            : mo.isRequired;
         if (!isAssetPropertyRequired) {
             return;
         }
         const isComplexProperty = !!item?.complex?.length;
+        const propertyKey = mo.c8y_JsonSchema?.key || mo.key;
         if (isComplexProperty) {
-            const complexProperty = item.jsonSchema?.properties?.[mo.c8y_JsonSchema.key];
+            const complexProperty = item.jsonSchema?.properties?.[propertyKey];
             complexProperty.required = item.complex.map(({ key }) => key);
         }
         else {
-            item.jsonSchema.required = [mo.c8y_JsonSchema.key];
+            item.jsonSchema.required = [propertyKey];
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertiesComponent, deps: [{ token: i3.AssetTypesRealtimeService }, { token: i2.InventoryService }, { token: i2.InventoryBinaryService }, { token: i3.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AssetPropertiesComponent, isStandalone: true, selector: "c8y-asset-properties", inputs: { asset: "asset", properties: "properties" }, outputs: { assetChange: "assetChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"card-header bg-inherit separator sticky-top\">\n    <h1\n      class=\"card-title p-t-4 p-b-4\"\n      ngNonBindable\n      translate\n      [translateParams]=\"{ label: assetType?.label || '' | translate }\"\n    >\n      {{ label }} properties\n    </h1>\n  </div>\n  <div class=\"card-block\">\n    <div\n      class=\"text-center\"\n      *ngIf=\"isLoading\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <ng-container *ngIf=\"!isLoading\">\n      <div\n        class=\"card m-b-8\"\n        title=\"{{ prop.description | translate }}\"\n        *ngFor=\"let prop of customProperties\"\n        [ngClass]=\"{ 'card-highlight': prop.isEdit }\"\n      >\n        <div\n          class=\"card-block\"\n          [ngClass]=\"{ 'p-b-0': prop.isEdit }\"\n        >\n          <div\n            class=\"d-flex p-b-8 a-i-center\"\n            *ngIf=\"!prop.isEdit\"\n          >\n            <p\n              class=\"text-medium text-truncate\"\n              title=\"{{ prop?.label | translate }}\"\n            >\n              {{ prop?.label | translate }}\n            </p>\n            <button\n              class=\"btn btn-dot m-l-auto text-12\"\n              [attr.aria-label]=\"'Edit' | translate\"\n              tooltip=\"{{ 'Edit' | translate }}\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"toggleEdit(prop)\"\n            >\n              <i c8yIcon=\"pencil\"></i>\n            </button>\n          </div>\n          <c8y-asset-properties-item\n            #assetProps\n            [file]=\"prop.file\"\n            [key]=\"prop.key\"\n            [type]=\"prop.type\"\n            [value]=\"prop.value\"\n            [complex]=\"prop.complex\"\n            [isEdit]=\"prop.isEdit\"\n            [jsonSchema]=\"prop.jsonSchema\"\n          ></c8y-asset-properties-item>\n          <div *ngIf=\"prop.key === POSITION_PROPERTY_KEY\">\n            <c8y-asset-location\n              [locationMO]=\"asset\"\n              [isEdit]=\"prop.isEdit\"\n              [form]=\"assetProps.form\"\n            ></c8y-asset-location>\n          </div>\n        </div>\n        <div\n          class=\"card-footer p-t-0\"\n          *ngIf=\"prop.isEdit\"\n        >\n          <button\n            class=\"btn btn-default btn-sm\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"toggleEdit(prop)\"\n          >\n            {{ 'Cancel' | translate }}\n          </button>\n          <button\n            class=\"btn btn-primary btn-sm\"\n            title=\"{{ 'Save' | translate }}\"\n            type=\"button\"\n            [disabled]=\"!assetProps?.form?.valid || !assetProps?.form?.dirty\"\n            (click)=\"save(assetProps.form.value, prop)\"\n          >\n            {{ 'Save' | translate }}\n          </button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: AssetPropertiesItemComponent, selector: "c8y-asset-properties-item", inputs: ["key", "value", "label", "type", "file", "complex", "isEdit", "jsonSchema"] }, { kind: "component", type: AssetLocationComponent, selector: "c8y-asset-location", inputs: ["isEdit", "locationMO", "form"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AssetPropertiesComponent, isStandalone: true, selector: "c8y-asset-properties", inputs: { asset: "asset", properties: "properties" }, outputs: { assetChange: "assetChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"card-header bg-inherit separator sticky-top\">\n    <h1\n      class=\"card-title p-t-4 p-b-4\"\n      ngNonBindable\n      translate\n      [translateParams]=\"{\n        label: assetType?.c8y_JsonSchema?.title || assetType?.label || '' | translate\n      }\"\n    >\n      {{ label }} properties\n    </h1>\n  </div>\n  <div class=\"card-block\">\n    @if (isLoading) {\n      <div class=\"text-center\">\n        <c8y-loading></c8y-loading>\n      </div>\n    }\n\n    @if (!isLoading) {\n      @for (prop of customProperties; track prop.key) {\n        <div\n          class=\"card m-b-8\"\n          title=\"{{ prop.description | translate }}\"\n          [ngClass]=\"{ 'card-highlight': prop.isEdit }\"\n        >\n          <div\n            class=\"card-block\"\n            [ngClass]=\"{ 'p-b-0': prop.isEdit }\"\n          >\n            @if (!prop.isEdit) {\n              <div class=\"d-flex p-b-8 a-i-center\">\n                <p\n                  class=\"text-medium text-truncate\"\n                  title=\"{{ prop?.label | translate }}\"\n                >\n                  {{ prop?.label | translate }}\n                </p>\n                <button\n                  class=\"btn btn-dot m-l-auto text-12\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"toggleEdit(prop)\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n              </div>\n            }\n            <c8y-asset-properties-item\n              #assetProps\n              [file]=\"prop.file\"\n              [key]=\"prop.key\"\n              [type]=\"prop.type\"\n              [value]=\"prop.value\"\n              [complex]=\"prop.complex\"\n              [isEdit]=\"prop.isEdit\"\n              [jsonSchema]=\"prop.jsonSchema\"\n            ></c8y-asset-properties-item>\n            @if (prop.key === POSITION_PROPERTY_KEY) {\n              <div>\n                <c8y-asset-location\n                  [locationMO]=\"asset\"\n                  [isEdit]=\"prop.isEdit\"\n                  [form]=\"assetProps.form\"\n                ></c8y-asset-location>\n              </div>\n            }\n          </div>\n          @if (prop.isEdit) {\n            <div class=\"card-footer p-t-0\">\n              <button\n                class=\"btn btn-default btn-sm\"\n                title=\"{{ 'Cancel' | translate }}\"\n                type=\"button\"\n                (click)=\"toggleEdit(prop)\"\n              >\n                {{ 'Cancel' | translate }}\n              </button>\n              <button\n                class=\"btn btn-primary btn-sm\"\n                title=\"{{ 'Save' | translate }}\"\n                type=\"button\"\n                [disabled]=\"!assetProps?.form?.valid || !assetProps?.form?.dirty\"\n                (click)=\"save(assetProps.form.value, prop)\"\n              >\n                {{ 'Save' | translate }}\n              </button>\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: AssetPropertiesItemComponent, selector: "c8y-asset-properties-item", inputs: ["key", "value", "label", "type", "file", "complex", "isEdit", "jsonSchema"] }, { kind: "component", type: AssetLocationComponent, selector: "c8y-asset-location", inputs: ["isEdit", "locationMO", "form"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetPropertiesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-properties', imports: [
                         C8yTranslateDirective,
-                        NgIf,
                         LoadingComponent,
-                        NgFor,
                         NgClass,
                         TooltipDirective,
                         IconDirective,
                         AssetPropertiesItemComponent,
                         AssetLocationComponent,
                         C8yTranslatePipe
-                    ], template: "<ng-container>\n  <div class=\"card-header bg-inherit separator sticky-top\">\n    <h1\n      class=\"card-title p-t-4 p-b-4\"\n      ngNonBindable\n      translate\n      [translateParams]=\"{ label: assetType?.label || '' | translate }\"\n    >\n      {{ label }} properties\n    </h1>\n  </div>\n  <div class=\"card-block\">\n    <div\n      class=\"text-center\"\n      *ngIf=\"isLoading\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <ng-container *ngIf=\"!isLoading\">\n      <div\n        class=\"card m-b-8\"\n        title=\"{{ prop.description | translate }}\"\n        *ngFor=\"let prop of customProperties\"\n        [ngClass]=\"{ 'card-highlight': prop.isEdit }\"\n      >\n        <div\n          class=\"card-block\"\n          [ngClass]=\"{ 'p-b-0': prop.isEdit }\"\n        >\n          <div\n            class=\"d-flex p-b-8 a-i-center\"\n            *ngIf=\"!prop.isEdit\"\n          >\n            <p\n              class=\"text-medium text-truncate\"\n              title=\"{{ prop?.label | translate }}\"\n            >\n              {{ prop?.label | translate }}\n            </p>\n            <button\n              class=\"btn btn-dot m-l-auto text-12\"\n              [attr.aria-label]=\"'Edit' | translate\"\n              tooltip=\"{{ 'Edit' | translate }}\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"toggleEdit(prop)\"\n            >\n              <i c8yIcon=\"pencil\"></i>\n            </button>\n          </div>\n          <c8y-asset-properties-item\n            #assetProps\n            [file]=\"prop.file\"\n            [key]=\"prop.key\"\n            [type]=\"prop.type\"\n            [value]=\"prop.value\"\n            [complex]=\"prop.complex\"\n            [isEdit]=\"prop.isEdit\"\n            [jsonSchema]=\"prop.jsonSchema\"\n          ></c8y-asset-properties-item>\n          <div *ngIf=\"prop.key === POSITION_PROPERTY_KEY\">\n            <c8y-asset-location\n              [locationMO]=\"asset\"\n              [isEdit]=\"prop.isEdit\"\n              [form]=\"assetProps.form\"\n            ></c8y-asset-location>\n          </div>\n        </div>\n        <div\n          class=\"card-footer p-t-0\"\n          *ngIf=\"prop.isEdit\"\n        >\n          <button\n            class=\"btn btn-default btn-sm\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"toggleEdit(prop)\"\n          >\n            {{ 'Cancel' | translate }}\n          </button>\n          <button\n            class=\"btn btn-primary btn-sm\"\n            title=\"{{ 'Save' | translate }}\"\n            type=\"button\"\n            [disabled]=\"!assetProps?.form?.valid || !assetProps?.form?.dirty\"\n            (click)=\"save(assetProps.form.value, prop)\"\n          >\n            {{ 'Save' | translate }}\n          </button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-container>\n" }]
+                    ], template: "<ng-container>\n  <div class=\"card-header bg-inherit separator sticky-top\">\n    <h1\n      class=\"card-title p-t-4 p-b-4\"\n      ngNonBindable\n      translate\n      [translateParams]=\"{\n        label: assetType?.c8y_JsonSchema?.title || assetType?.label || '' | translate\n      }\"\n    >\n      {{ label }} properties\n    </h1>\n  </div>\n  <div class=\"card-block\">\n    @if (isLoading) {\n      <div class=\"text-center\">\n        <c8y-loading></c8y-loading>\n      </div>\n    }\n\n    @if (!isLoading) {\n      @for (prop of customProperties; track prop.key) {\n        <div\n          class=\"card m-b-8\"\n          title=\"{{ prop.description | translate }}\"\n          [ngClass]=\"{ 'card-highlight': prop.isEdit }\"\n        >\n          <div\n            class=\"card-block\"\n            [ngClass]=\"{ 'p-b-0': prop.isEdit }\"\n          >\n            @if (!prop.isEdit) {\n              <div class=\"d-flex p-b-8 a-i-center\">\n                <p\n                  class=\"text-medium text-truncate\"\n                  title=\"{{ prop?.label | translate }}\"\n                >\n                  {{ prop?.label | translate }}\n                </p>\n                <button\n                  class=\"btn btn-dot m-l-auto text-12\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"toggleEdit(prop)\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n              </div>\n            }\n            <c8y-asset-properties-item\n              #assetProps\n              [file]=\"prop.file\"\n              [key]=\"prop.key\"\n              [type]=\"prop.type\"\n              [value]=\"prop.value\"\n              [complex]=\"prop.complex\"\n              [isEdit]=\"prop.isEdit\"\n              [jsonSchema]=\"prop.jsonSchema\"\n            ></c8y-asset-properties-item>\n            @if (prop.key === POSITION_PROPERTY_KEY) {\n              <div>\n                <c8y-asset-location\n                  [locationMO]=\"asset\"\n                  [isEdit]=\"prop.isEdit\"\n                  [form]=\"assetProps.form\"\n                ></c8y-asset-location>\n              </div>\n            }\n          </div>\n          @if (prop.isEdit) {\n            <div class=\"card-footer p-t-0\">\n              <button\n                class=\"btn btn-default btn-sm\"\n                title=\"{{ 'Cancel' | translate }}\"\n                type=\"button\"\n                (click)=\"toggleEdit(prop)\"\n              >\n                {{ 'Cancel' | translate }}\n              </button>\n              <button\n                class=\"btn btn-primary btn-sm\"\n                title=\"{{ 'Save' | translate }}\"\n                type=\"button\"\n                [disabled]=\"!assetProps?.form?.valid || !assetProps?.form?.dirty\"\n                (click)=\"save(assetProps.form.value, prop)\"\n              >\n                {{ 'Save' | translate }}\n              </button>\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i3.AssetTypesRealtimeService }, { type: i2.InventoryService }, { type: i2.InventoryBinaryService }, { type: i3.AlertService }], propDecorators: { asset: [{
                 type: Input
             }], assetChange: [{
@@ -1966,6 +2040,7 @@ class GroupInfoComponent {
             c8y_Notes: ''
         };
         this.filterMsg = gettext('Smart groups are groups dynamically constructed based on filtering criteria.');
+        this.descriptionLabel = gettext('e.g. My description');
         this.GROUP_UPDATED_MSG = gettext('Group updated.');
         this.destroyed$ = new Subject();
         this.deviceListExtensionService.items$.pipe(takeUntil(this.destroyed$)).subscribe(columns => {
@@ -1986,9 +2061,13 @@ class GroupInfoComponent {
                 externalFilterQuery: col.filter.externalFilterQuery,
                 ...this.withPropsFromGridColumn(col)
             }));
-            this.label = this.assetNodeService.isAsset(this.group)
-                ? (await firstValueFrom(this.assetType.getAssetTypeByName$(this.group.type))).label
-                : gettext('Group');
+            if (this.assetNodeService.isAsset(this.group)) {
+                const assetType = await firstValueFrom(this.assetType.getAssetTypeByName$(this.group.type));
+                this.label = assetType?.label || assetType?.c8y_JsonSchema?.title || gettext('Group');
+            }
+            else {
+                this.label = gettext('Group');
+            }
         }
     }
     isSmartGroup() {
@@ -2059,13 +2138,12 @@ class GroupInfoComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GroupInfoComponent, deps: [{ token: i2.InventoryService }, { token: SubAssetsService }, { token: i2.SmartGroupsService }, { token: i3.AlertService }, { token: i3.ModalService }, { token: i4.AssetNodeService }, { token: i3.AssetTypesRealtimeService }, { token: i4$1.DeviceListExtensionService }, { token: SUB_ASSETS_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GroupInfoComponent, isStandalone: true, selector: "c8y-group-info", inputs: { group: "group" }, outputs: { groupChange: "groupChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"bg-level-1 separator-bottom\">\n  <div class=\"card-block p-t-24 p-b-24 large-padding\">\n    <div class=\"content-flex-70\">\n      <div class=\"text-center col-1\">\n        <i\n          class=\"c8y-icon-duocolor icon-48\"\n          [c8yIcon]=\"groupIcon\"\n        ></i>\n        <p>\n          <small\n            class=\"label label-info\"\n            *ngIf=\"group.c8y_IsDynamicGroup\"\n          >\n            {{ 'Smart group' | translate }}\n          </small>\n          <small\n            class=\"label label-info text-truncate d-inline-block\"\n            title=\"{{ label | translate }}\"\n            *ngIf=\"!group.c8y_IsDynamicGroup && !group.com_cumulocity_model_Agent\"\n          >\n            {{ label | translate }}\n          </small>\n          <small\n            class=\"label label-info\"\n            *ngIf=\"group.com_cumulocity_model_Agent\"\n          >\n            {{ 'Remote group' | translate }}\n          </small>\n        </p>\n      </div>\n\n      <div class=\"flex-grow col-10\">\n        <div class=\"content-flex-80\">\n          <div class=\"col-9\">\n            <form #groupNameForm=\"ngForm\">\n              <c8y-form-group class=\"form-group-lg m-b-0\">\n                <label\n                  class=\"sr-only\"\n                  for=\"groupName\"\n                  translate\n                >\n                  Name\n                </label>\n                <p\n                  class=\"form-control-static\"\n                  *ngIf=\"!canEdit\"\n                >\n                  {{ groupInfoModel.name }}\n                </p>\n                <div\n                  class=\"input-group input-group-lg input-group-editable\"\n                  *ngIf=\"canEdit\"\n                >\n                  <input\n                    class=\"form-control\"\n                    title=\"{{ groupInfoModel.name }}\"\n                    id=\"groupName\"\n                    placeholder=\"{{ 'e.g. My group' | translate }}\"\n                    name=\"name\"\n                    type=\"text\"\n                    required\n                    [(ngModel)]=\"groupInfoModel.name\"\n                    size=\"{{ groupInfoModel.name.length + 2 }}\"\n                    maxlength=\"254\"\n                    c8yProductExperience\n                    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                    [actionData]=\"{\n                      component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                      action: PRODUCT_EXPERIENCE.GROUP_INFO.ACTIONS.EDIT,\n                      property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.NAME\n                    }\"\n                  />\n                  <span></span>\n                  <div class=\"input-group-btn\">\n                    <button\n                      class=\"btn btn-primary\"\n                      title=\"{{ 'Save' | translate }}\"\n                      type=\"submit\"\n                      [disabled]=\"groupNameForm.form.invalid\"\n                      (click)=\"\n                        update({ name: groupInfoModel.name }); groupNameForm.form.markAsPristine()\n                      \"\n                      [actionName]=\"'groupInfo:EditedNameSaved'\"\n                      c8yProductExperience\n                      [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                      [actionData]=\"{\n                        component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                        result: PRODUCT_EXPERIENCE.GROUP_INFO.RESULTS.EDIT_SAVED,\n                        property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.NAME\n                      }\"\n                    >\n                      {{ 'Save' | translate }}\n                    </button>\n                  </div>\n                </div>\n              </c8y-form-group>\n            </form>\n            <form #groupDescriptionForm=\"ngForm\">\n              <label\n                class=\"sr-only\"\n                for=\"description\"\n                translate\n              >\n                Description\n              </label>\n              <p\n                class=\"form-control-static\"\n                *ngIf=\"!canEdit\"\n              >\n                {{ groupInfoModel.c8y_Notes }}\n              </p>\n              <div\n                class=\"input-group input-group-editable\"\n                *ngIf=\"canEdit\"\n              >\n                <textarea\n                  class=\"form-control no-resize\"\n                  title=\"{{\n                    groupInfoModel.c8y_Notes\n                      ? groupInfoModel.c8y_Notes\n                      : ('e.g. My description' | translate)\n                  }}\"\n                  id=\"description\"\n                  placeholder=\"{{ 'e.g. My description' | translate }}\"\n                  name=\"description\"\n                  c8y-textarea-autoresize\n                  [(ngModel)]=\"groupInfoModel.c8y_Notes\"\n                  cols=\"{{ groupInfoModel.c8y_Notes ? groupInfoModel.c8y_Notes.length : 25 }}\"\n                  c8yProductExperience\n                  [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                  [actionData]=\"{\n                    component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                    action: PRODUCT_EXPERIENCE.GROUP_INFO.ACTIONS.EDIT,\n                    property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.DESCRIPTION\n                  }\"\n                ></textarea>\n                <span></span>\n                <div class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-primary\"\n                    title=\"{{ 'Save' | translate }}\"\n                    type=\"submit\"\n                    [disabled]=\"groupDescriptionForm.form.invalid\"\n                    (click)=\"\n                      update({ c8y_Notes: groupInfoModel.c8y_Notes });\n                      groupDescriptionForm.form.markAsPristine()\n                    \"\n                    c8yProductExperience\n                    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                    [actionData]=\"{\n                      component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                      result: PRODUCT_EXPERIENCE.GROUP_INFO.RESULTS.EDIT_SAVED,\n                      property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.DESCRIPTION\n                    }\"\n                  >\n                    {{ 'Save' | translate }}\n                  </button>\n                </div>\n              </div>\n            </form>\n\n            <div\n              class=\"dropdown m-t-8\"\n              placement=\"bottom left\"\n              container=\"body\"\n              type=\"button\"\n              dropdown\n              *ngIf=\"isSmartGroup()\"\n              #ddFilters=\"bs-dropdown\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn btn-default btn-sm\"\n                title=\"{{ 'Smart group filters' | translate }}\"\n                aria-haspopup=\"true\"\n                dropdownToggle\n                data-cy=\"c8y-data-grid--filters\"\n                [disabled]=\"columnsWithFilter?.length === 0\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"filter\"\n                ></i>\n                <span>{{ 'Smart group filters' | translate }}</span>\n                <span\n                  class=\"p-relative p-l-4 p-r-16\"\n                  *ngIf=\"columnsWithFilter?.length > 0\"\n                >\n                  <span class=\"badge badge-system p-absolute\" data-cy=\"group-info--filter-number\">\n                    {{ columnsWithFilter?.length }}\n                  </span>\n                </span>\n              </button>\n              <button\n                class=\"btn-help btn-help--sm m-r-4\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ filterMsg | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                data-cy=\"group-info--help-button\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n              <div\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"data-grid__dropdown bg-level-0\">\n                  <ul class=\"list-unstyled m-0\">\n                    <li\n                      *ngFor=\"let column of columnsWithFilter; let last = last\"\n                      [ngClass]=\"{ 'separator-bottom': !last }\"\n                    >\n                      <ng-container>\n                        <div\n                          class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                          title=\"{{ (column.header | translate) || column.name }}\"\n                        >\n                          <label>\n                            {{ (column.header | translate) || column.name }}\n                          </label>\n                        </div>\n                        <div\n                          class=\"list-group-item borderless d-flex d-col\"\n                          *ngFor=\"\n                            let groupedFilterChips of column\n                              | mapToFilterChips\n                              | async\n                              | groupedFilterChips;\n                            let first = first\n                          \"\n                          [ngClass]=\"{ 'p-t-0': first }\"\n                        >\n                          <p\n                            class=\"small p-b-4\"\n                            *ngIf=\"groupedFilterChips.label\"\n                          >\n                            {{ groupedFilterChips.label | translate }}\n                          </p>\n                          <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                            <span\n                              class=\"tag tag--info chip\"\n                              data-cy=\"group-info--grouped-filter-chip\"\n                              *ngFor=\"let chip of groupedFilterChips.chips\"\n                            >\n                              {{ chip.displayValue | translate }}\n                            </span>\n                          </div>\n                        </div>\n                      </ng-container>\n                    </li>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"flex-grow\">\n            <ul class=\"list-unstyled small\">\n              <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom text-nowrap\">\n                <label class=\"small m-b-0 m-r-8\">{{ 'Created' | translate }}</label>\n                <span class=\"m-l-auto\">{{ group.creationTime | c8yDate }}</span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n                <label class=\"small m-b-0 m-r-8\">{{ 'Last updated' | translate }}</label>\n                <span class=\"m-l-auto\">{{ group.lastUpdated | c8yDate }}</span>\n              </li>\n              <li\n                class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\"\n                *ngIf=\"group.com_cumulocity_model_Agent\"\n              >\n                <label class=\"small m-b-0 m-r-8\">{{ 'Status' | translate }}</label>\n                <span\n                  class=\"m-l-auto\"\n                  *ngIf=\"group.c8y_BrokerSource\"\n                >\n                  {{ group.c8y_BrokerSource.status }}\n                </span>\n                <span\n                  class=\"m-l-auto\"\n                  *ngIf=\"!group.c8y_BrokerSource\"\n                >\n                  {{ 'Offline' | translate }}\n                </span>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: FilterMapperPipe, name: "mapToFilterChips" }, { kind: "pipe", type: GroupedFilterChips, name: "groupedFilterChips" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GroupInfoComponent, isStandalone: true, selector: "c8y-group-info", inputs: { group: "group" }, outputs: { groupChange: "groupChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"bg-level-1 separator-bottom\">\n  <div class=\"card-block p-t-24 p-b-24 large-padding\">\n    <div class=\"content-flex-70\">\n      <div class=\"text-center col-1\">\n        <i\n          class=\"c8y-icon-duocolor icon-48\"\n          [c8yIcon]=\"groupIcon\"\n        ></i>\n        <p>\n          @if (group.c8y_IsDynamicGroup) {\n            <small class=\"label label-info\">\n              {{ 'Smart group' | translate }}\n            </small>\n          }\n          @if (!group.c8y_IsDynamicGroup && !group.com_cumulocity_model_Agent) {\n            <small\n              class=\"label label-info text-truncate d-inline-block\"\n              title=\"{{ label | translate }}\"\n            >\n              {{ label | translate }}\n            </small>\n          }\n          @if (group.com_cumulocity_model_Agent) {\n            <small class=\"label label-info\">\n              {{ 'Remote group' | translate }}\n            </small>\n          }\n        </p>\n      </div>\n\n      <div class=\"flex-grow col-10\">\n        <div class=\"content-flex-80\">\n          <div class=\"col-9\">\n            <form #groupNameForm=\"ngForm\">\n              <c8y-form-group class=\"form-group-lg m-b-0\">\n                <label\n                  class=\"sr-only\"\n                  for=\"groupName\"\n                  translate\n                >\n                  Name\n                </label>\n                @if (!canEdit) {\n                  <p class=\"form-control-static\">\n                    {{ groupInfoModel.name }}\n                  </p>\n                }\n                @if (canEdit) {\n                  <div class=\"input-group input-group-lg input-group-editable\">\n                    <input\n                      class=\"form-control\"\n                      title=\"{{ groupInfoModel.name }}\"\n                      id=\"groupName\"\n                      placeholder=\"{{ 'e.g. My group' | translate }}\"\n                      name=\"name\"\n                      type=\"text\"\n                      required\n                      [(ngModel)]=\"groupInfoModel.name\"\n                      size=\"{{ groupInfoModel.name.length + 2 }}\"\n                      maxlength=\"254\"\n                      c8yProductExperience\n                      [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                      [actionData]=\"{\n                        component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                        action: PRODUCT_EXPERIENCE.GROUP_INFO.ACTIONS.EDIT,\n                        property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.NAME\n                      }\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        title=\"{{ 'Save' | translate }}\"\n                        type=\"submit\"\n                        [disabled]=\"groupNameForm.form.invalid\"\n                        (click)=\"\n                          update({ name: groupInfoModel.name }); groupNameForm.form.markAsPristine()\n                        \"\n                        c8yProductExperience\n                        [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                        [actionData]=\"{\n                          component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                          result: PRODUCT_EXPERIENCE.GROUP_INFO.RESULTS.EDIT_SAVED,\n                          property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.NAME\n                        }\"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                }\n              </c8y-form-group>\n            </form>\n            <form #groupDescriptionForm=\"ngForm\">\n              <label\n                class=\"sr-only\"\n                for=\"description\"\n                translate\n              >\n                Description\n              </label>\n              @if (canEdit) {\n                <div class=\"input-group input-group-editable\">\n                  <textarea\n                    class=\"form-control no-resize\"\n                    title=\"{{\n                      groupInfoModel.c8y_Notes\n                        ? groupInfoModel.c8y_Notes\n                        : (descriptionLabel | translate)\n                    }}\"\n                    id=\"description\"\n                    placeholder=\"{{ descriptionLabel | translate }}\"\n                    name=\"description\"\n                    c8y-textarea-autoresize\n                    [(ngModel)]=\"groupInfoModel.c8y_Notes\"\n                    cols=\"{{ groupInfoModel.c8y_Notes ? groupInfoModel.c8y_Notes.length : 25 }}\"\n                    c8yProductExperience\n                    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                    [actionData]=\"{\n                      component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                      action: PRODUCT_EXPERIENCE.GROUP_INFO.ACTIONS.EDIT,\n                      property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.DESCRIPTION\n                    }\"\n                  ></textarea>\n                  <span></span>\n                  <div class=\"input-group-btn\">\n                    <button\n                      class=\"btn btn-primary\"\n                      title=\"{{ 'Save' | translate }}\"\n                      type=\"submit\"\n                      [disabled]=\"groupDescriptionForm.form.invalid\"\n                      (click)=\"\n                        update({ c8y_Notes: groupInfoModel.c8y_Notes });\n                        groupDescriptionForm.form.markAsPristine()\n                      \"\n                      c8yProductExperience\n                      [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                      [actionData]=\"{\n                        component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                        result: PRODUCT_EXPERIENCE.GROUP_INFO.RESULTS.EDIT_SAVED,\n                        property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.DESCRIPTION\n                      }\"\n                    >\n                      {{ 'Save' | translate }}\n                    </button>\n                  </div>\n                </div>\n              } @else {\n                <p class=\"form-control-static\">\n                  {{ groupInfoModel.c8y_Notes }}\n                </p>\n              }\n            </form>\n\n            @if (isSmartGroup()) {\n              <div\n                class=\"dropdown m-t-8\"\n                placement=\"bottom left\"\n                container=\"body\"\n                type=\"button\"\n                dropdown\n                #ddFilters=\"bs-dropdown\"\n                [insideClick]=\"true\"\n              >\n                <button\n                  class=\"btn btn-default btn-sm\"\n                  title=\"{{ 'Smart group filters' | translate }}\"\n                  aria-haspopup=\"true\"\n                  dropdownToggle\n                  data-cy=\"c8y-data-grid--filters\"\n                  [disabled]=\"columnsWithFilter?.length === 0\"\n                >\n                  <i\n                    class=\"m-r-4\"\n                    c8yIcon=\"filter\"\n                  ></i>\n                  <span>{{ 'Smart group filters' | translate }}</span>\n                  @if (columnsWithFilter?.length > 0) {\n                    <span class=\"p-relative p-l-4 p-r-16\">\n                      <span\n                        class=\"badge badge-system p-absolute\"\n                        data-cy=\"group-info--filter-number\"\n                      >\n                        {{ columnsWithFilter?.length }}\n                      </span>\n                    </span>\n                  }\n                </button>\n                <button\n                  class=\"btn-help btn-help--sm m-r-4\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{ filterMsg | translate }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                  data-cy=\"group-info--help-button\"\n                ></button>\n                <div\n                  class=\"dropdown-menu\"\n                  *dropdownMenu\n                  (click)=\"$event.stopPropagation()\"\n                >\n                  <div class=\"data-grid__dropdown bg-level-0\">\n                    <ul class=\"list-unstyled m-0\">\n                      @for (column of columnsWithFilter; track column; let last = $last) {\n                        <li [ngClass]=\"{ 'separator-bottom': !last }\">\n                          <div\n                            class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                            title=\"{{ (column.header | translate) || column.name }}\"\n                          >\n                            <label>\n                              {{ (column.header | translate) || column.name }}\n                            </label>\n                          </div>\n                          @for (\n                            groupedFilterChips of column\n                              | mapToFilterChips\n                              | async\n                              | groupedFilterChips;\n                            track groupedFilterChips;\n                            let first = $first\n                          ) {\n                            <div\n                              class=\"list-group-item borderless d-flex d-col\"\n                              [ngClass]=\"{ 'p-t-0': first }\"\n                            >\n                              @if (groupedFilterChips.label) {\n                                <p class=\"small p-b-4\">\n                                  {{ groupedFilterChips.label | translate }}\n                                </p>\n                              }\n                              <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                                @for (chip of groupedFilterChips.chips; track chip) {\n                                  <span\n                                    class=\"tag tag--info chip\"\n                                    data-cy=\"group-info--grouped-filter-chip\"\n                                  >\n                                    {{ chip.displayValue | translate }}\n                                  </span>\n                                }\n                              </div>\n                            </div>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n          <div class=\"flex-grow\">\n            <ul class=\"list-unstyled small\">\n              <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom text-nowrap\">\n                <label class=\"small m-b-0 m-r-8\">{{ 'Created' | translate }}</label>\n                <span class=\"m-l-auto\">{{ group.creationTime | c8yDate }}</span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n                <label class=\"small m-b-0 m-r-8\">{{ 'Last updated' | translate }}</label>\n                <span class=\"m-l-auto\">{{ group.lastUpdated | c8yDate }}</span>\n              </li>\n              @if (group.com_cumulocity_model_Agent) {\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n                  <label class=\"small m-b-0 m-r-8\">{{ 'Status' | translate }}</label>\n                  @if (group.c8y_BrokerSource) {\n                    <span class=\"m-l-auto\">\n                      {{ group.c8y_BrokerSource.status | translate }}\n                    </span>\n                  }\n                  @if (!group.c8y_BrokerSource) {\n                    <span class=\"m-l-auto\">\n                      {{ 'Offline' | translate }}\n                    </span>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: FilterMapperPipe, name: "mapToFilterChips" }, { kind: "pipe", type: GroupedFilterChips, name: "groupedFilterChips" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GroupInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-group-info', imports: [
                         IconDirective,
-                        NgIf,
                         FormsModule,
                         FormGroupComponent,
                         C8yTranslateDirective,
@@ -2076,14 +2154,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         BsDropdownToggleDirective,
                         PopoverDirective,
                         BsDropdownMenuDirective,
-                        NgFor,
                         NgClass,
                         C8yTranslatePipe,
                         AsyncPipe,
                         DatePipe,
                         FilterMapperPipe,
                         GroupedFilterChips
-                    ], template: "<div class=\"bg-level-1 separator-bottom\">\n  <div class=\"card-block p-t-24 p-b-24 large-padding\">\n    <div class=\"content-flex-70\">\n      <div class=\"text-center col-1\">\n        <i\n          class=\"c8y-icon-duocolor icon-48\"\n          [c8yIcon]=\"groupIcon\"\n        ></i>\n        <p>\n          <small\n            class=\"label label-info\"\n            *ngIf=\"group.c8y_IsDynamicGroup\"\n          >\n            {{ 'Smart group' | translate }}\n          </small>\n          <small\n            class=\"label label-info text-truncate d-inline-block\"\n            title=\"{{ label | translate }}\"\n            *ngIf=\"!group.c8y_IsDynamicGroup && !group.com_cumulocity_model_Agent\"\n          >\n            {{ label | translate }}\n          </small>\n          <small\n            class=\"label label-info\"\n            *ngIf=\"group.com_cumulocity_model_Agent\"\n          >\n            {{ 'Remote group' | translate }}\n          </small>\n        </p>\n      </div>\n\n      <div class=\"flex-grow col-10\">\n        <div class=\"content-flex-80\">\n          <div class=\"col-9\">\n            <form #groupNameForm=\"ngForm\">\n              <c8y-form-group class=\"form-group-lg m-b-0\">\n                <label\n                  class=\"sr-only\"\n                  for=\"groupName\"\n                  translate\n                >\n                  Name\n                </label>\n                <p\n                  class=\"form-control-static\"\n                  *ngIf=\"!canEdit\"\n                >\n                  {{ groupInfoModel.name }}\n                </p>\n                <div\n                  class=\"input-group input-group-lg input-group-editable\"\n                  *ngIf=\"canEdit\"\n                >\n                  <input\n                    class=\"form-control\"\n                    title=\"{{ groupInfoModel.name }}\"\n                    id=\"groupName\"\n                    placeholder=\"{{ 'e.g. My group' | translate }}\"\n                    name=\"name\"\n                    type=\"text\"\n                    required\n                    [(ngModel)]=\"groupInfoModel.name\"\n                    size=\"{{ groupInfoModel.name.length + 2 }}\"\n                    maxlength=\"254\"\n                    c8yProductExperience\n                    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                    [actionData]=\"{\n                      component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                      action: PRODUCT_EXPERIENCE.GROUP_INFO.ACTIONS.EDIT,\n                      property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.NAME\n                    }\"\n                  />\n                  <span></span>\n                  <div class=\"input-group-btn\">\n                    <button\n                      class=\"btn btn-primary\"\n                      title=\"{{ 'Save' | translate }}\"\n                      type=\"submit\"\n                      [disabled]=\"groupNameForm.form.invalid\"\n                      (click)=\"\n                        update({ name: groupInfoModel.name }); groupNameForm.form.markAsPristine()\n                      \"\n                      [actionName]=\"'groupInfo:EditedNameSaved'\"\n                      c8yProductExperience\n                      [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                      [actionData]=\"{\n                        component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                        result: PRODUCT_EXPERIENCE.GROUP_INFO.RESULTS.EDIT_SAVED,\n                        property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.NAME\n                      }\"\n                    >\n                      {{ 'Save' | translate }}\n                    </button>\n                  </div>\n                </div>\n              </c8y-form-group>\n            </form>\n            <form #groupDescriptionForm=\"ngForm\">\n              <label\n                class=\"sr-only\"\n                for=\"description\"\n                translate\n              >\n                Description\n              </label>\n              <p\n                class=\"form-control-static\"\n                *ngIf=\"!canEdit\"\n              >\n                {{ groupInfoModel.c8y_Notes }}\n              </p>\n              <div\n                class=\"input-group input-group-editable\"\n                *ngIf=\"canEdit\"\n              >\n                <textarea\n                  class=\"form-control no-resize\"\n                  title=\"{{\n                    groupInfoModel.c8y_Notes\n                      ? groupInfoModel.c8y_Notes\n                      : ('e.g. My description' | translate)\n                  }}\"\n                  id=\"description\"\n                  placeholder=\"{{ 'e.g. My description' | translate }}\"\n                  name=\"description\"\n                  c8y-textarea-autoresize\n                  [(ngModel)]=\"groupInfoModel.c8y_Notes\"\n                  cols=\"{{ groupInfoModel.c8y_Notes ? groupInfoModel.c8y_Notes.length : 25 }}\"\n                  c8yProductExperience\n                  [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                  [actionData]=\"{\n                    component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                    action: PRODUCT_EXPERIENCE.GROUP_INFO.ACTIONS.EDIT,\n                    property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.DESCRIPTION\n                  }\"\n                ></textarea>\n                <span></span>\n                <div class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-primary\"\n                    title=\"{{ 'Save' | translate }}\"\n                    type=\"submit\"\n                    [disabled]=\"groupDescriptionForm.form.invalid\"\n                    (click)=\"\n                      update({ c8y_Notes: groupInfoModel.c8y_Notes });\n                      groupDescriptionForm.form.markAsPristine()\n                    \"\n                    c8yProductExperience\n                    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                    [actionData]=\"{\n                      component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                      result: PRODUCT_EXPERIENCE.GROUP_INFO.RESULTS.EDIT_SAVED,\n                      property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.DESCRIPTION\n                    }\"\n                  >\n                    {{ 'Save' | translate }}\n                  </button>\n                </div>\n              </div>\n            </form>\n\n            <div\n              class=\"dropdown m-t-8\"\n              placement=\"bottom left\"\n              container=\"body\"\n              type=\"button\"\n              dropdown\n              *ngIf=\"isSmartGroup()\"\n              #ddFilters=\"bs-dropdown\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn btn-default btn-sm\"\n                title=\"{{ 'Smart group filters' | translate }}\"\n                aria-haspopup=\"true\"\n                dropdownToggle\n                data-cy=\"c8y-data-grid--filters\"\n                [disabled]=\"columnsWithFilter?.length === 0\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"filter\"\n                ></i>\n                <span>{{ 'Smart group filters' | translate }}</span>\n                <span\n                  class=\"p-relative p-l-4 p-r-16\"\n                  *ngIf=\"columnsWithFilter?.length > 0\"\n                >\n                  <span class=\"badge badge-system p-absolute\" data-cy=\"group-info--filter-number\">\n                    {{ columnsWithFilter?.length }}\n                  </span>\n                </span>\n              </button>\n              <button\n                class=\"btn-help btn-help--sm m-r-4\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ filterMsg | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                data-cy=\"group-info--help-button\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n              <div\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"data-grid__dropdown bg-level-0\">\n                  <ul class=\"list-unstyled m-0\">\n                    <li\n                      *ngFor=\"let column of columnsWithFilter; let last = last\"\n                      [ngClass]=\"{ 'separator-bottom': !last }\"\n                    >\n                      <ng-container>\n                        <div\n                          class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                          title=\"{{ (column.header | translate) || column.name }}\"\n                        >\n                          <label>\n                            {{ (column.header | translate) || column.name }}\n                          </label>\n                        </div>\n                        <div\n                          class=\"list-group-item borderless d-flex d-col\"\n                          *ngFor=\"\n                            let groupedFilterChips of column\n                              | mapToFilterChips\n                              | async\n                              | groupedFilterChips;\n                            let first = first\n                          \"\n                          [ngClass]=\"{ 'p-t-0': first }\"\n                        >\n                          <p\n                            class=\"small p-b-4\"\n                            *ngIf=\"groupedFilterChips.label\"\n                          >\n                            {{ groupedFilterChips.label | translate }}\n                          </p>\n                          <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                            <span\n                              class=\"tag tag--info chip\"\n                              data-cy=\"group-info--grouped-filter-chip\"\n                              *ngFor=\"let chip of groupedFilterChips.chips\"\n                            >\n                              {{ chip.displayValue | translate }}\n                            </span>\n                          </div>\n                        </div>\n                      </ng-container>\n                    </li>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"flex-grow\">\n            <ul class=\"list-unstyled small\">\n              <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom text-nowrap\">\n                <label class=\"small m-b-0 m-r-8\">{{ 'Created' | translate }}</label>\n                <span class=\"m-l-auto\">{{ group.creationTime | c8yDate }}</span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n                <label class=\"small m-b-0 m-r-8\">{{ 'Last updated' | translate }}</label>\n                <span class=\"m-l-auto\">{{ group.lastUpdated | c8yDate }}</span>\n              </li>\n              <li\n                class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\"\n                *ngIf=\"group.com_cumulocity_model_Agent\"\n              >\n                <label class=\"small m-b-0 m-r-8\">{{ 'Status' | translate }}</label>\n                <span\n                  class=\"m-l-auto\"\n                  *ngIf=\"group.c8y_BrokerSource\"\n                >\n                  {{ group.c8y_BrokerSource.status }}\n                </span>\n                <span\n                  class=\"m-l-auto\"\n                  *ngIf=\"!group.c8y_BrokerSource\"\n                >\n                  {{ 'Offline' | translate }}\n                </span>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"bg-level-1 separator-bottom\">\n  <div class=\"card-block p-t-24 p-b-24 large-padding\">\n    <div class=\"content-flex-70\">\n      <div class=\"text-center col-1\">\n        <i\n          class=\"c8y-icon-duocolor icon-48\"\n          [c8yIcon]=\"groupIcon\"\n        ></i>\n        <p>\n          @if (group.c8y_IsDynamicGroup) {\n            <small class=\"label label-info\">\n              {{ 'Smart group' | translate }}\n            </small>\n          }\n          @if (!group.c8y_IsDynamicGroup && !group.com_cumulocity_model_Agent) {\n            <small\n              class=\"label label-info text-truncate d-inline-block\"\n              title=\"{{ label | translate }}\"\n            >\n              {{ label | translate }}\n            </small>\n          }\n          @if (group.com_cumulocity_model_Agent) {\n            <small class=\"label label-info\">\n              {{ 'Remote group' | translate }}\n            </small>\n          }\n        </p>\n      </div>\n\n      <div class=\"flex-grow col-10\">\n        <div class=\"content-flex-80\">\n          <div class=\"col-9\">\n            <form #groupNameForm=\"ngForm\">\n              <c8y-form-group class=\"form-group-lg m-b-0\">\n                <label\n                  class=\"sr-only\"\n                  for=\"groupName\"\n                  translate\n                >\n                  Name\n                </label>\n                @if (!canEdit) {\n                  <p class=\"form-control-static\">\n                    {{ groupInfoModel.name }}\n                  </p>\n                }\n                @if (canEdit) {\n                  <div class=\"input-group input-group-lg input-group-editable\">\n                    <input\n                      class=\"form-control\"\n                      title=\"{{ groupInfoModel.name }}\"\n                      id=\"groupName\"\n                      placeholder=\"{{ 'e.g. My group' | translate }}\"\n                      name=\"name\"\n                      type=\"text\"\n                      required\n                      [(ngModel)]=\"groupInfoModel.name\"\n                      size=\"{{ groupInfoModel.name.length + 2 }}\"\n                      maxlength=\"254\"\n                      c8yProductExperience\n                      [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                      [actionData]=\"{\n                        component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                        action: PRODUCT_EXPERIENCE.GROUP_INFO.ACTIONS.EDIT,\n                        property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.NAME\n                      }\"\n                    />\n                    <span></span>\n                    <div class=\"input-group-btn\">\n                      <button\n                        class=\"btn btn-primary\"\n                        title=\"{{ 'Save' | translate }}\"\n                        type=\"submit\"\n                        [disabled]=\"groupNameForm.form.invalid\"\n                        (click)=\"\n                          update({ name: groupInfoModel.name }); groupNameForm.form.markAsPristine()\n                        \"\n                        c8yProductExperience\n                        [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                        [actionData]=\"{\n                          component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                          result: PRODUCT_EXPERIENCE.GROUP_INFO.RESULTS.EDIT_SAVED,\n                          property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.NAME\n                        }\"\n                      >\n                        {{ 'Save' | translate }}\n                      </button>\n                    </div>\n                  </div>\n                }\n              </c8y-form-group>\n            </form>\n            <form #groupDescriptionForm=\"ngForm\">\n              <label\n                class=\"sr-only\"\n                for=\"description\"\n                translate\n              >\n                Description\n              </label>\n              @if (canEdit) {\n                <div class=\"input-group input-group-editable\">\n                  <textarea\n                    class=\"form-control no-resize\"\n                    title=\"{{\n                      groupInfoModel.c8y_Notes\n                        ? groupInfoModel.c8y_Notes\n                        : (descriptionLabel | translate)\n                    }}\"\n                    id=\"description\"\n                    placeholder=\"{{ descriptionLabel | translate }}\"\n                    name=\"description\"\n                    c8y-textarea-autoresize\n                    [(ngModel)]=\"groupInfoModel.c8y_Notes\"\n                    cols=\"{{ groupInfoModel.c8y_Notes ? groupInfoModel.c8y_Notes.length : 25 }}\"\n                    c8yProductExperience\n                    [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                    [actionData]=\"{\n                      component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                      action: PRODUCT_EXPERIENCE.GROUP_INFO.ACTIONS.EDIT,\n                      property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.DESCRIPTION\n                    }\"\n                  ></textarea>\n                  <span></span>\n                  <div class=\"input-group-btn\">\n                    <button\n                      class=\"btn btn-primary\"\n                      title=\"{{ 'Save' | translate }}\"\n                      type=\"submit\"\n                      [disabled]=\"groupDescriptionForm.form.invalid\"\n                      (click)=\"\n                        update({ c8y_Notes: groupInfoModel.c8y_Notes });\n                        groupDescriptionForm.form.markAsPristine()\n                      \"\n                      c8yProductExperience\n                      [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n                      [actionData]=\"{\n                        component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,\n                        result: PRODUCT_EXPERIENCE.GROUP_INFO.RESULTS.EDIT_SAVED,\n                        property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.DESCRIPTION\n                      }\"\n                    >\n                      {{ 'Save' | translate }}\n                    </button>\n                  </div>\n                </div>\n              } @else {\n                <p class=\"form-control-static\">\n                  {{ groupInfoModel.c8y_Notes }}\n                </p>\n              }\n            </form>\n\n            @if (isSmartGroup()) {\n              <div\n                class=\"dropdown m-t-8\"\n                placement=\"bottom left\"\n                container=\"body\"\n                type=\"button\"\n                dropdown\n                #ddFilters=\"bs-dropdown\"\n                [insideClick]=\"true\"\n              >\n                <button\n                  class=\"btn btn-default btn-sm\"\n                  title=\"{{ 'Smart group filters' | translate }}\"\n                  aria-haspopup=\"true\"\n                  dropdownToggle\n                  data-cy=\"c8y-data-grid--filters\"\n                  [disabled]=\"columnsWithFilter?.length === 0\"\n                >\n                  <i\n                    class=\"m-r-4\"\n                    c8yIcon=\"filter\"\n                  ></i>\n                  <span>{{ 'Smart group filters' | translate }}</span>\n                  @if (columnsWithFilter?.length > 0) {\n                    <span class=\"p-relative p-l-4 p-r-16\">\n                      <span\n                        class=\"badge badge-system p-absolute\"\n                        data-cy=\"group-info--filter-number\"\n                      >\n                        {{ columnsWithFilter?.length }}\n                      </span>\n                    </span>\n                  }\n                </button>\n                <button\n                  class=\"btn-help btn-help--sm m-r-4\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{ filterMsg | translate }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                  data-cy=\"group-info--help-button\"\n                ></button>\n                <div\n                  class=\"dropdown-menu\"\n                  *dropdownMenu\n                  (click)=\"$event.stopPropagation()\"\n                >\n                  <div class=\"data-grid__dropdown bg-level-0\">\n                    <ul class=\"list-unstyled m-0\">\n                      @for (column of columnsWithFilter; track column; let last = $last) {\n                        <li [ngClass]=\"{ 'separator-bottom': !last }\">\n                          <div\n                            class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                            title=\"{{ (column.header | translate) || column.name }}\"\n                          >\n                            <label>\n                              {{ (column.header | translate) || column.name }}\n                            </label>\n                          </div>\n                          @for (\n                            groupedFilterChips of column\n                              | mapToFilterChips\n                              | async\n                              | groupedFilterChips;\n                            track groupedFilterChips;\n                            let first = $first\n                          ) {\n                            <div\n                              class=\"list-group-item borderless d-flex d-col\"\n                              [ngClass]=\"{ 'p-t-0': first }\"\n                            >\n                              @if (groupedFilterChips.label) {\n                                <p class=\"small p-b-4\">\n                                  {{ groupedFilterChips.label | translate }}\n                                </p>\n                              }\n                              <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                                @for (chip of groupedFilterChips.chips; track chip) {\n                                  <span\n                                    class=\"tag tag--info chip\"\n                                    data-cy=\"group-info--grouped-filter-chip\"\n                                  >\n                                    {{ chip.displayValue | translate }}\n                                  </span>\n                                }\n                              </div>\n                            </div>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n          <div class=\"flex-grow\">\n            <ul class=\"list-unstyled small\">\n              <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom text-nowrap\">\n                <label class=\"small m-b-0 m-r-8\">{{ 'Created' | translate }}</label>\n                <span class=\"m-l-auto\">{{ group.creationTime | c8yDate }}</span>\n              </li>\n              <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n                <label class=\"small m-b-0 m-r-8\">{{ 'Last updated' | translate }}</label>\n                <span class=\"m-l-auto\">{{ group.lastUpdated | c8yDate }}</span>\n              </li>\n              @if (group.com_cumulocity_model_Agent) {\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n                  <label class=\"small m-b-0 m-r-8\">{{ 'Status' | translate }}</label>\n                  @if (group.c8y_BrokerSource) {\n                    <span class=\"m-l-auto\">\n                      {{ group.c8y_BrokerSource.status | translate }}\n                    </span>\n                  }\n                  @if (!group.c8y_BrokerSource) {\n                    <span class=\"m-l-auto\">\n                      {{ 'Offline' | translate }}\n                    </span>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i2.InventoryService }, { type: SubAssetsService }, { type: i2.SmartGroupsService }, { type: i3.AlertService }, { type: i3.ModalService }, { type: i4.AssetNodeService }, { type: i3.AssetTypesRealtimeService }, { type: i4$1.DeviceListExtensionService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SUB_ASSETS_CONFIG]