import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { ControlContainer, NgModelGroup } from '@angular/forms';
import { isNil, isEmpty, assign, unset, get, set, cloneDeep, isEqual } from 'lodash-es';
import { AddressSpaceService } from './address-space.service';
import { OpcuaMeasurementObjectMapping, OpcuaCustomActionObjectMapping, OpcuaAlarmObjectMapping, OpcuaEventObjectMapping } from './mappings';
import * as i0 from "@angular/core";
import * as i1 from "./address-space.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/tooltip";
import * as i6 from "ngx-bootstrap/collapse";
import * as i7 from "ngx-bootstrap/dropdown";
import * as i8 from "@c8y/ngx-components/device-protocol-object-mappings";
import * as i9 from "./opcua-address-space-tree.component";
import * as i10 from "./opcua-device-protocol-data-reporting.component";
import * as i11 from "./opcua-device-protocol-object-mapping-status-icon.component";
import * as i12 from "./opcua-device-protocol-browse-path-validation.directive";
export class OpcuaDeviceProtocolMapping {
    constructor(addressSpaceService) {
        this.addressSpaceService = addressSpaceService;
        this.onAction = new EventEmitter();
        this.isPathFocused = false;
        this.isBrowsePathUniq = true;
        this.dataReporting = 'default';
        this.isTreeOpen = false;
        this.isNew = false;
        this.resetModel = false;
        this.mappingTypes = [
            OpcuaMeasurementObjectMapping,
            OpcuaAlarmObjectMapping,
            OpcuaEventObjectMapping,
            OpcuaCustomActionObjectMapping
        ];
        this.objectMappingState = {
            valid: false,
            dirty: false
        };
        this.getMappings = () => this.getParentAttr('mappings');
    }
    toggleDetail() {
        this.isDetailOpen = !this.isDetailOpen;
        if (this.resetModel) {
            this.initialFormSetup();
        }
    }
    ngOnInit() {
        this.dataReportingName = 'ReportingMode' + this.index;
        this.initialFormSetup();
    }
    ngOnChanges(changes) {
        // this is done to keep the "onDelete" logic in
        // opcua-device-protocol-detail.component intact
        if (!isNil(get(changes, '_model.previousValue')) &&
            !isEqual(this._model, changes._model.previousValue)) {
            if (this.mapping && this.mapping.name === this._model.name) {
                this.mapping.id = this._model.id;
            }
        }
    }
    onMappingUpdate({ dirty, valid }) {
        this.objectMappingState = {
            valid,
            dirty
        };
    }
    initialFormSetup() {
        const mapping = {
            id: '',
            browsePath: [],
            name: '',
            subscriptionType: {
                type: 'None'
            }
        };
        this.mapping = assign({}, mapping, cloneDeep(this._model));
        if (isEmpty(this.mapping.browsePath)) {
            this.isNew = true;
            this.isDetailOpen = true;
        }
        else {
            this.browsePath = this.stringfyBrowsePath(this.mapping.browsePath);
            this.nodeDisplayName = this.mapping.name;
        }
        if (this.referencedRootNodeId) {
            this.referencedNode = { nodeId: this.referencedRootNodeId };
            this.addressSpaceService.triggerNodeToOpen({
                node: {
                    nodeId: this.referencedRootNodeId,
                    children: [],
                    expanded: false,
                    absolutePaths: [[]]
                },
                selectedAncestorIds: []
            });
        }
        else {
            this.referencedNode = { nodeId: '' };
        }
        if (this.mapping?.customAction) {
            Object.assign(this.mapping, {
                customAction: {
                    ...this.mapping.customAction,
                    headers: this.mapHeadersObjectToList(this.mapping?.customAction?.headers)
                }
            });
        }
        if (get(this._model, 'subscriptionType')) {
            this.dataReporting = 'custom';
        }
        else {
            this.dataReporting = 'default';
        }
        this.resetModel = false;
    }
    showAddressSpaceTree() {
        return !isEmpty(this.referencedServerId);
    }
    ngAfterViewInit() {
        if (get(this.mapping, 'subscriptionType') &&
            get(this.mapping, 'subscriptionType.type') !== 'None') {
            this.dataReporting = 'custom';
        }
    }
    mapHeadersObjectToList(headers) {
        if (Object.keys(headers).length > 0) {
            return Object.keys(headers).map(item => {
                return { key: item, value: headers[item] };
            });
        }
    }
    stringfyBrowsePath(path) {
        return JSON.stringify(path);
    }
    updateBrowsePath(node) {
        this.mapping.browsePath = node.relativePath;
        this.nodeDisplayName = node.displayName;
        this.mapping.name = this.nodeDisplayName;
        this.browsePath = this.stringfyBrowsePath(this.mapping.browsePath);
        this.browsePathModel.control.markAsDirty();
    }
    updateDisplayname() {
        this.mapping.name = this.nodeDisplayName;
    }
    updateBrowsePathInput() {
        if (this.browsePath) {
            try {
                this.mapping.browsePath = JSON.parse(this.browsePath);
            }
            catch (error) {
                return;
            }
        }
    }
    save() {
        if (this.dataReporting === 'default') {
            unset(this.mapping, 'subscriptionType');
        }
        if (get(this.mapping, 'measurementCreation')) {
            const { measurementCreation } = this.mapping;
            set(measurementCreation, 'fragmentName', get(measurementCreation, 'type'));
        }
        if (this.mapping.customAction) {
            this.mapping.customAction.headers = this.mapping.customAction.headers.reduce((result, item) => {
                result[item.key] = item.value;
                return result;
            }, {});
        }
        this.onAction.emit({
            action: 'save',
            data: this.mapping
        });
        this.isDetailOpen = false;
    }
    cancel() {
        this.isDetailOpen = false;
        this.resetModel = true;
        if (this.mapping.id === 'new') {
            this.onAction.emit({
                action: 'delete',
                data: assign({}, this.mapping)
            });
        }
    }
    onDelete() {
        this.onAction.emit({ action: 'delete', data: this.mapping });
    }
    canSave({ valid, dirty }) {
        const areValid = () => valid && this.objectMappingState.valid;
        const areDirty = () => dirty || this.objectMappingState.dirty;
        return areValid() && areDirty();
    }
    isActive() {
        return this.isDetailOpen;
    }
    setTreeFromRefNode() {
        if (this.referencedRootNodeId) {
            this.addressSpaceService.triggerNodeToOpen({
                node: {
                    nodeId: this.referencedRootNodeId,
                    children: [],
                    expanded: false,
                    absolutePaths: [[]]
                },
                selectedAncestorIds: []
            });
        }
    }
    updateSubscriptionType(value) {
        this.mapping.subscriptionType = value;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OpcuaDeviceProtocolMapping, deps: [{ token: i1.AddressSpaceService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OpcuaDeviceProtocolMapping, selector: "opcua-device-protocol-mapping", inputs: { _model: ["resource", "_model"], index: "index", getParentAttr: "getParentAttr", referencedServerId: "referencedServerId", referencedRootNodeId: "referencedRootNodeId" }, outputs: { onAction: "onAction" }, viewQueries: [{ propertyName: "subFormRef", first: true, predicate: ["variableForm"], descendants: true }, { propertyName: "browsePathModel", first: true, predicate: ["browsePathModel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"c8y-list__item\"\n  [ngClass]=\"{ expanded: isDetailOpen }\"\n  [attr.data-cy]=\"mapping.browsePath | json\"\n>\n  <div class=\"c8y-list__item__block\">\n    <div class=\"c8y-list__item__icon\">\n      <i c8yIcon=\"sliders\"></i>\n    </div>\n    <div class=\"c8y-list__item__body\">\n      <div class=\"content-flex-70\">\n        <div class=\"col-5\">\n          <p\n            class=\"text-truncate\"\n            title=\" {{ nodeDisplayName }} {{\n              mapping.browsePath.length > 0 ? (mapping.browsePath | json) : ''\n            }}\"\n            (click)=\"toggleDetail()\"\n          >\n            {{ nodeDisplayName }}\n            <small\n              class=\"text-muted\"\n              *ngIf=\"mapping.browsePath.length > 0\"\n            >\n              {{ mapping.browsePath | json }}\n            </small>\n          </p>\n        </div>\n        <div class=\"col-5\">\n          <div class=\"list-functionalities\">\n            <label class=\"small m-r-8 m-b-0 hidden-xs\">\n              {{ 'Functionalities' | translate }}\n            </label>\n            <c8y-object-mapping-status-icons [mapping]=\"mapping\"></c8y-object-mapping-status-icons>\n          </div>\n        </div>\n        <div class=\"flex-grow d-flex p-r-8\">\n          <button\n            class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            tooltip=\"{{ 'Remove' | translate }}\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <i\n              c8yIcon=\"minus-circle\"\n              (click)=\"onDelete()\"\n            ></i>\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"c8y-list__item__actions\">\n      <button\n        class=\"collapse-btn\"\n        title=\"{{ 'Expand' | translate }}\"\n        type=\"button\"\n        [ngClass]=\"{ active: isDetailOpen }\"\n        (click)=\"toggleDetail()\"\n        [attr.data-cy]=\"'toggleDetail'\"\n      >\n        <i c8yIcon=\"chevron-down\"></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"collapse\"\n    [collapse]=\"!isDetailOpen\"\n    [isAnimated]=\"true\"\n  >\n    <div class=\"c8y-list__item__collapse--container\">\n      <div\n        class=\"form\"\n        [ngModelGroup]=\"index\"\n        #variableForm=\"ngModelGroup\"\n        *ngIf=\"isDetailOpen\"\n      >\n        <div class=\"row p-t-8\">\n          <c8y-form-group\n            class=\"col-md-4\"\n            [status]=\"!isBrowsePathUniq ? 'error' : ''\"\n            *ngIf=\"showAddressSpaceTree(); else simpleInput\"\n          >\n            <label>{{ 'Path' | translate }}</label>\n            <div\n              class=\"dropdown fit-w\"\n              dropdown\n              #dropdown=\"bs-dropdown\"\n              [insideClick]=\"true\"\n            >\n              <div class=\"input-group\">\n                <input\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g.' | translate }} {{ ['2:Node1', '2:SubNode1'] | json }}\"\n                  name=\"browsePath\"\n                  type=\"text\"\n                  autocomplete=\"off\"\n                  required\n                  c8yBrowsePathValidator\n                  [getMappings]=\"getMappings\"\n                  [model]=\"mapping\"\n                  [(ngModel)]=\"browsePath\"\n                  (change)=\"updateBrowsePathInput()\"\n                  (focus)=\"setTreeFromRefNode()\"\n                  #browsePathModel=\"ngModel\"\n                />\n                <span class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-default\"\n                    title=\"{{ 'Toggle address space' | translate }}\"\n                    type=\"button\"\n                    dropdownToggle\n                  >\n                    <i [c8yIcon]=\"'caret-down'\"></i>\n                  </button>\n                </span>\n              </div>\n              <div\n                class=\"dropdown-menu panel-inner-scroll fit-w\"\n                style=\"max-height: 240px\"\n                *dropdownMenu\n              >\n                <opcua-address-space-tree\n                  [node]=\"referencedNode\"\n                  [moId]=\"referencedServerId\"\n                  (selectedNode)=\"updateBrowsePath($event); dropdown.hide()\"\n                ></opcua-address-space-tree>\n              </div>\n            </div>\n            <c8y-messages>\n              <c8y-message\n                name=\"invalidBrowsePathNotation\"\n                text=\"{{ 'Must be a valid array of strings.' | translate }}\"\n              ></c8y-message>\n              <c8y-message\n                name=\"browsePathNotUnique\"\n                text=\"{{ 'Variable with this path is already added.' | translate }}\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <ng-template #simpleInput>\n            <c8y-form-group class=\"col-md-4\">\n              <label>{{ 'Path' | translate }}</label>\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'e.g.' | translate }} {{ ['2:Node1', '2:SubNode1'] | json }}\"\n                name=\"browsePath\"\n                type=\"text\"\n                autocomplete=\"off\"\n                required\n                c8yBrowsePathValidator\n                [getMappings]=\"getMappings\"\n                [model]=\"mapping\"\n                [(ngModel)]=\"browsePath\"\n                (change)=\"updateBrowsePathInput()\"\n                #browsePathModel=\"ngModel\"\n              />\n              <c8y-messages>\n                <c8y-message\n                  name=\"invalidBrowsePathNotation\"\n                  text=\"{{ 'Must be a valid array of strings.' | translate }}\"\n                ></c8y-message>\n                <c8y-message\n                  name=\"browsePathNotUnique\"\n                  text=\"{{ 'Variable with this path is already added.' | translate }}\"\n                ></c8y-message>\n              </c8y-messages>\n            </c8y-form-group>\n          </ng-template>\n\n          <c8y-form-group class=\"col-md-4\">\n            <label>{{ 'Name' | translate }}</label>\n            <div class=\"input-group\">\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'e.g. childDevice2' | translate }} \"\n                name=\"displayName\"\n                type=\"text\"\n                autocomplete=\"off\"\n                required\n                [(ngModel)]=\"nodeDisplayName\"\n                (change)=\"updateDisplayname()\"\n              />\n            </div>\n          </c8y-form-group>\n        </div>\n        <div\n          class=\"row\"\n          ngModelGroup=\"dataReportingSection\"\n        >\n          <c8y-form-group class=\"col-sm-4 col-md-3 col-lg-2\">\n            <label>\n              <span>{{ 'Data reporting' | translate }}</span>\n            </label>\n            <div class=\"input-group\">\n              <label\n                class=\"c8y-radio radio-inline\"\n                title=\"{{ 'Default' | translate }}\"\n              >\n                <input\n                  name=\"{{ dataReportingName }}\"\n                  type=\"radio\"\n                  value=\"default\"\n                  [(ngModel)]=\"dataReporting\"\n                />\n                <span></span>\n                <span>{{ 'Default' | translate }}</span>\n              </label>\n              <label\n                class=\"c8y-radio radio-inline\"\n                title=\"{{ 'Custom' | translate }}\"\n              >\n                <input\n                  name=\"{{ dataReportingName }}\"\n                  type=\"radio\"\n                  value=\"custom\"\n                  [(ngModel)]=\"dataReporting\"\n                />\n                <span></span>\n                <span>{{ 'Custom' | translate }}</span>\n              </label>\n            </div>\n          </c8y-form-group>\n          <div\n            class=\"col-sm-8 col-md-9 col-lg-10\"\n            *ngIf=\"dataReporting === 'custom'\"\n            ngModelGroup=\"overriddenSubscription\"\n          >\n            <opcua-device-protocol-data-reporting\n              [model]=\"mapping\"\n              (onSubscriptionChange)=\"updateSubscriptionType($event)\"\n            ></opcua-device-protocol-data-reporting>\n          </div>\n        </div>\n\n        <c8y-device-protocol-object-mappings\n          [data]=\"mapping\"\n          [objectMappingTypes]=\"mappingTypes\"\n          (onUpdate)=\"onMappingUpdate($event)\">\n        </c8y-device-protocol-object-mappings>\n\n        <button\n          class=\"btn btn-default m-t-16 m-b-16\"\n          title=\"{{ 'Cancel' | translate }}\"\n          id=\"cancelBtn\"\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          {{ 'Cancel' | translate }}\n        </button>\n        <button\n          class=\"btn btn-primary m-t-16 m-b-16\"\n          title=\"{{ 'Save' | translate }}\"\n          id=\"saveBtn\"\n          type=\"button\"\n          (click)=\"save()\"\n          [disabled]=\"!canSave(variableForm)\"\n        >\n          {{ 'Save' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { 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: i5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i6.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: i7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i8.ObjectMappingComponent, selector: "c8y-device-protocol-object-mappings", inputs: ["data", "objectMappingTypes"], outputs: ["onUpdate"] }, { kind: "component", type: i9.OpcuaAddressSpaceTreeComponent, selector: "opcua-address-space-tree", inputs: ["moId", "node", "focusEmitter"], outputs: ["selectedNode"] }, { kind: "component", type: i10.OpcuaDeviceProtocolDataReportingComponent, selector: "opcua-device-protocol-data-reporting", inputs: ["model", "groupName"], outputs: ["onSubscriptionChange"] }, { kind: "directive", type: i11.OpcuaDeviceProtocolObjectMappingStatus, selector: "c8y-object-mapping-status-icons", inputs: ["mapping"] }, { kind: "directive", type: i12.OpcuaDeviceProtocolBrowsePathValidation, selector: "[c8yBrowsePathValidator][ngModel]", inputs: ["getMappings", "model"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.JsonPipe, name: "json" }], viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OpcuaDeviceProtocolMapping, decorators: [{
            type: Component,
            args: [{ selector: 'opcua-device-protocol-mapping', viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }], template: "<div\n  class=\"c8y-list__item\"\n  [ngClass]=\"{ expanded: isDetailOpen }\"\n  [attr.data-cy]=\"mapping.browsePath | json\"\n>\n  <div class=\"c8y-list__item__block\">\n    <div class=\"c8y-list__item__icon\">\n      <i c8yIcon=\"sliders\"></i>\n    </div>\n    <div class=\"c8y-list__item__body\">\n      <div class=\"content-flex-70\">\n        <div class=\"col-5\">\n          <p\n            class=\"text-truncate\"\n            title=\" {{ nodeDisplayName }} {{\n              mapping.browsePath.length > 0 ? (mapping.browsePath | json) : ''\n            }}\"\n            (click)=\"toggleDetail()\"\n          >\n            {{ nodeDisplayName }}\n            <small\n              class=\"text-muted\"\n              *ngIf=\"mapping.browsePath.length > 0\"\n            >\n              {{ mapping.browsePath | json }}\n            </small>\n          </p>\n        </div>\n        <div class=\"col-5\">\n          <div class=\"list-functionalities\">\n            <label class=\"small m-r-8 m-b-0 hidden-xs\">\n              {{ 'Functionalities' | translate }}\n            </label>\n            <c8y-object-mapping-status-icons [mapping]=\"mapping\"></c8y-object-mapping-status-icons>\n          </div>\n        </div>\n        <div class=\"flex-grow d-flex p-r-8\">\n          <button\n            class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            tooltip=\"{{ 'Remove' | translate }}\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <i\n              c8yIcon=\"minus-circle\"\n              (click)=\"onDelete()\"\n            ></i>\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"c8y-list__item__actions\">\n      <button\n        class=\"collapse-btn\"\n        title=\"{{ 'Expand' | translate }}\"\n        type=\"button\"\n        [ngClass]=\"{ active: isDetailOpen }\"\n        (click)=\"toggleDetail()\"\n        [attr.data-cy]=\"'toggleDetail'\"\n      >\n        <i c8yIcon=\"chevron-down\"></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"collapse\"\n    [collapse]=\"!isDetailOpen\"\n    [isAnimated]=\"true\"\n  >\n    <div class=\"c8y-list__item__collapse--container\">\n      <div\n        class=\"form\"\n        [ngModelGroup]=\"index\"\n        #variableForm=\"ngModelGroup\"\n        *ngIf=\"isDetailOpen\"\n      >\n        <div class=\"row p-t-8\">\n          <c8y-form-group\n            class=\"col-md-4\"\n            [status]=\"!isBrowsePathUniq ? 'error' : ''\"\n            *ngIf=\"showAddressSpaceTree(); else simpleInput\"\n          >\n            <label>{{ 'Path' | translate }}</label>\n            <div\n              class=\"dropdown fit-w\"\n              dropdown\n              #dropdown=\"bs-dropdown\"\n              [insideClick]=\"true\"\n            >\n              <div class=\"input-group\">\n                <input\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g.' | translate }} {{ ['2:Node1', '2:SubNode1'] | json }}\"\n                  name=\"browsePath\"\n                  type=\"text\"\n                  autocomplete=\"off\"\n                  required\n                  c8yBrowsePathValidator\n                  [getMappings]=\"getMappings\"\n                  [model]=\"mapping\"\n                  [(ngModel)]=\"browsePath\"\n                  (change)=\"updateBrowsePathInput()\"\n                  (focus)=\"setTreeFromRefNode()\"\n                  #browsePathModel=\"ngModel\"\n                />\n                <span class=\"input-group-btn\">\n                  <button\n                    class=\"btn btn-default\"\n                    title=\"{{ 'Toggle address space' | translate }}\"\n                    type=\"button\"\n                    dropdownToggle\n                  >\n                    <i [c8yIcon]=\"'caret-down'\"></i>\n                  </button>\n                </span>\n              </div>\n              <div\n                class=\"dropdown-menu panel-inner-scroll fit-w\"\n                style=\"max-height: 240px\"\n                *dropdownMenu\n              >\n                <opcua-address-space-tree\n                  [node]=\"referencedNode\"\n                  [moId]=\"referencedServerId\"\n                  (selectedNode)=\"updateBrowsePath($event); dropdown.hide()\"\n                ></opcua-address-space-tree>\n              </div>\n            </div>\n            <c8y-messages>\n              <c8y-message\n                name=\"invalidBrowsePathNotation\"\n                text=\"{{ 'Must be a valid array of strings.' | translate }}\"\n              ></c8y-message>\n              <c8y-message\n                name=\"browsePathNotUnique\"\n                text=\"{{ 'Variable with this path is already added.' | translate }}\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <ng-template #simpleInput>\n            <c8y-form-group class=\"col-md-4\">\n              <label>{{ 'Path' | translate }}</label>\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'e.g.' | translate }} {{ ['2:Node1', '2:SubNode1'] | json }}\"\n                name=\"browsePath\"\n                type=\"text\"\n                autocomplete=\"off\"\n                required\n                c8yBrowsePathValidator\n                [getMappings]=\"getMappings\"\n                [model]=\"mapping\"\n                [(ngModel)]=\"browsePath\"\n                (change)=\"updateBrowsePathInput()\"\n                #browsePathModel=\"ngModel\"\n              />\n              <c8y-messages>\n                <c8y-message\n                  name=\"invalidBrowsePathNotation\"\n                  text=\"{{ 'Must be a valid array of strings.' | translate }}\"\n                ></c8y-message>\n                <c8y-message\n                  name=\"browsePathNotUnique\"\n                  text=\"{{ 'Variable with this path is already added.' | translate }}\"\n                ></c8y-message>\n              </c8y-messages>\n            </c8y-form-group>\n          </ng-template>\n\n          <c8y-form-group class=\"col-md-4\">\n            <label>{{ 'Name' | translate }}</label>\n            <div class=\"input-group\">\n              <input\n                class=\"form-control\"\n                placeholder=\"{{ 'e.g. childDevice2' | translate }} \"\n                name=\"displayName\"\n                type=\"text\"\n                autocomplete=\"off\"\n                required\n                [(ngModel)]=\"nodeDisplayName\"\n                (change)=\"updateDisplayname()\"\n              />\n            </div>\n          </c8y-form-group>\n        </div>\n        <div\n          class=\"row\"\n          ngModelGroup=\"dataReportingSection\"\n        >\n          <c8y-form-group class=\"col-sm-4 col-md-3 col-lg-2\">\n            <label>\n              <span>{{ 'Data reporting' | translate }}</span>\n            </label>\n            <div class=\"input-group\">\n              <label\n                class=\"c8y-radio radio-inline\"\n                title=\"{{ 'Default' | translate }}\"\n              >\n                <input\n                  name=\"{{ dataReportingName }}\"\n                  type=\"radio\"\n                  value=\"default\"\n                  [(ngModel)]=\"dataReporting\"\n                />\n                <span></span>\n                <span>{{ 'Default' | translate }}</span>\n              </label>\n              <label\n                class=\"c8y-radio radio-inline\"\n                title=\"{{ 'Custom' | translate }}\"\n              >\n                <input\n                  name=\"{{ dataReportingName }}\"\n                  type=\"radio\"\n                  value=\"custom\"\n                  [(ngModel)]=\"dataReporting\"\n                />\n                <span></span>\n                <span>{{ 'Custom' | translate }}</span>\n              </label>\n            </div>\n          </c8y-form-group>\n          <div\n            class=\"col-sm-8 col-md-9 col-lg-10\"\n            *ngIf=\"dataReporting === 'custom'\"\n            ngModelGroup=\"overriddenSubscription\"\n          >\n            <opcua-device-protocol-data-reporting\n              [model]=\"mapping\"\n              (onSubscriptionChange)=\"updateSubscriptionType($event)\"\n            ></opcua-device-protocol-data-reporting>\n          </div>\n        </div>\n\n        <c8y-device-protocol-object-mappings\n          [data]=\"mapping\"\n          [objectMappingTypes]=\"mappingTypes\"\n          (onUpdate)=\"onMappingUpdate($event)\">\n        </c8y-device-protocol-object-mappings>\n\n        <button\n          class=\"btn btn-default m-t-16 m-b-16\"\n          title=\"{{ 'Cancel' | translate }}\"\n          id=\"cancelBtn\"\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          {{ 'Cancel' | translate }}\n        </button>\n        <button\n          class=\"btn btn-primary m-t-16 m-b-16\"\n          title=\"{{ 'Save' | translate }}\"\n          id=\"saveBtn\"\n          type=\"button\"\n          (click)=\"save()\"\n          [disabled]=\"!canSave(variableForm)\"\n        >\n          {{ 'Save' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.AddressSpaceService }], propDecorators: { subFormRef: [{
                type: ViewChild,
                args: ['variableForm', { static: false }]
            }], browsePathModel: [{
                type: ViewChild,
                args: ['browsePathModel', { static: false }]
            }], _model: [{
                type: Input,
                args: ['resource']
            }], index: [{
                type: Input
            }], getParentAttr: [{
                type: Input
            }], referencedServerId: [{
                type: Input
            }], referencedRootNodeId: [{
                type: Input
            }], onAction: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 