npm - @c8y/ngx-components - Versions diffs - 1023.14.219 → 1023.14.222 - Mend

@c8y/ngx-components 1023.14.219 → 1023.14.222

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

Files changed (51) hide show

package/fesm2022/c8y-ngx-components-datapoint-library-list.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"c8y-ngx-components-datapoint-library-list.mjs","sources":["../../datapoint-library/list/datapoint-library-list.component.ts","../../datapoint-library/list/datapoint-library-list.component.html","../../datapoint-library/list/c8y-ngx-components-datapoint-library-list.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { Router, RouterModule } from '@angular/router';\nimport { IManagedObject, InventoryService, IResultList } from '@c8y/client';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { AlertService, CoreModule, ModalService } from '@c8y/ngx-components';\nimport { TranslateService } from '@ngx-translate/core';\nimport { BehaviorSubject, Observable, pipe } from 'rxjs';\nimport { map, shareReplay, switchMap, tap } from 'rxjs/operators';\nimport { pathToDatapointLibrary } from '@c8y/ngx-components/datapoint-library/model';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { BsDropdownModule } from 'ngx-bootstrap/dropdown';\nimport { DatapointParserService } from '@c8y/ngx-components/datapoint-library/services';\n\n@Component({\n selector: 'c8y-datapoint-library-list',\n templateUrl: './datapoint-library-list.component.html',\n standalone: true,\n imports: [A11yModule, CoreModule, BsDropdownModule, RouterModule]\n})\nexport class DatapointLibraryListComponent {\n readonly title = gettext('Data point library');\n listClass = '';\n isLoading = true;\n reload$: BehaviorSubject<void> = new BehaviorSubject(null);\n datapoints$: Observable<IResultList<IManagedObject>> = this.reload$.pipe(\n tap(() => {\n this.isLoading = true;\n }),\n switchMap(() => this.getDatapoints()),\n tap(() => {\n this.isLoading = false;\n }),\n shareReplay()\n );\n\n parsePipe = pipe(map((data: IManagedObject[]) => this.parser.parseDatapoints(data)));\n\n constructor(\n private inventory: InventoryService,\n private router: Router,\n private modalService: ModalService,\n private translateService: TranslateService,\n private alertService: AlertService,\n private parser: DatapointParserService\n ) {}\n\n getDatapoints(): Promise<IResultList<IManagedObject>> {\n return this.inventory.list({ pageSize: 20, fragmentType: 'c8y_Kpi', withTotalPages: true });\n }\n\n addDatapointEntry() {\n this.router.navigate([pathToDatapointLibrary, 'new']);\n }\n\n editDatapointEntry(entry: IManagedObject) {\n this.router.navigate([pathToDatapointLibrary, entry.id]);\n }\n\n async removeDatapointEntry(entry: IManagedObject) {\n try {\n await this.modalService.confirm(\n gettext('Delete data point'),\n this.translateService.instant(\n gettext('You are about to delete data point \"{{ dpLabel }}\". Do you want to proceed?'),\n { dpLabel: entry.c8y_Kpi.label }\n ),\n 'danger'\n );\n } catch (e) {\n return;\n }\n try {\n await this.inventory.delete(entry.id);\n this.reload$.next();\n } catch (e) {\n this.alertService.addServerFailure(e);\n }\n }\n\n reload() {\n this.reload$.next();\n }\n}\n","<c8y-title>{{ title \| translate }}</c8y-title>\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"'Configuration' \| translate\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"title \| translate\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item\n [placement]=\"'right'\"\n c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\"\n [priority]=\"1\"\n>\n <button\n class=\"btn btn-link\"\n [title]=\"'Add data point' \| translate\"\n type=\"button\"\n (click)=\"addDatapointEntry()\"\n data-cy=\"c8y-datapoint-library-list--add-data-point\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' \| translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n [placement]=\"'right'\"\n [priority]=\"0\"\n>\n <button\n class=\"btn btn-link\"\n [title]=\"'Reload' \| translate\"\n type=\"button\"\n [disabled]=\"isLoading\"\n (click)=\"reload()\"\n >\n <i\n c8yIcon=\"refresh\"\n [ngClass]=\"{ 'icon-spin': isLoading }\"\n ></i>\n {{ 'Reload' \| translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n [placement]=\"'left'\"\n itemClass=\"navbar-form hidden-xs\"\n>\n <c8y-list-display-switch\n (onListClassChange)=\"listClass = $event\"\n [listLength]=\"(datapoints$ \| async)?.data?.length\"\n ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/cockpit/data-point-library/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n<c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points to display.' \| translate\"\n [subtitle]=\"'Add a data point using the button below.' \| translate\"\n ngIf=\"(datapoints$ \| async)?.data?.length === 0\"\n>\n <p>\n <button\n class=\"btn btn-primary\"\n [title]=\"'Add data point' \| translate\"\n type=\"button\"\n (click)=\"addDatapointEntry()\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' \| translate }}\n </button>\n </p>\n</c8y-ui-empty-state>\n\n<!-- loading indicator -->\n<div\n class=\"d-flex j-c-center\"\n ngIf=\"isLoading\"\n>\n <c8y-loading></c8y-loading>\n</div>\n\n<div\n class=\"card-group\"\n [ngClass]=\"listClass\"\n ngIf=\"!isLoading && (datapoints$ \| async) as datapoints\"\n>\n <div\n class=\"page-sticky-header hidden-xs\"\n ngIf=\"datapoints.data.length\"\n >\n <div class=\"d-flex\">\n <div class=\"card-header\">\n <div class=\"card-icon\"></div>\n <p translate>Label</p>\n </div>\n <div class=\"card-actions\"></div>\n <div class=\"card-block p-l-0\">\n <div class=\"col-sm-3 p-l-16\">\n <p translate>Fragment</p>\n </div>\n <div class=\"col-sm-2\">\n <p translate>Series</p>\n </div>\n <div class=\"col-sm-1\">\n <span translate>Unit</span>\n </div>\n <div class=\"col-sm-2\">\n <span translate>Target</span>\n </div>\n <div class=\"col-sm-4\">\n <span translate>Range</span>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe\"\n >\n <div\n class=\"card pointer\"\n (click)=\"editDatapointEntry(datapoint)\"\n >\n <div\n class=\"card-actions\"\n (click)=\"$event.stopPropagation()\"\n >\n <div\n class=\"dropdown settings\"\n dropdown\n #datapointOptionsDropdown=\"bs-dropdown\"\n [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\"\n >\n <button\n class=\"dropdown-toggle c8y-dropdown\"\n [title]=\"'Actions' \| translate\"\n type=\"button\"\n dropdownToggle\n >\n <i c8yIcon=\"ellipsis-v\"></i>\n </button>\n <ul\n class=\"dropdown-menu dropdown-menu-right\"\n dropdownMenu\n >\n <li>\n <button\n [title]=\"'Edit' \| translate\"\n type=\"button\"\n (click)=\"editDatapointEntry(datapoint)\"\n >\n <i c8yIcon=\"pencil\"></i>\n {{ 'Edit' \| translate }}\n </button>\n </li>\n <li>\n <button\n [title]=\"'Remove' \| translate\"\n type=\"button\"\n (click)=\"removeDatapointEntry(datapoint)\"\n >\n <i c8yIcon=\"delete\"></i>\n {{ 'Remove' \| translate }}\n </button>\n </li>\n </ul>\n </div>\n </div>\n\n <div class=\"card-header separator\">\n <div class=\"card-icon\">\n <i\n c8yIcon=\"circle\"\n [style.color]=\"datapoint.c8y_Kpi?.color\"\n ></i>\n </div>\n <div\n class=\"card-title text-truncate\"\n [title]=\"datapoint.c8y_Kpi?.label\"\n >\n {{ datapoint.c8y_Kpi?.label }}\n </div>\n </div>\n <div class=\"card-block bg-level-1 p-b-24 card-hidden-list\">\n <div class=\"col-sm-3 col-md-2\">\n <c8y-range-display\n [config]=\"datapoint.c8y_Kpi\"\n [display]=\"'compact'\"\n ></c8y-range-display>\n </div>\n </div>\n <div class=\"card-block\">\n <div class=\"col-sm-3 text-truncate\">\n <span>\n <label\n class=\"text-label-small m-r-4\"\n translate\n >\n Fragment\n </label>\n <span [title]=\"datapoint.c8y_Kpi?.fragment\">\n {{ datapoint.c8y_Kpi?.fragment }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-2 text-truncate\">\n <label\n class=\"text-label-small m-r-4\"\n translate\n >\n Series\n </label>\n <span [title]=\"datapoint.c8y_Kpi?.series\">\n {{ datapoint.c8y_Kpi?.series }}\n </span>\n </div>\n <div class=\"col-sm-1 text-truncate card-hidden-grid\">\n <span ngIf=\"datapoint.c8y_Kpi?.unit\">\n <label\n class=\"text-label-small m-r-4\"\n translate\n >\n Unit\n </label>\n <span [title]=\"datapoint.c8y_Kpi?.unit\">\n {{ datapoint.c8y_Kpi?.unit }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-2 text-truncate\">\n <span ngIf=\"datapoint.c8y_Kpi?.target\">\n <label\n class=\"text-label-small m-r-4\"\n translate\n >\n Target\n </label>\n <span [title]=\"datapoint.c8y_Kpi?.target\">\n {{ datapoint.c8y_Kpi?.target }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-4 card-hidden-grid\">\n <c8y-range-display\n [config]=\"datapoint.c8y_Kpi\"\n [display]=\"'inline'\"\n ></c8y-range-display>\n </div>\n </div>\n </div>\n </div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"c8y-ngx-components-datapoint-library-list.mjs","sources":["../../datapoint-library/list/datapoint-library-list.component.ts","../../datapoint-library/list/datapoint-library-list.component.html","../../datapoint-library/list/c8y-ngx-components-datapoint-library-list.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { Router, RouterModule } from '@angular/router';\nimport { IManagedObject, InventoryService, IResultList } from '@c8y/client';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n AlertService,\n CoreModule,\n DatapointUnitPipe,\n ModalService,\n translateDatapointLabel\n} from '@c8y/ngx-components';\nimport { DatapointLabelPipe } from '@c8y/ngx-components/datapoint-selector';\nimport { TranslateService } from '@ngx-translate/core';\nimport { BehaviorSubject, Observable, pipe } from 'rxjs';\nimport { map, shareReplay, switchMap, tap } from 'rxjs/operators';\nimport { pathToDatapointLibrary } from '@c8y/ngx-components/datapoint-library/model';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { BsDropdownModule } from 'ngx-bootstrap/dropdown';\nimport { DatapointParserService } from '@c8y/ngx-components/datapoint-library/services';\n\n@Component({\n selector: 'c8y-datapoint-library-list',\n templateUrl: './datapoint-library-list.component.html',\n standalone: true,\n imports: [\n A11yModule,\n CoreModule,\n BsDropdownModule,\n RouterModule,\n DatapointLabelPipe,\n DatapointUnitPipe\n ]\n})\nexport class DatapointLibraryListComponent {\n readonly title = gettext('Data point library');\n listClass = '';\n isLoading = true;\n reload$: BehaviorSubject<void> = new BehaviorSubject(null);\n datapoints$: Observable<IResultList<IManagedObject>> = this.reload$.pipe(\n tap(() => {\n this.isLoading = true;\n }),\n switchMap(() => this.getDatapoints()),\n tap(() => {\n this.isLoading = false;\n }),\n shareReplay()\n );\n\n parsePipe = pipe(map((data: IManagedObject[]) => this.parser.parseDatapoints(data)));\n\n constructor(\n private inventory: InventoryService,\n private router: Router,\n private modalService: ModalService,\n private translateService: TranslateService,\n private alertService: AlertService,\n private parser: DatapointParserService\n ) {}\n\n getDatapoints(): Promise<IResultList<IManagedObject>> {\n return this.inventory.list({ pageSize: 20, fragmentType: 'c8y_Kpi', withTotalPages: true });\n }\n\n addDatapointEntry() {\n this.router.navigate([pathToDatapointLibrary, 'new']);\n }\n\n editDatapointEntry(entry: IManagedObject) {\n this.router.navigate([pathToDatapointLibrary, entry.id]);\n }\n\n async removeDatapointEntry(entry: IManagedObject) {\n try {\n await this.modalService.confirm(\n gettext('Delete data point'),\n this.translateService.instant(\n gettext('You are about to delete data point \"{{ dpLabel }}\". Do you want to proceed?'),\n { dpLabel: translateDatapointLabel(entry.c8y_Kpi.label, this.translateService) }\n ),\n 'danger'\n );\n } catch {\n return;\n }\n try {\n await this.inventory.delete(entry.id);\n this.reload$.next();\n } catch (e) {\n this.alertService.addServerFailure(e);\n }\n }\n\n reload() {\n this.reload$.next();\n }\n}\n","<c8y-title>{{ title \| translate }}</c8y-title>\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"'Configuration' \| translate\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"title \| translate\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item\n [placement]=\"'right'\"\n c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\"\n [priority]=\"1\"\n>\n <button\n class=\"btn btn-link\"\n [title]=\"'Add data point' \| translate\"\n type=\"button\"\n (click)=\"addDatapointEntry()\"\n data-cy=\"c8y-datapoint-library-list--add-data-point\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' \| translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n [placement]=\"'right'\"\n [priority]=\"0\"\n>\n <button\n class=\"btn btn-link\"\n [title]=\"'Reload' \| translate\"\n type=\"button\"\n [disabled]=\"isLoading\"\n (click)=\"reload()\"\n >\n <i\n c8yIcon=\"refresh\"\n [ngClass]=\"{ 'icon-spin': isLoading }\"\n ></i>\n {{ 'Reload' \| translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n [placement]=\"'left'\"\n itemClass=\"navbar-form hidden-xs\"\n>\n <c8y-list-display-switch\n (onListClassChange)=\"listClass = $event\"\n [listLength]=\"(datapoints$ \| async)?.data?.length\"\n ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/cockpit/data-point-library/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n@if ((datapoints$ \| async)?.data?.length === 0) {\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points to display.' \| translate\"\n [subtitle]=\"'Add a data point using the button below.' \| translate\"\n >\n <p>\n <button\n class=\"btn btn-primary\"\n [title]=\"'Add data point' \| translate\"\n type=\"button\"\n (click)=\"addDatapointEntry()\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' \| translate }}\n </button>\n </p>\n </c8y-ui-empty-state>\n}\n\n<!-- loading indicator -->\n@if (isLoading) {\n <div class=\"d-flex j-c-center\">\n <c8y-loading></c8y-loading>\n </div>\n}\n\n@if (!isLoading && (datapoints$ \| async); as datapoints) {\n <div\n class=\"card-group\"\n [ngClass]=\"listClass\"\n >\n @if (datapoints.data.length) {\n <div class=\"page-sticky-header hidden-xs\">\n <div class=\"d-flex\">\n <div class=\"card-header\">\n <div class=\"card-icon\"></div>\n <p translate>Label</p>\n </div>\n <div class=\"card-actions\"></div>\n <div class=\"card-block p-l-0\">\n <div class=\"col-sm-3 p-l-16\">\n <p translate>Fragment</p>\n </div>\n <div class=\"col-sm-2\">\n <p translate>Series</p>\n </div>\n <div class=\"col-sm-1\">\n <span translate>Unit</span>\n </div>\n <div class=\"col-sm-2\">\n <span translate>Target</span>\n </div>\n <div class=\"col-sm-4\">\n <span translate>Range</span>\n </div>\n </div>\n </div>\n </div>\n }\n <div\n class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe\"\n >\n <div\n class=\"card pointer\"\n (click)=\"editDatapointEntry(datapoint)\"\n >\n <div\n class=\"card-actions\"\n (click)=\"$event.stopPropagation()\"\n >\n <div\n class=\"dropdown settings\"\n dropdown\n #datapointOptionsDropdown=\"bs-dropdown\"\n [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\"\n >\n <button\n class=\"dropdown-toggle c8y-dropdown\"\n [title]=\"'Actions' \| translate\"\n type=\"button\"\n dropdownToggle\n >\n <i c8yIcon=\"ellipsis-v\"></i>\n </button>\n <ul\n class=\"dropdown-menu dropdown-menu-right\"\n dropdownMenu\n >\n <li>\n <button\n [title]=\"'Edit' \| translate\"\n type=\"button\"\n (click)=\"editDatapointEntry(datapoint)\"\n >\n <i c8yIcon=\"pencil\"></i>\n {{ 'Edit' \| translate }}\n </button>\n </li>\n <li>\n <button\n [title]=\"'Remove' \| translate\"\n type=\"button\"\n (click)=\"removeDatapointEntry(datapoint)\"\n >\n <i c8yIcon=\"delete\"></i>\n {{ 'Remove' \| translate }}\n </button>\n </li>\n </ul>\n </div>\n </div>\n <div class=\"card-header separator\">\n <div class=\"card-icon\">\n <i\n c8yIcon=\"circle\"\n [style.color]=\"datapoint.c8y_Kpi?.color\"\n ></i>\n </div>\n <div\n class=\"card-title text-truncate\"\n [title]=\"datapoint.c8y_Kpi \| datapointLabel\"\n >\n {{ datapoint.c8y_Kpi \| datapointLabel }}\n </div>\n </div>\n <div class=\"card-block bg-level-1 p-b-24 card-hidden-list\">\n <div class=\"col-sm-3 col-md-2\">\n <c8y-range-display\n [config]=\"datapoint.c8y_Kpi\"\n [display]=\"'compact'\"\n ></c8y-range-display>\n </div>\n </div>\n <div class=\"card-block\">\n <div class=\"col-sm-3 text-truncate\">\n <span>\n <label\n class=\"text-label-small m-r-4\"\n translate\n >\n Fragment\n </label>\n <span [title]=\"datapoint.c8y_Kpi?.fragment\">\n {{ datapoint.c8y_Kpi?.fragment }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-2 text-truncate\">\n <label\n class=\"text-label-small m-r-4\"\n translate\n >\n Series\n </label>\n <span [title]=\"datapoint.c8y_Kpi?.series\">\n {{ datapoint.c8y_Kpi?.series }}\n </span>\n </div>\n <div class=\"col-sm-1 text-truncate card-hidden-grid\">\n @if (datapoint.c8y_Kpi?.unit) {\n <span>\n <label\n class=\"text-label-small m-r-4\"\n translate\n >\n Unit\n </label>\n <span [title]=\"datapoint.c8y_Kpi?.unit \| datapointUnit\">\n {{ datapoint.c8y_Kpi?.unit \| datapointUnit }}\n </span>\n </span>\n }\n </div>\n <div class=\"col-sm-2 text-truncate\">\n @if (datapoint.c8y_Kpi?.target) {\n <span>\n <label\n class=\"text-label-small m-r-4\"\n translate\n >\n Target\n </label>\n <span [title]=\"datapoint.c8y_Kpi?.target\">\n {{ datapoint.c8y_Kpi?.target }}\n </span>\n </span>\n }\n </div>\n <div class=\"col-sm-4 card-hidden-grid\">\n <c8y-range-display\n [config]=\"datapoint.c8y_Kpi\"\n [display]=\"'inline'\"\n ></c8y-range-display>\n </div>\n </div>\n </div>\n </div>\n </div>\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;MAiCa,6BAA6B,CAAA;IAkBxC,WAAA,CACU,SAA2B,EAC3B,MAAc,EACd,YAA0B,EAC1B,gBAAkC,EAClC,YAA0B,EAC1B,MAA8B,EAAA;QAL9B,IAAA,CAAA,SAAS,GAAT,SAAS;QACT,IAAA,CAAA,MAAM,GAAN,MAAM;QACN,IAAA,CAAA,YAAY,GAAZ,YAAY;QACZ,IAAA,CAAA,gBAAgB,GAAhB,gBAAgB;QAChB,IAAA,CAAA,YAAY,GAAZ,YAAY;QACZ,IAAA,CAAA,MAAM,GAAN,MAAM;AAvBP,QAAA,IAAA,CAAA,KAAK,GAAG,OAAO,CAAC,oBAAoB,CAAC;QAC9C,IAAA,CAAA,SAAS,GAAG,EAAE;QACd,IAAA,CAAA,SAAS,GAAG,IAAI;AAChB,QAAA,IAAA,CAAA,OAAO,GAA0B,IAAI,eAAe,CAAC,IAAI,CAAC;QAC1D,IAAA,CAAA,WAAW,GAA4C,IAAI,CAAC,OAAO,CAAC,IAAI,CACtE,GAAG,CAAC,MAAK;AACP,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACvB,QAAA,CAAC,CAAC,EACF,SAAS,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC,EACrC,GAAG,CAAC,MAAK;AACP,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,QAAA,CAAC,CAAC,EACF,WAAW,EAAE,CACd;QAED,IAAA,CAAA,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAsB,KAAK,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;IASjF;IAEH,aAAa,GAAA;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;IAC7F;IAEA,iBAAiB,GAAA;QACf,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;IACvD;AAEA,IAAA,kBAAkB,CAAC,KAAqB,EAAA;AACtC,QAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IAC1D;IAEA,MAAM,oBAAoB,CAAC,KAAqB,EAAA;AAC9C,QAAA,IAAI;AACF,YAAA,MAAM,IAAI,CAAC,YAAY,CAAC,OAAO,CAC7B,OAAO,CAAC,mBAAmB,CAAC,EAC5B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAC3B,OAAO,CAAC,6EAA6E,CAAC,EACtF,EAAE,OAAO,EAAE,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,CAAC,EAAE,CACjF,EACD,QAAQ,CACT;QACH;AAAE,QAAA,MAAM;YACN;QACF;AACA,QAAA,IAAI;YACF,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;AACrC,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;QACrB;QAAE,OAAO,CAAC,EAAE;AACV,YAAA,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACvC;IACF;IAEA,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACrB;+GA9DW,6BAA6B,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA7B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,6BAA6B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjC1C,urPAsQA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED7OI,UAAU,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,yBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACV,UAAU,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,UAAA,EAAA,SAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,qBAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,sBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,gBAAA,EAAA,uBAAA,EAAA,kBAAA,EAAA,2BAAA,EAAA,gCAAA,EAAA,6BAAA,EAAA,oCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,EAAA,cAAA,EAAA,yBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,aAAA,EAAA,UAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,qBAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACV,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,iCAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,qCAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,WAAA,EAAA,YAAA,EAAA,aAAA,EAAA,YAAA,EAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAChB,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EACZ,kBAAkB,kDAClB,iBAAiB,EAAA,IAAA,EAAA,eAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAGR,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAbzC,SAAS;+BACE,4BAA4B,EAAA,UAAA,EAE1B,IAAI,EAAA,OAAA,EACP;wBACP,UAAU;wBACV,UAAU;wBACV,gBAAgB;wBAChB,YAAY;wBACZ,kBAAkB;wBAClB;AACD,qBAAA,EAAA,QAAA,EAAA,urPAAA,EAAA;;;AE/BH;;AAEG;;;;"}

