@c8y/ngx-components 1018.0.29 → 1018.0.30

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.
@@ -840,6 +840,7 @@ class DatapointSelectorComponent {
840
840
  this.ignoreDatapointTemplates = false;
841
841
  this.guessDatapointUnit = true;
842
842
  this.allowSearch = true;
843
+ this.hideSelection = false;
843
844
  this.searchString = '';
844
845
  this.maxNumberOfDatapoints = 50;
845
846
  this.loadingDatapoints = false;
@@ -848,9 +849,9 @@ class DatapointSelectorComponent {
848
849
  this.emptyStateSubtitleWhenNoDataPointsInAsset = gettext('Select an asset with data points from the list.');
849
850
  this.searchString$ = new BehaviorSubject('');
850
851
  this.touched = false;
851
- this.setupObservables();
852
852
  }
853
853
  ngOnInit() {
854
+ this.setupObservables();
854
855
  if (!this.ignoreDatapointTemplates) {
855
856
  this.datapointLibraryEntries = from(this.datapointService.getFirstDatapointLibraryPage());
856
857
  }
@@ -962,13 +963,13 @@ class DatapointSelectorComponent {
962
963
  }
963
964
  }
964
965
  DatapointSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointSelectorComponent, deps: [{ token: DatapointLibraryService }], target: i0.ɵɵFactoryTarget.Component });
