@c8y/ngx-components 1023.17.6 → 1023.17.8

package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs

@@ -237,15 +237,15 @@ class DatapointsGraphWidgetConfigComponent {
         const datapoints = this._config().datapoints || [];
         this.activeDatapointsExists = datapoints.filter(dp => dp.__active).length > 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsGraphWidgetConfigComponent, deps: [{ token: i1.WidgetConfigComponent, optional: true }, { token: i1.ContextDashboardComponent, optional: true }, { token: i2.DynamicComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatapointsGraphWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-config", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsGraphWidgetConfigComponent, deps: [{ token: i1.WidgetConfigComponent, optional: true }, { token: i1.ContextDashboardComponent, optional: true }, { token: i2.DynamicComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DatapointsGraphWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-config", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [
             ChartEventsService,
             ChartAlarmsService,
             ChartHelpersService,
             WidgetTimeContextDateRangeService
         ], viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["dataPointsGraphPreview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <c8y-datapoint-selection-list\n    class=\"bg-component separator-bottom d-block\"\n    name=\"datapoints\"\n    [minActiveCount]=\"1\"\n    [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n    [config]=\"datapointSelectionConfig\"\n    formControlName=\"datapoints\"\n  ></c8y-datapoint-selection-list>\n\n  <c8y-alarm-event-selection-list\n    class=\"bg-component separator-bottom d-block\"\n    name=\"alarms\"\n    formControlName=\"alarms\"\n    [timelineType]=\"'ALARM'\"\n    [datapoints]=\"config?.datapoints\"\n  ></c8y-alarm-event-selection-list>\n\n  <c8y-alarm-event-selection-list\n    class=\"bg-inherit\"\n    name=\"events\"\n    formControlName=\"events\"\n    [timelineType]=\"'EVENT'\"\n    [datapoints]=\"config?.datapoints\"\n  ></c8y-alarm-event-selection-list>\n\n  <div class=\"form-group form-group-sm\">\n    <label\n      [title]=\"'Number of decimal places' | translate\"\n      translate\n    >\n      Number of decimal places\n    </label>\n    <input\n      class=\"form-control\"\n      name=\"numberOfDecimalPlaces\"\n      type=\"number\"\n      formControlName=\"numberOfDecimalPlaces\"\n      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n    />\n    <c8y-messages\n      [show]=\"\n        formGroup.controls?.numberOfDecimalPlaces?.touched &&\n        formGroup?.controls?.numberOfDecimalPlaces?.errors\n      \"\n    ></c8y-messages>\n  </div>\n  <c8y-form-group class=\"form-group-sm\">\n    <label>\n      {{ 'Data point legend display' | translate }}\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      [formGroup]=\"formGroup\"\n    >\n      <select\n        class=\"form-control\"\n        [title]=\"'Data point legend display' | translate\"\n        id=\"dataPointLegendDisplay\"\n        formControlName=\"dataPointLegendDisplay\"\n      >\n        @for (option of legendDisplayOptions; track option) {\n          <option [ngValue]=\"option.value\">\n            {{ option.label | translate }}\n          </option>\n        }\n      </select>\n    </div>\n  </c8y-form-group>\n</form>\n\n<form\n  class=\"d-block p-t-8\"\n  [formGroup]=\"formGroup\"\n>\n  <label>{{ 'Display options' | translate }}</label>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Axis' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Y-axis helper lines' | translate\"\n      >\n        <input\n          name=\"yAxisSplitLines\"\n          type=\"checkbox\"\n          formControlName=\"yAxisSplitLines\"\n        />\n        <span></span>\n        <span translate>Y-axis helper lines</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'X-axis helper lines' | translate\"\n      >\n        <input\n          name=\"xAxisSplitLines\"\n          type=\"checkbox\"\n          formControlName=\"xAxisSplitLines\"\n        />\n        <span></span>\n        <span translate>X-axis helper lines</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Merge matching data points into single axis' | translate\"\n      >\n        <input\n          name=\"mergeMatchingDatapoints\"\n          type=\"checkbox\"\n          formControlName=\"mergeMatchingDatapoints\"\n        />\n        <span></span>\n        <span translate>Merge matching data points into single axis</span>\n        <button\n          class=\"btn-help\"\n          [attr.aria-label]=\"\n            'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n              | translate\n          \"\n          [popover]=\"\n            'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n              | translate\n          \"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          (click)=\"$event.stopPropagation()\"\n          [adaptivePosition]=\"false\"\n        ></button>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Force merge all data points into single axis' | translate\"\n      >\n        <input\n          name=\"forceMergeDatapoints\"\n          type=\"checkbox\"\n          formControlName=\"forceMergeDatapoints\"\n        />\n        <span></span>\n        <span translate>Force merge all datapoints into a single axis</span>\n        <button\n          class=\"btn-help\"\n          [attr.aria-label]=\"\n            'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n              | translate\n          \"\n          [popover]=\"\n            'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n              | translate\n          \"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          (click)=\"$event.stopPropagation()\"\n          [adaptivePosition]=\"false\"\n        ></button>\n      </label>\n    </c8y-form-group>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Alarms & events' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show vertical line on every occurrence' | translate\"\n      >\n        <input\n          name=\"displayMarkedLine\"\n          type=\"checkbox\"\n          formControlName=\"displayMarkedLine\"\n        />\n        <span></span>\n        <span translate>Show vertical line on every occurrence</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show icon when triggered' | translate\"\n      >\n        <input\n          name=\"displayMarkedPoint\"\n          type=\"checkbox\"\n          formControlName=\"displayMarkedPoint\"\n        />\n        <span></span>\n        <span translate>Show icon when triggered</span>\n        @if (alarmsOrEventsHaveNoMatchingDps) {\n          <button\n            class=\"btn-clean m-l-8\"\n            [attr.aria-label]=\"\n              'Some alarms or events have no matching data points. No icons will be shown for them.'\n                | translate\n            \"\n            [tooltip]=\"\n              'Some alarms or events have no matching data points. No icons will be shown for them.'\n                | translate\n            \"\n            container=\"body\"\n            type=\"button\"\n            (click)=\"$event.stopPropagation()\"\n            [adaptivePosition]=\"false\"\n          >\n            <i\n              class=\"text-warning\"\n              c8yIcon=\"exclamation-triangle\"\n            ></i>\n          </button>\n        }\n      </label>\n    </c8y-form-group>\n  </fieldset>\n  <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n    <legend>{{ 'Chart' | translate }}</legend>\n    <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show labels and units' | translate\"\n      >\n        <input\n          name=\"showLabelAndUnit\"\n          type=\"checkbox\"\n          formControlName=\"showLabelAndUnit\"\n        />\n        <span></span>\n        <span translate>Display labels and units on Y-axis</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show slider' | translate\"\n      >\n        <input\n          name=\"showSlider\"\n          type=\"checkbox\"\n          formControlName=\"showSlider\"\n        />\n        <span></span>\n        <span translate>Show slider</span>\n      </label>\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"'Show smooth lines' | translate\"\n      >\n        <input\n          name=\"smoothLines\"\n          type=\"checkbox\"\n          formControlName=\"smoothLines\"\n        />\n        <span></span>\n        <span translate>Show smooth lines</span>\n      </label>\n    </c8y-form-group>\n  </fieldset>\n</form>\n\n<ng-template #dataPointsGraphPreview>\n  @if (widgetControls) {\n    <c8y-global-context-widget-wrapper\n      [config]=\"config\"\n      [displayMode]=\"'preview'\"\n      [widgetControls]=\"widgetControls\"\n    ></c8y-global-context-widget-wrapper>\n  }\n\n  @if (activeDatapointsExists) {\n    <c8y-charts\n      class=\"d-block p-relative\"\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n  }\n\n  @if (!activeDatapointsExists) {\n    <c8y-ui-empty-state\n      class=\"d-block m-t-24\"\n      [icon]=\"'search'\"\n      [title]=\"'No data points selected' | translate\"\n      [subtitle]=\"'Select data point to render content' | translate\"\n      data-cy=\"datapoints-graph-list--empty-state-no-data-point-selected\"\n    >\n      <p c8y-guide-docs>\n        <small translate>\n          Find out more in the\n          <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-graph\">\n            user documentation\n          </a>\n          .\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.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: "ngmodule", type: PopoverModule }, { 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: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "updateAggregatedSliderDatapoint"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i6.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i7.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config"], outputs: ["globalContextChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsGraphWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsGraphWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-datapoints-graph-widget-config', host: { class: 'd-contents' }, standalone: true, imports: [
                         CommonModule,
@@ -657,10 +657,10 @@ class DatapointsGraphWidgetViewComponent {
             dpOrAlarmOrEvent.__target = { name, id };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsGraphWidgetViewComponent, deps: [{ token: i1$1.TranslateService }, { token: i1.ContextDashboardComponent, optional: true }, { token: i2.DynamicComponentService }, { token: i4$1.WidgetConfigMigrationService }, { token: i2.WidgetTimeContextDateRangeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatapointsGraphWidgetViewComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-view", inputs: { config: "config" }, providers: [ChartEventsService, ChartAlarmsService, WidgetTimeContextDateRangeService], viewQueries: [{ propertyName: "wrapper", first: true, predicate: GlobalContextWidgetWrapperComponent, descendants: true }, { propertyName: "chartComponent", first: true, predicate: ChartsComponent, descendants: true }], ngImport: i0, template: "@if (widgetControls) {\n  <c8y-global-context-widget-wrapper\n    [widgetControls]=\"widgetControls\"\n    [isLoading]=\"isLoading$ | async\"\n    [config]=\"displayConfig\"\n    (globalContextChange)=\"onGlobalContextChange($event)\"\n  ></c8y-global-context-widget-wrapper>\n}\n<div\n  class=\"p-l-16 p-r-16\"\n  style=\"min-height: 34px\"\n>\n  <div class=\"d-flex gap-16 a-i-center\">\n    @if (hasAtLeastOneAlarmActive) {\n      <c8y-alarms-filter\n        class=\"d-contents form-group-sm min-width-0\"\n        (onFilterApplied)=\"filterSeverity($event)\"\n      ></c8y-alarms-filter>\n    }\n    @if (displayConfig?.datapoints.length > 0) {\n      <div class=\"d-flex a-i-center min-width-0\">\n        @if (\n          displayConfig.dataPointLegendDisplay === 'dropdown' ||\n          (displayConfig.dataPointLegendDisplay === 'auto' && totalLegendItems > 5)\n        ) {\n          <c8y-select\n            class=\"min-width-0 c8y-select-v2--sm\"\n            aria-label=\"Select datapoints, alarms or events\"\n            [placeholder]=\"'Select datapoints, alarms or events' | translate\"\n            [multi]=\"true\"\n            [filterItems]=\"true\"\n            [(ngModel)]=\"selectedItems\"\n            (onSelect)=\"onItemSelected($event)\"\n            (onDeselect)=\"onItemDeselected($event)\"\n          >\n            @for (item of selectableItems; track item.value) {\n              <div\n                class=\"d-flex a-i-center gap-4\"\n                *c8ySelectItem=\"item.value; label: item.label\"\n              >\n                @if (\n                  !hasAtLeastOneDatapointActive &&\n                  item.value.type === 'DATAPOINT' &&\n                  item.value.original.__active\n                ) {\n                  <i\n                    class=\"text-warning m-r-4\"\n                    c8yIcon=\"exclamation-triangle\"\n                    [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                    container=\"body\"\n                    data-cy=\"datapoint-warning-icon\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                }\n                @if (item.value.type === 'DATAPOINT') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [style.background-color]=\"item.value.original.color\"\n                  ></span>\n                }\n                @if (item.value.type === 'ALARM') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [style.background-color]=\"item.value.original.color\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      c8yIcon=\"bell\"\n                    ></i>\n                  </span>\n                }\n                @if (item.value.type === 'EVENT') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [ngStyle]=\"{ 'background-color': item.value.original.color }\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      c8yIcon=\"online1\"\n                    ></i>\n                  </span>\n                }\n                <span class=\"text-truncate d-col\">\n                  <small class=\"text-truncate\">{{ item.value.original.label }}</small>\n                  <span class=\"text-muted text-10\">{{ item.value.original.__target?.name }}</span>\n                </span>\n              </div>\n            }\n            <span\n              class=\"tag tag--info chip\"\n              title=\"{{ selectedItem.label }}\"\n              *c8ySelectedItems=\"let selectedItem\"\n            >\n              <button\n                class=\"btn btn-xs btn-clean text-10\"\n                title=\"{{ selectedItem.label }}\"\n                type=\"button\"\n                (click)=\"\n                  $event.preventDefault(); $event.stopPropagation(); onItemDeselected(selectedItem)\n                \"\n              >\n                <i c8yIcon=\"times\"></i>\n              </button>\n              @if (isLastActiveDatapoint(selectedItem)) {\n                <i\n                  class=\"text-warning a-s-start\"\n                  c8yIcon=\"exclamation-triangle\"\n                  [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                  container=\"body\"\n                  data-cy=\"datapoint-warning-icon\"\n                  [adaptivePosition]=\"false\"\n                ></i>\n              }\n              @if (selectedItem.value.type === 'DATAPOINT') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [style.background-color]=\"selectedItem.value?.original.color || ''\"\n                ></span>\n              }\n              @if (selectedItem.value?.type === 'ALARM') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [style.background-color]=\"selectedItem.value?.original.color || ''\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    c8yIcon=\"bell\"\n                  ></i>\n                </span>\n              }\n              @if (selectedItem.value?.type === 'EVENT') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [ngStyle]=\"{\n                    'background-color': selectedItem.value?.original.color || ''\n                  }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    c8yIcon=\"online1\"\n                  ></i>\n                </span>\n              }\n            </span>\n          </c8y-select>\n        } @else {\n          <div class=\"inner-scroll\">\n            <div class=\"p-t-4 d-flex a-i-start gap-8\">\n              @for (datapoint of displayConfig.datapoints; track datapoint) {\n                @if (datapoint.retrievalError) {\n                  <i\n                    class=\"text-warning m-l-4\"\n                    c8yIcon=\"exclamation-triangle\"\n                    [tooltip]=\"'Data point no longer exists.' | translate\"\n                    container=\"body\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                } @else {\n                  <div\n                    class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                    title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n                    [ngClass]=\"{ active: datapoint.__active }\"\n                  >\n                    @if (!hasAtLeastOneDatapointActive && datapoint.__active) {\n                      <i\n                        class=\"text-warning m-l-4\"\n                        c8yIcon=\"exclamation-triangle\"\n                        [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                        container=\"body\"\n                        data-cy=\"datapoint-warning-icon\"\n                        [adaptivePosition]=\"false\"\n                      ></i>\n                    }\n                    <button\n                      class=\"c8y-datapoint-pill__btn\"\n                      title=\"{{\n                        (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n                      }} \"\n                      type=\"button\"\n                      data-cy=\"datapoint-toggle-visibility-btn\"\n                      (click)=\"toggleChart(datapoint)\"\n                    >\n                      <i\n                        class=\"icon-14\"\n                        [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n                      ></i>\n                    </button>\n                    <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                      <i\n                        class=\"m-r-4 icon-14\"\n                        c8yIcon=\"circle\"\n                        [ngStyle]=\"{\n                          color: datapoint.color\n                        }\"\n                      ></i>\n                      <span\n                        class=\"text-truncate\"\n                        [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n                      >\n                        <span class=\"text-truncate text-bold\">\n                          {{ datapoint.label }}\n                        </span>\n                        <small class=\"text-muted text-10\">\n                          {{ datapoint.__target.name }}\n                        </small>\n                      </span>\n                      @if (datapointsOutOfSync.get(datapoint)) {\n                        <i\n                          class=\"text-warning m-l-4\"\n                          c8yIcon=\"exclamation-triangle\"\n                          [tooltip]=\"\n                            'Measurements received for this data point may be out of sync.'\n                              | translate\n                          \"\n                          container=\"body\"\n                          [adaptivePosition]=\"false\"\n                        ></i>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n\n              @for (alarm of alarms; track alarm) {\n                <div\n                  class=\"c8y-alarm-pill pill--sm flex-no-shrink\"\n                  title=\"{{ alarm.filters.type }} \"\n                >\n                  @if (displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)) {\n                    <i\n                      class=\"text-warning m-l-4\"\n                      c8yIcon=\"exclamation-triangle\"\n                      [tooltip]=\"\n                        'Alarm of this type is currently active and outside of the selected time range'\n                          | translate\n                      \"\n                      container=\"body\"\n                      [adaptivePosition]=\"false\"\n                    ></i>\n                  }\n                  <button\n                    class=\"c8y-alarm-pill__btn\"\n                    title=\"{{ alarm.filters.type }} \"\n                    type=\"button\"\n                    (click)=\"toggleAlarmEventType(alarm)\"\n                  >\n                    <i\n                      class=\"icon-14\"\n                      [c8yIcon]=\"\n                        alarm.__hidden || !alarm.__active\n                          ? 'eye-slash text-muted'\n                          : 'eye text-primary'\n                      \"\n                    ></i>\n                  </button>\n                  <button\n                    class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n                    (click)=\"toggleMarkedArea(alarm)\"\n                    [ngClass]=\"{\n                      active:\n                        !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n                    }\"\n                  >\n                    <span\n                      class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                      [style.background-color]=\"alarm.color\"\n                    >\n                      <i\n                        class=\"stroked-icon\"\n                        c8yIcon=\"bell\"\n                      ></i>\n                    </span>\n                    <span\n                      class=\"text-truncate\"\n                      [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n                    >\n                      <span class=\"text-truncate text-bold\">\n                        {{ alarm.filters.type }}\n                      </span>\n                      <small class=\"text-muted text-10\">\n                        {{ alarm.__target.name }}\n                      </small>\n                    </span>\n                  </button>\n                </div>\n              }\n\n              @for (event of events; track event) {\n                <div\n                  class=\"c8y-event-pill pill--sm flex-no-shrink\"\n                  title=\"{{ event.filters.type }}\"\n                >\n                  <button\n                    class=\"c8y-event-pill__btn\"\n                    title=\"{{ event.filters.type }} \"\n                    type=\"button\"\n                    (click)=\"toggleAlarmEventType(event)\"\n                  >\n                    <i\n                      class=\"icon-14\"\n                      [c8yIcon]=\"\n                        event.__hidden || !event.__active\n                          ? 'eye-slash text-muted'\n                          : 'eye text-primary'\n                      \"\n                    ></i>\n                  </button>\n                  <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n                    <span\n                      class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                      [ngStyle]=\"{ 'background-color': event.color }\"\n                    >\n                      <i\n                        class=\"stroked-icon\"\n                        c8yIcon=\"online1\"\n                      ></i>\n                    </span>\n                    <span\n                      class=\"text-truncate text-bold\"\n                      [ngClass]=\"{ 'text-muted': event.__hidden }\"\n                    >\n                      <span class=\"text-truncate\">\n                        {{ event.filters.type }}\n                      </span>\n                      <small class=\"text-muted text-10\">\n                        {{ event.__target.name }}\n                      </small>\n                    </span>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n          <button\n            class=\"btn-help btn-help--sm m-r-8\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"legendHelpTemplate\"\n            placement=\"left\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        }\n      </div>\n    }\n    <button\n      class=\"btn btn-default btn-sm flex-no-shrink m-l-auto\"\n      [attr.aria-label]=\"'Save as image' | translate\"\n      tooltip=\"{{ 'Save as image' | translate }}\"\n      container=\"body\"\n      type=\"button\"\n      (click)=\"chartComponent.saveAsImage()\"\n      [adaptivePosition]=\"false\"\n    >\n      <i\n        class=\"icon-14\"\n        c8yIcon=\"image-file-checked\"\n      ></i>\n    </button>\n  </div>\n</div>\n\n@if (globalContextState !== null) {\n  <c8y-charts\n    #chart\n    [config]=\"globalContextState\"\n    [alerts]=\"alerts\"\n    [chartViewContext]=\"chartViewContext\"\n    (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n    (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n    (finishLoading)=\"this.isLoading$.next($event)\"\n    (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n  ></c8y-charts>\n}\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "updateAggregatedSliderDatapoint"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: i2.SelectComponent, selector: "c8y-select", inputs: ["placeholder", "items", "selected", "container", "multi", "canSelectWithSpace", "disabled", "autoClose", "insideClick", "required", "canDeselect", "name", "icon", "filterItems"], outputs: ["onSelect", "onDeselect", "onIconClick"] }, { kind: "directive", type: i2.SelectItemDirective, selector: "[c8ySelectItem]", inputs: ["c8ySelectItem", "c8ySelectItemLabel"] }, { kind: "directive", type: i2.SelectedItemsDirective, selector: "[c8ySelectedItems]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.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: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: PopoverModule }, { 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: "ngmodule", type: AlarmsModule }, { kind: "component", type: i9.AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config"], outputs: ["globalContextChange"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsGraphWidgetViewComponent, deps: [{ token: i1$1.TranslateService }, { token: i1.ContextDashboardComponent, optional: true }, { token: i2.DynamicComponentService }, { token: i4$1.WidgetConfigMigrationService }, { token: i2.WidgetTimeContextDateRangeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DatapointsGraphWidgetViewComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-view", inputs: { config: "config" }, providers: [ChartEventsService, ChartAlarmsService, WidgetTimeContextDateRangeService], viewQueries: [{ propertyName: "wrapper", first: true, predicate: GlobalContextWidgetWrapperComponent, descendants: true }, { propertyName: "chartComponent", first: true, predicate: ChartsComponent, descendants: true }], ngImport: i0, template: "@if (widgetControls) {\n  <c8y-global-context-widget-wrapper\n    [widgetControls]=\"widgetControls\"\n    [isLoading]=\"isLoading$ | async\"\n    [config]=\"displayConfig\"\n    (globalContextChange)=\"onGlobalContextChange($event)\"\n  ></c8y-global-context-widget-wrapper>\n}\n<div\n  class=\"p-l-16 p-r-16\"\n  style=\"min-height: 34px\"\n>\n  <div class=\"d-flex gap-16 a-i-center\">\n    @if (hasAtLeastOneAlarmActive) {\n      <c8y-alarms-filter\n        class=\"d-contents form-group-sm min-width-0\"\n        (onFilterApplied)=\"filterSeverity($event)\"\n      ></c8y-alarms-filter>\n    }\n    @if (displayConfig?.datapoints.length > 0) {\n      <div class=\"d-flex a-i-center min-width-0\">\n        @if (\n          displayConfig.dataPointLegendDisplay === 'dropdown' ||\n          (displayConfig.dataPointLegendDisplay === 'auto' && totalLegendItems > 5)\n        ) {\n          <c8y-select\n            class=\"min-width-0 c8y-select-v2--sm\"\n            aria-label=\"Select datapoints, alarms or events\"\n            [placeholder]=\"'Select datapoints, alarms or events' | translate\"\n            [multi]=\"true\"\n            [filterItems]=\"true\"\n            [(ngModel)]=\"selectedItems\"\n            (onSelect)=\"onItemSelected($event)\"\n            (onDeselect)=\"onItemDeselected($event)\"\n          >\n            @for (item of selectableItems; track item.value) {\n              <div\n                class=\"d-flex a-i-center gap-4\"\n                *c8ySelectItem=\"item.value; label: item.label\"\n              >\n                @if (\n                  !hasAtLeastOneDatapointActive &&\n                  item.value.type === 'DATAPOINT' &&\n                  item.value.original.__active\n                ) {\n                  <i\n                    class=\"text-warning m-r-4\"\n                    c8yIcon=\"exclamation-triangle\"\n                    [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                    container=\"body\"\n                    data-cy=\"datapoint-warning-icon\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                }\n                @if (item.value.type === 'DATAPOINT') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [style.background-color]=\"item.value.original.color\"\n                  ></span>\n                }\n                @if (item.value.type === 'ALARM') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [style.background-color]=\"item.value.original.color\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      c8yIcon=\"bell\"\n                    ></i>\n                  </span>\n                }\n                @if (item.value.type === 'EVENT') {\n                  <span\n                    class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n                    [ngStyle]=\"{ 'background-color': item.value.original.color }\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      c8yIcon=\"online1\"\n                    ></i>\n                  </span>\n                }\n                <span class=\"text-truncate d-col\">\n                  <small class=\"text-truncate\">{{ item.value.original.label }}</small>\n                  <span class=\"text-muted text-10\">{{ item.value.original.__target?.name }}</span>\n                </span>\n              </div>\n            }\n            <span\n              class=\"tag tag--info chip\"\n              title=\"{{ selectedItem.label }}\"\n              *c8ySelectedItems=\"let selectedItem\"\n            >\n              <button\n                class=\"btn btn-xs btn-clean text-10\"\n                title=\"{{ selectedItem.label }}\"\n                type=\"button\"\n                (click)=\"\n                  $event.preventDefault(); $event.stopPropagation(); onItemDeselected(selectedItem)\n                \"\n              >\n                <i c8yIcon=\"times\"></i>\n              </button>\n              @if (isLastActiveDatapoint(selectedItem)) {\n                <i\n                  class=\"text-warning a-s-start\"\n                  c8yIcon=\"exclamation-triangle\"\n                  [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                  container=\"body\"\n                  data-cy=\"datapoint-warning-icon\"\n                  [adaptivePosition]=\"false\"\n                ></i>\n              }\n              @if (selectedItem.value.type === 'DATAPOINT') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [style.background-color]=\"selectedItem.value?.original.color || ''\"\n                ></span>\n              }\n              @if (selectedItem.value?.type === 'ALARM') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [style.background-color]=\"selectedItem.value?.original.color || ''\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    c8yIcon=\"bell\"\n                  ></i>\n                </span>\n              }\n              @if (selectedItem.value?.type === 'EVENT') {\n                <span\n                  class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                  [ngStyle]=\"{\n                    'background-color': selectedItem.value?.original.color || ''\n                  }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    c8yIcon=\"online1\"\n                  ></i>\n                </span>\n              }\n            </span>\n          </c8y-select>\n        } @else {\n          <div class=\"inner-scroll\">\n            <div class=\"p-t-4 d-flex a-i-start gap-8\">\n              @for (datapoint of displayConfig.datapoints; track datapoint) {\n                @if (datapoint.retrievalError) {\n                  <i\n                    class=\"text-warning m-l-4\"\n                    c8yIcon=\"exclamation-triangle\"\n                    [tooltip]=\"'Data point no longer exists.' | translate\"\n                    container=\"body\"\n                    [adaptivePosition]=\"false\"\n                  ></i>\n                } @else {\n                  <div\n                    class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n                    title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n                    [ngClass]=\"{ active: datapoint.__active }\"\n                  >\n                    @if (!hasAtLeastOneDatapointActive && datapoint.__active) {\n                      <i\n                        class=\"text-warning m-l-4\"\n                        c8yIcon=\"exclamation-triangle\"\n                        [tooltip]=\"'At least 1 data point must be active.' | translate\"\n                        container=\"body\"\n                        data-cy=\"datapoint-warning-icon\"\n                        [adaptivePosition]=\"false\"\n                      ></i>\n                    }\n                    <button\n                      class=\"c8y-datapoint-pill__btn\"\n                      title=\"{{\n                        (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n                      }} \"\n                      type=\"button\"\n                      data-cy=\"datapoint-toggle-visibility-btn\"\n                      (click)=\"toggleChart(datapoint)\"\n                    >\n                      <i\n                        class=\"icon-14\"\n                        [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n                      ></i>\n                    </button>\n                    <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n                      <i\n                        class=\"m-r-4 icon-14\"\n                        c8yIcon=\"circle\"\n                        [ngStyle]=\"{\n                          color: datapoint.color\n                        }\"\n                      ></i>\n                      <span\n                        class=\"text-truncate\"\n                        [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n                      >\n                        <span class=\"text-truncate text-bold\">\n                          {{ datapoint.label }}\n                        </span>\n                        <small class=\"text-muted text-10\">\n                          {{ datapoint.__target.name }}\n                        </small>\n                      </span>\n                      @if (datapointsOutOfSync.get(datapoint)) {\n                        <i\n                          class=\"text-warning m-l-4\"\n                          c8yIcon=\"exclamation-triangle\"\n                          [tooltip]=\"\n                            'Measurements received for this data point may be out of sync.'\n                              | translate\n                          \"\n                          container=\"body\"\n                          [adaptivePosition]=\"false\"\n                        ></i>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n\n              @for (alarm of alarms; track alarm) {\n                <div\n                  class=\"c8y-alarm-pill pill--sm flex-no-shrink\"\n                  title=\"{{ alarm.filters.type }} \"\n                >\n                  @if (displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)) {\n                    <i\n                      class=\"text-warning m-l-4\"\n                      c8yIcon=\"exclamation-triangle\"\n                      [tooltip]=\"\n                        'Alarm of this type is currently active and outside of the selected time range'\n                          | translate\n                      \"\n                      container=\"body\"\n                      [adaptivePosition]=\"false\"\n                    ></i>\n                  }\n                  <button\n                    class=\"c8y-alarm-pill__btn\"\n                    title=\"{{ alarm.filters.type }} \"\n                    type=\"button\"\n                    (click)=\"toggleAlarmEventType(alarm)\"\n                  >\n                    <i\n                      class=\"icon-14\"\n                      [c8yIcon]=\"\n                        alarm.__hidden || !alarm.__active\n                          ? 'eye-slash text-muted'\n                          : 'eye text-primary'\n                      \"\n                    ></i>\n                  </button>\n                  <button\n                    class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n                    (click)=\"toggleMarkedArea(alarm)\"\n                    [ngClass]=\"{\n                      active:\n                        !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n                    }\"\n                  >\n                    <span\n                      class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                      [style.background-color]=\"alarm.color\"\n                    >\n                      <i\n                        class=\"stroked-icon\"\n                        c8yIcon=\"bell\"\n                      ></i>\n                    </span>\n                    <span\n                      class=\"text-truncate\"\n                      [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n                    >\n                      <span class=\"text-truncate text-bold\">\n                        {{ alarm.filters.type }}\n                      </span>\n                      <small class=\"text-muted text-10\">\n                        {{ alarm.__target.name }}\n                      </small>\n                    </span>\n                  </button>\n                </div>\n              }\n\n              @for (event of events; track event) {\n                <div\n                  class=\"c8y-event-pill pill--sm flex-no-shrink\"\n                  title=\"{{ event.filters.type }}\"\n                >\n                  <button\n                    class=\"c8y-event-pill__btn\"\n                    title=\"{{ event.filters.type }} \"\n                    type=\"button\"\n                    (click)=\"toggleAlarmEventType(event)\"\n                  >\n                    <i\n                      class=\"icon-14\"\n                      [c8yIcon]=\"\n                        event.__hidden || !event.__active\n                          ? 'eye-slash text-muted'\n                          : 'eye text-primary'\n                      \"\n                    ></i>\n                  </button>\n                  <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n                    <span\n                      class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                      [ngStyle]=\"{ 'background-color': event.color }\"\n                    >\n                      <i\n                        class=\"stroked-icon\"\n                        c8yIcon=\"online1\"\n                      ></i>\n                    </span>\n                    <span\n                      class=\"text-truncate text-bold\"\n                      [ngClass]=\"{ 'text-muted': event.__hidden }\"\n                    >\n                      <span class=\"text-truncate\">\n                        {{ event.filters.type }}\n                      </span>\n                      <small class=\"text-muted text-10\">\n                        {{ event.__target.name }}\n                      </small>\n                    </span>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n          <button\n            class=\"btn-help btn-help--sm m-r-8\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"legendHelpTemplate\"\n            placement=\"left\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        }\n      </div>\n    }\n    <button\n      class=\"btn btn-default btn-sm flex-no-shrink m-l-auto\"\n      [attr.aria-label]=\"'Save as image' | translate\"\n      tooltip=\"{{ 'Save as image' | translate }}\"\n      container=\"body\"\n      type=\"button\"\n      (click)=\"chartComponent.saveAsImage()\"\n      [adaptivePosition]=\"false\"\n    >\n      <i\n        class=\"icon-14\"\n        c8yIcon=\"image-file-checked\"\n      ></i>\n    </button>\n  </div>\n</div>\n\n@if (globalContextState !== null) {\n  <c8y-charts\n    #chart\n    [config]=\"globalContextState\"\n    [alerts]=\"alerts\"\n    [chartViewContext]=\"chartViewContext\"\n    (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n    (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n    (finishLoading)=\"this.isLoading$.next($event)\"\n    (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n  ></c8y-charts>\n}\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "updateAggregatedSliderDatapoint"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: i2.SelectComponent, selector: "c8y-select", inputs: ["placeholder", "items", "selected", "container", "multi", "canSelectWithSpace", "disabled", "autoClose", "insideClick", "required", "canDeselect", "name", "icon", "filterItems"], outputs: ["onSelect", "onDeselect", "onIconClick"] }, { kind: "directive", type: i2.SelectItemDirective, selector: "[c8ySelectItem]", inputs: ["c8ySelectItem", "c8ySelectItemLabel"] }, { kind: "directive", type: i2.SelectedItemsDirective, selector: "[c8ySelectedItems]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.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: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: PopoverModule }, { 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: "ngmodule", type: AlarmsModule }, { kind: "component", type: i9.AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config"], outputs: ["globalContextChange"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsGraphWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsGraphWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-datapoints-graph-widget-view', standalone: true, imports: [
                         A11yModule,

package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-table.mjs

@@ -462,10 +462,10 @@ class DatapointsTableViewService {
     setToLastDayOfPreviousMonth(date) {
         date.setUTCDate(0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsTableViewService, deps: [{ token: i1.DataFetchingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsTableViewService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableViewService, deps: [{ token: i1.DataFetchingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableViewService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsTableViewService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableViewService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -649,10 +649,10 @@ class AdjustAggregatedTimeRangePipe {
             return `${hours.toString().padStart(2, '0')}:${useHourOnly ? '00' : minutes}`;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdjustAggregatedTimeRangePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AdjustAggregatedTimeRangePipe, isStandalone: true, name: "adjustAggregatedTimeRange" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdjustAggregatedTimeRangePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AdjustAggregatedTimeRangePipe, isStandalone: true, name: "adjustAggregatedTimeRange" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdjustAggregatedTimeRangePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdjustAggregatedTimeRangePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'adjustAggregatedTimeRange',
@@ -683,10 +683,10 @@ class ApplyRangeClassPipe {
         }
         return 'default';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ApplyRangeClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ApplyRangeClassPipe, isStandalone: true, name: "applyRangeClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApplyRangeClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ApplyRangeClassPipe, isStandalone: true, name: "applyRangeClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ApplyRangeClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApplyRangeClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'applyRangeClass',
@@ -723,10 +723,10 @@ class ColumnTitlePipe {
         }
         return `${label} ${unit} (${renderType})`.trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ColumnTitlePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ColumnTitlePipe, isStandalone: true, name: "columnTitle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColumnTitlePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ColumnTitlePipe, isStandalone: true, name: "columnTitle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ColumnTitlePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColumnTitlePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'columnTitle',
@@ -790,10 +790,10 @@ class VirtualScrollListenerDirective {
             this.ngZone.run(() => this.scrolledToTop.emit());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VirtualScrollListenerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: VirtualScrollListenerDirective, isStandalone: true, selector: "[c8yVirtualScrollListener]", inputs: { scrollThreshold: "scrollThreshold" }, outputs: { scrolled: "scrolled", scrolledToTop: "scrolledToTop" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: VirtualScrollListenerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: VirtualScrollListenerDirective, isStandalone: true, selector: "[c8yVirtualScrollListener]", inputs: { scrollThreshold: "scrollThreshold" }, outputs: { scrolled: "scrolled", scrolledToTop: "scrolledToTop" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VirtualScrollListenerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: VirtualScrollListenerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c8yVirtualScrollListener]',
@@ -834,10 +834,10 @@ class DynamicColumnDirective {
             this.renderer.addClass(this.el.nativeElement, className);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicColumnDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: DynamicColumnDirective, isStandalone: true, selector: "[c8yDynamicColumn]", inputs: { numberOfColumns: ["c8yDynamicColumn", "numberOfColumns"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicColumnDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: DynamicColumnDirective, isStandalone: true, selector: "[c8yDynamicColumn]", inputs: { numberOfColumns: ["c8yDynamicColumn", "numberOfColumns"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c8yDynamicColumn]',
@@ -918,10 +918,10 @@ class DatapointsTableComponent {
             type: 'system'
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DatapointsTableComponent, isStandalone: true, selector: "c8y-datapoints-table", inputs: { aggregationType: "aggregationType", datapointsTableItems: "datapointsTableItems", devicesColumnHeaders: "devicesColumnHeaders", decimalPlaces: "decimalPlaces", hasMultipleDatapoints: "hasMultipleDatapoints", isLoading: "isLoading", seriesWithoutPermissionToReadCount: "seriesWithoutPermissionToReadCount" }, outputs: { isScrolling: "isScrolling" }, host: { classAttribute: "d-col flex-grow" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!hasNoPermissionsToReadAnyMeasurement; else missingAllPermissions\">\n  <div class=\"c8y-cq-440\">\n    <div\n      class=\"hidden-xs c8y-list__item c8y-list--timeline hidden-cq\"\n      [ngClass]=\"{ 'separator-top-bottom': devicesColumnHeaders.length > 0 }\"\n    >\n      <div class=\"d-flex container-fluid\">\n        <div class=\"c8y-list--timeline__item__date\"></div>\n        <div class=\"c8y-list__item__block flex-grow min-width-0\">\n          <div class=\"c8y-list__item__body\">\n            <div class=\"d-flex row\">\n              <ng-container *ngIf=\"hasMultipleDatapoints\">\n                <div\n                  class=\"min-width-0\"\n                  [title]=\"'Device' | translate\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                >\n                  <span class=\"text-medium text-truncate\">\n                    {{ 'Device' | translate }}\n                  </span>\n                </div>\n              </ng-container>\n              <!-- Data points column headers -->\n              <ng-container *ngFor=\"let header of devicesColumnHeaders\">\n                <div\n                  class=\"min-width-0\"\n                  title=\"{{ header | columnTitle }}\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                >\n                  <span class=\"text-medium text-truncate\">\n                    {{ header.label }} {{ header.unit }}\n                  </span>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- The record list -->\n  <ng-container *ngIf=\"!isLoading; else loading\">\n    <ng-container *ngIf=\"datapointsTableItems.length; else emptyState\">\n      <c8y-list-group\n        class=\"p-t-8 flex-grow c8y-cq-440\"\n        c8yVirtualScrollListener\n        (scrolled)=\"onListScrolled()\"\n        (scrolledToTop)=\"onListScrolledToTop()\"\n      >\n        <c8y-li-timeline\n          *c8yFor=\"\n            let tableItem of { data: datapointsTableItems, res: null };\n            enableVirtualScroll: true;\n            virtualScrollElementSize: 48;\n            virtualScrollStrategy: 'fixed'\n          \"\n        >\n          {{ tableItem.dateAndTime | c8yDate: 'mediumDate' }}\n          {{\n            tableItem.dateAndTime\n              | c8yDate: 'mediumTime'\n              | adjustAggregatedTimeRange: aggregationType\n          }}\n          <c8y-li>\n            <c8y-li-body>\n              <div class=\"d-flex row\">\n                <div\n                  class=\"min-width-0\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                  *ngIf=\"devicesColumnHeaders.length > 1\"\n                  [attr.data-label]=\"'Device' | translate\"\n                >\n                  <div\n                    class=\"text-truncate\"\n                    title=\"{{ tableItem.deviceName }}\"\n                  >\n                    {{ tableItem.deviceName }}\n                  </div>\n                </div>\n                <!-- Data point value row cells -->\n                <ng-container *ngFor=\"let row of tableItem.rowItems\">\n                  <ng-container *ngIf=\"row !== null; else emptyRowContent\">\n                    <ng-container [ngSwitch]=\"row.renderType\">\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        *ngSwitchCase=\"'min'\"\n                        [attr.data-label]=\"row.label\"\n                      >\n                        <div\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </div>\n                      </div>\n                      <div\n                        class=\"col-md-4\"\n                        [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n                        *ngSwitchCase=\"'max'\"\n                      >\n                        <div\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\"\n                        >\n                          {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n                        </div>\n                      </div>\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        *ngSwitchCase=\"'area'\"\n                      >\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                        ...\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\"\n                          [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n                        </span>\n                      </div>\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        *ngSwitchDefault\n                      >\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #emptyRowContent>\n                    <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\"></div>\n                  </ng-template>\n                </ng-container>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </c8y-li-timeline>\n      </c8y-list-group>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<ng-template #loading>\n  <c8y-loading></c8y-loading>\n</ng-template>\n<ng-template #emptyState>\n  <div class=\"p-relative p-l-24\">\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-alert-idle'\"\n      [title]=\"'No data to display.' | translate\"\n      [horizontal]=\"true\"\n      data-cy=\"datapoints-table-list--empty-state\"\n    >\n      <p c8y-guide-docs>\n        <small translate>\n          Find out more in the\n          <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-table\">\n            user documentation\n          </a>\n          .\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  </div>\n</ng-template>\n<ng-template #missingAllPermissions>\n  <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n    <div class=\"center-block\">\n      <c8y-dynamic-component-alerts\n        [alerts]=\"missingAllPermissionsAlert\"\n      ></c8y-dynamic-component-alerts>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1$2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1$2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$2.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: i1$2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "ngmodule", type: DocsModule }, { kind: "directive", type: i1$2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1$2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: DynamicColumnDirective, selector: "[c8yDynamicColumn]", inputs: ["c8yDynamicColumn"] }, { kind: "ngmodule", type: DynamicComponentModule }, { kind: "component", type: i1$2.DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i1$2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i1$2.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: VirtualScrollListenerDirective, selector: "[c8yVirtualScrollListener]", inputs: ["scrollThreshold"], outputs: ["scrolled", "scrolledToTop"] }, { kind: "pipe", type: AdjustAggregatedTimeRangePipe, name: "adjustAggregatedTimeRange" }, { kind: "pipe", type: ApplyRangeClassPipe, name: "applyRangeClass" }, { kind: "pipe", type: ColumnTitlePipe, name: "columnTitle" }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$2.DatePipe, name: "c8yDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DatapointsTableComponent, isStandalone: true, selector: "c8y-datapoints-table", inputs: { aggregationType: "aggregationType", datapointsTableItems: "datapointsTableItems", devicesColumnHeaders: "devicesColumnHeaders", decimalPlaces: "decimalPlaces", hasMultipleDatapoints: "hasMultipleDatapoints", isLoading: "isLoading", seriesWithoutPermissionToReadCount: "seriesWithoutPermissionToReadCount" }, outputs: { isScrolling: "isScrolling" }, host: { classAttribute: "d-col flex-grow" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!hasNoPermissionsToReadAnyMeasurement; else missingAllPermissions\">\n  <div class=\"c8y-cq-440\">\n    <div\n      class=\"hidden-xs c8y-list__item c8y-list--timeline hidden-cq\"\n      [ngClass]=\"{ 'separator-top-bottom': devicesColumnHeaders.length > 0 }\"\n    >\n      <div class=\"d-flex container-fluid\">\n        <div class=\"c8y-list--timeline__item__date\"></div>\n        <div class=\"c8y-list__item__block flex-grow min-width-0\">\n          <div class=\"c8y-list__item__body\">\n            <div class=\"d-flex row\">\n              <ng-container *ngIf=\"hasMultipleDatapoints\">\n                <div\n                  class=\"min-width-0\"\n                  [title]=\"'Device' | translate\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                >\n                  <span class=\"text-medium text-truncate\">\n                    {{ 'Device' | translate }}\n                  </span>\n                </div>\n              </ng-container>\n              <!-- Data points column headers -->\n              <ng-container *ngFor=\"let header of devicesColumnHeaders\">\n                <div\n                  class=\"min-width-0\"\n                  title=\"{{ header | columnTitle }}\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                >\n                  <span class=\"text-medium text-truncate\">\n                    {{ header.label }} {{ header.unit }}\n                  </span>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- The record list -->\n  <ng-container *ngIf=\"!isLoading; else loading\">\n    <ng-container *ngIf=\"datapointsTableItems.length; else emptyState\">\n      <c8y-list-group\n        class=\"p-t-8 flex-grow c8y-cq-440\"\n        c8yVirtualScrollListener\n        (scrolled)=\"onListScrolled()\"\n        (scrolledToTop)=\"onListScrolledToTop()\"\n      >\n        <c8y-li-timeline\n          *c8yFor=\"\n            let tableItem of { data: datapointsTableItems, res: null };\n            enableVirtualScroll: true;\n            virtualScrollElementSize: 48;\n            virtualScrollStrategy: 'fixed'\n          \"\n        >\n          {{ tableItem.dateAndTime | c8yDate: 'mediumDate' }}\n          {{\n            tableItem.dateAndTime\n              | c8yDate: 'mediumTime'\n              | adjustAggregatedTimeRange: aggregationType\n          }}\n          <c8y-li>\n            <c8y-li-body>\n              <div class=\"d-flex row\">\n                <div\n                  class=\"min-width-0\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                  *ngIf=\"devicesColumnHeaders.length > 1\"\n                  [attr.data-label]=\"'Device' | translate\"\n                >\n                  <div\n                    class=\"text-truncate\"\n                    title=\"{{ tableItem.deviceName }}\"\n                  >\n                    {{ tableItem.deviceName }}\n                  </div>\n                </div>\n                <!-- Data point value row cells -->\n                <ng-container *ngFor=\"let row of tableItem.rowItems\">\n                  <ng-container *ngIf=\"row !== null; else emptyRowContent\">\n                    <ng-container [ngSwitch]=\"row.renderType\">\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        *ngSwitchCase=\"'min'\"\n                        [attr.data-label]=\"row.label\"\n                      >\n                        <div\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </div>\n                      </div>\n                      <div\n                        class=\"col-md-4\"\n                        [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n                        *ngSwitchCase=\"'max'\"\n                      >\n                        <div\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\"\n                        >\n                          {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n                        </div>\n                      </div>\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        *ngSwitchCase=\"'area'\"\n                      >\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                        ...\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\"\n                          [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n                        </span>\n                      </div>\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        *ngSwitchDefault\n                      >\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #emptyRowContent>\n                    <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\"></div>\n                  </ng-template>\n                </ng-container>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </c8y-li-timeline>\n      </c8y-list-group>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<ng-template #loading>\n  <c8y-loading></c8y-loading>\n</ng-template>\n<ng-template #emptyState>\n  <div class=\"p-relative p-l-24\">\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-alert-idle'\"\n      [title]=\"'No data to display.' | translate\"\n      [horizontal]=\"true\"\n      data-cy=\"datapoints-table-list--empty-state\"\n    >\n      <p c8y-guide-docs>\n        <small translate>\n          Find out more in the\n          <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-table\">\n            user documentation\n          </a>\n          .\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  </div>\n</ng-template>\n<ng-template #missingAllPermissions>\n  <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n    <div class=\"center-block\">\n      <c8y-dynamic-component-alerts\n        [alerts]=\"missingAllPermissionsAlert\"\n      ></c8y-dynamic-component-alerts>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1$2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1$2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$2.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: i1$2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "ngmodule", type: DocsModule }, { kind: "directive", type: i1$2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1$2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: DynamicColumnDirective, selector: "[c8yDynamicColumn]", inputs: ["c8yDynamicColumn"] }, { kind: "ngmodule", type: DynamicComponentModule }, { kind: "component", type: i1$2.DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i1$2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i1$2.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: VirtualScrollListenerDirective, selector: "[c8yVirtualScrollListener]", inputs: ["scrollThreshold"], outputs: ["scrolled", "scrolledToTop"] }, { kind: "pipe", type: AdjustAggregatedTimeRangePipe, name: "adjustAggregatedTimeRange" }, { kind: "pipe", type: ApplyRangeClassPipe, name: "applyRangeClass" }, { kind: "pipe", type: ColumnTitlePipe, name: "columnTitle" }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$2.DatePipe, name: "c8yDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-datapoints-table', host: { class: 'd-col flex-grow' }, standalone: true, imports: [
                         AdjustAggregatedTimeRangePipe,
@@ -1234,10 +1234,10 @@ class DatapointsTableViewWidgetComponent {
             datapoint.__target = { name, id };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsTableViewWidgetComponent, deps: [{ token: i1$2.AlertService }, { token: DatapointsTableViewService }, { token: i1$1.TranslateService }, { token: i2$1.ContextDashboardComponent, optional: true }, { token: i5.WidgetConfigMigrationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DatapointsTableViewWidgetComponent, isStandalone: true, selector: "c8y-datapoints-table-view", inputs: { config: "config", isInPreviewMode: "isInPreviewMode" }, host: { classAttribute: "d-col fit-h" }, viewQueries: [{ propertyName: "globalContextWidgetWrapperComponent", first: true, predicate: GlobalContextWidgetWrapperComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isInPreviewMode\">\n  <div class=\"d-flex gap-16 p-r-16 inner-scroll h-auto min-width-0\">\n    <c8y-global-context-widget-wrapper\n      *ngIf=\"widgetControls\"\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'inline'\"\n      [isLoading]=\"isLoading$ | async\"\n      [config]=\"config\"\n      (globalContextChange)=\"onGlobalContextChange($event)\"\n    ></c8y-global-context-widget-wrapper>\n    <ng-container *ngIf=\"config.datapoints.length > 0\"></ng-container>\n    <c8y-datapoints-export-selector\n      class=\"m-l-auto p-b-8\"\n      [containerClass]=\"containerClass\"\n      [exportConfig]=\"exportConfig\"\n      (isOpen)=\"onExportModalOpen($event)\"\n    ></c8y-datapoints-export-selector>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"devicesColumnHeaders\">\n  <c8y-datapoints-table\n    [aggregationType]=\"config.aggregation\"\n    [datapointsTableItems]=\"datapointsTableItems\"\n    [decimalPlaces]=\"config.decimalPlaces\"\n    [devicesColumnHeaders]=\"devicesColumnHeaders\"\n    [hasMultipleDatapoints]=\"hasMultipleDatapoints\"\n    [isLoading]=\"isLoading$ | async\"\n    [seriesWithoutPermissionToReadCount]=\"seriesWithoutPermissionToRead?.length\"\n    (isScrolling)=\"onScrolling($event)\"\n  ></c8y-datapoints-table>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: DatapointsTableComponent, selector: "c8y-datapoints-table", inputs: ["aggregationType", "datapointsTableItems", "devicesColumnHeaders", "decimalPlaces", "hasMultipleDatapoints", "isLoading", "seriesWithoutPermissionToReadCount"], outputs: ["isScrolling"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config"], outputs: ["globalContextChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableViewWidgetComponent, deps: [{ token: i1$2.AlertService }, { token: DatapointsTableViewService }, { token: i1$1.TranslateService }, { token: i2$1.ContextDashboardComponent, optional: true }, { token: i5.WidgetConfigMigrationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DatapointsTableViewWidgetComponent, isStandalone: true, selector: "c8y-datapoints-table-view", inputs: { config: "config", isInPreviewMode: "isInPreviewMode" }, host: { classAttribute: "d-col fit-h" }, viewQueries: [{ propertyName: "globalContextWidgetWrapperComponent", first: true, predicate: GlobalContextWidgetWrapperComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isInPreviewMode\">\n  <div class=\"d-flex gap-16 p-r-16 inner-scroll h-auto min-width-0\">\n    <c8y-global-context-widget-wrapper\n      *ngIf=\"widgetControls\"\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'inline'\"\n      [isLoading]=\"isLoading$ | async\"\n      [config]=\"config\"\n      (globalContextChange)=\"onGlobalContextChange($event)\"\n    ></c8y-global-context-widget-wrapper>\n    <ng-container *ngIf=\"config.datapoints.length > 0\"></ng-container>\n    <c8y-datapoints-export-selector\n      class=\"m-l-auto p-b-8\"\n      [containerClass]=\"containerClass\"\n      [exportConfig]=\"exportConfig\"\n      (isOpen)=\"onExportModalOpen($event)\"\n    ></c8y-datapoints-export-selector>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"devicesColumnHeaders\">\n  <c8y-datapoints-table\n    [aggregationType]=\"config.aggregation\"\n    [datapointsTableItems]=\"datapointsTableItems\"\n    [decimalPlaces]=\"config.decimalPlaces\"\n    [devicesColumnHeaders]=\"devicesColumnHeaders\"\n    [hasMultipleDatapoints]=\"hasMultipleDatapoints\"\n    [isLoading]=\"isLoading$ | async\"\n    [seriesWithoutPermissionToReadCount]=\"seriesWithoutPermissionToRead?.length\"\n    (isScrolling)=\"onScrolling($event)\"\n  ></c8y-datapoints-table>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: DatapointsTableComponent, selector: "c8y-datapoints-table", inputs: ["aggregationType", "datapointsTableItems", "devicesColumnHeaders", "decimalPlaces", "hasMultipleDatapoints", "isLoading", "seriesWithoutPermissionToReadCount"], outputs: ["isScrolling"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config"], outputs: ["globalContextChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsTableViewWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableViewWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-datapoints-table-view', host: { class: 'd-col fit-h' }, standalone: true, imports: [
                         CommonModule,
@@ -1379,10 +1379,10 @@ class DatapointsTableWidgetConfigComponent {
             ]
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsTableWidgetConfigComponent, deps: [{ token: i1$3.NgForm }, { token: i1$3.FormBuilder }, { token: i2$1.WidgetConfigComponent }, { token: i2$1.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DatapointsTableWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-table-view-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["datapointsTablePreview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-l-24 p-r-24\">\n  <form\n    class=\"no-card-context\"\n    *ngIf=\"formGroup\"\n    [formGroup]=\"formGroup\"\n  >\n    <fieldset class=\"c8y-fieldset\">\n      <legend>\n        {{ 'Decimal places' | translate }}\n      </legend>\n      <c8y-form-group class=\"p-t-8\">\n        <input\n          class=\"form-control\"\n          name=\"decimalPlaces\"\n          type=\"number\"\n          formControlName=\"decimalPlaces\"\n          step=\"1\"\n        />\n      </c8y-form-group>\n    </fieldset>\n    <!-- <datapoints-selector> -->\n    <c8y-datapoint-selection-list\n      class=\"bg-inherit separator-top p-t-16 d-block\"\n      listTitle=\"{{ 'Data points' | translate }}\"\n      name=\"datapoints\"\n      [defaultFormOptions]=\"defaultFormOptions\"\n      [config]=\"datapointSelectionConfig\"\n      [minActiveCount]=\"1\"\n      formControlName=\"datapoints\"\n    ></c8y-datapoint-selection-list>\n  </form>\n</div>\n\n<ng-template #datapointsTablePreview>\n  <ng-container\n    *ngIf=\"formGroup && formGroup.value && formGroup.value.datapoints?.length > 0; else emptyState\"\n  >\n    <c8y-global-context-widget-wrapper\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'preview'\"\n      [config]=\"composedConfig\"\n    ></c8y-global-context-widget-wrapper>\n    <c8y-datapoints-table-view\n      *ngIf=\"composedConfig\"\n      [config]=\"composedConfig\"\n      [isInPreviewMode]=\"true\"\n    ></c8y-datapoints-table-view>\n  </ng-container>\n  <ng-template #emptyState>\n    <div class=\"col-md-6 d-col a-i-start j-c-center\">\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render content' | translate\"\n        [horizontal]=\"false\"\n        data-cy=\"datapoints-table-list--empty-state-no-data-point-selected\"\n      >\n        <p c8y-guide-docs>\n          <small translate>\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-table\">\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  </ng-template>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1$2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1$2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i1$2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1$2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1$2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i5$1.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "component", type: DatapointsTableViewWidgetComponent, selector: "c8y-datapoints-table-view", inputs: ["config", "isInPreviewMode"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config"], outputs: ["globalContextChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableWidgetConfigComponent, deps: [{ token: i1$3.NgForm }, { token: i1$3.FormBuilder }, { token: i2$1.WidgetConfigComponent }, { token: i2$1.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DatapointsTableWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-table-view-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["datapointsTablePreview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-l-24 p-r-24\">\n  <form\n    class=\"no-card-context\"\n    *ngIf=\"formGroup\"\n    [formGroup]=\"formGroup\"\n  >\n    <fieldset class=\"c8y-fieldset\">\n      <legend>\n        {{ 'Decimal places' | translate }}\n      </legend>\n      <c8y-form-group class=\"p-t-8\">\n        <input\n          class=\"form-control\"\n          name=\"decimalPlaces\"\n          type=\"number\"\n          formControlName=\"decimalPlaces\"\n          step=\"1\"\n        />\n      </c8y-form-group>\n    </fieldset>\n    <!-- <datapoints-selector> -->\n    <c8y-datapoint-selection-list\n      class=\"bg-inherit separator-top p-t-16 d-block\"\n      listTitle=\"{{ 'Data points' | translate }}\"\n      name=\"datapoints\"\n      [defaultFormOptions]=\"defaultFormOptions\"\n      [config]=\"datapointSelectionConfig\"\n      [minActiveCount]=\"1\"\n      formControlName=\"datapoints\"\n    ></c8y-datapoint-selection-list>\n  </form>\n</div>\n\n<ng-template #datapointsTablePreview>\n  <ng-container\n    *ngIf=\"formGroup && formGroup.value && formGroup.value.datapoints?.length > 0; else emptyState\"\n  >\n    <c8y-global-context-widget-wrapper\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'preview'\"\n      [config]=\"composedConfig\"\n    ></c8y-global-context-widget-wrapper>\n    <c8y-datapoints-table-view\n      *ngIf=\"composedConfig\"\n      [config]=\"composedConfig\"\n      [isInPreviewMode]=\"true\"\n    ></c8y-datapoints-table-view>\n  </ng-container>\n  <ng-template #emptyState>\n    <div class=\"col-md-6 d-col a-i-start j-c-center\">\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render content' | translate\"\n        [horizontal]=\"false\"\n        data-cy=\"datapoints-table-list--empty-state-no-data-point-selected\"\n      >\n        <p c8y-guide-docs>\n          <small translate>\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-table\">\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  </ng-template>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1$2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1$2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i1$2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1$2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1$2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i5$1.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "component", type: DatapointsTableViewWidgetComponent, selector: "c8y-datapoints-table-view", inputs: ["config", "isInPreviewMode"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config"], outputs: ["globalContextChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointsTableWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-datapoints-table-view-config', standalone: true, imports: [
                         CoreModule,

package/fesm2022/c8y-ngx-components-widgets-implementations-device-control-message.mjs

@@ -72,10 +72,10 @@ class DeviceControlMessageWidgetViewComponent {
             this.alert.addServerFailure(e);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DeviceControlMessageWidgetViewComponent, deps: [{ token: i1.AlertService }, { token: i2.OperationService }, { token: i3.TranslateService }, { token: i4.ContextDashboardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DeviceControlMessageWidgetViewComponent, isStandalone: true, selector: "c8y-device-control-message-widget-view", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"operationSupportedByDevice$ | async\" class=\"input-group p-16\">\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    data-cy=\"c8y-device-control-message-widget-view--message-textbox\"\n    [(ngModel)]=\"messageToBeSent\"\n    placeholder=\"{{ 'Message' | translate }}\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      title=\"{{ 'Send' | translate }}\"\n      class=\"btn btn-primary\"\n      data-cy=\"c8y-device-control-message-widget-view--send-button\"\n      (click)=\"sendMessage()\"\n      [disabled]=\"!messageToBeSent\"\n      translate\n    >\n      Send\n    </button>\n  </span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceControlMessageWidgetViewComponent, deps: [{ token: i1.AlertService }, { token: i2.OperationService }, { token: i3.TranslateService }, { token: i4.ContextDashboardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DeviceControlMessageWidgetViewComponent, isStandalone: true, selector: "c8y-device-control-message-widget-view", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"operationSupportedByDevice$ | async\" class=\"input-group p-16\">\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    data-cy=\"c8y-device-control-message-widget-view--message-textbox\"\n    [(ngModel)]=\"messageToBeSent\"\n    placeholder=\"{{ 'Message' | translate }}\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      title=\"{{ 'Send' | translate }}\"\n      class=\"btn btn-primary\"\n      data-cy=\"c8y-device-control-message-widget-view--send-button\"\n      (click)=\"sendMessage()\"\n      [disabled]=\"!messageToBeSent\"\n      translate\n    >\n      Send\n    </button>\n  </span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DeviceControlMessageWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceControlMessageWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-device-control-message-widget-view', standalone: true, imports: [CoreModule, ReactiveFormsModule], template: "<div *ngIf=\"operationSupportedByDevice$ | async\" class=\"input-group p-16\">\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    data-cy=\"c8y-device-control-message-widget-view--message-textbox\"\n    [(ngModel)]=\"messageToBeSent\"\n    placeholder=\"{{ 'Message' | translate }}\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      title=\"{{ 'Send' | translate }}\"\n      class=\"btn btn-primary\"\n      data-cy=\"c8y-device-control-message-widget-view--send-button\"\n      (click)=\"sendMessage()\"\n      [disabled]=\"!messageToBeSent\"\n      translate\n    >\n      Send\n    </button>\n  </span>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AlertService }, { type: i2.OperationService }, { type: i3.TranslateService }, { type: i4.ContextDashboardComponent, decorators: [{

package/fesm2022/c8y-ngx-components-widgets-implementations-device-management-welcome.mjs

@@ -84,10 +84,10 @@ class WelcomeToDeviceManagementComponent {
         }
         return navNode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WelcomeToDeviceManagementComponent, deps: [{ token: i1.Router }, { token: i2.NavigatorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: WelcomeToDeviceManagementComponent, isStandalone: true, selector: "c8y-welcome-to-devicemanagement", ngImport: i0, template: "<div\n  class=\"welcome-widget\"\n  tabindex=\"0\"\n>\n  <div\n    class=\"p-16 text-center\"\n    *ngIf=\"isLoading\"\n  >\n    <c8y-loading></c8y-loading>\n  </div>\n  <div\n    class=\"d-flex fit-h\"\n    *ngIf=\"!isLoading\"\n  >\n    <div class=\"col-xs-12 a-s-stretch col-md-12\">\n      <div class=\"card-group interact-grid fit-h\">\n        <div\n          class=\"col-xs-4 no-gutter\"\n          *ngFor=\"let link of quickLinks\"\n        >\n          <button\n            class=\"btn-clean card text-pre-normal\"\n            [title]=\"link.label | translate\"\n            type=\"button\"\n            [ngClass]=\"{ 'm-b-0': true }\"\n            (click)=\"link.click ? link.click() : false\"\n            c8yProductExperience\n            [actionName]=\"'welcomeWidgetClicked'\"\n            [actionData]=\"{ link: link.label }\"\n            data-cy=\"devicemanagement-welcome--quick-link\"\n          >\n            <c8y-quick-link\n              [icon]=\"link.icon\"\n              [label]=\"link.label\"\n            ></c8y-quick-link>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuickLinkComponent, selector: "c8y-quick-link", inputs: ["icon", "label"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WelcomeToDeviceManagementComponent, deps: [{ token: i1.Router }, { token: i2.NavigatorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WelcomeToDeviceManagementComponent, isStandalone: true, selector: "c8y-welcome-to-devicemanagement", ngImport: i0, template: "<div\n  class=\"welcome-widget\"\n  tabindex=\"0\"\n>\n  <div\n    class=\"p-16 text-center\"\n    *ngIf=\"isLoading\"\n  >\n    <c8y-loading></c8y-loading>\n  </div>\n  <div\n    class=\"d-flex fit-h\"\n    *ngIf=\"!isLoading\"\n  >\n    <div class=\"col-xs-12 a-s-stretch col-md-12\">\n      <div class=\"card-group interact-grid fit-h\">\n        <div\n          class=\"col-xs-4 no-gutter\"\n          *ngFor=\"let link of quickLinks\"\n        >\n          <button\n            class=\"btn-clean card text-pre-normal\"\n            [title]=\"link.label | translate\"\n            type=\"button\"\n            [ngClass]=\"{ 'm-b-0': true }\"\n            (click)=\"link.click ? link.click() : false\"\n            c8yProductExperience\n            [actionName]=\"'welcomeWidgetClicked'\"\n            [actionData]=\"{ link: link.label }\"\n            data-cy=\"devicemanagement-welcome--quick-link\"\n          >\n            <c8y-quick-link\n              [icon]=\"link.icon\"\n              [label]=\"link.label\"\n            ></c8y-quick-link>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuickLinkComponent, selector: "c8y-quick-link", inputs: ["icon", "label"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WelcomeToDeviceManagementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WelcomeToDeviceManagementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-welcome-to-devicemanagement', imports: [
                         NgIf,
@@ -104,11 +104,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * @deprecated
  */
 class DeviceManagementWelcomeWidgetModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, imports: [CoreModule, QuickLinkModule, RouterModule, WelcomeToDeviceManagementComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, imports: [CoreModule, QuickLinkModule, RouterModule, WelcomeToDeviceManagementComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, imports: [CoreModule, QuickLinkModule, RouterModule, WelcomeToDeviceManagementComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, imports: [CoreModule, QuickLinkModule, RouterModule, WelcomeToDeviceManagementComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CoreModule, QuickLinkModule, RouterModule, WelcomeToDeviceManagementComponent]

package/fesm2022/c8y-ngx-components-widgets-implementations-help-and-service-widget.mjs

@@ -95,10 +95,10 @@ class HelpAndServiceViewComponent {
     findNavigatorNode(nodeName, navNodes = []) {
         return navNodes.find((node) => node.label === nodeName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HelpAndServiceViewComponent, deps: [{ token: i1.DocsService }, { token: i1.AppStateService }, { token: i1.NavigatorService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HelpAndServiceViewComponent, isStandalone: true, selector: "c8y-help-and-service-view", ngImport: i0, template: "<div class=\"card-group-block\">\n  <a\n    class=\"card card--btn\"\n    title=\"{{ link.label | translate }}\"\n    role=\"button\"\n    [attr.target]=\"link.target\"\n    *ngFor=\"let link of links$ | async\"\n    rel=\"noopener noreferrer\"\n    [href]=\"link.url ? link.url : '#'\"\n    (click)=\"openLink(link, $event)\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.EVENTS.HELP_AND_SERVICE_LINKS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.COMPONENTS.HELP_AND_SERVICE_COMPONENT,\n      action: link.label\n    }\"\n  >\n    <div class=\"card-block text-center\">\n      <div class=\"icon-32\">\n        <i\n          class=\"c8y-icon-duocolor\"\n          [c8yIcon]=\"link.icon\"\n        ></i>\n      </div>\n      <small class=\"text-muted\">{{ link.label | translate }}</small>\n    </div>\n  </a>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HelpAndServiceViewComponent, deps: [{ token: i1.DocsService }, { token: i1.AppStateService }, { token: i1.NavigatorService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: HelpAndServiceViewComponent, isStandalone: true, selector: "c8y-help-and-service-view", ngImport: i0, template: "<div class=\"card-group-block\">\n  <a\n    class=\"card card--btn\"\n    title=\"{{ link.label | translate }}\"\n    role=\"button\"\n    [attr.target]=\"link.target\"\n    *ngFor=\"let link of links$ | async\"\n    rel=\"noopener noreferrer\"\n    [href]=\"link.url ? link.url : '#'\"\n    (click)=\"openLink(link, $event)\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.EVENTS.HELP_AND_SERVICE_LINKS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.COMPONENTS.HELP_AND_SERVICE_COMPONENT,\n      action: link.label\n    }\"\n  >\n    <div class=\"card-block text-center\">\n      <div class=\"icon-32\">\n        <i\n          class=\"c8y-icon-duocolor\"\n          [c8yIcon]=\"link.icon\"\n        ></i>\n      </div>\n      <small class=\"text-muted\">{{ link.label | translate }}</small>\n    </div>\n  </a>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HelpAndServiceViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HelpAndServiceViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-help-and-service-view', standalone: true, imports: [CoreModule, ReactiveFormsModule], template: "<div class=\"card-group-block\">\n  <a\n    class=\"card card--btn\"\n    title=\"{{ link.label | translate }}\"\n    role=\"button\"\n    [attr.target]=\"link.target\"\n    *ngFor=\"let link of links$ | async\"\n    rel=\"noopener noreferrer\"\n    [href]=\"link.url ? link.url : '#'\"\n    (click)=\"openLink(link, $event)\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.EVENTS.HELP_AND_SERVICE_LINKS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.COMPONENTS.HELP_AND_SERVICE_COMPONENT,\n      action: link.label\n    }\"\n  >\n    <div class=\"card-block text-center\">\n      <div class=\"icon-32\">\n        <i\n          class=\"c8y-icon-duocolor\"\n          [c8yIcon]=\"link.icon\"\n        ></i>\n      </div>\n      <small class=\"text-muted\">{{ link.label | translate }}</small>\n    </div>\n  </a>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.DocsService }, { type: i1.AppStateService }, { type: i1.NavigatorService }, { type: i2.Router }] });