@openziti/ziti-console-lib 0.10.2 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/esm2022/lib/features/projectable-forms/service/service-form.component.mjs +5 -4
  2. package/esm2022/lib/services/auth.service.mjs +4 -2
  3. package/esm2022/lib/version.mjs +2 -2
  4. package/fesm2022/openziti-ziti-console-lib.mjs +8 -5
  5. package/fesm2022/openziti-ziti-console-lib.mjs.map +1 -1
  6. package/lib/features/projectable-forms/service/service-form.component.d.ts.map +1 -1
  7. package/lib/services/auth.service.d.ts.map +1 -1
  8. package/package.json +1 -1
package/esm2022/lib/version.mjs CHANGED
@@ -1,4 +1,4 @@
1
1
  export const VERSION = {
2
- "version": "3.10.0"
2
+ "version": "3.11.1"
3
3
  };
4
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3ppdGktY29uc29sZS1saWIvc3JjL2xpYi92ZXJzaW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBRztJQUNuQixTQUFTLEVBQUUsUUFBUTtDQUN0QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IFZFUlNJT04gPSB7XG4gICAgXCJ2ZXJzaW9uXCI6IFwiMy4xMC4wXCJcbn07XG4iXX0=
4
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3ppdGktY29uc29sZS1saWIvc3JjL2xpYi92ZXJzaW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBRztJQUNuQixTQUFTLEVBQUUsUUFBUTtDQUN0QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IFZFUlNJT04gPSB7XG4gICAgXCJ2ZXJzaW9uXCI6IFwiMy4xMS4xXCJcbn07XG4iXX0=
package/fesm2022/openziti-ziti-console-lib.mjs CHANGED
@@ -17551,7 +17551,7 @@ class ServiceFormComponent extends ProjectableForm {
17551
17551
  this.svc.formData = data;
17552
17552
  }
17553
17553
  get formData() {
17554
- return this.svc.formData;
17554
+ return this.svc?.formData;
17555
17555
  }