965
- DatapointSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatapointSelectorComponent, selector: "c8y-datapoint-selector", inputs: { contextAsset: "contextAsset", allowChangingContext: "allowChangingContext", allowDatapointsFromMultipleAssets: "allowDatapointsFromMultipleAssets", defaultActiveState: "defaultActiveState", ignoreDatapointTemplates: "ignoreDatapointTemplates", guessDatapointUnit: "guessDatapointUnit", allowSearch: "allowSearch" }, providers: [
966
+ DatapointSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatapointSelectorComponent, selector: "c8y-datapoint-selector", inputs: { contextAsset: "contextAsset", allowChangingContext: "allowChangingContext", allowDatapointsFromMultipleAssets: "allowDatapointsFromMultipleAssets", defaultActiveState: "defaultActiveState", ignoreDatapointTemplates: "ignoreDatapointTemplates", guessDatapointUnit: "guessDatapointUnit", allowSearch: "allowSearch", hideSelection: "hideSelection" }, providers: [
966
967
  {
967
968
  provide: NG_VALUE_ACCESSOR,
968
969
  multi: true,
969
970
  useExisting: forwardRef(() => DatapointSelectorComponent)
970
971
  }
971
- ], ngImport: i0, template: "<div\n class=\"d-grid grid__row--1 fit-h\"\n [ngClass]=\"allowChangingContext ? 'grid__col--3-6-3--md' : 'grid__col--8-4--md'\"\n>\n <div class=\"d-flex d-col p-relative bg-level-1\" *ngIf=\"allowChangingContext\">\n <c8y-asset-selector-miller\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 }\"\n class=\"d-contents\"\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 *ngIf=\"assetSelection | async as asset; else noDeviceEmptyState\" class=\"bg-inherit\">\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 *ngIf=\"!loadingDatapoints\" id=\"search\" class=\"input-group input-group-search m-t-4\">\n <input\n type=\"search\"\n class=\"form-control\"\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 c8yIcon=\"times\" class=\"text-muted\" (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 *ngIf=\"\n datapoints.length > maxNumberOfDatapoints &&\n filteredDatapoints.length >= maxNumberOfDatapoints\n \"\n class=\"sticky-top\"\n style=\"top: 72px\"\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 [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 class=\"d-contents\"\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\">\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 class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\">\n <div class=\"c8y-datapoint-pill\" *ngFor=\"let selectedDp of selectedDatapoints\">\n <button\n [title]=\"'Remove' | translate\"\n type=\"button\"\n class=\"c8y-datapoint-pill__btn\"\n (click)=\"datapointRemoved(selectedDp)\"\n >\n <i c8yIcon=\"remove\" class=\"icon-14\"></i>\n </button>\n <div\n class=\"c8y-datapoint-pill__label\"\n [title]=\"selectedDp | datapointLabel: { doNotUseLabel: true, includeDevice: true }\"\n >\n <i c8yIcon=\"circle\" class=\"m-r-4 icon-14\" [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-16\" *ngIf=\"!selectedDatapoints || !selectedDatapoints.length\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points selected.' | translate\"\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" }, { 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", "emptyActions", "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" }] });
972
+ ], 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 [(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 }\"\n class=\"d-contents\"\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 *ngIf=\"assetSelection | async as asset; else noDeviceEmptyState\" class=\"bg-inherit\">\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 *ngIf=\"!loadingDatapoints\" id=\"search\" class=\"input-group input-group-search m-t-4\">\n <input\n type=\"search\"\n class=\"form-control\"\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 c8yIcon=\"times\" class=\"text-muted\" (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 *ngIf=\"\n datapoints.length > maxNumberOfDatapoints &&\n filteredDatapoints.length >= maxNumberOfDatapoints\n \"\n class=\"sticky-top\"\n style=\"top: 72px\"\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 [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 class=\"d-contents\"\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 class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\">\n <div class=\"c8y-datapoint-pill\" *ngFor=\"let selectedDp of selectedDatapoints\">\n <button\n [title]=\"'Remove' | translate\"\n type=\"button\"\n class=\"c8y-datapoint-pill__btn\"\n (click)=\"datapointRemoved(selectedDp)\"\n >\n <i c8yIcon=\"remove\" class=\"icon-14\"></i>\n </button>\n <div\n class=\"c8y-datapoint-pill__label\"\n [title]=\"selectedDp | datapointLabel: { doNotUseLabel: true, includeDevice: true }\"\n >\n <i c8yIcon=\"circle\" class=\"m-r-4 icon-14\" [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-16\" *ngIf=\"!selectedDatapoints || !selectedDatapoints.length\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points selected.' | translate\"\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" }, { 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", "emptyActions", "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" }] });
972
973
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointSelectorComponent, decorators: [{
973
974
  type: Component,
974
975
  args: [{ selector: 'c8y-datapoint-selector', providers: [
@@ -977,7 +978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
977
978
  multi: true,
978
979
  useExisting: forwardRef(() => DatapointSelectorComponent)
979
980
  }
980
- ], template: "<div\n class=\"d-grid grid__row--1 fit-h\"\n [ngClass]=\"allowChangingContext ? 'grid__col--3-6-3--md' : 'grid__col--8-4--md'\"\n>\n <div class=\"d-flex d-col p-relative bg-level-1\" *ngIf=\"allowChangingContext\">\n <c8y-asset-selector-miller\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 }\"\n class=\"d-contents\"\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 *ngIf=\"assetSelection | async as asset; else noDeviceEmptyState\" class=\"bg-inherit\">\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 *ngIf=\"!loadingDatapoints\" id=\"search\" class=\"input-group input-group-search m-t-4\">\n <input\n type=\"search\"\n class=\"form-control\"\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 c8yIcon=\"times\" class=\"text-muted\" (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 *ngIf=\"\n datapoints.length > maxNumberOfDatapoints &&\n filteredDatapoints.length >= maxNumberOfDatapoints\n \"\n class=\"sticky-top\"\n style=\"top: 72px\"\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 [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 class=\"d-contents\"\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\">\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 class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\">\n <div class=\"c8y-datapoint-pill\" *ngFor=\"let selectedDp of selectedDatapoints\">\n <button\n [title]=\"'Remove' | translate\"\n type=\"button\"\n class=\"c8y-datapoint-pill__btn\"\n (click)=\"datapointRemoved(selectedDp)\"\n >\n <i c8yIcon=\"remove\" class=\"icon-14\"></i>\n </button>\n <div\n class=\"c8y-datapoint-pill__label\"\n [title]=\"selectedDp | datapointLabel: { doNotUseLabel: true, includeDevice: true }\"\n >\n <i c8yIcon=\"circle\" class=\"m-r-4 icon-14\" [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-16\" *ngIf=\"!selectedDatapoints || !selectedDatapoints.length\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points selected.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n </div>\n</div>\n" }]
981
+ ], 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 [(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 }\"\n class=\"d-contents\"\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 *ngIf=\"assetSelection | async as asset; else noDeviceEmptyState\" class=\"bg-inherit\">\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 *ngIf=\"!loadingDatapoints\" id=\"search\" class=\"input-group input-group-search m-t-4\">\n <input\n type=\"search\"\n class=\"form-control\"\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 c8yIcon=\"times\" class=\"text-muted\" (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 *ngIf=\"\n datapoints.length > maxNumberOfDatapoints &&\n filteredDatapoints.length >= maxNumberOfDatapoints\n \"\n class=\"sticky-top\"\n style=\"top: 72px\"\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 [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 class=\"d-contents\"\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 class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\">\n <div class=\"c8y-datapoint-pill\" *ngFor=\"let selectedDp of selectedDatapoints\">\n <button\n [title]=\"'Remove' | translate\"\n type=\"button\"\n class=\"c8y-datapoint-pill__btn\"\n (click)=\"datapointRemoved(selectedDp)\"\n >\n <i c8yIcon=\"remove\" class=\"icon-14\"></i>\n </button>\n <div\n class=\"c8y-datapoint-pill__label\"\n [title]=\"selectedDp | datapointLabel: { doNotUseLabel: true, includeDevice: true }\"\n >\n <i c8yIcon=\"circle\" class=\"m-r-4 icon-14\" [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-16\" *ngIf=\"!selectedDatapoints || !selectedDatapoints.length\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points selected.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n </div>\n</div>\n" }]
981
982
  }], ctorParameters: function () { return [{ type: DatapointLibraryService }]; }, propDecorators: { contextAsset: [{
982
983
  type: Input
983
984
  }], allowChangingContext: [{
@@ -992,6 +993,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
992
993
  type: Input
993
994
  }], allowSearch: [{
994
995
  type: Input
996
+ }], hideSelection: [{
997
+ type: Input
995
998
  }] } });
