import { Component, forwardRef, Input } from '@angular/core';
import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
import { map, take } from 'rxjs/operators';
import { DatapointAttributesFormValidationService } from './datapoint-attributes-form-validation.service';
import { AXIS_TYPES, CHART_LINE_TYPES, CHART_RENDER_TYPES } from './datapoint-attributes.model';
import * as i0 from "@angular/core";
import * as i1 from "./datapoint-attributes-form-validation.service";
import * as i2 from "@c8y/ngx-components";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "ngx-bootstrap/popover";
export class DatapointAttributesFormComponent {
    constructor(formValidations) {
        this.formValidations = formValidations;
        this.selectableChartRenderTypes = [];
        this.selectableChartLineTypes = [];
        this.selectableAxisTypes = [];
        this.showTarget = true;
        this.showRange = true;
        this.showYellowRange = true;
        this.showRedRange = true;
        this.showChart = true;
        this.showFormIfTemplateWasSelected = false;
        this.rawValue = {};
        this.CHART_RENDER_TYPES = Array.from(CHART_RENDER_TYPES);
        this.CHART_LINE_TYPES = Array.from(CHART_LINE_TYPES);
        this.AXIS_TYPES = Array.from(AXIS_TYPES);
        this.customValidationErrorMessages = {};
        this.shouldForceInitialValidation = true;
        this.formGroup = this.formValidations.getDefaultFormGroup();
        this.setSubForms();
    }
    ngOnInit() {
        this.initializeFormVisibility();
        this.filterChartTypes();
    }
    validate(_control) {
        if (this.formGroup?.get('series')?.errors?.noPeriods) {
            return this.formGroup?.get('series')?.errors;
        }
        return this.formGroup?.valid ? null : { formInvalid: {} };
    }
    writeValue(obj) {
        this.rawValue = obj || {};
        if (obj) {
            this.formGroup.patchValue(this.formValidations.convertToFormGroupFormat(obj), {
                emitEvent: false
            });
        }
        if (this.shouldForceInitialValidation) {
            queueMicrotask(() => {
                this.formGroup.updateValueAndValidity();
            });
            this.shouldForceInitialValidation = false;
        }
    }
    registerOnChange(fn) {
        this.formGroup.valueChanges
            .pipe(map(formValue => this.formValidations.convertToBackendFormat(formValue, this.showChart)), map(formValue => Object.assign(this.rawValue, formValue)))
            .subscribe(fn);
    }
    registerOnTouched(fn) {
        this.formGroup.valueChanges.pipe(take(1)).subscribe(fn);
    }
    setDisabledState(isDisabled) {
        if (this.formGroup?.disabled === isDisabled) {
            return;
        }
        isDisabled ? this.formGroup.disable() : this.formGroup.enable();
    }
    setSubForms() {
        if (!this.formGroup) {
            this.range = this.yellowRange = this.redRange = this.chart = undefined;
            return;
        }
        this.range = this.formGroup.get('range');
        this.yellowRange = this.formGroup.get('yellowRange');
        this.redRange = this.formGroup.get('redRange');
        this.chart = this.formGroup.get('chart');
        this.display = this.formGroup.get('display');
    }
    initializeFormVisibility() {
        this.showChartForm = this.chart && this.showChart;
        const hasLineTypes = !!this.selectableChartLineTypes?.length;
        const hasAxisTypes = !!this.selectableAxisTypes?.length;
        const hasRenderTypes = this.selectableChartRenderTypes?.length > 0 || this.selectableChartRenderTypes === undefined;
        this.showOnlyDisplayForm =
            !this.showChartForm && !hasLineTypes && !hasAxisTypes && hasRenderTypes;
    }
    filterChartTypes() {
        this.filterRenderTypes();
        this.filterLineTypes();
        this.filterAxisTypes();
    }
    filterRenderTypes() {
        if (!!this.selectableChartRenderTypes?.length) {
            this.CHART_RENDER_TYPES = this.CHART_RENDER_TYPES.filter(renderType => this.selectableChartRenderTypes.includes(renderType.val));
        }
    }
    filterLineTypes() {
        if (!!this.selectableChartLineTypes?.length) {
            this.CHART_LINE_TYPES = this.CHART_LINE_TYPES.filter(lineType => this.selectableChartLineTypes.includes(lineType.val));
        }
    }
    filterAxisTypes() {
        if (!!this.selectableAxisTypes?.length) {
            this.AXIS_TYPES = this.AXIS_TYPES.filter(axisType => this.selectableAxisTypes.includes(axisType.val));
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointAttributesFormComponent, deps: [{ token: i1.DatapointAttributesFormValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatapointAttributesFormComponent, selector: "c8y-datapoint-attributes-form", inputs: { selectableChartRenderTypes: "selectableChartRenderTypes", selectableChartLineTypes: "selectableChartLineTypes", selectableAxisTypes: "selectableAxisTypes", showTarget: "showTarget", showRange: "showRange", showYellowRange: "showYellowRange", showRedRange: "showRedRange", showChart: "showChart", showFormIfTemplateWasSelected: "showFormIfTemplateWasSelected" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => DatapointAttributesFormComponent),
                multi: true
            },
            {
                provide: NG_VALIDATORS,
                useExisting: forwardRef(() => DatapointAttributesFormComponent),
                multi: true
            }
        ], ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n  <ng-container *ngIf=\"!rawValue?.__template || showFormIfTemplateWasSelected\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      *ngIf=\"formGroup.controls?.label || formGroup.controls?.unit || formGroup.controls?.target\"\n    >\n      <legend translate>Details</legend>\n      <div class=\"row\">\n        <div\n          class=\"col-md-6\"\n          *ngIf=\"formGroup.controls?.label\"\n        >\n          <c8y-form-group class=\"form-group-sm\">\n            <label translate>Label</label>\n            <input\n              class=\"form-control\"\n              name=\"label\"\n              formControlName=\"label\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'Temperature' }\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls.label.touched && formGroup.controls.label.errors\"\n            >\n              <c8y-message\n                *ngFor=\"let item of customValidationErrorMessages['label'] | keyvalue\"\n                [name]=\"item.key\"\n                [text]=\"item.value\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-md-6\"\n          *ngIf=\"formGroup.controls?.unit\"\n        >\n          <c8y-form-group class=\"form-group-sm\">\n            <label translate>Unit</label>\n            <input\n              class=\"form-control\"\n              name=\"unit\"\n              formControlName=\"unit\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: '\u00BAC' }\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls.unit.touched && formGroup.controls.unit.errors\"\n            >\n              <c8y-message\n                *ngFor=\"let item of customValidationErrorMessages['unit'] | keyvalue\"\n                [name]=\"item.key\"\n                [text]=\"item.value\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-md-6\"\n          *ngIf=\"formGroup.controls?.target && showTarget\"\n        >\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{\n              'has-error':\n                (range?.touched || formGroup.controls.target.touched) &&\n                formGroup.controls?.target?.errors\n            }\"\n          >\n            <label translate>Target</label>\n            <input\n              class=\"form-control\"\n              name=\"target\"\n              type=\"number\"\n              formControlName=\"target\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n            />\n            <c8y-messages\n              [show]=\"\n                (range?.touched || formGroup.controls.target.touched) &&\n                formGroup.controls.target.errors\n              \"\n            >\n              <c8y-message\n                *ngFor=\"let item of customValidationErrorMessages['target'] | keyvalue\"\n                [name]=\"item.key\"\n                [text]=\"item.value\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n    <fieldset\n      class=\"c8y-fieldset\"\n      *ngIf=\"range && showRange\"\n    >\n      <legend translate>Range</legend>\n      <div\n        class=\"row\"\n        formGroupName=\"range\"\n      >\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n          >\n            <label translate>Min</label>\n            <input\n              class=\"form-control\"\n              name=\"min\"\n              type=\"number\"\n              formControlName=\"min\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n            />\n            <c8y-messages [show]=\"range?.touched && range.controls?.min?.errors\"></c8y-messages>\n          </c8y-form-group>\n        </div>\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n          >\n            <label translate>Max</label>\n            <input\n              class=\"form-control\"\n              name=\"max\"\n              type=\"number\"\n              formControlName=\"max\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n            />\n            <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\">\n              <c8y-message\n                *ngFor=\"let item of customValidationErrorMessages['max'] | keyvalue\"\n                [name]=\"item.key\"\n                [text]=\"item.value\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"yellowRange\"\n      *ngIf=\"yellowRange && showYellowRange\"\n    >\n      <legend translate>Yellow range</legend>\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{\n              'has-error':\n                (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n            }\"\n          >\n            <label translate>Min</label>\n            <input\n              class=\"form-control\"\n              name=\"min\"\n              type=\"number\"\n              formControlName=\"min\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n            />\n            <c8y-messages\n              [show]=\"(range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{\n              'has-error':\n                (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n            }\"\n          >\n            <label translate>Max</label>\n            <input\n              class=\"form-control\"\n              name=\"max\"\n              type=\"number\"\n              formControlName=\"max\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n            />\n            <c8y-messages\n              [show]=\"(range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"redRange\"\n      *ngIf=\"redRange && showRedRange\"\n    >\n      <legend translate>Red range</legend>\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{\n              'has-error': (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n            }\"\n          >\n            <label translate>Min</label>\n            <input\n              class=\"form-control\"\n              name=\"min\"\n              type=\"number\"\n              formControlName=\"min\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n            />\n            <c8y-messages\n              [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{\n              'has-error': (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n            }\"\n          >\n            <label translate>Max</label>\n            <input\n              class=\"form-control\"\n              name=\"max\"\n              type=\"number\"\n              formControlName=\"max\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n            />\n            <c8y-messages\n              [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n  </ng-container>\n\n  <fieldset\n    class=\"c8y-fieldset\"\n    *ngIf=\"showChartForm\"\n    formGroupName=\"chart\"\n  >\n    <legend translate>Chart</legend>\n    <div class=\"tight-grid\">\n      <div\n        class=\"col-xs-6 col-sm-4\"\n        *ngIf=\"selectableChartRenderTypes?.length !== 0\"\n      >\n        <c8y-form-group class=\"form-group-sm\">\n          <ng-container *ngTemplateOutlet=\"displayHelpButton\"></ng-container>\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control\"\n              formControlName=\"renderType\"\n            >\n              <option\n                *ngFor=\"let type of CHART_RENDER_TYPES\"\n                [ngValue]=\"type.val\"\n              >\n                {{ type.text | translate }}\n              </option>\n            </select>\n          </div>\n        </c8y-form-group>\n      </div>\n      <div\n        class=\"col-xs-6 col-sm-4\"\n        *ngIf=\"selectableChartLineTypes?.length !== 0\"\n      >\n        <c8y-form-group class=\"form-group-sm\">\n          <label\n            for=\"chartType\"\n            translate\n          >\n            Chart type\n          </label>\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control\"\n              formControlName=\"lineType\"\n            >\n              <option\n                *ngFor=\"let type of CHART_LINE_TYPES\"\n                [ngValue]=\"type.val\"\n              >\n                {{ type.text | translate }}\n              </option>\n            </select>\n            <span></span>\n          </div>\n        </c8y-form-group>\n      </div>\n      <div\n        class=\"col-xs-6 col-sm-4\"\n        *ngIf=\"selectableAxisTypes?.length !== 0\"\n      >\n        <c8y-form-group class=\"form-group-sm\">\n          <label\n            for=\"yAxis\"\n            translate\n          >\n            Y-axis\n          </label>\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control\"\n              formControlName=\"yAxisType\"\n            >\n              <option\n                *ngFor=\"let type of AXIS_TYPES\"\n                [ngValue]=\"type.val\"\n              >\n                {{ type.text | translate }}\n              </option>\n            </select>\n            <span></span>\n          </div>\n        </c8y-form-group>\n      </div>\n    </div>\n  </fieldset>\n  <fieldset\n    class=\"c8y-fieldset\"\n    *ngIf=\"showOnlyDisplayForm\"\n    formGroupName=\"display\"\n  >\n    <legend>\n      <ng-container *ngTemplateOutlet=\"displayHelpButton\"></ng-container>\n    </legend>\n    <div class=\"tight-grid\">\n      <div class=\"col-xs-6 col-sm-4\">\n        <c8y-form-group class=\"form-group-sm\">\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control\"\n              formControlName=\"renderType\"\n            >\n              <option\n                *ngFor=\"let type of CHART_RENDER_TYPES\"\n                [ngValue]=\"type.val\"\n              >\n                {{ type.text | translate }}\n              </option>\n            </select>\n          </div>\n        </c8y-form-group>\n      </div>\n    </div>\n  </fieldset>\n</div>\n\n<ng-template #displayHelpButton>\n  <label>\n    {{ 'Display' | translate }}\n    <button\n      class=\"btn-help btn-help--sm\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ 'Value displayed when data is aggregated' | translate }}\"\n      triggers=\"focus\"\n      type=\"button\"\n      placement=\"right\"\n    ></button>\n  </label>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { 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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointAttributesFormComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-datapoint-attributes-form', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => DatapointAttributesFormComponent),
                            multi: true
                        },
                        {
                            provide: NG_VALIDATORS,
                            useExisting: forwardRef(() => DatapointAttributesFormComponent),
                            multi: true
                        }
                    ], template: "<div [formGroup]=\"formGroup\">\n  <ng-container *ngIf=\"!rawValue?.__template || showFormIfTemplateWasSelected\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      *ngIf=\"formGroup.controls?.label || formGroup.controls?.unit || formGroup.controls?.target\"\n    >\n      <legend translate>Details</legend>\n      <div class=\"row\">\n        <div\n          class=\"col-md-6\"\n          *ngIf=\"formGroup.controls?.label\"\n        >\n          <c8y-form-group class=\"form-group-sm\">\n            <label translate>Label</label>\n            <input\n              class=\"form-control\"\n              name=\"label\"\n              formControlName=\"label\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'Temperature' }\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls.label.touched && formGroup.controls.label.errors\"\n            >\n              <c8y-message\n                *ngFor=\"let item of customValidationErrorMessages['label'] | keyvalue\"\n                [name]=\"item.key\"\n                [text]=\"item.value\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-md-6\"\n          *ngIf=\"formGroup.controls?.unit\"\n        >\n          <c8y-form-group class=\"form-group-sm\">\n            <label translate>Unit</label>\n            <input\n              class=\"form-control\"\n              name=\"unit\"\n              formControlName=\"unit\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: '\u00BAC' }\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls.unit.touched && formGroup.controls.unit.errors\"\n            >\n              <c8y-message\n                *ngFor=\"let item of customValidationErrorMessages['unit'] | keyvalue\"\n                [name]=\"item.key\"\n                [text]=\"item.value\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-md-6\"\n          *ngIf=\"formGroup.controls?.target && showTarget\"\n        >\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{\n              'has-error':\n                (range?.touched || formGroup.controls.target.touched) &&\n                formGroup.controls?.target?.errors\n            }\"\n          >\n            <label translate>Target</label>\n            <input\n              class=\"form-control\"\n              name=\"target\"\n              type=\"number\"\n              formControlName=\"target\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n            />\n            <c8y-messages\n              [show]=\"\n                (range?.touched || formGroup.controls.target.touched) &&\n                formGroup.controls.target.errors\n              \"\n            >\n              <c8y-message\n                *ngFor=\"let item of customValidationErrorMessages['target'] | keyvalue\"\n                [name]=\"item.key\"\n                [text]=\"item.value\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n    <fieldset\n      class=\"c8y-fieldset\"\n      *ngIf=\"range && showRange\"\n    >\n      <legend translate>Range</legend>\n      <div\n        class=\"row\"\n        formGroupName=\"range\"\n      >\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n          >\n            <label translate>Min</label>\n            <input\n              class=\"form-control\"\n              name=\"min\"\n              type=\"number\"\n              formControlName=\"min\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n            />\n            <c8y-messages [show]=\"range?.touched && range.controls?.min?.errors\"></c8y-messages>\n          </c8y-form-group>\n        </div>\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n          >\n            <label translate>Max</label>\n            <input\n              class=\"form-control\"\n              name=\"max\"\n              type=\"number\"\n              formControlName=\"max\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n            />\n            <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\">\n              <c8y-message\n                *ngFor=\"let item of customValidationErrorMessages['max'] | keyvalue\"\n                [name]=\"item.key\"\n                [text]=\"item.value\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"yellowRange\"\n      *ngIf=\"yellowRange && showYellowRange\"\n    >\n      <legend translate>Yellow range</legend>\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{\n              'has-error':\n                (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n            }\"\n          >\n            <label translate>Min</label>\n            <input\n              class=\"form-control\"\n              name=\"min\"\n              type=\"number\"\n              formControlName=\"min\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n            />\n            <c8y-messages\n              [show]=\"(range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{\n              'has-error':\n                (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n            }\"\n          >\n            <label translate>Max</label>\n            <input\n              class=\"form-control\"\n              name=\"max\"\n              type=\"number\"\n              formControlName=\"max\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n            />\n            <c8y-messages\n              [show]=\"(range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"redRange\"\n      *ngIf=\"redRange && showRedRange\"\n    >\n      <legend translate>Red range</legend>\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{\n              'has-error': (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n            }\"\n          >\n            <label translate>Min</label>\n            <input\n              class=\"form-control\"\n              name=\"min\"\n              type=\"number\"\n              formControlName=\"min\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n            />\n            <c8y-messages\n              [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"form-group-sm\"\n            [ngClass]=\"{\n              'has-error': (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n            }\"\n          >\n            <label translate>Max</label>\n            <input\n              class=\"form-control\"\n              name=\"max\"\n              type=\"number\"\n              formControlName=\"max\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n            />\n            <c8y-messages\n              [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n  </ng-container>\n\n  <fieldset\n    class=\"c8y-fieldset\"\n    *ngIf=\"showChartForm\"\n    formGroupName=\"chart\"\n  >\n    <legend translate>Chart</legend>\n    <div class=\"tight-grid\">\n      <div\n        class=\"col-xs-6 col-sm-4\"\n        *ngIf=\"selectableChartRenderTypes?.length !== 0\"\n      >\n        <c8y-form-group class=\"form-group-sm\">\n          <ng-container *ngTemplateOutlet=\"displayHelpButton\"></ng-container>\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control\"\n              formControlName=\"renderType\"\n            >\n              <option\n                *ngFor=\"let type of CHART_RENDER_TYPES\"\n                [ngValue]=\"type.val\"\n              >\n                {{ type.text | translate }}\n              </option>\n            </select>\n          </div>\n        </c8y-form-group>\n      </div>\n      <div\n        class=\"col-xs-6 col-sm-4\"\n        *ngIf=\"selectableChartLineTypes?.length !== 0\"\n      >\n        <c8y-form-group class=\"form-group-sm\">\n          <label\n            for=\"chartType\"\n            translate\n          >\n            Chart type\n          </label>\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control\"\n              formControlName=\"lineType\"\n            >\n              <option\n                *ngFor=\"let type of CHART_LINE_TYPES\"\n                [ngValue]=\"type.val\"\n              >\n                {{ type.text | translate }}\n              </option>\n            </select>\n            <span></span>\n          </div>\n        </c8y-form-group>\n      </div>\n      <div\n        class=\"col-xs-6 col-sm-4\"\n        *ngIf=\"selectableAxisTypes?.length !== 0\"\n      >\n        <c8y-form-group class=\"form-group-sm\">\n          <label\n            for=\"yAxis\"\n            translate\n          >\n            Y-axis\n          </label>\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control\"\n              formControlName=\"yAxisType\"\n            >\n              <option\n                *ngFor=\"let type of AXIS_TYPES\"\n                [ngValue]=\"type.val\"\n              >\n                {{ type.text | translate }}\n              </option>\n            </select>\n            <span></span>\n          </div>\n        </c8y-form-group>\n      </div>\n    </div>\n  </fieldset>\n  <fieldset\n    class=\"c8y-fieldset\"\n    *ngIf=\"showOnlyDisplayForm\"\n    formGroupName=\"display\"\n  >\n    <legend>\n      <ng-container *ngTemplateOutlet=\"displayHelpButton\"></ng-container>\n    </legend>\n    <div class=\"tight-grid\">\n      <div class=\"col-xs-6 col-sm-4\">\n        <c8y-form-group class=\"form-group-sm\">\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control\"\n              formControlName=\"renderType\"\n            >\n              <option\n                *ngFor=\"let type of CHART_RENDER_TYPES\"\n                [ngValue]=\"type.val\"\n              >\n                {{ type.text | translate }}\n              </option>\n            </select>\n          </div>\n        </c8y-form-group>\n      </div>\n    </div>\n  </fieldset>\n</div>\n\n<ng-template #displayHelpButton>\n  <label>\n    {{ 'Display' | translate }}\n    <button\n      class=\"btn-help btn-help--sm\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ 'Value displayed when data is aggregated' | translate }}\"\n      triggers=\"focus\"\n      type=\"button\"\n      placement=\"right\"\n    ></button>\n  </label>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: i1.DatapointAttributesFormValidationService }], propDecorators: { selectableChartRenderTypes: [{
                type: Input
            }], selectableChartLineTypes: [{
                type: Input
            }], selectableAxisTypes: [{
                type: Input
            }], showTarget: [{
                type: Input
            }], showRange: [{
                type: Input
            }], showYellowRange: [{
                type: Input
            }], showRedRange: [{
                type: Input
            }], showChart: [{
                type: Input
            }], showFormIfTemplateWasSelected: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 