@openziti/ziti-console-lib 0.10.0 → 0.10.1

package/esm2022/lib/features/projectable-forms/service/service-form.component.mjs

@@ -286,7 +286,7 @@ class ServiceFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], 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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.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.InputText, selector: "[pInputText]" }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i9.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: i10.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i11.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i12.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i13.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i14.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i15.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i16.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: i17.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "component", type: i18.ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
+        ], 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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.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.InputText, selector: "[pInputText]" }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i9.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: i10.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i11.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: i12.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i13.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i14.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i15.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i16.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: i17.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "component", type: i18.ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
 }
 export { ServiceFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceFormComponent, decorators: [{

package/esm2022/lib/features/projectable-forms/service/simple-service/simple-service.component.mjs

@@ -765,7 +765,7 @@ class SimpleServiceComponent extends ProjectableForm {
     clear() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SimpleServiceComponent, deps: [{ token: SETTINGS_SERVICE }, { token: i1.ServiceFormService }, { token: ZITI_DATA_SERVICE }, { token: i2.GrowlerService }, { token: SERVICE_EXTENSION_SERVICE }, { token: i3.MatDialog }, { token: i4.ValidationService }, { token: i5.ServicesPageService }, { token: i6.Router }, { token: i6.ActivatedRoute }, { token: i7.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SimpleServiceComponent, selector: "lib-simple-service", inputs: { serviceRoleAttributes: "serviceRoleAttributes", identityRoleAttributes: "identityRoleAttributes", identityNamedAttributes: "identityNamedAttributes" }, outputs: { close: "close", selected: "selected" }, usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper simple-service-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(true, false, 'cards', $event)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"showForm ? 'Create a Simple Service' : 'Service Creation Summary'\"\n            [actionButtonText]=\"'Save'\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"simple-service-form-container projectable-form-container\">\n        <div class=\"form-group-column three-fifths\" *ngIf=\"showForm\">\n            <div  id=\"InlineServiceArea\" class=\"anyadd\">\n                <div class=\"simple-service-inputs\">\n                    <lib-form-field-container [title]=\"'Service Details'\">\n                        <div class=\"form-field-input-group service-group\">\n                            <div class=\"form-field-sub-group\">\n                                <div class=\"config-title-row\">\n                                    <span class=\"form-field-title\">Service Name</span>\n                                </div>\n                                <input\n                                    class=\"form-field-input\"\n                                    placeholder=\"Name this service\"\n                                    autofocus\n                                    #nameFieldInput\n                                    [ngClass]=\"{error: errors.name}\"\n                                    [(ngModel)]=\"serviceApiData.name\"\n                                    (keyup)=\"serviceNameChanged($event)\"\n                                    (change)=\"validateServiceName()\"\n                                />\n                            </div>\n                            <div class=\"form-field-sub-group\">\n                                <div class=\"config-title-row\">\n                                    <span class=\"form-field-title\">SELECT OR CREATE SERVICE ATTRIBUTES</span>\n                                </div>\n                                <lib-tag-selector\n                                    [(selectedRoleAttributes)]=\"serviceApiData.roleAttributes\"\n                                    [availableRoleAttributes]=\"serviceRoleAttributes\"\n                                    [placeholder]=\"'Add attributes to group services'\"\n                                ></lib-tag-selector>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                </div>\n            </div>\n        </div>\n        <div class=\"simple-service-center-content\" *ngIf=\"showForm\">\n            <div class=\"form-group-row\">\n                <lib-form-field-container\n                        [title]=\"'ACCESSING CONFIGURATION'\"\n                        [contentStyle]=\"'z-index: 10001'\"\n                        [helpText]=\"'How will client applications use this service? Specify a hostname/IP and port, or use the &quot;SDK Only&quot; toggle for an application embedded configuration.'\"\n                >\n                    <div class=\"form-field-input-group accessing-group\">\n                        <div class=\"form-field-sub-group\">\n                            <div class=\"config-title-row\">\n                                <span class=\"form-field-title\">What identities can access this service?</span>\n                            </div>\n                            <lib-tag-selector\n                                    [(selectedNamedAttributes)]=\"dialPolicyNamedAttributes\"\n                                    [(selectedRoleAttributes)]=\"dialPolicyRoleAttributes\"\n                                    [availableNamedAttributes]=\"identityNamedAttributes\"\n                                    [availableRoleAttributes]=\"identityRoleAttributes\"\n                                    [placeholder]=\"'Select identity attributes to grant access'\"\n                                    [hasError]=\"errors.dialIdentities\"\n                                    (selectedNamedAttributesChange)=\"validateDialIdentities()\"\n                                    (selectedRoleAttributesChange)=\"validateDialIdentities()\"\n                                    (filterChange)=\"getIdentityNamedAttributes($event)\"\n                            ></lib-tag-selector>\n                        </div>\n                        <div class=\"form-field-sub-group\">\n                            <div class=\"config-title-row\">\n                                <span class=\"form-field-title\">How will the service be accessed?</span>\n                            </div>\n                            <div class=\"grid addressPort\">\n                                <div class=\"config-item-container\">\n                                    <span class=\"config-item-label\">SDK ONLY</span>\n                                    <div\n                                            class=\"sdk-toggle form-field-toggle\"\n                                    >\n                                        <div class=\"switchGrid\">\n                                            <div>\n                                                <div\n                                                        (click)=\"toggleSdkOnlyDial()\"\n                                                        [ngClass]=\"{ on: sdkOnlyDial }\"\n                                                        class=\"toggle\"\n                                                >\n                                                    <span [hidden]=\"!sdkOnlyDial\" class=\"on-label\">YES</span>\n                                                    <span [hidden]=\"sdkOnlyDial\" class=\"off-label\">NO</span>\n                                                    <div class=\"switch\"></div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n                                    <div class=\"config-hostname-label\">\n                                        <span class=\"config-item-label\">HOSTNAME / IP</span>\n                                        <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Accessing hostnames must include a '.'\"\n                                            matTooltipPosition=\"above\"\n                                        ></div>\n                                        <span *ngIf=\"errors.interceptAddressFormat\" class=\"error-label\">Accessing hostnames must include a '.'</span>\n                                    </div>\n                                    <input id=\"HowTo\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateInterceptAddress()\" [ngClass]=\"{error: errors.interceptAddress}\" [placeholder]=\"sdkOnlyDial ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0]\">\n                                </div>\n                                <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n                                    <span class=\"config-item-label\">PORT</span>\n                                    <input id=\"HowToPort\" type=\"number\" maxlength=\"10\" (change)=\"validateInterceptPort()\" [ngClass]=\"{error: errors.interceptPort}\" [placeholder]=\"sdkOnlyDial ? '' : 443\" (keyup)=\"interceptPortChanged($event)\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptPort\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'HOSTING CONFIGURATION'\"\n                        [contentStyle]=\"'z-index: 10000'\"\n                        [helpText]=\"'Where should traffic for this service be sent? Specify a protocol, hostname/IP, and port, or use the &quot;SDK Only&quot; toggle for an application embedded configuration.'\"\n\n                >\n                    <div class=\"form-field-input-group hosting-group\">\n                        <div class=\"form-field-sub-group\">\n                            <div class=\"config-title-row\">\n                                <span class=\"form-field-title\">What identities can host this service?</span>\n                            </div>\n                            <lib-tag-selector\n                                    [(selectedNamedAttributes)]=\"bindPolicyNamedAttributes\"\n                                    [(selectedRoleAttributes)]=\"bindPolicyRoleAttributes\"\n                                    [availableNamedAttributes]=\"identityNamedAttributes\"\n                                    [availableRoleAttributes]=\"identityRoleAttributes\"\n                                    [placeholder]=\"'Select identity attributes'\"\n                                    [hasError]=\"errors.bindIdentities\"\n                                    (selectedNamedAttributesChange)=\"validateBindIdentities()\"\n                                    (selectedRoleAttributesChange)=\"validateBindIdentities()\"\n                                    (filterChange)=\"getIdentityNamedAttributes($event)\"\n                            ></lib-tag-selector>\n                        </div>\n                        <div class=\"form-field-sub-group\">\n                            <div class=\"config-title-row\">\n                                <span class=\"form-field-title\">Where should traffic be sent?</span>\n                            </div>\n                            <div class=\"grid addressFull\">\n                                <div class=\"config-item-container\">\n                                    <span class=\"config-item-label\">SDK ONLY</span>\n                                    <div\n                                            class=\"sdk-toggle form-field-toggle\"\n                                    >\n                                        <div class=\"switchGrid\">\n                                            <div>\n                                                <div\n                                                        (click)=\"toggleSdkOnlyBind()\"\n                                                        [ngClass]=\"{ on: sdkOnlyBind }\"\n                                                        class=\"toggle\"\n                                                >\n                                                    <span [hidden]=\"!sdkOnlyBind\" class=\"on-label\">YES</span>\n                                                    <span [hidden]=\"sdkOnlyBind\" class=\"off-label\">NO</span>\n                                                    <div class=\"switch\"></div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n                                    <span class=\"config-item-label\">PROTOCOL</span>\n                                    <select id=\"HostedProtocol\" (change)=\"hostProtocolsChanged($event)\" [(ngModel)]=\"sdkOnlyBind ? '' : hostProtocol\">\n                                        <option value=\"tcp\">TCP</option>\n                                        <option value=\"udp\" >UDP</option>\n                                        <option value=\"both\" >TCP/UDP</option>\n                                    </select>\n                                </div>\n                                <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n                                    <span class=\"config-item-label\">HOSTNAME / IP</span>\n                                    <input id=\"HostedHost\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateHostAddress()\" [ngClass]=\"{error: errors.hostAddress}\" [placeholder]=\"sdkOnlyBind ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.address\">\n                                </div>\n                                <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n                                    <span class=\"config-item-label\">PORT</span>\n                                    <input id=\"HostedPort\" type=\"number\" maxlength=\"10\" (change)=\"validateHostPort()\" [ngClass]=\"{error: errors.hostPort}\" [placeholder]=\"sdkOnlyBind ? '' : 443\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.port\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".ziti-entity-header-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.simple-service-wrapper .simple-service-form-container .form-group-column{height:-moz-fit-content;height:fit-content;max-width:40.625rem;width:100%;transition:var(--transition);flex-grow:0;padding-bottom:0}.simple-service-wrapper .simple-service-form-container .simple-service-center-content lib-form-field-container{min-width:23.4375rem}.simple-service-wrapper .simple-service-form-container .simple-service-center-content .form-field-input-group{display:flex;flex-direction:column;gap:.9375rem}.simple-service-wrapper .grid.addressFull{grid-template-columns:4.375rem 5.9375rem auto 4.0625rem}.simple-service-wrapper .grid.addressPort{grid-template-columns:4.375rem auto 4.0625rem}.simple-service-wrapper input:disabled{opacity:.5!important}.simple-service-wrapper .addressPort .config-item-container.disabled,.simple-service-wrapper .addressFull .config-item-container.disabled{opacity:.3;pointer-events:none}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle{color:var(--white);display:flex;justify-content:space-between;height:var(--defaultInputHeight);align-items:center;margin-bottom:0}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .label{display:flex;font-size:.875rem;font-weight:600;text-transform:uppercase}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle{margin:0;display:flex;align-items:center;width:3.75rem;height:1.75rem;font-size:.875rem;line-height:1.5625rem;font-weight:800;font-family:Open Sans,Arial,sans-serif;background-color:var(--icon);color:var(--white);text-align:center;cursor:pointer;position:relative;float:left;border-radius:.8125rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle.on{background-color:var(--green)}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch{width:1.25rem;height:1.25rem;border-radius:.625rem;background-color:var(--white);transition:var(--transition);position:absolute;top:.25rem;z-index:10}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch.on{left:2.1875rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .on-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .on-label{margin-left:.4375rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .off-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .off-label{margin-left:2rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label{display:flex;flex-direction:row;justify-content:flex-start;white-space:nowrap}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .form-field-info,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .form-field-info{margin-top:.0625rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .error-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .error-label{margin-left:.3125rem}.simple-service-wrapper .form-field-input-group.service-group{gap:.625rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group.accessing-group{gap:.9375rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group .form-field-sub-group{display:flex;flex-direction:column;gap:.3125rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .config-title-row{height:.875rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull,.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressPort{gap:.625rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull select{height:var(--defaultInputHeight)}.simple-service-wrapper .simple-service-center-content{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:wrap;gap:.9375rem;max-width:40.625rem;justify-content:center;padding:0}.config-item-label{color:#a9abaf;font-weight:600;margin-bottom:.3125rem;position:relative;display:flex}.simple-service-inputs{display:flex;flex-direction:column;gap:.9375rem}.form-field-input-group .form-field-title{color:var(--offWhite);margin-bottom:.625rem}.config-item .config-container.encryption-pod{background-color:#222f3e;background-image:linear-gradient(90deg,#232f3e,#f6f7fb);background-image:-ms-linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%);border-radius:var(--inputBorderRadius)}.config-item .config-container .config-container-label{color:#fff}::ng-deep .simple-service-wrapper input{max-height:var(--defaultInputHeight);min-height:0rem;height:var(--defaultInputHeight)}::ng-deep .simple-service-wrapper .select2-search__field{height:100%;min-height:2.5rem;max-height:2.5rem}::ng-deep .simple-service-wrapper .select2-selection__rendered{padding:0;max-height:7.1875rem!important;overflow:auto}::ng-deep .simple-service-wrapper .form-header-container{align-items:center}::ng-deep .simple-service-wrapper .form-header-container .form-header-group{width:40.625rem!important}::ng-deep .simple-service-wrapper .form-header-container .header-actions-container{min-width:0rem}::ng-deep .simple-service-wrapper .form-header-container .form-header-toggle-container{display:none}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i10.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i11.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i12.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SimpleServiceComponent, selector: "lib-simple-service", inputs: { serviceRoleAttributes: "serviceRoleAttributes", identityRoleAttributes: "identityRoleAttributes", identityNamedAttributes: "identityNamedAttributes" }, outputs: { close: "close", selected: "selected" }, usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper simple-service-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(true, false, 'cards', $event)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"showForm ? 'Create a Simple Service' : 'Service Creation Summary'\"\n            [actionButtonText]=\"'Save'\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"simple-service-form-container projectable-form-container\">\n        <div class=\"form-group-column three-fifths\" *ngIf=\"showForm\">\n            <div  id=\"InlineServiceArea\" class=\"anyadd\">\n                <div class=\"simple-service-inputs\">\n                    <lib-form-field-container [title]=\"'Service Details'\">\n                        <div class=\"form-field-input-group service-group\">\n                            <div class=\"form-field-sub-group\">\n                                <div class=\"config-title-row\">\n                                    <span class=\"form-field-title\">Service Name</span>\n                                </div>\n                                <input\n                                    class=\"form-field-input\"\n                                    placeholder=\"Name this service\"\n                                    autofocus\n                                    #nameFieldInput\n                                    [ngClass]=\"{error: errors.name}\"\n                                    [(ngModel)]=\"serviceApiData.name\"\n                                    (keyup)=\"serviceNameChanged($event)\"\n                                    (change)=\"validateServiceName()\"\n                                />\n                            </div>\n                            <div class=\"form-field-sub-group\">\n                                <div class=\"config-title-row\">\n                                    <span class=\"form-field-title\">SELECT OR CREATE SERVICE ATTRIBUTES</span>\n                                </div>\n                                <lib-tag-selector\n                                    [(selectedRoleAttributes)]=\"serviceApiData.roleAttributes\"\n                                    [availableRoleAttributes]=\"serviceRoleAttributes\"\n                                    [placeholder]=\"'Add attributes to group services'\"\n                                ></lib-tag-selector>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                </div>\n            </div>\n        </div>\n        <div class=\"simple-service-center-content\" *ngIf=\"showForm\">\n            <div class=\"form-group-row\">\n                <lib-form-field-container\n                        [title]=\"'ACCESSING CONFIGURATION'\"\n                        [contentStyle]=\"'z-index: 10001'\"\n                        [helpText]=\"'How will client applications use this service? Specify a hostname/IP and port, or use the &quot;SDK Only&quot; toggle for an application embedded configuration.'\"\n                >\n                    <div class=\"form-field-input-group accessing-group\">\n                        <div class=\"form-field-sub-group\">\n                            <div class=\"config-title-row\">\n                                <span class=\"form-field-title\">What identities can access this service?</span>\n                            </div>\n                            <lib-tag-selector\n                                    [(selectedNamedAttributes)]=\"dialPolicyNamedAttributes\"\n                                    [(selectedRoleAttributes)]=\"dialPolicyRoleAttributes\"\n                                    [availableNamedAttributes]=\"identityNamedAttributes\"\n                                    [availableRoleAttributes]=\"identityRoleAttributes\"\n                                    [placeholder]=\"'Select identity attributes to grant access'\"\n                                    [hasError]=\"errors.dialIdentities\"\n                                    (selectedNamedAttributesChange)=\"validateDialIdentities()\"\n                                    (selectedRoleAttributesChange)=\"validateDialIdentities()\"\n                                    (filterChange)=\"getIdentityNamedAttributes($event)\"\n                            ></lib-tag-selector>\n                        </div>\n                        <div class=\"form-field-sub-group\">\n                            <div class=\"config-title-row\">\n                                <span class=\"form-field-title\">How will the service be accessed?</span>\n                            </div>\n                            <div class=\"grid addressPort\">\n                                <div class=\"config-item-container\">\n                                    <span class=\"config-item-label\">SDK ONLY</span>\n                                    <div\n                                            class=\"sdk-toggle form-field-toggle\"\n                                    >\n                                        <div class=\"switchGrid\">\n                                            <div>\n                                                <div\n                                                        (click)=\"toggleSdkOnlyDial()\"\n                                                        [ngClass]=\"{ on: sdkOnlyDial }\"\n                                                        class=\"toggle\"\n                                                >\n                                                    <span [hidden]=\"!sdkOnlyDial\" class=\"on-label\">YES</span>\n                                                    <span [hidden]=\"sdkOnlyDial\" class=\"off-label\">NO</span>\n                                                    <div class=\"switch\"></div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n                                    <div class=\"config-hostname-label\">\n                                        <span class=\"config-item-label\">HOSTNAME / IP</span>\n                                        <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Accessing hostnames must include a '.'\"\n                                            matTooltipPosition=\"above\"\n                                        ></div>\n                                        <span *ngIf=\"errors.interceptAddressFormat\" class=\"error-label\">Accessing hostnames must include a '.'</span>\n                                    </div>\n                                    <input id=\"HowTo\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateInterceptAddress()\" [ngClass]=\"{error: errors.interceptAddress}\" [placeholder]=\"sdkOnlyDial ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0]\">\n                                </div>\n                                <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n                                    <span class=\"config-item-label\">PORT</span>\n                                    <input id=\"HowToPort\" type=\"number\" maxlength=\"10\" (change)=\"validateInterceptPort()\" [ngClass]=\"{error: errors.interceptPort}\" [placeholder]=\"sdkOnlyDial ? '' : 443\" (keyup)=\"interceptPortChanged($event)\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptPort\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'HOSTING CONFIGURATION'\"\n                        [contentStyle]=\"'z-index: 10000'\"\n                        [helpText]=\"'Where should traffic for this service be sent? Specify a protocol, hostname/IP, and port, or use the &quot;SDK Only&quot; toggle for an application embedded configuration.'\"\n\n                >\n                    <div class=\"form-field-input-group hosting-group\">\n                        <div class=\"form-field-sub-group\">\n                            <div class=\"config-title-row\">\n                                <span class=\"form-field-title\">What identities can host this service?</span>\n                            </div>\n                            <lib-tag-selector\n                                    [(selectedNamedAttributes)]=\"bindPolicyNamedAttributes\"\n                                    [(selectedRoleAttributes)]=\"bindPolicyRoleAttributes\"\n                                    [availableNamedAttributes]=\"identityNamedAttributes\"\n                                    [availableRoleAttributes]=\"identityRoleAttributes\"\n                                    [placeholder]=\"'Select identity attributes'\"\n                                    [hasError]=\"errors.bindIdentities\"\n                                    (selectedNamedAttributesChange)=\"validateBindIdentities()\"\n                                    (selectedRoleAttributesChange)=\"validateBindIdentities()\"\n                                    (filterChange)=\"getIdentityNamedAttributes($event)\"\n                            ></lib-tag-selector>\n                        </div>\n                        <div class=\"form-field-sub-group\">\n                            <div class=\"config-title-row\">\n                                <span class=\"form-field-title\">Where should traffic be sent?</span>\n                            </div>\n                            <div class=\"grid addressFull\">\n                                <div class=\"config-item-container\">\n                                    <span class=\"config-item-label\">SDK ONLY</span>\n                                    <div\n                                            class=\"sdk-toggle form-field-toggle\"\n                                    >\n                                        <div class=\"switchGrid\">\n                                            <div>\n                                                <div\n                                                        (click)=\"toggleSdkOnlyBind()\"\n                                                        [ngClass]=\"{ on: sdkOnlyBind }\"\n                                                        class=\"toggle\"\n                                                >\n                                                    <span [hidden]=\"!sdkOnlyBind\" class=\"on-label\">YES</span>\n                                                    <span [hidden]=\"sdkOnlyBind\" class=\"off-label\">NO</span>\n                                                    <div class=\"switch\"></div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n                                    <span class=\"config-item-label\">PROTOCOL</span>\n                                    <select id=\"HostedProtocol\" (change)=\"hostProtocolsChanged($event)\" [(ngModel)]=\"sdkOnlyBind ? '' : hostProtocol\">\n                                        <option value=\"tcp\">TCP</option>\n                                        <option value=\"udp\" >UDP</option>\n                                        <option value=\"both\" >TCP/UDP</option>\n                                    </select>\n                                </div>\n                                <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n                                    <span class=\"config-item-label\">HOSTNAME / IP</span>\n                                    <input id=\"HostedHost\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateHostAddress()\" [ngClass]=\"{error: errors.hostAddress}\" [placeholder]=\"sdkOnlyBind ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.address\">\n                                </div>\n                                <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n                                    <span class=\"config-item-label\">PORT</span>\n                                    <input id=\"HostedPort\" type=\"number\" maxlength=\"10\" (change)=\"validateHostPort()\" [ngClass]=\"{error: errors.hostPort}\" [placeholder]=\"sdkOnlyBind ? '' : 443\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.port\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".ziti-entity-header-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.simple-service-wrapper .simple-service-form-container .form-group-column{height:-moz-fit-content;height:fit-content;max-width:40.625rem;width:100%;transition:var(--transition);flex-grow:0;padding-bottom:0}.simple-service-wrapper .simple-service-form-container .simple-service-center-content lib-form-field-container{min-width:23.4375rem}.simple-service-wrapper .simple-service-form-container .simple-service-center-content .form-field-input-group{display:flex;flex-direction:column;gap:.9375rem}.simple-service-wrapper .grid.addressFull{grid-template-columns:4.375rem 5.9375rem auto 4.0625rem}.simple-service-wrapper .grid.addressPort{grid-template-columns:4.375rem auto 4.0625rem}.simple-service-wrapper input:disabled{opacity:.5!important}.simple-service-wrapper .addressPort .config-item-container.disabled,.simple-service-wrapper .addressFull .config-item-container.disabled{opacity:.3;pointer-events:none}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle{color:var(--white);display:flex;justify-content:space-between;height:var(--defaultInputHeight);align-items:center;margin-bottom:0}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .label{display:flex;font-size:.875rem;font-weight:600;text-transform:uppercase}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle{margin:0;display:flex;align-items:center;width:3.75rem;height:1.75rem;font-size:.875rem;line-height:1.5625rem;font-weight:800;font-family:Open Sans,Arial,sans-serif;background-color:var(--icon);color:var(--white);text-align:center;cursor:pointer;position:relative;float:left;border-radius:.8125rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle.on{background-color:var(--green)}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch{width:1.25rem;height:1.25rem;border-radius:.625rem;background-color:var(--white);transition:var(--transition);position:absolute;top:.25rem;z-index:10}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch.on{left:2.1875rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .on-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .on-label{margin-left:.4375rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .off-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .off-label{margin-left:2rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label{display:flex;flex-direction:row;justify-content:flex-start;white-space:nowrap}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .form-field-info,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .form-field-info{margin-top:.0625rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .error-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .error-label{margin-left:.3125rem}.simple-service-wrapper .form-field-input-group.service-group{gap:.625rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group.accessing-group{gap:.9375rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group .form-field-sub-group{display:flex;flex-direction:column;gap:.3125rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .config-title-row{height:.875rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull,.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressPort{gap:.625rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull select{height:var(--defaultInputHeight)}.simple-service-wrapper .simple-service-center-content{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:wrap;gap:.9375rem;max-width:40.625rem;justify-content:center;padding:0}.config-item-label{color:#a9abaf;font-weight:600;margin-bottom:.3125rem;position:relative;display:flex}.simple-service-inputs{display:flex;flex-direction:column;gap:.9375rem}.form-field-input-group .form-field-title{color:var(--offWhite);margin-bottom:.625rem}.config-item .config-container.encryption-pod{background-color:#222f3e;background-image:linear-gradient(90deg,#232f3e,#f6f7fb);background-image:-ms-linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%);border-radius:var(--inputBorderRadius)}.config-item .config-container .config-container-label{color:#fff}::ng-deep .simple-service-wrapper input{max-height:var(--defaultInputHeight);min-height:0rem;height:var(--defaultInputHeight)}::ng-deep .simple-service-wrapper .select2-search__field{height:100%;min-height:2.5rem;max-height:2.5rem}::ng-deep .simple-service-wrapper .select2-selection__rendered{padding:0;max-height:7.1875rem!important;overflow:auto}::ng-deep .simple-service-wrapper .form-header-container{align-items:center}::ng-deep .simple-service-wrapper .form-header-container .form-header-group{width:40.625rem!important}::ng-deep .simple-service-wrapper .form-header-container .header-actions-container{min-width:0rem}::ng-deep .simple-service-wrapper .form-header-container .form-header-toggle-container{display:none}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i10.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i11.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: i12.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"] }] }); }
 }
 export { SimpleServiceComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SimpleServiceComponent, decorators: [{