@c8y/ngx-components 1021.73.3 → 1021.73.6

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 (34) hide show
  1. package/branding/shared/lazy/branding/branding.component.d.ts.map +1 -1
  2. package/core/beta-feature/beta-preview.service.d.ts +1 -1
  3. package/core/beta-feature/beta-preview.service.d.ts.map +1 -1
  4. package/esm2022/branding/shared/lazy/branding/branding.component.mjs +4 -5
  5. package/esm2022/core/beta-feature/beta-preview.service.mjs +10 -6
  6. package/esm2022/datapoint-explorer/view/datapoint-explorer.component.mjs +3 -3
  7. package/esm2022/datapoint-selector/datapoint-selector.component.mjs +3 -3
  8. package/esm2022/ecosystem/packages/package-versions/packages-versions.component.mjs +3 -3
  9. package/esm2022/widgets/implementations/datapoints-graph/datapoints-graph-config/datapoints-graph-widget-config.component.mjs +3 -3
  10. package/esm2022/widgets/implementations/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.mjs +3 -3
  11. package/fesm2022/c8y-ngx-components-branding-shared-lazy.mjs +3 -4
  12. package/fesm2022/c8y-ngx-components-branding-shared-lazy.mjs.map +1 -1
  13. package/fesm2022/c8y-ngx-components-datapoint-explorer-view.mjs +2 -2
  14. package/fesm2022/c8y-ngx-components-datapoint-explorer-view.mjs.map +1 -1
  15. package/fesm2022/c8y-ngx-components-datapoint-selector.mjs +2 -2
  16. package/fesm2022/c8y-ngx-components-datapoint-selector.mjs.map +1 -1
  17. package/fesm2022/c8y-ngx-components-ecosystem.mjs +2 -2
  18. package/fesm2022/c8y-ngx-components-ecosystem.mjs.map +1 -1
  19. package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs +4 -4
  20. package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs.map +1 -1
  21. package/fesm2022/c8y-ngx-components.mjs +9 -5
  22. package/fesm2022/c8y-ngx-components.mjs.map +1 -1
  23. package/locales/de.po +314 -41
  24. package/locales/es.po +315 -42
  25. package/locales/fr.po +315 -42
  26. package/locales/ja_JP.po +308 -47
  27. package/locales/ko.po +314 -42
  28. package/locales/locales.pot +5 -27
  29. package/locales/nl.po +312 -40
  30. package/locales/pl.po +315 -42
  31. package/locales/pt_BR.po +312 -39
  32. package/locales/zh_CN.po +312 -40
  33. package/locales/zh_TW.po +313 -42
  34. package/package.json +1 -1
@@ -1035,7 +1035,7 @@ class DatapointSelectorComponent {
1035
1035
  multi: true,
1036
1036
  useExisting: forwardRef(() => DatapointSelectorComponent)
1037
1037
  }
