import { Component, EventEmitter, Inject, Input, Output } from '@angular/core';
import { InventoryService, SmartGroupsService } from '@c8y/client';
import { AlertService, AssetTypesRealtimeService, CustomColumn, ModalService, Status, gettext } from '@c8y/ngx-components';
import { AssetNodeService } from '@c8y/ngx-components/assets-navigator';
import { DeviceListExtensionService } from '@c8y/ngx-components/device-list';
import { pick } from 'lodash-es';
import { Subject, firstValueFrom } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { PRODUCT_EXPERIENCE_SUB_ASSETS_SHARED } from './shared/sub-assets.model';
import { SUB_ASSETS_CONFIG } from './sub-assets.model';
import { SubAssetsService } from './sub-assets.service';
import * as i0 from "@angular/core";
import * as i1 from "@c8y/client";
import * as i2 from "./sub-assets.service";
import * as i3 from "@c8y/ngx-components";
import * as i4 from "@c8y/ngx-components/assets-navigator";
import * as i5 from "@c8y/ngx-components/device-list";
import * as i6 from "@angular/common";
import * as i7 from "@angular/forms";
import * as i8 from "ngx-bootstrap/popover";
import * as i9 from "ngx-bootstrap/dropdown";
export class GroupInfoComponent {
    constructor(inventory, subAssetsService, smartGroupsService, alertService, modalService, assetNodeService, assetType, deviceListExtensionService, moduleConfig) {
        this.inventory = inventory;
        this.subAssetsService = subAssetsService;
        this.smartGroupsService = smartGroupsService;
        this.alertService = alertService;
        this.modalService = modalService;
        this.assetNodeService = assetNodeService;
        this.assetType = assetType;
        this.deviceListExtensionService = deviceListExtensionService;
        this.moduleConfig = moduleConfig;
        this.PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE_SUB_ASSETS_SHARED;
        this.groupChange = new EventEmitter();
        this.groupInfoModel = {
            name: '',
            c8y_Notes: ''
        };
        this.filterMsg = gettext('Smart groups are groups dynamically constructed based on filtering criteria.');
        this.GROUP_UPDATED_MSG = gettext('Group updated.');
        this.destroyed$ = new Subject();
        this.deviceListExtensionService.items$.pipe(takeUntil(this.destroyed$)).subscribe(columns => {
            this.allDevicesGridColumns = columns;
        });
    }
    async ngOnChanges(changes) {
        if (changes.group) {
            const { name, c8y_Notes } = this.group;
            this.groupInfoModel = { name, c8y_Notes };
            this.canEdit = await this.subAssetsService.canEditGroup(this.group);
            this.groupIcon = await this.assetNodeService.icon(this.group);
            this.smartGroupFilter = this.group.c8y_DeviceQueryString;
            this.columnsWithFilter = this.group.c8y_DeviceColumnsConfig?.columns
                ?.filter(col => !!col.filter)
                .map(col => ({
                ...col,
                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');
        }
    }
    isSmartGroup() {
        return this.subAssetsService.isSmartGroup(this.group);
    }
    async update(partialGroup) {
        try {
            const isSmartGroup = this.subAssetsService.isSmartGroup(this.group);
            const updatedGroup = isSmartGroup
                ? await this.updateSmartGroup(partialGroup)
                : await this.updateGroup(partialGroup);
            this.group = updatedGroup;
            this.groupChange.emit(this.group);
            this.alertService.success(this.GROUP_UPDATED_MSG);
        }
        catch (error) {
            this.alertService.addServerFailure(error);
        }
    }
    ngOnDestroy() {
        this.destroyed$.next();
        this.destroyed$.complete();
    }
    withPropsFromGridColumn(column) {
        if (column.custom) {
            const col = new CustomColumn();
            return {
                filteringConfig: col.filteringConfig
            };
        }
        else {
            return pick(this.allDevicesGridColumns.find(col => col.name === column.name), 'filteringConfig', 'header');
        }
    }
    async updateGroup(partialGroup) {
        const { id } = this.group;
        const group = { id, ...partialGroup };
        return (await this.inventory.update(group)).data;
    }
    async updateSmartGroup(partialGroup) {
        const { id } = this.group;
        const { c8y_DeviceQueryString } = partialGroup;
        const group = { id, ...partialGroup };
        if (!c8y_DeviceQueryString) {
            return (await this.smartGroupsService.update(group)).data;
        }
        try {
            const modalBody = gettext('You are about to change the smart group filter. Do you want to proceed?');
            const title = gettext('Smart group filter');
            await this.modalService.confirm(title, modalBody, Status.WARNING, {
                ok: gettext('Save'),
                cancel: gettext('Cancel')
            });
            await this.isQueryExecutable(c8y_DeviceQueryString);
        }
        catch (error) {
            throw Error(error);
        }
        return (await this.smartGroupsService.update(group)).data;
    }
    async isQueryExecutable(query) {
        try {
            const filter = { q: query };
            await this.inventory.list(filter);
        }
        catch (error) {
            throw Error(error);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GroupInfoComponent, deps: [{ token: i1.InventoryService }, { token: i2.SubAssetsService }, { token: i1.SmartGroupsService }, { token: i3.AlertService }, { token: i3.ModalService }, { token: i4.AssetNodeService }, { token: i3.AssetTypesRealtimeService }, { token: i5.DeviceListExtensionService }, { token: SUB_ASSETS_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: GroupInfoComponent, 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: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i8.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: i9.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i9.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i9.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i3.FilterMapperPipe, name: "mapToFilterChips" }, { kind: "pipe", type: i3.GroupedFilterChips, name: "groupedFilterChips" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GroupInfoComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-group-info', 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" }]
        }], ctorParameters: () => [{ type: i1.InventoryService }, { type: i2.SubAssetsService }, { type: i1.SmartGroupsService }, { type: i3.AlertService }, { type: i3.ModalService }, { type: i4.AssetNodeService }, { type: i3.AssetTypesRealtimeService }, { type: i5.DeviceListExtensionService }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [SUB_ASSETS_CONFIG]
                }] }], propDecorators: { group: [{
                type: Input
            }], groupChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 