package/fesm2022/c8y-ngx-components-datapoint-selector.mjs CHANGED Viewed

@@ -1,8 +1,8 @@
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, Input, Component, EventEmitter, ContentChild, Output, Pipe, Optional, NgModule } from '@angular/core';
+import { Injectable, forwardRef, Input, Component, inject, Pipe, EventEmitter, ContentChild, Output, Optional, NgModule } from '@angular/core';
 import * as i2$1 from '@c8y/ngx-components';
-import { C8yValidators, C8yTranslateDirective, FormGroupComponent, RequiredInputPlaceholderDirective, MessagesComponent, MessageDirective, C8yTranslatePipe, MAX_PAGE_SIZE, IconDirective, ListItemComponent, ListItemDragHandleComponent, ListItemCheckboxComponent, HighlightComponent, ListItemActionComponent, ListItemCollapseComponent, TypeaheadComponent, ForOfDirective, ListItemIconComponent, EmptyStateComponent, LoadingComponent, ListGroupComponent, CoreModule } from '@c8y/ngx-components';
+import { C8yValidators, C8yTranslateDirective, FormGroupComponent, RequiredInputPlaceholderDirective, MessagesComponent, MessageDirective, C8yTranslatePipe, MAX_PAGE_SIZE, buildDatapointLabel, translateDatapointLabel, IconDirective, DatapointDescriptionPipe, DatapointUnitPipe, ListItemComponent, ListItemDragHandleComponent, ListItemCheckboxComponent, HighlightComponent, ListItemActionComponent, ListItemCollapseComponent, TypeaheadComponent, ForOfDirective, ListItemIconComponent, EmptyStateComponent, LoadingComponent, ListGroupComponent, CoreModule } from '@c8y/ngx-components';
 import { MillerViewComponent, AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@@ -12,13 +12,16 @@ import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
 import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i2 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import { map, take, filter, startWith, tap, switchMap, shareReplay, distinctUntilChanged, debounceTime } from 'rxjs/operators';
+import { map, take, filter, startWith, distinctUntilChanged, tap, switchMap, shareReplay, debounceTime } from 'rxjs/operators';
 import { gettext } from '@c8y/ngx-components/gettext';
 import { NgClass, NgTemplateOutlet, KeyValuePipe, AsyncPipe, NgIf, NgFor } from '@angular/common';
 import * as i4 from '@c8y/ngx-components/context-dashboard';
 import { pipe, BehaviorSubject, from, combineLatest } from 'rxjs';
 import * as i1 from '@c8y/client';
 import { sortBy, get, uniq } from 'lodash-es';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2$2 from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
 const AXIS_TYPES = [
     { val: null, text: gettext('Auto') },
@@ -528,7 +531,7 @@ class DatapointLibraryService {
             }
             const datapoint = this.mapDatapointLibraryEntry(foundDatapointLibraryEntry) || tuple;
             if (!datapoint.label) {
-                datapoint.label = `${datapoint.fragment} → ${datapoint.series}`;
+                datapoint.label = buildDatapointLabel(datapoint);
             }
             if (!datapoint.unit?.length) {
                 datapoint.unit = '';
@@ -612,6 +615,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.InventoryService }, { type: i2$1.AppStateService }, { type: i1.MeasurementService }, { type: i2$1.ColorService }] });
+/**
+ * Builds the label of a datapoint, either from the datapoint's own label or, if it has none, from
+ * its fragment and series, and translates it. Outside a template, call `translateDatapointLabel`
+ * directly.
+ */
+class DatapointLabelPipe {
+    constructor() {
+        this.translate = inject(TranslateService);
+    }
+    /**
+     * @param datapointOrLabel Either a `KPIDetails` datapoint (its `label` is used, falling back
+     * to `fragment → series`) or the label string itself. `options` only applies to a datapoint.
+     */
+    transform(datapointOrLabel, options = { includeDevice: false, doNotUseLabel: false }) {
+        return translateDatapointLabel(datapointOrLabel, this.translate, options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: DatapointLabelPipe, isStandalone: true, name: "datapointLabel" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'datapointLabel' }]
+        }] });
 class DatapointTemplatePopoverComponent {
     constructor() {
         this.attributes = [
@@ -640,11 +667,17 @@ class DatapointTemplatePopoverComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointTemplatePopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DatapointTemplatePopoverComponent, isStandalone: true, selector: "c8y-datapoint-template-popover", inputs: { datapoint: "datapoint", attributes: "attributes" }, ngImport: i0, template: "<p class=\"text-medium\">\n  <i\n    c8yIcon=\"circle\"\n    [style.color]=\"datapoint.color\"\n  ></i>\n  {{ datapoint.label }}\n</p>\n<p>{{ datapoint.description }}</p>\n\n<ul class=\"list-unstyled small p-t-16\">\n  @for (attribute of attributes; track attribute; let i = $index) {\n    @if (datapoint[attribute.key] !== undefined) {\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\">\n          @if (attribute.labelColor) {\n            <i\n              c8yIcon=\"square\"\n              [style.color]=\"attribute.labelColor\"\n            ></i>\n          }\n          {{ attribute.label | translate }}\n        </label>\n        @switch (attribute.key) {\n          @case ('min') {\n            <span class=\"m-l-auto\">{{ datapoint['min'] }} \u2014 {{ datapoint['max'] }}</span>\n          }\n          @case ('yellowRangeMin') {\n            <span class=\"m-l-auto\">\n              {{ datapoint['yellowRangeMin'] }} \u2014 {{ datapoint['yellowRangeMax'] }}\n            </span>\n          }\n          @case ('redRangeMin') {\n            <span class=\"m-l-auto\">\n              {{ datapoint['redRangeMin'] }} \u2014 {{ datapoint['redRangeMax'] }}\n            </span>\n          }\n          @default {\n            <span class=\"m-l-auto\">\n              {{ datapoint[attribute.key] }}\n            </span>\n          }\n        }\n      </li>\n    }\n  }\n</ul>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DatapointTemplatePopoverComponent, isStandalone: true, selector: "c8y-datapoint-template-popover", inputs: { datapoint: "datapoint", attributes: "attributes" }, ngImport: i0, template: "<p class=\"text-medium\">\n  <i\n    c8yIcon=\"circle\"\n    [style.color]=\"datapoint.color\"\n  ></i>\n  {{ datapoint.label | datapointLabel }}\n</p>\n<p>{{ datapoint.description | datapointDescription }}</p>\n\n<ul class=\"list-unstyled small p-t-16\">\n  @for (attribute of attributes; track attribute; let i = $index) {\n    @if (datapoint[attribute.key] !== undefined) {\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\">\n          @if (attribute.labelColor) {\n            <i\n              c8yIcon=\"square\"\n              [style.color]=\"attribute.labelColor\"\n            ></i>\n          }\n          {{ attribute.label | translate }}\n        </label>\n        @switch (attribute.key) {\n          @case ('unit') {\n            <span class=\"m-l-auto\">{{ datapoint['unit'] | datapointUnit }}</span>\n          }\n          @case ('min') {\n            <span class=\"m-l-auto\">{{ datapoint['min'] }} \u2014 {{ datapoint['max'] }}</span>\n          }\n          @case ('yellowRangeMin') {\n            <span class=\"m-l-auto\">\n              {{ datapoint['yellowRangeMin'] }} \u2014 {{ datapoint['yellowRangeMax'] }}\n            </span>\n          }\n          @case ('redRangeMin') {\n            <span class=\"m-l-auto\">\n              {{ datapoint['redRangeMin'] }} \u2014 {{ datapoint['redRangeMax'] }}\n            </span>\n          }\n          @default {\n            <span class=\"m-l-auto\">\n              {{ datapoint[attribute.key] }}\n            </span>\n          }\n        }\n      </li>\n    }\n  }\n</ul>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }, { kind: "pipe", type: DatapointDescriptionPipe, name: "datapointDescription" }, { kind: "pipe", type: DatapointUnitPipe, name: "datapointUnit" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointTemplatePopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-datapoint-template-popover', imports: [IconDirective, C8yTranslatePipe], template: "<p class=\"text-medium\">\n  <i\n    c8yIcon=\"circle\"\n    [style.color]=\"datapoint.color\"\n  ></i>\n  {{ datapoint.label }}\n</p>\n<p>{{ datapoint.description }}</p>\n\n<ul class=\"list-unstyled small p-t-16\">\n  @for (attribute of attributes; track attribute; let i = $index) {\n    @if (datapoint[attribute.key] !== undefined) {\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\">\n          @if (attribute.labelColor) {\n            <i\n              c8yIcon=\"square\"\n              [style.color]=\"attribute.labelColor\"\n            ></i>\n          }\n          {{ attribute.label | translate }}\n        </label>\n        @switch (attribute.key) {\n          @case ('min') {\n            <span class=\"m-l-auto\">{{ datapoint['min'] }} \u2014 {{ datapoint['max'] }}</span>\n          }\n          @case ('yellowRangeMin') {\n            <span class=\"m-l-auto\">\n              {{ datapoint['yellowRangeMin'] }} \u2014 {{ datapoint['yellowRangeMax'] }}\n            </span>\n          }\n          @case ('redRangeMin') {\n            <span class=\"m-l-auto\">\n              {{ datapoint['redRangeMin'] }} \u2014 {{ datapoint['redRangeMax'] }}\n            </span>\n          }\n          @default {\n            <span class=\"m-l-auto\">\n              {{ datapoint[attribute.key] }}\n            </span>\n          }\n        }\n      </li>\n    }\n  }\n</ul>\n" }]
+            args: [{ selector: 'c8y-datapoint-template-popover', imports: [
+                        IconDirective,
+                        C8yTranslatePipe,
+                        DatapointLabelPipe,
+                        DatapointDescriptionPipe,
+                        DatapointUnitPipe
+                    ], template: "<p class=\"text-medium\">\n  <i\n    c8yIcon=\"circle\"\n    [style.color]=\"datapoint.color\"\n  ></i>\n  {{ datapoint.label | datapointLabel }}\n</p>\n<p>{{ datapoint.description | datapointDescription }}</p>\n\n<ul class=\"list-unstyled small p-t-16\">\n  @for (attribute of attributes; track attribute; let i = $index) {\n    @if (datapoint[attribute.key] !== undefined) {\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\">\n          @if (attribute.labelColor) {\n            <i\n              c8yIcon=\"square\"\n              [style.color]=\"attribute.labelColor\"\n            ></i>\n          }\n          {{ attribute.label | translate }}\n        </label>\n        @switch (attribute.key) {\n          @case ('unit') {\n            <span class=\"m-l-auto\">{{ datapoint['unit'] | datapointUnit }}</span>\n          }\n          @case ('min') {\n            <span class=\"m-l-auto\">{{ datapoint['min'] }} \u2014 {{ datapoint['max'] }}</span>\n          }\n          @case ('yellowRangeMin') {\n            <span class=\"m-l-auto\">\n              {{ datapoint['yellowRangeMin'] }} \u2014 {{ datapoint['yellowRangeMax'] }}\n            </span>\n          }\n          @case ('redRangeMin') {\n            <span class=\"m-l-auto\">\n              {{ datapoint['redRangeMin'] }} \u2014 {{ datapoint['redRangeMax'] }}\n            </span>\n          }\n          @default {\n            <span class=\"m-l-auto\">\n              {{ datapoint[attribute.key] }}\n            </span>\n          }\n        }\n      </li>\n    }\n  }\n</ul>\n" }]
         }], propDecorators: { datapoint: [{
                 type: Input
             }], attributes: [{
@@ -657,8 +690,9 @@ const AddButtonTypes = {
     select: 'select'
 };
 class DatapointSelectorListItemComponent {
-    constructor(formBuilder) {
+    constructor(formBuilder, translate) {
         this.formBuilder = formBuilder;
+        this.translate = translate;
         this.defaultFormOptions = {};
         this.isSelected = false;
         this.isCollapsed = true;
@@ -686,6 +720,9 @@ class DatapointSelectorListItemComponent {
             __template: []
         });
         this.isValid$ = this.formGroup.statusChanges.pipe(map(status => status === 'VALID'), startWith(this.formGroup.valid));
+        this.formGroup.valueChanges
+            .pipe(map(({ __template, details }) => ({ __template, details })), distinctUntilChanged(undefined, ({ __template, details }) => `${__template}|${details?.label}`), takeUntilDestroyed())
+            .subscribe(() => this.updateTemplateForTypeahead());
     }
     validate(_control) {
         if (this.formGroup?.invalid) {
@@ -703,6 +740,7 @@ class DatapointSelectorListItemComponent {
     }
     writeValue(obj) {
         this.formGroup.patchValue({ ...obj, details: obj });
+        this.updateTemplateForTypeahead();
     }
     registerOnChange(fn) {
         this.formGroup.valueChanges.pipe(map(tmp => this.transformFormValue(tmp))).subscribe(fn);
@@ -771,6 +809,17 @@ class DatapointSelectorListItemComponent {
         this.writeValue(dataPoint);
         this.setPipe('');
     }
+    /**
+     * Reads the selection from the form rather than from a caller, so that it stays correct no
+     * matter what the form was given, `writeValue(null)` included.
+     */
+    updateTemplateForTypeahead() {
+        const { __template, details } = this.formGroup.value;
+        this.templateForTypeahead =
+            __template && details
+                ? { ...details, translatedLabel: translateDatapointLabel(details, this.translate) }
+                : undefined;
+    }
     resetUnusedProperties(details) {
         const { showTarget, showYellowRange, showRedRange } = this.defaultFormOptions;
         details.__template = undefined;
@@ -797,7 +846,7 @@ class DatapointSelectorListItemComponent {
         delete obj.details;
         return obj;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointSelectorListItemComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointSelectorListItemComponent, deps: [{ token: i2.FormBuilder }, { token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DatapointSelectorListItemComponent, isStandalone: true, selector: "c8y-datapoint-selector-list-item", inputs: { defaultFormOptions: "defaultFormOptions", isSelected: "isSelected", isCollapsed: "isCollapsed", addButtonType: "addButtonType", editable: "editable", showActiveToggle: "showActiveToggle", activeToggleDisabled: "activeToggleDisabled", showOptions: "showOptions", datapointLibraryEntries: "datapointLibraryEntries", actions: "actions", optionToRemove: "optionToRemove", hasUnlinkTemplateOption: "hasUnlinkTemplateOption", colorPickerDisabled: "colorPickerDisabled", disableTypeaheadIfSelected: "disableTypeaheadIfSelected", highlightText: "highlightText" }, outputs: { added: "added", removed: "removed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -809,7 +858,7 @@ class DatapointSelectorListItemComponent {
                 useExisting: forwardRef(() => DatapointSelectorListItemComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "dragHandle", first: true, predicate: ListItemDragHandleComponent, descendants: true }], ngImport: i0, template: "<c8y-li\n  class=\"c8y-list__item__collapse--container-small\"\n  [formGroup]=\"formGroup\"\n  #li\n>\n  <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n  @if (showActiveToggle) {\n    <c8y-li-checkbox\n      class=\"a-s-center p-r-0\"\n      [displayAsSwitch]=\"true\"\n      formControlName=\"__active\"\n      (click)=\"$event.stopPropagation()\"\n    ></c8y-li-checkbox>\n  }\n\n  <div class=\"d-flex a-i-center\">\n    <div\n      class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-16\"\n      [title]=\"'Change color' | translate\"\n    >\n      <div class=\"c8y-colorpicker\">\n        <input\n          [attr.aria-label]=\"'Color' | translate\"\n          type=\"color\"\n          formControlName=\"color\"\n          (click)=\"$event.stopPropagation()\"\n        />\n        <span [style.background-color]=\"formGroup.value.color\"></span>\n      </div>\n    </div>\n    <button\n      class=\"btn-clean data-point-label text-truncate\"\n      [attr.aria-expanded]=\"!li.collapsed\"\n      type=\"button\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <span\n        class=\"text-truncate\"\n        [title]=\"formGroup.value.details?.label\"\n      >\n        <c8y-highlight\n          [text]=\"formGroup.value.details?.label\"\n          [pattern]=\"highlightText\"\n          [shouldTrimPattern]=\"true\"\n        ></c8y-highlight>\n      </span>\n      @if (formGroup.value.__target) {\n        <small class=\"text-truncate text-muted icon-flex\">\n          <i c8yIcon=\"exchange\"></i>\n          <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n        </small>\n      }\n    </button>\n\n    @if (!(isValid$ | async)) {\n      <button\n        class=\"btn btn-dot btn-dot--danger m-l-auto\"\n        [attr.aria-label]=\"'Invalid' | translate\"\n        [popover]=\"\n          errorMessage\n            ? errorMessage\n            : ('Some entries are invalid. Check the input fields with red borders.' | translate)\n        \"\n        placement=\"left\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    }\n    @if (addButtonType === AddButtonTypes.addRemove) {\n      <div class=\"m-l-auto a-s-center p-r-4\">\n        @if (isSelected) {\n          <button\n            class=\"btn btn-dot btn-dot--danger\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            [tooltip]=\"'Remove from selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n          >\n            <i\n              class=\"icon-20\"\n              c8yIcon=\"minus-circle\"\n            ></i>\n          </button>\n        }\n        @if (!isSelected) {\n          <button\n            class=\"btn btn-dot text-primary\"\n            [attr.aria-label]=\"'Add to selected data points' | translate\"\n            [tooltip]=\"'Add to selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            [disabled]=\"!(isValid$ | async)\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n          >\n            <i\n              class=\"text-primary icon-20\"\n              c8yIcon=\"plus-circle\"\n            ></i>\n          </button>\n        }\n      </div>\n    }\n    @if (addButtonType === AddButtonTypes.select) {\n      <button\n        class=\"btn btn-default btn-sm m-l-auto\"\n        [attr.aria-label]=\"'Select' | translate\"\n        [tooltip]=\"'Select data point' | translate\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"addOrRemoveItem()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n    }\n  </div>\n\n  @if (optionToRemove) {\n    <c8y-li-action\n      [icon]=\"'minus-circle'\"\n      [label]=\"'Remove from list' | translate\"\n      (click)=\"remove()\"\n    ></c8y-li-action>\n  }\n  @for (action of actions; track action) {\n    <c8y-li-action\n      [icon]=\"action.icon\"\n      [label]=\"action.label\"\n      (click)=\"action.callback(formGroup.value)\"\n    ></c8y-li-action>\n  }\n  @if (editable) {\n    <c8y-li-collapse>\n      <div class=\"data-point-details\">\n        <ul class=\"list-unstyled small m-b-16\">\n          <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Fragment\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.fragment }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.fragment\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n          <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Series\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.series }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.series\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n        </ul>\n        @if (datapointLibraryEntries && datapointLibraryEntries | async; as libraryEntries) {\n          <div class=\"form-group form-group-sm\">\n            <label>\n              {{ 'Data point template' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"datapointHintPopoverTemplate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n              ></button>\n            </label>\n\n            <ng-template #datapointHintPopoverTemplate>\n              {{\n                'Using a data point template sets color, label, unit and ranges. Removing the template allows you to set the values manually.'\n                  | translate\n              }}\n            </ng-template>\n            <div class=\"input-group input-group-sm\">\n              @if (datapointLibraryEntries) {\n                <c8y-typeahead\n                  class=\"flex-grow\"\n                  [placeholder]=\"'No template' | translate\"\n                  [ngModel]=\"formGroup.value.__template ? formGroup.value.details : undefined\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (onSearch)=\"setPipe($event)\"\n                  [displayProperty]=\"'label'\"\n                  [hideNew]=\"true\"\n                  [disabled]=\"isSelected && disableTypeaheadIfSelected\"\n                >\n                  <c8y-li\n                    class=\"p-l-8 p-r-8 c8y-list__item--link interact\"\n                    *c8yFor=\"\n                      let item of datapointLibraryEntries;\n                      loadMore: 'auto';\n                      pipe: filterPipe;\n                      notFound: notFoundTemplate\n                    \"\n                    (click)=\"dataPointTemplateSelected(item)\"\n                    [active]=\"formGroup.value.__template === item.id\"\n                    [attr.role]=\"'menuitem'\"\n                  >\n                    <c8y-highlight\n                      [text]=\"item.c8y_Kpi?.label\"\n                      [pattern]=\"pattern\"\n                    ></c8y-highlight>\n                    <c8y-li-icon\n                      icon=\"circle\"\n                      [style.color]=\"item.c8y_Kpi?.color\"\n                    ></c8y-li-icon>\n                  </c8y-li>\n                  <ng-template #notFoundTemplate>\n                    @if (pattern.length > 0) {\n                      <c8y-li class=\"bg-level-2 p-8\">\n                        <span>No match found.</span>\n                      </c8y-li>\n                    }\n                  </ng-template>\n                </c8y-typeahead>\n              }\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Info' | translate\"\n                    [popover]=\"datapointOverviewPopoverTemplate\"\n                    placement=\"left\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  >\n                    <i\n                      class=\"text-info\"\n                      c8yIcon=\"info\"\n                    ></i>\n                  </button>\n                }\n              </div>\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template && hasUnlinkTemplateOption) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Unlink data point template' | translate\"\n                    tooltip=\"{{ 'Unlink data point template' | translate }}\"\n                    placement=\"left\"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    [adaptivePosition]=\"false\"\n                    (click)=\"unlinkDatapointTemplate()\"\n                  >\n                    <i c8yIcon=\"unlink\"></i>\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        }\n        <ng-template #datapointOverviewPopoverTemplate>\n          <c8y-datapoint-template-popover\n            [datapoint]=\"formGroup.value.details\"\n          ></c8y-datapoint-template-popover>\n        </ng-template>\n        @if (defaultFormOptions) {\n          <c8y-datapoint-attributes-form\n            [showTarget]=\"defaultFormOptions.showTarget\"\n            [showRange]=\"defaultFormOptions.showRange\"\n            [showYellowRange]=\"defaultFormOptions.showYellowRange\"\n            [showRedRange]=\"defaultFormOptions.showRedRange\"\n            [showChart]=\"defaultFormOptions.showChart\"\n            [showFormIfTemplateWasSelected]=\"defaultFormOptions.showFormIfTemplateWasSelected\"\n            [selectableChartRenderTypes]=\"defaultFormOptions.selectableChartRenderTypes\"\n            [selectableChartLineTypes]=\"defaultFormOptions.selectableChartLineTypes\"\n            [selectableAxisTypes]=\"defaultFormOptions.selectableAxisTypes\"\n            [showAdvancedChartOptions]=\"defaultFormOptions.showAdvancedChartOptions\"\n            [showErrorsImmediately]=\"true\"\n            formControlName=\"details\"\n          ></c8y-datapoint-attributes-form>\n        }\n      </div>\n    </c8y-li-collapse>\n  }\n</c8y-li>\n", dependencies: [{ kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { 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: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DatapointTemplatePopoverComponent, selector: "c8y-datapoint-template-popover", inputs: ["datapoint", "attributes"] }, { kind: "component", type: DatapointAttributesFormComponent, selector: "c8y-datapoint-attributes-form", inputs: ["selectableChartRenderTypes", "selectableChartLineTypes", "selectableAxisTypes", "showTarget", "showRange", "showYellowRange", "showRedRange", "showChart", "showFormIfTemplateWasSelected", "showAdvancedChartOptions", "showErrorsImmediately"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], queries: [{ propertyName: "dragHandle", first: true, predicate: ListItemDragHandleComponent, descendants: true }], ngImport: i0, template: "<c8y-li\n  class=\"c8y-list__item__collapse--container-small\"\n  [formGroup]=\"formGroup\"\n  #li\n>\n  <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n  @if (showActiveToggle) {\n    <c8y-li-checkbox\n      class=\"a-s-center p-r-0\"\n      [displayAsSwitch]=\"true\"\n      formControlName=\"__active\"\n      (click)=\"$event.stopPropagation()\"\n    ></c8y-li-checkbox>\n  }\n\n  <div class=\"d-flex a-i-center\">\n    <div\n      class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-16\"\n      [title]=\"'Change color' | translate\"\n    >\n      <div class=\"c8y-colorpicker\">\n        <input\n          [attr.aria-label]=\"'Color' | translate\"\n          type=\"color\"\n          formControlName=\"color\"\n          (click)=\"$event.stopPropagation()\"\n        />\n        <span [style.background-color]=\"formGroup.value.color\"></span>\n      </div>\n    </div>\n    <button\n      class=\"btn-clean data-point-label text-truncate\"\n      [attr.aria-expanded]=\"!li.collapsed\"\n      type=\"button\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <span\n        class=\"text-truncate\"\n        [title]=\"formGroup.value.details?.label | datapointLabel\"\n      >\n        <c8y-highlight\n          [text]=\"formGroup.value.details?.label | datapointLabel\"\n          [pattern]=\"highlightText\"\n          [shouldTrimPattern]=\"true\"\n        ></c8y-highlight>\n      </span>\n      @if (formGroup.value.__target) {\n        <small class=\"text-truncate text-muted icon-flex\">\n          <i c8yIcon=\"exchange\"></i>\n          <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n        </small>\n      }\n    </button>\n\n    @if (!(isValid$ | async)) {\n      <button\n        class=\"btn btn-dot btn-dot--danger m-l-auto\"\n        [attr.aria-label]=\"'Invalid' | translate\"\n        [popover]=\"\n          errorMessage\n            ? errorMessage\n            : ('Some entries are invalid. Check the input fields with red borders.' | translate)\n        \"\n        placement=\"left\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    }\n    @if (addButtonType === AddButtonTypes.addRemove) {\n      <div class=\"m-l-auto a-s-center p-r-4\">\n        @if (isSelected) {\n          <button\n            class=\"btn btn-dot btn-dot--danger\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            [tooltip]=\"'Remove from selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n          >\n            <i\n              class=\"icon-20\"\n              c8yIcon=\"minus-circle\"\n            ></i>\n          </button>\n        }\n        @if (!isSelected) {\n          <button\n            class=\"btn btn-dot text-primary\"\n            [attr.aria-label]=\"'Add to selected data points' | translate\"\n            [tooltip]=\"'Add to selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            [disabled]=\"!(isValid$ | async)\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n          >\n            <i\n              class=\"text-primary icon-20\"\n              c8yIcon=\"plus-circle\"\n            ></i>\n          </button>\n        }\n      </div>\n    }\n    @if (addButtonType === AddButtonTypes.select) {\n      <button\n        class=\"btn btn-default btn-sm m-l-auto\"\n        [attr.aria-label]=\"'Select' | translate\"\n        [tooltip]=\"'Select data point' | translate\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"addOrRemoveItem()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n    }\n  </div>\n\n  @if (optionToRemove) {\n    <c8y-li-action\n      [icon]=\"'minus-circle'\"\n      [label]=\"'Remove from list' | translate\"\n      (click)=\"remove()\"\n    ></c8y-li-action>\n  }\n  @for (action of actions; track action) {\n    <c8y-li-action\n      [icon]=\"action.icon\"\n      [label]=\"action.label\"\n      (click)=\"action.callback(formGroup.value)\"\n    ></c8y-li-action>\n  }\n  @if (editable) {\n    <c8y-li-collapse>\n      <div class=\"data-point-details\">\n        <ul class=\"list-unstyled small m-b-16\">\n          <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Fragment\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.fragment }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.fragment\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n          <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Series\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.series }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.series\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n        </ul>\n        @if (datapointLibraryEntries && datapointLibraryEntries | async; as libraryEntries) {\n          <div class=\"form-group form-group-sm\">\n            <label>\n              {{ 'Data point template' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"datapointHintPopoverTemplate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n              ></button>\n            </label>\n\n            <ng-template #datapointHintPopoverTemplate>\n              {{\n                'Using a data point template sets color, label, unit and ranges. Removing the template allows you to set the values manually.'\n                  | translate\n              }}\n            </ng-template>\n            <div class=\"input-group input-group-sm\">\n              @if (datapointLibraryEntries) {\n                <c8y-typeahead\n                  class=\"flex-grow\"\n                  [placeholder]=\"'No template' | translate\"\n                  [ngModel]=\"templateForTypeahead\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (onSearch)=\"setPipe($event)\"\n                  [displayProperty]=\"'translatedLabel'\"\n                  [hideNew]=\"true\"\n                  [disabled]=\"isSelected && disableTypeaheadIfSelected\"\n                >\n                  <c8y-li\n                    class=\"p-l-8 p-r-8 c8y-list__item--link interact\"\n                    *c8yFor=\"\n                      let item of datapointLibraryEntries;\n                      loadMore: 'auto';\n                      pipe: filterPipe;\n                      notFound: notFoundTemplate\n                    \"\n                    (click)=\"dataPointTemplateSelected(item)\"\n                    [active]=\"formGroup.value.__template === item.id\"\n                    [attr.role]=\"'menuitem'\"\n                  >\n                    <c8y-highlight\n                      [text]=\"item.c8y_Kpi | datapointLabel\"\n                      [pattern]=\"pattern\"\n                    ></c8y-highlight>\n                    <c8y-li-icon\n                      icon=\"circle\"\n                      [style.color]=\"item.c8y_Kpi?.color\"\n                    ></c8y-li-icon>\n                  </c8y-li>\n                  <ng-template #notFoundTemplate>\n                    @if (pattern.length > 0) {\n                      <c8y-li class=\"bg-level-2 p-8\">\n                        <span>No match found.</span>\n                      </c8y-li>\n                    }\n                  </ng-template>\n                </c8y-typeahead>\n              }\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Info' | translate\"\n                    [popover]=\"datapointOverviewPopoverTemplate\"\n                    placement=\"left\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  >\n                    <i\n                      class=\"text-info\"\n                      c8yIcon=\"info\"\n                    ></i>\n                  </button>\n                }\n              </div>\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template && hasUnlinkTemplateOption) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Unlink data point template' | translate\"\n                    tooltip=\"{{ 'Unlink data point template' | translate }}\"\n                    placement=\"left\"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    [adaptivePosition]=\"false\"\n                    (click)=\"unlinkDatapointTemplate()\"\n                  >\n                    <i c8yIcon=\"unlink\"></i>\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        }\n        <ng-template #datapointOverviewPopoverTemplate>\n          <c8y-datapoint-template-popover\n            [datapoint]=\"formGroup.value.details\"\n          ></c8y-datapoint-template-popover>\n        </ng-template>\n        @if (defaultFormOptions) {\n          <c8y-datapoint-attributes-form\n            [showTarget]=\"defaultFormOptions.showTarget\"\n            [showRange]=\"defaultFormOptions.showRange\"\n            [showYellowRange]=\"defaultFormOptions.showYellowRange\"\n            [showRedRange]=\"defaultFormOptions.showRedRange\"\n            [showChart]=\"defaultFormOptions.showChart\"\n            [showFormIfTemplateWasSelected]=\"defaultFormOptions.showFormIfTemplateWasSelected\"\n            [selectableChartRenderTypes]=\"defaultFormOptions.selectableChartRenderTypes\"\n            [selectableChartLineTypes]=\"defaultFormOptions.selectableChartLineTypes\"\n            [selectableAxisTypes]=\"defaultFormOptions.selectableAxisTypes\"\n            [showAdvancedChartOptions]=\"defaultFormOptions.showAdvancedChartOptions\"\n            [showErrorsImmediately]=\"true\"\n            formControlName=\"details\"\n          ></c8y-datapoint-attributes-form>\n        }\n      </div>\n    </c8y-li-collapse>\n  }\n</c8y-li>\n", dependencies: [{ kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { 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: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DatapointTemplatePopoverComponent, selector: "c8y-datapoint-template-popover", inputs: ["datapoint", "attributes"] }, { kind: "component", type: DatapointAttributesFormComponent, selector: "c8y-datapoint-attributes-form", inputs: ["selectableChartRenderTypes", "selectableChartLineTypes", "selectableAxisTypes", "showTarget", "showRange", "showYellowRange", "showRedRange", "showChart", "showFormIfTemplateWasSelected", "showAdvancedChartOptions", "showErrorsImmediately"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointSelectorListItemComponent, decorators: [{
             type: Component,
@@ -844,9 +893,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         DatapointTemplatePopoverComponent,
                         DatapointAttributesFormComponent,
                         C8yTranslatePipe,
-                        AsyncPipe
-                    ], template: "<c8y-li\n  class=\"c8y-list__item__collapse--container-small\"\n  [formGroup]=\"formGroup\"\n  #li\n>\n  <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n  @if (showActiveToggle) {\n    <c8y-li-checkbox\n      class=\"a-s-center p-r-0\"\n      [displayAsSwitch]=\"true\"\n      formControlName=\"__active\"\n      (click)=\"$event.stopPropagation()\"\n    ></c8y-li-checkbox>\n  }\n\n  <div class=\"d-flex a-i-center\">\n    <div\n      class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-16\"\n      [title]=\"'Change color' | translate\"\n    >\n      <div class=\"c8y-colorpicker\">\n        <input\n          [attr.aria-label]=\"'Color' | translate\"\n          type=\"color\"\n          formControlName=\"color\"\n          (click)=\"$event.stopPropagation()\"\n        />\n        <span [style.background-color]=\"formGroup.value.color\"></span>\n      </div>\n    </div>\n    <button\n      class=\"btn-clean data-point-label text-truncate\"\n      [attr.aria-expanded]=\"!li.collapsed\"\n      type=\"button\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <span\n        class=\"text-truncate\"\n        [title]=\"formGroup.value.details?.label\"\n      >\n        <c8y-highlight\n          [text]=\"formGroup.value.details?.label\"\n          [pattern]=\"highlightText\"\n          [shouldTrimPattern]=\"true\"\n        ></c8y-highlight>\n      </span>\n      @if (formGroup.value.__target) {\n        <small class=\"text-truncate text-muted icon-flex\">\n          <i c8yIcon=\"exchange\"></i>\n          <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n        </small>\n      }\n    </button>\n\n    @if (!(isValid$ | async)) {\n      <button\n        class=\"btn btn-dot btn-dot--danger m-l-auto\"\n        [attr.aria-label]=\"'Invalid' | translate\"\n        [popover]=\"\n          errorMessage\n            ? errorMessage\n            : ('Some entries are invalid. Check the input fields with red borders.' | translate)\n        \"\n        placement=\"left\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    }\n    @if (addButtonType === AddButtonTypes.addRemove) {\n      <div class=\"m-l-auto a-s-center p-r-4\">\n        @if (isSelected) {\n          <button\n            class=\"btn btn-dot btn-dot--danger\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            [tooltip]=\"'Remove from selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n          >\n            <i\n              class=\"icon-20\"\n              c8yIcon=\"minus-circle\"\n            ></i>\n          </button>\n        }\n        @if (!isSelected) {\n          <button\n            class=\"btn btn-dot text-primary\"\n            [attr.aria-label]=\"'Add to selected data points' | translate\"\n            [tooltip]=\"'Add to selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            [disabled]=\"!(isValid$ | async)\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n          >\n            <i\n              class=\"text-primary icon-20\"\n              c8yIcon=\"plus-circle\"\n            ></i>\n          </button>\n        }\n      </div>\n    }\n    @if (addButtonType === AddButtonTypes.select) {\n      <button\n        class=\"btn btn-default btn-sm m-l-auto\"\n        [attr.aria-label]=\"'Select' | translate\"\n        [tooltip]=\"'Select data point' | translate\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"addOrRemoveItem()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n    }\n  </div>\n\n  @if (optionToRemove) {\n    <c8y-li-action\n      [icon]=\"'minus-circle'\"\n      [label]=\"'Remove from list' | translate\"\n      (click)=\"remove()\"\n    ></c8y-li-action>\n  }\n  @for (action of actions; track action) {\n    <c8y-li-action\n      [icon]=\"action.icon\"\n      [label]=\"action.label\"\n      (click)=\"action.callback(formGroup.value)\"\n    ></c8y-li-action>\n  }\n  @if (editable) {\n    <c8y-li-collapse>\n      <div class=\"data-point-details\">\n        <ul class=\"list-unstyled small m-b-16\">\n          <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Fragment\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.fragment }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.fragment\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n          <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Series\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.series }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.series\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n        </ul>\n        @if (datapointLibraryEntries && datapointLibraryEntries | async; as libraryEntries) {\n          <div class=\"form-group form-group-sm\">\n            <label>\n              {{ 'Data point template' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"datapointHintPopoverTemplate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n              ></button>\n            </label>\n\n            <ng-template #datapointHintPopoverTemplate>\n              {{\n                'Using a data point template sets color, label, unit and ranges. Removing the template allows you to set the values manually.'\n                  | translate\n              }}\n            </ng-template>\n            <div class=\"input-group input-group-sm\">\n              @if (datapointLibraryEntries) {\n                <c8y-typeahead\n                  class=\"flex-grow\"\n                  [placeholder]=\"'No template' | translate\"\n                  [ngModel]=\"formGroup.value.__template ? formGroup.value.details : undefined\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (onSearch)=\"setPipe($event)\"\n                  [displayProperty]=\"'label'\"\n                  [hideNew]=\"true\"\n                  [disabled]=\"isSelected && disableTypeaheadIfSelected\"\n                >\n                  <c8y-li\n                    class=\"p-l-8 p-r-8 c8y-list__item--link interact\"\n                    *c8yFor=\"\n                      let item of datapointLibraryEntries;\n                      loadMore: 'auto';\n                      pipe: filterPipe;\n                      notFound: notFoundTemplate\n                    \"\n                    (click)=\"dataPointTemplateSelected(item)\"\n                    [active]=\"formGroup.value.__template === item.id\"\n                    [attr.role]=\"'menuitem'\"\n                  >\n                    <c8y-highlight\n                      [text]=\"item.c8y_Kpi?.label\"\n                      [pattern]=\"pattern\"\n                    ></c8y-highlight>\n                    <c8y-li-icon\n                      icon=\"circle\"\n                      [style.color]=\"item.c8y_Kpi?.color\"\n                    ></c8y-li-icon>\n                  </c8y-li>\n                  <ng-template #notFoundTemplate>\n                    @if (pattern.length > 0) {\n                      <c8y-li class=\"bg-level-2 p-8\">\n                        <span>No match found.</span>\n                      </c8y-li>\n                    }\n                  </ng-template>\n                </c8y-typeahead>\n              }\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Info' | translate\"\n                    [popover]=\"datapointOverviewPopoverTemplate\"\n                    placement=\"left\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  >\n                    <i\n                      class=\"text-info\"\n                      c8yIcon=\"info\"\n                    ></i>\n                  </button>\n                }\n              </div>\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template && hasUnlinkTemplateOption) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Unlink data point template' | translate\"\n                    tooltip=\"{{ 'Unlink data point template' | translate }}\"\n                    placement=\"left\"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    [adaptivePosition]=\"false\"\n                    (click)=\"unlinkDatapointTemplate()\"\n                  >\n                    <i c8yIcon=\"unlink\"></i>\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        }\n        <ng-template #datapointOverviewPopoverTemplate>\n          <c8y-datapoint-template-popover\n            [datapoint]=\"formGroup.value.details\"\n          ></c8y-datapoint-template-popover>\n        </ng-template>\n        @if (defaultFormOptions) {\n          <c8y-datapoint-attributes-form\n            [showTarget]=\"defaultFormOptions.showTarget\"\n            [showRange]=\"defaultFormOptions.showRange\"\n            [showYellowRange]=\"defaultFormOptions.showYellowRange\"\n            [showRedRange]=\"defaultFormOptions.showRedRange\"\n            [showChart]=\"defaultFormOptions.showChart\"\n            [showFormIfTemplateWasSelected]=\"defaultFormOptions.showFormIfTemplateWasSelected\"\n            [selectableChartRenderTypes]=\"defaultFormOptions.selectableChartRenderTypes\"\n            [selectableChartLineTypes]=\"defaultFormOptions.selectableChartLineTypes\"\n            [selectableAxisTypes]=\"defaultFormOptions.selectableAxisTypes\"\n            [showAdvancedChartOptions]=\"defaultFormOptions.showAdvancedChartOptions\"\n            [showErrorsImmediately]=\"true\"\n            formControlName=\"details\"\n          ></c8y-datapoint-attributes-form>\n        }\n      </div>\n    </c8y-li-collapse>\n  }\n</c8y-li>\n" }]
-        }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { defaultFormOptions: [{
+                        AsyncPipe,
+                        DatapointLabelPipe
+                    ], template: "<c8y-li\n  class=\"c8y-list__item__collapse--container-small\"\n  [formGroup]=\"formGroup\"\n  #li\n>\n  <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n  @if (showActiveToggle) {\n    <c8y-li-checkbox\n      class=\"a-s-center p-r-0\"\n      [displayAsSwitch]=\"true\"\n      formControlName=\"__active\"\n      (click)=\"$event.stopPropagation()\"\n    ></c8y-li-checkbox>\n  }\n\n  <div class=\"d-flex a-i-center\">\n    <div\n      class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-16\"\n      [title]=\"'Change color' | translate\"\n    >\n      <div class=\"c8y-colorpicker\">\n        <input\n          [attr.aria-label]=\"'Color' | translate\"\n          type=\"color\"\n          formControlName=\"color\"\n          (click)=\"$event.stopPropagation()\"\n        />\n        <span [style.background-color]=\"formGroup.value.color\"></span>\n      </div>\n    </div>\n    <button\n      class=\"btn-clean data-point-label text-truncate\"\n      [attr.aria-expanded]=\"!li.collapsed\"\n      type=\"button\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <span\n        class=\"text-truncate\"\n        [title]=\"formGroup.value.details?.label | datapointLabel\"\n      >\n        <c8y-highlight\n          [text]=\"formGroup.value.details?.label | datapointLabel\"\n          [pattern]=\"highlightText\"\n          [shouldTrimPattern]=\"true\"\n        ></c8y-highlight>\n      </span>\n      @if (formGroup.value.__target) {\n        <small class=\"text-truncate text-muted icon-flex\">\n          <i c8yIcon=\"exchange\"></i>\n          <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n        </small>\n      }\n    </button>\n\n    @if (!(isValid$ | async)) {\n      <button\n        class=\"btn btn-dot btn-dot--danger m-l-auto\"\n        [attr.aria-label]=\"'Invalid' | translate\"\n        [popover]=\"\n          errorMessage\n            ? errorMessage\n            : ('Some entries are invalid. Check the input fields with red borders.' | translate)\n        \"\n        placement=\"left\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    }\n    @if (addButtonType === AddButtonTypes.addRemove) {\n      <div class=\"m-l-auto a-s-center p-r-4\">\n        @if (isSelected) {\n          <button\n            class=\"btn btn-dot btn-dot--danger\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            [tooltip]=\"'Remove from selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n          >\n            <i\n              class=\"icon-20\"\n              c8yIcon=\"minus-circle\"\n            ></i>\n          </button>\n        }\n        @if (!isSelected) {\n          <button\n            class=\"btn btn-dot text-primary\"\n            [attr.aria-label]=\"'Add to selected data points' | translate\"\n            [tooltip]=\"'Add to selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            [disabled]=\"!(isValid$ | async)\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n          >\n            <i\n              class=\"text-primary icon-20\"\n              c8yIcon=\"plus-circle\"\n            ></i>\n          </button>\n        }\n      </div>\n    }\n    @if (addButtonType === AddButtonTypes.select) {\n      <button\n        class=\"btn btn-default btn-sm m-l-auto\"\n        [attr.aria-label]=\"'Select' | translate\"\n        [tooltip]=\"'Select data point' | translate\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"addOrRemoveItem()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n    }\n  </div>\n\n  @if (optionToRemove) {\n    <c8y-li-action\n      [icon]=\"'minus-circle'\"\n      [label]=\"'Remove from list' | translate\"\n      (click)=\"remove()\"\n    ></c8y-li-action>\n  }\n  @for (action of actions; track action) {\n    <c8y-li-action\n      [icon]=\"action.icon\"\n      [label]=\"action.label\"\n      (click)=\"action.callback(formGroup.value)\"\n    ></c8y-li-action>\n  }\n  @if (editable) {\n    <c8y-li-collapse>\n      <div class=\"data-point-details\">\n        <ul class=\"list-unstyled small m-b-16\">\n          <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Fragment\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.fragment }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.fragment\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n          <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Series\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.series }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.series\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n        </ul>\n        @if (datapointLibraryEntries && datapointLibraryEntries | async; as libraryEntries) {\n          <div class=\"form-group form-group-sm\">\n            <label>\n              {{ 'Data point template' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"datapointHintPopoverTemplate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n              ></button>\n            </label>\n\n            <ng-template #datapointHintPopoverTemplate>\n              {{\n                'Using a data point template sets color, label, unit and ranges. Removing the template allows you to set the values manually.'\n                  | translate\n              }}\n            </ng-template>\n            <div class=\"input-group input-group-sm\">\n              @if (datapointLibraryEntries) {\n                <c8y-typeahead\n                  class=\"flex-grow\"\n                  [placeholder]=\"'No template' | translate\"\n                  [ngModel]=\"templateForTypeahead\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (onSearch)=\"setPipe($event)\"\n                  [displayProperty]=\"'translatedLabel'\"\n                  [hideNew]=\"true\"\n                  [disabled]=\"isSelected && disableTypeaheadIfSelected\"\n                >\n                  <c8y-li\n                    class=\"p-l-8 p-r-8 c8y-list__item--link interact\"\n                    *c8yFor=\"\n                      let item of datapointLibraryEntries;\n                      loadMore: 'auto';\n                      pipe: filterPipe;\n                      notFound: notFoundTemplate\n                    \"\n                    (click)=\"dataPointTemplateSelected(item)\"\n                    [active]=\"formGroup.value.__template === item.id\"\n                    [attr.role]=\"'menuitem'\"\n                  >\n                    <c8y-highlight\n                      [text]=\"item.c8y_Kpi | datapointLabel\"\n                      [pattern]=\"pattern\"\n                    ></c8y-highlight>\n                    <c8y-li-icon\n                      icon=\"circle\"\n                      [style.color]=\"item.c8y_Kpi?.color\"\n                    ></c8y-li-icon>\n                  </c8y-li>\n                  <ng-template #notFoundTemplate>\n                    @if (pattern.length > 0) {\n                      <c8y-li class=\"bg-level-2 p-8\">\n                        <span>No match found.</span>\n                      </c8y-li>\n                    }\n                  </ng-template>\n                </c8y-typeahead>\n              }\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Info' | translate\"\n                    [popover]=\"datapointOverviewPopoverTemplate\"\n                    placement=\"left\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  >\n                    <i\n                      class=\"text-info\"\n                      c8yIcon=\"info\"\n                    ></i>\n                  </button>\n                }\n              </div>\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template && hasUnlinkTemplateOption) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Unlink data point template' | translate\"\n                    tooltip=\"{{ 'Unlink data point template' | translate }}\"\n                    placement=\"left\"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    [adaptivePosition]=\"false\"\n                    (click)=\"unlinkDatapointTemplate()\"\n                  >\n                    <i c8yIcon=\"unlink\"></i>\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        }\n        <ng-template #datapointOverviewPopoverTemplate>\n          <c8y-datapoint-template-popover\n            [datapoint]=\"formGroup.value.details\"\n          ></c8y-datapoint-template-popover>\n        </ng-template>\n        @if (defaultFormOptions) {\n          <c8y-datapoint-attributes-form\n            [showTarget]=\"defaultFormOptions.showTarget\"\n            [showRange]=\"defaultFormOptions.showRange\"\n            [showYellowRange]=\"defaultFormOptions.showYellowRange\"\n            [showRedRange]=\"defaultFormOptions.showRedRange\"\n            [showChart]=\"defaultFormOptions.showChart\"\n            [showFormIfTemplateWasSelected]=\"defaultFormOptions.showFormIfTemplateWasSelected\"\n            [selectableChartRenderTypes]=\"defaultFormOptions.selectableChartRenderTypes\"\n            [selectableChartLineTypes]=\"defaultFormOptions.selectableChartLineTypes\"\n            [selectableAxisTypes]=\"defaultFormOptions.selectableAxisTypes\"\n            [showAdvancedChartOptions]=\"defaultFormOptions.showAdvancedChartOptions\"\n            [showErrorsImmediately]=\"true\"\n            formControlName=\"details\"\n          ></c8y-datapoint-attributes-form>\n        }\n      </div>\n    </c8y-li-collapse>\n  }\n</c8y-li>\n" }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: i2$2.TranslateService }], propDecorators: { defaultFormOptions: [{
                 type: Input
             }], isSelected: [{
                 type: Input
@@ -902,33 +952,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             args: [{ name: 'includesDatapoint' }]
         }] });
-class DatapointLabelPipe {
-    transform(datapoint, options = { includeDevice: false, doNotUseLabel: false }) {
-        let label = '';
-        try {
-            if (!options?.doNotUseLabel && datapoint.label) {
-                label = datapoint.label;
-            }
-            else {
-                label = `${datapoint.fragment} → ${datapoint.series}`;
-            }
-            if (options?.includeDevice && (datapoint.__target?.name || datapoint.__target?.id)) {
-                label += ` (${datapoint.__target?.name || datapoint.__target?.id})`;
-            }
-        }
-        catch (e) {
-            // nothing to do
-        }
-        return label;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: DatapointLabelPipe, isStandalone: true, name: "datapointLabel" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointLabelPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'datapointLabel' }]
-        }] });
 class DatapointSelectorComponent {
     constructor(datapointService) {
         this.datapointService = datapointService;
@@ -1428,6 +1451,7 @@ class DatapointSelectorModule {
             DatapointTemplatePopoverComponent,
             IncludesDatapointPipe,
             DatapointLabelPipe,
+            DatapointDescriptionPipe,
             FilterDatapointsPipe,
             DatapointAttributesFormComponent], exports: [DatapointSelectorComponent,
             DatapointSelectorModalComponent,
@@ -1436,6 +1460,7 @@ class DatapointSelectorModule {
             DatapointTemplatePopoverComponent,
             IncludesDatapointPipe,
             DatapointLabelPipe,
+            DatapointDescriptionPipe,
             DatapointAttributesFormComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointSelectorModule, imports: [AssetSelectorModule,
             CollapseModule,
@@ -1470,6 +1495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         DatapointTemplatePopoverComponent,
                         IncludesDatapointPipe,
                         DatapointLabelPipe,
+                        DatapointDescriptionPipe,
                         FilterDatapointsPipe,
                         DatapointAttributesFormComponent
                     ],
@@ -1481,6 +1507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         DatapointTemplatePopoverComponent,
                         IncludesDatapointPipe,
                         DatapointLabelPipe,
+                        DatapointDescriptionPipe,
                         DatapointAttributesFormComponent
                     ]
                 }]