1038
- ], ngImport: i0, template: "<div\n class=\"d-grid grid__row--1 fit-h\"\n [ngClass]=\"{\n 'grid__col--3-6-3--md': allowChangingContext && !hideSelection,\n 'grid__col--8-4--md': !allowChangingContext && !hideSelection,\n 'grid__col--4-8--md': allowChangingContext && hideSelection\n }\"\n>\n <div class=\"d-flex d-col p-relative bg-level-1\" *ngIf=\"allowChangingContext\">\n <c8y-asset-selector-miller\n class=\"d-contents\"\n [(ngModel)]=\"contextAsset\"\n [asset]=\"contextAsset\"\n (onSelected)=\"selectionChanged($event)\"\n [container]=\"''\"\n [config]=\"{\n view: 'miller',\n groupsSelectable: true,\n columnHeaders: true,\n showChildDevices: true,\n showUnassignedDevices: true,\n singleColumn: true,\n search: allowSearch,\n showFilter: true\n }\"\n ></c8y-asset-selector-miller>\n </div>\n <!-- center column -->\n <div class=\"inner-scroll bg-component\">\n <ng-template #noDeviceEmptyState>\n <div class=\"p-16\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"emptyStateTitle | translate\"\n [subtitle]=\"'Select an asset from the list.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n </ng-template>\n <ng-template #loadingData>\n <div class=\"p-16 text-center\">\n <c8y-loading></c8y-loading>\n </div>\n </ng-template>\n <div class=\"bg-inherit\" *ngIf=\"assetSelection | async as asset; else noDeviceEmptyState\">\n <div class=\"p-l-16 p-r-16 p-t-8 p-b-8 sticky-top bg-inherit separator-bottom\">\n <p\n class=\"text-medium text-truncate\"\n [title]=\"selectorTitle | translate\"\n >\n {{ selectorTitle | translate }}\n </p>\n <div class=\"input-group input-group-search m-t-4\" id=\"search\" *ngIf=\"!loadingDatapoints\">\n <input\n class=\"form-control\"\n type=\"search\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"searchString\"\n (ngModelChange)=\"searchStringChanged($event)\"\n />\n <span class=\"input-group-addon\">\n <i c8yIcon=\"search\" *ngIf=\"!searchString; else clearSearchString\"></i>\n <ng-template #clearSearchString>\n <i class=\"text-muted\" c8yIcon=\"times\" (click)=\"searchStringChanged()\"></i>\n </ng-template>\n </span>\n </div>\n </div>\n <ng-container *ngIf=\"filteredDatapoints$ | async as filteredDatapoints; else loadingData\">\n <ng-container *ngIf=\"!loadingDatapoints; else loadingData\">\n <ng-container *ngIf=\"datapoints$ | async as datapoints\">\n <div class=\"p-16\" *ngIf=\"!filteredDatapoints.length\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"emptyStateTitle | translate\"\n [subtitle]=\"\n datapoints.length\n ? (emptyStateSubtitleWhenNoMatchingDataPoints | translate)\n : (emptyStateSubtitleWhenNoDataPointsInAsset | translate)\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n\n <c8y-list-group>\n <c8y-list-item\n class=\"sticky-top\"\n style=\"top: 72px\"\n *ngIf=\"\n datapoints.length > maxNumberOfDatapoints &&\n filteredDatapoints.length >= maxNumberOfDatapoints\n \"\n >\n <div class=\"alert alert-warning m-b-0\">\n {{\n 'Due to the large number, only a subset of data points is displayed. Use search to narrow down the number of results.'\n | translate\n }}\n </div>\n </c8y-list-item>\n <c8y-datapoint-selector-list-item\n class=\"d-contents\"\n [ngModel]=\"dp\"\n [isSelected]=\"selectedDatapoints | includesDatapoint: dp\"\n [datapointLibraryEntries]=\"datapointLibraryEntries\"\n [disableTypeaheadIfSelected]=\"true\"\n [addButtonType]=\"hideSelection ? AddButtonTypes.select : AddButtonTypes.addRemove\"\n (added)=\"datapointAdded($event)\"\n (removed)=\"datapointRemoved($event)\"\n [highlightText]=\"searchStringChanges$ | async\"\n *ngFor=\"let dp of filteredDatapoints; trackBy: trackByFn\"\n [editable]=\"itemsEditable\"\n ></c8y-datapoint-selector-list-item>\n </c8y-list-group>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <!-- last column -->\n <div class=\"inner-scroll bg-level-1\" *ngIf=\"!hideSelection\">\n <p class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n [title]=\"selectedListTitle | translate\" translate>{{ selectedListTitle }}</p>\n <div\n class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\"\n *ngIf=\"selectedDatapoints?.length\"\n >\n <div class=\"c8y-datapoint-pill\" *ngFor=\"let selectedDp of selectedDatapoints\">\n <button\n class=\"c8y-datapoint-pill__btn\"\n type=\"button\"\n [title]=\"'Remove' | translate\"\n (click)=\"datapointRemoved(selectedDp)\"\n >\n <i class=\"icon-14\" c8yIcon=\"remove\"></i>\n </button>\n <div\n class=\"c8y-datapoint-pill__label\"\n [title]=\"selectedDp | datapointLabel: { doNotUseLabel: true, includeDevice: true }\"\n >\n <i class=\"m-r-4 icon-14\" c8yIcon=\"circle\" [style.color]=\"selectedDp.color\"></i>\n <span class=\"text-truncate\">\n <span class=\"text-truncate\">{{ selectedDp | datapointLabel }}</span>\n <small class=\"text-muted text-10\" *ngIf=\"selectedDp?.__target?.name\">\n {{ selectedDp?.__target?.name }}\n </small>\n </span>\n </div>\n </div>\n </div>\n <div class=\"p-r-8\" *ngIf=\"!selectedDatapoints || !selectedDatapoints.length\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"emptyStateTitle | translate\"\n [subtitle]=\"\n 'Select the asset, then on the available data points list, click on the plus button on the desired data point.'\n | translate\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: i2$1.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: DatapointSelectorListItemComponent, selector: "c8y-datapoint-selector-list-item", inputs: ["defaultFormOptions", "isSelected", "isCollapsed", "addButtonType", "editable", "showActiveToggle", "activeToggleDisabled", "showOptions", "datapointLibraryEntries", "actions", "optionToRemove", "hasUnlinkTemplateOption", "colorPickerDisabled", "disableTypeaheadIfSelected", "highlightText"], outputs: ["added", "removed"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: IncludesDatapointPipe, name: "includesDatapoint" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }] }); }
1038
+ ], ngImport: i0, template: "<div\n class=\"d-grid grid__row--1 fit-h\"\n [ngClass]=\"{\n 'grid__col--3-6-3--md': allowChangingContext && !hideSelection,\n 'grid__col--8-4--md': !allowChangingContext && !hideSelection,\n 'grid__col--4-8--md': allowChangingContext && hideSelection\n }\"\n>\n <div\n class=\"d-flex d-col p-relative bg-level-1\"\n *ngIf=\"allowChangingContext\"\n >\n <c8y-asset-selector-miller\n class=\"d-contents\"\n [(ngModel)]=\"contextAsset\"\n [asset]=\"contextAsset\"\n (onSelected)=\"selectionChanged($event)\"\n [container]=\"''\"\n [config]=\"{\n view: 'miller',\n groupsSelectable: true,\n columnHeaders: true,\n showChildDevices: true,\n showUnassignedDevices: true,\n singleColumn: true,\n search: allowSearch,\n showFilter: true\n }\"\n ></c8y-asset-selector-miller>\n </div>\n <!-- center column -->\n <div class=\"inner-scroll bg-component\">\n <ng-template #noDeviceEmptyState>\n <div class=\"p-16\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"emptyStateTitle | translate\"\n [subtitle]=\"'Select an asset from the list.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n </ng-template>\n <ng-template #loadingData>\n <div class=\"p-16 text-center\">\n <c8y-loading></c8y-loading>\n </div>\n </ng-template>\n <div\n class=\"bg-inherit\"\n *ngIf=\"assetSelection | async as asset; else noDeviceEmptyState\"\n >\n <div class=\"p-l-16 p-r-16 p-t-8 p-b-8 sticky-top bg-inherit separator-bottom\">\n <p\n class=\"text-medium text-truncate\"\n [title]=\"selectorTitle | translate\"\n >\n {{ selectorTitle | translate }}\n </p>\n <div\n class=\"input-group input-group-search m-t-4\"\n id=\"search\"\n *ngIf=\"!loadingDatapoints\"\n >\n <input\n class=\"form-control\"\n placeholder=\"Search\u2026\"\n type=\"search\"\n [ngModel]=\"searchString\"\n (ngModelChange)=\"searchStringChanged($event)\"\n />\n <span class=\"input-group-addon\">\n <i\n c8yIcon=\"search\"\n *ngIf=\"!searchString; else clearSearchString\"\n ></i>\n <ng-template #clearSearchString>\n <i\n class=\"text-muted\"\n c8yIcon=\"times\"\n (click)=\"searchStringChanged()\"\n ></i>\n </ng-template>\n </span>\n </div>\n </div>\n <ng-container *ngIf=\"filteredDatapoints$ | async as filteredDatapoints; else loadingData\">\n <ng-container *ngIf=\"!loadingDatapoints; else loadingData\">\n <ng-container *ngIf=\"datapoints$ | async as datapoints\">\n <div\n class=\"p-16\"\n *ngIf=\"!filteredDatapoints.length\"\n >\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"emptyStateTitle | translate\"\n [subtitle]=\"\n datapoints.length\n ? (emptyStateSubtitleWhenNoMatchingDataPoints | translate)\n : (emptyStateSubtitleWhenNoDataPointsInAsset | translate)\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n\n <c8y-list-group>\n <c8y-list-item\n class=\"sticky-top\"\n style=\"top: 72px\"\n *ngIf=\"\n datapoints.length > maxNumberOfDatapoints &&\n filteredDatapoints.length >= maxNumberOfDatapoints\n \"\n >\n <div class=\"alert alert-warning m-b-0\">\n {{\n 'Due to the large number, only a subset of data points is displayed. Use search to narrow down the number of results.'\n | translate\n }}\n </div>\n </c8y-list-item>\n <c8y-datapoint-selector-list-item\n class=\"d-contents\"\n [ngModel]=\"dp\"\n [isSelected]=\"selectedDatapoints | includesDatapoint: dp\"\n [datapointLibraryEntries]=\"datapointLibraryEntries\"\n [disableTypeaheadIfSelected]=\"true\"\n [addButtonType]=\"hideSelection ? AddButtonTypes.select : AddButtonTypes.addRemove\"\n (added)=\"datapointAdded($event)\"\n (removed)=\"datapointRemoved($event)\"\n [highlightText]=\"searchStringChanges$ | async\"\n *ngFor=\"let dp of filteredDatapoints; trackBy: trackByFn\"\n [editable]=\"itemsEditable\"\n ></c8y-datapoint-selector-list-item>\n </c8y-list-group>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <!-- last column -->\n <div\n class=\"inner-scroll bg-level-1\"\n *ngIf=\"!hideSelection\"\n >\n <p\n class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n [title]=\"selectedListTitle | translate\"\n >\n {{ selectedListTitle | translate }}\n </p>\n <div\n class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\"\n *ngIf=\"selectedDatapoints?.length\"\n >\n <div\n class=\"c8y-datapoint-pill\"\n *ngFor=\"let selectedDp of selectedDatapoints\"\n >\n <button\n class=\"c8y-datapoint-pill__btn\"\n [title]=\"'Remove' | translate\"\n type=\"button\"\n (click)=\"datapointRemoved(selectedDp)\"\n >\n <i\n class=\"icon-14\"\n c8yIcon=\"remove\"\n ></i>\n </button>\n <div\n class=\"c8y-datapoint-pill__label\"\n [title]=\"selectedDp | datapointLabel: { doNotUseLabel: true, includeDevice: true }\"\n >\n <i\n class=\"m-r-4 icon-14\"\n c8yIcon=\"circle\"\n [style.color]=\"selectedDp.color\"\n ></i>\n <span class=\"text-truncate\">\n <span class=\"text-truncate\">{{ selectedDp | datapointLabel }}</span>\n <small\n class=\"text-muted text-10\"\n *ngIf=\"selectedDp?.__target?.name\"\n >\n {{ selectedDp?.__target?.name }}\n </small>\n </span>\n </div>\n </div>\n </div>\n <div\n class=\"p-r-8\"\n *ngIf=\"!selectedDatapoints || !selectedDatapoints.length\"\n >\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"emptyStateTitle | translate\"\n [subtitle]=\"\n 'Select the asset, then on the available data points list, click on the plus button on the desired data point.'\n | translate\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: i2$1.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: DatapointSelectorListItemComponent, selector: "c8y-datapoint-selector-list-item", inputs: ["defaultFormOptions", "isSelected", "isCollapsed", "addButtonType", "editable", "showActiveToggle", "activeToggleDisabled", "showOptions", "datapointLibraryEntries", "actions", "optionToRemove", "hasUnlinkTemplateOption", "colorPickerDisabled", "disableTypeaheadIfSelected", "highlightText"], outputs: ["added", "removed"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: IncludesDatapointPipe, name: "includesDatapoint" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }] }); }
1039
1039
  }
