import * as i0 from '@angular/core';
import { Optional, Inject, Component } from '@angular/core';
import * as i3 from '@angular/forms';
import { Validators } from '@angular/forms';
import * as i1 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i2 from '@c8y/client';
import { gettext } from '@c8y/ngx-components/gettext';
import * as i4 from '@c8y/ngx-components';
import { HumanizePipe, C8yValidators, CoreModule } from '@c8y/ngx-components';
import * as i5 from '@ngx-translate/core';
import { get, isEmpty } from 'lodash-es';
import { pathToDatapointLibrary, DATAPOINT_LIBRARY_CONFIG } from '@c8y/ngx-components/datapoint-library/model';
import * as i9 from 'ngx-bootstrap/popover';
import { PopoverModule } from 'ngx-bootstrap/popover';
import * as i10 from 'ngx-bootstrap/tooltip';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import * as i6 from '@c8y/ngx-components/datapoint-library/services';
import * as i7 from '@c8y/ngx-components/datapoint-selector';
import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
import * as i8 from '@angular/common';

class DatapointLibraryDetailsComponent {
    constructor(activatedRoute, inventory, formBuilder, alertService, router, translate, colorService, parser, datapointSelectorService, config) {
        this.activatedRoute = activatedRoute;
        this.inventory = inventory;
        this.formBuilder = formBuilder;
        this.alertService = alertService;
        this.router = router;
        this.translate = translate;
        this.colorService = colorService;
        this.parser = parser;
        this.datapointSelectorService = datapointSelectorService;
        this.config = config;
        this.path = pathToDatapointLibrary;
        this.isLoading = true;
        this.rangeConfig = {};
        this.formGroup = this.initForm();
    }
    ngOnInit() {
        this.routeSub = this.activatedRoute.parent.data.subscribe(data => {
            this.load(data);
        });
    }
    ngOnDestroy() {
        if (this.routeSub) {
            this.routeSub.unsubscribe();
        }
    }
    async save(value) {
        const kpiValues = this.extractKpiValuesFromFormValue(value);
        const kpi = Object.assign({}, this.datapoint?.c8y_Kpi || {}, kpiValues);
        const cleanedUpKpi = this.removeNullValues(kpi);
        const mo = {
            c8y_Kpi: cleanedUpKpi,
            c8y_Global: value.c8y_Global ? {} : null
        };
        try {
            if (this.datapoint?.id) {
                mo.id = this.datapoint.id;
                const res = await this.inventory.update(mo);
                this.datapointUpdate(res.data);
                this.alertService.saveSuccess(gettext('Data point library entry'))();
            }
            else {
                // during managedObject creation (POST) a fragment with the value null is actually being created and stored to the DB compared to an update (PUT) which would remove the fragment.
                // as we don't want to have that fragment stored in DB (if set to null), we will just set it to undefined.
                if (mo.c8y_Global === null) {
                    mo.c8y_Global = undefined;
                }
                const res = await this.inventory.create(mo);
                this.datapointUpdate(res.data);
                this.alertService.createSuccess(gettext('Data point library entry'))();
            }
            this.navigateBackToList();
        }
        catch (e) {
            this.alertService.addServerFailure(e);
        }
    }
    cancel() {
        this.navigateBackToList();
    }
    formChange() {
        if (this.formGroup.invalid) {
            return;
        }
        const kpiValues = this.extractKpiValuesFromFormValue(this.formGroup.value);
        this.rangeConfig = Object.assign({ orientation: 'horizontal' }, kpiValues);
    }
    async pickDatapoint() {
        try {
            const datapoints = await this.datapointSelectorService.selectDataPoints({
                finishWithFirstSelection: true,
                ignoreDatapointTemplates: true,
                guessDatapointUnit: false
            });
            if (datapoints.length) {
                const datapoint = datapoints[0];
                this.formGroup.patchValue({
                    fragment: datapoint.fragment,
                    series: datapoint.series,
                    color: datapoint.color,
                    label: datapoint.label
                });
                this.formGroup.markAsTouched();
                this.formGroup.markAsDirty();
            }
        }
        catch (_e) {
            // modal closed
        }
    }
    navigateBackToList() {
        return this.router.navigate([pathToDatapointLibrary]);
    }
    datapointUpdate(tmpDatapoint) {
        const datapoint = this.parser.parseDatapoint(tmpDatapoint);
        this.datapoint = datapoint;
        const { fragment, series, description, unit, target, label, color, yellowRangeMin, yellowRangeMax, redRangeMin, redRangeMax, min, max } = datapoint.c8y_Kpi;
        this.formGroup.patchValue({
            fragment,
            series,
            description,
            unit,
            target,
            label,
            color,
            range: { min, max },
            yellowRange: { min: yellowRangeMin, max: yellowRangeMax },
            redRange: { min: redRangeMin, max: redRangeMax },
            c8y_Global: !!datapoint.c8y_Global
        });
        this.formChange();
    }
    extractKpiValuesFromFormValue(formValue) {
        const { fragment, series, description, unit, target, label, color } = formValue;
        return {
            fragment,
            series,
            description,
            unit,
            target,
            label,
            color,
            yellowRangeMin: get(formValue, 'yellowRange.min'),
            yellowRangeMax: get(formValue, 'yellowRange.max'),
            redRangeMin: get(formValue, 'redRange.min'),
            redRangeMax: get(formValue, 'redRange.max'),
            min: get(formValue, 'range.min'),
            max: get(formValue, 'range.max')
        };
    }
    async load(data) {
        this.isLoading = true;
        this.formGroup.reset();
        const { fragment, series } = this.activatedRoute.snapshot.queryParams;
        const humanize = new HumanizePipe();
        const label = fragment && series
            ? humanize.transform(`${fragment} => ${series}`)
            : this.translate.instant(gettext('New data point template'));
        const currentDate = new Date().toISOString();
        const color = await this.colorService.generateColor(currentDate);
        const contextFallback = {
            c8y_Kpi: {
                label,
                fragment,
                series,
                color
            },
            c8y_Global: !this.config?.doNotAddGlobalFragmentByDefault ? {} : null
        };
        const contextData = this.isContextSet(data) ? data.contextData : contextFallback;
        const { id } = contextData;
        if (id) {
            this.datapointUpdate((await this.inventory.detail(id)).data);
        }
        else {
            this.datapointUpdate(contextData);
        }
        this.isLoading = false;
    }
    isContextSet(data) {
        return data && !isEmpty(data.contextData);
    }
    initForm() {
        this.range = this.formBuilder.group({
            min: [undefined, []],
            max: [undefined, []]
        }, { validators: [C8yValidators.minMaxValidator(), C8yValidators.requireBothMinAndMax()] });
        this.redRange = this.formBuilder.group({
            min: [undefined, []],
            max: [undefined, []]
        }, { validators: [C8yValidators.minMaxValidator(), C8yValidators.requireBothMinAndMax()] });
        this.yellowRange = this.formBuilder.group({
            min: [undefined, []],
            max: [undefined, []]
        }, { validators: [C8yValidators.minMaxValidator(), C8yValidators.requireBothMinAndMax()] });
        return this.formBuilder.group({
            color: ['', [Validators.required, Validators.minLength(4)]],
            label: ['', [Validators.required, Validators.minLength(1)]],
            description: ['', []],
            fragment: [
                '',
                [Validators.required, Validators.minLength(1), Validators.pattern(/^[^.]*$/)]
            ],
            series: ['', [Validators.required, Validators.minLength(1), Validators.pattern(/^[^.]*$/)]],
            range: this.range,
            unit: [undefined, []],
            target: [undefined, []],
            redRange: this.redRange,
            yellowRange: this.yellowRange,
            c8y_Global: [!this.config?.doNotAddGlobalFragmentByDefault, []]
        }, {
            validators: [
                C8yValidators.withinScale('redRange.min'),
                C8yValidators.withinScale('redRange.max'),
                C8yValidators.withinScale('yellowRange.min'),
                C8yValidators.withinScale('yellowRange.max'),
                C8yValidators.withinScale('target')
            ]
        });
    }
    removeNullValues(value) {
        // remove null values before sending data to backend
        const cleanedupValues = Object.assign({}, value);
        Object.keys(cleanedupValues).forEach(key => {
            if (cleanedupValues[key] === null) {
                delete cleanedupValues[key];
            }
        });
        return cleanedupValues;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatapointLibraryDetailsComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.InventoryService }, { token: i3.FormBuilder }, { token: i4.AlertService }, { token: i1.Router }, { token: i5.TranslateService }, { token: i4.ColorService }, { token: i6.DatapointParserService }, { token: i7.DatapointSelectorService }, { token: DATAPOINT_LIBRARY_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: DatapointLibraryDetailsComponent, isStandalone: true, selector: "c8y-datapoint-library-details", ngImport: i0, template: "<c8y-title *ngIf=\"!isLoading\">\n  {{ formGroup.value?.label }}\n  <small *ngIf=\"formGroup.value?.fragment && formGroup.value?.series\">\n    {{ formGroup.value?.fragment }} / {{ formGroup.value?.series }}\n  </small>\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-data-points'\"\n    [label]=\"'Data point library' | translate\"\n    [path]=\"path\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-data-points'\"\n    [label]=\"formGroup.value?.label\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<form\n  (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n  (change)=\"formChange()\"\n  [formGroup]=\"formGroup\"\n  class=\"card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto\"\n  novalidate\n>\n  <div class=\"card-header large-padding separator grid__col--fullspan\">\n    <div class=\"card-title\">\n      {{ formGroup.value?.label }}\n    </div>\n  </div>\n  <div *ngIf=\"!isLoading\" class=\"d-contents\">\n    <div class=\"inner-scroll bg-level-0 flex-grow\">\n      <div class=\"card-block large-padding\">\n        <div class=\"d-flex\">\n          <c8y-form-group>\n            <label translate>Color</label>\n            <div class=\"data-point-color form-control\">\n              <div class=\"c8y-colorpicker\">\n                <input\n                  [attr.aria-label]=\"'Color picker' | translate\"\n                  type=\"color\"\n                  name=\"color\"\n                  formControlName=\"color\"\n                />\n                <span [style.background-color]=\"formGroup.value?.color\"></span>\n              </div>\n            </div>\n          </c8y-form-group>\n          <c8y-form-group class=\"flex-grow p-l-8\">\n            <label translate>Label</label>\n            <input\n              class=\"form-control\"\n              formControlName=\"label\"\n              name=\"label\"\n              [placeholder]=\"'e.g. Temperature' | translate\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.label?.touched && formGroup.controls?.label?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n        </div>\n        <c8y-form-group>\n          <label translate>Description</label>\n          <textarea\n            class=\"form-control\"\n            formControlName=\"description\"\n            name=\"description\"\n            [placeholder]=\"'e.g. Ambient Temperature in Celsius' | translate\"\n            rows=\"3\"\n          ></textarea>\n        </c8y-form-group>\n\n        <div class=\"d-flex a-i-center gap-8\">\n          <c8y-form-group class=\"flex-grow\">\n            <label translate>Fragment</label>\n            <input\n              class=\"form-control\"\n              name=\"fragment\"\n              formControlName=\"fragment\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group class=\"flex-grow\">\n            <label translate>Series</label>\n            <input\n              class=\"form-control\"\n              formControlName=\"series\"\n              name=\"series\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'T' }\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.series?.touched && formGroup.controls?.series?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n          <div class=\"flex-no-grow\">\n            <button\n              class=\"btn btn-default p-l-8 p-r-8\"\n              (click)=\"pickDatapoint()\"\n              type=\"button\"\n              [tooltip]=\"'Load fragment and series from an existing data point' | translate\"\n              [delay]=\"500\"\n              [attr.aria-label]=\"'Load fragment and series from an existing data point' | translate\"\n            >\n              <i c8yIcon=\"eyedropper\"></i>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"row\" *ngIf=\"config?.showCheckboxForGlobalFragment\">\n          <div class=\"col-sm-6\">\n            <c8y-form-group>\n              <label class=\"c8y-checkbox\">\n                <input name=\"c8y_Global\" formControlName=\"c8y_Global\" type=\"checkbox\" />\n                <span></span>\n                <span translate>Globally available</span>\n                <button\n                  class=\"btn-help\"\n                  type=\"button\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  [popover]=\"\n                    'Will make this entry available to all users on the tenant if checked.'\n                      | translate\n                  \"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                ></button>\n              </label>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"inner-scroll bg-level-1\">\n      <div class=\"card-block large-padding\">\n        <fieldset class=\"c8y-fieldset\">\n          <legend translate>Preview</legend>\n          <c8y-range-display [config]=\"rangeConfig\" class=\"m-b-16 d-block\"></c8y-range-display>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\">\n          <legend translate>Range</legend>\n          <div class=\"row\" formGroupName=\"range\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\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\n                [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\n                  formControlName=\"max\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                />\n                <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\"></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group>\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                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"col-md-6\">\n              <c8y-form-group\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                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"target\"\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                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\" formGroupName=\"yellowRange\">\n          <legend translate>Yellow range</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n                }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\n                  formControlName=\"min\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n                }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\n                  formControlName=\"max\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\" formGroupName=\"redRange\">\n          <legend translate>Red range</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n                }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\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\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n                }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\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      </div>\n    </div>\n  </div>\n  <div class=\"card-footer separator grid__col--fullspan\">\n    <button class=\"btn btn-default\" type=\"button\" [title]=\"'Cancel' | translate\" (click)=\"cancel()\">\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-form\"\n      type=\"submit\"\n      [title]=\"'Save' | translate\"\n      *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n      [disabled]=\"formGroup.invalid || formGroup.pristine\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i4.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i4.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i4.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i4.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i4.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i4.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }, { 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: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i9.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: TooltipModule }, { kind: "directive", type: i10.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: DatapointSelectorModule }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatapointLibraryDetailsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-datapoint-library-details', standalone: true, imports: [CoreModule, RouterModule, PopoverModule, TooltipModule, DatapointSelectorModule], template: "<c8y-title *ngIf=\"!isLoading\">\n  {{ formGroup.value?.label }}\n  <small *ngIf=\"formGroup.value?.fragment && formGroup.value?.series\">\n    {{ formGroup.value?.fragment }} / {{ formGroup.value?.series }}\n  </small>\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-data-points'\"\n    [label]=\"'Data point library' | translate\"\n    [path]=\"path\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-data-points'\"\n    [label]=\"formGroup.value?.label\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<form\n  (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n  (change)=\"formChange()\"\n  [formGroup]=\"formGroup\"\n  class=\"card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto\"\n  novalidate\n>\n  <div class=\"card-header large-padding separator grid__col--fullspan\">\n    <div class=\"card-title\">\n      {{ formGroup.value?.label }}\n    </div>\n  </div>\n  <div *ngIf=\"!isLoading\" class=\"d-contents\">\n    <div class=\"inner-scroll bg-level-0 flex-grow\">\n      <div class=\"card-block large-padding\">\n        <div class=\"d-flex\">\n          <c8y-form-group>\n            <label translate>Color</label>\n            <div class=\"data-point-color form-control\">\n              <div class=\"c8y-colorpicker\">\n                <input\n                  [attr.aria-label]=\"'Color picker' | translate\"\n                  type=\"color\"\n                  name=\"color\"\n                  formControlName=\"color\"\n                />\n                <span [style.background-color]=\"formGroup.value?.color\"></span>\n              </div>\n            </div>\n          </c8y-form-group>\n          <c8y-form-group class=\"flex-grow p-l-8\">\n            <label translate>Label</label>\n            <input\n              class=\"form-control\"\n              formControlName=\"label\"\n              name=\"label\"\n              [placeholder]=\"'e.g. Temperature' | translate\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.label?.touched && formGroup.controls?.label?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n        </div>\n        <c8y-form-group>\n          <label translate>Description</label>\n          <textarea\n            class=\"form-control\"\n            formControlName=\"description\"\n            name=\"description\"\n            [placeholder]=\"'e.g. Ambient Temperature in Celsius' | translate\"\n            rows=\"3\"\n          ></textarea>\n        </c8y-form-group>\n\n        <div class=\"d-flex a-i-center gap-8\">\n          <c8y-form-group class=\"flex-grow\">\n            <label translate>Fragment</label>\n            <input\n              class=\"form-control\"\n              name=\"fragment\"\n              formControlName=\"fragment\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group class=\"flex-grow\">\n            <label translate>Series</label>\n            <input\n              class=\"form-control\"\n              formControlName=\"series\"\n              name=\"series\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'T' }\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.series?.touched && formGroup.controls?.series?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n          <div class=\"flex-no-grow\">\n            <button\n              class=\"btn btn-default p-l-8 p-r-8\"\n              (click)=\"pickDatapoint()\"\n              type=\"button\"\n              [tooltip]=\"'Load fragment and series from an existing data point' | translate\"\n              [delay]=\"500\"\n              [attr.aria-label]=\"'Load fragment and series from an existing data point' | translate\"\n            >\n              <i c8yIcon=\"eyedropper\"></i>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"row\" *ngIf=\"config?.showCheckboxForGlobalFragment\">\n          <div class=\"col-sm-6\">\n            <c8y-form-group>\n              <label class=\"c8y-checkbox\">\n                <input name=\"c8y_Global\" formControlName=\"c8y_Global\" type=\"checkbox\" />\n                <span></span>\n                <span translate>Globally available</span>\n                <button\n                  class=\"btn-help\"\n                  type=\"button\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  [popover]=\"\n                    'Will make this entry available to all users on the tenant if checked.'\n                      | translate\n                  \"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                ></button>\n              </label>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"inner-scroll bg-level-1\">\n      <div class=\"card-block large-padding\">\n        <fieldset class=\"c8y-fieldset\">\n          <legend translate>Preview</legend>\n          <c8y-range-display [config]=\"rangeConfig\" class=\"m-b-16 d-block\"></c8y-range-display>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\">\n          <legend translate>Range</legend>\n          <div class=\"row\" formGroupName=\"range\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\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\n                [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\n                  formControlName=\"max\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                />\n                <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\"></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group>\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                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"col-md-6\">\n              <c8y-form-group\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                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"target\"\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                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\" formGroupName=\"yellowRange\">\n          <legend translate>Yellow range</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n                }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\n                  formControlName=\"min\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n                }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\n                  formControlName=\"max\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\" formGroupName=\"redRange\">\n          <legend translate>Red range</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n                }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\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\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n                }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\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      </div>\n    </div>\n  </div>\n  <div class=\"card-footer separator grid__col--fullspan\">\n    <button class=\"btn btn-default\" type=\"button\" [title]=\"'Cancel' | translate\" (click)=\"cancel()\">\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-form\"\n      type=\"submit\"\n      [title]=\"'Save' | translate\"\n      *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n      [disabled]=\"formGroup.invalid || formGroup.pristine\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]
        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2.InventoryService }, { type: i3.FormBuilder }, { type: i4.AlertService }, { type: i1.Router }, { type: i5.TranslateService }, { type: i4.ColorService }, { type: i6.DatapointParserService }, { type: i7.DatapointSelectorService }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [DATAPOINT_LIBRARY_CONFIG]
                }] }] });

/**
 * Generated bundle index. Do not edit.
 */

export { DatapointLibraryDetailsComponent };
//# sourceMappingURL=c8y-ngx-components-datapoint-library-details.mjs.map
