@c8y/ngx-components 1021.54.6 → 1021.54.11
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.
- package/context-dashboard/context-dashboard.component.d.ts.map +1 -1
- package/context-dashboard/context-dashboard.model.d.ts +1 -0
- package/context-dashboard/context-dashboard.model.d.ts.map +1 -1
- package/context-dashboard/context-dashboard.service.d.ts +1 -0
- package/context-dashboard/context-dashboard.service.d.ts.map +1 -1
- package/datapoint-selector/datapoint-library.service.d.ts +2 -2
- package/datapoint-selector/datapoint-library.service.d.ts.map +1 -1
- package/datapoint-selector/datapoint-selection-list/datapoint-selection-list.component.d.ts +5 -0
- package/datapoint-selector/datapoint-selection-list/datapoint-selection-list.component.d.ts.map +1 -1
- package/datapoint-selector/datapoint-selector-list-item/datapoint-selector-list-item.component.d.ts +13 -2
- package/datapoint-selector/datapoint-selector-list-item/datapoint-selector-list-item.component.d.ts.map +1 -1
- package/datapoint-selector/datapoint-selector-modal/datapoint-selector-modal.component.d.ts +2 -0
- package/datapoint-selector/datapoint-selector-modal/datapoint-selector-modal.component.d.ts.map +1 -1
- package/datapoint-selector/datapoint-selector.component.d.ts +11 -1
- package/datapoint-selector/datapoint-selector.component.d.ts.map +1 -1
- package/esm2022/context-dashboard/context-dashboard.component.mjs +15 -33
- package/esm2022/context-dashboard/context-dashboard.model.mjs +1 -1
- package/esm2022/context-dashboard/context-dashboard.service.mjs +31 -21
- package/esm2022/datapoint-selector/datapoint-library.service.mjs +11 -6
- package/esm2022/datapoint-selector/datapoint-selection-list/datapoint-selection-list.component.mjs +5 -3
- package/esm2022/datapoint-selector/datapoint-selector-list-item/datapoint-selector-list-item.component.mjs +12 -6
- package/esm2022/datapoint-selector/datapoint-selector-modal/datapoint-selector-modal.component.mjs +5 -3
- package/esm2022/datapoint-selector/datapoint-selector.component.mjs +22 -5
- package/esm2022/upgrade/ng1/downgraded.services.mjs +3 -1
- package/esm2022/upgrade/ng1/index.mjs +4 -3
- package/fesm2022/c8y-ngx-components-context-dashboard.mjs +44 -52
- package/fesm2022/c8y-ngx-components-context-dashboard.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-datapoint-selector.mjs +49 -19
- package/fesm2022/c8y-ngx-components-datapoint-selector.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-upgrade.mjs +4 -2
- package/fesm2022/c8y-ngx-components-upgrade.mjs.map +1 -1
- package/locales/de.po +128 -122
- package/locales/es.po +6 -0
- package/locales/fr.po +149 -141
- package/locales/ja_JP.po +296 -215
- package/locales/ko.po +6 -0
- package/locales/locales.pot +18 -3
- package/locales/nl.po +6 -0
- package/locales/pl.po +6 -0
- package/locales/pt_BR.po +6 -0
- package/locales/zh_CN.po +6 -0
- package/locales/zh_TW.po +6 -0
- package/package.json +1 -1
- package/upgrade/ng1/downgraded.services.d.ts +1 -0
- package/upgrade/ng1/downgraded.services.d.ts.map +1 -1
- package/upgrade/ng1/index.d.ts.map +1 -1
|
@@ -444,7 +444,7 @@ class DatapointLibraryService {
|
|
|
444
444
|
}
|
|
445
445
|
return datapoints;
|
|
446
446
|
}
|
|
447
|
-
async getDatapointsOfAsset(parentReference, ignoreDatapointTemplates) {
|
|
447
|
+
async getDatapointsOfAsset(parentReference, ignoreDatapointTemplates, datapointTemplatesOnly = false) {
|
|
448
448
|
const [kpiResponse, details] = await Promise.all([
|
|
449
449
|
(ignoreDatapointTemplates
|
|
450
450
|
? Promise.resolve(null)
|
|
@@ -453,7 +453,7 @@ class DatapointLibraryService {
|
|
|
453
453
|
]);
|
|
454
454
|
const kpis = kpiResponse && kpiResponse.data ? kpiResponse.data : [];
|
|
455
455
|
const sortedDetails = sortBy(details, ['fragment', 'series']);
|
|
456
|
-
return await this.combineFragmentSeriesTuplesWithDetails(sortedDetails, parentReference, kpis);
|
|
456
|
+
return await this.combineFragmentSeriesTuplesWithDetails(sortedDetails, parentReference, kpis, datapointTemplatesOnly);
|
|
457
457
|
}
|
|
458
458
|
/**
|
|
459
459
|
* Requests the last measurement with the given fragment and series to extract it's unit.
|
|
@@ -487,11 +487,15 @@ class DatapointLibraryService {
|
|
|
487
487
|
}
|
|
488
488
|
return '';
|
|
489
489
|
}
|
|
490
|
-
async combineFragmentSeriesTuplesWithDetails(tuples, target, kpis) {
|
|
491
|
-
const datapoints = tuples
|
|
490
|
+
async combineFragmentSeriesTuplesWithDetails(tuples, target, kpis, datapointTemplatesOnly = false) {
|
|
491
|
+
const datapoints = tuples
|
|
492
|
+
.map(tuple => {
|
|
492
493
|
const foundDatapointLibraryEntry = kpis.find(kpi => kpi[DATAPOINT_LIBRARY_FRAGMENT] &&
|
|
493
494
|
kpi[DATAPOINT_LIBRARY_FRAGMENT].fragment === tuple.fragment &&
|
|
494
495
|
kpi[DATAPOINT_LIBRARY_FRAGMENT].series === tuple.series);
|
|
496
|
+
if (!foundDatapointLibraryEntry && datapointTemplatesOnly) {
|
|
497
|
+
return null;
|
|
498
|
+
}
|
|
495
499
|
const datapoint = this.mapDatapointLibraryEntry(foundDatapointLibraryEntry) || tuple;
|
|
496
500
|
if (!datapoint.label) {
|
|
497
501
|
datapoint.label = `${datapoint.fragment} → ${datapoint.series}`;
|
|
@@ -501,7 +505,8 @@ class DatapointLibraryService {
|
|
|
501
505
|
}
|
|
502
506
|
datapoint.__target = target;
|
|
503
507
|
return datapoint;
|
|
504
|
-
})
|
|
508
|
+
})
|
|
509
|
+
.filter(Boolean);
|
|
505
510
|
await this.assignColorToDatapoints(datapoints);
|
|
506
511
|
return datapoints;
|
|
507
512
|
}
|
|
@@ -624,13 +629,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
624
629
|
type: Input
|
|
625
630
|
}] } });
|
|
626
631
|
|
|
632
|
+
const AddButtonTypes = {
|
|
633
|
+
none: 'none',
|
|
634
|
+
addRemove: 'add-remove',
|
|
635
|
+
select: 'select'
|
|
636
|
+
};
|
|
627
637
|
class DatapointSelectorListItemComponent {
|
|
628
638
|
constructor(formBuilder) {
|
|
629
639
|
this.formBuilder = formBuilder;
|
|
630
640
|
this.defaultFormOptions = {};
|
|
631
641
|
this.isSelected = false;
|
|
632
642
|
this.isCollapsed = true;
|
|
633
|
-
this.
|
|
643
|
+
this.addButtonType = AddButtonTypes.addRemove;
|
|
634
644
|
this.editable = true;
|
|
635
645
|
this.showActiveToggle = false;
|
|
636
646
|
this.activeToggleDisabled = false;
|
|
@@ -643,6 +653,7 @@ class DatapointSelectorListItemComponent {
|
|
|
643
653
|
this.colorPickerDisabled = true;
|
|
644
654
|
this.disableTypeaheadIfSelected = false;
|
|
645
655
|
this.pattern = '';
|
|
656
|
+
this.AddButtonTypes = AddButtonTypes;
|
|
646
657
|
this.formGroup = this.formBuilder.group({
|
|
647
658
|
details: [],
|
|
648
659
|
color: [],
|
|
@@ -765,7 +776,7 @@ class DatapointSelectorListItemComponent {
|
|
|
765
776
|
return obj;
|
|
766
777
|
}
|
|
767
778
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointSelectorListItemComponent, deps: [{ token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
768
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatapointSelectorListItemComponent, selector: "c8y-datapoint-selector-list-item", inputs: { defaultFormOptions: "defaultFormOptions", isSelected: "isSelected", isCollapsed: "isCollapsed",
|
|
779
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatapointSelectorListItemComponent, selector: "c8y-datapoint-selector-list-item", inputs: { defaultFormOptions: "defaultFormOptions", isSelected: "isSelected", isCollapsed: "isCollapsed", addButtonType: "addButtonType", editable: "editable", showActiveToggle: "showActiveToggle", activeToggleDisabled: "activeToggleDisabled", showOptions: "showOptions", datapointLibraryEntries: "datapointLibraryEntries", actions: "actions", optionToRemove: "optionToRemove", hasUnlinkTemplateOption: "hasUnlinkTemplateOption", colorPickerDisabled: "colorPickerDisabled", disableTypeaheadIfSelected: "disableTypeaheadIfSelected", highlightText: "highlightText" }, outputs: { added: "added", removed: "removed" }, providers: [
|
|
769
780
|
{
|
|
770
781
|
provide: NG_VALUE_ACCESSOR,
|
|
771
782
|
useExisting: forwardRef(() => DatapointSelectorListItemComponent),
|
|
@@ -776,7 +787,7 @@ class DatapointSelectorListItemComponent {
|
|
|
776
787
|
useExisting: forwardRef(() => DatapointSelectorListItemComponent),
|
|
777
788
|
multi: true
|
|
778
789
|
}
|
|
779
|
-
], queries: [{ propertyName: "dragHandle", first: true, predicate: ListItemDragHandleComponent, descendants: true }], ngImport: i0, template: "<c8y-li class=\"c8y-list__item__collapse--container-small\" [formGroup]=\"formGroup\" #li>\n <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n <c8y-li-checkbox\n class=\"a-s-center p-r-0\"\n *ngIf=\"showActiveToggle\"\n [displayAsSwitch]=\"true\"\n formControlName=\"__active\"\n (click)=\"$event.stopPropagation()\"\n ></c8y-li-checkbox>\n\n <div class=\"d-flex a-i-center \">\n <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-4\" [title]=\"'Change color' | translate\">\n <div class=\"c8y-colorpicker\">\n <input\n type=\"color\"\n [attr.aria-label]=\"'Color' | translate\"\n formControlName=\"color\"\n (click)=\"$event.stopPropagation()\"\n />\n <span [style.background-color]=\"formGroup.value.color\"></span>\n </div>\n </div>\n <button\n class=\"btn-clean data-point-label text-truncate\"\n type=\"button\"\n [attr.aria-expanded]=\"!li.collapsed\"\n (click)=\"li.collapsed = !li.collapsed\"\n >\n <span class=\"text-truncate\" [title]=\"formGroup.value.details?.label\">\n <c8y-highlight\n [text]=\"formGroup.value.details?.label\"\n [pattern]=\"highlightText\"\n [shouldTrimPattern]=\"true\"\n ></c8y-highlight>\n </span>\n <small class=\"text-truncate text-muted icon-flex\" *ngIf=\"formGroup.value.__target\">\n <i c8yIcon=\"exchange\"></i>\n <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n </small>\n </button>\n\n <button\n class=\"btn btn-dot btn-dot--danger m-l-auto\"\n type=\"button\"\n [attr.aria-label]=\"'Invalid' | translate\"\n [popover]=\"\n errorMessage\n ? errorMessage\n : ('Some entries are invalid. Check the input fields with red borders.' | translate)\n \"\n triggers=\"focus\"\n placement=\"left\"\n container=\"body\"\n *ngIf=\"!(isValid$ | async)\"\n >\n <i c8yIcon=\"warning\"></i>\n </button>\n <div class=\"m-l-auto a-s-center p-r-4\" *ngIf=\"showAddRemoveButton\">\n <button\n class=\"btn btn-dot btn-dot--danger\"\n type=\"button\"\n [attr.aria-label]=\"'Remove' | translate\"\n [tooltip]=\"'Remove from selected data points' | translate\"\n [delay]=\"500\"\n (click)=\"addOrRemoveItem()\"\n *ngIf=\"isSelected\"\n [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n >\n <i class=\"icon-20\" c8yIcon=\"minus-circle\"></i>\n </button>\n <button\n class=\"btn btn-dot text-primary\"\n type=\"button\"\n [attr.aria-label]=\"'Add to selected data points' | translate\"\n [tooltip]=\"'Add to selected data points' | translate\"\n [delay]=\"500\"\n [disabled]=\"!(isValid$ | async)\"\n (click)=\"addOrRemoveItem()\"\n *ngIf=\"!isSelected\"\n [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n >\n <i class=\"text-primary icon-20\" c8yIcon=\"plus-circle\"></i>\n </button>\n </div>\n </div>\n\n <c8y-li-action\n *ngIf=\"optionToRemove\"\n [icon]=\"'minus-circle'\"\n [label]=\"'Remove from list' | translate\"\n (click)=\"remove()\"\n ></c8y-li-action>\n <c8y-li-action\n *ngFor=\"let action of actions\"\n [icon]=\"action.icon\"\n [label]=\"action.label\"\n (click)=\"action.callback(formGroup.value)\"\n ></c8y-li-action>\n <c8y-li-collapse>\n <div class=\"data-point-details\">\n <ul class=\"list-unstyled small m-b-16\">\n <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start text-muted\" translate>Fragment</label>\n <span class=\"m-l-auto\">\n <c8y-highlight\n [text]=\"formGroup.value.fragment\"\n [pattern]=\"highlightText\"\n [shouldTrimPattern]=\"true\"\n ></c8y-highlight>\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start text-muted\" translate>Series</label>\n <span class=\"m-l-auto\">\n <c8y-highlight\n [text]=\"formGroup.value.series\"\n [pattern]=\"highlightText\"\n [shouldTrimPattern]=\"true\"\n ></c8y-highlight>\n </span>\n </li>\n </ul>\n <div\n class=\"form-group form-group-sm\"\n *ngIf=\"datapointLibraryEntries && datapointLibraryEntries | async as libraryEntries\"\n >\n <label>\n {{ 'Data point template' | translate }} \n <button\n class=\"btn-help btn-help--sm\"\n type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"datapointHintPopoverTemplate\"\n (click)=\"$event.stopPropagation()\"\n triggers=\"focus\"\n placement=\"top\"\n ></button>\n </label>\n \n\n <ng-template #datapointHintPopoverTemplate>\n {{\n 'Using a data point template sets color, label, unit and ranges. Removing the template allows you to set the values manually.'\n | translate\n }}\n </ng-template>\n <div class=\"input-group input-group-sm\">\n <c8y-typeahead\n class=\"flex-grow\"\n [placeholder]=\"'No template' | translate\"\n [ngModel]=\"formGroup.value.__template ? formGroup.value.details : undefined\"\n [ngModelOptions]=\"{ standalone: true }\"\n (onSearch)=\"setPipe($event)\"\n [displayProperty]=\"'label'\"\n [hideNew]=\"true\"\n *ngIf=\"datapointLibraryEntries\"\n [disabled]=\"isSelected && disableTypeaheadIfSelected\"\n >\n <c8y-li\n class=\"p-l-8 p-r-8 c8y-list__item--link interact\"\n *c8yFor=\"\n let item of datapointLibraryEntries;\n loadMore: 'auto';\n pipe: filterPipe;\n notFound: notFoundTemplate\n \"\n (click)=\"dataPointTemplateSelected(item)\"\n [active]=\"formGroup.value.__template === item.id\"\n [attr.role]=\"'menuitem'\"\n >\n <c8y-highlight [text]=\"item.c8y_Kpi?.label\" [pattern]=\"pattern\"></c8y-highlight>\n <c8y-li-icon icon=\"circle\" [style.color]=\"item.c8y_Kpi?.color\"></c8y-li-icon>\n </c8y-li>\n <ng-template #notFoundTemplate>\n <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"pattern.length > 0\">\n <span>No match found.</span>\n </c8y-li>\n </ng-template>\n </c8y-typeahead>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-default\"\n type=\"button\"\n [attr.aria-label]=\"'Info' | translate\"\n [popover]=\"datapointOverviewPopoverTemplate\"\n placement=\"left\"\n triggers=\"focus\"\n container=\"body\"\n *ngIf=\"formGroup.value.__template\"\n >\n <i class=\"text-info\" c8yIcon=\"info\"></i>\n </button>\n </div>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-default\"\n type=\"button\"\n tooltip=\"{{ 'Unlink data point template' | translate }}\"\n [attr.aria-label]=\"'Unlink data point template' | translate\"\n [delay]=\"500\"\n placement=\"left\"\n container=\"body\"\n [adaptivePosition]=\"false\"\n *ngIf=\"formGroup.value.__template && hasUnlinkTemplateOption\"\n (click)=\"unlinkDatapointTemplate()\"\n >\n <i c8yIcon=\"unlink\"></i>\n </button>\n </div>\n </div>\n </div>\n <ng-template #datapointOverviewPopoverTemplate>\n <c8y-datapoint-template-popover\n [datapoint]=\"formGroup.value.details\"\n ></c8y-datapoint-template-popover>\n </ng-template>\n <c8y-datapoint-attributes-form\n *ngIf=\"defaultFormOptions\"\n [showTarget]=\"defaultFormOptions.showTarget\"\n [showRange]=\"defaultFormOptions.showRange\"\n [showYellowRange]=\"defaultFormOptions.showYellowRange\"\n [showRedRange]=\"defaultFormOptions.showRedRange\"\n [showChart]=\"defaultFormOptions.showChart\"\n [showFormIfTemplateWasSelected]=\"defaultFormOptions.showFormIfTemplateWasSelected\"\n [selectableChartRenderTypes]=\"defaultFormOptions.selectableChartRenderTypes\"\n [selectableChartLineTypes]=\"defaultFormOptions.selectableChartLineTypes\"\n [selectableAxisTypes]=\"defaultFormOptions.selectableAxisTypes\"\n formControlName=\"details\"\n ></c8y-datapoint-attributes-form>\n </div>\n </c8y-li-collapse>\n</c8y-li>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i2.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i2.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: DatapointTemplatePopoverComponent, selector: "c8y-datapoint-template-popover", inputs: ["datapoint", "attributes"] }, { kind: "component", type: DatapointAttributesFormComponent, selector: "c8y-datapoint-attributes-form", inputs: ["selectableChartRenderTypes", "selectableChartLineTypes", "selectableAxisTypes", "showTarget", "showRange", "showYellowRange", "showRedRange", "showChart", "showFormIfTemplateWasSelected"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
|
|
790
|
+
], queries: [{ propertyName: "dragHandle", first: true, predicate: ListItemDragHandleComponent, descendants: true }], ngImport: i0, template: "<c8y-li class=\"c8y-list__item__collapse--container-small\" [formGroup]=\"formGroup\" #li>\n <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n <c8y-li-checkbox\n class=\"a-s-center p-r-0\"\n *ngIf=\"showActiveToggle\"\n [displayAsSwitch]=\"true\"\n formControlName=\"__active\"\n (click)=\"$event.stopPropagation()\"\n ></c8y-li-checkbox>\n\n <div class=\"d-flex a-i-center \">\n <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-4\" [title]=\"'Change color' | translate\">\n <div class=\"c8y-colorpicker\">\n <input\n type=\"color\"\n [attr.aria-label]=\"'Color' | translate\"\n formControlName=\"color\"\n (click)=\"$event.stopPropagation()\"\n />\n <span [style.background-color]=\"formGroup.value.color\"></span>\n </div>\n </div>\n <button\n class=\"btn-clean data-point-label text-truncate\"\n type=\"button\"\n [attr.aria-expanded]=\"!li.collapsed\"\n (click)=\"li.collapsed = !li.collapsed\"\n >\n <span class=\"text-truncate\" [title]=\"formGroup.value.details?.label\">\n <c8y-highlight\n [text]=\"formGroup.value.details?.label\"\n [pattern]=\"highlightText\"\n [shouldTrimPattern]=\"true\"\n ></c8y-highlight>\n </span>\n <small class=\"text-truncate text-muted icon-flex\" *ngIf=\"formGroup.value.__target\">\n <i c8yIcon=\"exchange\"></i>\n <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n </small>\n </button>\n\n <button\n class=\"btn btn-dot btn-dot--danger m-l-auto\"\n type=\"button\"\n [attr.aria-label]=\"'Invalid' | translate\"\n [popover]=\"\n errorMessage\n ? errorMessage\n : ('Some entries are invalid. Check the input fields with red borders.' | translate)\n \"\n triggers=\"focus\"\n placement=\"left\"\n container=\"body\"\n *ngIf=\"!(isValid$ | async)\"\n >\n <i c8yIcon=\"warning\"></i>\n </button>\n <div class=\"m-l-auto a-s-center p-r-4\" *ngIf=\"addButtonType === AddButtonTypes.addRemove\">\n <button\n class=\"btn btn-dot btn-dot--danger\"\n type=\"button\"\n [attr.aria-label]=\"'Remove' | translate\"\n [tooltip]=\"'Remove from selected data points' | translate\"\n [delay]=\"500\"\n (click)=\"addOrRemoveItem()\"\n *ngIf=\"isSelected\"\n [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n >\n <i class=\"icon-20\" c8yIcon=\"minus-circle\"></i>\n </button>\n <button\n class=\"btn btn-dot text-primary\"\n type=\"button\"\n [attr.aria-label]=\"'Add to selected data points' | translate\"\n [tooltip]=\"'Add to selected data points' | translate\"\n [delay]=\"500\"\n [disabled]=\"!(isValid$ | async)\"\n (click)=\"addOrRemoveItem()\"\n *ngIf=\"!isSelected\"\n [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n >\n <i class=\"text-primary icon-20\" c8yIcon=\"plus-circle\"></i>\n </button>\n </div>\n <button\n *ngIf=\"addButtonType === AddButtonTypes.select\"\n class=\"btn btn-default btn-sm m-l-auto\"\n type=\"button\"\n [attr.aria-label]=\"'Select' | translate\"\n [tooltip]=\"'Select data point' | translate\"\n [delay]=\"500\"\n (click)=\"addOrRemoveItem()\"\n >{{ 'Select' | translate }}</button>\n </div>\n\n <c8y-li-action\n *ngIf=\"optionToRemove\"\n [icon]=\"'minus-circle'\"\n [label]=\"'Remove from list' | translate\"\n (click)=\"remove()\"\n ></c8y-li-action>\n <c8y-li-action\n *ngFor=\"let action of actions\"\n [icon]=\"action.icon\"\n [label]=\"action.label\"\n (click)=\"action.callback(formGroup.value)\"\n ></c8y-li-action>\n <c8y-li-collapse *ngIf=\"editable\">\n <div class=\"data-point-details\">\n <ul class=\"list-unstyled small m-b-16\">\n <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start text-muted\" translate>Fragment</label>\n <span class=\"m-l-auto\">\n <c8y-highlight\n [text]=\"formGroup.value.fragment\"\n [pattern]=\"highlightText\"\n [shouldTrimPattern]=\"true\"\n ></c8y-highlight>\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start text-muted\" translate>Series</label>\n <span class=\"m-l-auto\">\n <c8y-highlight\n [text]=\"formGroup.value.series\"\n [pattern]=\"highlightText\"\n [shouldTrimPattern]=\"true\"\n ></c8y-highlight>\n </span>\n </li>\n </ul>\n <div\n class=\"form-group form-group-sm\"\n *ngIf=\"datapointLibraryEntries && datapointLibraryEntries | async as libraryEntries\"\n >\n <label>\n {{ 'Data point template' | translate }} \n <button\n class=\"btn-help btn-help--sm\"\n type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"datapointHintPopoverTemplate\"\n (click)=\"$event.stopPropagation()\"\n triggers=\"focus\"\n placement=\"top\"\n ></button>\n </label>\n \n\n <ng-template #datapointHintPopoverTemplate>\n {{\n 'Using a data point template sets color, label, unit and ranges. Removing the template allows you to set the values manually.'\n | translate\n }}\n </ng-template>\n <div class=\"input-group input-group-sm\">\n <c8y-typeahead\n class=\"flex-grow\"\n [placeholder]=\"'No template' | translate\"\n [ngModel]=\"formGroup.value.__template ? formGroup.value.details : undefined\"\n [ngModelOptions]=\"{ standalone: true }\"\n (onSearch)=\"setPipe($event)\"\n [displayProperty]=\"'label'\"\n [hideNew]=\"true\"\n *ngIf=\"datapointLibraryEntries\"\n [disabled]=\"isSelected && disableTypeaheadIfSelected\"\n >\n <c8y-li\n class=\"p-l-8 p-r-8 c8y-list__item--link interact\"\n *c8yFor=\"\n let item of datapointLibraryEntries;\n loadMore: 'auto';\n pipe: filterPipe;\n notFound: notFoundTemplate\n \"\n (click)=\"dataPointTemplateSelected(item)\"\n [active]=\"formGroup.value.__template === item.id\"\n [attr.role]=\"'menuitem'\"\n >\n <c8y-highlight [text]=\"item.c8y_Kpi?.label\" [pattern]=\"pattern\"></c8y-highlight>\n <c8y-li-icon icon=\"circle\" [style.color]=\"item.c8y_Kpi?.color\"></c8y-li-icon>\n </c8y-li>\n <ng-template #notFoundTemplate>\n <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"pattern.length > 0\">\n <span>No match found.</span>\n </c8y-li>\n </ng-template>\n </c8y-typeahead>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-default\"\n type=\"button\"\n [attr.aria-label]=\"'Info' | translate\"\n [popover]=\"datapointOverviewPopoverTemplate\"\n placement=\"left\"\n triggers=\"focus\"\n container=\"body\"\n *ngIf=\"formGroup.value.__template\"\n >\n <i class=\"text-info\" c8yIcon=\"info\"></i>\n </button>\n </div>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-default\"\n type=\"button\"\n tooltip=\"{{ 'Unlink data point template' | translate }}\"\n [attr.aria-label]=\"'Unlink data point template' | translate\"\n [delay]=\"500\"\n placement=\"left\"\n container=\"body\"\n [adaptivePosition]=\"false\"\n *ngIf=\"formGroup.value.__template && hasUnlinkTemplateOption\"\n (click)=\"unlinkDatapointTemplate()\"\n >\n <i c8yIcon=\"unlink\"></i>\n </button>\n </div>\n </div>\n </div>\n <ng-template #datapointOverviewPopoverTemplate>\n <c8y-datapoint-template-popover\n [datapoint]=\"formGroup.value.details\"\n ></c8y-datapoint-template-popover>\n </ng-template>\n <c8y-datapoint-attributes-form\n *ngIf=\"defaultFormOptions\"\n [showTarget]=\"defaultFormOptions.showTarget\"\n [showRange]=\"defaultFormOptions.showRange\"\n [showYellowRange]=\"defaultFormOptions.showYellowRange\"\n [showRedRange]=\"defaultFormOptions.showRedRange\"\n [showChart]=\"defaultFormOptions.showChart\"\n [showFormIfTemplateWasSelected]=\"defaultFormOptions.showFormIfTemplateWasSelected\"\n [selectableChartRenderTypes]=\"defaultFormOptions.selectableChartRenderTypes\"\n [selectableChartLineTypes]=\"defaultFormOptions.selectableChartLineTypes\"\n [selectableAxisTypes]=\"defaultFormOptions.selectableAxisTypes\"\n formControlName=\"details\"\n ></c8y-datapoint-attributes-form>\n </div>\n </c8y-li-collapse>\n</c8y-li>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i2.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i2.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: DatapointTemplatePopoverComponent, selector: "c8y-datapoint-template-popover", inputs: ["datapoint", "attributes"] }, { kind: "component", type: DatapointAttributesFormComponent, selector: "c8y-datapoint-attributes-form", inputs: ["selectableChartRenderTypes", "selectableChartLineTypes", "selectableAxisTypes", "showTarget", "showRange", "showYellowRange", "showRedRange", "showChart", "showFormIfTemplateWasSelected"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
|
|
780
791
|
}
|
|
781
792
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointSelectorListItemComponent, decorators: [{
|
|
782
793
|
type: Component,
|
|
@@ -791,14 +802,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
791
802
|
useExisting: forwardRef(() => DatapointSelectorListItemComponent),
|
|
792
803
|
multi: true
|
|
793
804
|
}
|
|
794
|
-
], template: "<c8y-li class=\"c8y-list__item__collapse--container-small\" [formGroup]=\"formGroup\" #li>\n <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n <c8y-li-checkbox\n class=\"a-s-center p-r-0\"\n *ngIf=\"showActiveToggle\"\n [displayAsSwitch]=\"true\"\n formControlName=\"__active\"\n (click)=\"$event.stopPropagation()\"\n ></c8y-li-checkbox>\n\n <div class=\"d-flex a-i-center \">\n <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-4\" [title]=\"'Change color' | translate\">\n <div class=\"c8y-colorpicker\">\n <input\n type=\"color\"\n [attr.aria-label]=\"'Color' | translate\"\n formControlName=\"color\"\n (click)=\"$event.stopPropagation()\"\n />\n <span [style.background-color]=\"formGroup.value.color\"></span>\n </div>\n </div>\n <button\n class=\"btn-clean data-point-label text-truncate\"\n type=\"button\"\n [attr.aria-expanded]=\"!li.collapsed\"\n (click)=\"li.collapsed = !li.collapsed\"\n >\n <span class=\"text-truncate\" [title]=\"formGroup.value.details?.label\">\n <c8y-highlight\n [text]=\"formGroup.value.details?.label\"\n [pattern]=\"highlightText\"\n [shouldTrimPattern]=\"true\"\n ></c8y-highlight>\n </span>\n <small class=\"text-truncate text-muted icon-flex\" *ngIf=\"formGroup.value.__target\">\n <i c8yIcon=\"exchange\"></i>\n <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n </small>\n </button>\n\n <button\n class=\"btn btn-dot btn-dot--danger m-l-auto\"\n type=\"button\"\n [attr.aria-label]=\"'Invalid' | translate\"\n [popover]=\"\n errorMessage\n ? errorMessage\n : ('Some entries are invalid. Check the input fields with red borders.' | translate)\n \"\n triggers=\"focus\"\n placement=\"left\"\n container=\"body\"\n *ngIf=\"!(isValid$ | async)\"\n >\n <i c8yIcon=\"warning\"></i>\n </button>\n <div class=\"m-l-auto a-s-center p-r-4\" *ngIf=\"
|
|
805
|
+
], template: "<c8y-li class=\"c8y-list__item__collapse--container-small\" [formGroup]=\"formGroup\" #li>\n <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n <c8y-li-checkbox\n class=\"a-s-center p-r-0\"\n *ngIf=\"showActiveToggle\"\n [displayAsSwitch]=\"true\"\n formControlName=\"__active\"\n (click)=\"$event.stopPropagation()\"\n ></c8y-li-checkbox>\n\n <div class=\"d-flex a-i-center \">\n <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-4\" [title]=\"'Change color' | translate\">\n <div class=\"c8y-colorpicker\">\n <input\n type=\"color\"\n [attr.aria-label]=\"'Color' | translate\"\n formControlName=\"color\"\n (click)=\"$event.stopPropagation()\"\n />\n <span [style.background-color]=\"formGroup.value.color\"></span>\n </div>\n </div>\n <button\n class=\"btn-clean data-point-label text-truncate\"\n type=\"button\"\n [attr.aria-expanded]=\"!li.collapsed\"\n (click)=\"li.collapsed = !li.collapsed\"\n >\n <span class=\"text-truncate\" [title]=\"formGroup.value.details?.label\">\n <c8y-highlight\n [text]=\"formGroup.value.details?.label\"\n [pattern]=\"highlightText\"\n [shouldTrimPattern]=\"true\"\n ></c8y-highlight>\n </span>\n <small class=\"text-truncate text-muted icon-flex\" *ngIf=\"formGroup.value.__target\">\n <i c8yIcon=\"exchange\"></i>\n <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n </small>\n </button>\n\n <button\n class=\"btn btn-dot btn-dot--danger m-l-auto\"\n type=\"button\"\n [attr.aria-label]=\"'Invalid' | translate\"\n [popover]=\"\n errorMessage\n ? errorMessage\n : ('Some entries are invalid. Check the input fields with red borders.' | translate)\n \"\n triggers=\"focus\"\n placement=\"left\"\n container=\"body\"\n *ngIf=\"!(isValid$ | async)\"\n >\n <i c8yIcon=\"warning\"></i>\n </button>\n <div class=\"m-l-auto a-s-center p-r-4\" *ngIf=\"addButtonType === AddButtonTypes.addRemove\">\n <button\n class=\"btn btn-dot btn-dot--danger\"\n type=\"button\"\n [attr.aria-label]=\"'Remove' | translate\"\n [tooltip]=\"'Remove from selected data points' | translate\"\n [delay]=\"500\"\n (click)=\"addOrRemoveItem()\"\n *ngIf=\"isSelected\"\n [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n >\n <i class=\"icon-20\" c8yIcon=\"minus-circle\"></i>\n </button>\n <button\n class=\"btn btn-dot text-primary\"\n type=\"button\"\n [attr.aria-label]=\"'Add to selected data points' | translate\"\n [tooltip]=\"'Add to selected data points' | translate\"\n [delay]=\"500\"\n [disabled]=\"!(isValid$ | async)\"\n (click)=\"addOrRemoveItem()\"\n *ngIf=\"!isSelected\"\n [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n >\n <i class=\"text-primary icon-20\" c8yIcon=\"plus-circle\"></i>\n </button>\n </div>\n <button\n *ngIf=\"addButtonType === AddButtonTypes.select\"\n class=\"btn btn-default btn-sm m-l-auto\"\n type=\"button\"\n [attr.aria-label]=\"'Select' | translate\"\n [tooltip]=\"'Select data point' | translate\"\n [delay]=\"500\"\n (click)=\"addOrRemoveItem()\"\n >{{ 'Select' | translate }}</button>\n </div>\n\n <c8y-li-action\n *ngIf=\"optionToRemove\"\n [icon]=\"'minus-circle'\"\n [label]=\"'Remove from list' | translate\"\n (click)=\"remove()\"\n ></c8y-li-action>\n <c8y-li-action\n *ngFor=\"let action of actions\"\n [icon]=\"action.icon\"\n [label]=\"action.label\"\n (click)=\"action.callback(formGroup.value)\"\n ></c8y-li-action>\n <c8y-li-collapse *ngIf=\"editable\">\n <div class=\"data-point-details\">\n <ul class=\"list-unstyled small m-b-16\">\n <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start text-muted\" translate>Fragment</label>\n <span class=\"m-l-auto\">\n <c8y-highlight\n [text]=\"formGroup.value.fragment\"\n [pattern]=\"highlightText\"\n [shouldTrimPattern]=\"true\"\n ></c8y-highlight>\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start text-muted\" translate>Series</label>\n <span class=\"m-l-auto\">\n <c8y-highlight\n [text]=\"formGroup.value.series\"\n [pattern]=\"highlightText\"\n [shouldTrimPattern]=\"true\"\n ></c8y-highlight>\n </span>\n </li>\n </ul>\n <div\n class=\"form-group form-group-sm\"\n *ngIf=\"datapointLibraryEntries && datapointLibraryEntries | async as libraryEntries\"\n >\n <label>\n {{ 'Data point template' | translate }} \n <button\n class=\"btn-help btn-help--sm\"\n type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"datapointHintPopoverTemplate\"\n (click)=\"$event.stopPropagation()\"\n triggers=\"focus\"\n placement=\"top\"\n ></button>\n </label>\n \n\n <ng-template #datapointHintPopoverTemplate>\n {{\n 'Using a data point template sets color, label, unit and ranges. Removing the template allows you to set the values manually.'\n | translate\n }}\n </ng-template>\n <div class=\"input-group input-group-sm\">\n <c8y-typeahead\n class=\"flex-grow\"\n [placeholder]=\"'No template' | translate\"\n [ngModel]=\"formGroup.value.__template ? formGroup.value.details : undefined\"\n [ngModelOptions]=\"{ standalone: true }\"\n (onSearch)=\"setPipe($event)\"\n [displayProperty]=\"'label'\"\n [hideNew]=\"true\"\n *ngIf=\"datapointLibraryEntries\"\n [disabled]=\"isSelected && disableTypeaheadIfSelected\"\n >\n <c8y-li\n class=\"p-l-8 p-r-8 c8y-list__item--link interact\"\n *c8yFor=\"\n let item of datapointLibraryEntries;\n loadMore: 'auto';\n pipe: filterPipe;\n notFound: notFoundTemplate\n \"\n (click)=\"dataPointTemplateSelected(item)\"\n [active]=\"formGroup.value.__template === item.id\"\n [attr.role]=\"'menuitem'\"\n >\n <c8y-highlight [text]=\"item.c8y_Kpi?.label\" [pattern]=\"pattern\"></c8y-highlight>\n <c8y-li-icon icon=\"circle\" [style.color]=\"item.c8y_Kpi?.color\"></c8y-li-icon>\n </c8y-li>\n <ng-template #notFoundTemplate>\n <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"pattern.length > 0\">\n <span>No match found.</span>\n </c8y-li>\n </ng-template>\n </c8y-typeahead>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-default\"\n type=\"button\"\n [attr.aria-label]=\"'Info' | translate\"\n [popover]=\"datapointOverviewPopoverTemplate\"\n placement=\"left\"\n triggers=\"focus\"\n container=\"body\"\n *ngIf=\"formGroup.value.__template\"\n >\n <i class=\"text-info\" c8yIcon=\"info\"></i>\n </button>\n </div>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-default\"\n type=\"button\"\n tooltip=\"{{ 'Unlink data point template' | translate }}\"\n [attr.aria-label]=\"'Unlink data point template' | translate\"\n [delay]=\"500\"\n placement=\"left\"\n container=\"body\"\n [adaptivePosition]=\"false\"\n *ngIf=\"formGroup.value.__template && hasUnlinkTemplateOption\"\n (click)=\"unlinkDatapointTemplate()\"\n >\n <i c8yIcon=\"unlink\"></i>\n </button>\n </div>\n </div>\n </div>\n <ng-template #datapointOverviewPopoverTemplate>\n <c8y-datapoint-template-popover\n [datapoint]=\"formGroup.value.details\"\n ></c8y-datapoint-template-popover>\n </ng-template>\n <c8y-datapoint-attributes-form\n *ngIf=\"defaultFormOptions\"\n [showTarget]=\"defaultFormOptions.showTarget\"\n [showRange]=\"defaultFormOptions.showRange\"\n [showYellowRange]=\"defaultFormOptions.showYellowRange\"\n [showRedRange]=\"defaultFormOptions.showRedRange\"\n [showChart]=\"defaultFormOptions.showChart\"\n [showFormIfTemplateWasSelected]=\"defaultFormOptions.showFormIfTemplateWasSelected\"\n [selectableChartRenderTypes]=\"defaultFormOptions.selectableChartRenderTypes\"\n [selectableChartLineTypes]=\"defaultFormOptions.selectableChartLineTypes\"\n [selectableAxisTypes]=\"defaultFormOptions.selectableAxisTypes\"\n formControlName=\"details\"\n ></c8y-datapoint-attributes-form>\n </div>\n </c8y-li-collapse>\n</c8y-li>\n" }]
|
|
795
806
|
}], ctorParameters: () => [{ type: i4.FormBuilder }], propDecorators: { defaultFormOptions: [{
|
|
796
807
|
type: Input
|
|
797
808
|
}], isSelected: [{
|
|
798
809
|
type: Input
|
|
799
810
|
}], isCollapsed: [{
|
|
800
811
|
type: Input
|
|
801
|
-
}],
|
|
812
|
+
}], addButtonType: [{
|
|
802
813
|
type: Input
|
|
803
814
|
}], editable: [{
|
|
804
815
|
type: Input
|
|
@@ -887,11 +898,14 @@ class DatapointSelectorComponent {
|
|
|
887
898
|
this.selectedDatapoints = new Array();
|
|
888
899
|
this.defaultActiveState = true;
|
|
889
900
|
this.ignoreDatapointTemplates = false;
|
|
901
|
+
this.datapointTemplatesOnly = false;
|
|
890
902
|
this.guessDatapointUnit = true;
|
|
891
903
|
this.allowSearch = true;
|
|
892
904
|
this.hideSelection = false;
|
|
905
|
+
this.itemsEditable = true;
|
|
893
906
|
this.searchString = '';
|
|
894
907
|
this.maxNumberOfDatapoints = 50;
|
|
908
|
+
this.AddButtonTypes = AddButtonTypes;
|
|
895
909
|
this.loadingDatapoints = false;
|
|
896
910
|
this.assetSelection = new BehaviorSubject(null);
|
|
897
911
|
this.emptyStateSubtitleWhenNoMatchingDataPoints = gettext('Try another search term.');
|
|
@@ -900,6 +914,15 @@ class DatapointSelectorComponent {
|
|
|
900
914
|
this.touched = false;
|
|
901
915
|
}
|
|
902
916
|
ngOnInit() {
|
|
917
|
+
this.selectorTitle = this.datapointTemplatesOnly
|
|
918
|
+
? gettext('Available data point templates')
|
|
919
|
+
: gettext('Available data points');
|
|
920
|
+
this.emptyStateTitle = this.datapointTemplatesOnly
|
|
921
|
+
? gettext('No data point templates to display.')
|
|
922
|
+
: gettext('No data points to display.');
|
|
923
|
+
this.selectedListTitle = this.datapointTemplatesOnly
|
|
924
|
+
? gettext('Selected data point templates')
|
|
925
|
+
: gettext('Selected data points');
|
|
903
926
|
this.setupObservables();
|
|
904
927
|
if (!this.ignoreDatapointTemplates) {
|
|
905
928
|
this.datapointLibraryEntries = from(this.datapointService.getFirstDatapointLibraryPage());
|
|
@@ -959,7 +982,7 @@ class DatapointSelectorComponent {
|
|
|
959
982
|
this.datapoints$ = this.assetSelection.pipe(tap(() => {
|
|
960
983
|
this.loadingDatapoints = true;
|
|
961
984
|
}), switchMap(asset => asset?.id
|
|
962
|
-
? this.datapointService.getDatapointsOfAsset(asset, this.ignoreDatapointTemplates)
|
|
985
|
+
? this.datapointService.getDatapointsOfAsset(asset, this.ignoreDatapointTemplates, this.datapointTemplatesOnly)
|
|
963
986
|
: []), tap(() => (this.loadingDatapoints = false)), shareReplay(1));
|
|
964
987
|
this.searchStringChanges$ = this.searchString$.pipe(distinctUntilChanged(), debounceTime(500), shareReplay(1));
|
|
965
988
|
this.filteredDatapoints$ = combineLatest([this.searchStringChanges$, this.datapoints$]).pipe(map(([searchString, datapoints]) => {
|
|
@@ -1006,13 +1029,13 @@ class DatapointSelectorComponent {
|
|
|
1006
1029
|
return false;
|
|
1007
1030
|
}
|
|
1008
1031
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointSelectorComponent, deps: [{ token: DatapointLibraryService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1009
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatapointSelectorComponent, selector: "c8y-datapoint-selector", inputs: { contextAsset: "contextAsset", allowChangingContext: "allowChangingContext", allowDatapointsFromMultipleAssets: "allowDatapointsFromMultipleAssets", defaultActiveState: "defaultActiveState", ignoreDatapointTemplates: "ignoreDatapointTemplates", guessDatapointUnit: "guessDatapointUnit", allowSearch: "allowSearch", hideSelection: "hideSelection" }, providers: [
|
|
1032
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatapointSelectorComponent, selector: "c8y-datapoint-selector", inputs: { contextAsset: "contextAsset", allowChangingContext: "allowChangingContext", allowDatapointsFromMultipleAssets: "allowDatapointsFromMultipleAssets", defaultActiveState: "defaultActiveState", ignoreDatapointTemplates: "ignoreDatapointTemplates", datapointTemplatesOnly: "datapointTemplatesOnly", guessDatapointUnit: "guessDatapointUnit", allowSearch: "allowSearch", hideSelection: "hideSelection", itemsEditable: "itemsEditable" }, providers: [
|
|
1010
1033
|
{
|
|
1011
1034
|
provide: NG_VALUE_ACCESSOR,
|
|
1012
1035
|
multi: true,
|
|
1013
1036
|
useExisting: forwardRef(() => DatapointSelectorComponent)
|
|
1014
1037
|
}
|
|
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]=\"
|
|
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" }] }); }
|
|
1016
1039
|
}
|
|
1017
1040
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointSelectorComponent, decorators: [{
|
|
1018
1041
|
type: Component,
|
|
@@ -1022,7 +1045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1022
1045
|
multi: true,
|
|
1023
1046
|
useExisting: forwardRef(() => DatapointSelectorComponent)
|
|
1024
1047
|
}
|
|
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]=\"
|
|
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" }]
|
|
1026
1049
|
}], ctorParameters: () => [{ type: DatapointLibraryService }], propDecorators: { contextAsset: [{
|
|
1027
1050
|
type: Input
|
|
1028
1051
|
}], allowChangingContext: [{
|
|
@@ -1033,12 +1056,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1033
1056
|
type: Input
|
|
1034
1057
|
}], ignoreDatapointTemplates: [{
|
|
1035
1058
|
type: Input
|
|
1059
|
+
}], datapointTemplatesOnly: [{
|
|
1060
|
+
type: Input
|
|
1036
1061
|
}], guessDatapointUnit: [{
|
|
1037
1062
|
type: Input
|
|
1038
1063
|
}], allowSearch: [{
|
|
1039
1064
|
type: Input
|
|
1040
1065
|
}], hideSelection: [{
|
|
1041
1066
|
type: Input
|
|
1067
|
+
}], itemsEditable: [{
|
|
1068
|
+
type: Input
|
|
1042
1069
|
}] } });
|
|
1043
1070
|
|
|
1044
1071
|
class DatapointSelectorModalComponent {
|
|
@@ -1055,6 +1082,8 @@ class DatapointSelectorModalComponent {
|
|
|
1055
1082
|
this.defaultActiveState = true;
|
|
1056
1083
|
this.finishWithFirstSelection = false;
|
|
1057
1084
|
this.ignoreDatapointTemplates = false;
|
|
1085
|
+
this.itemsEditable = true;
|
|
1086
|
+
this.datapointTemplatesOnly = false;
|
|
1058
1087
|
this.assetSelectorConfig = {};
|
|
1059
1088
|
this.result = new Promise((resolve, reject) => {
|
|
1060
1089
|
this.save = resolve;
|
|
@@ -1088,11 +1117,11 @@ class DatapointSelectorModalComponent {
|
|
|
1088
1117
|
modalContainer.style.zIndex = '1060';
|
|
1089
1118
|
}
|
|
1090
1119
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointSelectorModalComponent, deps: [{ token: i1$1.BsModalRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1091
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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" }] }); }
|
|
1120
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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 [datapointTemplatesOnly]=\"datapointTemplatesOnly\"\n [itemsEditable]=\"itemsEditable\"\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", "datapointTemplatesOnly", "guessDatapointUnit", "allowSearch", "hideSelection", "itemsEditable"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
|
|
1092
1121
|
}
|
|
1093
1122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointSelectorModalComponent, decorators: [{
|
|
1094
1123
|
type: Component,
|
|
1095
|
-
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" }]
|
|
1124
|
+
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 [datapointTemplatesOnly]=\"datapointTemplatesOnly\"\n [itemsEditable]=\"itemsEditable\"\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" }]
|
|
1096
1125
|
}], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i0.ElementRef }] });
|
|
1097
1126
|
|
|
1098
1127
|
class DatapointSelectorService {
|
|
@@ -1133,6 +1162,7 @@ class DatapointSelectionListComponent {
|
|
|
1133
1162
|
this.resolveContext = true;
|
|
1134
1163
|
this.listTitle = '';
|
|
1135
1164
|
this.maxActiveCountReached = false;
|
|
1165
|
+
this.AddButtonTypes = AddButtonTypes;
|
|
1136
1166
|
this.usedValidators = {};
|
|
1137
1167
|
this.formArray = this.formBuilder.array([]);
|
|
1138
1168
|
this.isValid = this.formArray.statusChanges.pipe(map(status => status === 'VALID'));
|
|
@@ -1234,7 +1264,7 @@ class DatapointSelectionListComponent {
|
|
|
1234
1264
|
useExisting: forwardRef(() => DatapointSelectionListComponent),
|
|
1235
1265
|
multi: true
|
|
1236
1266
|
}
|
|
1237
|
-
], usesOnChanges: true, ngImport: i0, template: "<div class=\"card-header separator sticky-top bg-inherit\">\n <span\n class=\"card-title h4\"\n *ngIf=\"listTitle\"\n >\n {{ listTitle | translate }}\n </span>\n <span\n class=\"card-title h4\"\n *ngIf=\"!listTitle\"\n >\n {{ 'Data points' | translate }}\n </span>\n</div>\n\n<c8y-list-group\n class=\"flex-grow ff-scroll-fix cdk-droplist\"\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListDisabled]=\"!allowDragAndDrop || formArray.controls?.length < 2\"\n>\n <div\n class=\"alert alert-warning m-t-8\"\n role=\"alert\"\n ngNonBindable\n *ngIf=\"formArray.errors?.minActiveCount\"\n translate\n [translateParams]=\"formArray.errors?.minActiveCount\"\n >\n At least {{ minActive }} active data points must be selected.\n </div>\n\n <div\n class=\"alert alert-warning m-t-8\"\n role=\"alert\"\n ngNonBindable\n *ngIf=\"formArray.errors?.maxActiveCount\"\n translate\n [translateParams]=\"formArray.errors?.maxActiveCount\"\n >\n At maximum {{ maxActive }} active data points are allowed to be selected.\n </div>\n\n <ng-content select=\".alert\"></ng-content>\n\n <div\n class=\"p-t-8\"\n *ngIf=\"!formArray.controls?.length\"\n >\n <c8y-ui-empty-state\n class=\"p-t-8\"\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points to display.' | translate\"\n [subtitle]=\"'Add your first data point.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n <div\n [formGroup]=\"dpForm\"\n *ngFor=\"let dpForm of formArray.controls; let index = index\"\n >\n <c8y-datapoint-selector-list-item\n class=\"d-block\"\n [defaultFormOptions]=\"defaultFormOptions\"\n [activeToggleDisabled]=\"maxActiveCountReached\"\n [showActiveToggle]=\"true\"\n [
|
|
1267
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"card-header separator sticky-top bg-inherit\">\n <span\n class=\"card-title h4\"\n *ngIf=\"listTitle\"\n >\n {{ listTitle | translate }}\n </span>\n <span\n class=\"card-title h4\"\n *ngIf=\"!listTitle\"\n >\n {{ 'Data points' | translate }}\n </span>\n</div>\n\n<c8y-list-group\n class=\"flex-grow ff-scroll-fix cdk-droplist\"\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListDisabled]=\"!allowDragAndDrop || formArray.controls?.length < 2\"\n>\n <div\n class=\"alert alert-warning m-t-8\"\n role=\"alert\"\n ngNonBindable\n *ngIf=\"formArray.errors?.minActiveCount\"\n translate\n [translateParams]=\"formArray.errors?.minActiveCount\"\n >\n At least {{ minActive }} active data points must be selected.\n </div>\n\n <div\n class=\"alert alert-warning m-t-8\"\n role=\"alert\"\n ngNonBindable\n *ngIf=\"formArray.errors?.maxActiveCount\"\n translate\n [translateParams]=\"formArray.errors?.maxActiveCount\"\n >\n At maximum {{ maxActive }} active data points are allowed to be selected.\n </div>\n\n <ng-content select=\".alert\"></ng-content>\n\n <div\n class=\"p-t-8\"\n *ngIf=\"!formArray.controls?.length\"\n >\n <c8y-ui-empty-state\n class=\"p-t-8\"\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points to display.' | translate\"\n [subtitle]=\"'Add your first data point.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n <div\n [formGroup]=\"dpForm\"\n *ngFor=\"let dpForm of formArray.controls; let index = index\"\n >\n <c8y-datapoint-selector-list-item\n class=\"d-block\"\n [defaultFormOptions]=\"defaultFormOptions\"\n [activeToggleDisabled]=\"maxActiveCountReached\"\n [showActiveToggle]=\"true\"\n [addButtonType]=\"AddButtonTypes.none\"\n [showOptions]=\"true\"\n [editable]=\"true\"\n [colorPickerDisabled]=\"false\"\n [actions]=\"actions\"\n [optionToRemove]=\"true\"\n [datapointLibraryEntries]=\"datapointLibraryEntries\"\n [hasUnlinkTemplateOption]=\"true\"\n formControlName=\"details\"\n (removed)=\"onItemRemoved(index)\"\n cdkDrag\n >\n <c8y-li-drag-handle\n title=\"{{ 'Click and drag to reorder' | translate }}\"\n cdkDragHandle\n >\n <i c8yIcon=\"drag-reorder\"></i>\n </c8y-li-drag-handle>\n </c8y-datapoint-selector-list-item>\n </div>\n</c8y-list-group>\n\n<div class=\"card-footer bg-inherit\">\n <button\n class=\"btn btn-default btn-sm\"\n [title]=\"'Add data point' | translate\"\n type=\"button\"\n data-cy=\"c8y-datapoint-selection-list--add-datapoint-button\"\n (click)=\"add()\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' | translate }}\n </button>\n</div>\n", dependencies: [{ 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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" }] }); }
|
|
1238
1268
|
}
|
|
1239
1269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointSelectionListComponent, decorators: [{
|
|
1240
1270
|
type: Component,
|
|
@@ -1249,7 +1279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1249
1279
|
useExisting: forwardRef(() => DatapointSelectionListComponent),
|
|
1250
1280
|
multi: true
|
|
1251
1281
|
}
|
|
1252
|
-
], template: "<div class=\"card-header separator sticky-top bg-inherit\">\n <span\n class=\"card-title h4\"\n *ngIf=\"listTitle\"\n >\n {{ listTitle | translate }}\n </span>\n <span\n class=\"card-title h4\"\n *ngIf=\"!listTitle\"\n >\n {{ 'Data points' | translate }}\n </span>\n</div>\n\n<c8y-list-group\n class=\"flex-grow ff-scroll-fix cdk-droplist\"\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListDisabled]=\"!allowDragAndDrop || formArray.controls?.length < 2\"\n>\n <div\n class=\"alert alert-warning m-t-8\"\n role=\"alert\"\n ngNonBindable\n *ngIf=\"formArray.errors?.minActiveCount\"\n translate\n [translateParams]=\"formArray.errors?.minActiveCount\"\n >\n At least {{ minActive }} active data points must be selected.\n </div>\n\n <div\n class=\"alert alert-warning m-t-8\"\n role=\"alert\"\n ngNonBindable\n *ngIf=\"formArray.errors?.maxActiveCount\"\n translate\n [translateParams]=\"formArray.errors?.maxActiveCount\"\n >\n At maximum {{ maxActive }} active data points are allowed to be selected.\n </div>\n\n <ng-content select=\".alert\"></ng-content>\n\n <div\n class=\"p-t-8\"\n *ngIf=\"!formArray.controls?.length\"\n >\n <c8y-ui-empty-state\n class=\"p-t-8\"\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points to display.' | translate\"\n [subtitle]=\"'Add your first data point.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n <div\n [formGroup]=\"dpForm\"\n *ngFor=\"let dpForm of formArray.controls; let index = index\"\n >\n <c8y-datapoint-selector-list-item\n class=\"d-block\"\n [defaultFormOptions]=\"defaultFormOptions\"\n [activeToggleDisabled]=\"maxActiveCountReached\"\n [showActiveToggle]=\"true\"\n [
|
|
1282
|
+
], template: "<div class=\"card-header separator sticky-top bg-inherit\">\n <span\n class=\"card-title h4\"\n *ngIf=\"listTitle\"\n >\n {{ listTitle | translate }}\n </span>\n <span\n class=\"card-title h4\"\n *ngIf=\"!listTitle\"\n >\n {{ 'Data points' | translate }}\n </span>\n</div>\n\n<c8y-list-group\n class=\"flex-grow ff-scroll-fix cdk-droplist\"\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListDisabled]=\"!allowDragAndDrop || formArray.controls?.length < 2\"\n>\n <div\n class=\"alert alert-warning m-t-8\"\n role=\"alert\"\n ngNonBindable\n *ngIf=\"formArray.errors?.minActiveCount\"\n translate\n [translateParams]=\"formArray.errors?.minActiveCount\"\n >\n At least {{ minActive }} active data points must be selected.\n </div>\n\n <div\n class=\"alert alert-warning m-t-8\"\n role=\"alert\"\n ngNonBindable\n *ngIf=\"formArray.errors?.maxActiveCount\"\n translate\n [translateParams]=\"formArray.errors?.maxActiveCount\"\n >\n At maximum {{ maxActive }} active data points are allowed to be selected.\n </div>\n\n <ng-content select=\".alert\"></ng-content>\n\n <div\n class=\"p-t-8\"\n *ngIf=\"!formArray.controls?.length\"\n >\n <c8y-ui-empty-state\n class=\"p-t-8\"\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points to display.' | translate\"\n [subtitle]=\"'Add your first data point.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n <div\n [formGroup]=\"dpForm\"\n *ngFor=\"let dpForm of formArray.controls; let index = index\"\n >\n <c8y-datapoint-selector-list-item\n class=\"d-block\"\n [defaultFormOptions]=\"defaultFormOptions\"\n [activeToggleDisabled]=\"maxActiveCountReached\"\n [showActiveToggle]=\"true\"\n [addButtonType]=\"AddButtonTypes.none\"\n [showOptions]=\"true\"\n [editable]=\"true\"\n [colorPickerDisabled]=\"false\"\n [actions]=\"actions\"\n [optionToRemove]=\"true\"\n [datapointLibraryEntries]=\"datapointLibraryEntries\"\n [hasUnlinkTemplateOption]=\"true\"\n formControlName=\"details\"\n (removed)=\"onItemRemoved(index)\"\n cdkDrag\n >\n <c8y-li-drag-handle\n title=\"{{ 'Click and drag to reorder' | translate }}\"\n cdkDragHandle\n >\n <i c8yIcon=\"drag-reorder\"></i>\n </c8y-li-drag-handle>\n </c8y-datapoint-selector-list-item>\n </div>\n</c8y-list-group>\n\n<div class=\"card-footer bg-inherit\">\n <button\n class=\"btn btn-default btn-sm\"\n [title]=\"'Add data point' | translate\"\n type=\"button\"\n data-cy=\"c8y-datapoint-selection-list--add-datapoint-button\"\n (click)=\"add()\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' | translate }}\n </button>\n</div>\n" }]
|
|
1253
1283
|
}], ctorParameters: () => [{ type: DatapointSelectorService }, { type: DatapointLibraryService }, { type: i4.FormBuilder }, { type: i4$2.WidgetConfigComponent, decorators: [{
|
|
1254
1284
|
type: Optional
|
|
1255
1285
|
}] }], propDecorators: { actions: [{
|
|
@@ -1382,5 +1412,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1382
1412
|
* Generated bundle index. Do not edit.
|
|
1383
1413
|
*/
|
|
1384
1414
|
|
|
1385
|
-
export { AXIS_TYPES, CHART_LINE_TYPES, CHART_RENDER_TYPES, DATAPOINT_LIBRARY_FRAGMENT, DatapointAttributesFormComponent, DatapointAttributesFormValidationService, DatapointLabelPipe, DatapointLibraryService, DatapointSelectionListComponent, DatapointSelectorComponent, DatapointSelectorListItemComponent, DatapointSelectorModalComponent, DatapointSelectorModule, DatapointSelectorService, DatapointTemplatePopoverComponent, IncludesDatapointPipe };
|
|
1415
|
+
export { AXIS_TYPES, AddButtonTypes, CHART_LINE_TYPES, CHART_RENDER_TYPES, DATAPOINT_LIBRARY_FRAGMENT, DatapointAttributesFormComponent, DatapointAttributesFormValidationService, DatapointLabelPipe, DatapointLibraryService, DatapointSelectionListComponent, DatapointSelectorComponent, DatapointSelectorListItemComponent, DatapointSelectorModalComponent, DatapointSelectorModule, DatapointSelectorService, DatapointTemplatePopoverComponent, IncludesDatapointPipe };
|
|
1386
1416
|
//# sourceMappingURL=c8y-ngx-components-datapoint-selector.mjs.map
|