@c8y/ngx-components 1024.15.16 → 1024.16.6

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, ViewChild, Input, Component, Inject, Optional, EventEmitter, Output, HostListener, TemplateRef, NgModule, InjectionToken, signal } from '@angular/core';
 import * as i3 from '@c8y/ngx-components';
-import { DataGridService, Permissions, WILDCARD_SEARCH_FEATURE_KEY, GroupFragment, Status, ConfirmModalComponent, FormGroupComponent, ProductExperienceDirective, C8yTranslatePipe, AbstractConfigurationStrategy, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, BuiltInActionType, DataGridComponent, EmptyStateContextDirective, EmptyStateComponent, UserPreferencesConfigurationStrategy, DATA_GRID_CONFIGURATION_STRATEGY, C8yStepper, C8yTranslateDirective, RequiredInputPlaceholderDirective, C8yStepperButtons, CoreModule, DatePipe, IconDirective, LoadingComponent, CustomColumn, TextareaAutoresizeDirective, FilterMapperPipe, GroupedFilterChips, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, ActionBarItemComponent, HelpComponent, FilterMapperModule, hookRoute, ViewContext } from '@c8y/ngx-components';
+import { DataGridService, Permissions, WILDCARD_SEARCH_FEATURE_KEY, GroupFragment, Status, ConfirmModalComponent, FormGroupComponent, ProductExperienceDirective, C8yTranslatePipe, AbstractConfigurationStrategy, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, BuiltInActionType, DataGridComponent, EmptyStateContextDirective, EmptyStateComponent, UserPreferencesConfigurationStrategy, DATA_GRID_CONFIGURATION_STRATEGY, C8yStepper, C8yTranslateDirective, RequiredInputPlaceholderDirective, C8yStepperButtons, CoreModule, DatePipe, IconDirective, LoadingComponent, CustomColumn, InputGroupEditableComponent, FilterMapperPipe, GroupedFilterChips, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, ActionBarItemComponent, HelpComponent, FilterMapperModule, hookRoute, ViewContext } from '@c8y/ngx-components';
 import { NameDeviceGridColumn, ModelDeviceGridColumn, SerialNumberDeviceGridColumn, RegistrationDateDeviceGridColumn, SystemIdDeviceGridColumn, ImeiDeviceGridColumn, AlarmsDeviceGridColumn, DeviceGridComponent, DeviceGridModule } from '@c8y/ngx-components/device-grid';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, Validators, ReactiveFormsModule, FormGroup } from '@angular/forms';
