@c8y/ngx-components 1021.22.77 → 1021.22.81

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.
@@ -1012,7 +1012,7 @@ class DatapointSelectorComponent {
1012
1012
  multi: true,
1013
1013
  useExisting: forwardRef(() => DatapointSelectorComponent)
1014
1014
  }
1015
- ], 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]=\"'No data points to display.' | 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 class=\"text-medium text-truncate\" [title]=\"'Available data points' | translate\">\n {{ 'Available data points' | 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]=\"'No data points to display.' | 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 (added)=\"datapointAdded($event)\"\n (removed)=\"datapointRemoved($event)\"\n [highlightText]=\"searchStringChanges$ | async\"\n *ngFor=\"let dp of filteredDatapoints; trackBy: trackByFn\"\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\n class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n [title]=\"'Selected data points' | translate\"\n translate\n >\n Selected data points\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 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]=\"'No data points selected.' | 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", "showAddRemoveButton", "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" }] }); }
1015
+ ], 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]=\"'No data points to display.' | 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 class=\"text-medium text-truncate\" [title]=\"'Available data points' | translate\">\n {{ 'Available data points' | 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]=\"'No data points to display.' | 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 (added)=\"datapointAdded($event)\"\n (removed)=\"datapointRemoved($event)\"\n [highlightText]=\"searchStringChanges$ | async\"\n *ngFor=\"let dp of filteredDatapoints; trackBy: trackByFn\"\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\n class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n [title]=\"'Selected data points' | translate\"\n translate\n >\n Selected data points\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]=\"'No data points selected.' | 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", "showAddRemoveButton", "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" }] }); }
1016
1016
  }
1017
1017
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointSelectorComponent, decorators: [{
1018
1018
  type: Component,
@@ -1022,7 +1022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
1022
1022
  multi: true,
1023
1023
  useExisting: forwardRef(() => DatapointSelectorComponent)
1024
1024
  }
1025
- ], 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]=\"'No data points to display.' | 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 class=\"text-medium text-truncate\" [title]=\"'Available data points' | translate\">\n {{ 'Available data points' | 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]=\"'No data points to display.' | 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 (added)=\"datapointAdded($event)\"\n (removed)=\"datapointRemoved($event)\"\n [highlightText]=\"searchStringChanges$ | async\"\n *ngFor=\"let dp of filteredDatapoints; trackBy: trackByFn\"\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\n class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n [title]=\"'Selected data points' | translate\"\n translate\n >\n Selected data points\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 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]=\"'No data points selected.' | 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" }]
1025
+ ], 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]=\"'No data points to display.' | 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 class=\"text-medium text-truncate\" [title]=\"'Available data points' | translate\">\n {{ 'Available data points' | 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]=\"'No data points to display.' | 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 (added)=\"datapointAdded($event)\"\n (removed)=\"datapointRemoved($event)\"\n [highlightText]=\"searchStringChanges$ | async\"\n *ngFor=\"let dp of filteredDatapoints; trackBy: trackByFn\"\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\n class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n [title]=\"'Selected data points' | translate\"\n translate\n >\n Selected data points\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]=\"'No data points selected.' | 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" }]
1026
1026
  }], ctorParameters: () => [{ type: DatapointLibraryService }], propDecorators: { contextAsset: [{
1027
1027
  type: Input
1028
1028
  }], allowChangingContext: [{