17556
17556
  constructor(settingsService, svc, zitiService, growlerService, extService, router, route, location) {
17557
17557
  super(growlerService, extService, zitiService, router, route, location, settingsService);
@@ -17744,6 +17744,7 @@ class ServiceFormComponent extends ProjectableForm {
17744
17744
  if (!isEmpty(result?.id)) {
17745
17745
  this.formData = result;
17746
17746
  this.initData = this.formData;
17747
+ this.checkDataChange();
17747
17748
  }
17748
17749
  return result?.id;
17749
17750
  }).finally(() => {
@@ -17785,7 +17786,7 @@ class ServiceFormComponent extends ProjectableForm {
17785
17786
  provide: MatDialogRef,
17786
17787
  useValue: {}
17787
17788
  }
17788
- ], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"returnToListPage()\"\n tabindex=\"0\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n [moreActions]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n [saveTooltip]=\"saveButtonTooltip\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Name'\" [label]=\"'Required'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this Service\"\n [ngClass]=\"{error: svc.errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Service attributes'\"\n [label]=\"'Optional'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n >\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group Services'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Add Configurations'\"\n (actionRequested)=\"attachConfig()\"\n (keyup.enter)=\"captureConfigEnterEvent($event)\"\n [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n >\n <div class=\"form-field-input-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Select a Config</span>\n </div>\n <select\n [(ngModel)]=\"svc.selectedConfigTypeId\"\n (change)=\"configTypeChanged($event)\"\n id=\"SelectedConfigType\"\n class=\"form-field-dropdown\"\n >\n <option value=\"\">Select configuration type...</option>\n <option\n *ngFor=\"let type of svc.configTypes\"\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n </select>\n <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n <p-dropdown\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n filterBy=\"name\"\n [options]=\"svc.filteredConfigs\"\n [filter]=\"true\"\n [showClear]=\"true\"\n [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n (onChange)=\"configChanged($event)\"\n [(ngModel)]=\"svc.selectedConfigId\"\n >\n <ng-template pTemplate=\"filter\" let-options=\"options\">\n <div class=\"dropdown-filter-container\">\n <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n <input\n type=\"text\"\n pInputText\n placeholder=\"Filter\"\n (keyup)=\"configFilterChangedDebounced($event)\" />\n </div>\n <button pButton\n icon=\"pi pi-times\"\n [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n (click)=\"clearConfigFilter($event)\"\n severity=\"secondary\">\n </button>\n <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n </div>\n </ng-template>\n </p-dropdown>\n </div>\n <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n {{svc.attachLabel}}\n </div>\n </div>\n <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Config Name</span>\n <div\n class=\"save-button\"\n (click)=\"attachConfig()\"\n *ngIf=\"svc.selectedConfigId !== 'preview'\"\n >{{svc.attachLabel}}\n </div>\n </div>\n <input\n *ngIf=\"showConfigData\"\n [(ngModel)]=\"svc.newConfigName\"\n class=\"form-field-input\"\n [placeholder]=\"'New Config Name'\"\n [ngClass]=\"{error: svc.configErrors['name']}\"\n style=\"margin-bottom: 20px;\"\n />\n <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Configuration Data</span>\n <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n JSON\n </span>\n </div>\n </div>\n <lib-config-editor\n [(configData)]=\"svc.configData\"\n [schema]=\"svc.selectedSchema\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"svc.configErrors\"\n #configEditor\n ></lib-config-editor>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div *ngIf=\"showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Terminator Strategy'\"\n [title2]=\"'Encryption'\"\n [layout]=\"'row'\"\n [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n class=\"form-field-advanced\"\n >\n <select\n [(ngModel)]=\"formData.terminatorStrategy\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n >\n <option value=\"\">Select a Strategy....</option>\n <option\n *ngFor=\"let strat of strategies\"\n [value]=\"strat.id\"\n >\n {{ strat.label }}\n </option>\n </select>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Require Encryption</div>\n <div\n (click)=\"toggleEncryptionRequired()\"\n [ngClass]=\"{ on: formData.encryptionRequired }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Entities'\"\n [label]=\"'Click for detailed view'\"\n [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n [class]=\"'no-gap'\"\n >\n <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Configurations</span>\n </div>\n <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedConfigsLoading\"\n [allNames]=\"svc.addedConfigs\"\n [allowRemove]=\"true\"\n [clickable]=\"true\"\n [showfilter]=\"false\"\n [tooltip]=\"'View Config'\"\n (itemRemoved)=\"svc.removeConfig($event)\"\n (itemSelected)=\"svc.previewConfig($event, router)\"\n ></lib-preview-list>\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Policies</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedServicePoliciesLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewPolicy($event, router)\"\n [tooltip]=\"'View Service Policy'\"\n [allNames]=\"svc.associatedServicePolicies\"\n [showfilter]=\"false\"\n ></lib-preview-list>\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Terminators</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedTerminators ? svc.associatedTerminators.length : 0}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedTerminatorsLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewTerminator($event, router)\"\n [tooltip]=\"'View Terminator'\"\n [allNames]=\"svc.associatedTerminators\"\n [showfilter]=\"false\"\n ></lib-preview-list>\n </lib-form-field-container>\n<!-- <lib-form-field-container\n *ngIf=\"formData.id\"\n [title]=\"'Associated Service Policies'\"\n [count]=\"svc.associatedServicePolicies.length\"\n [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n >\n </lib-form-field-container>-->\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [class]=\"'api-call-container'\"\n [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\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: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.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: i6$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
17789
+ ], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"returnToListPage()\"\n tabindex=\"0\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n [saveTooltip]=\"saveButtonTooltip\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Name'\" [label]=\"'Required'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this Service\"\n [ngClass]=\"{error: svc.errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Service attributes'\"\n [label]=\"'Optional'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n >\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group Services'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Add Configurations'\"\n (actionRequested)=\"attachConfig()\"\n (keyup.enter)=\"captureConfigEnterEvent($event)\"\n [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n >\n <div class=\"form-field-input-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Select a Config</span>\n </div>\n <select\n [(ngModel)]=\"svc.selectedConfigTypeId\"\n (change)=\"configTypeChanged($event)\"\n id=\"SelectedConfigType\"\n class=\"form-field-dropdown\"\n >\n <option value=\"\">Select configuration type...</option>\n <option\n *ngFor=\"let type of svc.configTypes\"\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n </select>\n <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n <p-dropdown\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n filterBy=\"name\"\n [options]=\"svc.filteredConfigs\"\n [filter]=\"true\"\n [showClear]=\"true\"\n [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n (onChange)=\"configChanged($event)\"\n [(ngModel)]=\"svc.selectedConfigId\"\n >\n <ng-template pTemplate=\"filter\" let-options=\"options\">\n <div class=\"dropdown-filter-container\">\n <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n <input\n type=\"text\"\n pInputText\n placeholder=\"Filter\"\n (keyup)=\"configFilterChangedDebounced($event)\" />\n </div>\n <button pButton\n icon=\"pi pi-times\"\n [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n (click)=\"clearConfigFilter($event)\"\n severity=\"secondary\">\n </button>\n <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n </div>\n </ng-template>\n </p-dropdown>\n </div>\n <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n {{svc.attachLabel}}\n </div>\n </div>\n <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Config Name</span>\n <div\n class=\"save-button\"\n (click)=\"attachConfig()\"\n *ngIf=\"svc.selectedConfigId !== 'preview'\"\n >{{svc.attachLabel}}\n </div>\n </div>\n <input\n *ngIf=\"showConfigData\"\n [(ngModel)]=\"svc.newConfigName\"\n class=\"form-field-input\"\n [placeholder]=\"'New Config Name'\"\n [ngClass]=\"{error: svc.configErrors['name']}\"\n style=\"margin-bottom: 20px;\"\n />\n <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Configuration Data</span>\n <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n JSON\n </span>\n </div>\n </div>\n <lib-config-editor\n [(configData)]=\"svc.configData\"\n [schema]=\"svc.selectedSchema\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"svc.configErrors\"\n #configEditor\n ></lib-config-editor>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div *ngIf=\"showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Terminator Strategy'\"\n [title2]=\"'Encryption'\"\n [layout]=\"'row'\"\n [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n class=\"form-field-advanced\"\n >\n <select\n [(ngModel)]=\"formData.terminatorStrategy\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n >\n <option value=\"\">Select a Strategy....</option>\n <option\n *ngFor=\"let strat of strategies\"\n [value]=\"strat.id\"\n >\n {{ strat.label }}\n </option>\n </select>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Require Encryption</div>\n <div\n (click)=\"toggleEncryptionRequired()\"\n [ngClass]=\"{ on: formData.encryptionRequired }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Entities'\"\n [label]=\"'Click for detailed view'\"\n [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n [class]=\"'no-gap'\"\n >\n <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Configurations</span>\n </div>\n <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedConfigsLoading\"\n [allNames]=\"svc.addedConfigs\"\n [allowRemove]=\"true\"\n [clickable]=\"true\"\n [showfilter]=\"false\"\n [tooltip]=\"'View Config'\"\n (itemRemoved)=\"svc.removeConfig($event)\"\n (itemSelected)=\"svc.previewConfig($event, router)\"\n ></lib-preview-list>\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Policies</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedServicePoliciesLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewPolicy($event, router)\"\n [tooltip]=\"'View Service Policy'\"\n [allNames]=\"svc.associatedServicePolicies\"\n [showfilter]=\"false\"\n ></lib-preview-list>\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Terminators</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedTerminators ? svc.associatedTerminators.length : 0}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedTerminatorsLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewTerminator($event, router)\"\n [tooltip]=\"'View Terminator'\"\n [allNames]=\"svc.associatedTerminators\"\n [showfilter]=\"false\"\n ></lib-preview-list>\n </lib-form-field-container>\n<!-- <lib-form-field-container\n *ngIf=\"formData.id\"\n [title]=\"'Associated Service Policies'\"\n [count]=\"svc.associatedServicePolicies.length\"\n [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n >\n </lib-form-field-container>-->\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [class]=\"'api-call-container'\"\n [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\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: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.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: i6$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
17789
17790
  }
