npm - @openziti/ziti-console-lib - Versions diffs - 0.5.1 → 0.6.1 - Mend

@openziti/ziti-console-lib 0.5.1 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/esm2022/lib/features/projectable-forms/identity/identity-form.component.mjs CHANGED Viewed

@@ -324,7 +324,7 @@ class IdentityFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"identity-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this identity\"\n                        [ngClass]=\"{error: 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 Identity attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"identityRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Identities'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Auth Policy'\"\n                        [label]=\"'OPTIONAL'\"\n                        [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.authPolicyId\"\n                            id=\"authPolicyId\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"\">Select an Authentication Policy</option>\n                        <option\n                            *ngFor=\"let policy of authPolicies\"\n                            [value]=\"policy.id\"\n                        >\n                            {{ policy.name }}\n                        </option>\n                    </select>\n                    <input class=\"form-field-input\" placeholder=\"Optional External ID\" [(ngModel)]=\"formData.externalId\"/>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Enrollment Type'\"\n                        [title2]=\"enrollmentTypeTitle\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                            id=\"EnrollmentType\"\n                            class=\"form-field-dropdown\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentType\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option value=\"ott\">One Time Token</option>\n                            <option value=\"CA\">Certificate Authority</option>\n                            <option value=\"updb\">UPDB</option>\n                        </select>\n                        <select\n                            id=\"CertAuthorities\"\n                            class=\"form-field-dropdown\"\n                            *ngIf=\"enrollmentType === 'CA'\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentCA\"\n                            [ngClass]=\"{error: errors.enrollmentCA}\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option *ngFor=\"let ca of cas\" [value]=\"ca.id\">{{ca.name}}</option>\n                        </select>\n                        <input\n                            *ngIf=\"enrollmentType === 'updb' && !isEditing\"\n                            [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                            [(ngModel)]=\"enrollmentUPDB\"\n                            (keyup)=\"updateEnrollment()\"\n                            class=\"form-field-input\"\n                            id=\"UPDBName\"\n                            type=\"text\"\n                            maxlength=\"500\"\n                            placeholder=\"Enter a name\"\n                        >\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Admin'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced is-admin-container\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">IS ADMIN</div>\n                                <div\n                                        (click)=\"toggleIsAdmin()\"\n                                        [ngClass]=\"{ on: formData.isAdmin }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isAdmin\" 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]=\"'Hosting Cost'\"\n                            [title2]=\"'Precedence'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <input class=\"form-field-input\" [(ngModel)]=\"formData.defaultHostingCost\" type=\"number\"/>\n                        <select\n                            [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                            id=\"hostingPrecedence\"\n                            class=\"form-field-dropdown\"\n                        >\n                            <option value=\"default\">Default</option>\n                            <option value=\"required\">Required</option>\n                            <option value=\"failed\">Failed</option>\n                        </select>\n                    </lib-form-field-container>\n                    <lib-form-field-container *ngFor=\"let tagElement of tagElements\"\n                            [title]=\"tagElement.label\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <div [innerHTML]=\"tagElement.content | safe\"></div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken || hasAuthenticator\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                        [identity]=\"formData\"\n                        [jwt]=\"jwt\"\n                        [expiration]=\"enrollmentExpiration\"\n                        [authenticators]=\"formData.authenticators\"\n                        [type]=\"'identity'\"\n                        [canExpand]=\"true\"\n                        (doRefresh)=\"refreshIdentity()\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"true\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"associatedServiceNames\"\n                    ></lib-preview-list>\n                    <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                        <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                        <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicePoliciesLoading\"\n                        [allNames]=\"associatedServicePolicyNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\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)]=\"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\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.disabled{opacity:.5;pointer-events:none}::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:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}::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:2px}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}::ng-deep .copy.icon-copy.url-copy{background-color:var(--navigation)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i8.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: i9.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i10.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i11.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i12.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i13.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: i14.QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: i15.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "pipe", type: i16.SafePipe, name: "safe" }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"identity-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this identity\"\n                        [ngClass]=\"{error: 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 Identity attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"identityRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Identities'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Auth Policy'\"\n                        [label]=\"'OPTIONAL'\"\n                        [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.authPolicyId\"\n                            id=\"authPolicyId\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"\">Select an Authentication Policy</option>\n                        <option\n                            *ngFor=\"let policy of authPolicies\"\n                            [value]=\"policy.id\"\n                        >\n                            {{ policy.name }}\n                        </option>\n                    </select>\n                    <input class=\"form-field-input\" placeholder=\"Optional External ID\" [(ngModel)]=\"formData.externalId\"/>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Enrollment Type'\"\n                        [title2]=\"enrollmentTypeTitle\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                            id=\"EnrollmentType\"\n                            class=\"form-field-dropdown\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentType\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option value=\"ott\">One Time Token</option>\n                            <option value=\"CA\">Certificate Authority</option>\n                            <option value=\"updb\">UPDB</option>\n                        </select>\n                        <select\n                            id=\"CertAuthorities\"\n                            class=\"form-field-dropdown\"\n                            *ngIf=\"enrollmentType === 'CA'\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentCA\"\n                            [ngClass]=\"{error: errors.enrollmentCA}\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option *ngFor=\"let ca of cas\" [value]=\"ca.id\">{{ca.name}}</option>\n                        </select>\n                        <input\n                            *ngIf=\"enrollmentType === 'updb' && !isEditing\"\n                            [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                            [(ngModel)]=\"enrollmentUPDB\"\n                            (keyup)=\"updateEnrollment()\"\n                            class=\"form-field-input\"\n                            id=\"UPDBName\"\n                            type=\"text\"\n                            maxlength=\"500\"\n                            placeholder=\"Enter a name\"\n                        >\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Admin'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced is-admin-container\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">IS ADMIN</div>\n                                <div\n                                        (click)=\"toggleIsAdmin()\"\n                                        [ngClass]=\"{ on: formData.isAdmin }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isAdmin\" 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]=\"'Hosting Cost'\"\n                            [title2]=\"'Precedence'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <input class=\"form-field-input\" [(ngModel)]=\"formData.defaultHostingCost\" type=\"number\"/>\n                        <select\n                            [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                            id=\"hostingPrecedence\"\n                            class=\"form-field-dropdown\"\n                        >\n                            <option value=\"default\">Default</option>\n                            <option value=\"required\">Required</option>\n                            <option value=\"failed\">Failed</option>\n                        </select>\n                    </lib-form-field-container>\n                    <lib-form-field-container *ngFor=\"let tagElement of tagElements\"\n                            [title]=\"tagElement.label\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <div [innerHTML]=\"tagElement.content | safe\"></div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken || hasAuthenticator\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                        [identity]=\"formData\"\n                        [jwt]=\"jwt\"\n                        [expiration]=\"enrollmentExpiration\"\n                        [authenticators]=\"formData.authenticators\"\n                        [type]=\"'identity'\"\n                        [canExpand]=\"true\"\n                        (doRefresh)=\"refreshIdentity()\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"true\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"associatedServiceNames\"\n                    ></lib-preview-list>\n                    <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                        <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                        <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicePoliciesLoading\"\n                        [allNames]=\"associatedServicePolicyNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\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)]=\"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\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.disabled{opacity:.5;pointer-events:none}::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:10px;padding-right:10px;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 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}::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:1px}::ng-deep .copy.icon-copy.url-copy{background-color:var(--navigation)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i8.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: i9.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i10.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i11.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i12.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i13.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: i14.QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: i15.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "pipe", type: i16.SafePipe, name: "safe" }] }); }
 }
 export { IdentityFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentityFormComponent, decorators: [{
@@ -334,7 +334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"identity-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this identity\"\n                        [ngClass]=\"{error: 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 Identity attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"identityRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Identities'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Auth Policy'\"\n                        [label]=\"'OPTIONAL'\"\n                        [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.authPolicyId\"\n                            id=\"authPolicyId\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"\">Select an Authentication Policy</option>\n                        <option\n                            *ngFor=\"let policy of authPolicies\"\n                            [value]=\"policy.id\"\n                        >\n                            {{ policy.name }}\n                        </option>\n                    </select>\n                    <input class=\"form-field-input\" placeholder=\"Optional External ID\" [(ngModel)]=\"formData.externalId\"/>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Enrollment Type'\"\n                        [title2]=\"enrollmentTypeTitle\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                            id=\"EnrollmentType\"\n                            class=\"form-field-dropdown\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentType\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option value=\"ott\">One Time Token</option>\n                            <option value=\"CA\">Certificate Authority</option>\n                            <option value=\"updb\">UPDB</option>\n                        </select>\n                        <select\n                            id=\"CertAuthorities\"\n                            class=\"form-field-dropdown\"\n                            *ngIf=\"enrollmentType === 'CA'\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentCA\"\n                            [ngClass]=\"{error: errors.enrollmentCA}\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option *ngFor=\"let ca of cas\" [value]=\"ca.id\">{{ca.name}}</option>\n                        </select>\n                        <input\n                            *ngIf=\"enrollmentType === 'updb' && !isEditing\"\n                            [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                            [(ngModel)]=\"enrollmentUPDB\"\n                            (keyup)=\"updateEnrollment()\"\n                            class=\"form-field-input\"\n                            id=\"UPDBName\"\n                            type=\"text\"\n                            maxlength=\"500\"\n                            placeholder=\"Enter a name\"\n                        >\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Admin'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced is-admin-container\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">IS ADMIN</div>\n                                <div\n                                        (click)=\"toggleIsAdmin()\"\n                                        [ngClass]=\"{ on: formData.isAdmin }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isAdmin\" 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]=\"'Hosting Cost'\"\n                            [title2]=\"'Precedence'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <input class=\"form-field-input\" [(ngModel)]=\"formData.defaultHostingCost\" type=\"number\"/>\n                        <select\n                            [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                            id=\"hostingPrecedence\"\n                            class=\"form-field-dropdown\"\n                        >\n                            <option value=\"default\">Default</option>\n                            <option value=\"required\">Required</option>\n                            <option value=\"failed\">Failed</option>\n                        </select>\n                    </lib-form-field-container>\n                    <lib-form-field-container *ngFor=\"let tagElement of tagElements\"\n                            [title]=\"tagElement.label\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <div [innerHTML]=\"tagElement.content | safe\"></div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken || hasAuthenticator\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                        [identity]=\"formData\"\n                        [jwt]=\"jwt\"\n                        [expiration]=\"enrollmentExpiration\"\n                        [authenticators]=\"formData.authenticators\"\n                        [type]=\"'identity'\"\n                        [canExpand]=\"true\"\n                        (doRefresh)=\"refreshIdentity()\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"true\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"associatedServiceNames\"\n                    ></lib-preview-list>\n                    <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                        <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                        <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicePoliciesLoading\"\n                        [allNames]=\"associatedServicePolicyNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\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)]=\"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\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.disabled{opacity:.5;pointer-events:none}::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:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}::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:2px}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}::ng-deep .copy.icon-copy.url-copy{background-color:var(--navigation)}\n"] }]
+                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"identity-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this identity\"\n                        [ngClass]=\"{error: 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 Identity attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"identityRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Identities'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Auth Policy'\"\n                        [label]=\"'OPTIONAL'\"\n                        [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.authPolicyId\"\n                            id=\"authPolicyId\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"\">Select an Authentication Policy</option>\n                        <option\n                            *ngFor=\"let policy of authPolicies\"\n                            [value]=\"policy.id\"\n                        >\n                            {{ policy.name }}\n                        </option>\n                    </select>\n                    <input class=\"form-field-input\" placeholder=\"Optional External ID\" [(ngModel)]=\"formData.externalId\"/>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Enrollment Type'\"\n                        [title2]=\"enrollmentTypeTitle\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                            id=\"EnrollmentType\"\n                            class=\"form-field-dropdown\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentType\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option value=\"ott\">One Time Token</option>\n                            <option value=\"CA\">Certificate Authority</option>\n                            <option value=\"updb\">UPDB</option>\n                        </select>\n                        <select\n                            id=\"CertAuthorities\"\n                            class=\"form-field-dropdown\"\n                            *ngIf=\"enrollmentType === 'CA'\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentCA\"\n                            [ngClass]=\"{error: errors.enrollmentCA}\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option *ngFor=\"let ca of cas\" [value]=\"ca.id\">{{ca.name}}</option>\n                        </select>\n                        <input\n                            *ngIf=\"enrollmentType === 'updb' && !isEditing\"\n                            [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                            [(ngModel)]=\"enrollmentUPDB\"\n                            (keyup)=\"updateEnrollment()\"\n                            class=\"form-field-input\"\n                            id=\"UPDBName\"\n                            type=\"text\"\n                            maxlength=\"500\"\n                            placeholder=\"Enter a name\"\n                        >\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Admin'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced is-admin-container\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">IS ADMIN</div>\n                                <div\n                                        (click)=\"toggleIsAdmin()\"\n                                        [ngClass]=\"{ on: formData.isAdmin }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isAdmin\" 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]=\"'Hosting Cost'\"\n                            [title2]=\"'Precedence'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <input class=\"form-field-input\" [(ngModel)]=\"formData.defaultHostingCost\" type=\"number\"/>\n                        <select\n                            [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                            id=\"hostingPrecedence\"\n                            class=\"form-field-dropdown\"\n                        >\n                            <option value=\"default\">Default</option>\n                            <option value=\"required\">Required</option>\n                            <option value=\"failed\">Failed</option>\n                        </select>\n                    </lib-form-field-container>\n                    <lib-form-field-container *ngFor=\"let tagElement of tagElements\"\n                            [title]=\"tagElement.label\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <div [innerHTML]=\"tagElement.content | safe\"></div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken || hasAuthenticator\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                        [identity]=\"formData\"\n                        [jwt]=\"jwt\"\n                        [expiration]=\"enrollmentExpiration\"\n                        [authenticators]=\"formData.authenticators\"\n                        [type]=\"'identity'\"\n                        [canExpand]=\"true\"\n                        (doRefresh)=\"refreshIdentity()\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"true\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"associatedServiceNames\"\n                    ></lib-preview-list>\n                    <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                        <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                        <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicePoliciesLoading\"\n                        [allNames]=\"associatedServicePolicyNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\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)]=\"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\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.disabled{opacity:.5;pointer-events:none}::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:10px;padding-right:10px;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 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}::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:1px}::ng-deep .copy.icon-copy.url-copy{background-color:var(--navigation)}\n"] }]
         }], ctorParameters: function () { return [{ type: i17.SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]