996
999
 
997
1000
  class DatapointSelectorModalComponent {
@@ -1006,6 +1009,8 @@ class DatapointSelectorModalComponent {
1006
1009
  this.saveButtonLabel = gettext('Add data points');
1007
1010
  this.guessDatapointUnit = true;
1008
1011
  this.defaultActiveState = true;
1012
+ this.finishWithFirstSelection = false;
1013
+ this.ignoreDatapointTemplates = false;
1009
1014
  this.assetSelectorConfig = {};
1010
1015
  this.result = new Promise((resolve, reject) => {
1011
1016
  this.save = resolve;
@@ -1023,6 +1028,12 @@ class DatapointSelectorModalComponent {
1023
1028
  this.bsModal.hide();
1024
1029
  this.cancel();
1025
1030
  }
1031
+ selectionChange(selection) {
1032
+ this.selectedDatapoints = selection;
1033
+ if (this.finishWithFirstSelection) {
1034
+ this.saveChanges();
1035
+ }
1036
+ }
1026
1037
  /**
1027
1038
  * changes the z-index of the modal, to make sure this modal is on top.
1028
1039
  * required as angularJS modals are placing them selves on top via adjusting z-index.
@@ -1034,10 +1045,10 @@ class DatapointSelectorModalComponent {
1034
1045
  }
1035
1046
  }
1036
1047
  DatapointSelectorModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointSelectorModalComponent, deps: [{ token: i1$1.BsModalRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
1037
- DatapointSelectorModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatapointSelectorModalComponent, selector: "c8y-datapoint-selector-modal", ngImport: i0, template: "<div class=\"modal-header separator\">\n <h4 id=\"modal-title\" class=\"text-medium\">{{ title | translate }}</h4>\n</div>\n<div class=\"modal-inner-scroll modal-inner-scroll--fixed\" id=\"modal-body\">\n <c8y-datapoint-selector\n [contextAsset]=\"contextAsset\"\n [guessDatapointUnit]=\"guessDatapointUnit\"\n [allowDatapointsFromMultipleAssets]=\"allowDatapointsFromMultipleAssets\"\n [allowChangingContext]=\"allowChangingContext\"\n [defaultActiveState]=\"defaultActiveState\"\n [allowSearch]=\"allowSearch\"\n [(ngModel)]=\"selectedDatapoints\"\n ></c8y-datapoint-selector>\n</div>\n<div class=\"modal-footer\">\n <button\n type=\"button\"\n [title]=\"'Cancel' | translate\"\n class=\"btn btn-default\"\n (click)=\"close()\"\n translate\n >\n Cancel\n </button>\n <button\n [title]=\"saveButtonLabel | translate\"\n class=\"btn btn-primary\"\n [disabled]=\"!this.selectedDatapoints?.length\"\n (click)=\"saveChanges()\"\n >\n {{ saveButtonLabel | translate }}\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: DatapointSelectorComponent, selector: "c8y-datapoint-selector", inputs: ["contextAsset", "allowChangingContext", "allowDatapointsFromMultipleAssets", "defaultActiveState", "ignoreDatapointTemplates", "guessDatapointUnit", "allowSearch"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
1048
+ DatapointSelectorModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatapointSelectorModalComponent, selector: "c8y-datapoint-selector-modal", ngImport: i0, template: "<div class=\"modal-header separator\">\n <h4 id=\"modal-title\" class=\"text-medium\">{{ title | translate }}</h4>\n</div>\n<div class=\"modal-inner-scroll modal-inner-scroll--fixed\" id=\"modal-body\">\n <c8y-datapoint-selector\n [contextAsset]=\"contextAsset\"\n [guessDatapointUnit]=\"guessDatapointUnit\"\n [allowDatapointsFromMultipleAssets]=\"allowDatapointsFromMultipleAssets\"\n [allowChangingContext]=\"allowChangingContext\"\n [defaultActiveState]=\"defaultActiveState\"\n [allowSearch]=\"allowSearch\"\n [hideSelection]=\"finishWithFirstSelection\"\n [ignoreDatapointTemplates]=\"ignoreDatapointTemplates\"\n [ngModel]=\"selectedDatapoints\"\n (ngModelChange)=\"selectionChange($event)\"\n ></c8y-datapoint-selector>\n</div>\n<div class=\"modal-footer\">\n <button\n type=\"button\"\n [title]=\"'Cancel' | translate\"\n class=\"btn btn-default\"\n (click)=\"close()\"\n translate\n >\n Cancel\n </button>\n <button\n [title]=\"saveButtonLabel | translate\"\n class=\"btn btn-primary\"\n [disabled]=\"!this.selectedDatapoints?.length\"\n (click)=\"saveChanges()\"\n *ngIf=\"!finishWithFirstSelection\"\n >\n {{ saveButtonLabel | translate }}\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: DatapointSelectorComponent, selector: "c8y-datapoint-selector", inputs: ["contextAsset", "allowChangingContext", "allowDatapointsFromMultipleAssets", "defaultActiveState", "ignoreDatapointTemplates", "guessDatapointUnit", "allowSearch", "hideSelection"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
1038
1049
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointSelectorModalComponent, decorators: [{
1039
1050
  type: Component,
1040
- args: [{ selector: 'c8y-datapoint-selector-modal', template: "<div class=\"modal-header separator\">\n <h4 id=\"modal-title\" class=\"text-medium\">{{ title | translate }}</h4>\n</div>\n<div class=\"modal-inner-scroll modal-inner-scroll--fixed\" id=\"modal-body\">\n <c8y-datapoint-selector\n [contextAsset]=\"contextAsset\"\n [guessDatapointUnit]=\"guessDatapointUnit\"\n [allowDatapointsFromMultipleAssets]=\"allowDatapointsFromMultipleAssets\"\n [allowChangingContext]=\"allowChangingContext\"\n [defaultActiveState]=\"defaultActiveState\"\n [allowSearch]=\"allowSearch\"\n [(ngModel)]=\"selectedDatapoints\"\n ></c8y-datapoint-selector>\n</div>\n<div class=\"modal-footer\">\n <button\n type=\"button\"\n [title]=\"'Cancel' | translate\"\n class=\"btn btn-default\"\n (click)=\"close()\"\n translate\n >\n Cancel\n </button>\n <button\n [title]=\"saveButtonLabel | translate\"\n class=\"btn btn-primary\"\n [disabled]=\"!this.selectedDatapoints?.length\"\n (click)=\"saveChanges()\"\n >\n {{ saveButtonLabel | translate }}\n </button>\n</div>\n" }]
1051
+ args: [{ selector: 'c8y-datapoint-selector-modal', template: "<div class=\"modal-header separator\">\n <h4 id=\"modal-title\" class=\"text-medium\">{{ title | translate }}</h4>\n</div>\n<div class=\"modal-inner-scroll modal-inner-scroll--fixed\" id=\"modal-body\">\n <c8y-datapoint-selector\n [contextAsset]=\"contextAsset\"\n [guessDatapointUnit]=\"guessDatapointUnit\"\n [allowDatapointsFromMultipleAssets]=\"allowDatapointsFromMultipleAssets\"\n [allowChangingContext]=\"allowChangingContext\"\n [defaultActiveState]=\"defaultActiveState\"\n [allowSearch]=\"allowSearch\"\n [hideSelection]=\"finishWithFirstSelection\"\n [ignoreDatapointTemplates]=\"ignoreDatapointTemplates\"\n [ngModel]=\"selectedDatapoints\"\n (ngModelChange)=\"selectionChange($event)\"\n ></c8y-datapoint-selector>\n</div>\n<div class=\"modal-footer\">\n <button\n type=\"button\"\n [title]=\"'Cancel' | translate\"\n class=\"btn btn-default\"\n (click)=\"close()\"\n translate\n >\n Cancel\n </button>\n <button\n [title]=\"saveButtonLabel | translate\"\n class=\"btn btn-primary\"\n [disabled]=\"!this.selectedDatapoints?.length\"\n (click)=\"saveChanges()\"\n *ngIf=\"!finishWithFirstSelection\"\n >\n {{ saveButtonLabel | translate }}\n </button>\n</div>\n" }]
1041
1052
  }], ctorParameters: function () { return [{ type: i1$1.BsModalRef }, { type: i0.ElementRef }]; } });
1042
1053
 
1043
1054
  class DatapointSelectorService {