npm - @openziti/ziti-console-lib - Versions diffs - 0.12.7 → 0.12.9 - Mend

@openziti/ziti-console-lib 0.12.7 → 0.12.9

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

Files changed (66) hide show

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

@@ -313,7 +313,7 @@ class AuthPolicyFormComponent extends ProjectableForm {
         this.svc.getJwtSigners(filters, 1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPolicyFormComponent, deps: [{ token: i1.AuthPolicyFormService }, { 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: AuthPolicyFormComponent, selector: "lib-configuration", 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 ? 'Auth Policy Details' : 'Create Auth Policy')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\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 Auth Policy\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Primary Authentication'\"\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\">Cert</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow x509 certificate based authentication\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleCertAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.cert.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.cert.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.cert.allowed\" 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\">Ext JWT</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow externally signed JWT bearer tokens\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleExtJwtAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.extJwt.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.extJwt.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.extJwt.allowed\" 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\">UPDB</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow authentication via a traditional &quot;Username Password Database&quot;\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleUpdbAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.updb.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.updb.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.updb.allowed\" 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                        *ngIf=\"formData.primary.cert.allowed\"\n                        [title]=\"'Cert 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\">Allow Expired Certificates</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow expired client certificates to authenticate\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleAllowExpiredCerts()\"\n                                    [ngClass]=\"{ on: formData.primary.cert.allowExpiredCerts }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.cert.allowExpiredCerts\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.cert.allowExpiredCerts\" 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                        *ngIf=\"formData.primary.extJwt.allowed\"\n                        [title]=\"'Ext JWT Options'\"\n                        [layout]=\"'column'\"\n                >\n                    <div class=\"form-field-label-container allowed-signers-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Allowed JWT Signers</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Choose which External JWT Signers may be used for authentication\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <lib-tag-selector\n                                [(selectedNamedAttributes)]=\"allowedJwtSignerAttributes\"\n                                [availableNamedAttributes]=\"svc.jwtSignerNamedAttributes\"\n                                [placeholder]=\"'Select which External JWT Signers to allow'\"\n                                (selectedNamedAttributesChange)=\"allowedJwtSignersChanged($event)\"\n                        ></lib-tag-selector>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.primary.updb.allowed\"\n                        [title]=\"'UPDB Options'\"\n                        [layout]=\"'column'\"\n                >\n                    <div class=\"form-field-row updb-input-options\">\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Minimum Length</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.minPasswordLength\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Max Attempts</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.maxAttempts\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Lockout Duration <div class=\"form-sub-text\">(min)</div></span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter time in min\" type=\"number\" [(ngModel)]=\"formData.primary.updb.lockoutDurationMinutes\"/>\n                        </div>\n                    </div>\n                    <div class=\"form-field-row\">\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\">Mixed Case</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require upper and lower case charachters\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbMixed()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireMixedCase }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireMixedCase\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireMixedCase\" 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\">Numeric</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require numerical charachters 0-9\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbNumeric()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireNumericChar }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireNumericChar\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireNumericChar\" 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\">Special</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require special (non-alpha numeric) charachters. ie. !%$@*\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbSpecial()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireSpecialChar }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireSpecialChar\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireSpecialChar\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\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                        [title]=\"'Secondary Authentication'\"\n                        [label]=\"'OPTIONAL'\"\n                        [layout]=\"'column'\"\n                        [contentStyle]=\"'z-index: 1000001'\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">TOTP MFA</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Require authenticating clients to have TOTP MFA enabled (Time-based, One-Time Password)\"\n                                    matTooltipPosition=\"below\"\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\">Require TOTP</div>\n                                </div>\n                                <div\n                                        (click)=\"toggleRequireTotp()\"\n                                        [ngClass]=\"{ on: formData.secondary.requireTotp }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.secondary.requireTotp\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.secondary.requireTotp\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">JWT Signer</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Require every client request to have a JWT from the specified External JTW Signer in the HTTP Authentication header\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <p-dropdown\n                                placeholder=\"Select JWT Signer...\"\n                                optionLabel=\"name\"\n                                optionValue=\"id\"\n                                filterBy=\"name\"\n                                [options]=\"svc.jwtSigners\"\n                                [filter]=\"true\"\n                                [showClear]=\"true\"\n                                (change)=\"secondaryJwtSignerChanged($event)\"\n                                [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n                        >\n                            <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                <div class=\"dropdown-filter-container\">\n                                    <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                        <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                        <input\n                                                type=\"text\"\n                                                pInputText\n                                                placeholder=\"Filter\"\n                                                (keyup)=\"jwtSignersFilterChangedDebounced($event)\" />\n                                    </div>\n                                    <button pButton\n                                            icon=\"pi pi-times\"\n                                            [ngClass]=\"{'configs-loading': svc.jwtSignersLoading}\"\n                                            (click)=\"clearJwtSignerFilter($event)\"\n                                            severity=\"secondary\">\n                                    </button>\n                                    <div class=\"spinner\" *ngIf=\"svc.jwtSignersLoading\"></div>\n                                </div>\n                            </ng-template>\n                        </p-dropdown>\n                    </div>\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)}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.InputText, selector: "[pInputText]" }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i13.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i14.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: i15.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i16.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i17.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i18.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: i19.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AuthPolicyFormComponent, selector: "lib-configuration", 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 ? 'Auth Policy Details' : 'Create Auth Policy')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\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 Auth Policy\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Primary Authentication'\"\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\">Cert</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow x509 certificate based authentication\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleCertAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.cert.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.cert.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.cert.allowed\" 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\">Ext JWT</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow externally signed JWT bearer tokens\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleExtJwtAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.extJwt.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.extJwt.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.extJwt.allowed\" 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\">UPDB</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow authentication via a traditional &quot;Username Password Database&quot;\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleUpdbAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.updb.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.updb.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.updb.allowed\" 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                        *ngIf=\"formData.primary.cert.allowed\"\n                        [title]=\"'Cert 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\">Allow Expired Certificates</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow expired client certificates to authenticate\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleAllowExpiredCerts()\"\n                                    [ngClass]=\"{ on: formData.primary.cert.allowExpiredCerts }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.cert.allowExpiredCerts\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.cert.allowExpiredCerts\" 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                        *ngIf=\"formData.primary.extJwt.allowed\"\n                        [title]=\"'Ext JWT Options'\"\n                        [layout]=\"'column'\"\n                >\n                    <div class=\"form-field-label-container allowed-signers-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Allowed JWT Signers</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Choose which External JWT Signers may be used for authentication\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <lib-tag-selector\n                                [(selectedNamedAttributes)]=\"allowedJwtSignerAttributes\"\n                                [availableNamedAttributes]=\"svc.jwtSignerNamedAttributes\"\n                                [placeholder]=\"'Select which External JWT Signers to allow'\"\n                                (selectedNamedAttributesChange)=\"allowedJwtSignersChanged($event)\"\n                        ></lib-tag-selector>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.primary.updb.allowed\"\n                        [title]=\"'UPDB Options'\"\n                        [layout]=\"'column'\"\n                >\n                    <div class=\"form-field-row updb-input-options\">\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Minimum Length</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.minPasswordLength\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Max Attempts</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.maxAttempts\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Lockout Duration <div class=\"form-sub-text\">(min)</div></span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter time in min\" type=\"number\" [(ngModel)]=\"formData.primary.updb.lockoutDurationMinutes\"/>\n                        </div>\n                    </div>\n                    <div class=\"form-field-row\">\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\">Mixed Case</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require upper and lower case charachters\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbMixed()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireMixedCase }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireMixedCase\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireMixedCase\" 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\">Numeric</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require numerical charachters 0-9\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbNumeric()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireNumericChar }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireNumericChar\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireNumericChar\" 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\">Special</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require special (non-alpha numeric) charachters. ie. !%$@*\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbSpecial()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireSpecialChar }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireSpecialChar\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireSpecialChar\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\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                        [title]=\"'Secondary Authentication'\"\n                        [label]=\"'OPTIONAL'\"\n                        [layout]=\"'column'\"\n                        [contentStyle]=\"'z-index: 1000001'\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">TOTP MFA</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Require authenticating clients to have TOTP MFA enabled (Time-based, One-Time Password)\"\n                                    matTooltipPosition=\"below\"\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\">Require TOTP</div>\n                                </div>\n                                <div\n                                        (click)=\"toggleRequireTotp()\"\n                                        [ngClass]=\"{ on: formData.secondary.requireTotp }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.secondary.requireTotp\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.secondary.requireTotp\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">JWT Signer</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Require every client request to have a JWT from the specified External JTW Signer in the HTTP Authentication header\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <p-dropdown\n                                placeholder=\"Select JWT Signer...\"\n                                optionLabel=\"name\"\n                                optionValue=\"id\"\n                                filterBy=\"name\"\n                                [options]=\"svc.jwtSigners\"\n                                [filter]=\"true\"\n                                [showClear]=\"true\"\n                                (change)=\"secondaryJwtSignerChanged($event)\"\n                                [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n                        >\n                            <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                <div class=\"dropdown-filter-container\">\n                                    <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                        <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                        <input\n                                                type=\"text\"\n                                                pInputText\n                                                placeholder=\"Filter\"\n                                                (keyup)=\"jwtSignersFilterChangedDebounced($event)\" />\n                                    </div>\n                                    <button pButton\n                                            icon=\"pi pi-times\"\n                                            [ngClass]=\"{'configs-loading': svc.jwtSignersLoading}\"\n                                            (click)=\"clearJwtSignerFilter($event)\"\n                                            severity=\"secondary\">\n                                    </button>\n                                    <div class=\"spinner\" *ngIf=\"svc.jwtSignersLoading\"></div>\n                                </div>\n                            </ng-template>\n                        </p-dropdown>\n                    </div>\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)}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.InputText, selector: "[pInputText]" }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i13.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: i14.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: i15.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i16.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i17.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i18.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: i19.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 export { AuthPolicyFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPolicyFormComponent, decorators: [{

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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: [{