@openziti/ziti-console-lib 0.12.8 → 0.12.9

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

@@ -375,7 +375,7 @@ class CertificateAuthorityFormComponent extends ProjectableForm {
         this.formData.externalIdClaim.parserCriteria = parserCriteria;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CertificateAuthorityFormComponent, deps: [{ token: i1.CertificateAuthorityFormService }, { token: i2.SchemaService }, { token: i3.GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i5.Location }, { token: i6.ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CertificateAuthorityFormComponent, selector: "lib-certificate-authority", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Certificate Authority Details' : 'Create Certificate Authority')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n            [badges]=\"badges\"\n    ></lib-form-header>\n    <div class=\"jwt-signer-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\n                        [title]=\"'Name'\"\n                        [label]=\"'Required'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Identity Name Format'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [label]=\"'OPTIONAL'\"\n                        [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Identity Roles'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [label]=\"'OPTIONAL'\"\n                        [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.identityRoles\"\n                            [availableRoleAttributes]=\"identityRoleAttributes\"\n                            [placeholder]=\"'Type to filter and enter to assign'\"\n                            [hasError]=\"errors.dialIdentities\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Enrollment Options'\"\n                        [layout]=\"'row'\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Auto Enroll</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allows client certificates of the CA to automatically enroll when encountered\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleSwitch('isAutoCaEnrollmentEnabled')\"\n                                    [ngClass]=\"{ on: formData.isAutoCaEnrollmentEnabled }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.isAutoCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.isAutoCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">OTT Enroll</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allows client certificates of the CA to enroll if an identity with an ottca enrollment was created\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleSwitch('isOttCaEnrollmentEnabled')\"\n                                    [ngClass]=\"{ on: formData.isOttCaEnrollmentEnabled }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.isOttCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.isOttCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Auth Enabled</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allows client certificates of the CA to attempt to enroll\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleSwitch('isAuthEnabled')\"\n                                    [ngClass]=\"{ on: formData.isAuthEnabled }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.isAuthEnabled\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.isAuthEnabled\" 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]=\"'External ID Claim'\"\n                        [layout]=\"'column'\"\n                        [helpText]=\"'Configuration used to pull values out of the x509 client certificate used to match identity externalId'\"\n                        [showToggle]=\"true\"\n                        [(headerToggle)]=\"externalIdClaim\"\n                        (headerToggleChange)=\"externalIdClaimChanged()\"\n                >\n                    <div class=\"form-field-input-group\" [ngClass]=\"{disabled: !externalIdClaim}\">\n                        <div class=\"form-field-row\">\n                            <div class=\"form-field-label-container\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Location</span>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Defines which value(s) in an x509 certificate will be processed\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <select [(ngModel)]=\"claimLocation\" id=\"ClaimLocation\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['claimLocation']}\">\n                                    <option value=\"\">Select an option</option>\n                                    <option *ngFor=\"let loc of locations\" [value]=\"loc\">\n                                        {{ loc }}\n                                    </option>\n                                </select>\n                            </div>\n                            <div class=\"form-field-label-container\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Matcher</span>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Defines how values from location will be filtered\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <select [(ngModel)]=\"matcher\" id=\"ClaimMatcher\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['matcher']}\">\n                                    <option value=\"\">Select an option</option>\n                                    <option *ngFor=\"let matcher of matchers\" [value]=\"matcher\">\n                                        {{ matcher }}\n                                    </option>\n                                </select>\n                            </div>\n                            <div class=\"form-field-label-container\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Parser</span>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Defines how values from location filtered by matcher will be parsed\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <select [(ngModel)]=\"parser\" id=\"ClaimParser\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['parser']}\">\n                                    <option value=\"\">Select an option</option>\n                                    <option *ngFor=\"let parser of parsers\" [value]=\"parser\">\n                                        {{ parser }}\n                                    </option>\n                                </select>\n                            </div>\n                        </div>\n                        <div class=\"form-field-row\">\n                            <div class=\"form-field-label-container\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Index</span>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Should multiple values still be available after location, matcher, and parser processing the integer value here will be used from the set\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <input class=\"form-field-input\" type=\"number\" placeholder=\"Enter a number\" [(ngModel)]=\"index\" [ngClass]=\"{error: errors['index']}\" [disabled]=\"!externalIdClaim\"/>\n                            </div>\n                            <div class=\"form-field-label-container\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Match Criteria</span>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Defines the PREFIX, SUFFIX, or SCHEME to look for based on matcher\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <input class=\"form-field-input\" placeholder=\"Enter matcher criteria\" [(ngModel)]=\"matcherCriteria\" [ngClass]=\"{error: errors['matcherCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n                            </div>\n                            <div class=\"form-field-label-container\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Parser Criteria</span>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Defines the criteria to provide to parser\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <input class=\"form-field-input\" placeholder=\"Enter parser criteria\" [(ngModel)]=\"parserCriteria\" [ngClass]=\"{error: errors['parserCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n                            </div>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'PEM'\"\n                        [label]=\"'REQUIRED'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"form-field-label-container select-file-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Enter PEM</span>\n                                </div>\n                                <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n                                        Select File\n                                        <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\n                                    </span>\n                                <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n                            </div>\n                            <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"formData.certPem\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n                        </div>\n                    </div>\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]=\"'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                    *ngIf=\"formData.id && !this.formData.isVerified\"\n                    [showHeader]=\"false\"\n                >\n                    <a class=\"download-button\" href=\"./{{this.basePath}}/{{this.formData.id}}/verify\" (click)=\"verifyCertificate($event)\">\n                        <div class=\"verify-certificate\"></div>\n                        <span>Verify Certificate</span>\n                        <div class=\"tap-to-download\"></div>\n                    </a>\n                </lib-form-field-container>\n                <lib-form-field-container\n                    [title]=\"'API Calls'\"\n                    [headerActions]=\"apiOptions\"\n                    (actionRequested)=\"apiActionRequested($event)\"\n                    [class]=\"'api-data-no-wrap'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"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>\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:-moz-fit-content;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.toggle-container .config-container-label{font-size:.8rem}\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: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i10.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: i11.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i12.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i13.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i14.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: i15.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CertificateAuthorityFormComponent, selector: "lib-certificate-authority", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Certificate Authority Details' : 'Create Certificate Authority')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n            [badges]=\"badges\"\n    ></lib-form-header>\n    <div class=\"jwt-signer-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\n                        [title]=\"'Name'\"\n                        [label]=\"'Required'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Identity Name Format'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [label]=\"'OPTIONAL'\"\n                        [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Identity Roles'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [label]=\"'OPTIONAL'\"\n                        [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.identityRoles\"\n                            [availableRoleAttributes]=\"identityRoleAttributes\"\n                            [placeholder]=\"'Type to filter and enter to assign'\"\n                            [hasError]=\"errors.dialIdentities\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Enrollment Options'\"\n                        [layout]=\"'row'\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Auto Enroll</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allows client certificates of the CA to automatically enroll when encountered\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleSwitch('isAutoCaEnrollmentEnabled')\"\n                                    [ngClass]=\"{ on: formData.isAutoCaEnrollmentEnabled }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.isAutoCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.isAutoCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">OTT Enroll</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allows client certificates of the CA to enroll if an identity with an ottca enrollment was created\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleSwitch('isOttCaEnrollmentEnabled')\"\n                                    [ngClass]=\"{ on: formData.isOttCaEnrollmentEnabled }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.isOttCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.isOttCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Auth Enabled</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allows client certificates of the CA to attempt to enroll\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleSwitch('isAuthEnabled')\"\n                                    [ngClass]=\"{ on: formData.isAuthEnabled }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.isAuthEnabled\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.isAuthEnabled\" 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]=\"'External ID Claim'\"\n                        [layout]=\"'column'\"\n                        [helpText]=\"'Configuration used to pull values out of the x509 client certificate used to match identity externalId'\"\n                        [showToggle]=\"true\"\n                        [(headerToggle)]=\"externalIdClaim\"\n                        (headerToggleChange)=\"externalIdClaimChanged()\"\n                >\n                    <div class=\"form-field-input-group\" [ngClass]=\"{disabled: !externalIdClaim}\">\n                        <div class=\"form-field-row\">\n                            <div class=\"form-field-label-container\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Location</span>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Defines which value(s) in an x509 certificate will be processed\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <select [(ngModel)]=\"claimLocation\" id=\"ClaimLocation\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['claimLocation']}\">\n                                    <option value=\"\">Select an option</option>\n                                    <option *ngFor=\"let loc of locations\" [value]=\"loc\">\n                                        {{ loc }}\n                                    </option>\n                                </select>\n                            </div>\n                            <div class=\"form-field-label-container\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Matcher</span>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Defines how values from location will be filtered\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <select [(ngModel)]=\"matcher\" id=\"ClaimMatcher\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['matcher']}\">\n                                    <option value=\"\">Select an option</option>\n                                    <option *ngFor=\"let matcher of matchers\" [value]=\"matcher\">\n                                        {{ matcher }}\n                                    </option>\n                                </select>\n                            </div>\n                            <div class=\"form-field-label-container\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Parser</span>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Defines how values from location filtered by matcher will be parsed\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <select [(ngModel)]=\"parser\" id=\"ClaimParser\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['parser']}\">\n                                    <option value=\"\">Select an option</option>\n                                    <option *ngFor=\"let parser of parsers\" [value]=\"parser\">\n                                        {{ parser }}\n                                    </option>\n                                </select>\n                            </div>\n                        </div>\n                        <div class=\"form-field-row\">\n                            <div class=\"form-field-label-container\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Index</span>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Should multiple values still be available after location, matcher, and parser processing the integer value here will be used from the set\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <input class=\"form-field-input\" type=\"number\" placeholder=\"Enter a number\" [(ngModel)]=\"index\" [ngClass]=\"{error: errors['index']}\" [disabled]=\"!externalIdClaim\"/>\n                            </div>\n                            <div class=\"form-field-label-container\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Match Criteria</span>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Defines the PREFIX, SUFFIX, or SCHEME to look for based on matcher\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <input class=\"form-field-input\" placeholder=\"Enter matcher criteria\" [(ngModel)]=\"matcherCriteria\" [ngClass]=\"{error: errors['matcherCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n                            </div>\n                            <div class=\"form-field-label-container\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Parser Criteria</span>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Defines the criteria to provide to parser\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <input class=\"form-field-input\" placeholder=\"Enter parser criteria\" [(ngModel)]=\"parserCriteria\" [ngClass]=\"{error: errors['parserCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n                            </div>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'PEM'\"\n                        [label]=\"'REQUIRED'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"form-field-label-container select-file-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Enter PEM</span>\n                                </div>\n                                <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n                                        Select File\n                                        <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\n                                    </span>\n                                <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n                            </div>\n                            <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"formData.certPem\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n                        </div>\n                    </div>\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]=\"'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                    *ngIf=\"formData.id && !this.formData.isVerified\"\n                    [showHeader]=\"false\"\n                >\n                    <a class=\"download-button\" href=\"./{{this.basePath}}/{{this.formData.id}}/verify\" (click)=\"verifyCertificate($event)\">\n                        <div class=\"verify-certificate\"></div>\n                        <span>Verify Certificate</span>\n                        <div class=\"tap-to-download\"></div>\n                    </a>\n                </lib-form-field-container>\n                <lib-form-field-container\n                    [title]=\"'API Calls'\"\n                    [headerActions]=\"apiOptions\"\n                    (actionRequested)=\"apiActionRequested($event)\"\n                    [class]=\"'api-data-no-wrap'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"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>\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:-moz-fit-content;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.toggle-container .config-container-label{font-size:.8rem}\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: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: i10.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: i11.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i12.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i13.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i14.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: i15.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 export { CertificateAuthorityFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CertificateAuthorityFormComponent, decorators: [{

package/esm2022/lib/features/projectable-forms/certificate-authority/verify-certificate/verify-certificate.component.mjs

@@ -193,7 +193,7 @@ class VerifyCertificateComponent extends ProjectableForm {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VerifyCertificateComponent, deps: [{ token: i1.VerifyCertificateService }, { token: i2.SchemaService }, { token: i3.GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i5.Location }, { token: i6.ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: VerifyCertificateComponent, selector: "lib-certificate-authority", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper verify-certificate-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n        [title]=\"'Verify Certificate for CA:'\"\n        [data]=\"formData\"\n        [moreActions]=\"formData.moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n        [showHeaderToggle]=\"false\"\n        [actionButtonText]=\"'Verify'\"\n    ></lib-form-header>\n    <div class=\"verify-certificate-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column\">\n                <lib-form-field-container\n                    [title]=\"'Instructions'\"\n                >\n                    <ul class=\"instructions-list\">\n                        <li>Generate a certificate with the common name CN=<b>{{formData.verificationToken}}</b></li>\n                        <li>Upload the generated cert, or copy & paste it using the text field below</li>\n                        <li>Click the \"Verify\" button to submit certificate for verification</li>\n                    </ul>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Token'\"\n                >\n                    <div class=\"copy-token-container\" (click)=\"copyToClipboard(formData.verificationToken)\">\n                        <span class=\"form-field-input copy-token-button\" matTooltip=\"Copy verifcation token\" matTooltipPosition=\"below\" matTooltipShowDelay=\"300\">{{formData.verificationToken}}</span>\n                        <div class=\"copy-icon\"></div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Certificate'\"\n                        [label]=\"'REQUIRED'\"\n                >\n                    <span *ngIf=\"errors['certPem']\" class=\"cert-error-text error-text\">{{certErrorMessage}}</span>\n                    <div class=\"form-field-input-group\">\n                        <div class=\"form-field-label-container select-file-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Enter PEM</span>\n                                </div>\n                                <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n                                        Select File\n                                        <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\n                                    </span>\n                                <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n                            </div>\n                            <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"certificate\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <div class=\"buttons-container buttons\">\n                    <div class=\"linkButton cancel\" (click)=\"returnToListPage()\">Oops, no get me out of here</div>\n                    <div class=\" save-button button save confirm\" (click)=\"save($event)\">Verify</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["::ng-deep .verify-certificate-container lib-form-header .form-header-container{max-width:50rem}.verify-certificate-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.verify-certificate-container .projectable-form-main-column{max-width:50rem}.verify-certificate-container .copy-token-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;cursor:pointer;background-color:var(--stroke);border-radius:var(--inputBorderRadius);transition:all .2s}.verify-certificate-container .copy-token-container .copy-icon{filter:grayscale(1)}.verify-certificate-container .copy-token-container:hover .copy-token-button{transform:scale(1.02)}.verify-certificate-container .copy-token-container:hover .copy-icon{transform:scale(1.02);filter:none}.verify-certificate-container .copy-token-container .copy-token-button{cursor:pointer;align-items:center;margin-left:var(--marginMedium);display:flex}.verify-certificate-container .instructions-list{margin:0;padding-left:1rem;display:flex;flex-direction:column;gap:.4rem;font-size:.9rem}.verify-certificate-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:-moz-fit-content;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.verify-certificate-container .select-file-button:hover{filter:brightness(.8)}.verify-certificate-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.verify-certificate-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear}.verify-certificate-container .select-file-label-container{gap:var(--marginMedium)}.verify-certificate-container .cert-error-text{height:.7rem}.verify-certificate-container .save-button{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)}::ng-deep .verify-certificate-container select:disabled,::ng-deep .verify-certificate-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .verify-certificate-wrapper lib-form-header .form-header-container{max-width:50rem}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i10.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: i11.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: VerifyCertificateComponent, selector: "lib-certificate-authority", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper verify-certificate-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n        [title]=\"'Verify Certificate for CA:'\"\n        [data]=\"formData\"\n        [moreActions]=\"formData.moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n        [showHeaderToggle]=\"false\"\n        [actionButtonText]=\"'Verify'\"\n    ></lib-form-header>\n    <div class=\"verify-certificate-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column\">\n                <lib-form-field-container\n                    [title]=\"'Instructions'\"\n                >\n                    <ul class=\"instructions-list\">\n                        <li>Generate a certificate with the common name CN=<b>{{formData.verificationToken}}</b></li>\n                        <li>Upload the generated cert, or copy & paste it using the text field below</li>\n                        <li>Click the \"Verify\" button to submit certificate for verification</li>\n                    </ul>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Token'\"\n                >\n                    <div class=\"copy-token-container\" (click)=\"copyToClipboard(formData.verificationToken)\">\n                        <span class=\"form-field-input copy-token-button\" matTooltip=\"Copy verifcation token\" matTooltipPosition=\"below\" matTooltipShowDelay=\"300\">{{formData.verificationToken}}</span>\n                        <div class=\"copy-icon\"></div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Certificate'\"\n                        [label]=\"'REQUIRED'\"\n                >\n                    <span *ngIf=\"errors['certPem']\" class=\"cert-error-text error-text\">{{certErrorMessage}}</span>\n                    <div class=\"form-field-input-group\">\n                        <div class=\"form-field-label-container select-file-label-container\">\n                            <div class=\"form-field-header\">\n                                <div class=\"form-field-title-container\">\n                                    <span class=\"form-field-title\">Enter PEM</span>\n                                </div>\n                                <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n                                        Select File\n                                        <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\n                                    </span>\n                                <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n                            </div>\n                            <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"certificate\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <div class=\"buttons-container buttons\">\n                    <div class=\"linkButton cancel\" (click)=\"returnToListPage()\">Oops, no get me out of here</div>\n                    <div class=\" save-button button save confirm\" (click)=\"save($event)\">Verify</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["::ng-deep .verify-certificate-container lib-form-header .form-header-container{max-width:50rem}.verify-certificate-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.verify-certificate-container .projectable-form-main-column{max-width:50rem}.verify-certificate-container .copy-token-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;cursor:pointer;background-color:var(--stroke);border-radius:var(--inputBorderRadius);transition:all .2s}.verify-certificate-container .copy-token-container .copy-icon{filter:grayscale(1)}.verify-certificate-container .copy-token-container:hover .copy-token-button{transform:scale(1.02)}.verify-certificate-container .copy-token-container:hover .copy-icon{transform:scale(1.02);filter:none}.verify-certificate-container .copy-token-container .copy-token-button{cursor:pointer;align-items:center;margin-left:var(--marginMedium);display:flex}.verify-certificate-container .instructions-list{margin:0;padding-left:1rem;display:flex;flex-direction:column;gap:.4rem;font-size:.9rem}.verify-certificate-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:-moz-fit-content;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.verify-certificate-container .select-file-button:hover{filter:brightness(.8)}.verify-certificate-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.verify-certificate-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear}.verify-certificate-container .select-file-label-container{gap:var(--marginMedium)}.verify-certificate-container .cert-error-text{height:.7rem}.verify-certificate-container .save-button{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)}::ng-deep .verify-certificate-container select:disabled,::ng-deep .verify-certificate-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .verify-certificate-wrapper lib-form-header .form-header-container{max-width:50rem}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: i10.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: i11.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
 }
 export { VerifyCertificateComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VerifyCertificateComponent, decorators: [{

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

@@ -220,7 +220,7 @@ class ConfigTypeFormComponent extends ProjectableForm {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigTypeFormComponent, deps: [{ token: i1.ConfigTypeFormService }, { token: i2.SchemaService }, { token: i3.GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i5.Location }, { token: i6.ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigTypeFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"config-type-form-container projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Edit Config Type' : 'Create Config Type')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"saveDisabled\"\n            [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"config-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]=\"'Config Name'\" [label]=\"'Required'\">\n                    <input\n                        id=\"ConfigName\"\n                        type=\"text\"\n                        maxlength=\"500\"\n                        placeholder=\"Name this config\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                    >\n                </lib-form-field-container>\n                <lib-form-field-container [title]=\"'Schema'\" [label]=\"'Required'\" class=\"schema-json-editor\">\n                    <lib-json-view [(data)]=\"formData.schema\" [jsonInvalid]=\"errors['schema']\"></lib-json-view>\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]=\"'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                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\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>\n", styles: [".config-type-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i9.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: 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", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i13.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigTypeFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"config-type-form-container projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Edit Config Type' : 'Create Config Type')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"saveDisabled\"\n            [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"config-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]=\"'Config Name'\" [label]=\"'Required'\">\n                    <input\n                        id=\"ConfigName\"\n                        type=\"text\"\n                        maxlength=\"500\"\n                        placeholder=\"Name this config\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                    >\n                </lib-form-field-container>\n                <lib-form-field-container [title]=\"'Schema'\" [label]=\"'Required'\" class=\"schema-json-editor\">\n                    <lib-json-view [(data)]=\"formData.schema\" [jsonInvalid]=\"errors['schema']\"></lib-json-view>\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]=\"'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                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\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>\n", styles: [".config-type-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: i9.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: 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", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i13.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 export { ConfigTypeFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigTypeFormComponent, decorators: [{

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

@@ -251,7 +251,7 @@ class ConfigurationFormComponent extends ProjectableForm {
         this._apiData = cloneDeep(this.apiData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigurationFormComponent, deps: [{ token: i1.ConfigurationService }, { token: i2.SchemaService }, { token: i3.GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i5.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigurationFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\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=\"config-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]=\"'Config Name'\" [label]=\"'Required'\">\n                    <input\n                        id=\"ConfigName\"\n                        type=\"text\"\n                        maxlength=\"500\"\n                        placeholder=\"Name this config\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        (keyup)=\"apiData()\"\n                    >\n                </lib-form-field-container>\n                <lib-form-field-container [showHeader]=\"false\">\n                    <div class=\"config-title-row\">\n                        <span class=\"form-field-title\">Configuration Data</span>\n                        <div class=\"form-header-toggle-container\">\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                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">{{isEditing ? 'Config Type' : 'Select a Config Type'}}</span>\n                        </div>\n                        <select\n                                id=\"ConfigTypes\"\n                                class=\"config-type-select\"\n                                [(ngModel)]=\"formData.configTypeId\"\n                                (change)=\"getSchema()\"\n                                [ngClass]=\"{disabled: isEditing, error: errors['configTypeId']}\"\n                        >\n                            <option value=\"\">Select A Type...</option>\n                            <option *ngFor=\"let config of options\"\n                                    [value]=\"config.id\">{{config.name}}\n                            </option>\n                        </select>\n                        <lib-config-editor\n                                [hidden]=\"configTypeEmpty\"\n                                [schema]=\"selectedSchema\"\n                                [(configData)]=\"formData.data\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"errors\"\n                                (configDataChange)=\"dataChanged($event)\"\n                                #configEditor\n                        ></lib-config-editor>\n                    </div>\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]=\"'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                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\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>\n", styles: [".config-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}\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.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", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i8.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: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i10.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i11.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i12.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "component", type: i13.ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigurationFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\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=\"config-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]=\"'Config Name'\" [label]=\"'Required'\">\n                    <input\n                        id=\"ConfigName\"\n                        type=\"text\"\n                        maxlength=\"500\"\n                        placeholder=\"Name this config\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        (keyup)=\"apiData()\"\n                    >\n                </lib-form-field-container>\n                <lib-form-field-container [showHeader]=\"false\">\n                    <div class=\"config-title-row\">\n                        <span class=\"form-field-title\">Configuration Data</span>\n                        <div class=\"form-header-toggle-container\">\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                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">{{isEditing ? 'Config Type' : 'Select a Config Type'}}</span>\n                        </div>\n                        <select\n                                id=\"ConfigTypes\"\n                                class=\"config-type-select\"\n                                [(ngModel)]=\"formData.configTypeId\"\n                                (change)=\"getSchema()\"\n                                [ngClass]=\"{disabled: isEditing, error: errors['configTypeId']}\"\n                        >\n                            <option value=\"\">Select A Type...</option>\n                            <option *ngFor=\"let config of options\"\n                                    [value]=\"config.id\">{{config.name}}\n                            </option>\n                        </select>\n                        <lib-config-editor\n                                [hidden]=\"configTypeEmpty\"\n                                [schema]=\"selectedSchema\"\n                                [(configData)]=\"formData.data\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"errors\"\n                                (configDataChange)=\"dataChanged($event)\"\n                                #configEditor\n                        ></lib-config-editor>\n                    </div>\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]=\"'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                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\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>\n", styles: [".config-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}\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.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", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: i8.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: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i10.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i11.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i12.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "component", type: i13.ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
 }
 export { ConfigurationFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigurationFormComponent, decorators: [{

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

@@ -193,7 +193,7 @@ class EdgeRouterFormComponent 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 Edge Router: ' : 'Create New Edge Router'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-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]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this edge router\"\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 Edge Router attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Edge Routers'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\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]=\"'TUNNELER'\"\n                        [title2]=\"'TRAVERSAL'\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                                <div\n                                        (click)=\"toggleTunnelerEnabled()\"\n                                        [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                                <div\n                                        (click)=\"toggleNoTraversal()\"\n                                        [ngClass]=\"{ on: !formData.noTraversal }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"!formData.noTraversal\" 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                    <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                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                            [identity]=\"formData\"\n                            [jwt]=\"formData.enrollmentJwt\"\n                            [token]=\"formData.enrollmentToken\"\n                            [expiration]=\"formData.enrollmentExpiresAt\"\n                            (doRefresh)=\"refreshEdgeRouter()\"\n                            [type]=\"'router'\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentities.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"identitiesLoading\"\n                        [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"'OPTIONAL'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"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: [".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}.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:.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}::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}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i7.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: i8.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i10.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i11.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: i13.QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: i14.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
+        ], 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 Edge Router: ' : 'Create New Edge Router'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-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]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this edge router\"\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 Edge Router attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Edge Routers'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\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]=\"'TUNNELER'\"\n                        [title2]=\"'TRAVERSAL'\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                                <div\n                                        (click)=\"toggleTunnelerEnabled()\"\n                                        [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                                <div\n                                        (click)=\"toggleNoTraversal()\"\n                                        [ngClass]=\"{ on: !formData.noTraversal }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"!formData.noTraversal\" 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                    <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                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                            [identity]=\"formData\"\n                            [jwt]=\"formData.enrollmentJwt\"\n                            [token]=\"formData.enrollmentToken\"\n                            [expiration]=\"formData.enrollmentExpiresAt\"\n                            (doRefresh)=\"refreshEdgeRouter()\"\n                            [type]=\"'router'\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentities.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"identitiesLoading\"\n                        [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"'OPTIONAL'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"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: [".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}.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:.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}::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}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: i7.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: i8.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i10.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i11.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: i13.QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: i14.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 export { EdgeRouterFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterFormComponent, decorators: [{

package/esm2022/lib/features/projectable-forms/edge-router-policy/edge-router-policy-form.component.mjs

@@ -250,7 +250,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
                 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 Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-policy-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]=\"'Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge router policy\"\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 Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\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]=\"'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                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"identitiesLoading\"\n                            [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"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: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: i6.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i7.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: i8.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i10.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i11.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: i13.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
+        ], 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 Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-policy-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]=\"'Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge router policy\"\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 Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\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]=\"'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                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"identitiesLoading\"\n                            [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"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: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: i6.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: i7.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: i8.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i10.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i11.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: i13.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 export { EdgeRouterPolicyFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterPolicyFormComponent, decorators: [{