@@ -2023,7 +2023,7 @@ const defaultModuleConfig = {
 };
 
 class GroupInfoComponent {
-    constructor(inventory, subAssetsService, smartGroupsService, alertService, modalService, assetNodeService, assetType, deviceListExtensionService, moduleConfig) {
+    constructor(inventory, subAssetsService, smartGroupsService, alertService, modalService, assetNodeService, assetType, deviceListExtensionService, gainsightService, moduleConfig) {
         this.inventory = inventory;
         this.subAssetsService = subAssetsService;
         this.smartGroupsService = smartGroupsService;
@@ -2032,6 +2032,7 @@ class GroupInfoComponent {
         this.assetNodeService = assetNodeService;
         this.assetType = assetType;
         this.deviceListExtensionService = deviceListExtensionService;
+        this.gainsightService = gainsightService;
         this.moduleConfig = moduleConfig;
         this.PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE_SUB_ASSETS_SHARED;
         this.groupChange = new EventEmitter();
@@ -2073,6 +2074,16 @@ class GroupInfoComponent {
     isSmartGroup() {
         return this.subAssetsService.isSmartGroup(this.group);
     }
+    onNameSaved(name) {
+        this.groupInfoModel.name = name;
+        this.update({ name });
+        this.triggerEditSavedEvent(this.PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.NAME);
+    }
+    onDescriptionSaved(description) {
+        this.groupInfoModel.c8y_Notes = description;
+        this.update({ c8y_Notes: description });
+        this.triggerEditSavedEvent(this.PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.DESCRIPTION);
+    }
     async update(partialGroup) {
         try {
             const isSmartGroup = this.subAssetsService.isSmartGroup(this.group);
@@ -2091,6 +2102,18 @@ class GroupInfoComponent {
         this.destroyed$.next();
         this.destroyed$.complete();
     }
+    /**
+     * Reports a saved inline edit to Gainsight. The event was previously sent by the
+     * `c8yProductExperience` directive on the save button, which `c8y-input-group-editable`
+     * now owns and therefore no longer exposes to this template.
+     */
+    triggerEditSavedEvent(property) {
+        this.gainsightService.triggerEvent(this.PRODUCT_EXPERIENCE.EVENT, {
+            component: this.PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,
+            result: this.PRODUCT_EXPERIENCE.GROUP_INFO.RESULTS.EDIT_SAVED,
+            property
+        });
+    }
     withPropsFromGridColumn(column) {
         if (column.custom) {
             const col = new CustomColumn();
@@ -2137,8 +2160,8 @@ class GroupInfoComponent {
             throw Error(error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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: "17.0.0", version: "21.2.19", 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],[formArray],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]):not([formArray]),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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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: i3.GainsightService }, { token: SUB_ASSETS_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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            @if (canEdit) {\n              <c8y-input-group-editable\n                [title]=\"groupInfoModel.name\"\n                placeholder=\"{{ 'e.g. My group' | translate }}\"\n                required\n                size=\"lg\"\n                data-cy=\"group-info--name\"\n                ariaLabel=\"{{ 'Name' | translate }}\"\n                [maxLength]=\"254\"\n                [ngModel]=\"groupInfoModel.name\"\n                (ngModelChange)=\"onNameSaved($event)\"\n              ></c8y-input-group-editable>\n            } @else {\n              <c8y-form-group class=\"form-group-lg m-b-0\">\n                <p class=\"form-control-static\">\n                  {{ groupInfoModel.name }}\n                </p>\n              </c8y-form-group>\n            }\n            @if (canEdit) {\n              <c8y-input-group-editable\n                [multiline]=\"true\"\n                maxHeight=\"110px\"\n                formGroupClass=\"m-b-0\"\n                data-cy=\"group-info--description\"\n                ariaLabel=\"{{ 'Description' | translate }}\"\n                [placeholder]=\"descriptionLabel\"\n                [ngModel]=\"groupInfoModel.c8y_Notes\"\n                (ngModelChange)=\"onDescriptionSaved($event)\"\n              ></c8y-input-group-editable>\n            } @else {\n              <p class=\"form-control-static\">\n                {{ groupInfoModel.c8y_Notes }}\n              </p>\n            }\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: InputGroupEditableComponent, selector: "c8y-input-group-editable", inputs: ["ariaLabel", "name", "size", "placeholder", "title", "multiline", "maxHeight", "maxLength", "noSaveButton", "formGroupClass", "validators", "asyncValidators", "autocomplete", "required"], outputs: ["save", "cancel"] }, { 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: "21.2.19", ngImport: i0, type: GroupInfoComponent, decorators: [{
             type: Component,
@@ -2146,10 +2169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         IconDirective,
                         FormsModule,
                         FormGroupComponent,
-                        C8yTranslateDirective,
-                        RequiredInputPlaceholderDirective,
-                        ProductExperienceDirective,
-                        TextareaAutoresizeDirective,
+                        InputGroupEditableComponent,
                         BsDropdownDirective,
                         BsDropdownToggleDirective,
                         PopoverDirective,
@@ -2160,8 +2180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         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          @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: [{
+                    ], 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            @if (canEdit) {\n              <c8y-input-group-editable\n                [title]=\"groupInfoModel.name\"\n                placeholder=\"{{ 'e.g. My group' | translate }}\"\n                required\n                size=\"lg\"\n                data-cy=\"group-info--name\"\n                ariaLabel=\"{{ 'Name' | translate }}\"\n                [maxLength]=\"254\"\n                [ngModel]=\"groupInfoModel.name\"\n                (ngModelChange)=\"onNameSaved($event)\"\n              ></c8y-input-group-editable>\n            } @else {\n              <c8y-form-group class=\"form-group-lg m-b-0\">\n                <p class=\"form-control-static\">\n                  {{ groupInfoModel.name }}\n                </p>\n              </c8y-form-group>\n            }\n            @if (canEdit) {\n              <c8y-input-group-editable\n                [multiline]=\"true\"\n                maxHeight=\"110px\"\n                formGroupClass=\"m-b-0\"\n                data-cy=\"group-info--description\"\n                ariaLabel=\"{{ 'Description' | translate }}\"\n                [placeholder]=\"descriptionLabel\"\n                [ngModel]=\"groupInfoModel.c8y_Notes\"\n                (ngModelChange)=\"onDescriptionSaved($event)\"\n              ></c8y-input-group-editable>\n            } @else {\n              <p class=\"form-control-static\">\n                {{ groupInfoModel.c8y_Notes }}\n              </p>\n            }\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: i3.GainsightService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SUB_ASSETS_CONFIG]
                 }] }], propDecorators: { group: [{