1040
1040
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointSelectorComponent, decorators: [{
1041
1041
  type: Component,
@@ -1045,7 +1045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1045
1045
  multi: true,
1046
1046
  useExisting: forwardRef(() => DatapointSelectorComponent)
1047
1047
  }
1048
- ], template: "<div\n class=\"d-grid grid__row--1 fit-h\"\n [ngClass]=\"{\n 'grid__col--3-6-3--md': allowChangingContext && !hideSelection,\n 'grid__col--8-4--md': !allowChangingContext && !hideSelection,\n 'grid__col--4-8--md': allowChangingContext && hideSelection\n }\"\n>\n <div class=\"d-flex d-col p-relative bg-level-1\" *ngIf=\"allowChangingContext\">\n <c8y-asset-selector-miller\n class=\"d-contents\"\n [(ngModel)]=\"contextAsset\"\n [asset]=\"contextAsset\"\n (onSelected)=\"selectionChanged($event)\"\n [container]=\"''\"\n [config]=\"{\n view: 'miller',\n groupsSelectable: true,\n columnHeaders: true,\n showChildDevices: true,\n showUnassignedDevices: true,\n singleColumn: true,\n search: allowSearch,\n showFilter: true\n }\"\n ></c8y-asset-selector-miller>\n </div>\n <!-- center column -->\n <div class=\"inner-scroll bg-component\">\n <ng-template #noDeviceEmptyState>\n <div class=\"p-16\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"emptyStateTitle | translate\"\n [subtitle]=\"'Select an asset from the list.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n </ng-template>\n <ng-template #loadingData>\n <div class=\"p-16 text-center\">\n <c8y-loading></c8y-loading>\n </div>\n </ng-template>\n <div class=\"bg-inherit\" *ngIf=\"assetSelection | async as asset; else noDeviceEmptyState\">\n <div class=\"p-l-16 p-r-16 p-t-8 p-b-8 sticky-top bg-inherit separator-bottom\">\n <p\n class=\"text-medium text-truncate\"\n [title]=\"selectorTitle | translate\"\n >\n {{ selectorTitle | translate }}\n </p>\n <div class=\"input-group input-group-search m-t-4\" id=\"search\" *ngIf=\"!loadingDatapoints\">\n <input\n class=\"form-control\"\n type=\"search\"\n placeholder=\"Search\u2026\"\n [ngModel]=\"searchString\"\n (ngModelChange)=\"searchStringChanged($event)\"\n />\n <span class=\"input-group-addon\">\n <i c8yIcon=\"search\" *ngIf=\"!searchString; else clearSearchString\"></i>\n <ng-template #clearSearchString>\n <i class=\"text-muted\" c8yIcon=\"times\" (click)=\"searchStringChanged()\"></i>\n </ng-template>\n </span>\n </div>\n </div>\n <ng-container *ngIf=\"filteredDatapoints$ | async as filteredDatapoints; else loadingData\">\n <ng-container *ngIf=\"!loadingDatapoints; else loadingData\">\n <ng-container *ngIf=\"datapoints$ | async as datapoints\">\n <div class=\"p-16\" *ngIf=\"!filteredDatapoints.length\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"emptyStateTitle | translate\"\n [subtitle]=\"\n datapoints.length\n ? (emptyStateSubtitleWhenNoMatchingDataPoints | translate)\n : (emptyStateSubtitleWhenNoDataPointsInAsset | translate)\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n\n <c8y-list-group>\n <c8y-list-item\n class=\"sticky-top\"\n style=\"top: 72px\"\n *ngIf=\"\n datapoints.length > maxNumberOfDatapoints &&\n filteredDatapoints.length >= maxNumberOfDatapoints\n \"\n >\n <div class=\"alert alert-warning m-b-0\">\n {{\n 'Due to the large number, only a subset of data points is displayed. Use search to narrow down the number of results.'\n | translate\n }}\n </div>\n </c8y-list-item>\n <c8y-datapoint-selector-list-item\n class=\"d-contents\"\n [ngModel]=\"dp\"\n [isSelected]=\"selectedDatapoints | includesDatapoint: dp\"\n [datapointLibraryEntries]=\"datapointLibraryEntries\"\n [disableTypeaheadIfSelected]=\"true\"\n [addButtonType]=\"hideSelection ? AddButtonTypes.select : AddButtonTypes.addRemove\"\n (added)=\"datapointAdded($event)\"\n (removed)=\"datapointRemoved($event)\"\n [highlightText]=\"searchStringChanges$ | async\"\n *ngFor=\"let dp of filteredDatapoints; trackBy: trackByFn\"\n [editable]=\"itemsEditable\"\n ></c8y-datapoint-selector-list-item>\n </c8y-list-group>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <!-- last column -->\n <div class=\"inner-scroll bg-level-1\" *ngIf=\"!hideSelection\">\n <p class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n [title]=\"selectedListTitle | translate\" translate>{{ selectedListTitle }}</p>\n <div\n class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\"\n *ngIf=\"selectedDatapoints?.length\"\n >\n <div class=\"c8y-datapoint-pill\" *ngFor=\"let selectedDp of selectedDatapoints\">\n <button\n class=\"c8y-datapoint-pill__btn\"\n type=\"button\"\n [title]=\"'Remove' | translate\"\n (click)=\"datapointRemoved(selectedDp)\"\n >\n <i class=\"icon-14\" c8yIcon=\"remove\"></i>\n </button>\n <div\n class=\"c8y-datapoint-pill__label\"\n [title]=\"selectedDp | datapointLabel: { doNotUseLabel: true, includeDevice: true }\"\n >\n <i class=\"m-r-4 icon-14\" c8yIcon=\"circle\" [style.color]=\"selectedDp.color\"></i>\n <span class=\"text-truncate\">\n <span class=\"text-truncate\">{{ selectedDp | datapointLabel }}</span>\n <small class=\"text-muted text-10\" *ngIf=\"selectedDp?.__target?.name\">\n {{ selectedDp?.__target?.name }}\n </small>\n </span>\n </div>\n </div>\n </div>\n <div class=\"p-r-8\" *ngIf=\"!selectedDatapoints || !selectedDatapoints.length\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"emptyStateTitle | translate\"\n [subtitle]=\"\n 'Select the asset, then on the available data points list, click on the plus button on the desired data point.'\n | translate\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n </div>\n</div>\n" }]
1048
+ ], template: "<div\n class=\"d-grid grid__row--1 fit-h\"\n [ngClass]=\"{\n 'grid__col--3-6-3--md': allowChangingContext && !hideSelection,\n 'grid__col--8-4--md': !allowChangingContext && !hideSelection,\n 'grid__col--4-8--md': allowChangingContext && hideSelection\n }\"\n>\n <div\n class=\"d-flex d-col p-relative bg-level-1\"\n *ngIf=\"allowChangingContext\"\n >\n <c8y-asset-selector-miller\n class=\"d-contents\"\n [(ngModel)]=\"contextAsset\"\n [asset]=\"contextAsset\"\n (onSelected)=\"selectionChanged($event)\"\n [container]=\"''\"\n [config]=\"{\n view: 'miller',\n groupsSelectable: true,\n columnHeaders: true,\n showChildDevices: true,\n showUnassignedDevices: true,\n singleColumn: true,\n search: allowSearch,\n showFilter: true\n }\"\n ></c8y-asset-selector-miller>\n </div>\n <!-- center column -->\n <div class=\"inner-scroll bg-component\">\n <ng-template #noDeviceEmptyState>\n <div class=\"p-16\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"emptyStateTitle | translate\"\n [subtitle]=\"'Select an asset from the list.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n </ng-template>\n <ng-template #loadingData>\n <div class=\"p-16 text-center\">\n <c8y-loading></c8y-loading>\n </div>\n </ng-template>\n <div\n class=\"bg-inherit\"\n *ngIf=\"assetSelection | async as asset; else noDeviceEmptyState\"\n >\n <div class=\"p-l-16 p-r-16 p-t-8 p-b-8 sticky-top bg-inherit separator-bottom\">\n <p\n class=\"text-medium text-truncate\"\n [title]=\"selectorTitle | translate\"\n >\n {{ selectorTitle | translate }}\n </p>\n <div\n class=\"input-group input-group-search m-t-4\"\n id=\"search\"\n *ngIf=\"!loadingDatapoints\"\n >\n <input\n class=\"form-control\"\n placeholder=\"Search\u2026\"\n type=\"search\"\n [ngModel]=\"searchString\"\n (ngModelChange)=\"searchStringChanged($event)\"\n />\n <span class=\"input-group-addon\">\n <i\n c8yIcon=\"search\"\n *ngIf=\"!searchString; else clearSearchString\"\n ></i>\n <ng-template #clearSearchString>\n <i\n class=\"text-muted\"\n c8yIcon=\"times\"\n (click)=\"searchStringChanged()\"\n ></i>\n </ng-template>\n </span>\n </div>\n </div>\n <ng-container *ngIf=\"filteredDatapoints$ | async as filteredDatapoints; else loadingData\">\n <ng-container *ngIf=\"!loadingDatapoints; else loadingData\">\n <ng-container *ngIf=\"datapoints$ | async as datapoints\">\n <div\n class=\"p-16\"\n *ngIf=\"!filteredDatapoints.length\"\n >\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"emptyStateTitle | translate\"\n [subtitle]=\"\n datapoints.length\n ? (emptyStateSubtitleWhenNoMatchingDataPoints | translate)\n : (emptyStateSubtitleWhenNoDataPointsInAsset | translate)\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n\n <c8y-list-group>\n <c8y-list-item\n class=\"sticky-top\"\n style=\"top: 72px\"\n *ngIf=\"\n datapoints.length > maxNumberOfDatapoints &&\n filteredDatapoints.length >= maxNumberOfDatapoints\n \"\n >\n <div class=\"alert alert-warning m-b-0\">\n {{\n 'Due to the large number, only a subset of data points is displayed. Use search to narrow down the number of results.'\n | translate\n }}\n </div>\n </c8y-list-item>\n <c8y-datapoint-selector-list-item\n class=\"d-contents\"\n [ngModel]=\"dp\"\n [isSelected]=\"selectedDatapoints | includesDatapoint: dp\"\n [datapointLibraryEntries]=\"datapointLibraryEntries\"\n [disableTypeaheadIfSelected]=\"true\"\n [addButtonType]=\"hideSelection ? AddButtonTypes.select : AddButtonTypes.addRemove\"\n (added)=\"datapointAdded($event)\"\n (removed)=\"datapointRemoved($event)\"\n [highlightText]=\"searchStringChanges$ | async\"\n *ngFor=\"let dp of filteredDatapoints; trackBy: trackByFn\"\n [editable]=\"itemsEditable\"\n ></c8y-datapoint-selector-list-item>\n </c8y-list-group>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <!-- last column -->\n <div\n class=\"inner-scroll bg-level-1\"\n *ngIf=\"!hideSelection\"\n >\n <p\n class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n [title]=\"selectedListTitle | translate\"\n >\n {{ selectedListTitle | translate }}\n </p>\n <div\n class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\"\n *ngIf=\"selectedDatapoints?.length\"\n >\n <div\n class=\"c8y-datapoint-pill\"\n *ngFor=\"let selectedDp of selectedDatapoints\"\n >\n <button\n class=\"c8y-datapoint-pill__btn\"\n [title]=\"'Remove' | translate\"\n type=\"button\"\n (click)=\"datapointRemoved(selectedDp)\"\n >\n <i\n class=\"icon-14\"\n c8yIcon=\"remove\"\n ></i>\n </button>\n <div\n class=\"c8y-datapoint-pill__label\"\n [title]=\"selectedDp | datapointLabel: { doNotUseLabel: true, includeDevice: true }\"\n >\n <i\n class=\"m-r-4 icon-14\"\n c8yIcon=\"circle\"\n [style.color]=\"selectedDp.color\"\n ></i>\n <span class=\"text-truncate\">\n <span class=\"text-truncate\">{{ selectedDp | datapointLabel }}</span>\n <small\n class=\"text-muted text-10\"\n *ngIf=\"selectedDp?.__target?.name\"\n >\n {{ selectedDp?.__target?.name }}\n </small>\n </span>\n </div>\n </div>\n </div>\n <div\n class=\"p-r-8\"\n *ngIf=\"!selectedDatapoints || !selectedDatapoints.length\"\n >\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"emptyStateTitle | translate\"\n [subtitle]=\"\n 'Select the asset, then on the available data points list, click on the plus button on the desired data point.'\n | translate\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n </div>\n</div>\n" }]
1049
1049
  }], ctorParameters: () => [{ type: DatapointLibraryService }], propDecorators: { contextAsset: [{
1050
1050
  type: Input
1051
1051
  }], allowChangingContext: [{