@openziti/ziti-console-lib 0.6.4 → 0.6.5

package/fesm2022/openziti-ziti-console-lib.mjs

@@ -423,7 +423,7 @@ class SettingsServiceClass {
             growler$3.error("Name and URL required");
         }
         else {
-            this.controllerSave(name, url);
+            return this.controllerSave(name, url);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SettingsServiceClass, deps: [{ token: i1$1.HttpBackend }, { token: GrowlerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -1221,31 +1221,51 @@ class StringInputComponent {
         }, 500)();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StringInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StringInputComponent, selector: "lib-string-input", inputs: { fieldName: "fieldName", fieldValue: "fieldValue", placeholder: "placeholder", parentage: "parentage", labelColor: "labelColor", fieldClass: "fieldClass", error: "error" }, outputs: { fieldValueChange: "fieldValueChange" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StringInputComponent, selector: "lib-string-input", inputs: { fieldName: "fieldName", helpText: "helpText", fieldValue: "fieldValue", placeholder: "placeholder", parentage: "parentage", labelColor: "labelColor", fieldClass: "fieldClass", error: "error" }, outputs: { fieldValueChange: "fieldValueChange" }, ngImport: i0, template: `
       <div [ngClass]="fieldClass + (!_isValid ? 'invalid' : '')" class="string-input-container">
-          <label for="schema_{{parentage?parentage+'_':''}}{{_idName}}"  [ngStyle]="{'color': labelColor}">{{_fieldName}}</label>
+          <div class="label-container">
+              <label for="schema_{{parentage?parentage+'_':''}}{{_idName}}"  [ngStyle]="{'color': labelColor}">{{_fieldName}}</label>
+              <div
+                  *ngIf="helpText"
+                  class="form-field-info infoicon"
+                  matTooltip="{{helpText}}"
+                  matTooltipPosition="above"
+                  matTooltipClass="wide-tooltip"
+              ></div>
+          </div>
           <input id="schema_{{parentage?parentage+'_':''}}{{_idName}}"
                  type="text" class="jsonEntry"
                  [ngClass]="{'error': error}"
                  [placeholder]="placeholder" [(ngModel)]="fieldValue" (paste)="onKeyup()" (keyup)="onKeyup()"/>
           <div *ngIf="error" class="error">{{error}}</div>
       </div>
-  `, isInline: true, styles: [".string-input-container{margin:var(--marginSmall) 0}.string-input-container label{margin-bottom:0;margin-top:0}.string-input-container input.error{border-color:red}.string-input-container div.error{color:red}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  `, isInline: true, styles: [".string-input-container{margin:var(--marginSmall) 0}.string-input-container label{margin-bottom:0;margin-top:0;width:-moz-fit-content;width:fit-content}.string-input-container input.error{border-color:red}.string-input-container div.error{color:red}.label-container{display:flex;gap:5px;margin-bottom:5px;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StringInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-string-input', template: `
       <div [ngClass]="fieldClass + (!_isValid ? 'invalid' : '')" class="string-input-container">
-          <label for="schema_{{parentage?parentage+'_':''}}{{_idName}}"  [ngStyle]="{'color': labelColor}">{{_fieldName}}</label>
+          <div class="label-container">
+              <label for="schema_{{parentage?parentage+'_':''}}{{_idName}}"  [ngStyle]="{'color': labelColor}">{{_fieldName}}</label>
+              <div
+                  *ngIf="helpText"
+                  class="form-field-info infoicon"
+                  matTooltip="{{helpText}}"
+                  matTooltipPosition="above"
+                  matTooltipClass="wide-tooltip"
+              ></div>
+          </div>
           <input id="schema_{{parentage?parentage+'_':''}}{{_idName}}"
                  type="text" class="jsonEntry"
                  [ngClass]="{'error': error}"
                  [placeholder]="placeholder" [(ngModel)]="fieldValue" (paste)="onKeyup()" (keyup)="onKeyup()"/>
           <div *ngIf="error" class="error">{{error}}</div>
       </div>
-  `, styles: [".string-input-container{margin:var(--marginSmall) 0}.string-input-container label{margin-bottom:0;margin-top:0}.string-input-container input.error{border-color:red}.string-input-container div.error{color:red}\n"] }]
+  `, styles: [".string-input-container{margin:var(--marginSmall) 0}.string-input-container label{margin-bottom:0;margin-top:0;width:-moz-fit-content;width:fit-content}.string-input-container input.error{border-color:red}.string-input-container div.error{color:red}.label-container{display:flex;gap:5px;margin-bottom:5px;margin-top:10px}\n"] }]
         }], propDecorators: { fieldName: [{
                 type: Input
+            }], helpText: [{
+                type: Input
             }], fieldValue: [{
                 type: Input
             }], placeholder: [{
@@ -1520,7 +1540,7 @@ class SelectorInputComponent {
         this._idName = 'fieldname';
         this._valueList = [];
         this.listIsObject = false;
-        this.fieldValue = '';
+        this.hideSelect = false;
         this.placeholder = '';
         this.parentage = [];
         this.labelColor = '#000000';
@@ -1534,6 +1554,12 @@ class SelectorInputComponent {
         this._fieldName = name;
         this._idName = name.replace(/\s/g, '').toLowerCase();
     }
+    set fieldValue(val) {
+        this._fieldValue = val;
+    }
+    get fieldValue() {
+        return this._fieldValue;
+    }
     set valueList(list) {
         this.listIsObject = list?.length > 0 && typeof list[0] !== 'string';
         this._valueList = list;
@@ -1544,10 +1570,7 @@ class SelectorInputComponent {
             }
         });
         valToSet = valToSet || this.fieldValue;
-        this.fieldValue = undefined;
-        defer(() => {
-            this.fieldValue = valToSet;
-        });
+        this.reInitSelect();
     }
     ;
     setIsValid(isValid) {
@@ -1555,54 +1578,105 @@ class SelectorInputComponent {
     }
     selected() {
         debounce(() => {
+            if (this.fieldValue === 'undefined') {
+                this.fieldValue = undefined;
+            }
             this.fieldValueChange.emit(this.fieldValue);
             this.valueChange.next(this.fieldValue);
         }, 500)();
     }
+    reInitSelect() {
+        this.hideSelect = true;
+        defer(() => {
+            this.hideSelect = false;
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectorInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectorInputComponent, selector: "lib-selector-input", inputs: { fieldName: "fieldName", fieldValue: "fieldValue", placeholder: "placeholder", parentage: "parentage", valueList: "valueList", labelColor: "labelColor", fieldClass: "fieldClass", error: "error" }, outputs: { fieldValueChange: "fieldValueChange" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectorInputComponent, selector: "lib-selector-input", inputs: { fieldName: "fieldName", fieldValue: "fieldValue", helpText: "helpText", placeholder: "placeholder", parentage: "parentage", valueList: "valueList", labelColor: "labelColor", fieldClass: "fieldClass", error: "error" }, outputs: { fieldValueChange: "fieldValueChange" }, ngImport: i0, template: `
     <div [ngClass]="fieldClass + (!_isValid ? 'invalid' : '')" class="selector-input-container">
-      <label [ngStyle]="{'color': labelColor}">{{_fieldName}}</label>
-      <select id="schema_{{parentage?parentage+'_':''}}{{_idName}}"
-             class="jsonEntry"
-              [ngClass]="{'error': error}"
-             [(ngModel)]="fieldValue" (change)="selected()">
-          <option value="" *ngIf="placeholder">{{placeholder}}</option>
-        <ng-container *ngIf="!listIsObject">
-          <option *ngFor="let name of _valueList" [value]="name">{{name}}</option>
-        </ng-container>
-        <ng-container *ngIf="listIsObject">
-          <option *ngFor="let data of _valueList" [value]="data.value">{{data.name}}</option>
-        </ng-container>
+      <div class="label-container">
+        <label [ngStyle]="{'color': labelColor}">{{_fieldName}}</label>
+        <div
+            *ngIf="helpText"
+            class="form-field-info infoicon"
+            matTooltip="{{helpText}}"
+            matTooltipPosition="above"
+            matTooltipClass="wide-tooltip"
+        ></div>
+      </div>
+      <select
+          *ngIf="!hideSelect"
+          id="schema_{{parentage?parentage+'_':''}}{{_idName}}"
+          class="jsonEntry"
+          [ngClass]="{'error': error}"
+          [(ngModel)]="fieldValue"
+          (change)="selected()"
+      >
+          <option [value]="undefined" *ngIf="placeholder">{{placeholder}}</option>
+          <ng-container *ngIf="!listIsObject">
+            <option *ngFor="let name of _valueList" [value]="name">{{name}}</option>
+          </ng-container>
+          <ng-container *ngIf="listIsObject">
+            <option *ngFor="let data of _valueList" [value]="data.value">{{data.name}}</option>
+          </ng-container>
+      </select>
+      <select
+          *ngIf="hideSelect"
+          class="placeholder-select"
+          [ngClass]="{'error': error}"
+          [(ngModel)]="fieldValue"
+      >
       </select>
       <div *ngIf="error" class="error">{{error}}</div>
     </div>
-  `, isInline: true, styles: [".selector-input-container{margin:var(--marginSmall) 0}.selector-input-container label{margin-bottom:0;margin-top:0}.selector-input-container input.error{border-color:red}.selector-input-container div.error{color:red}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  `, isInline: true, styles: [".selector-input-container{margin:var(--marginSmall) 0}.selector-input-container label{margin-bottom:0;margin-top:0;width:-moz-fit-content;width:fit-content}.selector-input-container input.error{border-color:red}.selector-input-container div.error{color:red}.label-container{display:flex;gap:5px;margin-bottom:5px;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectorInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-selector-input', template: `
     <div [ngClass]="fieldClass + (!_isValid ? 'invalid' : '')" class="selector-input-container">
-      <label [ngStyle]="{'color': labelColor}">{{_fieldName}}</label>
-      <select id="schema_{{parentage?parentage+'_':''}}{{_idName}}"
-             class="jsonEntry"
-              [ngClass]="{'error': error}"
-             [(ngModel)]="fieldValue" (change)="selected()">
-          <option value="" *ngIf="placeholder">{{placeholder}}</option>
-        <ng-container *ngIf="!listIsObject">
-          <option *ngFor="let name of _valueList" [value]="name">{{name}}</option>
-        </ng-container>
-        <ng-container *ngIf="listIsObject">
-          <option *ngFor="let data of _valueList" [value]="data.value">{{data.name}}</option>
-        </ng-container>
+      <div class="label-container">
+        <label [ngStyle]="{'color': labelColor}">{{_fieldName}}</label>
+        <div
+            *ngIf="helpText"
+            class="form-field-info infoicon"
+            matTooltip="{{helpText}}"
+            matTooltipPosition="above"
+            matTooltipClass="wide-tooltip"
+        ></div>
+      </div>
+      <select
+          *ngIf="!hideSelect"
+          id="schema_{{parentage?parentage+'_':''}}{{_idName}}"
+          class="jsonEntry"
+          [ngClass]="{'error': error}"
+          [(ngModel)]="fieldValue"
+          (change)="selected()"
+      >
+          <option [value]="undefined" *ngIf="placeholder">{{placeholder}}</option>
+          <ng-container *ngIf="!listIsObject">
+            <option *ngFor="let name of _valueList" [value]="name">{{name}}</option>
+          </ng-container>
+          <ng-container *ngIf="listIsObject">
+            <option *ngFor="let data of _valueList" [value]="data.value">{{data.name}}</option>
+          </ng-container>
+      </select>
+      <select
+          *ngIf="hideSelect"
+          class="placeholder-select"
+          [ngClass]="{'error': error}"
+          [(ngModel)]="fieldValue"
+      >
       </select>
       <div *ngIf="error" class="error">{{error}}</div>
     </div>
-  `, styles: [".selector-input-container{margin:var(--marginSmall) 0}.selector-input-container label{margin-bottom:0;margin-top:0}.selector-input-container input.error{border-color:red}.selector-input-container div.error{color:red}\n"] }]
+  `, styles: [".selector-input-container{margin:var(--marginSmall) 0}.selector-input-container label{margin-bottom:0;margin-top:0;width:-moz-fit-content;width:fit-content}.selector-input-container input.error{border-color:red}.selector-input-container div.error{color:red}.label-container{display:flex;gap:5px;margin-bottom:5px;margin-top:10px}\n"] }]
         }], propDecorators: { fieldName: [{
                 type: Input
             }], fieldValue: [{
                 type: Input
+            }], helpText: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], parentage: [{
@@ -2002,7 +2076,7 @@ class ProtocolAddressPortInputComponent {
         this.hostname = data.hostname;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProtocolAddressPortInputComponent, deps: [{ token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProtocolAddressPortInputComponent, selector: "lib-protocol-address-port-input", inputs: { protocolList: "protocolList", showProtocol: "showProtocol", showAddress: "showAddress", showHostName: "showHostName", showPort: "showPort", disableProtocol: "disableProtocol", disableAddress: "disableAddress", disableHostName: "disableHostName", disablePort: "disablePort", protocol: "protocol", address: "address", hostname: "hostname", port: "port", parentage: "parentage", labelColor: "labelColor", labelPrefix: "labelPrefix", fieldClass: "fieldClass", error: "error" }, outputs: { fieldValueChange: "fieldValueChange", portChange: "portChange", addressChange: "addressChange", hostnameChange: "hostnameChange", protocolChange: "protocolChange" }, ngImport: i0, template: "<div class=\"grid {{className}}\">\n    <div *ngIf=\"showProtocol\" [ngClass]=\"{disabled: disableProtocol, invalid: errors['protocol']}\">\n        <lib-selector-input [fieldName]=\"protocolFieldName\"\n                      [(fieldValue)]=\"protocol\"\n                      [labelColor]=\"labelColor\"\n                      [placeholder]=\"undefined\"\n                      [valueList]=\"['tcp', 'udp']\"\n                      (fieldValueChange)=\"update()\"\n        ></lib-selector-input>\n    </div>\n    <div *ngIf=\"showAddress\" [ngClass]=\"{disabled: disableAddress, invalid: errors['address']}\">\n        <lib-string-input [fieldName]=\"addressFieldName\"\n                    [(fieldValue)]=\"address\"\n                    [labelColor]=\"labelColor\"\n                    [placeholder]=\"'host.name'\"\n                          (fieldValueChange)=\"update()\"\n        ></lib-string-input>\n    </div>\n    <div *ngIf=\"showHostName\" [ngClass]=\"{disabled: disableHostName, invalid: errors['hostname']}\">\n        <lib-string-input [fieldName]=\"hostnameFieldName\"\n                          [(fieldValue)]=\"hostname\"\n                          [labelColor]=\"labelColor\"\n                          [placeholder]=\"'host.name'\"\n                          (fieldValueChange)=\"update()\"\n        ></lib-string-input>\n    </div>\n    <div *ngIf=\"showPort\" [ngClass]=\"{disabled: disablePort, invalid: errors['port']}\">\n        <lib-number-input [fieldName]=\"portFieldName\"\n                    [(fieldValue)]=\"port\"\n                    [labelColor]=\"labelColor\"\n                    [placeholder]=\"'0'\"\n                    (fieldValueChange)=\"update()\"\n        ></lib-number-input>\n    </div>\n</div>\n", styles: [".grid{display:grid;grid-template-columns:auto;grid-gap:10px}.grid.addressFull{grid-template-columns:75px auto 75px}.grid.addressFull .disabled{opacity:.5;pointer-events:none}.grid.address-only{grid-template-columns:auto}.host-name-port{grid-template-columns:auto 75px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StringInputComponent, selector: "lib-string-input", inputs: ["fieldName", "fieldValue", "placeholder", "parentage", "labelColor", "fieldClass", "error"], outputs: ["fieldValueChange"] }, { kind: "component", type: NumberInputComponent, selector: "lib-number-input", inputs: ["fieldName", "fieldValue", "placeholder", "parentage", "labelColor", "fieldClass", "error"], outputs: ["fieldValueChange"] }, { kind: "component", type: SelectorInputComponent, selector: "lib-selector-input", inputs: ["fieldName", "fieldValue", "placeholder", "parentage", "valueList", "labelColor", "fieldClass", "error"], outputs: ["fieldValueChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProtocolAddressPortInputComponent, selector: "lib-protocol-address-port-input", inputs: { protocolList: "protocolList", showProtocol: "showProtocol", showAddress: "showAddress", showHostName: "showHostName", showPort: "showPort", disableProtocol: "disableProtocol", disableAddress: "disableAddress", disableHostName: "disableHostName", disablePort: "disablePort", protocol: "protocol", address: "address", hostname: "hostname", port: "port", parentage: "parentage", labelColor: "labelColor", labelPrefix: "labelPrefix", fieldClass: "fieldClass", error: "error" }, outputs: { fieldValueChange: "fieldValueChange", portChange: "portChange", addressChange: "addressChange", hostnameChange: "hostnameChange", protocolChange: "protocolChange" }, ngImport: i0, template: "<div class=\"grid {{className}}\">\n    <div *ngIf=\"showProtocol\" [ngClass]=\"{disabled: disableProtocol, invalid: errors['protocol']}\">\n        <lib-selector-input [fieldName]=\"protocolFieldName\"\n                      [(fieldValue)]=\"protocol\"\n                      [labelColor]=\"labelColor\"\n                      [placeholder]=\"undefined\"\n                      [valueList]=\"['tcp', 'udp']\"\n                      (fieldValueChange)=\"update()\"\n        ></lib-selector-input>\n    </div>\n    <div *ngIf=\"showAddress\" [ngClass]=\"{disabled: disableAddress, invalid: errors['address']}\">\n        <lib-string-input [fieldName]=\"addressFieldName\"\n                    [(fieldValue)]=\"address\"\n                    [labelColor]=\"labelColor\"\n                    [placeholder]=\"'host.name'\"\n                          (fieldValueChange)=\"update()\"\n        ></lib-string-input>\n    </div>\n    <div *ngIf=\"showHostName\" [ngClass]=\"{disabled: disableHostName, invalid: errors['hostname']}\">\n        <lib-string-input [fieldName]=\"hostnameFieldName\"\n                          [(fieldValue)]=\"hostname\"\n                          [labelColor]=\"labelColor\"\n                          [placeholder]=\"'host.name'\"\n                          (fieldValueChange)=\"update()\"\n        ></lib-string-input>\n    </div>\n    <div *ngIf=\"showPort\" [ngClass]=\"{disabled: disablePort, invalid: errors['port']}\">\n        <lib-number-input [fieldName]=\"portFieldName\"\n                    [(fieldValue)]=\"port\"\n                    [labelColor]=\"labelColor\"\n                    [placeholder]=\"'0'\"\n                    (fieldValueChange)=\"update()\"\n        ></lib-number-input>\n    </div>\n</div>\n", styles: [".grid{display:grid;grid-template-columns:auto;grid-gap:10px}.grid.addressFull{grid-template-columns:75px auto 75px}.grid.addressFull .disabled{opacity:.5;pointer-events:none}.grid.address-only{grid-template-columns:auto}.host-name-port{grid-template-columns:auto 75px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StringInputComponent, selector: "lib-string-input", inputs: ["fieldName", "helpText", "fieldValue", "placeholder", "parentage", "labelColor", "fieldClass", "error"], outputs: ["fieldValueChange"] }, { kind: "component", type: NumberInputComponent, selector: "lib-number-input", inputs: ["fieldName", "fieldValue", "placeholder", "parentage", "labelColor", "fieldClass", "error"], outputs: ["fieldValueChange"] }, { kind: "component", type: SelectorInputComponent, selector: "lib-selector-input", inputs: ["fieldName", "fieldValue", "helpText", "placeholder", "parentage", "valueList", "labelColor", "fieldClass", "error"], outputs: ["fieldValueChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProtocolAddressPortInputComponent, decorators: [{
             type: Component,
@@ -4091,9 +4165,9 @@ class SchemaService {
         const val = list?.length > 0 ? list[0] : '';
         let componentRef = view.createComponent(SelectorInputComponent);
         componentRef.setInput('fieldName', this.getLabel(key));
+        componentRef.setInput('placeholder', `select ${key}`);
         if (parentage && !_.isEmpty(parentage))
             componentRef.setInput('parentage', parentage);
-        componentRef.setInput('fieldValue', val);
         componentRef.setInput('valueList', list);
         componentRef.setInput('labelColor', this.lColorArray[nestLevel]);
         return componentRef;