17790
17791
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceFormComponent, decorators: [{
17791
17792
  type: Component,
@@ -17794,7 +17795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
17794
17795
  provide: MatDialogRef,
17795
17796
  useValue: {}
17796
17797
  }
17797
- ], template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"returnToListPage()\"\n tabindex=\"0\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n [moreActions]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n [saveTooltip]=\"saveButtonTooltip\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Name'\" [label]=\"'Required'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this Service\"\n [ngClass]=\"{error: svc.errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Service attributes'\"\n [label]=\"'Optional'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n >\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group Services'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Add Configurations'\"\n (actionRequested)=\"attachConfig()\"\n (keyup.enter)=\"captureConfigEnterEvent($event)\"\n [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n >\n <div class=\"form-field-input-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Select a Config</span>\n </div>\n <select\n [(ngModel)]=\"svc.selectedConfigTypeId\"\n (change)=\"configTypeChanged($event)\"\n id=\"SelectedConfigType\"\n class=\"form-field-dropdown\"\n >\n <option value=\"\">Select configuration type...</option>\n <option\n *ngFor=\"let type of svc.configTypes\"\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n </select>\n <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n <p-dropdown\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n filterBy=\"name\"\n [options]=\"svc.filteredConfigs\"\n [filter]=\"true\"\n [showClear]=\"true\"\n [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n (onChange)=\"configChanged($event)\"\n [(ngModel)]=\"svc.selectedConfigId\"\n >\n <ng-template pTemplate=\"filter\" let-options=\"options\">\n <div class=\"dropdown-filter-container\">\n <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n <input\n type=\"text\"\n pInputText\n placeholder=\"Filter\"\n (keyup)=\"configFilterChangedDebounced($event)\" />\n </div>\n <button pButton\n icon=\"pi pi-times\"\n [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n (click)=\"clearConfigFilter($event)\"\n severity=\"secondary\">\n </button>\n <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n </div>\n </ng-template>\n </p-dropdown>\n </div>\n <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n {{svc.attachLabel}}\n </div>\n </div>\n <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Config Name</span>\n <div\n class=\"save-button\"\n (click)=\"attachConfig()\"\n *ngIf=\"svc.selectedConfigId !== 'preview'\"\n >{{svc.attachLabel}}\n </div>\n </div>\n <input\n *ngIf=\"showConfigData\"\n [(ngModel)]=\"svc.newConfigName\"\n class=\"form-field-input\"\n [placeholder]=\"'New Config Name'\"\n [ngClass]=\"{error: svc.configErrors['name']}\"\n style=\"margin-bottom: 20px;\"\n />\n <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Configuration Data</span>\n <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n JSON\n </span>\n </div>\n </div>\n <lib-config-editor\n [(configData)]=\"svc.configData\"\n [schema]=\"svc.selectedSchema\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"svc.configErrors\"\n #configEditor\n ></lib-config-editor>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div *ngIf=\"showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Terminator Strategy'\"\n [title2]=\"'Encryption'\"\n [layout]=\"'row'\"\n [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n class=\"form-field-advanced\"\n >\n <select\n [(ngModel)]=\"formData.terminatorStrategy\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n >\n <option value=\"\">Select a Strategy....</option>\n <option\n *ngFor=\"let strat of strategies\"\n [value]=\"strat.id\"\n >\n {{ strat.label }}\n </option>\n </select>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Require Encryption</div>\n <div\n (click)=\"toggleEncryptionRequired()\"\n [ngClass]=\"{ on: formData.encryptionRequired }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Entities'\"\n [label]=\"'Click for detailed view'\"\n [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n [class]=\"'no-gap'\"\n >\n <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Configurations</span>\n </div>\n <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedConfigsLoading\"\n [allNames]=\"svc.addedConfigs\"\n [allowRemove]=\"true\"\n [clickable]=\"true\"\n [showfilter]=\"false\"\n [tooltip]=\"'View Config'\"\n (itemRemoved)=\"svc.removeConfig($event)\"\n (itemSelected)=\"svc.previewConfig($event, router)\"\n ></lib-preview-list>\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Policies</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedServicePoliciesLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewPolicy($event, router)\"\n [tooltip]=\"'View Service Policy'\"\n [allNames]=\"svc.associatedServicePolicies\"\n [showfilter]=\"false\"\n ></lib-preview-list>\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Terminators</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedTerminators ? svc.associatedTerminators.length : 0}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedTerminatorsLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewTerminator($event, router)\"\n [tooltip]=\"'View Terminator'\"\n [allNames]=\"svc.associatedTerminators\"\n [showfilter]=\"false\"\n ></lib-preview-list>\n </lib-form-field-container>\n<!-- <lib-form-field-container\n *ngIf=\"formData.id\"\n [title]=\"'Associated Service Policies'\"\n [count]=\"svc.associatedServicePolicies.length\"\n [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n >\n </lib-form-field-container>-->\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [class]=\"'api-call-container'\"\n [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"] }]
17798
+ ], template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"returnToListPage()\"\n tabindex=\"0\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n [saveTooltip]=\"saveButtonTooltip\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Name'\" [label]=\"'Required'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this Service\"\n [ngClass]=\"{error: svc.errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Service attributes'\"\n [label]=\"'Optional'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n >\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group Services'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Add Configurations'\"\n (actionRequested)=\"attachConfig()\"\n (keyup.enter)=\"captureConfigEnterEvent($event)\"\n [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n >\n <div class=\"form-field-input-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Select a Config</span>\n </div>\n <select\n [(ngModel)]=\"svc.selectedConfigTypeId\"\n (change)=\"configTypeChanged($event)\"\n id=\"SelectedConfigType\"\n class=\"form-field-dropdown\"\n >\n <option value=\"\">Select configuration type...</option>\n <option\n *ngFor=\"let type of svc.configTypes\"\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n </select>\n <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n <p-dropdown\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n filterBy=\"name\"\n [options]=\"svc.filteredConfigs\"\n [filter]=\"true\"\n [showClear]=\"true\"\n [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n (onChange)=\"configChanged($event)\"\n [(ngModel)]=\"svc.selectedConfigId\"\n >\n <ng-template pTemplate=\"filter\" let-options=\"options\">\n <div class=\"dropdown-filter-container\">\n <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n <input\n type=\"text\"\n pInputText\n placeholder=\"Filter\"\n (keyup)=\"configFilterChangedDebounced($event)\" />\n </div>\n <button pButton\n icon=\"pi pi-times\"\n [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n (click)=\"clearConfigFilter($event)\"\n severity=\"secondary\">\n </button>\n <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n </div>\n </ng-template>\n </p-dropdown>\n </div>\n <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n {{svc.attachLabel}}\n </div>\n </div>\n <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Config Name</span>\n <div\n class=\"save-button\"\n (click)=\"attachConfig()\"\n *ngIf=\"svc.selectedConfigId !== 'preview'\"\n >{{svc.attachLabel}}\n </div>\n </div>\n <input\n *ngIf=\"showConfigData\"\n [(ngModel)]=\"svc.newConfigName\"\n class=\"form-field-input\"\n [placeholder]=\"'New Config Name'\"\n [ngClass]=\"{error: svc.configErrors['name']}\"\n style=\"margin-bottom: 20px;\"\n />\n <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Configuration Data</span>\n <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n JSON\n </span>\n </div>\n </div>\n <lib-config-editor\n [(configData)]=\"svc.configData\"\n [schema]=\"svc.selectedSchema\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"svc.configErrors\"\n #configEditor\n ></lib-config-editor>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div *ngIf=\"showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Terminator Strategy'\"\n [title2]=\"'Encryption'\"\n [layout]=\"'row'\"\n [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n class=\"form-field-advanced\"\n >\n <select\n [(ngModel)]=\"formData.terminatorStrategy\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n >\n <option value=\"\">Select a Strategy....</option>\n <option\n *ngFor=\"let strat of strategies\"\n [value]=\"strat.id\"\n >\n {{ strat.label }}\n </option>\n </select>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Require Encryption</div>\n <div\n (click)=\"toggleEncryptionRequired()\"\n [ngClass]=\"{ on: formData.encryptionRequired }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Entities'\"\n [label]=\"'Click for detailed view'\"\n [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n [class]=\"'no-gap'\"\n >\n <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Configurations</span>\n </div>\n <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedConfigsLoading\"\n [allNames]=\"svc.addedConfigs\"\n [allowRemove]=\"true\"\n [clickable]=\"true\"\n [showfilter]=\"false\"\n [tooltip]=\"'View Config'\"\n (itemRemoved)=\"svc.removeConfig($event)\"\n (itemSelected)=\"svc.previewConfig($event, router)\"\n ></lib-preview-list>\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Policies</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedServicePoliciesLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewPolicy($event, router)\"\n [tooltip]=\"'View Service Policy'\"\n [allNames]=\"svc.associatedServicePolicies\"\n [showfilter]=\"false\"\n ></lib-preview-list>\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Terminators</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedTerminators ? svc.associatedTerminators.length : 0}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedTerminatorsLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewTerminator($event, router)\"\n [tooltip]=\"'View Terminator'\"\n [allNames]=\"svc.associatedTerminators\"\n [showfilter]=\"false\"\n ></lib-preview-list>\n </lib-form-field-container>\n<!-- <lib-form-field-container\n *ngIf=\"formData.id\"\n [title]=\"'Associated Service Policies'\"\n [count]=\"svc.associatedServicePolicies.length\"\n [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n >\n </lib-form-field-container>-->\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [class]=\"'api-call-container'\"\n [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"] }]
17798
17799
  }], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
17799
17800
  type: Inject,
17800
17801
  args: [SETTINGS_SERVICE]
@@ -26371,7 +26372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
26371
26372
  }] });
26372
26373
 
26373
26374
  const VERSION = {
26374
- "version": "3.10.0"
26375
+ "version": "3.11.1"
26375
26376
  };
26376
26377
 
26377
26378
  /*
@@ -28092,7 +28093,9 @@ class AuthService {
28092
28093
  showDebugInformation: true,
28093
28094
  customQueryParams: {
28094
28095
  audience: audience
28095
- }
28096
+ },
28097
+ strictDiscoveryDocumentValidation: false,
28098
+ usePKCE: true,
28096
28099
  };
28097
28100
  localStorage.setItem('oauth_callback_config', JSON.stringify(oauthConfig));
28098
28101
  this.oauthService.configure(oauthConfig);