import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule, DocsModule, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentModule, ListGroupModule, gettext } from '@c8y/ngx-components';
import { AdjustAggregatedTimeRangePipe } from '../adjust-aggregated-time-range.pipe';
import { ApplyRangeClassPipe } from '../apply-range-class.pipe';
import { ColumnTitlePipe } from '../column-title.pipe';
import { VirtualScrollListenerDirective } from '../virtual-scroll-listener.directive';
import { DynamicColumnDirective } from './dynamic-column.directive';
import * as i0 from "@angular/core";
import * as i1 from "@c8y/ngx-components";
import * as i2 from "@angular/common";
export class DatapointsTableComponent {
    constructor() {
        this.isScrolling = new EventEmitter();
        this.hasNoPermissionsToReadAnyMeasurement = false;
        this.missingAllPermissionsAlert = new DynamicComponentAlertAggregator();
        /**
         * Default fraction size format for numbers with decimal places.
         */
        this.fractionSize = '1.2-2';
    }
    ngOnInit() {
        if (typeof this.decimalPlaces === 'number' && !Number.isNaN(this.decimalPlaces)) {
            this.fractionSize = `1.${this.decimalPlaces}-${this.decimalPlaces}`;
        }
    }
    ngOnChanges() {
        if (!this.seriesWithoutPermissionToReadCount) {
            return;
        }
        this.missingAllPermissionsAlert.clear();
        this.handleNoPermissionErrorMessage();
    }
    onListScrolled() {
        this.isScrolling.emit(true);
    }
    onListScrolledToTop() {
        this.isScrolling.emit(false);
    }
    getRangeValues(row) {
        return {
            yellowRangeMin: row.yellowRangeMin,
            yellowRangeMax: row.yellowRangeMax,
            redRangeMin: row.redRangeMin,
            redRangeMax: row.redRangeMax
        };
    }
    /**
     * Determines the fraction size format based on whether the number is an integer or has decimal places.
     *
     * @param value - The number to be formatted.
     * @returns Returns '1.0-0' if the number is an integer, otherwise returns the current fraction size.
     */
    getFractionSize(value) {
        return value % 1 === 0 ? '1.0-0' : this.fractionSize;
    }
    handleNoPermissionErrorMessage() {
        this.hasNoPermissionsToReadAnyMeasurement =
            this.seriesWithoutPermissionToReadCount === this.devicesColumnHeaders.length;
        if (this.hasNoPermissionsToReadAnyMeasurement) {
            this.showMessageForMissingPermissionsForAllSeries();
        }
    }
    showMessageForMissingPermissionsForAllSeries() {
        this.missingAllPermissionsAlert.addAlerts(new DynamicComponentAlert({
            allowHtml: true,
            text: gettext(`<p>To view data, you must meet at least one of these criteria:</p>
        <ul>
          <li>
            Have
            <b>READ permission for "Measurements" permission type</b>
            (either as a global role or for the specific source)
          </li>
          <li>
            Be the
            <b>owner of the source</b>
            you want to export data from
          </li>
        </ul>
        <p>Don't meet these requirements? Contact your system administrator for assistance.</p>`),
            type: 'system'
        }));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: 40;\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: "pipe", type: AdjustAggregatedTimeRangePipe, name: "adjustAggregatedTimeRange" }, { kind: "pipe", type: ApplyRangeClassPipe, name: "applyRangeClass" }, { kind: "pipe", type: ColumnTitlePipe, name: "columnTitle" }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i1.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: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "directive", type: i1.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "pipe", type: i1.DatePipe, name: "c8yDate" }, { kind: "component", type: i1.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "ngmodule", type: DocsModule }, { kind: "directive", type: i1.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: DynamicColumnDirective, selector: "[c8yDynamicColumn]", inputs: ["c8yDynamicColumn"] }, { kind: "ngmodule", type: DynamicComponentModule }, { kind: "component", type: i1.DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i1.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: VirtualScrollListenerDirective, selector: "[c8yVirtualScrollListener]", inputs: ["scrollThreshold"], outputs: ["scrolled", "scrolledToTop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-datapoints-table', host: { class: 'd-col flex-grow' }, standalone: true, imports: [
                        AdjustAggregatedTimeRangePipe,
                        ApplyRangeClassPipe,
                        ColumnTitlePipe,
                        CommonModule,
                        DocsModule,
                        DynamicColumnDirective,
                        DynamicComponentModule,
                        ListGroupModule,
                        VirtualScrollListenerDirective
                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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: 40;\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" }]
        }], propDecorators: { aggregationType: [{
                type: Input
            }], datapointsTableItems: [{
                type: Input
            }], devicesColumnHeaders: [{
                type: Input
            }], decimalPlaces: [{
                type: Input
            }], hasMultipleDatapoints: [{
                type: Input
            }], isLoading: [{
                type: Input
            }], seriesWithoutPermissionToReadCount: [{
                type: Input
            }], isScrolling: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 