npm - @openziti/ziti-console-lib - Versions diffs - 1.3.0 → 1.4.0 - Mend

@openziti/ziti-console-lib 1.3.0 → 1.4.0

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 (6) hide show

package/assets/styles/global.scss +7 -0
package/fesm2022/openziti-ziti-console-lib.mjs +746 -195
package/fesm2022/openziti-ziti-console-lib.mjs.map +1 -1
package/index.d.ts +32 -3
package/index.d.ts.map +1 -1
package/package.json +1 -1

package/fesm2022/openziti-ziti-console-lib.mjs CHANGED Viewed

@@ -3906,10 +3906,12 @@ class TableCellNameComponent {
     agInit(params) {
         this.cellParams = params?.colDef?.cellRendererParams || {};
         this.item = params.data;
+        this.value = params.value;
     }
     refresh(params) {
         this.cellParams = params?.colDef?.cellRendererParams || {};
         this.item = params.data;
+        this.value = params.value;
         return true;
     }
     get namePrefix() {
@@ -3938,7 +3940,7 @@ class TableCellNameComponent {
         this.router.navigateByUrl(`${this.cellParams.pathRoot}/${get(this.item, this.cellParams.itemProp, this.item.id)}`);
     }
     get cellText() {
-        let val = get(this.item, this.cellParams?.colDef?.field);
+        let val = this.value;
         if (isEmpty(val)) {
             val = this.item.name;
         }
@@ -6955,7 +6957,7 @@ class EdgeRouterFormService {
         this.growlerService.show(growlerData);
     }
     getAssociatedServices(id) {
-        this.zitiService.getSubdata('edge-routers', id, 'services').then((result) => {
+        this.zitiService.getSubdata('edge-routers', id, 'services', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedServices = result.data;
             this.associatedServiceNames = this.associatedServices.map((svc) => {
                 return svc.name;
@@ -6963,7 +6965,7 @@ class EdgeRouterFormService {
         });
     }
     getAssociatedIdentities(id) {
-        this.zitiService.getSubdata('edge-routers', id, 'identities').then((result) => {
+        this.zitiService.getSubdata('edge-routers', id, 'identities', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedIdentities = result.data;
             this.associatedIdentityNames = this.associatedIdentities.map((policy) => {
                 return policy.name;
@@ -9342,6 +9344,7 @@ class ProjectableForm extends ExtendableComponent {
         this.isLoading = false;
         this.usePreviousLocation = true;
         this.moreActions = [];
+        this.multiActions = [];
         this.tagElements = [];
         this.tagData = [];
         this.hideTags = false;
@@ -9568,13 +9571,21 @@ class ProjectableForm extends ExtendableComponent {
     }
     entityUpdated() {
         //no-op
-        if (this.isEdit && !this.moreActions.find(action => action.name === 'delete')) {
-            this.moreActions.push({
+        if (this.isEdit && !this.moreActions.find(action => action.name === 'delete') && !this.multiActions.find(action => action.id === 'delete')) {
+            const deleteAction = {
                 name: 'delete',
+                id: 'delete',
                 label: 'Delete',
                 icon: 'icon-trash',
                 hidden: () => !this.managementPermissions.canDelete(this.entityType),
-            });
+            };
+            if (this.extService?.useDeleteSplitButton) {
+                deleteAction.style = 'danger';
+                this.multiActions = [...this.multiActions, deleteAction];
+            }
+            else {
+                this.moreActions.push(deleteAction);
+            }
         }
     }
     getRoleAttributes(type) {
@@ -9854,12 +9865,15 @@ class MultiActionButtonComponent {
     actionClicked(action) {
         this.actionRequested.emit(action);
     }
+    isActionHidden(action) {
+        return isFunction(action.hidden) ? action.hidden() : !!action.hidden;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MultiActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MultiActionButtonComponent, isStandalone: false, selector: "lib-multi-action-button", inputs: { actions: "actions" }, outputs: { actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"multi-action-button-container\">\n  @if (actions) {\n    <div class=\"form-field-action\"\n      (clickOutside)=\"closeMoreActionsMenu()\"\n      >\n      <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n      @if (actions.length > 1) {\n        <div class=\"secondary-action-button\"\n          (click)=\"showMoreActionsMenu()\"\n          ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n        }\n      </div>\n    }\n    @if (showMoreActions) {\n      <div class=\"multi-action-button-dropdown\">\n        <ul>\n          @for (action of actions; track action) {\n            <li [hidden]=\"action.hidden\" class=\"confirm-item-name\" (click)=\"actionClicked(action)\">{{action.label}}</li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n", styles: [".multi-action-button-container{position:absolute;right:.9375rem;top:.625rem;z-index:999999}.multi-action-button-container .form-field-action{display:flex;flex-direction:row;align-items:center;padding:0;height:1.5625rem}.multi-action-button-container .form-field-action .primary-action-button{padding-left:.625rem;padding-right:.625rem;border-right-style:solid;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);color:var(--offWhite_ALWAYS);cursor:pointer;border-top-left-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-color:var(--stroke);box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.multi-action-button-container .form-field-action .secondary-action-button{height:100%;width:1.875rem;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem;background:var(--primary);color:var(--white);cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);border-color:var(--stroke);box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.multi-action-button-container .form-field-action .secondary-action-button .secondary-actions-arrow{transform:rotate(270deg)}.multi-action-button-container .multi-action-button-dropdown{position:absolute;background:var(--background);width:100%}.multi-action-button-container .multi-action-button-dropdown ul{width:100%;margin:0;padding:0}.multi-action-button-container .multi-action-button-dropdown ul li{list-style-type:none;padding:.3125rem .3125rem .3125rem .625rem;cursor:pointer}.multi-action-button-container .multi-action-button-dropdown ul li[hidden]{display:none}.multi-action-button-container .multi-action-button-dropdown ul li:hover{background-color:var(--inputBorder)}\n"], dependencies: [{ kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MultiActionButtonComponent, isStandalone: false, selector: "lib-multi-action-button", inputs: { actions: "actions" }, outputs: { actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"multi-action-button-container\">\n  @if (actions) {\n    <div class=\"form-field-action\"\n      (clickOutside)=\"closeMoreActionsMenu()\"\n      >\n      <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n      @if (actions.length > 1) {\n        <div class=\"secondary-action-button\"\n          (click)=\"showMoreActionsMenu()\"\n          ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n        }\n      </div>\n    }\n    @if (showMoreActions) {\n      <div class=\"multi-action-button-dropdown\">\n        <ul>\n          @for (action of actions; track action) {\n            <li [hidden]=\"isActionHidden(action)\" class=\"confirm-item-name {{action.style}}\" (click)=\"actionClicked(action)\">\n              @if (action.icon) {\n                <div class=\"confirm-item-icon {{action.icon}}\"></div>\n              }\n              {{action.label}}\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n", styles: [".multi-action-button-container{position:absolute;right:.9375rem;top:.625rem;z-index:999999}.multi-action-button-container .form-field-action{display:flex;flex-direction:row;align-items:center;padding:0;height:1.5625rem}.multi-action-button-container .form-field-action .primary-action-button{padding-left:.625rem;padding-right:.625rem;border-right-style:solid;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);color:var(--offWhite_ALWAYS);cursor:pointer;border-top-left-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-color:var(--stroke);box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.multi-action-button-container .form-field-action .secondary-action-button{height:100%;width:1.875rem;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem;background:var(--primary);color:var(--white);cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);border-color:var(--stroke);box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.multi-action-button-container .form-field-action .secondary-action-button .secondary-actions-arrow{transform:rotate(270deg)}.multi-action-button-container .multi-action-button-dropdown{position:absolute;background:var(--background);width:100%}.multi-action-button-container .multi-action-button-dropdown ul{width:100%;margin:0;padding:0}.multi-action-button-container .multi-action-button-dropdown ul li{list-style-type:none;padding:.3125rem .3125rem .3125rem .625rem;cursor:pointer}.multi-action-button-container .multi-action-button-dropdown ul li[hidden]{display:none}.multi-action-button-container .multi-action-button-dropdown ul li:hover{background-color:var(--inputBorder)}.multi-action-button-container .multi-action-button-dropdown ul li.danger{background-color:var(--redShadow);color:var(--red);display:flex;align-items:center}.multi-action-button-container .multi-action-button-dropdown ul li.danger:hover{background-color:var(--red);color:var(--white)}.multi-action-button-container .multi-action-button-dropdown ul .confirm-item-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.multi-action-button-container .multi-action-button-dropdown ul .confirm-item-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.multi-action-button-container .multi-action-button-dropdown ul .confirm-item-icon.icon-trash:before{content:none}:host-context(.header-actions-container) .multi-action-button-container{position:relative;top:unset;right:unset;height:2.0625rem}:host-context(.header-actions-container) .multi-action-button-container .form-field-action{height:100%}:host-context(.header-actions-container) .multi-action-button-container .form-field-action .primary-action-button{min-width:2.1875rem;padding-left:.9375rem;padding-right:.9375rem}\n"], dependencies: [{ kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MultiActionButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-multi-action-button', standalone: false, template: "<div class=\"multi-action-button-container\">\n  @if (actions) {\n    <div class=\"form-field-action\"\n      (clickOutside)=\"closeMoreActionsMenu()\"\n      >\n      <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n      @if (actions.length > 1) {\n        <div class=\"secondary-action-button\"\n          (click)=\"showMoreActionsMenu()\"\n          ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n        }\n      </div>\n    }\n    @if (showMoreActions) {\n      <div class=\"multi-action-button-dropdown\">\n        <ul>\n          @for (action of actions; track action) {\n            <li [hidden]=\"action.hidden\" class=\"confirm-item-name\" (click)=\"actionClicked(action)\">{{action.label}}</li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n", styles: [".multi-action-button-container{position:absolute;right:.9375rem;top:.625rem;z-index:999999}.multi-action-button-container .form-field-action{display:flex;flex-direction:row;align-items:center;padding:0;height:1.5625rem}.multi-action-button-container .form-field-action .primary-action-button{padding-left:.625rem;padding-right:.625rem;border-right-style:solid;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);color:var(--offWhite_ALWAYS);cursor:pointer;border-top-left-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-color:var(--stroke);box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.multi-action-button-container .form-field-action .secondary-action-button{height:100%;width:1.875rem;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem;background:var(--primary);color:var(--white);cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);border-color:var(--stroke);box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.multi-action-button-container .form-field-action .secondary-action-button .secondary-actions-arrow{transform:rotate(270deg)}.multi-action-button-container .multi-action-button-dropdown{position:absolute;background:var(--background);width:100%}.multi-action-button-container .multi-action-button-dropdown ul{width:100%;margin:0;padding:0}.multi-action-button-container .multi-action-button-dropdown ul li{list-style-type:none;padding:.3125rem .3125rem .3125rem .625rem;cursor:pointer}.multi-action-button-container .multi-action-button-dropdown ul li[hidden]{display:none}.multi-action-button-container .multi-action-button-dropdown ul li:hover{background-color:var(--inputBorder)}\n"] }]
+            args: [{ selector: 'lib-multi-action-button', standalone: false, template: "<div class=\"multi-action-button-container\">\n  @if (actions) {\n    <div class=\"form-field-action\"\n      (clickOutside)=\"closeMoreActionsMenu()\"\n      >\n      <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n      @if (actions.length > 1) {\n        <div class=\"secondary-action-button\"\n          (click)=\"showMoreActionsMenu()\"\n          ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n        }\n      </div>\n    }\n    @if (showMoreActions) {\n      <div class=\"multi-action-button-dropdown\">\n        <ul>\n          @for (action of actions; track action) {\n            <li [hidden]=\"isActionHidden(action)\" class=\"confirm-item-name {{action.style}}\" (click)=\"actionClicked(action)\">\n              @if (action.icon) {\n                <div class=\"confirm-item-icon {{action.icon}}\"></div>\n              }\n              {{action.label}}\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n", styles: [".multi-action-button-container{position:absolute;right:.9375rem;top:.625rem;z-index:999999}.multi-action-button-container .form-field-action{display:flex;flex-direction:row;align-items:center;padding:0;height:1.5625rem}.multi-action-button-container .form-field-action .primary-action-button{padding-left:.625rem;padding-right:.625rem;border-right-style:solid;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);color:var(--offWhite_ALWAYS);cursor:pointer;border-top-left-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-color:var(--stroke);box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.multi-action-button-container .form-field-action .secondary-action-button{height:100%;width:1.875rem;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem;background:var(--primary);color:var(--white);cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);border-color:var(--stroke);box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.multi-action-button-container .form-field-action .secondary-action-button .secondary-actions-arrow{transform:rotate(270deg)}.multi-action-button-container .multi-action-button-dropdown{position:absolute;background:var(--background);width:100%}.multi-action-button-container .multi-action-button-dropdown ul{width:100%;margin:0;padding:0}.multi-action-button-container .multi-action-button-dropdown ul li{list-style-type:none;padding:.3125rem .3125rem .3125rem .625rem;cursor:pointer}.multi-action-button-container .multi-action-button-dropdown ul li[hidden]{display:none}.multi-action-button-container .multi-action-button-dropdown ul li:hover{background-color:var(--inputBorder)}.multi-action-button-container .multi-action-button-dropdown ul li.danger{background-color:var(--redShadow);color:var(--red);display:flex;align-items:center}.multi-action-button-container .multi-action-button-dropdown ul li.danger:hover{background-color:var(--red);color:var(--white)}.multi-action-button-container .multi-action-button-dropdown ul .confirm-item-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.multi-action-button-container .multi-action-button-dropdown ul .confirm-item-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.multi-action-button-container .multi-action-button-dropdown ul .confirm-item-icon.icon-trash:before{content:none}:host-context(.header-actions-container) .multi-action-button-container{position:relative;top:unset;right:unset;height:2.0625rem}:host-context(.header-actions-container) .multi-action-button-container .form-field-action{height:100%}:host-context(.header-actions-container) .multi-action-button-container .form-field-action .primary-action-button{min-width:2.1875rem;padding-left:.9375rem;padding-right:.9375rem}\n"] }]
         }], propDecorators: { actions: [{
                 type: Input
             }], actionRequested: [{
@@ -9971,11 +9985,11 @@ class FormHeaderComponent {
         return this.data.badges || this.badges;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FormHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FormHeaderComponent, isStandalone: false, selector: "lib-form-header", inputs: { data: "data", badges: "badges", title: "title", moreActions: "moreActions", formView: "formView", saveDisabled: "saveDisabled", saveTooltip: "saveTooltip", actionButtonText: "actionButtonText", moreActionsText: "moreActionsText", showHeaderToggle: "showHeaderToggle", showHeaderButton: "showHeaderButton", strictReadonlyUi: "strictReadonlyUi", multiActions: "multiActions" }, outputs: { formViewChange: "formViewChange", actionRequested: "actionRequested", multiActionRequested: "multiActionRequested" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n  <div class=\"form-header-group\">\n    <div class=\"form-title-container\">\n      <div class=\"form-title-back-arrow\" (click)=\"requestAction({name: 'close'})\">\n        <div class=\"form-title-back-arrow-icon icon-back-arrow\"></div>\n      </div>\n      <div class=\"form-header-title-text\">\n        <span class=\"form-title\">{{displayTitle}}</span>\n        @if (data.name) {\n          <span class=\"form-title title-name\">{{data.name}}</span>\n        }\n      </div>\n    </div>\n    <div class=\"header-actions-container\">\n      @if (showHeaderToggle) {\n        <div class=\"form-header-toggle-container\">\n          <span\n            class=\"toggle-option-text\"\n            [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n            (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n            >\n            FORM\n          </span>\n          <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n            <div\n              class=\"form-toggle-switch\"\n              [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\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': formView === 'raw'}\"\n            (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n            >\n            JSON\n          </span>\n        </div>\n      }\n      @if (hasMoreActions && !strictReadonlyUi) {\n        <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\"  (click)=\"showMoreActions()\">\n          <div class=\"more-actions-button\">\n            <div class=\"more-actions-label\">\n              <div class=\"more-actions-text\">{{moreActionsText}}</div>\n              <div class=\"more-actions-arrow\"></div>\n            </div>\n          </div>\n          @if (showActionsDropDown) {\n            <div class=\"more-actions-list\" (clickOutside)=\"closeActionsMoreActions()\">\n              @for (action of moreActions; track action) {\n                <div\n                  class=\"more-actions-item\"\n                  (click)=\"requestAction(action)\"\n                  >\n                  @if (action.icon) {\n                    <div class=\"more-actions-item-icon {{action.icon}}\"></div>\n                  }\n                  {{action.label}}\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (!hasMultiActions && showHeaderButton && !strictReadonlyUi) {\n        <div class=\"save-button\"\n          (click)=\"requestAction({name: 'save'})\"\n          [ngClass]=\"{'save-disabled': saveDisabled}\"\n          matTooltip=\"{{saveTooltip}}\"\n          matTooltipPosition=\"below\"\n        >{{actionButtonText}}</div>\n      }\n      @if (hasMultiActions && !strictReadonlyUi) {\n        <lib-multi-action-button\n          [actions]=\"saveActions\"\n          (actionRequested)=\"actionClicked($event)\"\n        ></lib-multi-action-button>\n      }\n    </div>\n  </div>\n  <div class=\"form-header-group badges-container\">\n    @for (badge of headerBadges; track badge) {\n      <div class=\"header-badge-container {{badge.class}}\">\n        @if (badge.circle) {\n          <span class=\"circle {{badge.circle}}\"></span>\n        }\n        <span class=\"badge-label\">{{badge.label}}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{position:relative;width:100%;padding-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem;z-index:100001}:host.is-scrolled{box-shadow:0 .625rem .625rem -.625rem var(--boxShadow)}.form-header-container{display:flex;flex-direction:column;width:100%;padding-right:var(--paddingMedium);max-width:68.75rem}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 23.4375rem)}.form-header-container.show-more-actions .header-actions-container{min-width:23.4375rem}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:1.875rem;margin-top:.3125rem;gap:.625rem}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 12.5rem)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:1.375rem;color:var(--tableText);margin-left:.4375rem;min-width:8.125rem;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:.3125rem}.form-header-container .form-title-container .form-title-back-arrow{display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:var(--marginSmall);width:1.325rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer}.form-header-container .form-title-container .form-title-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-arrow-icon{font-family:icomoon!important;font-size:1rem;height:1rem;font-weight:600;margin-top:.05rem;color:var(--tableText)}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;width:.875rem;position:absolute;left:.5rem}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:11.25rem;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:4.0625rem;height:2.0625rem;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.form-header-container .header-actions-container .save-button.save-disabled:active{transform:translateY(0);background:var(--primary)}.more-actions-container{width:9.375rem;height:2.0625rem;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer;z-index:10000001;margin-right:1.25rem}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:.9375rem;margin-right:.625rem}.more-actions-container .more-actions-label .more-actions-arrow{background-image:url(/assets/svgs/ArrowDown.svg);background-size:1.25rem .625rem;width:1.25rem;height:.625rem;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:2.0625rem;width:100%;box-shadow:0 .1875rem .3125rem .0625rem var(--boxShadow);border-radius:.3125rem;z-index:10000002}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;min-height:1.5625rem;width:100%;padding:.5rem .9375rem;color:var(--tableText);cursor:pointer;font-size:1.09rem}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container .more-actions-item:has(.icon-trash){background-color:var(--redShadow);color:var(--red)}.more-actions-container .more-actions-item:has(.icon-trash):hover{background-color:var(--red);color:var(--white)}.more-actions-container .more-actions-item .more-actions-item-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash:before{content:none}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.header-badge-container{height:1.875rem;display:flex;flex-direction:row;align-items:center;border-radius:var(--formHeaderToggleRadius);padding:0rem .75rem;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:.3125rem}.header-badge-container.verified{background-color:var(--primary);color:var(--white)}.header-badge-container .circle.false{background-color:var(--white)}.header-badge-container .circle.verified{font-size:1.2rem;color:var(--white);font-family:icomoon;background-color:transparent;width:1.2rem;height:1.2rem}.header-badge-container .circle.verified:before{content:\"\\e958\"}.header-badge-container.unknown{background-color:var(--highlightedOpaque)}.header-badge-container.unknown .circle{background-color:var(--highlighted)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: ["actions"], outputs: ["actionRequested"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FormHeaderComponent, isStandalone: false, selector: "lib-form-header", inputs: { data: "data", badges: "badges", title: "title", moreActions: "moreActions", formView: "formView", saveDisabled: "saveDisabled", saveTooltip: "saveTooltip", actionButtonText: "actionButtonText", moreActionsText: "moreActionsText", showHeaderToggle: "showHeaderToggle", showHeaderButton: "showHeaderButton", strictReadonlyUi: "strictReadonlyUi", multiActions: "multiActions" }, outputs: { formViewChange: "formViewChange", actionRequested: "actionRequested", multiActionRequested: "multiActionRequested" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n  <div class=\"form-header-group\">\n    <div class=\"form-title-container\">\n      <div class=\"form-title-back-arrow\" (click)=\"requestAction({name: 'close'})\">\n        <div class=\"form-title-back-arrow-icon icon-back-arrow\"></div>\n      </div>\n      <div class=\"form-header-title-text\">\n        <span class=\"form-title\">{{displayTitle}}</span>\n        @if (data.name) {\n          <span class=\"form-title title-name\">{{data.name}}</span>\n        }\n      </div>\n    </div>\n    <div class=\"header-actions-container\">\n      @if (showHeaderToggle) {\n        <div class=\"form-header-toggle-container\">\n          <span\n            class=\"toggle-option-text\"\n            [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n            (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n            >\n            FORM\n          </span>\n          <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n            <div\n              class=\"form-toggle-switch\"\n              [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\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': formView === 'raw'}\"\n            (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n            >\n            JSON\n          </span>\n        </div>\n      }\n      @if (hasMoreActions && !strictReadonlyUi) {\n        <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\"  (click)=\"showMoreActions()\">\n          <div class=\"more-actions-button\">\n            <div class=\"more-actions-label\">\n              <div class=\"more-actions-text\">{{moreActionsText}}</div>\n              <div class=\"more-actions-arrow\"></div>\n            </div>\n          </div>\n          @if (showActionsDropDown) {\n            <div class=\"more-actions-list\" (clickOutside)=\"closeActionsMoreActions()\">\n              @for (action of moreActions; track action) {\n                <div\n                  class=\"more-actions-item\"\n                  (click)=\"requestAction(action)\"\n                  >\n                  @if (action.icon) {\n                    <div class=\"more-actions-item-icon {{action.icon}}\"></div>\n                  }\n                  {{action.label}}\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (!hasMultiActions && showHeaderButton && !strictReadonlyUi) {\n        <div class=\"save-button\"\n          (click)=\"requestAction({name: 'save'})\"\n          [ngClass]=\"{'save-disabled': saveDisabled}\"\n          matTooltip=\"{{saveTooltip}}\"\n          matTooltipPosition=\"below\"\n        >{{actionButtonText}}</div>\n      }\n      @if (hasMultiActions && !strictReadonlyUi) {\n        <lib-multi-action-button\n          [actions]=\"saveActions\"\n          (actionRequested)=\"actionClicked($event)\"\n        ></lib-multi-action-button>\n      }\n    </div>\n  </div>\n  <div class=\"form-header-group badges-container\">\n    @for (badge of headerBadges; track badge) {\n      <div class=\"header-badge-container {{badge.class}}\">\n        @if (badge.circle) {\n          <span class=\"circle {{badge.circle}}\"></span>\n        }\n        <span class=\"badge-label\">{{badge.label}}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{position:relative;width:100%;padding-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem;z-index:100001}:host.is-scrolled{box-shadow:0 .625rem .625rem -.625rem var(--boxShadow)}.form-header-container{display:flex;flex-direction:column;width:100%;padding-right:var(--paddingMedium);max-width:68.75rem}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 23.4375rem)}.form-header-container.show-more-actions .header-actions-container{min-width:23.4375rem}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:1.875rem;margin-top:.3125rem;gap:.625rem}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 12.5rem)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:1.375rem;color:var(--tableText);margin-left:.4375rem;min-width:8.125rem;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:.3125rem}.form-header-container .form-title-container .form-title-back-arrow{display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:var(--marginSmall);width:1.325rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer}.form-header-container .form-title-container .form-title-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-arrow-icon{font-family:icomoon!important;font-size:1rem;height:1rem;font-weight:600;margin-top:.05rem;color:var(--tableText)}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;width:.875rem;position:absolute;left:.5rem}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:11.25rem;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:4.0625rem;height:2.0625rem;text-transform:none}.form-header-container .header-actions-container .save-button.header-action-button{margin-right:1.25rem}.form-header-container .header-actions-container .save-button.header-action-button .header-action-button-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.form-header-container .header-actions-container .save-button.header-action-button .header-action-button-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.form-header-container .header-actions-container .save-button.header-action-button .header-action-button-icon.icon-trash:before{content:none}.form-header-container .header-actions-container .save-button.danger{background:var(--red);box-shadow:0 .1875rem .5625rem 0 var(--redShadow)}.form-header-container .header-actions-container .save-button.danger:hover{background:var(--red);filter:brightness(110%);box-shadow:0 .125rem .1875rem 0 var(--redShadow)}.form-header-container .header-actions-container .save-button.danger:active{background:var(--red);filter:brightness(85%)}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.form-header-container .header-actions-container .save-button.save-disabled:active{transform:translateY(0);background:var(--primary)}.more-actions-container{width:9.375rem;height:2.0625rem;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer;z-index:10000001;margin-right:1.25rem}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:.9375rem;margin-right:.625rem}.more-actions-container .more-actions-label .more-actions-arrow{background-image:url(/assets/svgs/ArrowDown.svg);background-size:1.25rem .625rem;width:1.25rem;height:.625rem;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:2.0625rem;width:100%;box-shadow:0 .1875rem .3125rem .0625rem var(--boxShadow);border-radius:.3125rem;z-index:10000002}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;min-height:1.5625rem;width:100%;padding:.5rem .9375rem;color:var(--tableText);cursor:pointer;font-size:1.09rem}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container .more-actions-item:has(.icon-trash){background-color:var(--redShadow);color:var(--red)}.more-actions-container .more-actions-item:has(.icon-trash):hover{background-color:var(--red);color:var(--white)}.more-actions-container .more-actions-item .more-actions-item-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash:before{content:none}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.header-badge-container{height:1.875rem;display:flex;flex-direction:row;align-items:center;border-radius:var(--formHeaderToggleRadius);padding:0rem .75rem;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:.3125rem}.header-badge-container.verified{background-color:var(--primary);color:var(--white)}.header-badge-container .circle.false{background-color:var(--white)}.header-badge-container .circle.verified{font-size:1.2rem;color:var(--white);font-family:icomoon;background-color:transparent;width:1.2rem;height:1.2rem}.header-badge-container .circle.verified:before{content:\"\\e958\"}.header-badge-container.unknown{background-color:var(--highlightedOpaque)}.header-badge-container.unknown .circle{background-color:var(--highlighted)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: ["actions"], outputs: ["actionRequested"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FormHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-header', standalone: false, template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n  <div class=\"form-header-group\">\n    <div class=\"form-title-container\">\n      <div class=\"form-title-back-arrow\" (click)=\"requestAction({name: 'close'})\">\n        <div class=\"form-title-back-arrow-icon icon-back-arrow\"></div>\n      </div>\n      <div class=\"form-header-title-text\">\n        <span class=\"form-title\">{{displayTitle}}</span>\n        @if (data.name) {\n          <span class=\"form-title title-name\">{{data.name}}</span>\n        }\n      </div>\n    </div>\n    <div class=\"header-actions-container\">\n      @if (showHeaderToggle) {\n        <div class=\"form-header-toggle-container\">\n          <span\n            class=\"toggle-option-text\"\n            [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n            (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n            >\n            FORM\n          </span>\n          <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n            <div\n              class=\"form-toggle-switch\"\n              [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\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': formView === 'raw'}\"\n            (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n            >\n            JSON\n          </span>\n        </div>\n      }\n      @if (hasMoreActions && !strictReadonlyUi) {\n        <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\"  (click)=\"showMoreActions()\">\n          <div class=\"more-actions-button\">\n            <div class=\"more-actions-label\">\n              <div class=\"more-actions-text\">{{moreActionsText}}</div>\n              <div class=\"more-actions-arrow\"></div>\n            </div>\n          </div>\n          @if (showActionsDropDown) {\n            <div class=\"more-actions-list\" (clickOutside)=\"closeActionsMoreActions()\">\n              @for (action of moreActions; track action) {\n                <div\n                  class=\"more-actions-item\"\n                  (click)=\"requestAction(action)\"\n                  >\n                  @if (action.icon) {\n                    <div class=\"more-actions-item-icon {{action.icon}}\"></div>\n                  }\n                  {{action.label}}\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (!hasMultiActions && showHeaderButton && !strictReadonlyUi) {\n        <div class=\"save-button\"\n          (click)=\"requestAction({name: 'save'})\"\n          [ngClass]=\"{'save-disabled': saveDisabled}\"\n          matTooltip=\"{{saveTooltip}}\"\n          matTooltipPosition=\"below\"\n        >{{actionButtonText}}</div>\n      }\n      @if (hasMultiActions && !strictReadonlyUi) {\n        <lib-multi-action-button\n          [actions]=\"saveActions\"\n          (actionRequested)=\"actionClicked($event)\"\n        ></lib-multi-action-button>\n      }\n    </div>\n  </div>\n  <div class=\"form-header-group badges-container\">\n    @for (badge of headerBadges; track badge) {\n      <div class=\"header-badge-container {{badge.class}}\">\n        @if (badge.circle) {\n          <span class=\"circle {{badge.circle}}\"></span>\n        }\n        <span class=\"badge-label\">{{badge.label}}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{position:relative;width:100%;padding-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem;z-index:100001}:host.is-scrolled{box-shadow:0 .625rem .625rem -.625rem var(--boxShadow)}.form-header-container{display:flex;flex-direction:column;width:100%;padding-right:var(--paddingMedium);max-width:68.75rem}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 23.4375rem)}.form-header-container.show-more-actions .header-actions-container{min-width:23.4375rem}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:1.875rem;margin-top:.3125rem;gap:.625rem}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 12.5rem)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:1.375rem;color:var(--tableText);margin-left:.4375rem;min-width:8.125rem;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:.3125rem}.form-header-container .form-title-container .form-title-back-arrow{display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:var(--marginSmall);width:1.325rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer}.form-header-container .form-title-container .form-title-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-arrow-icon{font-family:icomoon!important;font-size:1rem;height:1rem;font-weight:600;margin-top:.05rem;color:var(--tableText)}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;width:.875rem;position:absolute;left:.5rem}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:11.25rem;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:4.0625rem;height:2.0625rem;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.form-header-container .header-actions-container .save-button.save-disabled:active{transform:translateY(0);background:var(--primary)}.more-actions-container{width:9.375rem;height:2.0625rem;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer;z-index:10000001;margin-right:1.25rem}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:.9375rem;margin-right:.625rem}.more-actions-container .more-actions-label .more-actions-arrow{background-image:url(/assets/svgs/ArrowDown.svg);background-size:1.25rem .625rem;width:1.25rem;height:.625rem;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:2.0625rem;width:100%;box-shadow:0 .1875rem .3125rem .0625rem var(--boxShadow);border-radius:.3125rem;z-index:10000002}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;min-height:1.5625rem;width:100%;padding:.5rem .9375rem;color:var(--tableText);cursor:pointer;font-size:1.09rem}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container .more-actions-item:has(.icon-trash){background-color:var(--redShadow);color:var(--red)}.more-actions-container .more-actions-item:has(.icon-trash):hover{background-color:var(--red);color:var(--white)}.more-actions-container .more-actions-item .more-actions-item-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash:before{content:none}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.header-badge-container{height:1.875rem;display:flex;flex-direction:row;align-items:center;border-radius:var(--formHeaderToggleRadius);padding:0rem .75rem;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:.3125rem}.header-badge-container.verified{background-color:var(--primary);color:var(--white)}.header-badge-container .circle.false{background-color:var(--white)}.header-badge-container .circle.verified{font-size:1.2rem;color:var(--white);font-family:icomoon;background-color:transparent;width:1.2rem;height:1.2rem}.header-badge-container .circle.verified:before{content:\"\\e958\"}.header-badge-container.unknown{background-color:var(--highlightedOpaque)}.header-badge-container.unknown .circle{background-color:var(--highlighted)}\n"] }]
+            args: [{ selector: 'lib-form-header', standalone: false, template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n  <div class=\"form-header-group\">\n    <div class=\"form-title-container\">\n      <div class=\"form-title-back-arrow\" (click)=\"requestAction({name: 'close'})\">\n        <div class=\"form-title-back-arrow-icon icon-back-arrow\"></div>\n      </div>\n      <div class=\"form-header-title-text\">\n        <span class=\"form-title\">{{displayTitle}}</span>\n        @if (data.name) {\n          <span class=\"form-title title-name\">{{data.name}}</span>\n        }\n      </div>\n    </div>\n    <div class=\"header-actions-container\">\n      @if (showHeaderToggle) {\n        <div class=\"form-header-toggle-container\">\n          <span\n            class=\"toggle-option-text\"\n            [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n            (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n            >\n            FORM\n          </span>\n          <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n            <div\n              class=\"form-toggle-switch\"\n              [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\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': formView === 'raw'}\"\n            (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n            >\n            JSON\n          </span>\n        </div>\n      }\n      @if (hasMoreActions && !strictReadonlyUi) {\n        <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\"  (click)=\"showMoreActions()\">\n          <div class=\"more-actions-button\">\n            <div class=\"more-actions-label\">\n              <div class=\"more-actions-text\">{{moreActionsText}}</div>\n              <div class=\"more-actions-arrow\"></div>\n            </div>\n          </div>\n          @if (showActionsDropDown) {\n            <div class=\"more-actions-list\" (clickOutside)=\"closeActionsMoreActions()\">\n              @for (action of moreActions; track action) {\n                <div\n                  class=\"more-actions-item\"\n                  (click)=\"requestAction(action)\"\n                  >\n                  @if (action.icon) {\n                    <div class=\"more-actions-item-icon {{action.icon}}\"></div>\n                  }\n                  {{action.label}}\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      @if (!hasMultiActions && showHeaderButton && !strictReadonlyUi) {\n        <div class=\"save-button\"\n          (click)=\"requestAction({name: 'save'})\"\n          [ngClass]=\"{'save-disabled': saveDisabled}\"\n          matTooltip=\"{{saveTooltip}}\"\n          matTooltipPosition=\"below\"\n        >{{actionButtonText}}</div>\n      }\n      @if (hasMultiActions && !strictReadonlyUi) {\n        <lib-multi-action-button\n          [actions]=\"saveActions\"\n          (actionRequested)=\"actionClicked($event)\"\n        ></lib-multi-action-button>\n      }\n    </div>\n  </div>\n  <div class=\"form-header-group badges-container\">\n    @for (badge of headerBadges; track badge) {\n      <div class=\"header-badge-container {{badge.class}}\">\n        @if (badge.circle) {\n          <span class=\"circle {{badge.circle}}\"></span>\n        }\n        <span class=\"badge-label\">{{badge.label}}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{position:relative;width:100%;padding-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem;z-index:100001}:host.is-scrolled{box-shadow:0 .625rem .625rem -.625rem var(--boxShadow)}.form-header-container{display:flex;flex-direction:column;width:100%;padding-right:var(--paddingMedium);max-width:68.75rem}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 23.4375rem)}.form-header-container.show-more-actions .header-actions-container{min-width:23.4375rem}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:1.875rem;margin-top:.3125rem;gap:.625rem}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 12.5rem)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:1.375rem;color:var(--tableText);margin-left:.4375rem;min-width:8.125rem;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:.3125rem}.form-header-container .form-title-container .form-title-back-arrow{display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:var(--marginSmall);width:1.325rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer}.form-header-container .form-title-container .form-title-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-arrow-icon{font-family:icomoon!important;font-size:1rem;height:1rem;font-weight:600;margin-top:.05rem;color:var(--tableText)}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;width:.875rem;position:absolute;left:.5rem}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:11.25rem;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:4.0625rem;height:2.0625rem;text-transform:none}.form-header-container .header-actions-container .save-button.header-action-button{margin-right:1.25rem}.form-header-container .header-actions-container .save-button.header-action-button .header-action-button-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.form-header-container .header-actions-container .save-button.header-action-button .header-action-button-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.form-header-container .header-actions-container .save-button.header-action-button .header-action-button-icon.icon-trash:before{content:none}.form-header-container .header-actions-container .save-button.danger{background:var(--red);box-shadow:0 .1875rem .5625rem 0 var(--redShadow)}.form-header-container .header-actions-container .save-button.danger:hover{background:var(--red);filter:brightness(110%);box-shadow:0 .125rem .1875rem 0 var(--redShadow)}.form-header-container .header-actions-container .save-button.danger:active{background:var(--red);filter:brightness(85%)}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.form-header-container .header-actions-container .save-button.save-disabled:active{transform:translateY(0);background:var(--primary)}.more-actions-container{width:9.375rem;height:2.0625rem;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer;z-index:10000001;margin-right:1.25rem}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:.9375rem;margin-right:.625rem}.more-actions-container .more-actions-label .more-actions-arrow{background-image:url(/assets/svgs/ArrowDown.svg);background-size:1.25rem .625rem;width:1.25rem;height:.625rem;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:2.0625rem;width:100%;box-shadow:0 .1875rem .3125rem .0625rem var(--boxShadow);border-radius:.3125rem;z-index:10000002}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;min-height:1.5625rem;width:100%;padding:.5rem .9375rem;color:var(--tableText);cursor:pointer;font-size:1.09rem}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container .more-actions-item:has(.icon-trash){background-color:var(--redShadow);color:var(--red)}.more-actions-container .more-actions-item:has(.icon-trash):hover{background-color:var(--red);color:var(--white)}.more-actions-container .more-actions-item .more-actions-item-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash:before{content:none}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.header-badge-container{height:1.875rem;display:flex;flex-direction:row;align-items:center;border-radius:var(--formHeaderToggleRadius);padding:0rem .75rem;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:.3125rem}.header-badge-container.verified{background-color:var(--primary);color:var(--white)}.header-badge-container .circle.false{background-color:var(--white)}.header-badge-container .circle.verified{font-size:1.2rem;color:var(--white);font-family:icomoon;background-color:transparent;width:1.2rem;height:1.2rem}.header-badge-container .circle.verified:before{content:\"\\e958\"}.header-badge-container.unknown{background-color:var(--highlightedOpaque)}.header-badge-container.unknown .circle{background-color:var(--highlighted)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], badges: [{
@@ -10440,6 +10454,16 @@ class TerminatorFormComponent extends ProjectableForm {
                 break;
         }
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     clear() {
         this.formData.configTypeId = '';
         this.clearForm();
@@ -10578,11 +10602,11 @@ class TerminatorFormComponent extends ProjectableForm {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TerminatorFormComponent, deps: [{ token: TerminatorFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TerminatorFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, 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 ? 'Terminator Details' : 'Create Terminator')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"terminator-form-container projectable-form-container\">\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column one-half\">\n        <lib-form-field-container\n          [title]=\"'Service'\"\n          [contentStyle]=\"'z-index: 10003'\"\n          >\n          <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedServiceNamedAttribute\" [disabled]=\"true\"/>\n          <!--<lib-tag-selector\n          [(selectedNamedAttributes)]=\"svc.selectedServiceNamedAttributes\"\n          [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n          [placeholder]=\"'Select a service'\"\n          (addNamedAttribute)=\"serviceAttributeChanged($event)\"\n          (namedAttributeRemoved)=\"serviceAttributeChanged()\"\n        ></lib-tag-selector>-->\n      </lib-form-field-container>\n      <lib-form-field-container\n        [title]=\"'Router'\"\n        [contentStyle]=\"'z-index: 10002'\"\n        >\n        <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedRouterNamedAttribute\" [disabled]=\"true\"/>\n        <!--<lib-tag-selector\n        [(selectedNamedAttributes)]=\"svc.selectedRouterNamedAttributes\"\n        [availableNamedAttributes]=\"svc.routerNamedAttributes\"\n        [placeholder]=\"'Select a router'\"\n        (addNamedAttribute)=\"routerAttributeChanged($event)\"\n        (namedAttributeRemoved)=\"routerAttributeChanged()\"\n      ></lib-tag-selector>-->\n    </lib-form-field-container>\n    <lib-form-field-container\n      [title]=\"'Identity'\"\n      [contentStyle]=\"'z-index: 10001'\"\n      >\n      <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedIdentityNamedAttribute\" [disabled]=\"true\"/>\n      <!--<lib-tag-selector\n      [(selectedNamedAttributes)]=\"svc.selectedIdentityNamedAttributes\"\n      [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n      [placeholder]=\"'Select an identity'\"\n      (addNamedAttribute)=\"identityAttributeChanged($event)\"\n      (namedAttributeRemoved)=\"identityAttributeChanged()\"\n    ></lib-tag-selector>-->\n  </lib-form-field-container>\n</div>\n<div class=\"form-group-column one-half\">\n  <lib-form-field-container\n    [title]=\"'Address'\"\n    [contentStyle]=\"'z-index: 1001'\"\n    >\n    <input class=\"form-field-input read-only\" [disabled]=\"true\" [(ngModel)]=\"formData.address\"/>\n  </lib-form-field-container>\n  <lib-form-field-container\n    [showHeader]=\"false\"\n    [layout]=\"'row'\"\n    [contentStyle]=\"'z-index: 1001'\"\n    >\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Binding</span>\n      <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.binding\"/>\n    </div>\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Identity Secret</span>\n      <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.identitySecret\"/>\n    </div>\n  </lib-form-field-container>\n  <lib-form-field-container\n    [layout]=\"'row'\"\n    [showHeader]=\"false\"\n    >\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Hosting Cost</span>\n      <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.cost\" type=\"number\"/>\n    </div>\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Precedence</span>\n      <select\n        [(ngModel)]=\"formData.precedence\"\n        [disabled]=\"true\"\n        id=\"hostingPrecedence\"\n        class=\"form-field-dropdown read-only\"\n        >\n        <option value=\"default\">Default</option>\n        <option value=\"required\">Required</option>\n        <option value=\"failed\">Failed</option>\n      </select>\n    </div>\n  </lib-form-field-container>\n</div>\n</div>\n@if (formView === 'raw') {\n  <div class=\"form-group-column\">\n    @if (formData) {\n      <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n    }\n  </div>\n}\n</div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".terminator-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}::ng-deep .terminator-form-container select:disabled,::ng-deep .terminator-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}@media (max-width: 1524px){.terminator-form-container .projectable-form-main-column{max-width:38.75rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TerminatorFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, 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 ? 'Terminator Details' : 'Create Terminator')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"terminator-form-container projectable-form-container\">\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column one-half\">\n        <lib-form-field-container\n          [title]=\"'Service'\"\n          [contentStyle]=\"'z-index: 10003'\"\n          >\n          <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedServiceNamedAttribute\" [disabled]=\"true\"/>\n          <!--<lib-tag-selector\n          [(selectedNamedAttributes)]=\"svc.selectedServiceNamedAttributes\"\n          [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n          [placeholder]=\"'Select a service'\"\n          (addNamedAttribute)=\"serviceAttributeChanged($event)\"\n          (namedAttributeRemoved)=\"serviceAttributeChanged()\"\n        ></lib-tag-selector>-->\n      </lib-form-field-container>\n      <lib-form-field-container\n        [title]=\"'Router'\"\n        [contentStyle]=\"'z-index: 10002'\"\n        >\n        <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedRouterNamedAttribute\" [disabled]=\"true\"/>\n        <!--<lib-tag-selector\n        [(selectedNamedAttributes)]=\"svc.selectedRouterNamedAttributes\"\n        [availableNamedAttributes]=\"svc.routerNamedAttributes\"\n        [placeholder]=\"'Select a router'\"\n        (addNamedAttribute)=\"routerAttributeChanged($event)\"\n        (namedAttributeRemoved)=\"routerAttributeChanged()\"\n      ></lib-tag-selector>-->\n    </lib-form-field-container>\n    <lib-form-field-container\n      [title]=\"'Identity'\"\n      [contentStyle]=\"'z-index: 10001'\"\n      >\n      <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedIdentityNamedAttribute\" [disabled]=\"true\"/>\n      <!--<lib-tag-selector\n      [(selectedNamedAttributes)]=\"svc.selectedIdentityNamedAttributes\"\n      [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n      [placeholder]=\"'Select an identity'\"\n      (addNamedAttribute)=\"identityAttributeChanged($event)\"\n      (namedAttributeRemoved)=\"identityAttributeChanged()\"\n    ></lib-tag-selector>-->\n  </lib-form-field-container>\n</div>\n<div class=\"form-group-column one-half\">\n  <lib-form-field-container\n    [title]=\"'Address'\"\n    [contentStyle]=\"'z-index: 1001'\"\n    >\n    <input class=\"form-field-input read-only\" [disabled]=\"true\" [(ngModel)]=\"formData.address\"/>\n  </lib-form-field-container>\n  <lib-form-field-container\n    [showHeader]=\"false\"\n    [layout]=\"'row'\"\n    [contentStyle]=\"'z-index: 1001'\"\n    >\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Binding</span>\n      <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.binding\"/>\n    </div>\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Identity Secret</span>\n      <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.identitySecret\"/>\n    </div>\n  </lib-form-field-container>\n  <lib-form-field-container\n    [layout]=\"'row'\"\n    [showHeader]=\"false\"\n    >\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Hosting Cost</span>\n      <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.cost\" type=\"number\"/>\n    </div>\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Precedence</span>\n      <select\n        [(ngModel)]=\"formData.precedence\"\n        [disabled]=\"true\"\n        id=\"hostingPrecedence\"\n        class=\"form-field-dropdown read-only\"\n        >\n        <option value=\"default\">Default</option>\n        <option value=\"required\">Required</option>\n        <option value=\"failed\">Failed</option>\n      </select>\n    </div>\n  </lib-form-field-container>\n</div>\n</div>\n@if (formView === 'raw') {\n  <div class=\"form-group-column\">\n    @if (formData) {\n      <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n    }\n  </div>\n}\n</div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".terminator-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}::ng-deep .terminator-form-container select:disabled,::ng-deep .terminator-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}@media (max-width: 1524px){.terminator-form-container .projectable-form-main-column{max-width:38.75rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TerminatorFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-configuration', standalone: false, 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 ? 'Terminator Details' : 'Create Terminator')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"terminator-form-container projectable-form-container\">\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column one-half\">\n        <lib-form-field-container\n          [title]=\"'Service'\"\n          [contentStyle]=\"'z-index: 10003'\"\n          >\n          <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedServiceNamedAttribute\" [disabled]=\"true\"/>\n          <!--<lib-tag-selector\n          [(selectedNamedAttributes)]=\"svc.selectedServiceNamedAttributes\"\n          [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n          [placeholder]=\"'Select a service'\"\n          (addNamedAttribute)=\"serviceAttributeChanged($event)\"\n          (namedAttributeRemoved)=\"serviceAttributeChanged()\"\n        ></lib-tag-selector>-->\n      </lib-form-field-container>\n      <lib-form-field-container\n        [title]=\"'Router'\"\n        [contentStyle]=\"'z-index: 10002'\"\n        >\n        <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedRouterNamedAttribute\" [disabled]=\"true\"/>\n        <!--<lib-tag-selector\n        [(selectedNamedAttributes)]=\"svc.selectedRouterNamedAttributes\"\n        [availableNamedAttributes]=\"svc.routerNamedAttributes\"\n        [placeholder]=\"'Select a router'\"\n        (addNamedAttribute)=\"routerAttributeChanged($event)\"\n        (namedAttributeRemoved)=\"routerAttributeChanged()\"\n      ></lib-tag-selector>-->\n    </lib-form-field-container>\n    <lib-form-field-container\n      [title]=\"'Identity'\"\n      [contentStyle]=\"'z-index: 10001'\"\n      >\n      <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedIdentityNamedAttribute\" [disabled]=\"true\"/>\n      <!--<lib-tag-selector\n      [(selectedNamedAttributes)]=\"svc.selectedIdentityNamedAttributes\"\n      [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n      [placeholder]=\"'Select an identity'\"\n      (addNamedAttribute)=\"identityAttributeChanged($event)\"\n      (namedAttributeRemoved)=\"identityAttributeChanged()\"\n    ></lib-tag-selector>-->\n  </lib-form-field-container>\n</div>\n<div class=\"form-group-column one-half\">\n  <lib-form-field-container\n    [title]=\"'Address'\"\n    [contentStyle]=\"'z-index: 1001'\"\n    >\n    <input class=\"form-field-input read-only\" [disabled]=\"true\" [(ngModel)]=\"formData.address\"/>\n  </lib-form-field-container>\n  <lib-form-field-container\n    [showHeader]=\"false\"\n    [layout]=\"'row'\"\n    [contentStyle]=\"'z-index: 1001'\"\n    >\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Binding</span>\n      <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.binding\"/>\n    </div>\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Identity Secret</span>\n      <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.identitySecret\"/>\n    </div>\n  </lib-form-field-container>\n  <lib-form-field-container\n    [layout]=\"'row'\"\n    [showHeader]=\"false\"\n    >\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Hosting Cost</span>\n      <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.cost\" type=\"number\"/>\n    </div>\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Precedence</span>\n      <select\n        [(ngModel)]=\"formData.precedence\"\n        [disabled]=\"true\"\n        id=\"hostingPrecedence\"\n        class=\"form-field-dropdown read-only\"\n        >\n        <option value=\"default\">Default</option>\n        <option value=\"required\">Required</option>\n        <option value=\"failed\">Failed</option>\n      </select>\n    </div>\n  </lib-form-field-container>\n</div>\n</div>\n@if (formView === 'raw') {\n  <div class=\"form-group-column\">\n    @if (formData) {\n      <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n    }\n  </div>\n}\n</div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".terminator-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}::ng-deep .terminator-form-container select:disabled,::ng-deep .terminator-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}@media (max-width: 1524px){.terminator-form-container .projectable-form-main-column{max-width:38.75rem}}\n"] }]
+            args: [{ selector: 'lib-configuration', standalone: false, 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 ? 'Terminator Details' : 'Create Terminator')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"terminator-form-container projectable-form-container\">\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column one-half\">\n        <lib-form-field-container\n          [title]=\"'Service'\"\n          [contentStyle]=\"'z-index: 10003'\"\n          >\n          <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedServiceNamedAttribute\" [disabled]=\"true\"/>\n          <!--<lib-tag-selector\n          [(selectedNamedAttributes)]=\"svc.selectedServiceNamedAttributes\"\n          [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n          [placeholder]=\"'Select a service'\"\n          (addNamedAttribute)=\"serviceAttributeChanged($event)\"\n          (namedAttributeRemoved)=\"serviceAttributeChanged()\"\n        ></lib-tag-selector>-->\n      </lib-form-field-container>\n      <lib-form-field-container\n        [title]=\"'Router'\"\n        [contentStyle]=\"'z-index: 10002'\"\n        >\n        <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedRouterNamedAttribute\" [disabled]=\"true\"/>\n        <!--<lib-tag-selector\n        [(selectedNamedAttributes)]=\"svc.selectedRouterNamedAttributes\"\n        [availableNamedAttributes]=\"svc.routerNamedAttributes\"\n        [placeholder]=\"'Select a router'\"\n        (addNamedAttribute)=\"routerAttributeChanged($event)\"\n        (namedAttributeRemoved)=\"routerAttributeChanged()\"\n      ></lib-tag-selector>-->\n    </lib-form-field-container>\n    <lib-form-field-container\n      [title]=\"'Identity'\"\n      [contentStyle]=\"'z-index: 10001'\"\n      >\n      <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedIdentityNamedAttribute\" [disabled]=\"true\"/>\n      <!--<lib-tag-selector\n      [(selectedNamedAttributes)]=\"svc.selectedIdentityNamedAttributes\"\n      [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n      [placeholder]=\"'Select an identity'\"\n      (addNamedAttribute)=\"identityAttributeChanged($event)\"\n      (namedAttributeRemoved)=\"identityAttributeChanged()\"\n    ></lib-tag-selector>-->\n  </lib-form-field-container>\n</div>\n<div class=\"form-group-column one-half\">\n  <lib-form-field-container\n    [title]=\"'Address'\"\n    [contentStyle]=\"'z-index: 1001'\"\n    >\n    <input class=\"form-field-input read-only\" [disabled]=\"true\" [(ngModel)]=\"formData.address\"/>\n  </lib-form-field-container>\n  <lib-form-field-container\n    [showHeader]=\"false\"\n    [layout]=\"'row'\"\n    [contentStyle]=\"'z-index: 1001'\"\n    >\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Binding</span>\n      <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.binding\"/>\n    </div>\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Identity Secret</span>\n      <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.identitySecret\"/>\n    </div>\n  </lib-form-field-container>\n  <lib-form-field-container\n    [layout]=\"'row'\"\n    [showHeader]=\"false\"\n    >\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Hosting Cost</span>\n      <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.cost\" type=\"number\"/>\n    </div>\n    <div class=\"form-field-label-container\">\n      <span class=\"form-field-title\">Precedence</span>\n      <select\n        [(ngModel)]=\"formData.precedence\"\n        [disabled]=\"true\"\n        id=\"hostingPrecedence\"\n        class=\"form-field-dropdown read-only\"\n        >\n        <option value=\"default\">Default</option>\n        <option value=\"required\">Required</option>\n        <option value=\"failed\">Failed</option>\n      </select>\n    </div>\n  </lib-form-field-container>\n</div>\n</div>\n@if (formView === 'raw') {\n  <div class=\"form-group-column\">\n    @if (formData) {\n      <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n    }\n  </div>\n}\n</div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".terminator-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}::ng-deep .terminator-form-container select:disabled,::ng-deep .terminator-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}@media (max-width: 1524px){.terminator-form-container .projectable-form-main-column{max-width:38.75rem}}\n"] }]
         }], ctorParameters: () => [{ type: TerminatorFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SHAREDZ_EXTENSION]
@@ -10742,6 +10766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 class Link {
     constructor() {
+        this.statusReason = null;
         this.linkType = 'inferred';
     }
 }
@@ -10829,6 +10854,7 @@ class IdentityServicePathHelper {
         srNode.id = selectedServiceOb.id;
         srNode.name = selectedServiceOb.name;
         srNode.intercept = serviceConfigAlias(serviceConfigs);
+        buildServiceDetails(srNode, selectedServiceOb, serviceConfigs);
         srNode.type = 'Config Service';
         srNode.group = '4';
         srNode.status = '1';
@@ -10932,6 +10958,36 @@ class IdentityServicePathHelper {
                 }
             }
         });
+        // Per-host connectivity is derived from the identity's own controller-reported state
+        // (hasEdgeRouterConnection / edgeRouterConnectionStatus -> routerConnection/apiSession),
+        // NOT from terminators: real ziti terminators carry no hosting-identity id (identity:"",
+        // no hostId), so a terminator can't be mapped back to the host that created it. Terminator
+        // COUNT remains a service-level health hint only.
+        // Annotate node connectivity so the renderer can pick a broken icon and the tooltip can
+        // explain the cause. A hosting tunneler that is enrolled but unreachable, or expected to
+        // host (Bind policy) yet has no terminator, is "broken".
+        group3Nodes.forEach((node) => {
+            if (node.status === 'Un-Registered') {
+                node.brokenCause = 'misconfigured';
+                node.connectivity = 'Not enrolled';
+            }
+            else if (node.apiSession === 'No' || node.routerConnection === 'No') {
+                node.brokenCause = 'tunneler-unreachable';
+                node.connectivity = 'Configured but not connected (offline or blocked)';
+            }
+            else {
+                node.connectivity = 'Connected';
+            }
+        });
+        if (endpointNodeOb && endpointNodeOb.status !== 'Un-Registered') {
+            if (endpointNodeOb.apiSession === 'No' || endpointNodeOb.routerConnection === 'No') {
+                endpointNodeOb.brokenCause = 'tunneler-unreachable';
+                endpointNodeOb.connectivity = 'Configured but not connected (offline or blocked)';
+            }
+            else {
+                endpointNodeOb.connectivity = 'Connected';
+            }
+        }
         // Build fabric link lookup
         const fabricLinkSet = new Set();
         fabricLinks.forEach((link) => {
@@ -10950,8 +11006,7 @@ class IdentityServicePathHelper {
                     lnk.sourceName = endpointNodeOb.name;
                     lnk.target = nd.id;
                     lnk.targetName = nd.name;
-                    lnk.status = getEndpointToRouterLinkState(endpointNodeOb, nd);
-                    lnk.weight = getWeight(lnk.status);
+                    applyLinkState(lnk, getEndpointToRouterLinkState(endpointNodeOb, nd));
                     lnk.linkType = activeCircuitHops.has(hopKey(endpointNodeOb.id, nd.id))
                         ? 'active-circuit' : 'endpoint-connection';
                     rootOb.addLink(lnk);
@@ -11055,11 +11110,17 @@ class IdentityServicePathHelper {
             lnk.target = r2.id;
             lnk.targetName = r2.name;
             lnk.linkType = isActiveCircuit ? 'active-circuit' : 'fabric-link';
-            lnk.status = (r1.online === 'Yes' || r1.status === 'PROVISIONED') &&
-                (r2.online === 'Yes' || r2.status === 'PROVISIONED') ? 1 : 0;
-            if (isActiveCircuit)
-                lnk.status = 1;
-            lnk.weight = getWeight(lnk.status);
+            const r1Up = r1.online === 'Yes' || r1.status === 'PROVISIONED';
+            const r2Up = r2.online === 'Yes' || r2.status === 'PROVISIONED';
+            if (isActiveCircuit) {
+                applyLinkState(lnk, { state: 1, reason: null });
+            }
+            else if (!r1Up || !r2Up) {
+                applyLinkState(lnk, { state: 2, reason: 'router-down' });
+            }
+            else {
+                applyLinkState(lnk, { state: 1, reason: null });
+            }
             rootOb.addLink(lnk);
         });
         // If no fabric links connect dial to host side, add inferred connections
@@ -11108,8 +11169,7 @@ class IdentityServicePathHelper {
                             lnk.sourceName = routerNode.name;
                             lnk.target = hostNode.id;
                             lnk.targetName = hostNode.name;
-                            lnk.status = getEndpointToRouterLinkState(hostNode, routerNode);
-                            lnk.weight = getWeight(lnk.status);
+                            applyLinkState(lnk, getEndpointToRouterLinkState(hostNode, routerNode));
                             lnk.linkType = activeCircuitHops.has(hopKey(routerNode.id, hostNode.id))
                                 ? 'active-circuit' : 'endpoint-connection';
                             rootOb.addLink(lnk);
@@ -11126,8 +11186,7 @@ class IdentityServicePathHelper {
                         lnk.sourceName = routerNode.name;
                         lnk.target = hostNode.id;
                         lnk.targetName = hostNode.name;
-                        lnk.status = getEndpointToRouterLinkState(hostNode, routerNode);
-                        lnk.weight = getWeight(lnk.status);
+                        applyLinkState(lnk, getEndpointToRouterLinkState(hostNode, routerNode));
                         lnk.linkType = activeCircuitHops.has(hopKey(routerNode.id, hostNode.id))
                             ? 'active-circuit'
                             : (lnk.status === 1 ? 'endpoint-connection' : 'inferred');
@@ -11150,8 +11209,7 @@ class IdentityServicePathHelper {
                         lnk.sourceName = dialRouter.name;
                         lnk.target = hostNode.id;
                         lnk.targetName = hostNode.name;
-                        lnk.status = getEndpointToRouterLinkState(hostNode, dialRouter);
-                        lnk.weight = getWeight(lnk.status);
+                        applyLinkState(lnk, getEndpointToRouterLinkState(hostNode, dialRouter));
                         lnk.linkType = lnk.status === 1 ? 'endpoint-connection' : 'inferred';
                         rootOb.addLink(lnk);
                     }
@@ -11178,8 +11236,7 @@ class IdentityServicePathHelper {
                 lnk.target = serviceNode.id;
                 lnk.targetName = serviceNode.name;
                 lnk.weight = 1;
-                lnk.status = getServiceToEndpointLinkState(hostNode, serviceNode);
-                lnk.weight = getWeight(lnk.status);
+                applyLinkState(lnk, getServiceToEndpointLinkState(hostNode, serviceNode));
                 lnk.linkType = activeCircuitHops.has(hopKey(hostNode.id, serviceNode.id))
                     ? 'active-circuit' : 'endpoint-connection';
                 rootOb.addLink(lnk);
@@ -11199,6 +11256,28 @@ class IdentityServicePathHelper {
                 return false;
             return true;
         });
+        // Collapse parallel links between the same node pair. A router that is on BOTH the dial
+        // and host side can otherwise produce two links to the same node — e.g. an 'available'
+        // inferred link and a 'router-down' link — which overlap and render as mixed dashed/dotted.
+        // Keep the single most-significant link per pair.
+        const linkSeverity = (l) => {
+            if (l.linkType === 'active-circuit')
+                return 4; // live traffic wins
+            if (l.status === 2)
+                return 3; // broken (router-down / tunneler-unreachable)
+            if (l.status === 1)
+                return 2; // connected
+            return 1; // available / inferred
+        };
+        const bestLinkByPair = new Map();
+        rootOb.links.forEach((lnk) => {
+            const key = [lnk.source, lnk.target].sort().join('::');
+            const existing = bestLinkByPair.get(key);
+            if (!existing || linkSeverity(lnk) > linkSeverity(existing)) {
+                bestLinkByPair.set(key, lnk);
+            }
+        });
+        rootOb.links = Array.from(bestLinkByPair.values());
         return rootOb;
     }
     /**
@@ -11236,6 +11315,7 @@ class IdentityServicePathHelper {
         srNode.id = selectedServiceOb.id;
         srNode.name = selectedServiceOb.name;
         srNode.intercept = serviceConfigAlias(serviceConfigs);
+        buildServiceDetails(srNode, selectedServiceOb, serviceConfigs);
         srNode.type = 'Config Service';
         srNode.group = '4';
         srNode.status = '1';
@@ -11335,8 +11415,7 @@ class IdentityServicePathHelper {
                 lnk.sourceName = endpointNodeOb.name;
                 lnk.target = nd.id;
                 lnk.targetName = nd.name;
-                lnk.status = getEndpointToRouterLinkState(endpointNodeOb, nd);
-                lnk.weight = getWeight(lnk.status);
+                applyLinkState(lnk, getEndpointToRouterLinkState(endpointNodeOb, nd));
                 lnk.linkType = 'endpoint-connection';
                 rootOb.addLink(lnk);
             }
@@ -11361,9 +11440,10 @@ class IdentityServicePathHelper {
                                 nd2.status === 'PROVISIONED' &&
                                 nd2.online === 'Yes'
                                 ? 1 : 0;
+                        lnk.statusReason = lnk.status === 1 ? null : 'router-down';
                     }
                     else {
-                        lnk.status = getEndpointToRouterLinkState(nd2, nd1);
+                        applyLinkState(lnk, getEndpointToRouterLinkState(nd2, nd1));
                     }
                     lnk.weight = getWeight(lnk.status);
                     lnk.linkType = 'inferred';
@@ -11386,8 +11466,7 @@ class IdentityServicePathHelper {
                     lnk.status = foundNd.online === 'Yes' ? 1 : -1;
                 }
                 else {
-                    lnk.status = getServiceToEndpointLinkState(group3Nodes[k1], group4Nodes[k0]);
-                    lnk.weight = getWeight(lnk.status);
+                    applyLinkState(lnk, getServiceToEndpointLinkState(group3Nodes[k1], group4Nodes[k0]));
                 }
                 lnk.linkType = 'endpoint-connection';
                 rootOb.addLink(lnk);
@@ -11455,6 +11534,44 @@ function serviceConfigAlias(configs) {
     });
     return intercept;
 }
+// Annotates the service node with labeled, purpose-specific details so the hover card can explain
+// what each address is for and surface the service's configuration. Handles services that are
+// intercept+host, host-only, intercept-only, or SDK-defined (no address configs at all).
+function buildServiceDetails(srNode, service, configs) {
+    srNode.encryptionRequired = service ? service.encryptionRequired : undefined;
+    srNode.terminatorStrategy = service ? service.terminatorStrategy : undefined;
+    srNode.serviceRoleAttributes = _.isArray(service && service.roleAttributes) ? service.roleAttributes : [];
+    srNode.permissions = _.isArray(service && service.permissions) ? service.permissions : [];
+    const fmtPorts = (portRanges, port) => {
+        if (_.isArray(portRanges)) {
+            return portRanges.map((r) => (r.low === r.high ? `${r.low}` : `${r.low}-${r.high}`));
+        }
+        if (port !== undefined && port !== null)
+            return [String(port)];
+        return [];
+    };
+    const fmtEndpoint = (addrs, ports, protos) => {
+        const a = (addrs || []).filter(Boolean).join(', ');
+        const detail = [(protos || []).join('/'), (ports || []).join(',')].filter(Boolean).join('/');
+        return detail ? `${a}  ${detail}` : a;
+    };
+    const types = [];
+    _.isArray(configs) && configs.forEach((conf) => {
+        const t = ((conf && conf.configType && conf.configType.name) || (conf && conf.type) || '').toString();
+        const d = (conf && conf.data) || {};
+        if (t)
+            types.push(t);
+        if (t.indexOf('intercept') === 0) {
+            const addrs = d.addresses || (d.address ? [d.address] : []);
+            srNode.interceptSummary = fmtEndpoint(addrs, fmtPorts(d.portRanges, d.port), d.protocols || (d.protocol ? [d.protocol] : []));
+        }
+        else if (t.indexOf('host') === 0) {
+            const addrs = d.address ? [d.address] : (d.forwardAddress ? ['(forwarded)'] : []);
+            srNode.hostSummary = fmtEndpoint(addrs, fmtPorts(d.allowedPortRanges, d.port), d.protocol ? [d.protocol] : (d.protocols || (d.forwardProtocol ? ['(forwarded)'] : [])));
+        }
+    });
+    srNode.configTypeNames = types;
+}
 function findEndpoint(endpointId, endpoints) {
     if (endpointId === null) {
         return null;
@@ -11474,7 +11591,10 @@ function createEndpoint(ePoint) {
     node.id = ePoint.id;
     node.name = ePoint.name;
     node.type = 'Identity';
-    if (_.has(ePoint, 'edgeRouterConnectionStatus')) {
+    // Prefer the explicit booleans, which controllers populate reliably. Only fall back to the
+    // edgeRouterConnectionStatus string when it actually carries a value — note its key can be
+    // PRESENT-BUT-NULL, so `_.has` is not a safe guard (that bug made every identity look "Yes").
+    if (ePoint.edgeRouterConnectionStatus != null) {
         node.routerConnection = ePoint.edgeRouterConnectionStatus === 'offline' ? 'No' : 'Yes';
         node.apiSession = node.routerConnection;
     }
@@ -11484,7 +11604,27 @@ function createEndpoint(ePoint) {
     }
     node.os = ePoint.envInfo ? ePoint.envInfo.os : '';
     node.mfaEnabled = ePoint.isMfaEnabled;
-    node.status = ePoint.envInfo && ePoint.envInfo.os !== null ? 'Registered' : 'Un-Registered';
+    // "Registered" means the identity has enrolled and run (it has reported env info). Guard on a
+    // truthy os: the controller returns envInfo as an empty object {} for a created-but-never-
+    // enrolled identity, and `{}.os !== null` is true — which previously mis-classed it Registered.
+    node.status = (ePoint.envInfo && ePoint.envInfo.os) ? 'Registered' : 'Un-Registered';
+    // Node status indicator. Mirrors the controller's edgeRouterConnectionStatus enum
+    // (online | offline | unknown) when present, falling back to the hasEdgeRouterConnection
+    // boolean otherwise. An identity that hasn't enrolled is "unenrolled" (its own state, not an
+    // error). There is no "error" value in the API, so we don't synthesize one.
+    if (node.status === 'Un-Registered') {
+        node.connState = 'unenrolled';
+    }
+    else {
+        const ers = ePoint.edgeRouterConnectionStatus;
+        if (ers === 'online' || ers === 'offline' || ers === 'unknown') {
+            node.connState = ers;
+        }
+        else {
+            node.connState = (ePoint.hasEdgeRouterConnection === true || ePoint.hasApiSession === true)
+                ? 'online' : 'offline';
+        }
+    }
     return node;
 }
 function createERNode(erouter) {
@@ -11509,38 +11649,58 @@ function createFabricRouterNode(fabricRouter, routerType) {
     nodeOb.routerType = routerType;
     return nodeOb;
 }
+// Determines the state of an identity/tunneler <-> edge-router link.
+// A router-reported problem (offline/errored router) is distinguished from a tunneler-side
+// problem (enrolled identity that cannot establish a connection to the router, e.g. blocked
+// by a firewall) so the visualizer can render the two causes differently.
 function getEndpointToRouterLinkState(endpointNode, routerNode) {
-    let linkstate = -1;
-    if (routerNode.status === 'ERROR') {
-        linkstate = 2; // router is broken — warning
+    if (routerNode.status === 'ERROR' || routerNode.online === 'No') {
+        return { state: 2, reason: 'router-down' }; // router-reported issue
     }
-    else if (endpointNode.status === 'Un-Registered') {
-        linkstate = -1;
-    }
-    else if (endpointNode.apiSession === 'No' || endpointNode.routerConnection === 'No') {
-        // No session or no connection = offline, not error
-        linkstate = -1;
+    if (endpointNode.status === 'Un-Registered') {
+        // Never enrolled — the path through this identity can't carry traffic, so it's not
+        // "available". Marked unavailable (the node still shows the specific "Not enrolled" cause).
+        return { state: 2, reason: 'misconfigured' };
     }
-    else if (routerNode.online === 'Yes' && endpointNode.routerConnection === 'Yes') {
-        linkstate = 1;
+    if (endpointNode.apiSession === 'No' || endpointNode.routerConnection === 'No') {
+        // Enrolled but cannot reach the edge router — tunneler-side broken (was previously
+        // shown as a benign "available" link, which is exactly what we're fixing).
+        return { state: 2, reason: 'tunneler-unreachable' };
     }
-    else {
-        linkstate = -1;
+    if (routerNode.online === 'Yes' && endpointNode.routerConnection === 'Yes') {
+        return { state: 1, reason: null }; // active/available
     }
-    return linkstate;
+    return { state: -1, reason: null };
 }
-function getServiceToEndpointLinkState(endpointNode, serviceNode) {
-    // status 1 = active, -1 = offline/available, 2 = warning/misconfigured
-    if (endpointNode.status === 'Un-Registered') {
-        return 2; // hosting identity never enrolled — misconfigured
+// Determines the state of a hosting identity/router <-> service link.
+// hasTerminator is the authoritative signal that the host actually established its hosting
+// connection: a Bind policy makes a host "expected", but only a terminator proves it connected.
+function getServiceToEndpointLinkState(hostNode, serviceNode) {
+    const isRouter = !!(hostNode.type && String(hostNode.type).includes('Router'));
+    if (isRouter) {
+        if (hostNode.status === 'ERROR' || hostNode.online === 'No') {
+            return { state: 2, reason: 'router-down' };
+        }
+        return { state: 1, reason: null };
+    }
+    // Identity host (tunneler). Broken-detection uses the host's own connection state, since
+    // terminators can't be attributed to a specific host (see note in getEndpointGraphObj).
+    if (hostNode.status === 'Un-Registered') {
+        return { state: 2, reason: 'misconfigured' }; // never enrolled
     }
-    else if (endpointNode.apiSession === 'No' || endpointNode.routerConnection === 'No') {
-        return -1; // just offline
+    if (hostNode.apiSession === 'No' || hostNode.routerConnection === 'No') {
+        return { state: 2, reason: 'tunneler-unreachable' }; // enrolled but unreachable (e.g. firewall)
     }
-    else if (endpointNode.status === 'Registered' && endpointNode.routerConnection === 'Yes') {
-        return 1; // active
+    if (hostNode.status === 'Registered' && hostNode.routerConnection === 'Yes') {
+        return { state: 1, reason: null }; // active/available
     }
-    return -1;
+    return { state: -1, reason: null };
+}
+// Applies a computed LinkState to a link, including its derived weight.
+function applyLinkState(lnk, ls) {
+    lnk.status = ls.state;
+    lnk.statusReason = ls.reason;
+    lnk.weight = getWeight(ls.state);
 }
 function getWeight(linkState) {
     return linkState === -1 ? 5 : 1;
@@ -11747,10 +11907,16 @@ class IdentityServicePathComponent {
         this.isDarkMode = false;
         this.refreshRotate = false;
         this.closeRotate = true;
+        this.lastRenderContext = null;
+        this.zoomBehavior = null;
+        this.hasInitialFit = false;
+        this.viewBoxWidth = 1050;
+        this.viewBoxHeight = 500;
         this.filterText = 'fetching services..';
         this.noSearchResults = false;
         this.autocompleteOptions = [];
         this.fullScreen = false;
+        this.legendCollapsed = false;
         this.endpoints = [];
         this.selectedService = '';
         this.doEndpointHasAppwans = false;
@@ -11901,6 +12067,8 @@ class IdentityServicePathComponent {
         this.serviceChanged();
     }
     serviceChanged() {
+        // Service change implies new topology — re-fit on next render.
+        this.hasInitialFit = false;
         this.isLoading = true;
         const allPromises = [];
         let serviceOb = null;
@@ -12013,12 +12181,57 @@ class IdentityServicePathComponent {
                             });
                         }
                     }
+                    this.lastRenderContext = {
+                        bindIdnetities,
+                        serviceOb,
+                        serviceConfigs: service_configs,
+                        hostEdgeRouters,
+                    };
                     this.startVisProcess(bindIdnetities, serviceOb, service_configs, hostEdgeRouters, serviceTerminators, serviceCircuits);
                     this.isLoading = false;
                 });
             });
         });
     }
+    async refreshFabricData() {
+        if (this.refreshRotate) {
+            return;
+        }
+        this.refreshRotate = true;
+        try {
+            const results = await Promise.allSettled([
+                this.mapDataService.fetchRouters(),
+                this.mapDataService.fetchLinks(),
+                this.mapDataService.fetchCircuits(),
+                this.mapDataService.fetchTerminators(),
+            ]);
+            const [routersResult, linksResult, circuitsResult, terminatorsResult] = results;
+            const allFailed = results.every((r) => r.status === 'rejected');
+            this.fabricApiAvailable = !allFailed;
+            if (routersResult.status === 'fulfilled') {
+                this.allRouters = routersResult.value.routers || [];
+                this.routerTypesMap = routersResult.value.routerTypes || new Map();
+            }
+            if (linksResult.status === 'fulfilled') {
+                this.allLinks = linksResult.value || [];
+            }
+            if (circuitsResult.status === 'fulfilled') {
+                this.allCircuits = circuitsResult.value || [];
+            }
+            if (terminatorsResult.status === 'fulfilled') {
+                this.allTerminators = terminatorsResult.value || [];
+            }
+            if (this.lastRenderContext) {
+                const { bindIdnetities, serviceOb, serviceConfigs, hostEdgeRouters } = this.lastRenderContext;
+                const serviceTerminators = this.allTerminators.filter((t) => (t.serviceId || t.service?.id || t.service) === serviceOb.id);
+                const serviceCircuits = this.allCircuits.filter((c) => c.service?.id === serviceOb.id);
+                this.startVisProcess(bindIdnetities, serviceOb, serviceConfigs, hostEdgeRouters, serviceTerminators, serviceCircuits);
+            }
+        }
+        finally {
+            this.refreshRotate = false;
+        }
+    }
     addItemToArray(bindIdnetities, ob) {
         if (!bindIdnetities.find((item) => item.id === ob.id)) {
             bindIdnetities.push(ob);
@@ -12076,21 +12289,42 @@ class IdentityServicePathComponent {
         this.dialogRef.close();
     }
     initTopoView() {
-        const vbWidth = 1050;
-        const vbHeight = 500;
+        const vbWidth = this.viewBoxWidth;
+        const vbHeight = this.viewBoxHeight;
         const colors = d3.scaleOrdinal(d3.schemeCategory10);
         const tooltip = d3.select('#epTooltip');
-        let svg = d3.select('#IdentityTopology'), node, link;
-        const handleZoom = (e) => svg.attr('transform', e.transform);
-        const zoom = d3.zoom().on('zoom', handleZoom);
+        // Hide is deferred so the cursor can travel from the node into the popover (to read/select
+        // its content); entering the popover cancels the hide, leaving it dismisses it.
+        let tooltipHideTimer = null;
+        tooltip.on('mouseenter', () => clearTimeout(tooltipHideTimer));
+        tooltip.on('mouseleave', () => tooltip.style('display', 'none'));
+        const svg = d3.select('#IdentityTopology');
+        const svgEl = svg.node();
+        let node, link;
         svg
             .attr('width', '100%')
             .attr('height', '100%')
-            // .call(zoom)
             .attr('viewBox', '-20 -20 ' + (vbWidth + 40) + ' ' + vbHeight)
-            .attr('preserveAspectRatio', 'xMidYMin meet')
-            .append('g');
+            .attr('preserveAspectRatio', 'xMidYMin meet');
+        // Capture any pre-existing zoom transform (from previous render / user gestures)
+        // so we can re-apply it after recreating the content group.
+        const existingTransform = svgEl
+            ? d3.zoomTransform(svgEl)
+            : d3.zoomIdentity;
         svg.selectAll('g').remove();
+        // Wrap all topology content in a <g> so zoom transforms have something to translate.
+        const contentG = svg.append('g').attr('class', 'topology-content');
+        contentG.attr('transform', existingTransform.toString());
+        const handleZoom = (e) => {
+            contentG.attr('transform', e.transform);
+        };
+        if (!this.zoomBehavior) {
+            this.zoomBehavior = d3.zoom().scaleExtent([0.1, 5]).on('zoom', handleZoom);
+        }
+        else {
+            this.zoomBehavior.on('zoom', handleZoom);
+        }
+        svg.call(this.zoomBehavior);
         const simulation = d3
             .forceSimulation()
             .force('link', d3
@@ -12104,47 +12338,49 @@ class IdentityServicePathComponent {
             .force('center', d3.forceCenter(vbWidth / 2, vbHeight / 2));
         const links = this.graphJsonObj.links;
         const nodes = this.graphJsonObj.nodes;
-        link = svg
+        link = contentG
             .selectAll('g.line.line')
             .data(links)
             .enter()
             .append('g')
             .attr('class', 'link')
             .attr('marker-end', 'url(#arrowhead)');
+        // Three link styles, distinguishable by pattern (color-blind-safe) and color. A single
+        // "broken" style covers every failure — which END is the problem is read from the node
+        // colors (an offline router vs an unreachable/un-enrolled endpoint), so the link needn't
+        // re-encode the cause:
+        //   active circuit -> green solid
+        //   available      -> gray dashed
+        //   broken         -> red dotted
+        const isBroken = (d) => d.status === 2;
         link
             .append('line')
             .style('stroke-width', function (d) {
-            if (d.linkType === 'active-circuit') {
+            if (d.linkType === 'active-circuit')
                 return 1.5;
-            }
+            if (isBroken(d))
+                return 2.25;
             return 1.25;
+        })
+            .style('stroke-linecap', function (d) {
+            // Rounded caps turn the tight broken dash array into actual dots.
+            return isBroken(d) ? 'round' : 'butt';
         })
             .style('stroke', function (d) {
-            if (d.linkType === 'active-circuit') {
+            if (d.linkType === 'active-circuit')
                 return '#00cd13';
-            }
+            if (isBroken(d))
+                return '#e6432e';
             return '#8a8f9a';
         })
             .style('stroke-dasharray', function (d) {
-            if (d.linkType === 'active-circuit') {
-                return null;
-            }
-            return '5,5';
-        });
-        link.each(function (d, i) {
-            const _this = d3.select(this);
-            if (d.status === 2) {
-                // Warning/misconfigured — show link-cut icon
-                _this
-                    .append('image')
-                    .attr('xlink:href', function () {
-                    return 'assets/images/visualizer/link-cut.png';
-                })
-                    .attr('width', '20')
-                    .attr('height', '24');
-            }
+            if (d.linkType === 'active-circuit')
+                return null; // solid
+            if (isBroken(d))
+                return '0.5,6'; // dotted
+            return '5,5'; // available: dashed
         });
-        node = svg
+        node = contentG
             .selectAll('.node')
             .data(nodes)
             .enter()
@@ -12154,61 +12390,73 @@ class IdentityServicePathComponent {
             .append('image')
             .attr('xlink:href', function (d) {
             const routerImagePath = 'assets/images/visualizer/Routers.png';
-            const nonProvisionedRouterImagePath = 'assets/images/visualizer/ER.png';
-            const errRouterImagePath = 'assets/images/visualizer/error_er.png';
-            const errEndpointImagePath = 'assets/images/visualizer/host-error.png';
             const unregisteredEndpointImagePath = 'assets/images/visualizer/host_unregistered.png';
             const endPointPath = 'assets/images/visualizer/host.png';
-            if (d.type.includes('Identity') && d.status === 'Un-Registered') {
-                return unregisteredEndpointImagePath;
-            }
-            else if (d.type.includes('Identity') && d.routerConnection === 'No') {
-                return unregisteredEndpointImagePath;
-            }
-            else if (d.type.includes('Identity')) {
+            if (d.type.includes('Identity')) {
+                // Un-enrolled identities get the distinct "unregistered" icon; otherwise the normal
+                // host icon — the status dot below conveys online/offline/unknown.
+                if (d.connState === 'unenrolled' || d.status === 'Un-Registered') {
+                    return unregisteredEndpointImagePath;
+                }
                 return endPointPath;
             }
-            else if (d.type.includes('Router') &&
-                (d.status === 'ERROR' || d.online === 'No')) {
-                return errRouterImagePath;
-            }
-            else if (d.type.includes('Router') && d.status === 'PROVISIONED') {
+            if (d.type.includes('Router')) {
+                // One base router icon; the status dot below carries online/offline (the baked dot in
+                // the PNG is covered by that overlay).
                 return routerImagePath;
             }
-            else if (d.type.includes('Router')) {
-                return nonProvisionedRouterImagePath;
-            }
             if (d.group === '4') {
                 return 'assets/images/visualizer/service.png';
             }
-            else {
-                return '';
-            }
+            return '';
         })
             .attr('x', -25)
             .attr('y', -25)
             .attr('width', '40')
             .attr('height', '40');
-        // Add status circle overlay for identity nodes
-        node.filter((d) => d.type.includes('Identity'))
+        // Status dot for identities AND routers. Colors a single dot by the node's real state
+        // (no "error" — that isn't a value the API exposes). Routers use a larger dot positioned to
+        // cover the status dot baked into the router PNG.
+        const statusColor = (d) => {
+            if (d.type.includes('Router')) {
+                return (d.online === 'No' || d.status === 'ERROR') ? '#8a8f9a' : '#08dc5a';
+            }
+            switch (d.connState) {
+                case 'online': return '#08dc5a'; // green
+                case 'unknown': return '#e6a700'; // amber — controller can't determine
+                case 'unenrolled': return '#ffffff'; // hollow (gray ring below)
+                case 'offline':
+                default: return '#8a8f9a'; // gray
+            }
+        };
+        // Positioned to sit directly over the dot baked into each icon PNG (≈ the icon's top-right),
+        // sized just large enough to cover it (the white halo masks the baked dot's soft glow).
+        node.filter((d) => d.type.includes('Identity') || d.type.includes('Router'))
             .append('circle')
-            .attr('cx', 10)
-            .attr('cy', -20)
-            .attr('r', 4.5)
-            .attr('fill', function (d) {
-            if (d.routerConnection === 'Yes' || d.apiSession === 'Yes')
-                return '#08dc5a';
-            return '#8a8f9a';
-        })
-            .attr('stroke', 'white')
-            .attr('stroke-width', 1.5);
-        // Symmetric labels — truncated, centered below each node
+            .attr('cx', (d) => d.type.includes('Router') ? 6 : 8)
+            .attr('cy', (d) => d.type.includes('Router') ? -20 : -19)
+            .attr('r', 5)
+            .attr('fill', (d) => statusColor(d))
+            // Un-enrolled identities render as a hollow ring (gray border); everything else gets a
+            // white separator ring against the icon.
+            .attr('stroke', (d) => (!d.type.includes('Router') && d.connState === 'unenrolled') ? '#8a8f9a' : 'white')
+            .attr('stroke-width', 2);
+        // Node labels: for compound pipe-delimited names ("<networkId>|<identityId>|Human Name")
+        // show only the last segment so the canvas stays readable; the full name remains in the
+        // hover tooltip.
+        const getDisplayLabel = (fullName) => {
+            if (!fullName)
+                return '';
+            const segments = fullName.split('|').map((s) => s.trim()).filter((s) => s.length > 0);
+            const candidate = segments.length > 0 ? segments[segments.length - 1] : fullName;
+            const maxLen = 28;
+            return candidate.length > maxLen
+                ? candidate.substring(0, maxLen) + '…'
+                : candidate;
+        };
         node.each(function (d) {
             const g = d3.select(this);
-            const maxLen = 50;
-            const displayName = d.name && d.name.length > maxLen
-                ? d.name.substring(0, maxLen) + '\u2026'
-                : d.name;
+            const displayName = getDisplayLabel(d.name);
             const text = g.append('text')
                 .attr('x', 0)
                 .attr('y', 28)
@@ -12311,10 +12559,13 @@ class IdentityServicePathComponent {
         } // end of ticked
         function removeTooltip() {
             if (tooltip) {
-                tooltip.style('display', 'none');
+                // Defer the hide so the user can move onto the popover; mouseenter (above) cancels it.
+                clearTimeout(tooltipHideTimer);
+                tooltipHideTimer = setTimeout(() => tooltip.style('display', 'none'), 220);
             }
         }
         function drawTooltip(event, d, endpointUtlizationJson) {
+            clearTimeout(tooltipHideTimer);
             document.getElementById('epTooltip').innerHTML = readKeyValues(d, endpointUtlizationJson);
             tooltip.style('display', 'block');
             tooltip.style('white-space', 'pre-wrap');
@@ -12323,34 +12574,133 @@ class IdentityServicePathComponent {
             tooltip.style('left', x);
             tooltip.style('top', y);
         }
+        // Builds a compact status "card" for a node's hover tooltip: a bold name, a prominent
+        // plain-language status line (with cause), and a few key facts. Makes the connectivity of
+        // customer-hosted tunnelers and routers immediately legible.
         function readKeyValues(d, endpointUtlizationJson) {
-            const excludeKeys = new Set([
-                'status', 'posy', 'posx', 'group', 'hostedEdgeId', 'value',
-                'index', 'parent', 'depth', 'x', 'y', 'id', 'x0', 'y0',
-                'vy', 'vx', 'routerType', 'linkType', 'provider', 'usage',
-            ]);
-            let info = "<div class='tool-tip-container'>";
-            // Show name as header
-            if (d.name) {
-                info += '<div class="tooltip-header">' + d.name + '</div>';
-            }
-            const keys = Object.keys(d);
-            keys.forEach(function (k) {
-                if (excludeKeys.has(k) || k === 'name')
-                    return;
-                let val = d[k];
-                if (val === null || val === undefined || val === '')
-                    return;
-                const label = k.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase());
-                if (isAnObject(val)) {
-                    val = val.name || JSON.stringify(val);
+            const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+            const isRouter = !!(d.type && String(d.type).includes('Router'));
+            const isService = d.group === '4' || !!(d.type && String(d.type).includes('Service'));
+            // The status band is the single source of truth for connectivity/enrollment — it replaces
+            // any separate "Enrolled" row. `caption` is a short fragment, used only where it tells the
+            // operator something the label alone doesn't (i.e. what to go check).
+            // Status pill mirrors the node dot — the component's real state (online / offline /
+            // unknown / not-enrolled), never a synthesized "error". Path problems live on the links.
+            let cls = 'neutral';
+            let label = '';
+            if (isService) {
+                label = 'Service';
+            }
+            else if (isRouter) {
+                // Routers only expose isOnline (no edgeRouterConnectionStatus).
+                if (d.online === 'No' || d.status === 'ERROR') {
+                    cls = 'offline';
+                    label = 'Offline';
+                }
+                else {
+                    cls = 'ok';
+                    label = 'Online';
+                }
+            }
+            else {
+                switch (d.connState) {
+                    case 'online':
+                        cls = 'ok';
+                        label = 'Online';
+                        break;
+                    case 'unknown':
+                        cls = 'unknown';
+                        label = 'Unknown';
+                        break;
+                    case 'unenrolled':
+                        cls = 'offline';
+                        label = 'Not enrolled';
+                        break;
+                    case 'offline':
+                    default:
+                        cls = 'offline';
+                        label = 'Offline';
+                        break;
                 }
-                else if (val instanceof Array) {
-                    val = val.join(', ');
+            }
+            // No role for the service node — the icon/name already make it obvious, and a "Role: Service"
+            // row would just repeat itself.
+            // Role is the policy action (Dial/Bind) the identity has for the service — NOT the host
+            // mechanism, which we can't know (tunneler vs SDK vs router all look the same here).
+            let role = '';
+            if (d.group === '1')
+                role = 'Client (Dial)';
+            else if (d.group === '3')
+                role = 'Host (Bind)';
+            else if (isRouter)
+                role = d.routerType === 'transit-router' ? 'Transit router' : 'Edge router';
+            // Facts that add detail beyond the status pill. The pill summarizes overall state; these
+            // are the granular signals an operator uses to diagnose it (a host can have an API session
+            // yet no router connection). Only the pill's own inputs (Online/Type/Enrolled) are omitted.
+            // Rows are [label, value, optional hover-context]. Service rows are purpose-labeled and
+            // adapt to how the service is configured (intercept+host, host-only, intercept-only, or
+            // SDK-defined with no address config).
+            const rows = [];
+            if (isService) {
+                if (d.interceptSummary) {
+                    rows.push(['Intercept', d.interceptSummary]);
+                }
+                if (d.hostSummary) {
+                    rows.push(['Host', d.hostSummary]);
+                }
+                if (!d.interceptSummary && !d.hostSummary) {
+                    // No intercept/host config. State the facts (the config types present, or none) rather
+                    // than inferring "SDK-defined" — there's no property that actually tells us the host type.
+                    rows.push(['Config types',
+                        (d.configTypeNames && d.configTypeNames.length) ? d.configTypeNames.join(', ') : 'None']);
+                }
+                if (typeof d.encryptionRequired === 'boolean') {
+                    rows.push(['Encryption', d.encryptionRequired ? 'Required' : 'Not required']);
+                }
+                if (d.terminatorStrategy) {
+                    rows.push(['Terminators', d.terminatorStrategy]);
+                }
+                if (d.serviceRoleAttributes && d.serviceRoleAttributes.length) {
+                    rows.push(['Attributes', d.serviceRoleAttributes.join(', ')]);
+                }
+                if (d.permissions && d.permissions.length) {
+                    rows.push(['Your access', d.permissions.join(', ')]);
                 }
-                info += '<div class="prop-row">'
-                    + '<span class="prop-label">' + label + '</span>'
-                    + '<span class="prop-value">' + val + '</span>'
+            }
+            else {
+                if (role)
+                    rows.push(['Role', role]);
+                if (isRouter) {
+                    if (d.tunnelerEnabled === 'Yes' || d.tunnelerEnabled === 'No') {
+                        rows.push(['Tunneler Enabled', d.tunnelerEnabled]);
+                    }
+                }
+                else {
+                    if (d.routerConnection === 'Yes' || d.routerConnection === 'No') {
+                        rows.push(['Router Connection', d.routerConnection]);
+                    }
+                    if (d.apiSession === 'Yes' || d.apiSession === 'No') {
+                        rows.push(['API Session', d.apiSession]);
+                    }
+                    if (d.os)
+                        rows.push(['OS', d.os]);
+                    if (d.mfaEnabled === true)
+                        rows.push(['MFA', 'Enabled']);
+                }
+            }
+            let info = "<div class='tool-tip-container tooltip-card'>";
+            info += '<div class="tooltip-header">' + esc(d.name || '') + '</div>';
+            // The service node carries no connectivity state, so it gets no status pill.
+            if (!isService) {
+                info += '<div class="tt-status-pill tt-' + cls + '">'
+                    + '<span class="tt-status-dot"></span>'
+                    + '<span class="tt-status-label">' + esc(label) + '</span>'
+                    + '</div>';
+            }
+            rows.forEach(([k, v, t]) => {
+                info += '<div class="prop-row"' + (t ? ' title="' + esc(t) + '"' : '') + '>'
+                    + '<span class="prop-label">' + esc(k) + '</span>'
+                    + '<span class="prop-value">' + esc(v) + '</span>'
                     + '</div>';
             });
             return info + '</div>';
@@ -12359,13 +12709,79 @@ class IdentityServicePathComponent {
             return o instanceof Object && o.constructor === Object;
         }
         this.refreshRotate = false;
+        // After the first render only, fit the graph to the viewBox so big topologies don't
+        // overflow off-screen. Subsequent renders (refresh ticks) preserve the user's transform.
+        if (!this.hasInitialFit) {
+            setTimeout(() => {
+                this.fitToContent();
+                this.hasInitialFit = true;
+            }, 0);
+        }
     } // end of initTopoView
+    fitToContent() {
+        if (!this.zoomBehavior)
+            return;
+        const nodes = this.graphJsonObj?.nodes || [];
+        if (nodes.length === 0)
+            return;
+        const xs = nodes
+            .map((n) => n.posx)
+            .filter((v) => typeof v === 'number' && !isNaN(v));
+        const ys = nodes
+            .map((n) => n.posy)
+            .filter((v) => typeof v === 'number' && !isNaN(v));
+        if (xs.length === 0 || ys.length === 0)
+            return;
+        const padding = 60;
+        const minX = Math.min(...xs);
+        const maxX = Math.max(...xs);
+        const minY = Math.min(...ys);
+        const maxY = Math.max(...ys);
+        const contentWidth = (maxX - minX) + padding * 2;
+        const contentHeight = (maxY - minY) + padding * 2;
+        if (contentWidth <= 0 || contentHeight <= 0)
+            return;
+        // Reserve room in the bottom-right for the legend so the auto-fit doesn't place nodes
+        // underneath it. When the legend is collapsed there's nothing to avoid.
+        const reserveRight = this.legendCollapsed ? 0 : 160;
+        const reserveBottom = this.legendCollapsed ? 0 : 90;
+        const availWidth = this.viewBoxWidth - reserveRight;
+        const availHeight = this.viewBoxHeight - reserveBottom;
+        const scale = Math.min(availWidth / contentWidth, availHeight / contentHeight, 1);
+        // Center the content within the available (legend-free) area, which sits at the top-left,
+        // leaving the reserved margin on the right/bottom for the legend panel.
+        const tx = (availWidth - contentWidth * scale) / 2 - (minX - padding) * scale;
+        const ty = (availHeight - contentHeight * scale) / 2 - (minY - padding) * scale;
+        d3.select('#IdentityTopology')
+            .transition()
+            .duration(300)
+            .call(this.zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
+    }
+    zoomIn() {
+        if (!this.zoomBehavior)
+            return;
+        d3.select('#IdentityTopology')
+            .transition()
+            .duration(200)
+            .call(this.zoomBehavior.scaleBy, 1.4);
+    }
+    zoomOut() {
+        if (!this.zoomBehavior)
+            return;
+        d3.select('#IdentityTopology')
+            .transition()
+            .duration(200)
+            .call(this.zoomBehavior.scaleBy, 1 / 1.4);
+    }
+    resetView() {
+        this.fitToContent();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IdentityServicePathComponent, deps: [{ token: IdentityServicePathHelper }, { token: MapDataService }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: IdentityServicePathComponent, isStandalone: false, selector: "app-identity-visualizer", ngImport: i0, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizer\">\n  <div class=\"tp-data-header\">\n    <div class=\"modaltitle\">Identity Service Path</div>\n    <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n    <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n  </div>\n  <div [ngClass]=\"isDarkMode==true?'darkMode':'lightMode'\" class=\"identity-topology-container\">\n    <div style=\"width: 100%; height: 80px; float: left\">\n      <div class=\"ep-topology-filter-container listBox row\">\n        <input\n          (keyup)=\"filterSearchArray()\"\n          [(ngModel)]=\"selectedService\"\n          [matAutocomplete]=\"auto\"\n          class=\"topology-filter-input\"\n          id=\"filterText\"\n          matInput\n          placeholder=\"Type to search identity accessible services.\"\n          />\n\n        @if (filterText) {\n          <div\n            (click)=\"clearSearchFilter()\"\n            class=\"clear-svc-icon icon-close\"\n            id=\"ClearSearchFilter\"\n          ></div>\n        }\n        <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n          @for (option of autocompleteOptions; track option) {\n            <mat-option [value]=\"option.name\">\n              {{ option.name }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </div>\n    </div>\n\n    <div class=\"topotip\" id=\"epTooltip\"></div>\n\n    <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1400\">\n    </svg>\n    @if (isLoading) {\n      <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n    }\n\n    <div class=\"topology-legend\">\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Nodes</div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/host.png\" /></div>\n          <div class=\"legend-text\">Identity</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/Routers.png\" /></div>\n          <div class=\"legend-text\">Edge Router</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/service.png\" /></div>\n          <div class=\"legend-text\">Service</div>\n        </div>\n      </div>\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Status</div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle registered_in_use\"></div></div>\n          <div class=\"legend-text\">Online</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle unregistered\"></div></div>\n          <div class=\"legend-text\">Offline</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle errored\"></div></div>\n          <div class=\"legend-text\">Error</div>\n        </div>\n      </div>\n      @if (fabricApiAvailable) {\n        <div class=\"legend-section\">\n          <div class=\"legend-section-title\">Path</div>\n          <div class=\"legend-item\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line active-circuit\"></div></div>\n            <div class=\"legend-text\">Active Circuit</div>\n          </div>\n          <div class=\"legend-item\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line available\"></div></div>\n            <div class=\"legend-text\">Available</div>\n          </div>\n          <div class=\"legend-item\">\n            <div class=\"legend-icon-col\"><div class=\"legend-icon misconfigured\"></div></div>\n            <div class=\"legend-text\">Broken</div>\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n</div>\n", styles: ["#IdentityVisualizer{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed;display:flex;flex-direction:column}#IdentityVisualizer .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizer .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizer .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizer .clear-svc-icon{font-size:1.4375rem;font-weight:600;position:relative;top:.9375rem;right:2.5rem;color:var(--icon);cursor:pointer}#IdentityVisualizer .clear-svc-icon:hover{filter:brightness(50%)}#IdentityVisualizer.full-screen{width:100%;height:100%;border-radius:0}.ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}.buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}.identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;cursor:grab;flex:1;overflow:hidden}.lightMode{background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.darkMode{background:#000a17;background-image:linear-gradient(#001127 .125rem,transparent 0),linear-gradient(90deg,#001127 .125rem,transparent 0),linear-gradient(#001127 1px,transparent 0),linear-gradient(90deg,#001127 1px,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}.node text{font:.75rem Open Sans,Arial,sans-serif}.modaltitle{padding-top:.375rem;padding-left:.3125rem;color:var(--primaryColor)}.modalbuttons{padding-right:1.25rem}.listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}.tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}.services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}.topology-filter-input{height:3.125rem;width:95%;border-radius:1.5625rem;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding-left:1.25rem}::ng-deep .topotip{display:none;position:fixed;background:var(--navigation);border-radius:.5rem;pointer-events:none;box-shadow:0 .25rem 1rem 0 var(--shadow);color:var(--tableText);z-index:2000;padding:0;max-width:24rem;overflow:hidden}.topology-legend{width:13rem;border-radius:.5rem;position:absolute;bottom:1rem;right:.625rem;background:var(--navigation);box-shadow:0 .25rem .75rem 0 var(--shadow);padding:.9rem}.legend-section{padding:.3rem 0}.legend-section:first-child{padding-top:0}.legend-section:last-child{padding-bottom:0;margin-bottom:-.5rem}.legend-section:not(:last-child){border-bottom:1px solid var(--shadow)}.legend-section-title{font-family:Russo One,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin-bottom:.25rem}.legend-item{display:flex;align-items:center;gap:0;padding:.225rem 0}.legend-icon-col{width:2.5rem;min-width:2.5rem;display:flex;align-items:center;justify-content:center;margin-right:.4rem}.legend-circle{height:.75rem;width:.75rem;min-width:.75rem;border-radius:50%}.legend-circle.unregistered{background-color:#8a8f9a}.legend-circle.registered_in_use{background-color:#08dc5a}.legend-circle.errored{background-color:#fb0d3d}.legend-line{height:.225rem;width:1.5rem}.legend-line.active-circuit{background-color:#00cd13}.legend-line.available{background:repeating-linear-gradient(to right,#8a8f9a 0,#8a8f9a .25rem,transparent .25rem,transparent .5rem)}.legend-text{font-size:.975rem;font-weight:500;color:var(--tableText);white-space:nowrap}.legend-node-icon{width:2rem;height:2rem;min-width:2rem;object-fit:contain}.legend-icon.misconfigured{width:1.2rem;height:1.2rem;min-width:1.2rem;background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain;background-repeat:no-repeat}.legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.rotating{-webkit-animation:rotating 2s linear infinite;-moz-animation:rotating 2s linear infinite;-ms-animation:rotating 2s linear infinite;-o-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}::ng-deep .tool-tip-container{padding:0}::ng-deep .tool-tip-container .tooltip-header{font-family:Russo One,sans-serif;font-size:.975rem;color:var(--primary);padding:.75rem .9rem .45rem;border-bottom:1px solid var(--shadow)}::ng-deep .tool-tip-container .prop-row{display:flex;justify-content:space-between;gap:1.2rem;padding:.375rem .9rem;font-size:.9rem}::ng-deep .tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}::ng-deep .tool-tip-container .prop-row:last-child{padding-bottom:.6rem}::ng-deep .tool-tip-container .prop-label{color:var(--tableText);opacity:.6;font-weight:500;white-space:nowrap}::ng-deep .tool-tip-container .prop-value{color:var(--tableText);font-weight:600;text-align:right}::ng-deep .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-radius:14px;background:var(--background);color:var(--tableText)}::ng-deep .mat-mdc-option.mdc-list-item{align-items:center;color:var(--tableText)}::ng-deep .mat-mdc-option.mdc-list-item:hover:not(.mat-option-disabled),::ng-deep .mat-mdc-option.mdc-list-item:focus:not(.mat-option-disabled){border-color:var(--primaryColor);border-radius:14px;border:.01rem solid var(--primaryColor)}::ng-deep .mat-mdc-raised-button .mdc-button__ripple{border:.1rem solid var(--primaryColor)}::ng-deep .p-button.p-button-icon-only{width:1.357rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: IdentityServicePathComponent, isStandalone: false, selector: "app-identity-visualizer", ngImport: i0, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizer\">\n  <div class=\"tp-data-header\">\n    <div class=\"modaltitle\">Identity Service Path</div>\n    <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n    <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n  </div>\n  <div [ngClass]=\"isDarkMode==true?'darkMode':'lightMode'\" class=\"identity-topology-container\">\n    <div class=\"topology-toolbar\">\n      <div class=\"ep-topology-filter-container listBox row\">\n        <input\n          (keyup)=\"filterSearchArray()\"\n          [(ngModel)]=\"selectedService\"\n          [matAutocomplete]=\"auto\"\n          class=\"topology-filter-input\"\n          id=\"filterText\"\n          matInput\n          placeholder=\"Type to search identity accessible services.\"\n          />\n\n        @if (filterText) {\n          <div\n            (click)=\"clearSearchFilter()\"\n            class=\"clear-svc-icon icon-close\"\n            id=\"ClearSearchFilter\"\n          ></div>\n        }\n        <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n          @for (option of autocompleteOptions; track option) {\n            <mat-option [value]=\"option.name\">\n              {{ option.name }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </div>\n      <div class=\"topology-refresh-controls\">\n        <div\n          (click)=\"refreshFabricData()\"\n          [ngClass]=\"{ rotating: refreshRotate }\"\n          class=\"refresh-button\"\n          id=\"RefreshFabricButton\"\n          title=\"Refresh fabric data\"\n        >\n          <div class=\"refresh-icon\"></div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"topotip\" id=\"epTooltip\"></div>\n\n    <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1400\">\n    </svg>\n    <div class=\"topology-zoom-controls\">\n      <div (click)=\"zoomIn()\" class=\"zoom-btn\" title=\"Zoom in\" id=\"ZoomInButton\">+</div>\n      <div (click)=\"zoomOut()\" class=\"zoom-btn\" title=\"Zoom out\" id=\"ZoomOutButton\">&#8722;</div>\n      <div (click)=\"resetView()\" class=\"zoom-btn zoom-btn-text\" title=\"Fit to content\" id=\"FitToContentButton\">Fit</div>\n    </div>\n    @if (isLoading) {\n      <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n    }\n\n    <div class=\"topology-legend\" [class.collapsed]=\"legendCollapsed\">\n      <div class=\"legend-header\" (click)=\"legendCollapsed = !legendCollapsed\"\n           [title]=\"legendCollapsed ? 'Show legend' : 'Hide legend'\">\n        <span class=\"legend-header-title\">Legend</span>\n        <span class=\"legend-header-toggle\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 16 16\" width=\"13\" height=\"13\">\n            <path d=\"M3.5 6 L8 10.5 L12.5 6\" fill=\"none\" stroke=\"currentColor\"\n                  stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </div>\n      @if (!legendCollapsed) {\n      <div class=\"legend-body\">\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Nodes</div>\n        <div class=\"legend-item\" title=\"An endpoint identity \u2014 a client that dials the service or a tunneler that hosts it.\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/host.png\" /></div>\n          <div class=\"legend-text\">Identity</div>\n        </div>\n        <div class=\"legend-item\" title=\"A Ziti edge router that relays traffic between identities.\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/Routers.png\" /></div>\n          <div class=\"legend-text\">Edge Router</div>\n        </div>\n        <div class=\"legend-item\" title=\"The service being dialed and hosted.\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/service.png\" /></div>\n          <div class=\"legend-text\">Service</div>\n        </div>\n      </div>\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Status</div>\n        <div class=\"legend-item\" title=\"Connected to an edge router.\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle online\"></div></div>\n          <div class=\"legend-text\">Online</div>\n        </div>\n        <div class=\"legend-item\" title=\"Enrolled but not currently connected (e.g. powered off or idle).\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle offline\"></div></div>\n          <div class=\"legend-text\">Offline</div>\n        </div>\n        <div class=\"legend-item\" title=\"Identity-only: the controller can't currently determine the connection state.\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle unknown\"></div></div>\n          <div class=\"legend-text\">Unknown</div>\n        </div>\n        <div class=\"legend-item\" title=\"Identity has not completed enrollment.\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle notenrolled\"></div></div>\n          <div class=\"legend-text\">Not enrolled</div>\n        </div>\n      </div>\n      @if (fabricApiAvailable) {\n        <div class=\"legend-section\">\n          <div class=\"legend-section-title\">Path</div>\n          <div class=\"legend-item\" title=\"Live traffic is flowing over this hop right now.\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line active-circuit\"></div></div>\n            <div class=\"legend-text\">Active Circuit</div>\n          </div>\n          <div class=\"legend-item\" title=\"Reachable and authorized, but no active circuit at the moment.\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line available\"></div></div>\n            <div class=\"legend-text\">Available</div>\n          </div>\n          <div class=\"legend-item\" title=\"This hop can't carry traffic right now. The node colors show which end is the problem \u2014 an offline router, or an unreachable / un-enrolled endpoint.\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line broken\"></div></div>\n            <div class=\"legend-text\">Unavailable</div>\n          </div>\n        </div>\n      }\n      </div>\n      }\n    </div>\n\n  </div>\n</div>\n", styles: ["#IdentityVisualizer{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed;display:flex;flex-direction:column}#IdentityVisualizer .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizer .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizer .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizer .clear-svc-icon{position:absolute;top:50%;right:.55rem;transform:translateY(-50%);width:1.65rem;height:1.65rem;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:.95rem;color:var(--icon);cursor:pointer;transition:background .12s ease,color .12s ease}#IdentityVisualizer .clear-svc-icon:hover{background:color-mix(in srgb,var(--tableText) 12%,transparent);color:var(--tableText)}#IdentityVisualizer.full-screen{width:100%;height:100%;border-radius:0}.ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}.topology-toolbar .ep-topology-filter-container{position:relative;margin:0;flex:1 1 auto;min-width:0;max-width:28rem}.topology-toolbar{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.25rem .625rem;box-sizing:border-box;width:100%;flex-shrink:0;position:relative;z-index:4}.buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}.topology-refresh-controls{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.topology-refresh-controls .refresh-button{width:2.5rem;height:2.5rem;border-radius:50%;background-color:var(--navigation);box-shadow:0 .375rem 1rem 0 var(--shadow),0 0 0 .0625rem var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:filter .15s ease,transform .1s ease,box-shadow .15s ease}.topology-refresh-controls .refresh-button .refresh-icon{width:1.125rem;height:1.125rem;background-color:var(--tableText);opacity:.85;-webkit-mask:url(/assets/svgs/refresh.svg) center/contain no-repeat;mask:url(/assets/svgs/refresh.svg) center/contain no-repeat;transition:opacity .15s ease}.topology-refresh-controls .refresh-button:hover{box-shadow:0 .5rem 1.25rem 0 var(--shadow),0 0 0 .0625rem var(--primaryColor)}.topology-refresh-controls .refresh-button:hover .refresh-icon{opacity:1}.topology-refresh-controls .refresh-button:active{transform:scale(.95)}.topology-refresh-controls .refresh-button.rotating .refresh-icon{animation:rotating 1s linear infinite}.topology-zoom-controls{position:absolute;bottom:1rem;left:1rem;display:flex;flex-direction:column;gap:.375rem;z-index:5}.topology-zoom-controls .zoom-btn{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background-color:var(--navigation);color:var(--tableText);font-family:Open Sans,Arial,sans-serif;font-size:1.25rem;font-weight:600;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:0 .5rem 1.25rem 0 var(--shadow);transition:filter .15s ease,transform .15s ease}.topology-zoom-controls .zoom-btn.zoom-btn-text{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}.topology-zoom-controls .zoom-btn:hover{filter:brightness(85%)}.topology-zoom-controls .zoom-btn:active{transform:scale(.95)}.identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;flex:1;overflow:hidden;position:relative}#IdentityTopology{cursor:grab;flex:1;min-height:0}#IdentityTopology:active{cursor:grabbing}.lightMode{background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.darkMode{background:#000a17;background-image:linear-gradient(#001127 .125rem,transparent 0),linear-gradient(90deg,#001127 .125rem,transparent 0),linear-gradient(#001127 1px,transparent 0),linear-gradient(90deg,#001127 1px,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}.node text{font:.75rem Open Sans,Arial,sans-serif}.modaltitle{padding-top:.375rem;padding-left:.3125rem;color:var(--primaryColor)}.modalbuttons{padding-right:1.25rem}.listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}.tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}.services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}.topology-filter-input{height:2.75rem;width:100%;box-sizing:border-box;border-radius:.75rem;border:1px solid var(--shadow);background-color:var(--background);color:var(--tableText);box-shadow:0 .0625rem .125rem #0000000f;padding:0 2.6rem 0 1rem;font-size:.95rem;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.topology-filter-input::placeholder{color:color-mix(in srgb,var(--tableText) 50%,transparent)}.topology-filter-input:hover{border-color:color-mix(in srgb,var(--tableText) 28%,transparent)}.topology-filter-input:focus{border-color:var(--primary);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--primary) 18%,transparent)}::ng-deep .topotip{display:none;position:fixed;background:var(--navigation);border-radius:.5rem;pointer-events:auto;box-shadow:0 .25rem 1rem 0 var(--shadow);color:var(--tableText);z-index:2000;padding:0;max-width:24rem;overflow:hidden}.topology-legend{width:15rem;border-radius:.5rem;position:absolute;bottom:1rem;right:.625rem;background:var(--navigation);box-shadow:0 .25rem .75rem 0 var(--shadow);padding:.9rem}.topology-legend.collapsed{width:auto}.legend-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none}.legend-header-title{font-family:Russo One,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--primary)}.legend-header-toggle{color:var(--primary);display:flex;align-items:center}.legend-header-toggle svg{display:block;transition:transform .15s ease}.topology-legend.collapsed .legend-header-toggle svg{transform:rotate(180deg)}.legend-body{padding-top:.6rem}.legend-section{padding:.3rem 0}.legend-section:first-child{padding-top:0}.legend-section:last-child{padding-bottom:0;margin-bottom:-.5rem}.legend-section:not(:last-child){border-bottom:1px solid var(--shadow)}.legend-section-title{font-family:Russo One,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin-bottom:.25rem}.legend-item{display:flex;align-items:center;gap:0;padding:.225rem 0;cursor:help}.legend-icon-col{width:2.5rem;min-width:2.5rem;display:flex;align-items:center;justify-content:center;margin-right:.4rem}.legend-circle{height:.75rem;width:.75rem;min-width:.75rem;border-radius:50%}.legend-circle.online{background-color:#08dc5a}.legend-circle.offline{background-color:#8a8f9a}.legend-circle.unknown{background-color:#e6a700}.legend-circle.notenrolled{background-color:var(--background);border:.125rem solid #8a8f9a}.legend-line{height:.225rem;width:1.5rem}.legend-line.active-circuit{background-color:#00cd13}.legend-line.available{background:repeating-linear-gradient(to right,#8a8f9a 0,#8a8f9a .25rem,transparent .25rem,transparent .5rem)}.legend-line.broken{height:0;background:none;border-top:.28rem dotted #e6432e}.legend-text{font-size:.975rem;font-weight:500;color:var(--tableText);white-space:nowrap}.legend-node-icon{width:2rem;height:2rem;min-width:2rem;object-fit:contain}.legend-icon.misconfigured,.legend-icon.broken-link{width:1.2rem;height:1.2rem;min-width:1.2rem;background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain;background-repeat:no-repeat}.legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.rotating{-webkit-animation:rotating 2s linear infinite;-moz-animation:rotating 2s linear infinite;-ms-animation:rotating 2s linear infinite;-o-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}::ng-deep .tool-tip-container{padding:0}::ng-deep .tool-tip-container .tooltip-header{font-family:Russo One,sans-serif;font-size:.975rem;color:var(--primary);padding:.7rem .9rem .15rem}::ng-deep .tool-tip-container .prop-row{display:flex;justify-content:space-between;gap:1.2rem;padding:.375rem .9rem;font-size:.9rem}::ng-deep .tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}::ng-deep .tool-tip-container .prop-row:last-child{padding-bottom:.6rem}::ng-deep .tool-tip-container .prop-label{color:var(--tableText);opacity:.6;font-weight:500;white-space:nowrap}::ng-deep .tool-tip-container .prop-value{color:var(--tableText);font-weight:600;text-align:right}::ng-deep .tool-tip-container .tt-status-pill{display:inline-flex;align-items:center;gap:.35rem;margin:0 .9rem .55rem;padding:.14rem .55rem .14rem .45rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em}::ng-deep .tool-tip-container .tt-status-dot{width:.45rem;height:.45rem;min-width:.45rem;border-radius:50%}::ng-deep .tool-tip-container .prop-row:first-of-type{border-top:1px solid var(--shadow);padding-top:.5rem}::ng-deep .tool-tip-container .tt-ok{background:#08dc5a1f}::ng-deep .tool-tip-container .tt-ok .tt-status-dot{background:#08dc5a}::ng-deep .tool-tip-container .tt-ok .tt-status-label{color:#0a9d4a}::ng-deep .tool-tip-container .tt-broken{background:#e6432e1f}::ng-deep .tool-tip-container .tt-broken .tt-status-dot{background:#e6432e}::ng-deep .tool-tip-container .tt-broken .tt-status-label{color:#d23b27}::ng-deep .tool-tip-container .tt-offline{background:#8a8f9a29}::ng-deep .tool-tip-container .tt-offline .tt-status-dot{background:#8a8f9a}::ng-deep .tool-tip-container .tt-offline .tt-status-label{color:#6f7480}::ng-deep .tool-tip-container .tt-unknown{background:#e6a70024}::ng-deep .tool-tip-container .tt-unknown .tt-status-dot{background:#e6a700}::ng-deep .tool-tip-container .tt-unknown .tt-status-label{color:#b07f00}::ng-deep .tool-tip-container .tt-neutral{background:#6e78c81f}::ng-deep .tool-tip-container .tt-neutral .tt-status-dot{background:var(--primary)}::ng-deep .tool-tip-container .tt-neutral .tt-status-label{color:var(--primary)}::ng-deep .cdk-overlay-pane .mat-mdc-autocomplete-panel{border-radius:.75rem!important;background:var(--background);color:var(--tableText);padding:.35rem;border:1px solid var(--shadow);box-shadow:0 .5rem 1.5rem #00000029!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item{align-items:center;min-height:2.5rem;margin:.1rem 0;border-radius:.5rem;color:var(--tableText);transition:background-color .12s ease,color .12s ease}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled){background-color:color-mix(in srgb,var(--primary) 9%,transparent)!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled){background-color:color-mix(in srgb,var(--primary) 14%,transparent)!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:var(--primary);font-weight:600}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-mdc-option-ripple,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-ripple{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-pseudo-checkbox-minimal{color:var(--primary)}::ng-deep .mat-mdc-raised-button .mdc-button__ripple{border:.1rem solid var(--primaryColor)}::ng-deep .p-button.p-button-icon-only{width:1.357rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IdentityServicePathComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-identity-visualizer', standalone: false, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizer\">\n  <div class=\"tp-data-header\">\n    <div class=\"modaltitle\">Identity Service Path</div>\n    <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n    <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n  </div>\n  <div [ngClass]=\"isDarkMode==true?'darkMode':'lightMode'\" class=\"identity-topology-container\">\n    <div style=\"width: 100%; height: 80px; float: left\">\n      <div class=\"ep-topology-filter-container listBox row\">\n        <input\n          (keyup)=\"filterSearchArray()\"\n          [(ngModel)]=\"selectedService\"\n          [matAutocomplete]=\"auto\"\n          class=\"topology-filter-input\"\n          id=\"filterText\"\n          matInput\n          placeholder=\"Type to search identity accessible services.\"\n          />\n\n        @if (filterText) {\n          <div\n            (click)=\"clearSearchFilter()\"\n            class=\"clear-svc-icon icon-close\"\n            id=\"ClearSearchFilter\"\n          ></div>\n        }\n        <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n          @for (option of autocompleteOptions; track option) {\n            <mat-option [value]=\"option.name\">\n              {{ option.name }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </div>\n    </div>\n\n    <div class=\"topotip\" id=\"epTooltip\"></div>\n\n    <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1400\">\n    </svg>\n    @if (isLoading) {\n      <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n    }\n\n    <div class=\"topology-legend\">\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Nodes</div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/host.png\" /></div>\n          <div class=\"legend-text\">Identity</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/Routers.png\" /></div>\n          <div class=\"legend-text\">Edge Router</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/service.png\" /></div>\n          <div class=\"legend-text\">Service</div>\n        </div>\n      </div>\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Status</div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle registered_in_use\"></div></div>\n          <div class=\"legend-text\">Online</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle unregistered\"></div></div>\n          <div class=\"legend-text\">Offline</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle errored\"></div></div>\n          <div class=\"legend-text\">Error</div>\n        </div>\n      </div>\n      @if (fabricApiAvailable) {\n        <div class=\"legend-section\">\n          <div class=\"legend-section-title\">Path</div>\n          <div class=\"legend-item\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line active-circuit\"></div></div>\n            <div class=\"legend-text\">Active Circuit</div>\n          </div>\n          <div class=\"legend-item\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line available\"></div></div>\n            <div class=\"legend-text\">Available</div>\n          </div>\n          <div class=\"legend-item\">\n            <div class=\"legend-icon-col\"><div class=\"legend-icon misconfigured\"></div></div>\n            <div class=\"legend-text\">Broken</div>\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n</div>\n", styles: ["#IdentityVisualizer{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed;display:flex;flex-direction:column}#IdentityVisualizer .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizer .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizer .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizer .clear-svc-icon{font-size:1.4375rem;font-weight:600;position:relative;top:.9375rem;right:2.5rem;color:var(--icon);cursor:pointer}#IdentityVisualizer .clear-svc-icon:hover{filter:brightness(50%)}#IdentityVisualizer.full-screen{width:100%;height:100%;border-radius:0}.ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}.buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}.identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;cursor:grab;flex:1;overflow:hidden}.lightMode{background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.darkMode{background:#000a17;background-image:linear-gradient(#001127 .125rem,transparent 0),linear-gradient(90deg,#001127 .125rem,transparent 0),linear-gradient(#001127 1px,transparent 0),linear-gradient(90deg,#001127 1px,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}.node text{font:.75rem Open Sans,Arial,sans-serif}.modaltitle{padding-top:.375rem;padding-left:.3125rem;color:var(--primaryColor)}.modalbuttons{padding-right:1.25rem}.listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}.tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}.services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}.topology-filter-input{height:3.125rem;width:95%;border-radius:1.5625rem;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding-left:1.25rem}::ng-deep .topotip{display:none;position:fixed;background:var(--navigation);border-radius:.5rem;pointer-events:none;box-shadow:0 .25rem 1rem 0 var(--shadow);color:var(--tableText);z-index:2000;padding:0;max-width:24rem;overflow:hidden}.topology-legend{width:13rem;border-radius:.5rem;position:absolute;bottom:1rem;right:.625rem;background:var(--navigation);box-shadow:0 .25rem .75rem 0 var(--shadow);padding:.9rem}.legend-section{padding:.3rem 0}.legend-section:first-child{padding-top:0}.legend-section:last-child{padding-bottom:0;margin-bottom:-.5rem}.legend-section:not(:last-child){border-bottom:1px solid var(--shadow)}.legend-section-title{font-family:Russo One,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin-bottom:.25rem}.legend-item{display:flex;align-items:center;gap:0;padding:.225rem 0}.legend-icon-col{width:2.5rem;min-width:2.5rem;display:flex;align-items:center;justify-content:center;margin-right:.4rem}.legend-circle{height:.75rem;width:.75rem;min-width:.75rem;border-radius:50%}.legend-circle.unregistered{background-color:#8a8f9a}.legend-circle.registered_in_use{background-color:#08dc5a}.legend-circle.errored{background-color:#fb0d3d}.legend-line{height:.225rem;width:1.5rem}.legend-line.active-circuit{background-color:#00cd13}.legend-line.available{background:repeating-linear-gradient(to right,#8a8f9a 0,#8a8f9a .25rem,transparent .25rem,transparent .5rem)}.legend-text{font-size:.975rem;font-weight:500;color:var(--tableText);white-space:nowrap}.legend-node-icon{width:2rem;height:2rem;min-width:2rem;object-fit:contain}.legend-icon.misconfigured{width:1.2rem;height:1.2rem;min-width:1.2rem;background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain;background-repeat:no-repeat}.legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.rotating{-webkit-animation:rotating 2s linear infinite;-moz-animation:rotating 2s linear infinite;-ms-animation:rotating 2s linear infinite;-o-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}::ng-deep .tool-tip-container{padding:0}::ng-deep .tool-tip-container .tooltip-header{font-family:Russo One,sans-serif;font-size:.975rem;color:var(--primary);padding:.75rem .9rem .45rem;border-bottom:1px solid var(--shadow)}::ng-deep .tool-tip-container .prop-row{display:flex;justify-content:space-between;gap:1.2rem;padding:.375rem .9rem;font-size:.9rem}::ng-deep .tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}::ng-deep .tool-tip-container .prop-row:last-child{padding-bottom:.6rem}::ng-deep .tool-tip-container .prop-label{color:var(--tableText);opacity:.6;font-weight:500;white-space:nowrap}::ng-deep .tool-tip-container .prop-value{color:var(--tableText);font-weight:600;text-align:right}::ng-deep .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-radius:14px;background:var(--background);color:var(--tableText)}::ng-deep .mat-mdc-option.mdc-list-item{align-items:center;color:var(--tableText)}::ng-deep .mat-mdc-option.mdc-list-item:hover:not(.mat-option-disabled),::ng-deep .mat-mdc-option.mdc-list-item:focus:not(.mat-option-disabled){border-color:var(--primaryColor);border-radius:14px;border:.01rem solid var(--primaryColor)}::ng-deep .mat-mdc-raised-button .mdc-button__ripple{border:.1rem solid var(--primaryColor)}::ng-deep .p-button.p-button-icon-only{width:1.357rem}\n"] }]
+            args: [{ selector: 'app-identity-visualizer', standalone: false, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizer\">\n  <div class=\"tp-data-header\">\n    <div class=\"modaltitle\">Identity Service Path</div>\n    <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n    <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n  </div>\n  <div [ngClass]=\"isDarkMode==true?'darkMode':'lightMode'\" class=\"identity-topology-container\">\n    <div class=\"topology-toolbar\">\n      <div class=\"ep-topology-filter-container listBox row\">\n        <input\n          (keyup)=\"filterSearchArray()\"\n          [(ngModel)]=\"selectedService\"\n          [matAutocomplete]=\"auto\"\n          class=\"topology-filter-input\"\n          id=\"filterText\"\n          matInput\n          placeholder=\"Type to search identity accessible services.\"\n          />\n\n        @if (filterText) {\n          <div\n            (click)=\"clearSearchFilter()\"\n            class=\"clear-svc-icon icon-close\"\n            id=\"ClearSearchFilter\"\n          ></div>\n        }\n        <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n          @for (option of autocompleteOptions; track option) {\n            <mat-option [value]=\"option.name\">\n              {{ option.name }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </div>\n      <div class=\"topology-refresh-controls\">\n        <div\n          (click)=\"refreshFabricData()\"\n          [ngClass]=\"{ rotating: refreshRotate }\"\n          class=\"refresh-button\"\n          id=\"RefreshFabricButton\"\n          title=\"Refresh fabric data\"\n        >\n          <div class=\"refresh-icon\"></div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"topotip\" id=\"epTooltip\"></div>\n\n    <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1400\">\n    </svg>\n    <div class=\"topology-zoom-controls\">\n      <div (click)=\"zoomIn()\" class=\"zoom-btn\" title=\"Zoom in\" id=\"ZoomInButton\">+</div>\n      <div (click)=\"zoomOut()\" class=\"zoom-btn\" title=\"Zoom out\" id=\"ZoomOutButton\">&#8722;</div>\n      <div (click)=\"resetView()\" class=\"zoom-btn zoom-btn-text\" title=\"Fit to content\" id=\"FitToContentButton\">Fit</div>\n    </div>\n    @if (isLoading) {\n      <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n    }\n\n    <div class=\"topology-legend\" [class.collapsed]=\"legendCollapsed\">\n      <div class=\"legend-header\" (click)=\"legendCollapsed = !legendCollapsed\"\n           [title]=\"legendCollapsed ? 'Show legend' : 'Hide legend'\">\n        <span class=\"legend-header-title\">Legend</span>\n        <span class=\"legend-header-toggle\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 16 16\" width=\"13\" height=\"13\">\n            <path d=\"M3.5 6 L8 10.5 L12.5 6\" fill=\"none\" stroke=\"currentColor\"\n                  stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </div>\n      @if (!legendCollapsed) {\n      <div class=\"legend-body\">\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Nodes</div>\n        <div class=\"legend-item\" title=\"An endpoint identity \u2014 a client that dials the service or a tunneler that hosts it.\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/host.png\" /></div>\n          <div class=\"legend-text\">Identity</div>\n        </div>\n        <div class=\"legend-item\" title=\"A Ziti edge router that relays traffic between identities.\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/Routers.png\" /></div>\n          <div class=\"legend-text\">Edge Router</div>\n        </div>\n        <div class=\"legend-item\" title=\"The service being dialed and hosted.\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/service.png\" /></div>\n          <div class=\"legend-text\">Service</div>\n        </div>\n      </div>\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Status</div>\n        <div class=\"legend-item\" title=\"Connected to an edge router.\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle online\"></div></div>\n          <div class=\"legend-text\">Online</div>\n        </div>\n        <div class=\"legend-item\" title=\"Enrolled but not currently connected (e.g. powered off or idle).\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle offline\"></div></div>\n          <div class=\"legend-text\">Offline</div>\n        </div>\n        <div class=\"legend-item\" title=\"Identity-only: the controller can't currently determine the connection state.\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle unknown\"></div></div>\n          <div class=\"legend-text\">Unknown</div>\n        </div>\n        <div class=\"legend-item\" title=\"Identity has not completed enrollment.\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle notenrolled\"></div></div>\n          <div class=\"legend-text\">Not enrolled</div>\n        </div>\n      </div>\n      @if (fabricApiAvailable) {\n        <div class=\"legend-section\">\n          <div class=\"legend-section-title\">Path</div>\n          <div class=\"legend-item\" title=\"Live traffic is flowing over this hop right now.\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line active-circuit\"></div></div>\n            <div class=\"legend-text\">Active Circuit</div>\n          </div>\n          <div class=\"legend-item\" title=\"Reachable and authorized, but no active circuit at the moment.\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line available\"></div></div>\n            <div class=\"legend-text\">Available</div>\n          </div>\n          <div class=\"legend-item\" title=\"This hop can't carry traffic right now. The node colors show which end is the problem \u2014 an offline router, or an unreachable / un-enrolled endpoint.\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line broken\"></div></div>\n            <div class=\"legend-text\">Unavailable</div>\n          </div>\n        </div>\n      }\n      </div>\n      }\n    </div>\n\n  </div>\n</div>\n", styles: ["#IdentityVisualizer{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed;display:flex;flex-direction:column}#IdentityVisualizer .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizer .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizer .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizer .clear-svc-icon{position:absolute;top:50%;right:.55rem;transform:translateY(-50%);width:1.65rem;height:1.65rem;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:.95rem;color:var(--icon);cursor:pointer;transition:background .12s ease,color .12s ease}#IdentityVisualizer .clear-svc-icon:hover{background:color-mix(in srgb,var(--tableText) 12%,transparent);color:var(--tableText)}#IdentityVisualizer.full-screen{width:100%;height:100%;border-radius:0}.ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}.topology-toolbar .ep-topology-filter-container{position:relative;margin:0;flex:1 1 auto;min-width:0;max-width:28rem}.topology-toolbar{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.25rem .625rem;box-sizing:border-box;width:100%;flex-shrink:0;position:relative;z-index:4}.buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}.topology-refresh-controls{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.topology-refresh-controls .refresh-button{width:2.5rem;height:2.5rem;border-radius:50%;background-color:var(--navigation);box-shadow:0 .375rem 1rem 0 var(--shadow),0 0 0 .0625rem var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:filter .15s ease,transform .1s ease,box-shadow .15s ease}.topology-refresh-controls .refresh-button .refresh-icon{width:1.125rem;height:1.125rem;background-color:var(--tableText);opacity:.85;-webkit-mask:url(/assets/svgs/refresh.svg) center/contain no-repeat;mask:url(/assets/svgs/refresh.svg) center/contain no-repeat;transition:opacity .15s ease}.topology-refresh-controls .refresh-button:hover{box-shadow:0 .5rem 1.25rem 0 var(--shadow),0 0 0 .0625rem var(--primaryColor)}.topology-refresh-controls .refresh-button:hover .refresh-icon{opacity:1}.topology-refresh-controls .refresh-button:active{transform:scale(.95)}.topology-refresh-controls .refresh-button.rotating .refresh-icon{animation:rotating 1s linear infinite}.topology-zoom-controls{position:absolute;bottom:1rem;left:1rem;display:flex;flex-direction:column;gap:.375rem;z-index:5}.topology-zoom-controls .zoom-btn{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background-color:var(--navigation);color:var(--tableText);font-family:Open Sans,Arial,sans-serif;font-size:1.25rem;font-weight:600;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:0 .5rem 1.25rem 0 var(--shadow);transition:filter .15s ease,transform .15s ease}.topology-zoom-controls .zoom-btn.zoom-btn-text{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}.topology-zoom-controls .zoom-btn:hover{filter:brightness(85%)}.topology-zoom-controls .zoom-btn:active{transform:scale(.95)}.identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;flex:1;overflow:hidden;position:relative}#IdentityTopology{cursor:grab;flex:1;min-height:0}#IdentityTopology:active{cursor:grabbing}.lightMode{background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.darkMode{background:#000a17;background-image:linear-gradient(#001127 .125rem,transparent 0),linear-gradient(90deg,#001127 .125rem,transparent 0),linear-gradient(#001127 1px,transparent 0),linear-gradient(90deg,#001127 1px,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}.node text{font:.75rem Open Sans,Arial,sans-serif}.modaltitle{padding-top:.375rem;padding-left:.3125rem;color:var(--primaryColor)}.modalbuttons{padding-right:1.25rem}.listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}.tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}.services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}.topology-filter-input{height:2.75rem;width:100%;box-sizing:border-box;border-radius:.75rem;border:1px solid var(--shadow);background-color:var(--background);color:var(--tableText);box-shadow:0 .0625rem .125rem #0000000f;padding:0 2.6rem 0 1rem;font-size:.95rem;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.topology-filter-input::placeholder{color:color-mix(in srgb,var(--tableText) 50%,transparent)}.topology-filter-input:hover{border-color:color-mix(in srgb,var(--tableText) 28%,transparent)}.topology-filter-input:focus{border-color:var(--primary);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--primary) 18%,transparent)}::ng-deep .topotip{display:none;position:fixed;background:var(--navigation);border-radius:.5rem;pointer-events:auto;box-shadow:0 .25rem 1rem 0 var(--shadow);color:var(--tableText);z-index:2000;padding:0;max-width:24rem;overflow:hidden}.topology-legend{width:15rem;border-radius:.5rem;position:absolute;bottom:1rem;right:.625rem;background:var(--navigation);box-shadow:0 .25rem .75rem 0 var(--shadow);padding:.9rem}.topology-legend.collapsed{width:auto}.legend-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none}.legend-header-title{font-family:Russo One,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--primary)}.legend-header-toggle{color:var(--primary);display:flex;align-items:center}.legend-header-toggle svg{display:block;transition:transform .15s ease}.topology-legend.collapsed .legend-header-toggle svg{transform:rotate(180deg)}.legend-body{padding-top:.6rem}.legend-section{padding:.3rem 0}.legend-section:first-child{padding-top:0}.legend-section:last-child{padding-bottom:0;margin-bottom:-.5rem}.legend-section:not(:last-child){border-bottom:1px solid var(--shadow)}.legend-section-title{font-family:Russo One,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin-bottom:.25rem}.legend-item{display:flex;align-items:center;gap:0;padding:.225rem 0;cursor:help}.legend-icon-col{width:2.5rem;min-width:2.5rem;display:flex;align-items:center;justify-content:center;margin-right:.4rem}.legend-circle{height:.75rem;width:.75rem;min-width:.75rem;border-radius:50%}.legend-circle.online{background-color:#08dc5a}.legend-circle.offline{background-color:#8a8f9a}.legend-circle.unknown{background-color:#e6a700}.legend-circle.notenrolled{background-color:var(--background);border:.125rem solid #8a8f9a}.legend-line{height:.225rem;width:1.5rem}.legend-line.active-circuit{background-color:#00cd13}.legend-line.available{background:repeating-linear-gradient(to right,#8a8f9a 0,#8a8f9a .25rem,transparent .25rem,transparent .5rem)}.legend-line.broken{height:0;background:none;border-top:.28rem dotted #e6432e}.legend-text{font-size:.975rem;font-weight:500;color:var(--tableText);white-space:nowrap}.legend-node-icon{width:2rem;height:2rem;min-width:2rem;object-fit:contain}.legend-icon.misconfigured,.legend-icon.broken-link{width:1.2rem;height:1.2rem;min-width:1.2rem;background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain;background-repeat:no-repeat}.legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.rotating{-webkit-animation:rotating 2s linear infinite;-moz-animation:rotating 2s linear infinite;-ms-animation:rotating 2s linear infinite;-o-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}::ng-deep .tool-tip-container{padding:0}::ng-deep .tool-tip-container .tooltip-header{font-family:Russo One,sans-serif;font-size:.975rem;color:var(--primary);padding:.7rem .9rem .15rem}::ng-deep .tool-tip-container .prop-row{display:flex;justify-content:space-between;gap:1.2rem;padding:.375rem .9rem;font-size:.9rem}::ng-deep .tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}::ng-deep .tool-tip-container .prop-row:last-child{padding-bottom:.6rem}::ng-deep .tool-tip-container .prop-label{color:var(--tableText);opacity:.6;font-weight:500;white-space:nowrap}::ng-deep .tool-tip-container .prop-value{color:var(--tableText);font-weight:600;text-align:right}::ng-deep .tool-tip-container .tt-status-pill{display:inline-flex;align-items:center;gap:.35rem;margin:0 .9rem .55rem;padding:.14rem .55rem .14rem .45rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em}::ng-deep .tool-tip-container .tt-status-dot{width:.45rem;height:.45rem;min-width:.45rem;border-radius:50%}::ng-deep .tool-tip-container .prop-row:first-of-type{border-top:1px solid var(--shadow);padding-top:.5rem}::ng-deep .tool-tip-container .tt-ok{background:#08dc5a1f}::ng-deep .tool-tip-container .tt-ok .tt-status-dot{background:#08dc5a}::ng-deep .tool-tip-container .tt-ok .tt-status-label{color:#0a9d4a}::ng-deep .tool-tip-container .tt-broken{background:#e6432e1f}::ng-deep .tool-tip-container .tt-broken .tt-status-dot{background:#e6432e}::ng-deep .tool-tip-container .tt-broken .tt-status-label{color:#d23b27}::ng-deep .tool-tip-container .tt-offline{background:#8a8f9a29}::ng-deep .tool-tip-container .tt-offline .tt-status-dot{background:#8a8f9a}::ng-deep .tool-tip-container .tt-offline .tt-status-label{color:#6f7480}::ng-deep .tool-tip-container .tt-unknown{background:#e6a70024}::ng-deep .tool-tip-container .tt-unknown .tt-status-dot{background:#e6a700}::ng-deep .tool-tip-container .tt-unknown .tt-status-label{color:#b07f00}::ng-deep .tool-tip-container .tt-neutral{background:#6e78c81f}::ng-deep .tool-tip-container .tt-neutral .tt-status-dot{background:var(--primary)}::ng-deep .tool-tip-container .tt-neutral .tt-status-label{color:var(--primary)}::ng-deep .cdk-overlay-pane .mat-mdc-autocomplete-panel{border-radius:.75rem!important;background:var(--background);color:var(--tableText);padding:.35rem;border:1px solid var(--shadow);box-shadow:0 .5rem 1.5rem #00000029!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item{align-items:center;min-height:2.5rem;margin:.1rem 0;border-radius:.5rem;color:var(--tableText);transition:background-color .12s ease,color .12s ease}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled){background-color:color-mix(in srgb,var(--primary) 9%,transparent)!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled){background-color:color-mix(in srgb,var(--primary) 14%,transparent)!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:var(--primary);font-weight:600}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-mdc-option-ripple,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-ripple{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-pseudo-checkbox-minimal{color:var(--primary)}::ng-deep .mat-mdc-raised-button .mdc-button__ripple{border:.1rem solid var(--primaryColor)}::ng-deep .p-button.p-button-icon-only{width:1.357rem}\n"] }]
         }], ctorParameters: () => [{ type: IdentityServicePathHelper }, { type: MapDataService }, { type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -14218,7 +14634,7 @@ class ServicePolicyFormService {
         });
     }
     getAssociatedServicesByRole(id) {
-        this.zitiService.getSubdata('service-policies', id, 'services').then((result) => {
+        this.zitiService.getSubdata('service-policies', id, 'services', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedServices = result.data;
             this.associatedServiceNames = this.associatedServices.map((svc) => {
                 return svc.name;
@@ -14226,7 +14642,7 @@ class ServicePolicyFormService {
         });
     }
     getAssociatedIdentitiesById(id) {
-        return this.zitiService.getSubdata('service-policies', id, 'identities').then((result) => {
+        return this.zitiService.getSubdata('service-policies', id, 'identities', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedIdentities = result.data;
             this.associatedIdentityNames = this.associatedIdentities.map((ident) => {
                 return ident.name;
@@ -14858,11 +15274,11 @@ class PreviewListComponent {
         return './' + hrefVal;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PreviewListComponent, deps: [{ token: i4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PreviewListComponent, isStandalone: false, selector: "lib-preview-list", inputs: { label: "label", clickable: "clickable", isLoading: "isLoading", allNames: "allNames", items: "items", allowRemove: "allowRemove", tooltip: "tooltip", showfilter: "showfilter", localFilter: "localFilter" }, outputs: { itemSelected: "itemSelected", itemRemoved: "itemRemoved", filterChanged: "filterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"listBox row\">\n  @if (showfilter) {\n    <input (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n  }\n  <div class=\"text row\">\n    @if (previewItems.length <= 0) {\n      <div class=\"listText\">\n        <span class=\"preview-name preview-placeholder no-items-preview\">no items to display...</span>\n      </div>\n    }\n    @for (item of previewItems; track item) {\n      <div (click)=\"selected(item)\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n        @if (allowRemove) {\n          <div class=\"icon-clear\" (click)=\"remove(item)\"></div>\n        }\n        @if (!item.href) {\n          <span class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item.name || item }}</span>\n        }\n        @if (item.href) {\n          <a [href]=\"getHrefVal(item.href)\" (click)=\"linkClicked($event, item)\" class=\"{{item.linkClass ? item.linkClass : ''}}\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\">\n            @if (item.name) {\n              <span class=\"preview-name\">{{ item.name }}@if (item.iconClass) {\n                <div class=\"preview-item-icon {{item.iconClass}}\" (click)=\"remove(item)\"></div>\n              }</span>\n            }\n          </a>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <div class=\"spinner-container\">\n    <span class=\"spinner\"></span>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0rem}.listBox{background-color:var(--stroke);padding:.625rem;border-radius:var(--inputBorderRadius);height:100%;min-height:3.75rem}.listBox input{height:2.5rem;border-radius:var(--inputBorderRadius);font-size:.875rem;font-weight:600;background-image:url(/assets/images/Filter.png);background-size:auto 1.3125rem;background-position:top .5rem right .75rem;background-repeat:no-repeat;margin-bottom:.625rem;padding-left:.875rem}.text{overflow-y:scroll;height:100%}.listText{width:100%;position:relative;float:left;font-size:.875rem;font-weight:600;padding-left:.625rem;padding-right:.625rem;margin-bottom:.125rem;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:.3125rem}.listText a{color:var(--primary);display:flex;flex-direction:row;align-items:center}.listText a:hover .preview-item-icon{text-decoration:underline}.listText .icon-clear{margin-top:.125rem}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);-webkit-transform:translateY(.0625rem);transform:translateY(.0625rem)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.preview-name{white-space:pre}.preview-name.preview-placeholder{font-style:italic}.preview-name.no-items-preview{font-weight:400}.preview-item-icon{margin-left:.4375rem;font-family:zac!important}.preview-more-results{margin-top:.3125rem}.preview-more-results .preview-name{font-weight:600;border-top-width:1px;text-transform:uppercase;font-size:.825rem;font-style:italic}.preview-more-results .preview-name:after{content:\"\\e939\";font-family:icomoon!important;font-style:normal}.spinner-container{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spinner-container .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--tableText);border-right:.3125rem solid var(--tableText);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PreviewListComponent, isStandalone: false, selector: "lib-preview-list", inputs: { label: "label", clickable: "clickable", isLoading: "isLoading", allNames: "allNames", items: "items", allowRemove: "allowRemove", tooltip: "tooltip", showfilter: "showfilter", localFilter: "localFilter" }, outputs: { itemSelected: "itemSelected", itemRemoved: "itemRemoved", filterChanged: "filterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"listBox row\">\n  @if (showfilter) {\n    <input (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n  }\n  <div class=\"text row\">\n    @if (previewItems.length <= 0) {\n      <div class=\"listText\">\n        <span class=\"preview-name preview-placeholder no-items-preview\">no items to display...</span>\n      </div>\n    }\n    @for (item of previewItems; track item) {\n      <div (click)=\"selected(item)\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n        @if (allowRemove) {\n          <div class=\"icon-clear\" (click)=\"remove(item)\"></div>\n        }\n        @if (!item.href) {\n          <span class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item.name || item }}</span>\n        }\n        @if (item.href) {\n          <a [href]=\"getHrefVal(item.href)\" (click)=\"linkClicked($event, item)\" class=\"{{item.linkClass ? item.linkClass : ''}}\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\">\n            @if (item.name) {\n              <span class=\"preview-name\">{{ item.name }}@if (item.iconClass) {\n                <div class=\"preview-item-icon {{item.iconClass}}\" (click)=\"remove(item)\"></div>\n              }</span>\n            }\n          </a>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <div class=\"spinner-container\">\n    <span class=\"spinner\"></span>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;height:auto;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0rem}.listBox{background-color:var(--stroke);padding:.625rem;border-radius:var(--inputBorderRadius);height:auto;min-height:3.75rem}.listBox input{height:2.5rem;border-radius:var(--inputBorderRadius);font-size:.875rem;font-weight:600;background-image:url(/assets/images/Filter.png);background-size:auto 1.3125rem;background-position:top .5rem right .75rem;background-repeat:no-repeat;margin-bottom:.625rem;padding-left:.875rem}.text{overflow-y:auto;height:auto;max-height:12.5rem}.listText{width:100%;position:relative;float:left;font-size:.875rem;font-weight:600;padding-left:.625rem;padding-right:.625rem;margin-bottom:.125rem;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:.3125rem}.listText a{color:var(--primary);display:flex;flex-direction:row;align-items:center}.listText a:hover .preview-item-icon{text-decoration:underline}.listText .icon-clear{margin-top:.125rem}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);-webkit-transform:translateY(.0625rem);transform:translateY(.0625rem)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.preview-name{white-space:pre}.preview-name.preview-placeholder{font-style:italic}.preview-name.no-items-preview{font-weight:400}.preview-item-icon{margin-left:.4375rem;font-family:zac!important}.preview-more-results{margin-top:.3125rem}.preview-more-results .preview-name{font-weight:600;border-top-width:1px;text-transform:uppercase;font-size:.825rem;font-style:italic}.preview-more-results .preview-name:after{content:\"\\e939\";font-family:icomoon!important;font-style:normal}.spinner-container{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spinner-container .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--tableText);border-right:.3125rem solid var(--tableText);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PreviewListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-preview-list', standalone: false, template: "<div class=\"listBox row\">\n  @if (showfilter) {\n    <input (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n  }\n  <div class=\"text row\">\n    @if (previewItems.length <= 0) {\n      <div class=\"listText\">\n        <span class=\"preview-name preview-placeholder no-items-preview\">no items to display...</span>\n      </div>\n    }\n    @for (item of previewItems; track item) {\n      <div (click)=\"selected(item)\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n        @if (allowRemove) {\n          <div class=\"icon-clear\" (click)=\"remove(item)\"></div>\n        }\n        @if (!item.href) {\n          <span class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item.name || item }}</span>\n        }\n        @if (item.href) {\n          <a [href]=\"getHrefVal(item.href)\" (click)=\"linkClicked($event, item)\" class=\"{{item.linkClass ? item.linkClass : ''}}\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\">\n            @if (item.name) {\n              <span class=\"preview-name\">{{ item.name }}@if (item.iconClass) {\n                <div class=\"preview-item-icon {{item.iconClass}}\" (click)=\"remove(item)\"></div>\n              }</span>\n            }\n          </a>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <div class=\"spinner-container\">\n    <span class=\"spinner\"></span>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0rem}.listBox{background-color:var(--stroke);padding:.625rem;border-radius:var(--inputBorderRadius);height:100%;min-height:3.75rem}.listBox input{height:2.5rem;border-radius:var(--inputBorderRadius);font-size:.875rem;font-weight:600;background-image:url(/assets/images/Filter.png);background-size:auto 1.3125rem;background-position:top .5rem right .75rem;background-repeat:no-repeat;margin-bottom:.625rem;padding-left:.875rem}.text{overflow-y:scroll;height:100%}.listText{width:100%;position:relative;float:left;font-size:.875rem;font-weight:600;padding-left:.625rem;padding-right:.625rem;margin-bottom:.125rem;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:.3125rem}.listText a{color:var(--primary);display:flex;flex-direction:row;align-items:center}.listText a:hover .preview-item-icon{text-decoration:underline}.listText .icon-clear{margin-top:.125rem}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);-webkit-transform:translateY(.0625rem);transform:translateY(.0625rem)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.preview-name{white-space:pre}.preview-name.preview-placeholder{font-style:italic}.preview-name.no-items-preview{font-weight:400}.preview-item-icon{margin-left:.4375rem;font-family:zac!important}.preview-more-results{margin-top:.3125rem}.preview-more-results .preview-name{font-weight:600;border-top-width:1px;text-transform:uppercase;font-size:.825rem;font-style:italic}.preview-more-results .preview-name:after{content:\"\\e939\";font-family:icomoon!important;font-style:normal}.spinner-container{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spinner-container .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--tableText);border-right:.3125rem solid var(--tableText);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear;opacity:.7}\n"] }]
+            args: [{ selector: 'lib-preview-list', standalone: false, template: "<div class=\"listBox row\">\n  @if (showfilter) {\n    <input (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n  }\n  <div class=\"text row\">\n    @if (previewItems.length <= 0) {\n      <div class=\"listText\">\n        <span class=\"preview-name preview-placeholder no-items-preview\">no items to display...</span>\n      </div>\n    }\n    @for (item of previewItems; track item) {\n      <div (click)=\"selected(item)\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n        @if (allowRemove) {\n          <div class=\"icon-clear\" (click)=\"remove(item)\"></div>\n        }\n        @if (!item.href) {\n          <span class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item.name || item }}</span>\n        }\n        @if (item.href) {\n          <a [href]=\"getHrefVal(item.href)\" (click)=\"linkClicked($event, item)\" class=\"{{item.linkClass ? item.linkClass : ''}}\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\">\n            @if (item.name) {\n              <span class=\"preview-name\">{{ item.name }}@if (item.iconClass) {\n                <div class=\"preview-item-icon {{item.iconClass}}\" (click)=\"remove(item)\"></div>\n              }</span>\n            }\n          </a>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <div class=\"spinner-container\">\n    <span class=\"spinner\"></span>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;height:auto;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0rem}.listBox{background-color:var(--stroke);padding:.625rem;border-radius:var(--inputBorderRadius);height:auto;min-height:3.75rem}.listBox input{height:2.5rem;border-radius:var(--inputBorderRadius);font-size:.875rem;font-weight:600;background-image:url(/assets/images/Filter.png);background-size:auto 1.3125rem;background-position:top .5rem right .75rem;background-repeat:no-repeat;margin-bottom:.625rem;padding-left:.875rem}.text{overflow-y:auto;height:auto;max-height:12.5rem}.listText{width:100%;position:relative;float:left;font-size:.875rem;font-weight:600;padding-left:.625rem;padding-right:.625rem;margin-bottom:.125rem;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:.3125rem}.listText a{color:var(--primary);display:flex;flex-direction:row;align-items:center}.listText a:hover .preview-item-icon{text-decoration:underline}.listText .icon-clear{margin-top:.125rem}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);-webkit-transform:translateY(.0625rem);transform:translateY(.0625rem)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.preview-name{white-space:pre}.preview-name.preview-placeholder{font-style:italic}.preview-name.no-items-preview{font-weight:400}.preview-item-icon{margin-left:.4375rem;font-family:zac!important}.preview-more-results{margin-top:.3125rem}.preview-more-results .preview-name{font-weight:600;border-top-width:1px;text-transform:uppercase;font-size:.825rem;font-style:italic}.preview-more-results .preview-name:after{content:\"\\e939\";font-family:icomoon!important;font-style:normal}.spinner-container{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spinner-container .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--tableText);border-right:.3125rem solid var(--tableText);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear;opacity:.7}\n"] }]
         }], ctorParameters: () => [{ type: i4.Router }], propDecorators: { label: [{
                 type: Input
             }], clickable: [{
@@ -15620,7 +16036,7 @@ class IdentityFormComponent extends ProjectableForm {
         });
     }
     getAssociatedServices() {
-        this.zitiService.getSubdata('identities', this.formData.id, 'services').then((result) => {
+        this.zitiService.getSubdata('identities', this.formData.id, 'services', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedServices = result.data;
             this.associatedServiceNames = this.associatedServices.map((svc) => {
                 return svc.name;
@@ -15628,7 +16044,7 @@ class IdentityFormComponent extends ProjectableForm {
         });
     }
     getAssociatedServicePolicies() {
-        this.zitiService.getSubdata('identities', this.formData.id, 'service-policies').then((result) => {
+        this.zitiService.getSubdata('identities', this.formData.id, 'service-policies', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedServicePolicies = result.data;
             this.associatedServicePolicyNames = this.associatedServicePolicies.map((policy) => {
                 return policy.name;
@@ -15688,6 +16104,16 @@ class IdentityFormComponent extends ProjectableForm {
                 break;
         }
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     updateEnrollment() {
         switch (this.enrollmentType) {
             case 'ott':
@@ -15903,7 +16329,7 @@ class IdentityFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"identity-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this identity\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Identity attributes'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n            >\n            <lib-tag-selector\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              (selectedRoleAttributesChange)=\"roleAttributesChanged($event)\"\n              [availableRoleAttributes]=\"identityRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Identities'\"\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          @if (canReadRelated('auth-policies')) {\n          <lib-form-field-container\n            [title]=\"'Auth Policy'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n            [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n            >\n            <select\n              [(ngModel)]=\"formData.authPolicyId\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"\">Select an Authentication Policy</option>\n              @for (policy of authPolicies; track policy) {\n                <option\n                  [value]=\"policy.id\"\n                  >\n                  {{ policy.name }}\n                </option>\n              }\n            </select>\n            <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">External ID</span>\n                </div>\n                <span class=\"form-field-label\">{{ useStrictReadonlyForm ? '' : 'OPTIONAL' }}</span>\n              </div>\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Optional External ID\"\n                [(ngModel)]=\"formData.externalId\"\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n            </div>\n          </lib-form-field-container>\n          }\n          <ng-content select=\"[slot=column-1-slot-2]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Enrollment Type'\"\n              [title2]=\"enrollmentTypeTitle\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                id=\"EnrollmentType\"\n                class=\"form-field-dropdown\"\n                [ngClass]=\"{disabled: isEditing}\"\n                [disabled]=\"useStrictReadonlyForm || isEditing\"\n                [(ngModel)]=\"enrollmentType\"\n                (change)=\"updateEnrollment()\"\n                >\n                <option value=\"ott\">One Time Token</option>\n                <option value=\"CA\" [hidden]=\"!canReadRelated('cas')\">Certificate Authority</option>\n                <option value=\"updb\">UPDB</option>\n                <option value=\"none\">None</option>\n              </select>\n              @if (enrollmentType === 'CA' && canReadRelated('cas')) {\n                <select\n                  id=\"CertAuthorities\"\n                  class=\"form-field-dropdown\"\n                  [ngClass]=\"{disabled: isEditing, error: errors.enrollmentCA}\"\n                  [disabled]=\"useStrictReadonlyForm || isEditing\"\n                  [(ngModel)]=\"enrollmentCA\"\n                  (change)=\"updateEnrollment()\"\n                  >\n                  @for (ca of cas; track ca) {\n                    <option [value]=\"ca.id\">{{ca.name}}</option>\n                  }\n                </select>\n              }\n              @if (enrollmentType === 'updb' && !isEditing) {\n                <input\n                  id=\"UPDBName\"\n                  class=\"form-field-input\"\n                  [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                  [(ngModel)]=\"enrollmentUPDB\"\n                  (keyup)=\"updateEnrollment()\"\n                  type=\"text\"\n                  maxlength=\"500\"\n                  placeholder=\"Enter a name\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  >\n              }\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Admin'\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced is-admin-container\"\n              >\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">IS ADMIN</div>\n                  <div\n                    (click)=\"toggleIsAdmin()\"\n                    [ngClass]=\"{ on: formData.isAdmin, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Hosting Cost'\"\n              [title2]=\"'Precedence'\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced\"\n              >\n              <input\n                class=\"form-field-input\"\n                [(ngModel)]=\"formData.defaultHostingCost\"\n                type=\"number\"\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n              <select\n                [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                id=\"hostingPrecedence\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"default\">Default</option>\n                <option value=\"required\">Required</option>\n                <option value=\"failed\">Failed</option>\n              </select>\n            </lib-form-field-container>\n            @for (tagElement of tagElements; track tagElement) {\n              <lib-form-field-container\n                [title]=\"tagElement.label\"\n                [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <div [innerHTML]=\"tagElement.content | safe\"></div>\n              </lib-form-field-container>\n            }\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n            <lib-form-field-container\n              [title]=\"'App Data'\"\n              [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n            </lib-form-field-container>\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (isEdit && (hasEnrolmentToken || hasAuthenticator)) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              [layout]=\"'column'\"\n              [contentStyle]=\"'z-index: 99999999'\"\n              >\n              <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Enrollment:</span>\n                  </div>\n                  @if (jwtExpired !== undefined && !showResetToken) {\n                    <span class=\"form-field-label info-text\"\n                      [class.expired-text]=\"jwtExpired\"\n                      >\n                      {{jwtExpired ? 'EXPIRED' : 'EXPIRES'}} {{expirationDate}}\n                    </span>\n                  }\n                </div>\n                @if (!useStrictReadonlyForm) {\n                <lib-qr-code\n                  [identity]=\"formData\"\n                  [jwt]=\"jwt\"\n                  [expiration]=\"enrollmentExpiration\"\n                  [authenticators]=\"formData.authenticators\"\n                  [type]=\"'identity'\"\n                  [canExpand]=\"true\"\n                  (doRefresh)=\"refreshIdentity(true)\"\n                ></lib-qr-code>\n                }\n              </div>\n            </lib-form-field-container>\n          }\n          @if (isEdit && !useStrictReadonlyForm) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              [layout]=\"'column'\"\n              [contentStyle]=\"'z-index: 99999999'\"\n              >\n              <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Enable / Disable:</span>\n                  </div>\n                </div>\n                @if (entityDisabled) {\n                  <div class=\"disable-identity-button-container\" (click)=\"enableIdentity()\">\n                    <div class=\"disable-identity-background\"></div>\n                    <button class=\"download-button disable-identity-button\">Enable Identity</button>\n                  </div>\n                }\n                @if (!entityDisabled) {\n                  <div class=\"disable-identity-button-container\" (click)=\"disableIdentity()\">\n                    <div class=\"disable-identity-background\"></div>\n                    <button class=\"download-button disable-identity-button\">Disable Identity</button>\n                  </div>\n                }\n              </div>\n              @if (!entityDisabled) {\n                <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Disable Until:</span>\n                    </div>\n                  </div>\n                  <div class=\"disable-identity-duration-container\">\n                    <select [(ngModel)]=\"disableDurationType\" id=\"DurationType\" class=\"form-field-dropdown\">\n                      <option value=\"indefinite\">Indefinite</option>\n                      <option value=\"pick-date\">Pick a Date & Time</option>\n                    </select>\n                    @if (disableDurationType === 'pick-date') {\n                      <div class=\"disable-identity-datetime-inputs\">\n                        <lib-date-time-picker\n                          class=\"disable-identity-date-time-picker\"\n                          [(ngModel)]=\"disableDuration\"\n                          [minDate]=\"minDate\"\n                          [closeOnDateSelect]=\"true\"\n                        ></lib-date-time-picker>\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </lib-form-field-container>\n          }\n          @if (formData.id && canReadRelated('services')) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n              >\n              <lib-preview-list\n                (itemSelected)=\"serviceSelected($event)\"\n                [clickable]=\"true\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"associatedServiceNames\"\n              ></lib-preview-list>\n              <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n              </div>\n            </lib-form-field-container>\n          }\n          @if (formData.id && canReadRelated('service-policies')) {\n            <lib-form-field-container\n              [title]=\"'Associated Service Policies'\"\n              [count]=\"associatedServicePolicies.length\"\n              [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n              >\n              <lib-preview-list\n                (itemSelected)=\"serviceSelected($event)\"\n                [clickable]=\"false\"\n                [isLoading]=\"servicePoliciesLoading\"\n                [allNames]=\"associatedServicePolicyNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"''\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.disable-identity-button-container{position:relative}.disable-identity-duration-container{display:flex;flex-direction:row;gap:var(--gapMedium);flex-wrap:wrap;width:100%;max-width:100%}.disable-identity-duration-container .form-field-dropdown{min-width:10rem;flex:1 1 10rem;width:100%;max-width:100%}.disable-identity-datetime-inputs{display:flex;flex-direction:row;gap:var(--gapMedium);align-items:center;flex:1 1 16.5rem;min-width:0;max-width:100%}.disable-identity-date-time-picker{width:100%;max-width:100%;min-width:0;flex:1 1 16.5rem}.disable-identity-background{width:100%;height:100%;position:absolute;background:var(--red);border-radius:var(--inputBorderRadius);filter:brightness(.95);height:var(--defaultInputHeight)}.disable-identity-button{background:transparent;border:none;position:relative;z-index:9999999;display:flex;align-items:center;justify-content:center;height:var(--defaultInputHeight)}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.info-text{color:var(--groupText)}.info-text.expired-text{color:var(--red)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .copy-text.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}.disable-identity-datetime-inputs{width:100%}.disable-identity-date-time-picker{flex:1 1 100%;width:100%;min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DateTimePickerComponent, selector: "lib-date-time-picker", inputs: ["minDate", "placeholder", "displayFormat", "ariaLabel", "closeOnDateSelect", "panelWidth"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"identity-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this identity\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Identity attributes'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n            >\n            <lib-tag-selector\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              (selectedRoleAttributesChange)=\"roleAttributesChanged($event)\"\n              [availableRoleAttributes]=\"identityRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Identities'\"\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          @if (canReadRelated('auth-policies')) {\n          <lib-form-field-container\n            [title]=\"'Auth Policy'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n            [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n            >\n            <select\n              [(ngModel)]=\"formData.authPolicyId\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"\">Select an Authentication Policy</option>\n              @for (policy of authPolicies; track policy) {\n                <option\n                  [value]=\"policy.id\"\n                  >\n                  {{ policy.name }}\n                </option>\n              }\n            </select>\n            <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">External ID</span>\n                </div>\n                <span class=\"form-field-label\">{{ useStrictReadonlyForm ? '' : 'OPTIONAL' }}</span>\n              </div>\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Optional External ID\"\n                [(ngModel)]=\"formData.externalId\"\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n            </div>\n          </lib-form-field-container>\n          }\n          <ng-content select=\"[slot=column-1-slot-2]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Enrollment Type'\"\n              [title2]=\"enrollmentTypeTitle\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                id=\"EnrollmentType\"\n                class=\"form-field-dropdown\"\n                [ngClass]=\"{disabled: isEditing}\"\n                [disabled]=\"useStrictReadonlyForm || isEditing\"\n                [(ngModel)]=\"enrollmentType\"\n                (change)=\"updateEnrollment()\"\n                >\n                <option value=\"ott\">One Time Token</option>\n                <option value=\"CA\" [hidden]=\"!canReadRelated('cas')\">Certificate Authority</option>\n                <option value=\"updb\">UPDB</option>\n                <option value=\"none\">None</option>\n              </select>\n              @if (enrollmentType === 'CA' && canReadRelated('cas')) {\n                <select\n                  id=\"CertAuthorities\"\n                  class=\"form-field-dropdown\"\n                  [ngClass]=\"{disabled: isEditing, error: errors.enrollmentCA}\"\n                  [disabled]=\"useStrictReadonlyForm || isEditing\"\n                  [(ngModel)]=\"enrollmentCA\"\n                  (change)=\"updateEnrollment()\"\n                  >\n                  @for (ca of cas; track ca) {\n                    <option [value]=\"ca.id\">{{ca.name}}</option>\n                  }\n                </select>\n              }\n              @if (enrollmentType === 'updb' && !isEditing) {\n                <input\n                  id=\"UPDBName\"\n                  class=\"form-field-input\"\n                  [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                  [(ngModel)]=\"enrollmentUPDB\"\n                  (keyup)=\"updateEnrollment()\"\n                  type=\"text\"\n                  maxlength=\"500\"\n                  placeholder=\"Enter a name\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  >\n              }\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Admin'\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced is-admin-container\"\n              >\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">IS ADMIN</div>\n                  <div\n                    (click)=\"toggleIsAdmin()\"\n                    [ngClass]=\"{ on: formData.isAdmin, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Hosting Cost'\"\n              [title2]=\"'Precedence'\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced\"\n              >\n              <input\n                class=\"form-field-input\"\n                [(ngModel)]=\"formData.defaultHostingCost\"\n                type=\"number\"\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n              <select\n                [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                id=\"hostingPrecedence\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"default\">Default</option>\n                <option value=\"required\">Required</option>\n                <option value=\"failed\">Failed</option>\n              </select>\n            </lib-form-field-container>\n            @for (tagElement of tagElements; track tagElement) {\n              <lib-form-field-container\n                [title]=\"tagElement.label\"\n                [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <div [innerHTML]=\"tagElement.content | safe\"></div>\n              </lib-form-field-container>\n            }\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n            <lib-form-field-container\n              [title]=\"'App Data'\"\n              [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n            </lib-form-field-container>\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (isEdit && (hasEnrolmentToken || hasAuthenticator)) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              [layout]=\"'column'\"\n              [contentStyle]=\"'z-index: 99999999'\"\n              >\n              <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Enrollment:</span>\n                  </div>\n                  @if (jwtExpired !== undefined && !showResetToken) {\n                    <span class=\"form-field-label info-text\"\n                      [class.expired-text]=\"jwtExpired\"\n                      >\n                      {{jwtExpired ? 'EXPIRED' : 'EXPIRES'}} {{expirationDate}}\n                    </span>\n                  }\n                </div>\n                @if (!useStrictReadonlyForm) {\n                <lib-qr-code\n                  [identity]=\"formData\"\n                  [jwt]=\"jwt\"\n                  [expiration]=\"enrollmentExpiration\"\n                  [authenticators]=\"formData.authenticators\"\n                  [type]=\"'identity'\"\n                  [canExpand]=\"true\"\n                  (doRefresh)=\"refreshIdentity(true)\"\n                ></lib-qr-code>\n                }\n              </div>\n            </lib-form-field-container>\n          }\n          @if (isEdit && !useStrictReadonlyForm) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              [layout]=\"'column'\"\n              [contentStyle]=\"'z-index: 99999999'\"\n              >\n              <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Enable / Disable:</span>\n                  </div>\n                </div>\n                @if (entityDisabled) {\n                  <div class=\"disable-identity-button-container\" (click)=\"enableIdentity()\">\n                    <div class=\"disable-identity-background\"></div>\n                    <button class=\"download-button disable-identity-button\">Enable Identity</button>\n                  </div>\n                }\n                @if (!entityDisabled) {\n                  <div class=\"disable-identity-button-container\" (click)=\"disableIdentity()\">\n                    <div class=\"disable-identity-background\"></div>\n                    <button class=\"download-button disable-identity-button\">Disable Identity</button>\n                  </div>\n                }\n              </div>\n              @if (!entityDisabled) {\n                <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Disable Until:</span>\n                    </div>\n                  </div>\n                  <div class=\"disable-identity-duration-container\">\n                    <select [(ngModel)]=\"disableDurationType\" id=\"DurationType\" class=\"form-field-dropdown\">\n                      <option value=\"indefinite\">Indefinite</option>\n                      <option value=\"pick-date\">Pick a Date & Time</option>\n                    </select>\n                    @if (disableDurationType === 'pick-date') {\n                      <div class=\"disable-identity-datetime-inputs\">\n                        <lib-date-time-picker\n                          class=\"disable-identity-date-time-picker\"\n                          [(ngModel)]=\"disableDuration\"\n                          [minDate]=\"minDate\"\n                          [closeOnDateSelect]=\"true\"\n                        ></lib-date-time-picker>\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </lib-form-field-container>\n          }\n          @if (formData.id && canReadRelated('services')) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n              >\n              <lib-preview-list\n                (itemSelected)=\"serviceSelected($event)\"\n                [clickable]=\"true\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"associatedServiceNames\"\n              ></lib-preview-list>\n              <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n              </div>\n            </lib-form-field-container>\n          }\n          @if (formData.id && canReadRelated('service-policies')) {\n            <lib-form-field-container\n              [title]=\"'Associated Service Policies'\"\n              [count]=\"associatedServicePolicies.length\"\n              [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n              >\n              <lib-preview-list\n                (itemSelected)=\"serviceSelected($event)\"\n                [clickable]=\"false\"\n                [isLoading]=\"servicePoliciesLoading\"\n                [allNames]=\"associatedServicePolicyNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"''\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.disable-identity-button-container{position:relative}.disable-identity-duration-container{display:flex;flex-direction:row;gap:var(--gapMedium);flex-wrap:wrap;width:100%;max-width:100%}.disable-identity-duration-container .form-field-dropdown{min-width:10rem;flex:1 1 10rem;width:100%;max-width:100%}.disable-identity-datetime-inputs{display:flex;flex-direction:row;gap:var(--gapMedium);align-items:center;flex:1 1 16.5rem;min-width:0;max-width:100%}.disable-identity-date-time-picker{width:100%;max-width:100%;min-width:0;flex:1 1 16.5rem}.disable-identity-background{width:100%;height:100%;position:absolute;background:var(--red);border-radius:var(--inputBorderRadius);filter:brightness(.95);height:var(--defaultInputHeight)}.disable-identity-button{background:transparent;border:none;position:relative;z-index:9999999;display:flex;align-items:center;justify-content:center;height:var(--defaultInputHeight)}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.info-text{color:var(--groupText)}.info-text.expired-text{color:var(--red)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .copy-text.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}.disable-identity-datetime-inputs{width:100%}.disable-identity-date-time-picker{flex:1 1 100%;width:100%;min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DateTimePickerComponent, selector: "lib-date-time-picker", inputs: ["minDate", "placeholder", "displayFormat", "ariaLabel", "closeOnDateSelect", "panelWidth"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IdentityFormComponent, decorators: [{
             type: Component,
@@ -15912,7 +16338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"identity-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this identity\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Identity attributes'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n            >\n            <lib-tag-selector\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              (selectedRoleAttributesChange)=\"roleAttributesChanged($event)\"\n              [availableRoleAttributes]=\"identityRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Identities'\"\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          @if (canReadRelated('auth-policies')) {\n          <lib-form-field-container\n            [title]=\"'Auth Policy'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n            [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n            >\n            <select\n              [(ngModel)]=\"formData.authPolicyId\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"\">Select an Authentication Policy</option>\n              @for (policy of authPolicies; track policy) {\n                <option\n                  [value]=\"policy.id\"\n                  >\n                  {{ policy.name }}\n                </option>\n              }\n            </select>\n            <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">External ID</span>\n                </div>\n                <span class=\"form-field-label\">{{ useStrictReadonlyForm ? '' : 'OPTIONAL' }}</span>\n              </div>\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Optional External ID\"\n                [(ngModel)]=\"formData.externalId\"\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n            </div>\n          </lib-form-field-container>\n          }\n          <ng-content select=\"[slot=column-1-slot-2]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Enrollment Type'\"\n              [title2]=\"enrollmentTypeTitle\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                id=\"EnrollmentType\"\n                class=\"form-field-dropdown\"\n                [ngClass]=\"{disabled: isEditing}\"\n                [disabled]=\"useStrictReadonlyForm || isEditing\"\n                [(ngModel)]=\"enrollmentType\"\n                (change)=\"updateEnrollment()\"\n                >\n                <option value=\"ott\">One Time Token</option>\n                <option value=\"CA\" [hidden]=\"!canReadRelated('cas')\">Certificate Authority</option>\n                <option value=\"updb\">UPDB</option>\n                <option value=\"none\">None</option>\n              </select>\n              @if (enrollmentType === 'CA' && canReadRelated('cas')) {\n                <select\n                  id=\"CertAuthorities\"\n                  class=\"form-field-dropdown\"\n                  [ngClass]=\"{disabled: isEditing, error: errors.enrollmentCA}\"\n                  [disabled]=\"useStrictReadonlyForm || isEditing\"\n                  [(ngModel)]=\"enrollmentCA\"\n                  (change)=\"updateEnrollment()\"\n                  >\n                  @for (ca of cas; track ca) {\n                    <option [value]=\"ca.id\">{{ca.name}}</option>\n                  }\n                </select>\n              }\n              @if (enrollmentType === 'updb' && !isEditing) {\n                <input\n                  id=\"UPDBName\"\n                  class=\"form-field-input\"\n                  [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                  [(ngModel)]=\"enrollmentUPDB\"\n                  (keyup)=\"updateEnrollment()\"\n                  type=\"text\"\n                  maxlength=\"500\"\n                  placeholder=\"Enter a name\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  >\n              }\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Admin'\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced is-admin-container\"\n              >\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">IS ADMIN</div>\n                  <div\n                    (click)=\"toggleIsAdmin()\"\n                    [ngClass]=\"{ on: formData.isAdmin, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Hosting Cost'\"\n              [title2]=\"'Precedence'\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced\"\n              >\n              <input\n                class=\"form-field-input\"\n                [(ngModel)]=\"formData.defaultHostingCost\"\n                type=\"number\"\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n              <select\n                [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                id=\"hostingPrecedence\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"default\">Default</option>\n                <option value=\"required\">Required</option>\n                <option value=\"failed\">Failed</option>\n              </select>\n            </lib-form-field-container>\n            @for (tagElement of tagElements; track tagElement) {\n              <lib-form-field-container\n                [title]=\"tagElement.label\"\n                [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <div [innerHTML]=\"tagElement.content | safe\"></div>\n              </lib-form-field-container>\n            }\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n            <lib-form-field-container\n              [title]=\"'App Data'\"\n              [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n            </lib-form-field-container>\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (isEdit && (hasEnrolmentToken || hasAuthenticator)) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              [layout]=\"'column'\"\n              [contentStyle]=\"'z-index: 99999999'\"\n              >\n              <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Enrollment:</span>\n                  </div>\n                  @if (jwtExpired !== undefined && !showResetToken) {\n                    <span class=\"form-field-label info-text\"\n                      [class.expired-text]=\"jwtExpired\"\n                      >\n                      {{jwtExpired ? 'EXPIRED' : 'EXPIRES'}} {{expirationDate}}\n                    </span>\n                  }\n                </div>\n                @if (!useStrictReadonlyForm) {\n                <lib-qr-code\n                  [identity]=\"formData\"\n                  [jwt]=\"jwt\"\n                  [expiration]=\"enrollmentExpiration\"\n                  [authenticators]=\"formData.authenticators\"\n                  [type]=\"'identity'\"\n                  [canExpand]=\"true\"\n                  (doRefresh)=\"refreshIdentity(true)\"\n                ></lib-qr-code>\n                }\n              </div>\n            </lib-form-field-container>\n          }\n          @if (isEdit && !useStrictReadonlyForm) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              [layout]=\"'column'\"\n              [contentStyle]=\"'z-index: 99999999'\"\n              >\n              <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Enable / Disable:</span>\n                  </div>\n                </div>\n                @if (entityDisabled) {\n                  <div class=\"disable-identity-button-container\" (click)=\"enableIdentity()\">\n                    <div class=\"disable-identity-background\"></div>\n                    <button class=\"download-button disable-identity-button\">Enable Identity</button>\n                  </div>\n                }\n                @if (!entityDisabled) {\n                  <div class=\"disable-identity-button-container\" (click)=\"disableIdentity()\">\n                    <div class=\"disable-identity-background\"></div>\n                    <button class=\"download-button disable-identity-button\">Disable Identity</button>\n                  </div>\n                }\n              </div>\n              @if (!entityDisabled) {\n                <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Disable Until:</span>\n                    </div>\n                  </div>\n                  <div class=\"disable-identity-duration-container\">\n                    <select [(ngModel)]=\"disableDurationType\" id=\"DurationType\" class=\"form-field-dropdown\">\n                      <option value=\"indefinite\">Indefinite</option>\n                      <option value=\"pick-date\">Pick a Date & Time</option>\n                    </select>\n                    @if (disableDurationType === 'pick-date') {\n                      <div class=\"disable-identity-datetime-inputs\">\n                        <lib-date-time-picker\n                          class=\"disable-identity-date-time-picker\"\n                          [(ngModel)]=\"disableDuration\"\n                          [minDate]=\"minDate\"\n                          [closeOnDateSelect]=\"true\"\n                        ></lib-date-time-picker>\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </lib-form-field-container>\n          }\n          @if (formData.id && canReadRelated('services')) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n              >\n              <lib-preview-list\n                (itemSelected)=\"serviceSelected($event)\"\n                [clickable]=\"true\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"associatedServiceNames\"\n              ></lib-preview-list>\n              <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n              </div>\n            </lib-form-field-container>\n          }\n          @if (formData.id && canReadRelated('service-policies')) {\n            <lib-form-field-container\n              [title]=\"'Associated Service Policies'\"\n              [count]=\"associatedServicePolicies.length\"\n              [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n              >\n              <lib-preview-list\n                (itemSelected)=\"serviceSelected($event)\"\n                [clickable]=\"false\"\n                [isLoading]=\"servicePoliciesLoading\"\n                [allNames]=\"associatedServicePolicyNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"''\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.disable-identity-button-container{position:relative}.disable-identity-duration-container{display:flex;flex-direction:row;gap:var(--gapMedium);flex-wrap:wrap;width:100%;max-width:100%}.disable-identity-duration-container .form-field-dropdown{min-width:10rem;flex:1 1 10rem;width:100%;max-width:100%}.disable-identity-datetime-inputs{display:flex;flex-direction:row;gap:var(--gapMedium);align-items:center;flex:1 1 16.5rem;min-width:0;max-width:100%}.disable-identity-date-time-picker{width:100%;max-width:100%;min-width:0;flex:1 1 16.5rem}.disable-identity-background{width:100%;height:100%;position:absolute;background:var(--red);border-radius:var(--inputBorderRadius);filter:brightness(.95);height:var(--defaultInputHeight)}.disable-identity-button{background:transparent;border:none;position:relative;z-index:9999999;display:flex;align-items:center;justify-content:center;height:var(--defaultInputHeight)}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.info-text{color:var(--groupText)}.info-text.expired-text{color:var(--red)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .copy-text.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}.disable-identity-datetime-inputs{width:100%}.disable-identity-date-time-picker{flex:1 1 100%;width:100%;min-width:100%}}\n"] }]
+                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"identity-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this identity\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Identity attributes'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n            >\n            <lib-tag-selector\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              (selectedRoleAttributesChange)=\"roleAttributesChanged($event)\"\n              [availableRoleAttributes]=\"identityRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Identities'\"\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          @if (canReadRelated('auth-policies')) {\n          <lib-form-field-container\n            [title]=\"'Auth Policy'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n            [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n            >\n            <select\n              [(ngModel)]=\"formData.authPolicyId\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"\">Select an Authentication Policy</option>\n              @for (policy of authPolicies; track policy) {\n                <option\n                  [value]=\"policy.id\"\n                  >\n                  {{ policy.name }}\n                </option>\n              }\n            </select>\n            <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">External ID</span>\n                </div>\n                <span class=\"form-field-label\">{{ useStrictReadonlyForm ? '' : 'OPTIONAL' }}</span>\n              </div>\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Optional External ID\"\n                [(ngModel)]=\"formData.externalId\"\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n            </div>\n          </lib-form-field-container>\n          }\n          <ng-content select=\"[slot=column-1-slot-2]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Enrollment Type'\"\n              [title2]=\"enrollmentTypeTitle\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                id=\"EnrollmentType\"\n                class=\"form-field-dropdown\"\n                [ngClass]=\"{disabled: isEditing}\"\n                [disabled]=\"useStrictReadonlyForm || isEditing\"\n                [(ngModel)]=\"enrollmentType\"\n                (change)=\"updateEnrollment()\"\n                >\n                <option value=\"ott\">One Time Token</option>\n                <option value=\"CA\" [hidden]=\"!canReadRelated('cas')\">Certificate Authority</option>\n                <option value=\"updb\">UPDB</option>\n                <option value=\"none\">None</option>\n              </select>\n              @if (enrollmentType === 'CA' && canReadRelated('cas')) {\n                <select\n                  id=\"CertAuthorities\"\n                  class=\"form-field-dropdown\"\n                  [ngClass]=\"{disabled: isEditing, error: errors.enrollmentCA}\"\n                  [disabled]=\"useStrictReadonlyForm || isEditing\"\n                  [(ngModel)]=\"enrollmentCA\"\n                  (change)=\"updateEnrollment()\"\n                  >\n                  @for (ca of cas; track ca) {\n                    <option [value]=\"ca.id\">{{ca.name}}</option>\n                  }\n                </select>\n              }\n              @if (enrollmentType === 'updb' && !isEditing) {\n                <input\n                  id=\"UPDBName\"\n                  class=\"form-field-input\"\n                  [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                  [(ngModel)]=\"enrollmentUPDB\"\n                  (keyup)=\"updateEnrollment()\"\n                  type=\"text\"\n                  maxlength=\"500\"\n                  placeholder=\"Enter a name\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  >\n              }\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Admin'\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced is-admin-container\"\n              >\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">IS ADMIN</div>\n                  <div\n                    (click)=\"toggleIsAdmin()\"\n                    [ngClass]=\"{ on: formData.isAdmin, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Hosting Cost'\"\n              [title2]=\"'Precedence'\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced\"\n              >\n              <input\n                class=\"form-field-input\"\n                [(ngModel)]=\"formData.defaultHostingCost\"\n                type=\"number\"\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n              <select\n                [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                id=\"hostingPrecedence\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"default\">Default</option>\n                <option value=\"required\">Required</option>\n                <option value=\"failed\">Failed</option>\n              </select>\n            </lib-form-field-container>\n            @for (tagElement of tagElements; track tagElement) {\n              <lib-form-field-container\n                [title]=\"tagElement.label\"\n                [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <div [innerHTML]=\"tagElement.content | safe\"></div>\n              </lib-form-field-container>\n            }\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n            <lib-form-field-container\n              [title]=\"'App Data'\"\n              [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n            </lib-form-field-container>\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (isEdit && (hasEnrolmentToken || hasAuthenticator)) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              [layout]=\"'column'\"\n              [contentStyle]=\"'z-index: 99999999'\"\n              >\n              <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Enrollment:</span>\n                  </div>\n                  @if (jwtExpired !== undefined && !showResetToken) {\n                    <span class=\"form-field-label info-text\"\n                      [class.expired-text]=\"jwtExpired\"\n                      >\n                      {{jwtExpired ? 'EXPIRED' : 'EXPIRES'}} {{expirationDate}}\n                    </span>\n                  }\n                </div>\n                @if (!useStrictReadonlyForm) {\n                <lib-qr-code\n                  [identity]=\"formData\"\n                  [jwt]=\"jwt\"\n                  [expiration]=\"enrollmentExpiration\"\n                  [authenticators]=\"formData.authenticators\"\n                  [type]=\"'identity'\"\n                  [canExpand]=\"true\"\n                  (doRefresh)=\"refreshIdentity(true)\"\n                ></lib-qr-code>\n                }\n              </div>\n            </lib-form-field-container>\n          }\n          @if (isEdit && !useStrictReadonlyForm) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              [layout]=\"'column'\"\n              [contentStyle]=\"'z-index: 99999999'\"\n              >\n              <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Enable / Disable:</span>\n                  </div>\n                </div>\n                @if (entityDisabled) {\n                  <div class=\"disable-identity-button-container\" (click)=\"enableIdentity()\">\n                    <div class=\"disable-identity-background\"></div>\n                    <button class=\"download-button disable-identity-button\">Enable Identity</button>\n                  </div>\n                }\n                @if (!entityDisabled) {\n                  <div class=\"disable-identity-button-container\" (click)=\"disableIdentity()\">\n                    <div class=\"disable-identity-background\"></div>\n                    <button class=\"download-button disable-identity-button\">Disable Identity</button>\n                  </div>\n                }\n              </div>\n              @if (!entityDisabled) {\n                <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Disable Until:</span>\n                    </div>\n                  </div>\n                  <div class=\"disable-identity-duration-container\">\n                    <select [(ngModel)]=\"disableDurationType\" id=\"DurationType\" class=\"form-field-dropdown\">\n                      <option value=\"indefinite\">Indefinite</option>\n                      <option value=\"pick-date\">Pick a Date & Time</option>\n                    </select>\n                    @if (disableDurationType === 'pick-date') {\n                      <div class=\"disable-identity-datetime-inputs\">\n                        <lib-date-time-picker\n                          class=\"disable-identity-date-time-picker\"\n                          [(ngModel)]=\"disableDuration\"\n                          [minDate]=\"minDate\"\n                          [closeOnDateSelect]=\"true\"\n                        ></lib-date-time-picker>\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </lib-form-field-container>\n          }\n          @if (formData.id && canReadRelated('services')) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n              >\n              <lib-preview-list\n                (itemSelected)=\"serviceSelected($event)\"\n                [clickable]=\"true\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"associatedServiceNames\"\n              ></lib-preview-list>\n              <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n              </div>\n            </lib-form-field-container>\n          }\n          @if (formData.id && canReadRelated('service-policies')) {\n            <lib-form-field-container\n              [title]=\"'Associated Service Policies'\"\n              [count]=\"associatedServicePolicies.length\"\n              [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n              >\n              <lib-preview-list\n                (itemSelected)=\"serviceSelected($event)\"\n                [clickable]=\"false\"\n                [isLoading]=\"servicePoliciesLoading\"\n                [allNames]=\"associatedServicePolicyNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"''\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.disable-identity-button-container{position:relative}.disable-identity-duration-container{display:flex;flex-direction:row;gap:var(--gapMedium);flex-wrap:wrap;width:100%;max-width:100%}.disable-identity-duration-container .form-field-dropdown{min-width:10rem;flex:1 1 10rem;width:100%;max-width:100%}.disable-identity-datetime-inputs{display:flex;flex-direction:row;gap:var(--gapMedium);align-items:center;flex:1 1 16.5rem;min-width:0;max-width:100%}.disable-identity-date-time-picker{width:100%;max-width:100%;min-width:0;flex:1 1 16.5rem}.disable-identity-background{width:100%;height:100%;position:absolute;background:var(--red);border-radius:var(--inputBorderRadius);filter:brightness(.95);height:var(--defaultInputHeight)}.disable-identity-button{background:transparent;border:none;position:relative;z-index:9999999;display:flex;align-items:center;justify-content:center;height:var(--defaultInputHeight)}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.info-text{color:var(--groupText)}.info-text.expired-text{color:var(--red)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .copy-text.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}.disable-identity-datetime-inputs{width:100%}.disable-identity-date-time-picker{flex:1 1 100%;width:100%;min-width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -19284,6 +19710,16 @@ class EdgeRouterFormComponent extends ProjectableForm {
     get hasEnrolmentToken() {
         return !isEmpty(this.formData.enrollmentJwt) || !isEmpty(this.formData.enrollmentToken);
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     headerActionRequested(action) {
         switch (action.name) {
             case 'save':
@@ -19390,7 +19826,7 @@ class EdgeRouterFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EdgeRouterFormComponent, decorators: [{
             type: Component,
@@ -19399,7 +19835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"] }]
+                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"] }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -19487,7 +19923,7 @@ class TransitRouterFormService {
         this.growlerService.show(growlerData);
     }
     getAssociatedServices(id) {
-        this.zitiService.getSubdata('transit-routers', id, 'services').then((result) => {
+        this.zitiService.getSubdata('transit-routers', id, 'services', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedServices = result.data;
             this.associatedServiceNames = this.associatedServices.map((svc) => {
                 return svc.name;
@@ -19495,7 +19931,7 @@ class TransitRouterFormService {
         });
     }
     getAssociatedIdentities(id) {
-        this.zitiService.getSubdata('transit-routers', id, 'identities').then((result) => {
+        this.zitiService.getSubdata('transit-routers', id, 'identities', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedIdentities = result.data;
             this.associatedIdentityNames = this.associatedIdentities.map((policy) => {
                 return policy.name;
@@ -19615,6 +20051,16 @@ class TransitRouterFormComponent extends ProjectableForm {
                 break;
         }
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     async save(event) {
         if (!this.canSaveByPermissions()) {
             return;
@@ -19703,7 +20149,7 @@ class TransitRouterFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Transit Router: ' : 'Create New Transit Router'\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-form-container projectable-form-container\">\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Transit Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this transit router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            [layout]=\"'row'\"\n            >\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Cost</span>\n              </div>\n                <input\n                  type=\"number\"\n                  class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                  [ngClass]=\"{error: errors['cost']}\"\n                  [(ngModel)]=\"formData.cost\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  />\n            </div>\n            <div class=\"config-item\">\n              <div class=\"config-container toggle-container\">\n                <div class=\"config-container-label\">ENABLED</div>\n                <div\n                  (click)=\"!useStrictReadonlyForm && toggleDisabled()\"\n                  [ngClass]=\"{ on: !formData.disabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                  class=\"toggle\"\n                  >\n                  <span [hidden]=\"formData.disabled\" class=\"on-label\">YES</span>\n                  <span [hidden]=\"!formData.disabled\" 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=\"config-container-label\">ALLOW TRAVERSAL</div>\n                <div\n                  (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                  [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                  class=\"toggle\"\n                  >\n                  <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                  <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                  <div class=\"switch\"></div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div 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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Transit Router: ' : 'Create New Transit Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-form-container projectable-form-container\">\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Transit Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this transit router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            [layout]=\"'row'\"\n            >\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Cost</span>\n              </div>\n                <input\n                  type=\"number\"\n                  class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                  [ngClass]=\"{error: errors['cost']}\"\n                  [(ngModel)]=\"formData.cost\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  />\n            </div>\n            <div class=\"config-item\">\n              <div class=\"config-container toggle-container\">\n                <div class=\"config-container-label\">ENABLED</div>\n                <div\n                  (click)=\"!useStrictReadonlyForm && toggleDisabled()\"\n                  [ngClass]=\"{ on: !formData.disabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                  class=\"toggle\"\n                  >\n                  <span [hidden]=\"formData.disabled\" class=\"on-label\">YES</span>\n                  <span [hidden]=\"!formData.disabled\" 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=\"config-container-label\">ALLOW TRAVERSAL</div>\n                <div\n                  (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                  [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                  class=\"toggle\"\n                  >\n                  <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                  <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                  <div class=\"switch\"></div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div 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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TransitRouterFormComponent, decorators: [{
             type: Component,
@@ -19712,7 +20158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Transit Router: ' : 'Create New Transit Router'\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-form-container projectable-form-container\">\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Transit Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this transit router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            [layout]=\"'row'\"\n            >\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Cost</span>\n              </div>\n                <input\n                  type=\"number\"\n                  class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                  [ngClass]=\"{error: errors['cost']}\"\n                  [(ngModel)]=\"formData.cost\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  />\n            </div>\n            <div class=\"config-item\">\n              <div class=\"config-container toggle-container\">\n                <div class=\"config-container-label\">ENABLED</div>\n                <div\n                  (click)=\"!useStrictReadonlyForm && toggleDisabled()\"\n                  [ngClass]=\"{ on: !formData.disabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                  class=\"toggle\"\n                  >\n                  <span [hidden]=\"formData.disabled\" class=\"on-label\">YES</span>\n                  <span [hidden]=\"!formData.disabled\" 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=\"config-container-label\">ALLOW TRAVERSAL</div>\n                <div\n                  (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                  [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                  class=\"toggle\"\n                  >\n                  <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                  <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                  <div class=\"switch\"></div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div 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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}\n"] }]
+                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Transit Router: ' : 'Create New Transit Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-form-container projectable-form-container\">\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Transit Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this transit router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            [layout]=\"'row'\"\n            >\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Cost</span>\n              </div>\n                <input\n                  type=\"number\"\n                  class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                  [ngClass]=\"{error: errors['cost']}\"\n                  [(ngModel)]=\"formData.cost\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  />\n            </div>\n            <div class=\"config-item\">\n              <div class=\"config-container toggle-container\">\n                <div class=\"config-container-label\">ENABLED</div>\n                <div\n                  (click)=\"!useStrictReadonlyForm && toggleDisabled()\"\n                  [ngClass]=\"{ on: !formData.disabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                  class=\"toggle\"\n                  >\n                  <span [hidden]=\"formData.disabled\" class=\"on-label\">YES</span>\n                  <span [hidden]=\"!formData.disabled\" 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=\"config-container-label\">ALLOW TRAVERSAL</div>\n                <div\n                  (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                  [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                  class=\"toggle\"\n                  >\n                  <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                  <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                  <div class=\"switch\"></div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div 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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}\n"] }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -20385,6 +20831,16 @@ class ServiceFormComponent extends ProjectableForm {
                 break;
         }
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     async save(event) {
         if (!this.canSaveByPermissions()) {
             return;
@@ -20448,7 +20904,7 @@ class ServiceFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"returnToListPage()\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container [title]=\"'Service Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n              class=\"form-field-input\"\n              placeholder=\"Name this Service\"\n              [ngClass]=\"{error: svc.errors['name']}\"\n              [(ngModel)]=\"formData.name\"\n              autofocus\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Service attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"serviceRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Services'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        @if (!useStrictReadonlyForm && canCreateConfig) {\n          <lib-form-field-container\n            [title]=\"'Add Configurations'\"\n            (actionRequested)=\"attachConfig()\"\n            (keyup.enter)=\"captureConfigEnterEvent($event)\"\n            [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n            >\n            <div class=\"form-field-input-group\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Select a Config</span>\n              </div>\n              <select\n                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                (change)=\"configTypeChanged($event)\"\n                id=\"SelectedConfigType\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n              <option value=\"\">Select configuration type...</option>\n              @for (type of svc.configTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n            <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n              <lib-filter-select\n                placeholder=\"Select configuration...\"\n                optionLabel=\"name\"\n                optionValue=\"id\"\n                [options]=\"svc.filteredConfigs\"\n                [showClear]=\"true\"\n                [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                (selectionChange)=\"configChanged($event)\"\n                (filterChange)=\"configFilterChangedDebounced($event)\"\n                [(ngModel)]=\"svc.selectedConfigId\"\n              ></lib-filter-select>\n            </div>\n            @if (!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview') {\n              <div class=\"button-row-right\" >\n                <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                  {{svc.attachLabel}}\n                </div>\n              </div>\n            }\n            <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n              @if (showConfigData) {\n                <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                  <span class=\"form-field-title\">Config Name</span>\n                  @if (svc.selectedConfigId !== 'preview') {\n                    <div\n                      class=\"save-button\"\n                      (click)=\"attachConfig()\"\n                      >{{svc.attachLabel}}\n                    </div>\n                  }\n                </div>\n              }\n              @if (showConfigData) {\n                  <input\n                    [(ngModel)]=\"svc.newConfigName\"\n                    class=\"form-field-input\"\n                    [placeholder]=\"'New Config Name'\"\n                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                    style=\"margin-bottom: 20px;\"\n                    />\n              }\n              <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                <span class=\"form-field-title\">Configuration Data</span>\n                @if (svc.selectedConfigId !== 'preview') {\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                }\n              </div>\n              <lib-config-editor\n                [(configData)]=\"svc.configData\"\n                [schema]=\"svc.selectedSchema\"\n                [showJsonView]=\"svc.configJsonView\"\n                [(configErrors)]=\"svc.configErrors\"\n                #configEditor\n              ></lib-config-editor>\n            </div>\n          </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore) {\n          <div class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Terminator Strategy'\"\n              [title2]=\"'Encryption'\"\n              [layout]=\"'row'\"\n              [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n              [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                [(ngModel)]=\"formData.terminatorStrategy\"\n                id=\"authPolicyId\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"\">Select a Strategy....</option>\n                @for (strat of strategies; track strat) {\n                  <option\n                    [value]=\"strat.id\"\n                    >\n                    {{ strat.label }}\n                  </option>\n                }\n              </select>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Require Encryption</div>\n                  <div\n                    (click)=\"toggleEncryptionRequired()\"\n                    [ngClass]=\"{ on: formData.encryptionRequired, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Custom Tags'\"\n              [label]=\"'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          </div>\n        }\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Associated Entities'\"\n          [label]=\"'click item to view details'\"\n          [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n          [class]=\"'no-gap'\"\n          >\n          @if (canReadRelated('configs')) {\n            <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Configurations</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedConfigsLoading\"\n              [allNames]=\"svc.addedConfigs\"\n              [allowRemove]=\"!useStrictReadonlyForm\"\n              [clickable]=\"true\"\n              [tooltip]=\"'View Config'\"\n              [showfilter]=\"false\"\n              (itemRemoved)=\"svc.removeConfig($event)\"\n              (itemSelected)=\"svc.previewConfig($event, router)\"\n            ></lib-preview-list>\n          }\n          @if (canReadRelated('service-policies')) {\n            <div class=\"form-row space-between\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Service Policies</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedServicePoliciesLoading\"\n              [clickable]=\"true\"\n              (itemSelected)=\"svc.previewPolicy($event, router)\"\n              [tooltip]=\"'View Service Policy'\"\n              [allNames]=\"svc.associatedServicePolicies\"\n              [showfilter]=\"svc.showServicePoliciesFilter\"\n              [localFilter]=\"false\"\n              (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n            ></lib-preview-list>\n          }\n          <div class=\"form-row space-between\">\n            <div class=\"config-title-row\">\n              <span class=\"form-field-title\">Terminators</span>\n            </div>\n            <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n          </div>\n          <lib-preview-list\n            [isLoading]=\"svc.associatedTerminatorsLoading\"\n            [clickable]=\"true\"\n            (itemSelected)=\"svc.previewTerminator($event, router)\"\n            [tooltip]=\"'View Terminator'\"\n            [allNames]=\"svc.associatedTerminators\"\n            [showfilter]=\"false\"\n            [showfilter]=\"svc.showTerminatorsFilter\"\n            [localFilter]=\"false\"\n            (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n          ></lib-preview-list>\n        </lib-form-field-container>\n        <!--                <lib-form-field-container\n        *ngIf=\"formData.id\"\n        [title]=\"'Associated Service Policies'\"\n        [count]=\"svc.associatedServicePolicies.length\"\n        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n        >\n      </lib-form-field-container>-->\n      @if (showApiCalls) {\n        <lib-form-field-container\n          [title]=\"'API Calls'\"\n          [label]=\"''\"\n          [class]=\"'api-call-container'\"\n          [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n          >\n          <div class=\"form-row\">\n            <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n            <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n          </div>\n          @if (formData) {\n            <lib-json-view [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n          }\n        </lib-form-field-container>\n      }\n    </div>\n  </div>\n  @if (formView === 'raw') {\n    <div class=\"form-group-column\">\n      @if (formData) {\n        <lib-json-view [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n      }\n    </div>\n  }\n</div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["readOnly", "configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }] }); }
+        ], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"returnToListPage()\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container [title]=\"'Service Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n              class=\"form-field-input\"\n              placeholder=\"Name this Service\"\n              [ngClass]=\"{error: svc.errors['name']}\"\n              [(ngModel)]=\"formData.name\"\n              autofocus\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Service attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"serviceRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Services'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        @if (!useStrictReadonlyForm && canCreateConfig) {\n          <lib-form-field-container\n            [title]=\"'Add Configurations'\"\n            (actionRequested)=\"attachConfig()\"\n            (keyup.enter)=\"captureConfigEnterEvent($event)\"\n            [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n            >\n            <div class=\"form-field-input-group\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Select a Config</span>\n              </div>\n              <select\n                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                (change)=\"configTypeChanged($event)\"\n                id=\"SelectedConfigType\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n              <option value=\"\">Select configuration type...</option>\n              @for (type of svc.configTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n            <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n              <lib-filter-select\n                placeholder=\"Select configuration...\"\n                optionLabel=\"name\"\n                optionValue=\"id\"\n                [options]=\"svc.filteredConfigs\"\n                [showClear]=\"true\"\n                [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                (selectionChange)=\"configChanged($event)\"\n                (filterChange)=\"configFilterChangedDebounced($event)\"\n                [(ngModel)]=\"svc.selectedConfigId\"\n              ></lib-filter-select>\n            </div>\n            @if (!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview') {\n              <div class=\"button-row-right\" >\n                <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                  {{svc.attachLabel}}\n                </div>\n              </div>\n            }\n            <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n              @if (showConfigData) {\n                <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                  <span class=\"form-field-title\">Config Name</span>\n                  @if (svc.selectedConfigId !== 'preview') {\n                    <div\n                      class=\"save-button\"\n                      (click)=\"attachConfig()\"\n                      >{{svc.attachLabel}}\n                    </div>\n                  }\n                </div>\n              }\n              @if (showConfigData) {\n                  <input\n                    [(ngModel)]=\"svc.newConfigName\"\n                    class=\"form-field-input\"\n                    [placeholder]=\"'New Config Name'\"\n                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                    style=\"margin-bottom: 20px;\"\n                    />\n              }\n              <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                <span class=\"form-field-title\">Configuration Data</span>\n                @if (svc.selectedConfigId !== 'preview') {\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                }\n              </div>\n              <lib-config-editor\n                [(configData)]=\"svc.configData\"\n                [schema]=\"svc.selectedSchema\"\n                [showJsonView]=\"svc.configJsonView\"\n                [(configErrors)]=\"svc.configErrors\"\n                #configEditor\n              ></lib-config-editor>\n            </div>\n          </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore) {\n          <div class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Terminator Strategy'\"\n              [title2]=\"'Encryption'\"\n              [layout]=\"'row'\"\n              [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n              [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                [(ngModel)]=\"formData.terminatorStrategy\"\n                id=\"authPolicyId\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"\">Select a Strategy....</option>\n                @for (strat of strategies; track strat) {\n                  <option\n                    [value]=\"strat.id\"\n                    >\n                    {{ strat.label }}\n                  </option>\n                }\n              </select>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Require Encryption</div>\n                  <div\n                    (click)=\"toggleEncryptionRequired()\"\n                    [ngClass]=\"{ on: formData.encryptionRequired, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Custom Tags'\"\n              [label]=\"'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          </div>\n        }\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Associated Entities'\"\n          [label]=\"'click item to view details'\"\n          [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n          [class]=\"'no-gap'\"\n          >\n          @if (canReadRelated('configs')) {\n            <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Configurations</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedConfigsLoading\"\n              [allNames]=\"svc.addedConfigs\"\n              [allowRemove]=\"!useStrictReadonlyForm\"\n              [clickable]=\"true\"\n              [tooltip]=\"'View Config'\"\n              [showfilter]=\"false\"\n              (itemRemoved)=\"svc.removeConfig($event)\"\n              (itemSelected)=\"svc.previewConfig($event, router)\"\n            ></lib-preview-list>\n          }\n          @if (canReadRelated('service-policies')) {\n            <div class=\"form-row space-between\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Service Policies</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedServicePoliciesLoading\"\n              [clickable]=\"true\"\n              (itemSelected)=\"svc.previewPolicy($event, router)\"\n              [tooltip]=\"'View Service Policy'\"\n              [allNames]=\"svc.associatedServicePolicies\"\n              [showfilter]=\"svc.showServicePoliciesFilter\"\n              [localFilter]=\"false\"\n              (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n            ></lib-preview-list>\n          }\n          <div class=\"form-row space-between\">\n            <div class=\"config-title-row\">\n              <span class=\"form-field-title\">Terminators</span>\n            </div>\n            <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n          </div>\n          <lib-preview-list\n            [isLoading]=\"svc.associatedTerminatorsLoading\"\n            [clickable]=\"true\"\n            (itemSelected)=\"svc.previewTerminator($event, router)\"\n            [tooltip]=\"'View Terminator'\"\n            [allNames]=\"svc.associatedTerminators\"\n            [showfilter]=\"false\"\n            [showfilter]=\"svc.showTerminatorsFilter\"\n            [localFilter]=\"false\"\n            (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n          ></lib-preview-list>\n        </lib-form-field-container>\n        <!--                <lib-form-field-container\n        *ngIf=\"formData.id\"\n        [title]=\"'Associated Service Policies'\"\n        [count]=\"svc.associatedServicePolicies.length\"\n        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n        >\n      </lib-form-field-container>-->\n      @if (showApiCalls) {\n        <lib-form-field-container\n          [title]=\"'API Calls'\"\n          [label]=\"''\"\n          [class]=\"'api-call-container'\"\n          [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n          >\n          <div class=\"form-row\">\n            <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n            <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n          </div>\n          @if (formData) {\n            <lib-json-view [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n          }\n        </lib-form-field-container>\n      }\n    </div>\n  </div>\n  @if (formView === 'raw') {\n    <div class=\"form-group-column\">\n      @if (formData) {\n        <lib-json-view [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n      }\n    </div>\n  }\n</div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["readOnly", "configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServiceFormComponent, decorators: [{
             type: Component,
@@ -20457,7 +20913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"returnToListPage()\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container [title]=\"'Service Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n              class=\"form-field-input\"\n              placeholder=\"Name this Service\"\n              [ngClass]=\"{error: svc.errors['name']}\"\n              [(ngModel)]=\"formData.name\"\n              autofocus\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Service attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"serviceRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Services'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        @if (!useStrictReadonlyForm && canCreateConfig) {\n          <lib-form-field-container\n            [title]=\"'Add Configurations'\"\n            (actionRequested)=\"attachConfig()\"\n            (keyup.enter)=\"captureConfigEnterEvent($event)\"\n            [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n            >\n            <div class=\"form-field-input-group\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Select a Config</span>\n              </div>\n              <select\n                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                (change)=\"configTypeChanged($event)\"\n                id=\"SelectedConfigType\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n              <option value=\"\">Select configuration type...</option>\n              @for (type of svc.configTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n            <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n              <lib-filter-select\n                placeholder=\"Select configuration...\"\n                optionLabel=\"name\"\n                optionValue=\"id\"\n                [options]=\"svc.filteredConfigs\"\n                [showClear]=\"true\"\n                [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                (selectionChange)=\"configChanged($event)\"\n                (filterChange)=\"configFilterChangedDebounced($event)\"\n                [(ngModel)]=\"svc.selectedConfigId\"\n              ></lib-filter-select>\n            </div>\n            @if (!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview') {\n              <div class=\"button-row-right\" >\n                <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                  {{svc.attachLabel}}\n                </div>\n              </div>\n            }\n            <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n              @if (showConfigData) {\n                <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                  <span class=\"form-field-title\">Config Name</span>\n                  @if (svc.selectedConfigId !== 'preview') {\n                    <div\n                      class=\"save-button\"\n                      (click)=\"attachConfig()\"\n                      >{{svc.attachLabel}}\n                    </div>\n                  }\n                </div>\n              }\n              @if (showConfigData) {\n                  <input\n                    [(ngModel)]=\"svc.newConfigName\"\n                    class=\"form-field-input\"\n                    [placeholder]=\"'New Config Name'\"\n                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                    style=\"margin-bottom: 20px;\"\n                    />\n              }\n              <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                <span class=\"form-field-title\">Configuration Data</span>\n                @if (svc.selectedConfigId !== 'preview') {\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                }\n              </div>\n              <lib-config-editor\n                [(configData)]=\"svc.configData\"\n                [schema]=\"svc.selectedSchema\"\n                [showJsonView]=\"svc.configJsonView\"\n                [(configErrors)]=\"svc.configErrors\"\n                #configEditor\n              ></lib-config-editor>\n            </div>\n          </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore) {\n          <div class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Terminator Strategy'\"\n              [title2]=\"'Encryption'\"\n              [layout]=\"'row'\"\n              [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n              [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                [(ngModel)]=\"formData.terminatorStrategy\"\n                id=\"authPolicyId\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"\">Select a Strategy....</option>\n                @for (strat of strategies; track strat) {\n                  <option\n                    [value]=\"strat.id\"\n                    >\n                    {{ strat.label }}\n                  </option>\n                }\n              </select>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Require Encryption</div>\n                  <div\n                    (click)=\"toggleEncryptionRequired()\"\n                    [ngClass]=\"{ on: formData.encryptionRequired, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Custom Tags'\"\n              [label]=\"'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          </div>\n        }\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Associated Entities'\"\n          [label]=\"'click item to view details'\"\n          [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n          [class]=\"'no-gap'\"\n          >\n          @if (canReadRelated('configs')) {\n            <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Configurations</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedConfigsLoading\"\n              [allNames]=\"svc.addedConfigs\"\n              [allowRemove]=\"!useStrictReadonlyForm\"\n              [clickable]=\"true\"\n              [tooltip]=\"'View Config'\"\n              [showfilter]=\"false\"\n              (itemRemoved)=\"svc.removeConfig($event)\"\n              (itemSelected)=\"svc.previewConfig($event, router)\"\n            ></lib-preview-list>\n          }\n          @if (canReadRelated('service-policies')) {\n            <div class=\"form-row space-between\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Service Policies</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedServicePoliciesLoading\"\n              [clickable]=\"true\"\n              (itemSelected)=\"svc.previewPolicy($event, router)\"\n              [tooltip]=\"'View Service Policy'\"\n              [allNames]=\"svc.associatedServicePolicies\"\n              [showfilter]=\"svc.showServicePoliciesFilter\"\n              [localFilter]=\"false\"\n              (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n            ></lib-preview-list>\n          }\n          <div class=\"form-row space-between\">\n            <div class=\"config-title-row\">\n              <span class=\"form-field-title\">Terminators</span>\n            </div>\n            <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n          </div>\n          <lib-preview-list\n            [isLoading]=\"svc.associatedTerminatorsLoading\"\n            [clickable]=\"true\"\n            (itemSelected)=\"svc.previewTerminator($event, router)\"\n            [tooltip]=\"'View Terminator'\"\n            [allNames]=\"svc.associatedTerminators\"\n            [showfilter]=\"false\"\n            [showfilter]=\"svc.showTerminatorsFilter\"\n            [localFilter]=\"false\"\n            (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n          ></lib-preview-list>\n        </lib-form-field-container>\n        <!--                <lib-form-field-container\n        *ngIf=\"formData.id\"\n        [title]=\"'Associated Service Policies'\"\n        [count]=\"svc.associatedServicePolicies.length\"\n        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n        >\n      </lib-form-field-container>-->\n      @if (showApiCalls) {\n        <lib-form-field-container\n          [title]=\"'API Calls'\"\n          [label]=\"''\"\n          [class]=\"'api-call-container'\"\n          [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n          >\n          <div class=\"form-row\">\n            <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n            <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n          </div>\n          @if (formData) {\n            <lib-json-view [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n          }\n        </lib-form-field-container>\n      }\n    </div>\n  </div>\n  @if (formView === 'raw') {\n    <div class=\"form-group-column\">\n      @if (formData) {\n        <lib-json-view [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n      }\n    </div>\n  }\n</div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"] }]
+                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"returnToListPage()\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container [title]=\"'Service Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n              class=\"form-field-input\"\n              placeholder=\"Name this Service\"\n              [ngClass]=\"{error: svc.errors['name']}\"\n              [(ngModel)]=\"formData.name\"\n              autofocus\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Service attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"serviceRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Services'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        @if (!useStrictReadonlyForm && canCreateConfig) {\n          <lib-form-field-container\n            [title]=\"'Add Configurations'\"\n            (actionRequested)=\"attachConfig()\"\n            (keyup.enter)=\"captureConfigEnterEvent($event)\"\n            [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n            >\n            <div class=\"form-field-input-group\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Select a Config</span>\n              </div>\n              <select\n                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                (change)=\"configTypeChanged($event)\"\n                id=\"SelectedConfigType\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n              <option value=\"\">Select configuration type...</option>\n              @for (type of svc.configTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n            <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n              <lib-filter-select\n                placeholder=\"Select configuration...\"\n                optionLabel=\"name\"\n                optionValue=\"id\"\n                [options]=\"svc.filteredConfigs\"\n                [showClear]=\"true\"\n                [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                (selectionChange)=\"configChanged($event)\"\n                (filterChange)=\"configFilterChangedDebounced($event)\"\n                [(ngModel)]=\"svc.selectedConfigId\"\n              ></lib-filter-select>\n            </div>\n            @if (!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview') {\n              <div class=\"button-row-right\" >\n                <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                  {{svc.attachLabel}}\n                </div>\n              </div>\n            }\n            <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n              @if (showConfigData) {\n                <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                  <span class=\"form-field-title\">Config Name</span>\n                  @if (svc.selectedConfigId !== 'preview') {\n                    <div\n                      class=\"save-button\"\n                      (click)=\"attachConfig()\"\n                      >{{svc.attachLabel}}\n                    </div>\n                  }\n                </div>\n              }\n              @if (showConfigData) {\n                  <input\n                    [(ngModel)]=\"svc.newConfigName\"\n                    class=\"form-field-input\"\n                    [placeholder]=\"'New Config Name'\"\n                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                    style=\"margin-bottom: 20px;\"\n                    />\n              }\n              <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                <span class=\"form-field-title\">Configuration Data</span>\n                @if (svc.selectedConfigId !== 'preview') {\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                }\n              </div>\n              <lib-config-editor\n                [(configData)]=\"svc.configData\"\n                [schema]=\"svc.selectedSchema\"\n                [showJsonView]=\"svc.configJsonView\"\n                [(configErrors)]=\"svc.configErrors\"\n                #configEditor\n              ></lib-config-editor>\n            </div>\n          </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore) {\n          <div class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Terminator Strategy'\"\n              [title2]=\"'Encryption'\"\n              [layout]=\"'row'\"\n              [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n              [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                [(ngModel)]=\"formData.terminatorStrategy\"\n                id=\"authPolicyId\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"\">Select a Strategy....</option>\n                @for (strat of strategies; track strat) {\n                  <option\n                    [value]=\"strat.id\"\n                    >\n                    {{ strat.label }}\n                  </option>\n                }\n              </select>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Require Encryption</div>\n                  <div\n                    (click)=\"toggleEncryptionRequired()\"\n                    [ngClass]=\"{ on: formData.encryptionRequired, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Custom Tags'\"\n              [label]=\"'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          </div>\n        }\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Associated Entities'\"\n          [label]=\"'click item to view details'\"\n          [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n          [class]=\"'no-gap'\"\n          >\n          @if (canReadRelated('configs')) {\n            <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Configurations</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedConfigsLoading\"\n              [allNames]=\"svc.addedConfigs\"\n              [allowRemove]=\"!useStrictReadonlyForm\"\n              [clickable]=\"true\"\n              [tooltip]=\"'View Config'\"\n              [showfilter]=\"false\"\n              (itemRemoved)=\"svc.removeConfig($event)\"\n              (itemSelected)=\"svc.previewConfig($event, router)\"\n            ></lib-preview-list>\n          }\n          @if (canReadRelated('service-policies')) {\n            <div class=\"form-row space-between\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Service Policies</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedServicePoliciesLoading\"\n              [clickable]=\"true\"\n              (itemSelected)=\"svc.previewPolicy($event, router)\"\n              [tooltip]=\"'View Service Policy'\"\n              [allNames]=\"svc.associatedServicePolicies\"\n              [showfilter]=\"svc.showServicePoliciesFilter\"\n              [localFilter]=\"false\"\n              (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n            ></lib-preview-list>\n          }\n          <div class=\"form-row space-between\">\n            <div class=\"config-title-row\">\n              <span class=\"form-field-title\">Terminators</span>\n            </div>\n            <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n          </div>\n          <lib-preview-list\n            [isLoading]=\"svc.associatedTerminatorsLoading\"\n            [clickable]=\"true\"\n            (itemSelected)=\"svc.previewTerminator($event, router)\"\n            [tooltip]=\"'View Terminator'\"\n            [allNames]=\"svc.associatedTerminators\"\n            [showfilter]=\"false\"\n            [showfilter]=\"svc.showTerminatorsFilter\"\n            [localFilter]=\"false\"\n            (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n          ></lib-preview-list>\n        </lib-form-field-container>\n        <!--                <lib-form-field-container\n        *ngIf=\"formData.id\"\n        [title]=\"'Associated Service Policies'\"\n        [count]=\"svc.associatedServicePolicies.length\"\n        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n        >\n      </lib-form-field-container>-->\n      @if (showApiCalls) {\n        <lib-form-field-container\n          [title]=\"'API Calls'\"\n          [label]=\"''\"\n          [class]=\"'api-call-container'\"\n          [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n          >\n          <div class=\"form-row\">\n            <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n            <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n          </div>\n          @if (formData) {\n            <lib-json-view [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n          }\n        </lib-form-field-container>\n      }\n    </div>\n  </div>\n  @if (formView === 'raw') {\n    <div class=\"form-group-column\">\n      @if (formData) {\n        <lib-json-view [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n      }\n    </div>\n  }\n</div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -20989,7 +21445,9 @@ class SimpleServiceComponent extends ProjectableForm {
             this.identityNamedAttributes = namedAttributes;
             this.mergeSelectedIdentityNamesIntoAvailableList();
         }).finally(() => {
-            this.identitiesInit.next(true);
+            if (!this.identitiesInit.value) {
+                this.identitiesInit.next(true);
+            }
         });
     }
     checkAllDataInit() {
@@ -21006,6 +21464,9 @@ class SimpleServiceComponent extends ProjectableForm {
             case 'convert-to-advanced':
                 this.convertToAdvanced();
                 break;
+            case 'delete':
+                this.deleteEntity();
+                break;
         }
     }
     headerActionRequested(action) {
@@ -23098,6 +23559,16 @@ class ServicePolicyFormComponent extends ProjectableForm {
             },
         });
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     headerActionRequested(action) {
         switch (action.name) {
             case 'save':
@@ -23224,7 +23695,7 @@ class ServicePolicyFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onServiceAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onServiceAttributesChanged()\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onIdentityAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onIdentityAttributesChanged()\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Posture Check Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100001'\"\n            [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n              [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n              [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select posture check attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Type'\"\n            [title2]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.type\"\n              (change)=\"onPolicyTypeChanged()\"\n              id=\"PolicyType\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"Bind\">Bind</option>\n              <option value=\"Dial\">Dial</option>\n            </select>\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"onPolicySemanticChanged()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\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            @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Posture Checks'\"\n            [count]=\"svc.associatedPostureCheckNames.length\"\n            [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"postureChecksLoading\"\n              [allNames]=\"svc.associatedPostureCheckNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onServiceAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onServiceAttributesChanged()\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onIdentityAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onIdentityAttributesChanged()\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Posture Check Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100001'\"\n            [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n              [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n              [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select posture check attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Type'\"\n            [title2]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.type\"\n              (change)=\"onPolicyTypeChanged()\"\n              id=\"PolicyType\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"Bind\">Bind</option>\n              <option value=\"Dial\">Dial</option>\n            </select>\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"onPolicySemanticChanged()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\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            @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Posture Checks'\"\n            [count]=\"svc.associatedPostureCheckNames.length\"\n            [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"postureChecksLoading\"\n              [allNames]=\"svc.associatedPostureCheckNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServicePolicyFormComponent, decorators: [{
             type: Component,
@@ -23233,7 +23704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onServiceAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onServiceAttributesChanged()\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onIdentityAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onIdentityAttributesChanged()\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Posture Check Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100001'\"\n            [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n              [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n              [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select posture check attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Type'\"\n            [title2]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.type\"\n              (change)=\"onPolicyTypeChanged()\"\n              id=\"PolicyType\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"Bind\">Bind</option>\n              <option value=\"Dial\">Dial</option>\n            </select>\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"onPolicySemanticChanged()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\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            @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Posture Checks'\"\n            [count]=\"svc.associatedPostureCheckNames.length\"\n            [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"postureChecksLoading\"\n              [allNames]=\"svc.associatedPostureCheckNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
+                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onServiceAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onServiceAttributesChanged()\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onIdentityAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onIdentityAttributesChanged()\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Posture Check Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100001'\"\n            [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n              [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n              [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select posture check attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Type'\"\n            [title2]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.type\"\n              (change)=\"onPolicyTypeChanged()\"\n              id=\"PolicyType\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"Bind\">Bind</option>\n              <option value=\"Dial\">Dial</option>\n            </select>\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"onPolicySemanticChanged()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\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            @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Posture Checks'\"\n            [count]=\"svc.associatedPostureCheckNames.length\"\n            [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"postureChecksLoading\"\n              [allNames]=\"svc.associatedPostureCheckNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -23293,7 +23764,7 @@ class EdgeRouterPolicyFormService {
         });
     }
     getAssociatedServicesByRole(id) {
-        this.zitiService.getSubdata('edge-router-policies', id, 'edge-routers').then((result) => {
+        this.zitiService.getSubdata('edge-router-policies', id, 'edge-routers', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedEdgeRouters = result.data;
             this.associatedEdgeRouterNames = this.associatedEdgeRouters.map((svc) => {
                 return svc.name;
@@ -23301,7 +23772,7 @@ class EdgeRouterPolicyFormService {
         });
     }
     getAssociatedIdentitiesById(id) {
-        this.zitiService.getSubdata('edge-router-policies', id, 'identities').then((result) => {
+        this.zitiService.getSubdata('edge-router-policies', id, 'identities', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedIdentities = result.data;
             this.associatedIdentityNames = this.associatedIdentities.map((ident) => {
                 return ident.name;
@@ -23556,6 +24027,16 @@ class EdgeRouterPolicyFormComponent extends ProjectableForm {
                 break;
         }
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     async save(event) {
         if (!this.canSaveByPermissions()) {
             return;
@@ -23660,7 +24141,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EdgeRouterPolicyFormComponent, decorators: [{
             type: Component,
@@ -23669,7 +24150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
+                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -24454,6 +24935,16 @@ class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
                 break;
         }
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     async save(event) {
         if (!this.canSaveByPermissions()) {
             return;
@@ -24561,7 +25052,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServiceEdgeRouterPolicyFormComponent, decorators: [{
             type: Component,
@@ -24570,7 +25061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
+                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -24963,7 +25454,7 @@ class ConfigurationService {
         });
     }
     getAssociatedServices(configId) {
-        return this.dataService.getSubdata('configs', configId, 'services').then((result) => {
+        return this.dataService.getSubdata('configs', configId, 'services', this.dataService.DEFAULT_PAGING).then((result) => {
             const associatedServices = result.data;
             const associatedServiceNames = associatedServices.map((svc) => {
                 return svc.name;
@@ -25137,6 +25628,16 @@ class ConfigurationFormComponent extends ProjectableForm {
                 break;
         }
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     apiActionRequested(action) {
         switch (action.id) {
             case 'cli':
@@ -25323,11 +25824,11 @@ class ConfigurationFormComponent extends ProjectableForm {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigurationFormComponent, deps: [{ token: ConfigurationService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ConfigurationFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { 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  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"config-form-container projectable-form-container\" #formContainer>\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n          <input\n            class=\"form-field-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            [disabled]=\"useStrictReadonlyForm\"\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              [disabled]=\"useStrictReadonlyForm || isEditing\"\n              >\n              <option value=\"\">Select A Type...</option>\n              @for (config of options; track config) {\n                <option\n                  [value]=\"config.id\">{{config.name}}\n                </option>\n              }\n            </select>\n            <lib-config-editor\n              [hidden]=\"configTypeEmpty\"\n              [schema]=\"selectedSchema\"\n              [(configData)]=\"formData.data\"\n              [showJsonView]=\"svc.configJsonView\"\n              [(configErrors)]=\"errors\"\n              [readOnly]=\"useStrictReadonlyForm\"\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          @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"_apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["readOnly", "configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ConfigurationFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { 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  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"config-form-container projectable-form-container\" #formContainer>\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n          <input\n            class=\"form-field-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            [disabled]=\"useStrictReadonlyForm\"\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              [disabled]=\"useStrictReadonlyForm || isEditing\"\n              >\n              <option value=\"\">Select A Type...</option>\n              @for (config of options; track config) {\n                <option\n                  [value]=\"config.id\">{{config.name}}\n                </option>\n              }\n            </select>\n            <lib-config-editor\n              [hidden]=\"configTypeEmpty\"\n              [schema]=\"selectedSchema\"\n              [(configData)]=\"formData.data\"\n              [showJsonView]=\"svc.configJsonView\"\n              [(configErrors)]=\"errors\"\n              [readOnly]=\"useStrictReadonlyForm\"\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          @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"_apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\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}.projectable-form-main-column.center-only-column{justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["readOnly", "configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigurationFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"config-form-container projectable-form-container\" #formContainer>\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n          <input\n            class=\"form-field-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            [disabled]=\"useStrictReadonlyForm\"\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              [disabled]=\"useStrictReadonlyForm || isEditing\"\n              >\n              <option value=\"\">Select A Type...</option>\n              @for (config of options; track config) {\n                <option\n                  [value]=\"config.id\">{{config.name}}\n                </option>\n              }\n            </select>\n            <lib-config-editor\n              [hidden]=\"configTypeEmpty\"\n              [schema]=\"selectedSchema\"\n              [(configData)]=\"formData.data\"\n              [showJsonView]=\"svc.configJsonView\"\n              [(configErrors)]=\"errors\"\n              [readOnly]=\"useStrictReadonlyForm\"\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          @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"_apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\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"] }]
+            args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"config-form-container projectable-form-container\" #formContainer>\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n          <input\n            class=\"form-field-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            [disabled]=\"useStrictReadonlyForm\"\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              [disabled]=\"useStrictReadonlyForm || isEditing\"\n              >\n              <option value=\"\">Select A Type...</option>\n              @for (config of options; track config) {\n                <option\n                  [value]=\"config.id\">{{config.name}}\n                </option>\n              }\n            </select>\n            <lib-config-editor\n              [hidden]=\"configTypeEmpty\"\n              [schema]=\"selectedSchema\"\n              [(configData)]=\"formData.data\"\n              [showJsonView]=\"svc.configJsonView\"\n              [(configErrors)]=\"errors\"\n              [readOnly]=\"useStrictReadonlyForm\"\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          @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"_apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\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}.projectable-form-main-column.center-only-column{justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: ConfigurationService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SHAREDZ_EXTENSION]
@@ -25935,6 +26436,16 @@ class JwtSignerFormComponent extends ProjectableForm {
                 break;
         }
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     checkExternalIdToggle() {
         if (isEmpty(this.formData.claimsProperty)) {
             this.formData.useExternalId = false;
@@ -26359,11 +26870,11 @@ class JwtSignerFormComponent extends ProjectableForm {
         return !this.errors.jwksEndpoint;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: JwtSignerFormComponent, deps: [{ token: JwtSignerFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }, { token: AuthService }, { token: i1$6.OAuthService }, { token: i1$3.HttpClient }, { token: ZAC_LOGIN_SERVICE }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: JwtSignerFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }, { propertyName: "oidcVerification", first: true, predicate: ["oidcVerification"], 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 ? 'JWT Signer Details' : 'Create JWT Signer')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #scrollContainer>\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n         <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\" #nameFieldInput/>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [layout]=\"'column'\"\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-header\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Issuer</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The &quot;issuer&quot; field on the JWT Signer must match the &quot;iss&quot; field on the JWT\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <span class=\"form-field-label\" >{{ useStrictReadonlyForm ? '' : 'REQUIRED' }}</span>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Audience</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The expected &quot;aud&quot; (audience) field on the JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\" [disabled]=\"useStrictReadonlyForm\" />\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\">Claims Property</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if &quot;Use External Id&quot; is set to true. Defaults to &quot;sub&quot;\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\" (keyup)=\"checkExternalIdToggle()\" [ngClass]=\"{error: errors['claimsProperty']}\" [disabled]=\"useStrictReadonlyForm\" />\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"If enabled, will match the &quot;claimsProperty&quot; to an identity's &quot;externalId&quot; field. If false, it will match to the identity's id field.\"\n                    matTooltipPosition=\"below\"\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\">Use External ID</div>\n                  </div>\n                  <div\n                    (click)=\"!useStrictReadonlyForm && toggleUseExternalId()\"\n                    [ngClass]=\"{ on: formData.useExternalId, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Client ID</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The client id to use when authenticating to the IDP\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n              <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">External Auth Url</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Scopes</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <lib-chips-input\n              (keyup)=\"scopesOnKeyup($event)\"\n              [(ngModel)]=\"formData.scopes\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter scopes\"\n              [addOnBlur]=\"true\"\n              separator=\",\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </div>\n        </lib-form-field-container>\n        @if (showAutoEnrollment) {\n          <lib-form-field-container\n            [title]=\"'Auto Enrollment'\"\n            [helpText]=\"'Click for more information'\"\n            (helpClicked)=\"showAutoEnrollHelp()\"\n            >\n            <div class=\"form-field-row\">\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Auto-Enroll to Cert</div>\n                  <div\n                    (click)=\"toggleEnrollToCertEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToCertEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToCertEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToCertEnabled\" 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=\"config-container-label\">Auto-Enroll to Token</div>\n                  <div\n                    (click)=\"toggleEnrollToTokenEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToTokenEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToTokenEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToTokenEnabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore && showTokenType) {\n          <lib-form-field-container\n            [title]=\"'Target Token Type'\"\n            [label]=\"'Required'\"\n            [helpText]=\"'The target token type. Can be either Access or ID'\"\n            class=\"form-field-advanced\"\n            >\n            <select\n              [(ngModel)]=\"targetToken\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"ACCESS\">Access</option>\n              <option value=\"ID\">ID</option>\n            </select>\n          </lib-form-field-container>\n        }\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          <lib-form-field-container\n            [title]=\"'Verify OIDC Authentication'\"\n            class=\"form-field-advanced\"\n            [ngClass]=\"{'formFieldError': !oidcVerified && oidcErrorMessageDetail, 'formFieldSuccess': oidcVerified}\"\n            >\n            <div class=\"form-field-row\" #oidcVerification>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"form-field-title\">Callback URL</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"This URL must be added to the list of allowed callback URLs in your OAuth provider configuration\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <div class=\"copy-link-container\">\n                  <pre class=\"read-only-2\" (click)=\"copyCallbackURL()\">{{ callbackURL }}</pre>\n                  <div class=\"copy-button\" (click)=\"copyCallbackURL()\"></div>\n                </div>\n              </div>\n              @if (!useStrictReadonlyForm) {\n              <div class=\"test-oauth-button\"\n                [ngClass]=\"{'oidc-verified': oidcVerified}\"\n                (click)=\"testOIDCAuthentication()\"\n                >\n                {{oidcVerified ? 'Verified' : 'Authenticate' }}\n                @if (oauthLoading) {\n                  <div class=\"spinner\"></div>\n                }\n                @if (oidcVerified) {\n                  <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\">\n                }\n              </div>\n              }\n            </div>\n            @if (oidcErrorMessageDetail) {\n              <div class=\"oidc-error-message-container\">\n                <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n                <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n                @if (oidcErrorMessageDetail2) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail2}}</code>\n                }\n                @if (oidcErrorMessageDetail3) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail3}}</code>\n                }\n              </div>\n            }\n            @if (oidcAuthTokenClaims) {\n              <div class=\"oidc-token-claims-container\">\n                <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n                <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </div>\n            }\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Custom Tags'\"\n            [label]=\"'OPTIONAL'\"\n            class=\"form-field-advanced\"\n            >\n            <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></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]=\"'Verification'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          <div\n            class=\"radio-group-container\"\n            [class.radio-group-readonly]=\"useStrictReadonlyForm\"\n            (keydown)=\"radioKeyDownHandler($event)\"\n            [attr.tabindex]=\"useStrictReadonlyForm ? -1 : 0\"\n            >\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('JWKS_ENDPOINT')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">JWKS Endpoint</span>\n            </div>\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('CERT_PEM')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">Cert PEM</span>\n            </div>\n          </div>\n          @if (signatureMethod === 'JWKS_ENDPOINT') {\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\">JWKS Endpoint</span>\n                  </div>\n                </div>\n                <input\n                  class=\"form-field-input\"\n                  placeholder=\"Enter endpoint URL\"\n                  [(ngModel)]=\"formData.jwksEndpoint\"\n                  [ngClass]=\"{error: errors['jwksEndpoint']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  />\n              </div>\n            </div>\n          }\n          @if (signatureMethod === 'CERT_PEM') {\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\">PEM</span>\n                  </div>\n                  <span\n                    class=\"select-file-button\"\n                    [class.toggle-readonly]=\"useStrictReadonlyForm\"\n                    (click)=\"!useStrictReadonlyForm && openFileSelect($event)\"\n                    >\n                    Select File\n                    @if (fileSelectOpening) {\n                      <div class=\"spinner\"></div>\n                    }\n                  </span>\n                  <input\n                    #fileSelect\n                    type=\"file\"\n                    style=\"display:none\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                    (change)=\"selectPemFile($event)\"\n                    >\n                </div>\n                <textarea\n                  placeholder=\"Paste pem contents or select file\"\n                  [(ngModel)]=\"formData.certPem\"\n                  [ngClass]=\"{error: errors['certPem']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  ></textarea>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">KID</span>\n                  </div>\n                  <span class=\"form-field-label\" >Optional</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\" [disabled]=\"useStrictReadonlyForm\"/>\n              </div>\n            </div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"config-container-label\">ENABLED</div>\n              <div\n                (click)=\"!useStrictReadonlyForm && toggleEnabled()\"\n                [ngClass]=\"{ on: formData.enabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.enabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n<lib-side-modal [(open)]=\"showAutoEnrollHelpModal\" [showClose]=\"true\">\n  <div class=\"help-panel-content\">\n    <h2 class=\"help-panel-title\">What is Auto Enrollment?</h2>\n    <p class=\"help-panel-intro\">\n      Auto Enrollment enables automatic identity creation when users authenticate via JWT tokens.\n    </p>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-certificate\"></span>\n        Auto-Enroll to Cert\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with a certificate when a user authenticates using a JWT token. This is useful for certificate-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-key\"></span>\n        Auto-Enroll to Token\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with an authentication token when a user authenticates using a JWT token. This is useful for token-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-note\">\n      <strong>Note:</strong> These options are only available in Ziti 2.0 and later versions.\n    </div>\n  </div>\n</lib-side-modal>\n", styles: ["@charset \"UTF-8\";.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: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;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::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_ALWAYS);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_ALWAYS);font-size:.875rem;font-weight:600}.radio-button-container.toggle-readonly{cursor:default;pointer-events:none;opacity:.92}.select-file-button.toggle-readonly{cursor:default;pointer-events:none;opacity:.85}.test-oauth-button{color:var(--offWhite_ALWAYS);height:var(--defaultInputHeight);border-style:solid;border-color:var(--inputBorder);border-radius:var(--inputBorderRadius);vertical-align:middle;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:color .2s;font-size:.9375rem;font-weight:600;font-family:Open Sans,sans-serif;text-transform:uppercase;cursor:pointer;width:100%;background-color:var(--primaryColor);margin-top:1.5rem;max-width:15rem}.test-oauth-button.oidc-verified{filter:brightness(.95);color:var(--offWhite_ALWAYS);background-color:var(--green)}.test-oauth-button .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinnerBorderTopMedium);border-right:var(--spinnerBorderRightMedium);border-bottom:var(--spinnerBorderBottomMedium);border-left:var(--spinnerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall)}.test-oauth-button:hover{filter:brightness(.95)}.test-oauth-button:active{transform:translateY(1px)}.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem;border-radius:2rem;margin-left:var(--marginSmall)}.success-check:checked{background-color:var(--green)!important;background-image:url(/assets/images/check.png);background-size:.675rem;background-position:center center;background-repeat:no-repeat;border:none}.success-check:checked:disabled{opacity:1!important}.oidc-token-claims-container{background-color:var(--backgroundMuted);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--tableText);font-weight:600;overflow:auto}.oidc-token-claims-container .oidc-token-claims-title{font-weight:600;font-size:1rem;white-space:nowrap;margin-bottom:var(--marginMedium)}.oidc-error-message-container{background-color:var(--lightRed);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--red);font-weight:600;overflow:auto}.oidc-error-message-container .oidc-error-message-source{font-weight:600;font-size:1rem;white-space:nowrap}.oidc-error-message-container .oidc-error-message-detail2,.oidc-error-message-container .oidc-error-message-detail{margin-top:var(--marginSmall);font-weight:400;white-space:nowrap}.oidc-error-message-container::-webkit-scrollbar{height:6px;width:6px}.oidc-error-message-container::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.oidc-error-message-container:hover::-webkit-scrollbar-thumb{background-clip:unset!important}.read-only-2{display:flex;overflow:auto;white-space:nowrap;opacity:1!important;cursor:pointer;padding:var(--paddingMedium);padding-bottom:var(--paddingSmall)}.read-only-2::-webkit-scrollbar{height:6px;width:6px}.read-only-2::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.read-only-2:hover{text-decoration:underline}.read-only-2:hover::-webkit-scrollbar-thumb{background-clip:unset}.copy-link-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;opacity:1!important;cursor:text;border-radius:var(--inputBorderRadius);height:var(--defaultInputHeight);background-color:var(--backgroundMuted)!important}.copy-button{display:flex;align-items:center;justify-content:center;height:100%;width:2.575rem;margin-left:.125rem;background:url(/assets/svgs/copy.svg) no-repeat;background-size:1.125rem 1.125rem;background-position:center;cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:#0000000f}.copy-button:hover{filter:brightness(.95);background-color:#0000001f}.help-panel-content{display:flex;flex-direction:column;padding-top:3rem}.help-panel-content .help-panel-title{margin:0 0 .25rem;color:var(--primary);font-size:1.5rem;font-weight:600;line-height:1.3;padding-right:2rem}.help-panel-content .help-panel-intro{line-height:1.6;margin-bottom:1.5rem;color:var(--tableText);font-size:.9375rem}.help-panel-content .help-panel-section{margin-bottom:1.5rem;padding:1rem;background-color:var(--navigation);border-radius:var(--inputBorderRadius);border-left:.25rem solid var(--primary)}.help-panel-content .help-panel-section .help-panel-subtitle{margin:0 0 .75rem;color:var(--primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.help-panel-content .help-panel-section .help-panel-subtitle span[class^=icon-]{font-size:1rem;opacity:.8}.help-panel-content .help-panel-section .help-panel-text{margin:0;line-height:1.6;color:var(--tableText);font-size:.875rem}.help-panel-content .help-panel-note{padding:1rem;background-color:#ffc1071a;border-radius:var(--inputBorderRadius);border-left:.25rem solid #ffc107;color:var(--tableText);font-size:.875rem;line-height:1.6}.help-panel-content .help-panel-note strong{color:#ffc107}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "inputId", "addOnBlur", "allowDuplicate", "separator", "invalid"], outputs: ["onAdd", "onRemove", "onModelChange", "onBlur", "keyup"] }, { kind: "component", type: SideModalComponent, selector: "lib-side-modal", inputs: ["showClose", "open"], outputs: ["openChange"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: JwtSignerFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }, { propertyName: "oidcVerification", first: true, predicate: ["oidcVerification"], 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 ? 'JWT Signer Details' : 'Create JWT Signer')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #scrollContainer>\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n         <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\" #nameFieldInput/>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [layout]=\"'column'\"\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-header\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Issuer</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The &quot;issuer&quot; field on the JWT Signer must match the &quot;iss&quot; field on the JWT\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <span class=\"form-field-label\" >{{ useStrictReadonlyForm ? '' : 'REQUIRED' }}</span>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Audience</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The expected &quot;aud&quot; (audience) field on the JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\" [disabled]=\"useStrictReadonlyForm\" />\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\">Claims Property</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if &quot;Use External Id&quot; is set to true. Defaults to &quot;sub&quot;\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\" (keyup)=\"checkExternalIdToggle()\" [ngClass]=\"{error: errors['claimsProperty']}\" [disabled]=\"useStrictReadonlyForm\" />\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"If enabled, will match the &quot;claimsProperty&quot; to an identity's &quot;externalId&quot; field. If false, it will match to the identity's id field.\"\n                    matTooltipPosition=\"below\"\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\">Use External ID</div>\n                  </div>\n                  <div\n                    (click)=\"!useStrictReadonlyForm && toggleUseExternalId()\"\n                    [ngClass]=\"{ on: formData.useExternalId, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Client ID</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The client id to use when authenticating to the IDP\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n              <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">External Auth Url</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Scopes</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <lib-chips-input\n              (keyup)=\"scopesOnKeyup($event)\"\n              [(ngModel)]=\"formData.scopes\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter scopes\"\n              [addOnBlur]=\"true\"\n              separator=\",\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </div>\n        </lib-form-field-container>\n        @if (showAutoEnrollment) {\n          <lib-form-field-container\n            [title]=\"'Auto Enrollment'\"\n            [helpText]=\"'Click for more information'\"\n            (helpClicked)=\"showAutoEnrollHelp()\"\n            >\n            <div class=\"form-field-row\">\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Auto-Enroll to Cert</div>\n                  <div\n                    (click)=\"toggleEnrollToCertEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToCertEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToCertEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToCertEnabled\" 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=\"config-container-label\">Auto-Enroll to Token</div>\n                  <div\n                    (click)=\"toggleEnrollToTokenEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToTokenEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToTokenEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToTokenEnabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore && showTokenType) {\n          <lib-form-field-container\n            [title]=\"'Target Token Type'\"\n            [label]=\"'Required'\"\n            [helpText]=\"'The target token type. Can be either Access or ID'\"\n            class=\"form-field-advanced\"\n            >\n            <select\n              [(ngModel)]=\"targetToken\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"ACCESS\">Access</option>\n              <option value=\"ID\">ID</option>\n            </select>\n          </lib-form-field-container>\n        }\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          <lib-form-field-container\n            [title]=\"'Verify OIDC Authentication'\"\n            class=\"form-field-advanced\"\n            [ngClass]=\"{'formFieldError': !oidcVerified && oidcErrorMessageDetail, 'formFieldSuccess': oidcVerified}\"\n            >\n            <div class=\"form-field-row\" #oidcVerification>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"form-field-title\">Callback URL</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"This URL must be added to the list of allowed callback URLs in your OAuth provider configuration\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <div class=\"copy-link-container\">\n                  <pre class=\"read-only-2\" (click)=\"copyCallbackURL()\">{{ callbackURL }}</pre>\n                  <div class=\"copy-button\" (click)=\"copyCallbackURL()\"></div>\n                </div>\n              </div>\n              @if (!useStrictReadonlyForm) {\n              <div class=\"test-oauth-button\"\n                [ngClass]=\"{'oidc-verified': oidcVerified}\"\n                (click)=\"testOIDCAuthentication()\"\n                >\n                {{oidcVerified ? 'Verified' : 'Authenticate' }}\n                @if (oauthLoading) {\n                  <div class=\"spinner\"></div>\n                }\n                @if (oidcVerified) {\n                  <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\">\n                }\n              </div>\n              }\n            </div>\n            @if (oidcErrorMessageDetail) {\n              <div class=\"oidc-error-message-container\">\n                <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n                <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n                @if (oidcErrorMessageDetail2) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail2}}</code>\n                }\n                @if (oidcErrorMessageDetail3) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail3}}</code>\n                }\n              </div>\n            }\n            @if (oidcAuthTokenClaims) {\n              <div class=\"oidc-token-claims-container\">\n                <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n                <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </div>\n            }\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Custom Tags'\"\n            [label]=\"'OPTIONAL'\"\n            class=\"form-field-advanced\"\n            >\n            <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></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]=\"'Verification'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          <div\n            class=\"radio-group-container\"\n            [class.radio-group-readonly]=\"useStrictReadonlyForm\"\n            (keydown)=\"radioKeyDownHandler($event)\"\n            [attr.tabindex]=\"useStrictReadonlyForm ? -1 : 0\"\n            >\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('JWKS_ENDPOINT')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">JWKS Endpoint</span>\n            </div>\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('CERT_PEM')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">Cert PEM</span>\n            </div>\n          </div>\n          @if (signatureMethod === 'JWKS_ENDPOINT') {\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\">JWKS Endpoint</span>\n                  </div>\n                </div>\n                <input\n                  class=\"form-field-input\"\n                  placeholder=\"Enter endpoint URL\"\n                  [(ngModel)]=\"formData.jwksEndpoint\"\n                  [ngClass]=\"{error: errors['jwksEndpoint']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  />\n              </div>\n            </div>\n          }\n          @if (signatureMethod === 'CERT_PEM') {\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\">PEM</span>\n                  </div>\n                  <span\n                    class=\"select-file-button\"\n                    [class.toggle-readonly]=\"useStrictReadonlyForm\"\n                    (click)=\"!useStrictReadonlyForm && openFileSelect($event)\"\n                    >\n                    Select File\n                    @if (fileSelectOpening) {\n                      <div class=\"spinner\"></div>\n                    }\n                  </span>\n                  <input\n                    #fileSelect\n                    type=\"file\"\n                    style=\"display:none\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                    (change)=\"selectPemFile($event)\"\n                    >\n                </div>\n                <textarea\n                  placeholder=\"Paste pem contents or select file\"\n                  [(ngModel)]=\"formData.certPem\"\n                  [ngClass]=\"{error: errors['certPem']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  ></textarea>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">KID</span>\n                  </div>\n                  <span class=\"form-field-label\" >Optional</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\" [disabled]=\"useStrictReadonlyForm\"/>\n              </div>\n            </div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"config-container-label\">ENABLED</div>\n              <div\n                (click)=\"!useStrictReadonlyForm && toggleEnabled()\"\n                [ngClass]=\"{ on: formData.enabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.enabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n<lib-side-modal [(open)]=\"showAutoEnrollHelpModal\" [showClose]=\"true\">\n  <div class=\"help-panel-content\">\n    <h2 class=\"help-panel-title\">What is Auto Enrollment?</h2>\n    <p class=\"help-panel-intro\">\n      Auto Enrollment enables automatic identity creation when users authenticate via JWT tokens.\n    </p>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-certificate\"></span>\n        Auto-Enroll to Cert\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with a certificate when a user authenticates using a JWT token. This is useful for certificate-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-key\"></span>\n        Auto-Enroll to Token\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with an authentication token when a user authenticates using a JWT token. This is useful for token-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-note\">\n      <strong>Note:</strong> These options are only available in Ziti 2.0 and later versions.\n    </div>\n  </div>\n</lib-side-modal>\n", styles: ["@charset \"UTF-8\";.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: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;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::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_ALWAYS);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_ALWAYS);font-size:.875rem;font-weight:600}.radio-button-container.toggle-readonly{cursor:default;pointer-events:none;opacity:.92}.select-file-button.toggle-readonly{cursor:default;pointer-events:none;opacity:.85}.test-oauth-button{color:var(--offWhite_ALWAYS);height:var(--defaultInputHeight);border-style:solid;border-color:var(--inputBorder);border-radius:var(--inputBorderRadius);vertical-align:middle;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:color .2s;font-size:.9375rem;font-weight:600;font-family:Open Sans,sans-serif;text-transform:uppercase;cursor:pointer;width:100%;background-color:var(--primaryColor);margin-top:1.5rem;max-width:15rem}.test-oauth-button.oidc-verified{filter:brightness(.95);color:var(--offWhite_ALWAYS);background-color:var(--green)}.test-oauth-button .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinnerBorderTopMedium);border-right:var(--spinnerBorderRightMedium);border-bottom:var(--spinnerBorderBottomMedium);border-left:var(--spinnerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall)}.test-oauth-button:hover{filter:brightness(.95)}.test-oauth-button:active{transform:translateY(1px)}.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem;border-radius:2rem;margin-left:var(--marginSmall)}.success-check:checked{background-color:var(--green)!important;background-image:url(/assets/images/check.png);background-size:.675rem;background-position:center center;background-repeat:no-repeat;border:none}.success-check:checked:disabled{opacity:1!important}.oidc-token-claims-container{background-color:var(--backgroundMuted);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--tableText);font-weight:600;overflow:auto}.oidc-token-claims-container .oidc-token-claims-title{font-weight:600;font-size:1rem;white-space:nowrap;margin-bottom:var(--marginMedium)}.oidc-error-message-container{background-color:var(--lightRed);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--red);font-weight:600;overflow:auto}.oidc-error-message-container .oidc-error-message-source{font-weight:600;font-size:1rem;white-space:nowrap}.oidc-error-message-container .oidc-error-message-detail2,.oidc-error-message-container .oidc-error-message-detail{margin-top:var(--marginSmall);font-weight:400;white-space:nowrap}.oidc-error-message-container::-webkit-scrollbar{height:6px;width:6px}.oidc-error-message-container::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.oidc-error-message-container:hover::-webkit-scrollbar-thumb{background-clip:unset!important}.read-only-2{display:flex;overflow:auto;white-space:nowrap;opacity:1!important;cursor:pointer;padding:var(--paddingMedium);padding-bottom:var(--paddingSmall)}.read-only-2::-webkit-scrollbar{height:6px;width:6px}.read-only-2::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.read-only-2:hover{text-decoration:underline}.read-only-2:hover::-webkit-scrollbar-thumb{background-clip:unset}.copy-link-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;opacity:1!important;cursor:text;border-radius:var(--inputBorderRadius);height:var(--defaultInputHeight);background-color:var(--backgroundMuted)!important}.copy-button{display:flex;align-items:center;justify-content:center;height:100%;width:2.575rem;margin-left:.125rem;background:url(/assets/svgs/copy.svg) no-repeat;background-size:1.125rem 1.125rem;background-position:center;cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:#0000000f}.copy-button:hover{filter:brightness(.95);background-color:#0000001f}.help-panel-content{display:flex;flex-direction:column;padding-top:3rem}.help-panel-content .help-panel-title{margin:0 0 .25rem;color:var(--primary);font-size:1.5rem;font-weight:600;line-height:1.3;padding-right:2rem}.help-panel-content .help-panel-intro{line-height:1.6;margin-bottom:1.5rem;color:var(--tableText);font-size:.9375rem}.help-panel-content .help-panel-section{margin-bottom:1.5rem;padding:1rem;background-color:var(--navigation);border-radius:var(--inputBorderRadius);border-left:.25rem solid var(--primary)}.help-panel-content .help-panel-section .help-panel-subtitle{margin:0 0 .75rem;color:var(--primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.help-panel-content .help-panel-section .help-panel-subtitle span[class^=icon-]{font-size:1rem;opacity:.8}.help-panel-content .help-panel-section .help-panel-text{margin:0;line-height:1.6;color:var(--tableText);font-size:.875rem}.help-panel-content .help-panel-note{padding:1rem;background-color:#ffc1071a;border-radius:var(--inputBorderRadius);border-left:.25rem solid #ffc107;color:var(--tableText);font-size:.875rem;line-height:1.6}.help-panel-content .help-panel-note strong{color:#ffc107}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "inputId", "addOnBlur", "allowDuplicate", "separator", "invalid"], outputs: ["onAdd", "onRemove", "onModelChange", "onBlur", "keyup"] }, { kind: "component", type: SideModalComponent, selector: "lib-side-modal", inputs: ["showClose", "open"], outputs: ["openChange"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: JwtSignerFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-configuration', standalone: false, 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 ? 'JWT Signer Details' : 'Create JWT Signer')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #scrollContainer>\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n         <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\" #nameFieldInput/>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [layout]=\"'column'\"\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-header\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Issuer</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The &quot;issuer&quot; field on the JWT Signer must match the &quot;iss&quot; field on the JWT\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <span class=\"form-field-label\" >{{ useStrictReadonlyForm ? '' : 'REQUIRED' }}</span>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Audience</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The expected &quot;aud&quot; (audience) field on the JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\" [disabled]=\"useStrictReadonlyForm\" />\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\">Claims Property</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if &quot;Use External Id&quot; is set to true. Defaults to &quot;sub&quot;\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\" (keyup)=\"checkExternalIdToggle()\" [ngClass]=\"{error: errors['claimsProperty']}\" [disabled]=\"useStrictReadonlyForm\" />\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"If enabled, will match the &quot;claimsProperty&quot; to an identity's &quot;externalId&quot; field. If false, it will match to the identity's id field.\"\n                    matTooltipPosition=\"below\"\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\">Use External ID</div>\n                  </div>\n                  <div\n                    (click)=\"!useStrictReadonlyForm && toggleUseExternalId()\"\n                    [ngClass]=\"{ on: formData.useExternalId, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Client ID</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The client id to use when authenticating to the IDP\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n              <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">External Auth Url</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Scopes</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <lib-chips-input\n              (keyup)=\"scopesOnKeyup($event)\"\n              [(ngModel)]=\"formData.scopes\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter scopes\"\n              [addOnBlur]=\"true\"\n              separator=\",\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </div>\n        </lib-form-field-container>\n        @if (showAutoEnrollment) {\n          <lib-form-field-container\n            [title]=\"'Auto Enrollment'\"\n            [helpText]=\"'Click for more information'\"\n            (helpClicked)=\"showAutoEnrollHelp()\"\n            >\n            <div class=\"form-field-row\">\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Auto-Enroll to Cert</div>\n                  <div\n                    (click)=\"toggleEnrollToCertEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToCertEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToCertEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToCertEnabled\" 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=\"config-container-label\">Auto-Enroll to Token</div>\n                  <div\n                    (click)=\"toggleEnrollToTokenEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToTokenEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToTokenEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToTokenEnabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore && showTokenType) {\n          <lib-form-field-container\n            [title]=\"'Target Token Type'\"\n            [label]=\"'Required'\"\n            [helpText]=\"'The target token type. Can be either Access or ID'\"\n            class=\"form-field-advanced\"\n            >\n            <select\n              [(ngModel)]=\"targetToken\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"ACCESS\">Access</option>\n              <option value=\"ID\">ID</option>\n            </select>\n          </lib-form-field-container>\n        }\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          <lib-form-field-container\n            [title]=\"'Verify OIDC Authentication'\"\n            class=\"form-field-advanced\"\n            [ngClass]=\"{'formFieldError': !oidcVerified && oidcErrorMessageDetail, 'formFieldSuccess': oidcVerified}\"\n            >\n            <div class=\"form-field-row\" #oidcVerification>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"form-field-title\">Callback URL</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"This URL must be added to the list of allowed callback URLs in your OAuth provider configuration\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <div class=\"copy-link-container\">\n                  <pre class=\"read-only-2\" (click)=\"copyCallbackURL()\">{{ callbackURL }}</pre>\n                  <div class=\"copy-button\" (click)=\"copyCallbackURL()\"></div>\n                </div>\n              </div>\n              @if (!useStrictReadonlyForm) {\n              <div class=\"test-oauth-button\"\n                [ngClass]=\"{'oidc-verified': oidcVerified}\"\n                (click)=\"testOIDCAuthentication()\"\n                >\n                {{oidcVerified ? 'Verified' : 'Authenticate' }}\n                @if (oauthLoading) {\n                  <div class=\"spinner\"></div>\n                }\n                @if (oidcVerified) {\n                  <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\">\n                }\n              </div>\n              }\n            </div>\n            @if (oidcErrorMessageDetail) {\n              <div class=\"oidc-error-message-container\">\n                <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n                <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n                @if (oidcErrorMessageDetail2) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail2}}</code>\n                }\n                @if (oidcErrorMessageDetail3) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail3}}</code>\n                }\n              </div>\n            }\n            @if (oidcAuthTokenClaims) {\n              <div class=\"oidc-token-claims-container\">\n                <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n                <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </div>\n            }\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Custom Tags'\"\n            [label]=\"'OPTIONAL'\"\n            class=\"form-field-advanced\"\n            >\n            <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></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]=\"'Verification'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          <div\n            class=\"radio-group-container\"\n            [class.radio-group-readonly]=\"useStrictReadonlyForm\"\n            (keydown)=\"radioKeyDownHandler($event)\"\n            [attr.tabindex]=\"useStrictReadonlyForm ? -1 : 0\"\n            >\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('JWKS_ENDPOINT')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">JWKS Endpoint</span>\n            </div>\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('CERT_PEM')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">Cert PEM</span>\n            </div>\n          </div>\n          @if (signatureMethod === 'JWKS_ENDPOINT') {\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\">JWKS Endpoint</span>\n                  </div>\n                </div>\n                <input\n                  class=\"form-field-input\"\n                  placeholder=\"Enter endpoint URL\"\n                  [(ngModel)]=\"formData.jwksEndpoint\"\n                  [ngClass]=\"{error: errors['jwksEndpoint']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  />\n              </div>\n            </div>\n          }\n          @if (signatureMethod === 'CERT_PEM') {\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\">PEM</span>\n                  </div>\n                  <span\n                    class=\"select-file-button\"\n                    [class.toggle-readonly]=\"useStrictReadonlyForm\"\n                    (click)=\"!useStrictReadonlyForm && openFileSelect($event)\"\n                    >\n                    Select File\n                    @if (fileSelectOpening) {\n                      <div class=\"spinner\"></div>\n                    }\n                  </span>\n                  <input\n                    #fileSelect\n                    type=\"file\"\n                    style=\"display:none\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                    (change)=\"selectPemFile($event)\"\n                    >\n                </div>\n                <textarea\n                  placeholder=\"Paste pem contents or select file\"\n                  [(ngModel)]=\"formData.certPem\"\n                  [ngClass]=\"{error: errors['certPem']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  ></textarea>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">KID</span>\n                  </div>\n                  <span class=\"form-field-label\" >Optional</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\" [disabled]=\"useStrictReadonlyForm\"/>\n              </div>\n            </div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"config-container-label\">ENABLED</div>\n              <div\n                (click)=\"!useStrictReadonlyForm && toggleEnabled()\"\n                [ngClass]=\"{ on: formData.enabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.enabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n<lib-side-modal [(open)]=\"showAutoEnrollHelpModal\" [showClose]=\"true\">\n  <div class=\"help-panel-content\">\n    <h2 class=\"help-panel-title\">What is Auto Enrollment?</h2>\n    <p class=\"help-panel-intro\">\n      Auto Enrollment enables automatic identity creation when users authenticate via JWT tokens.\n    </p>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-certificate\"></span>\n        Auto-Enroll to Cert\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with a certificate when a user authenticates using a JWT token. This is useful for certificate-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-key\"></span>\n        Auto-Enroll to Token\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with an authentication token when a user authenticates using a JWT token. This is useful for token-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-note\">\n      <strong>Note:</strong> These options are only available in Ziti 2.0 and later versions.\n    </div>\n  </div>\n</lib-side-modal>\n", styles: ["@charset \"UTF-8\";.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: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;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::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_ALWAYS);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_ALWAYS);font-size:.875rem;font-weight:600}.radio-button-container.toggle-readonly{cursor:default;pointer-events:none;opacity:.92}.select-file-button.toggle-readonly{cursor:default;pointer-events:none;opacity:.85}.test-oauth-button{color:var(--offWhite_ALWAYS);height:var(--defaultInputHeight);border-style:solid;border-color:var(--inputBorder);border-radius:var(--inputBorderRadius);vertical-align:middle;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:color .2s;font-size:.9375rem;font-weight:600;font-family:Open Sans,sans-serif;text-transform:uppercase;cursor:pointer;width:100%;background-color:var(--primaryColor);margin-top:1.5rem;max-width:15rem}.test-oauth-button.oidc-verified{filter:brightness(.95);color:var(--offWhite_ALWAYS);background-color:var(--green)}.test-oauth-button .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinnerBorderTopMedium);border-right:var(--spinnerBorderRightMedium);border-bottom:var(--spinnerBorderBottomMedium);border-left:var(--spinnerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall)}.test-oauth-button:hover{filter:brightness(.95)}.test-oauth-button:active{transform:translateY(1px)}.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem;border-radius:2rem;margin-left:var(--marginSmall)}.success-check:checked{background-color:var(--green)!important;background-image:url(/assets/images/check.png);background-size:.675rem;background-position:center center;background-repeat:no-repeat;border:none}.success-check:checked:disabled{opacity:1!important}.oidc-token-claims-container{background-color:var(--backgroundMuted);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--tableText);font-weight:600;overflow:auto}.oidc-token-claims-container .oidc-token-claims-title{font-weight:600;font-size:1rem;white-space:nowrap;margin-bottom:var(--marginMedium)}.oidc-error-message-container{background-color:var(--lightRed);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--red);font-weight:600;overflow:auto}.oidc-error-message-container .oidc-error-message-source{font-weight:600;font-size:1rem;white-space:nowrap}.oidc-error-message-container .oidc-error-message-detail2,.oidc-error-message-container .oidc-error-message-detail{margin-top:var(--marginSmall);font-weight:400;white-space:nowrap}.oidc-error-message-container::-webkit-scrollbar{height:6px;width:6px}.oidc-error-message-container::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.oidc-error-message-container:hover::-webkit-scrollbar-thumb{background-clip:unset!important}.read-only-2{display:flex;overflow:auto;white-space:nowrap;opacity:1!important;cursor:pointer;padding:var(--paddingMedium);padding-bottom:var(--paddingSmall)}.read-only-2::-webkit-scrollbar{height:6px;width:6px}.read-only-2::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.read-only-2:hover{text-decoration:underline}.read-only-2:hover::-webkit-scrollbar-thumb{background-clip:unset}.copy-link-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;opacity:1!important;cursor:text;border-radius:var(--inputBorderRadius);height:var(--defaultInputHeight);background-color:var(--backgroundMuted)!important}.copy-button{display:flex;align-items:center;justify-content:center;height:100%;width:2.575rem;margin-left:.125rem;background:url(/assets/svgs/copy.svg) no-repeat;background-size:1.125rem 1.125rem;background-position:center;cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:#0000000f}.copy-button:hover{filter:brightness(.95);background-color:#0000001f}.help-panel-content{display:flex;flex-direction:column;padding-top:3rem}.help-panel-content .help-panel-title{margin:0 0 .25rem;color:var(--primary);font-size:1.5rem;font-weight:600;line-height:1.3;padding-right:2rem}.help-panel-content .help-panel-intro{line-height:1.6;margin-bottom:1.5rem;color:var(--tableText);font-size:.9375rem}.help-panel-content .help-panel-section{margin-bottom:1.5rem;padding:1rem;background-color:var(--navigation);border-radius:var(--inputBorderRadius);border-left:.25rem solid var(--primary)}.help-panel-content .help-panel-section .help-panel-subtitle{margin:0 0 .75rem;color:var(--primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.help-panel-content .help-panel-section .help-panel-subtitle span[class^=icon-]{font-size:1rem;opacity:.8}.help-panel-content .help-panel-section .help-panel-text{margin:0;line-height:1.6;color:var(--tableText);font-size:.875rem}.help-panel-content .help-panel-note{padding:1rem;background-color:#ffc1071a;border-radius:var(--inputBorderRadius);border-left:.25rem solid #ffc107;color:var(--tableText);font-size:.875rem;line-height:1.6}.help-panel-content .help-panel-note strong{color:#ffc107}\n"] }]
+            args: [{ selector: 'lib-configuration', standalone: false, 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 ? 'JWT Signer Details' : 'Create JWT Signer')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #scrollContainer>\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n         <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\" #nameFieldInput/>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [layout]=\"'column'\"\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-header\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Issuer</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The &quot;issuer&quot; field on the JWT Signer must match the &quot;iss&quot; field on the JWT\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <span class=\"form-field-label\" >{{ useStrictReadonlyForm ? '' : 'REQUIRED' }}</span>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Audience</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The expected &quot;aud&quot; (audience) field on the JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\" [disabled]=\"useStrictReadonlyForm\" />\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\">Claims Property</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if &quot;Use External Id&quot; is set to true. Defaults to &quot;sub&quot;\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\" (keyup)=\"checkExternalIdToggle()\" [ngClass]=\"{error: errors['claimsProperty']}\" [disabled]=\"useStrictReadonlyForm\" />\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"If enabled, will match the &quot;claimsProperty&quot; to an identity's &quot;externalId&quot; field. If false, it will match to the identity's id field.\"\n                    matTooltipPosition=\"below\"\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\">Use External ID</div>\n                  </div>\n                  <div\n                    (click)=\"!useStrictReadonlyForm && toggleUseExternalId()\"\n                    [ngClass]=\"{ on: formData.useExternalId, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Client ID</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The client id to use when authenticating to the IDP\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n              <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">External Auth Url</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Scopes</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <lib-chips-input\n              (keyup)=\"scopesOnKeyup($event)\"\n              [(ngModel)]=\"formData.scopes\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter scopes\"\n              [addOnBlur]=\"true\"\n              separator=\",\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </div>\n        </lib-form-field-container>\n        @if (showAutoEnrollment) {\n          <lib-form-field-container\n            [title]=\"'Auto Enrollment'\"\n            [helpText]=\"'Click for more information'\"\n            (helpClicked)=\"showAutoEnrollHelp()\"\n            >\n            <div class=\"form-field-row\">\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Auto-Enroll to Cert</div>\n                  <div\n                    (click)=\"toggleEnrollToCertEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToCertEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToCertEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToCertEnabled\" 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=\"config-container-label\">Auto-Enroll to Token</div>\n                  <div\n                    (click)=\"toggleEnrollToTokenEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToTokenEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToTokenEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToTokenEnabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore && showTokenType) {\n          <lib-form-field-container\n            [title]=\"'Target Token Type'\"\n            [label]=\"'Required'\"\n            [helpText]=\"'The target token type. Can be either Access or ID'\"\n            class=\"form-field-advanced\"\n            >\n            <select\n              [(ngModel)]=\"targetToken\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"ACCESS\">Access</option>\n              <option value=\"ID\">ID</option>\n            </select>\n          </lib-form-field-container>\n        }\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          <lib-form-field-container\n            [title]=\"'Verify OIDC Authentication'\"\n            class=\"form-field-advanced\"\n            [ngClass]=\"{'formFieldError': !oidcVerified && oidcErrorMessageDetail, 'formFieldSuccess': oidcVerified}\"\n            >\n            <div class=\"form-field-row\" #oidcVerification>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"form-field-title\">Callback URL</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"This URL must be added to the list of allowed callback URLs in your OAuth provider configuration\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <div class=\"copy-link-container\">\n                  <pre class=\"read-only-2\" (click)=\"copyCallbackURL()\">{{ callbackURL }}</pre>\n                  <div class=\"copy-button\" (click)=\"copyCallbackURL()\"></div>\n                </div>\n              </div>\n              @if (!useStrictReadonlyForm) {\n              <div class=\"test-oauth-button\"\n                [ngClass]=\"{'oidc-verified': oidcVerified}\"\n                (click)=\"testOIDCAuthentication()\"\n                >\n                {{oidcVerified ? 'Verified' : 'Authenticate' }}\n                @if (oauthLoading) {\n                  <div class=\"spinner\"></div>\n                }\n                @if (oidcVerified) {\n                  <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\">\n                }\n              </div>\n              }\n            </div>\n            @if (oidcErrorMessageDetail) {\n              <div class=\"oidc-error-message-container\">\n                <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n                <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n                @if (oidcErrorMessageDetail2) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail2}}</code>\n                }\n                @if (oidcErrorMessageDetail3) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail3}}</code>\n                }\n              </div>\n            }\n            @if (oidcAuthTokenClaims) {\n              <div class=\"oidc-token-claims-container\">\n                <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n                <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </div>\n            }\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Custom Tags'\"\n            [label]=\"'OPTIONAL'\"\n            class=\"form-field-advanced\"\n            >\n            <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></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]=\"'Verification'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          <div\n            class=\"radio-group-container\"\n            [class.radio-group-readonly]=\"useStrictReadonlyForm\"\n            (keydown)=\"radioKeyDownHandler($event)\"\n            [attr.tabindex]=\"useStrictReadonlyForm ? -1 : 0\"\n            >\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('JWKS_ENDPOINT')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">JWKS Endpoint</span>\n            </div>\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('CERT_PEM')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">Cert PEM</span>\n            </div>\n          </div>\n          @if (signatureMethod === 'JWKS_ENDPOINT') {\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\">JWKS Endpoint</span>\n                  </div>\n                </div>\n                <input\n                  class=\"form-field-input\"\n                  placeholder=\"Enter endpoint URL\"\n                  [(ngModel)]=\"formData.jwksEndpoint\"\n                  [ngClass]=\"{error: errors['jwksEndpoint']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  />\n              </div>\n            </div>\n          }\n          @if (signatureMethod === 'CERT_PEM') {\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\">PEM</span>\n                  </div>\n                  <span\n                    class=\"select-file-button\"\n                    [class.toggle-readonly]=\"useStrictReadonlyForm\"\n                    (click)=\"!useStrictReadonlyForm && openFileSelect($event)\"\n                    >\n                    Select File\n                    @if (fileSelectOpening) {\n                      <div class=\"spinner\"></div>\n                    }\n                  </span>\n                  <input\n                    #fileSelect\n                    type=\"file\"\n                    style=\"display:none\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                    (change)=\"selectPemFile($event)\"\n                    >\n                </div>\n                <textarea\n                  placeholder=\"Paste pem contents or select file\"\n                  [(ngModel)]=\"formData.certPem\"\n                  [ngClass]=\"{error: errors['certPem']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  ></textarea>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">KID</span>\n                  </div>\n                  <span class=\"form-field-label\" >Optional</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\" [disabled]=\"useStrictReadonlyForm\"/>\n              </div>\n            </div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"config-container-label\">ENABLED</div>\n              <div\n                (click)=\"!useStrictReadonlyForm && toggleEnabled()\"\n                [ngClass]=\"{ on: formData.enabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.enabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n<lib-side-modal [(open)]=\"showAutoEnrollHelpModal\" [showClose]=\"true\">\n  <div class=\"help-panel-content\">\n    <h2 class=\"help-panel-title\">What is Auto Enrollment?</h2>\n    <p class=\"help-panel-intro\">\n      Auto Enrollment enables automatic identity creation when users authenticate via JWT tokens.\n    </p>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-certificate\"></span>\n        Auto-Enroll to Cert\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with a certificate when a user authenticates using a JWT token. This is useful for certificate-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-key\"></span>\n        Auto-Enroll to Token\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with an authentication token when a user authenticates using a JWT token. This is useful for token-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-note\">\n      <strong>Note:</strong> These options are only available in Ziti 2.0 and later versions.\n    </div>\n  </div>\n</lib-side-modal>\n", styles: ["@charset \"UTF-8\";.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: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;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::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_ALWAYS);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_ALWAYS);font-size:.875rem;font-weight:600}.radio-button-container.toggle-readonly{cursor:default;pointer-events:none;opacity:.92}.select-file-button.toggle-readonly{cursor:default;pointer-events:none;opacity:.85}.test-oauth-button{color:var(--offWhite_ALWAYS);height:var(--defaultInputHeight);border-style:solid;border-color:var(--inputBorder);border-radius:var(--inputBorderRadius);vertical-align:middle;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:color .2s;font-size:.9375rem;font-weight:600;font-family:Open Sans,sans-serif;text-transform:uppercase;cursor:pointer;width:100%;background-color:var(--primaryColor);margin-top:1.5rem;max-width:15rem}.test-oauth-button.oidc-verified{filter:brightness(.95);color:var(--offWhite_ALWAYS);background-color:var(--green)}.test-oauth-button .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinnerBorderTopMedium);border-right:var(--spinnerBorderRightMedium);border-bottom:var(--spinnerBorderBottomMedium);border-left:var(--spinnerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall)}.test-oauth-button:hover{filter:brightness(.95)}.test-oauth-button:active{transform:translateY(1px)}.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem;border-radius:2rem;margin-left:var(--marginSmall)}.success-check:checked{background-color:var(--green)!important;background-image:url(/assets/images/check.png);background-size:.675rem;background-position:center center;background-repeat:no-repeat;border:none}.success-check:checked:disabled{opacity:1!important}.oidc-token-claims-container{background-color:var(--backgroundMuted);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--tableText);font-weight:600;overflow:auto}.oidc-token-claims-container .oidc-token-claims-title{font-weight:600;font-size:1rem;white-space:nowrap;margin-bottom:var(--marginMedium)}.oidc-error-message-container{background-color:var(--lightRed);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--red);font-weight:600;overflow:auto}.oidc-error-message-container .oidc-error-message-source{font-weight:600;font-size:1rem;white-space:nowrap}.oidc-error-message-container .oidc-error-message-detail2,.oidc-error-message-container .oidc-error-message-detail{margin-top:var(--marginSmall);font-weight:400;white-space:nowrap}.oidc-error-message-container::-webkit-scrollbar{height:6px;width:6px}.oidc-error-message-container::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.oidc-error-message-container:hover::-webkit-scrollbar-thumb{background-clip:unset!important}.read-only-2{display:flex;overflow:auto;white-space:nowrap;opacity:1!important;cursor:pointer;padding:var(--paddingMedium);padding-bottom:var(--paddingSmall)}.read-only-2::-webkit-scrollbar{height:6px;width:6px}.read-only-2::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.read-only-2:hover{text-decoration:underline}.read-only-2:hover::-webkit-scrollbar-thumb{background-clip:unset}.copy-link-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;opacity:1!important;cursor:text;border-radius:var(--inputBorderRadius);height:var(--defaultInputHeight);background-color:var(--backgroundMuted)!important}.copy-button{display:flex;align-items:center;justify-content:center;height:100%;width:2.575rem;margin-left:.125rem;background:url(/assets/svgs/copy.svg) no-repeat;background-size:1.125rem 1.125rem;background-position:center;cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:#0000000f}.copy-button:hover{filter:brightness(.95);background-color:#0000001f}.help-panel-content{display:flex;flex-direction:column;padding-top:3rem}.help-panel-content .help-panel-title{margin:0 0 .25rem;color:var(--primary);font-size:1.5rem;font-weight:600;line-height:1.3;padding-right:2rem}.help-panel-content .help-panel-intro{line-height:1.6;margin-bottom:1.5rem;color:var(--tableText);font-size:.9375rem}.help-panel-content .help-panel-section{margin-bottom:1.5rem;padding:1rem;background-color:var(--navigation);border-radius:var(--inputBorderRadius);border-left:.25rem solid var(--primary)}.help-panel-content .help-panel-section .help-panel-subtitle{margin:0 0 .75rem;color:var(--primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.help-panel-content .help-panel-section .help-panel-subtitle span[class^=icon-]{font-size:1rem;opacity:.8}.help-panel-content .help-panel-section .help-panel-text{margin:0;line-height:1.6;color:var(--tableText);font-size:.875rem}.help-panel-content .help-panel-note{padding:1rem;background-color:#ffc1071a;border-radius:var(--inputBorderRadius);border-left:.25rem solid #ffc107;color:var(--tableText);font-size:.875rem;line-height:1.6}.help-panel-content .help-panel-note strong{color:#ffc107}\n"] }]
         }], ctorParameters: () => [{ type: JwtSignerFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SHAREDZ_EXTENSION]
@@ -26914,6 +27425,16 @@ class AuthPolicyFormComponent extends ProjectableForm {
                 break;
         }
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     clear() {
         this.formData.configTypeId = '';
         this.clearForm();
@@ -27124,11 +27645,11 @@ class AuthPolicyFormComponent extends ProjectableForm {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthPolicyFormComponent, deps: [{ token: AuthPolicyFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: AuthPolicyFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { 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  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #formContainer>\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\n              class=\"form-field-input\"\n              [(ngModel)]=\"formData.name\"\n              [ngClass]=\"{error: errors['name']}\"\n              placeholder=\"Name this Auth Policy\"\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\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)=\"!useStrictReadonlyForm && toggleCertAllowed()\"\n                [ngClass]=\"{ on: formData.primary.cert.allowed, 'toggle-readonly': useStrictReadonlyForm }\"\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        @if (formData.primary.cert.allowed) {\n          <lib-form-field-container\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        }\n        @if (formData.primary.extJwt.allowed) {\n          <lib-form-field-container\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                [disableField]=\"useStrictReadonlyForm\"\n                [disableCreate]=\"useStrictReadonlyForm\"\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        }\n        @if (formData.primary.updb.allowed) {\n          <lib-form-field-container\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        }\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\" [readOnly]=\"useStrictReadonlyForm\"></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            <lib-filter-select\n              class=\"auth-policy__jwt-signer-select\"\n              placeholder=\"Select JWT Signer...\"\n              optionLabel=\"name\"\n              optionValue=\"id\"\n              [options]=\"svc.jwtSigners\"\n              [showClear]=\"true\"\n              [panelClass]=\"'auth-policy__jwt-signer-select-panel'\"\n              (selectionChange)=\"secondaryJwtSignerChanged($event)\"\n              (filterChange)=\"jwtSignersFilterChangedDebounced($event)\"\n              [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-filter-select>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\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: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;-webkit-animation:loading .5s infinite linear;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)}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-text-field-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{height:36px!important;min-height:36px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{display:flex!important;align-items:center!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value-text,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-min-line{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option{min-height:32px!important;height:32px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;line-height:1.2!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: AuthPolicyFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { 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  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #formContainer>\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\n              class=\"form-field-input\"\n              [(ngModel)]=\"formData.name\"\n              [ngClass]=\"{error: errors['name']}\"\n              placeholder=\"Name this Auth Policy\"\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\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)=\"!useStrictReadonlyForm && toggleCertAllowed()\"\n                [ngClass]=\"{ on: formData.primary.cert.allowed, 'toggle-readonly': useStrictReadonlyForm }\"\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        @if (formData.primary.cert.allowed) {\n          <lib-form-field-container\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        }\n        @if (formData.primary.extJwt.allowed) {\n          <lib-form-field-container\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                [disableField]=\"useStrictReadonlyForm\"\n                [disableCreate]=\"useStrictReadonlyForm\"\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        }\n        @if (formData.primary.updb.allowed) {\n          <lib-form-field-container\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        }\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\" [readOnly]=\"useStrictReadonlyForm\"></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            <lib-filter-select\n              class=\"auth-policy__jwt-signer-select\"\n              placeholder=\"Select JWT Signer...\"\n              optionLabel=\"name\"\n              optionValue=\"id\"\n              [options]=\"svc.jwtSigners\"\n              [showClear]=\"true\"\n              [panelClass]=\"'auth-policy__jwt-signer-select-panel'\"\n              (selectionChange)=\"secondaryJwtSignerChanged($event)\"\n              (filterChange)=\"jwtSignersFilterChangedDebounced($event)\"\n              [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-filter-select>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\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: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;-webkit-animation:loading .5s infinite linear;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)}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-text-field-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{height:36px!important;min-height:36px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{display:flex!important;align-items:center!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value-text,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-min-line{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option{min-height:32px!important;height:32px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;line-height:1.2!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthPolicyFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #formContainer>\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\n              class=\"form-field-input\"\n              [(ngModel)]=\"formData.name\"\n              [ngClass]=\"{error: errors['name']}\"\n              placeholder=\"Name this Auth Policy\"\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\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)=\"!useStrictReadonlyForm && toggleCertAllowed()\"\n                [ngClass]=\"{ on: formData.primary.cert.allowed, 'toggle-readonly': useStrictReadonlyForm }\"\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        @if (formData.primary.cert.allowed) {\n          <lib-form-field-container\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        }\n        @if (formData.primary.extJwt.allowed) {\n          <lib-form-field-container\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                [disableField]=\"useStrictReadonlyForm\"\n                [disableCreate]=\"useStrictReadonlyForm\"\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        }\n        @if (formData.primary.updb.allowed) {\n          <lib-form-field-container\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        }\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\" [readOnly]=\"useStrictReadonlyForm\"></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            <lib-filter-select\n              class=\"auth-policy__jwt-signer-select\"\n              placeholder=\"Select JWT Signer...\"\n              optionLabel=\"name\"\n              optionValue=\"id\"\n              [options]=\"svc.jwtSigners\"\n              [showClear]=\"true\"\n              [panelClass]=\"'auth-policy__jwt-signer-select-panel'\"\n              (selectionChange)=\"secondaryJwtSignerChanged($event)\"\n              (filterChange)=\"jwtSignersFilterChangedDebounced($event)\"\n              [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-filter-select>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\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: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;-webkit-animation:loading .5s infinite linear;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)}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-text-field-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{height:36px!important;min-height:36px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{display:flex!important;align-items:center!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value-text,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-min-line{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option{min-height:32px!important;height:32px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;line-height:1.2!important}\n"] }]
+            args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #formContainer>\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\n              class=\"form-field-input\"\n              [(ngModel)]=\"formData.name\"\n              [ngClass]=\"{error: errors['name']}\"\n              placeholder=\"Name this Auth Policy\"\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\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)=\"!useStrictReadonlyForm && toggleCertAllowed()\"\n                [ngClass]=\"{ on: formData.primary.cert.allowed, 'toggle-readonly': useStrictReadonlyForm }\"\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        @if (formData.primary.cert.allowed) {\n          <lib-form-field-container\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        }\n        @if (formData.primary.extJwt.allowed) {\n          <lib-form-field-container\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                [disableField]=\"useStrictReadonlyForm\"\n                [disableCreate]=\"useStrictReadonlyForm\"\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        }\n        @if (formData.primary.updb.allowed) {\n          <lib-form-field-container\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        }\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\" [readOnly]=\"useStrictReadonlyForm\"></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            <lib-filter-select\n              class=\"auth-policy__jwt-signer-select\"\n              placeholder=\"Select JWT Signer...\"\n              optionLabel=\"name\"\n              optionValue=\"id\"\n              [options]=\"svc.jwtSigners\"\n              [showClear]=\"true\"\n              [panelClass]=\"'auth-policy__jwt-signer-select-panel'\"\n              (selectionChange)=\"secondaryJwtSignerChanged($event)\"\n              (filterChange)=\"jwtSignersFilterChangedDebounced($event)\"\n              [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-filter-select>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\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: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;-webkit-animation:loading .5s infinite linear;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)}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-text-field-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{height:36px!important;min-height:36px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{display:flex!important;align-items:center!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value-text,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-min-line{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option{min-height:32px!important;height:32px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;line-height:1.2!important}\n"] }]
         }], ctorParameters: () => [{ type: AuthPolicyFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SHAREDZ_EXTENSION]
@@ -27673,6 +28194,16 @@ class CertificateAuthorityFormComponent extends ProjectableForm {
                 break;
         }
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     externalIdClaimChanged() {
         if (this.externalIdClaim && !this.formData.externalIdClaim) {
             this.formData.externalIdClaim = {
@@ -27946,11 +28477,11 @@ class CertificateAuthorityFormComponent extends ProjectableForm {
         this.formData.externalIdClaim.parserCriteria = parserCriteria;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CertificateAuthorityFormComponent, deps: [{ token: CertificateAuthorityFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CertificateAuthorityFormComponent, isStandalone: false, selector: "lib-certificate-authority", inputs: { 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]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [badges]=\"badges\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Identity Name Format'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n          >\n          @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.identityNameFormat }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Identity Roles'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\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                  @for (loc of locations; track loc) {\n                    <option [value]=\"loc\">\n                      {{ loc }}\n                    </option>\n                  }\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                  @for (matcher of matchers; track matcher) {\n                    <option [value]=\"matcher\">\n                      {{ matcher }}\n                    </option>\n                  }\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                  @for (parser of parsers; track parser) {\n                    <option [value]=\"parser\">\n                      {{ parser }}\n                    </option>\n                  }\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                  @if (fileSelectOpening) {\n                    <div class=\"spinner\"></div>\n                  }\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n          </lib-form-field-container>\n        </div>\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        @if (formData.id && !this.formData.isVerified) {\n          <lib-form-field-container\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        }\n        @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\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: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;-webkit-animation:loading .5s infinite linear;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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CertificateAuthorityFormComponent, isStandalone: false, selector: "lib-certificate-authority", inputs: { 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]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [badges]=\"badges\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Identity Name Format'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n          >\n          @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.identityNameFormat }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Identity Roles'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\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                  @for (loc of locations; track loc) {\n                    <option [value]=\"loc\">\n                      {{ loc }}\n                    </option>\n                  }\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                  @for (matcher of matchers; track matcher) {\n                    <option [value]=\"matcher\">\n                      {{ matcher }}\n                    </option>\n                  }\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                  @for (parser of parsers; track parser) {\n                    <option [value]=\"parser\">\n                      {{ parser }}\n                    </option>\n                  }\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                  @if (fileSelectOpening) {\n                    <div class=\"spinner\"></div>\n                  }\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n          </lib-form-field-container>\n        </div>\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        @if (formData.id && !this.formData.isVerified) {\n          <lib-form-field-container\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        }\n        @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\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: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;-webkit-animation:loading .5s infinite linear;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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CertificateAuthorityFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-certificate-authority', standalone: false, 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]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [badges]=\"badges\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Identity Name Format'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n          >\n          @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.identityNameFormat }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Identity Roles'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\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                  @for (loc of locations; track loc) {\n                    <option [value]=\"loc\">\n                      {{ loc }}\n                    </option>\n                  }\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                  @for (matcher of matchers; track matcher) {\n                    <option [value]=\"matcher\">\n                      {{ matcher }}\n                    </option>\n                  }\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                  @for (parser of parsers; track parser) {\n                    <option [value]=\"parser\">\n                      {{ parser }}\n                    </option>\n                  }\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                  @if (fileSelectOpening) {\n                    <div class=\"spinner\"></div>\n                  }\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n          </lib-form-field-container>\n        </div>\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        @if (formData.id && !this.formData.isVerified) {\n          <lib-form-field-container\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        }\n        @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\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: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;-webkit-animation:loading .5s infinite linear;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"] }]
+            args: [{ selector: 'lib-certificate-authority', standalone: false, 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]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [badges]=\"badges\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Identity Name Format'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n          >\n          @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.identityNameFormat }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Identity Roles'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\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                  @for (loc of locations; track loc) {\n                    <option [value]=\"loc\">\n                      {{ loc }}\n                    </option>\n                  }\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                  @for (matcher of matchers; track matcher) {\n                    <option [value]=\"matcher\">\n                      {{ matcher }}\n                    </option>\n                  }\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                  @for (parser of parsers; track parser) {\n                    <option [value]=\"parser\">\n                      {{ parser }}\n                    </option>\n                  }\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                  @if (fileSelectOpening) {\n                    <div class=\"spinner\"></div>\n                  }\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n          </lib-form-field-container>\n        </div>\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        @if (formData.id && !this.formData.isVerified) {\n          <lib-form-field-container\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        }\n        @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\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: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;-webkit-animation:loading .5s infinite linear;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"] }]
         }], ctorParameters: () => [{ type: CertificateAuthorityFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SHAREDZ_EXTENSION]
@@ -28742,6 +29273,16 @@ class ConfigTypeFormComponent extends ProjectableForm {
                 break;
         }
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     apiActionRequested(action) {
         switch (action.id) {
             case 'cli':
@@ -28865,11 +29406,11 @@ class ConfigTypeFormComponent extends ProjectableForm {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigTypeFormComponent, deps: [{ token: ConfigTypeFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ConfigTypeFormComponent, isStandalone: false, selector: "lib-config-type-form", inputs: { 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  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Config Type' : 'Create Config Type')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"saveDisabled || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"config-form-container projectable-form-container\" #formContainer>\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n              class=\"form-field-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              [disabled]=\"useStrictReadonlyForm\"\n              >\n        </lib-form-field-container>\n        <lib-form-field-container [title]=\"'Schema'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n          <lib-json-view [(data)]=\"formData.schema\" [jsonInvalid]=\"errors['schema']\" [readOnly]=\"useStrictReadonlyForm\"></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          @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ConfigTypeFormComponent, isStandalone: false, selector: "lib-config-type-form", inputs: { 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  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Config Type' : 'Create Config Type')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"saveDisabled || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"config-form-container projectable-form-container\" #formContainer>\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n              class=\"form-field-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              [disabled]=\"useStrictReadonlyForm\"\n              >\n        </lib-form-field-container>\n        <lib-form-field-container [title]=\"'Schema'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n          <lib-json-view [(data)]=\"formData.schema\" [jsonInvalid]=\"errors['schema']\" [readOnly]=\"useStrictReadonlyForm\"></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          @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigTypeFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-config-type-form', standalone: false, template: "<div class=\"config-type-form-container projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Config Type' : 'Create Config Type')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"saveDisabled || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"config-form-container projectable-form-container\" #formContainer>\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n              class=\"form-field-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              [disabled]=\"useStrictReadonlyForm\"\n              >\n        </lib-form-field-container>\n        <lib-form-field-container [title]=\"'Schema'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n          <lib-json-view [(data)]=\"formData.schema\" [jsonInvalid]=\"errors['schema']\" [readOnly]=\"useStrictReadonlyForm\"></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          @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\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"] }]
+            args: [{ selector: 'lib-config-type-form', standalone: false, template: "<div class=\"config-type-form-container projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Config Type' : 'Create Config Type')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"saveDisabled || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"config-form-container projectable-form-container\" #formContainer>\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]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n              class=\"form-field-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              [disabled]=\"useStrictReadonlyForm\"\n              >\n        </lib-form-field-container>\n        <lib-form-field-container [title]=\"'Schema'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n          <lib-json-view [(data)]=\"formData.schema\" [jsonInvalid]=\"errors['schema']\" [readOnly]=\"useStrictReadonlyForm\"></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          @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\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"] }]
         }], ctorParameters: () => [{ type: ConfigTypeFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SHAREDZ_EXTENSION]
@@ -29493,6 +30034,16 @@ class PostureCheckFormComponent extends ProjectableForm {
                 break;
         }
     }
+    multiActionRequested(action) {
+        switch (action.id) {
+            case 'save':
+                this.save();
+                break;
+            case 'delete':
+                this.deleteEntity();
+                break;
+        }
+    }
     removeProcessItem(index) {
         this.processMultiItems.splice(index, 1);
     }
@@ -29673,11 +30224,11 @@ class PostureCheckFormComponent extends ProjectableForm {
     macAddressesChange(event) {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PostureCheckFormComponent, deps: [{ token: PostureCheckFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PostureCheckFormComponent, isStandalone: false, selector: "lib-posture-check", inputs: { errors: "errors" }, outputs: { close: "close" }, usesInheritance: true, ngImport: i0, template: "<div class=\"posture-check-form-container projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"posture-checkform-container projectable-form-container\" #formContainer>\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]=\"'Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n            id=\"PostureCheckName\"\n            type=\"text\"\n            maxlength=\"500\"\n            placeholder=\"Name this posture check\"\n            [ngClass]=\"{error: errors['name']}\"\n            [(ngModel)]=\"formData.name\"\n            [disabled]=\"useStrictReadonlyForm\"\n            >\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Posture Check attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Posture Checks to form a group of Posture Checks.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"pcRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Posture Checks'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        <lib-form-field-container [title]=\"'Type'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n          @if (postureCheckTypes.length > 0) {\n            <select\n              [(ngModel)]=\"formData.typeId\"\n              (change)=\"pcTypeChanged($event)\"\n              [disabled]=\"formData.id || useStrictReadonlyForm\"\n              [matTooltip]=\"formData.id ? 'Type cannot be changed' : ''\"\n              matTooltipPosition=\"below\"\n              id=\"SelectedConfigType\"\n              class=\"form-field-dropdown\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              >\n              <option value=\"\">Select posture check type...</option>\n              @for (type of postureCheckTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n          }\n        </lib-form-field-container>\n        @if (formData.typeId === 'MAC') {\n          <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.macAddresses\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter mc addresses\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['macAddresses'] }\"\n              [invalid]=\"errors['macAddresses']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'DOMAIN') {\n          <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.domains\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter domains\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['domains'] }\"\n              [invalid]=\"errors['domains']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS') {\n          <lib-form-field-container [title]=\"'Process Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" [contentClass]=\"'form-field-input-group'\">\n            <div class=\"form-field-label-container process-os-details-header\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-filter-select\n                placeholder=\"Select OS...\"\n                optionLabel=\"name\"\n                optionValue=\"type\"\n                [options]=\"osTypes\"\n                [searchable]=\"false\"\n                [showClear]=\"true\"\n                [(ngModel)]=\"formData.process.osType\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                >\n                <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                  @if (value && value !== '') {\n                    <div class=\"os-type-dropdown-item\">\n                      <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                      <div>{{ value }}</div>\n                    </div>\n                  }\n                </ng-template>\n                <ng-template libFilterSelectOption let-os>\n                  <div class=\"os-type-dropdown-item\">\n                    <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                    <div>{{ os.name }}</div>\n                  </div>\n                </ng-template>\n              </lib-filter-select>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Hashes</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Valid sha256 hashes of a binary\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-chips-input [(ngModel)]=\"formData.process.hashes\"\n                [allowDuplicate]=\"false\"\n                placeholder=\"Enter hashes\"\n                [addOnBlur]=\"true\"\n                [ngClass]=\"{ error: errors['processHashes'] }\"\n                [invalid]=\"errors['processHashes']\"\n                separator=\",\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                [disabled]=\"useStrictReadonlyForm\"\n              ></lib-chips-input>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Path</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"formData.process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Fingerprint</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter a fingerprint\" [(ngModel)]=\"formData.process.signerFingerprint\" [ngClass]=\"{error: errors['androidOSMin']}\"/>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS_MULTI') {\n          <lib-form-field-container [title]=\"'Process Multi Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" >\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Semantic</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <select\n                [(ngModel)]=\"formData.semantic\"\n                id=\"PolicySemantic\"\n                class=\"form-field-dropdown\"\n                >\n                <option value=\"AllOf\">AllOf</option>\n                <option value=\"AnyOf\">AnyOf</option>\n              </select>\n            </div>\n            @for (process of processMultiItems; track process; let i = $index) {\n              <div class=\"process-multi-item form-field-input-group\">\n                @if (processMultiItems.length > 1) {\n                  <div class=\"icon-clear\" (click)=\"removeProcessItem(i)\"></div>\n                }\n                <div class=\"form-field-label-container process-os-details-header\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Operating System</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-filter-select\n                    placeholder=\"Select OS...\"\n                    optionLabel=\"name\"\n                    optionValue=\"type\"\n                    [options]=\"osTypes\"\n                    [searchable]=\"false\"\n                    [showClear]=\"true\"\n                    [(ngModel)]=\"process.osType\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    >\n                    <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                      @if (value && value !== '') {\n                        <div class=\"os-type-dropdown-item\">\n                          <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                          <div>{{ value }}</div>\n                        </div>\n                      }\n                    </ng-template>\n                    <ng-template libFilterSelectOption let-os>\n                      <div class=\"os-type-dropdown-item\">\n                        <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                        <div>{{ os.name }}</div>\n                      </div>\n                    </ng-template>\n                  </lib-filter-select>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Hashes</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Valid sha256 hashes of a binary\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-chips-input [(ngModel)]=\"process.hashes\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter hashes\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['processHashes'] }\"\n                    [invalid]=\"errors['processHashes']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Path</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Fingerprint</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Signer fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-chips-input (keyup)=\"macAddressesChange($event)\"\n                    [(ngModel)]=\"process.signerFingerprints\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter signer fingerprints\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['process[' + i +'].signerFingerprints'] }\"\n                    [invalid]=\"errors['process[' + i +'].signerFingerprints']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n              </div>\n            }\n            <div class=\"buttons process-multi-buttons\">\n              <button class=\"button\" (click)=\"addProcessItem()\">Add Another Process</button>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'MFA') {\n          <lib-form-field-container\n            [title]=\"'Multi Factor Details'\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\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\">Timeout (seconds)</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"# in seconds\" [(ngModel)]=\"formData.timeoutSeconds\" [ngClass]=\"{error: errors['timeoutSeconds']}\" type=\"number\"/>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('wake')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Wake</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnWake }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnWake\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnWake\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('unlock')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Unlock</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnUnlock }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnUnlock\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnUnlock\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'OS') {\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('Android')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button android-os-button\"></div>\n                    <div class=\"config-container-label\">Android</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Android.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Android.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Android.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></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\">Min Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.min\" [ngClass]=\"{error: errors['androidOSMin']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Max Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.max\" [ngClass]=\"{error: errors['androidOSMax']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('iOS')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button ios-os-button\"></div>\n                    <div class=\"config-container-label\">iOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.iOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.iOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.iOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.min\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.max\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Linux')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button linux-os-button\"></div>\n                    <div class=\"config-container-label\">Linux</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Linux.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Linux.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Linux.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.min\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.max\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('macOS')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button mac-os-button\"></div>\n                    <div class=\"config-container-label\">macOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.macOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.macOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.macOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.min\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.max\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Windows')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-os-button\"></div>\n                    <div class=\"config-container-label\">Windows</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Windows.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Windows.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Windows.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.min\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.max\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('WindowsServer')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-server-os-button\"></div>\n                    <div class=\"config-container-label\">Windows Server</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.WindowsServer.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.WindowsServer.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.WindowsServer.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.min\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.max\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\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          @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".posture-check-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}.os-toggle-container{gap:var(--gapSmall)}.os-toggle-container .config-container-label{text-transform:unset}.os-toggle-container{height:var(--defaultInputHeight);cursor:pointer}.os-toggle-container:hover .pc-os-button{transform:scale(1.05)}.os-version-row input:disabled{color:transparent!important}.os-version-row input:disabled::placeholder{color:transparent!important}.process-os-details-header{margin-top:var(--marginSmall)}input:disabled,select:disabled,textarea:disabled{opacity:.3!important;cursor:not-allowed}.process-multi-buttons{display:flex;flex-direction:row;justify-content:flex-end;margin:0}.process-multi-buttons button{background-color:var(--primaryColor);box-shadow:none;font-size:.75rem}.process-multi-buttons button:hover{filter:brightness(.8)}.process-multi-buttons button:active{transform:translateY(.0625rem)}.process-multi-item{display:flex;flex-direction:column;position:relative;gap:var(--gapMedium);border-width:.125rem;border-color:var(--menu);border-style:solid;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.process-multi-item .icon-clear{position:absolute;top:0;right:0;color:var(--red);margin-top:-.5rem;margin-right:-.5rem;background:var(--background);font-size:1.5rem;border-radius:2rem;cursor:pointer}.process-multi-item .icon-clear:hover{filter:brightness(.8)}.process-multi-item .icon-clear:active{transform:translateY(.0625rem)}.os-type-dropdown-item{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.os-type-dropdown-item div{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText)}.os-type-dropdown-item .os-type-dropdown-icon{background-size:1.75rem;height:1.75rem;width:1.75rem;display:inline-block;background-position-x:center;background-position-y:center}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Android{background-image:url(/assets/images/android-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-iOS{background-image:url(/assets/images/ios-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Linux{background-image:url(/assets/images/linux-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-macOS{background-image:url(/assets/images/mac-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Windows{background-image:url(/assets/images/windows-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-WindowsServer{background-image:url(/assets/images/windows-server-os.png)}.pc-os-button{background-size:2rem;height:2rem;width:2rem;display:inline-block;background-position-x:center;background-position-y:center;margin-right:.5rem}.pc-os-button.android-os-button{background-image:url(/assets/images/android-os.png)}.pc-os-button.ios-os-button{background-image:url(/assets/images/ios-os.png)}.pc-os-button.linux-os-button{background-image:url(/assets/images/linux-os.png)}.pc-os-button.mac-os-button{background-image:url(/assets/images/mac-os.png)}.pc-os-button.windows-os-button{background-image:url(/assets/images/windows-os.png)}.pc-os-button.windows-server-os-button{background-color:var(--offWhite_ALWAYS);border-radius:2rem;width:2rem;height:2rem;min-width:2rem;background-size:1.625rem;background-image:url(/assets/images/windows-server-os.png)}::ng-deep .posture-check-form-container .p-dropdown-panel .p-dropdown-items .p-dropdown-item{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText);padding:.25rem var(--paddingMedium)}::ng-deep .posture-check-form-container p-dropdown .p-dropdown.p-component .p-inputtext.p-dropdown-label{padding:0 var(--paddingMedium)}::ng-deep p-chips input[type=text]{width:100%}::ng-deep p-chips ul{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "inputId", "addOnBlur", "allowDuplicate", "separator", "invalid"], outputs: ["onAdd", "onRemove", "onModelChange", "onBlur", "keyup"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }, { kind: "directive", type: FilterSelectOptionTemplateDirective, selector: "ng-template[libFilterSelectOption]" }, { kind: "directive", type: FilterSelectTriggerTemplateDirective, selector: "ng-template[libFilterSelectTrigger]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PostureCheckFormComponent, isStandalone: false, selector: "lib-posture-check", inputs: { errors: "errors" }, outputs: { close: "close" }, usesInheritance: true, ngImport: i0, template: "<div class=\"posture-check-form-container projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"posture-checkform-container projectable-form-container\" #formContainer>\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]=\"'Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n            id=\"PostureCheckName\"\n            type=\"text\"\n            maxlength=\"500\"\n            placeholder=\"Name this posture check\"\n            [ngClass]=\"{error: errors['name']}\"\n            [(ngModel)]=\"formData.name\"\n            [disabled]=\"useStrictReadonlyForm\"\n            >\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Posture Check attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Posture Checks to form a group of Posture Checks.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"pcRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Posture Checks'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        <lib-form-field-container [title]=\"'Type'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n          @if (postureCheckTypes.length > 0) {\n            <select\n              [(ngModel)]=\"formData.typeId\"\n              (change)=\"pcTypeChanged($event)\"\n              [disabled]=\"formData.id || useStrictReadonlyForm\"\n              [matTooltip]=\"formData.id ? 'Type cannot be changed' : ''\"\n              matTooltipPosition=\"below\"\n              id=\"SelectedConfigType\"\n              class=\"form-field-dropdown\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              >\n              <option value=\"\">Select posture check type...</option>\n              @for (type of postureCheckTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n          }\n        </lib-form-field-container>\n        @if (formData.typeId === 'MAC') {\n          <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.macAddresses\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter mc addresses\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['macAddresses'] }\"\n              [invalid]=\"errors['macAddresses']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'DOMAIN') {\n          <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.domains\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter domains\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['domains'] }\"\n              [invalid]=\"errors['domains']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS') {\n          <lib-form-field-container [title]=\"'Process Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" [contentClass]=\"'form-field-input-group'\">\n            <div class=\"form-field-label-container process-os-details-header\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-filter-select\n                placeholder=\"Select OS...\"\n                optionLabel=\"name\"\n                optionValue=\"type\"\n                [options]=\"osTypes\"\n                [searchable]=\"false\"\n                [showClear]=\"true\"\n                [(ngModel)]=\"formData.process.osType\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                >\n                <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                  @if (value && value !== '') {\n                    <div class=\"os-type-dropdown-item\">\n                      <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                      <div>{{ value }}</div>\n                    </div>\n                  }\n                </ng-template>\n                <ng-template libFilterSelectOption let-os>\n                  <div class=\"os-type-dropdown-item\">\n                    <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                    <div>{{ os.name }}</div>\n                  </div>\n                </ng-template>\n              </lib-filter-select>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Hashes</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Valid sha256 hashes of a binary\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-chips-input [(ngModel)]=\"formData.process.hashes\"\n                [allowDuplicate]=\"false\"\n                placeholder=\"Enter hashes\"\n                [addOnBlur]=\"true\"\n                [ngClass]=\"{ error: errors['processHashes'] }\"\n                [invalid]=\"errors['processHashes']\"\n                separator=\",\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                [disabled]=\"useStrictReadonlyForm\"\n              ></lib-chips-input>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Path</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"formData.process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Fingerprint</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter a fingerprint\" [(ngModel)]=\"formData.process.signerFingerprint\" [ngClass]=\"{error: errors['androidOSMin']}\"/>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS_MULTI') {\n          <lib-form-field-container [title]=\"'Process Multi Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" >\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Semantic</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <select\n                [(ngModel)]=\"formData.semantic\"\n                id=\"PolicySemantic\"\n                class=\"form-field-dropdown\"\n                >\n                <option value=\"AllOf\">AllOf</option>\n                <option value=\"AnyOf\">AnyOf</option>\n              </select>\n            </div>\n            @for (process of processMultiItems; track process; let i = $index) {\n              <div class=\"process-multi-item form-field-input-group\">\n                @if (processMultiItems.length > 1) {\n                  <div class=\"icon-clear\" (click)=\"removeProcessItem(i)\"></div>\n                }\n                <div class=\"form-field-label-container process-os-details-header\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Operating System</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-filter-select\n                    placeholder=\"Select OS...\"\n                    optionLabel=\"name\"\n                    optionValue=\"type\"\n                    [options]=\"osTypes\"\n                    [searchable]=\"false\"\n                    [showClear]=\"true\"\n                    [(ngModel)]=\"process.osType\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    >\n                    <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                      @if (value && value !== '') {\n                        <div class=\"os-type-dropdown-item\">\n                          <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                          <div>{{ value }}</div>\n                        </div>\n                      }\n                    </ng-template>\n                    <ng-template libFilterSelectOption let-os>\n                      <div class=\"os-type-dropdown-item\">\n                        <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                        <div>{{ os.name }}</div>\n                      </div>\n                    </ng-template>\n                  </lib-filter-select>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Hashes</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Valid sha256 hashes of a binary\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-chips-input [(ngModel)]=\"process.hashes\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter hashes\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['processHashes'] }\"\n                    [invalid]=\"errors['processHashes']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Path</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Fingerprint</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Signer fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-chips-input (keyup)=\"macAddressesChange($event)\"\n                    [(ngModel)]=\"process.signerFingerprints\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter signer fingerprints\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['process[' + i +'].signerFingerprints'] }\"\n                    [invalid]=\"errors['process[' + i +'].signerFingerprints']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n              </div>\n            }\n            <div class=\"buttons process-multi-buttons\">\n              <button class=\"button\" (click)=\"addProcessItem()\">Add Another Process</button>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'MFA') {\n          <lib-form-field-container\n            [title]=\"'Multi Factor Details'\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\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\">Timeout (seconds)</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"# in seconds\" [(ngModel)]=\"formData.timeoutSeconds\" [ngClass]=\"{error: errors['timeoutSeconds']}\" type=\"number\"/>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('wake')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Wake</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnWake }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnWake\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnWake\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('unlock')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Unlock</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnUnlock }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnUnlock\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnUnlock\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'OS') {\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('Android')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button android-os-button\"></div>\n                    <div class=\"config-container-label\">Android</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Android.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Android.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Android.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></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\">Min Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.min\" [ngClass]=\"{error: errors['androidOSMin']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Max Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.max\" [ngClass]=\"{error: errors['androidOSMax']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('iOS')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button ios-os-button\"></div>\n                    <div class=\"config-container-label\">iOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.iOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.iOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.iOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.min\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.max\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Linux')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button linux-os-button\"></div>\n                    <div class=\"config-container-label\">Linux</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Linux.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Linux.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Linux.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.min\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.max\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('macOS')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button mac-os-button\"></div>\n                    <div class=\"config-container-label\">macOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.macOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.macOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.macOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.min\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.max\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Windows')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-os-button\"></div>\n                    <div class=\"config-container-label\">Windows</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Windows.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Windows.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Windows.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.min\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.max\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('WindowsServer')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-server-os-button\"></div>\n                    <div class=\"config-container-label\">Windows Server</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.WindowsServer.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.WindowsServer.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.WindowsServer.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.min\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.max\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\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          @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".posture-check-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}.os-toggle-container{gap:var(--gapSmall)}.os-toggle-container .config-container-label{text-transform:unset}.os-toggle-container{height:var(--defaultInputHeight);cursor:pointer}.os-toggle-container:hover .pc-os-button{transform:scale(1.05)}.os-version-row input:disabled{color:transparent!important}.os-version-row input:disabled::placeholder{color:transparent!important}.process-os-details-header{margin-top:var(--marginSmall)}input:disabled,select:disabled,textarea:disabled{opacity:.3!important;cursor:not-allowed}.process-multi-buttons{display:flex;flex-direction:row;justify-content:flex-end;margin:0}.process-multi-buttons button{background-color:var(--primaryColor);box-shadow:none;font-size:.75rem}.process-multi-buttons button:hover{filter:brightness(.8)}.process-multi-buttons button:active{transform:translateY(.0625rem)}.process-multi-item{display:flex;flex-direction:column;position:relative;gap:var(--gapMedium);border-width:.125rem;border-color:var(--menu);border-style:solid;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.process-multi-item .icon-clear{position:absolute;top:0;right:0;color:var(--red);margin-top:-.5rem;margin-right:-.5rem;background:var(--background);font-size:1.5rem;border-radius:2rem;cursor:pointer}.process-multi-item .icon-clear:hover{filter:brightness(.8)}.process-multi-item .icon-clear:active{transform:translateY(.0625rem)}.os-type-dropdown-item{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.os-type-dropdown-item div{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText)}.os-type-dropdown-item .os-type-dropdown-icon{background-size:1.75rem;height:1.75rem;width:1.75rem;display:inline-block;background-position-x:center;background-position-y:center}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Android{background-image:url(/assets/images/android-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-iOS{background-image:url(/assets/images/ios-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Linux{background-image:url(/assets/images/linux-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-macOS{background-image:url(/assets/images/mac-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Windows{background-image:url(/assets/images/windows-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-WindowsServer{background-image:url(/assets/images/windows-server-os.png)}.pc-os-button{background-size:2rem;height:2rem;width:2rem;display:inline-block;background-position-x:center;background-position-y:center;margin-right:.5rem}.pc-os-button.android-os-button{background-image:url(/assets/images/android-os.png)}.pc-os-button.ios-os-button{background-image:url(/assets/images/ios-os.png)}.pc-os-button.linux-os-button{background-image:url(/assets/images/linux-os.png)}.pc-os-button.mac-os-button{background-image:url(/assets/images/mac-os.png)}.pc-os-button.windows-os-button{background-image:url(/assets/images/windows-os.png)}.pc-os-button.windows-server-os-button{background-color:var(--offWhite_ALWAYS);border-radius:2rem;width:2rem;height:2rem;min-width:2rem;background-size:1.625rem;background-image:url(/assets/images/windows-server-os.png)}::ng-deep .posture-check-form-container .p-dropdown-panel .p-dropdown-items .p-dropdown-item{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText);padding:.25rem var(--paddingMedium)}::ng-deep .posture-check-form-container p-dropdown .p-dropdown.p-component .p-inputtext.p-dropdown-label{padding:0 var(--paddingMedium)}::ng-deep p-chips input[type=text]{width:100%}::ng-deep p-chips ul{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "inputId", "addOnBlur", "allowDuplicate", "separator", "invalid"], outputs: ["onAdd", "onRemove", "onModelChange", "onBlur", "keyup"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }, { kind: "directive", type: FilterSelectOptionTemplateDirective, selector: "ng-template[libFilterSelectOption]" }, { kind: "directive", type: FilterSelectTriggerTemplateDirective, selector: "ng-template[libFilterSelectTrigger]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PostureCheckFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-posture-check', standalone: false, template: "<div class=\"posture-check-form-container projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n    [moreActions]=\"moreActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"posture-checkform-container projectable-form-container\" #formContainer>\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]=\"'Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n            id=\"PostureCheckName\"\n            type=\"text\"\n            maxlength=\"500\"\n            placeholder=\"Name this posture check\"\n            [ngClass]=\"{error: errors['name']}\"\n            [(ngModel)]=\"formData.name\"\n            [disabled]=\"useStrictReadonlyForm\"\n            >\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Posture Check attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Posture Checks to form a group of Posture Checks.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"pcRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Posture Checks'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        <lib-form-field-container [title]=\"'Type'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n          @if (postureCheckTypes.length > 0) {\n            <select\n              [(ngModel)]=\"formData.typeId\"\n              (change)=\"pcTypeChanged($event)\"\n              [disabled]=\"formData.id || useStrictReadonlyForm\"\n              [matTooltip]=\"formData.id ? 'Type cannot be changed' : ''\"\n              matTooltipPosition=\"below\"\n              id=\"SelectedConfigType\"\n              class=\"form-field-dropdown\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              >\n              <option value=\"\">Select posture check type...</option>\n              @for (type of postureCheckTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n          }\n        </lib-form-field-container>\n        @if (formData.typeId === 'MAC') {\n          <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.macAddresses\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter mc addresses\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['macAddresses'] }\"\n              [invalid]=\"errors['macAddresses']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'DOMAIN') {\n          <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.domains\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter domains\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['domains'] }\"\n              [invalid]=\"errors['domains']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS') {\n          <lib-form-field-container [title]=\"'Process Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" [contentClass]=\"'form-field-input-group'\">\n            <div class=\"form-field-label-container process-os-details-header\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-filter-select\n                placeholder=\"Select OS...\"\n                optionLabel=\"name\"\n                optionValue=\"type\"\n                [options]=\"osTypes\"\n                [searchable]=\"false\"\n                [showClear]=\"true\"\n                [(ngModel)]=\"formData.process.osType\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                >\n                <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                  @if (value && value !== '') {\n                    <div class=\"os-type-dropdown-item\">\n                      <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                      <div>{{ value }}</div>\n                    </div>\n                  }\n                </ng-template>\n                <ng-template libFilterSelectOption let-os>\n                  <div class=\"os-type-dropdown-item\">\n                    <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                    <div>{{ os.name }}</div>\n                  </div>\n                </ng-template>\n              </lib-filter-select>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Hashes</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Valid sha256 hashes of a binary\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-chips-input [(ngModel)]=\"formData.process.hashes\"\n                [allowDuplicate]=\"false\"\n                placeholder=\"Enter hashes\"\n                [addOnBlur]=\"true\"\n                [ngClass]=\"{ error: errors['processHashes'] }\"\n                [invalid]=\"errors['processHashes']\"\n                separator=\",\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                [disabled]=\"useStrictReadonlyForm\"\n              ></lib-chips-input>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Path</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"formData.process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Fingerprint</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter a fingerprint\" [(ngModel)]=\"formData.process.signerFingerprint\" [ngClass]=\"{error: errors['androidOSMin']}\"/>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS_MULTI') {\n          <lib-form-field-container [title]=\"'Process Multi Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" >\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Semantic</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <select\n                [(ngModel)]=\"formData.semantic\"\n                id=\"PolicySemantic\"\n                class=\"form-field-dropdown\"\n                >\n                <option value=\"AllOf\">AllOf</option>\n                <option value=\"AnyOf\">AnyOf</option>\n              </select>\n            </div>\n            @for (process of processMultiItems; track process; let i = $index) {\n              <div class=\"process-multi-item form-field-input-group\">\n                @if (processMultiItems.length > 1) {\n                  <div class=\"icon-clear\" (click)=\"removeProcessItem(i)\"></div>\n                }\n                <div class=\"form-field-label-container process-os-details-header\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Operating System</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-filter-select\n                    placeholder=\"Select OS...\"\n                    optionLabel=\"name\"\n                    optionValue=\"type\"\n                    [options]=\"osTypes\"\n                    [searchable]=\"false\"\n                    [showClear]=\"true\"\n                    [(ngModel)]=\"process.osType\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    >\n                    <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                      @if (value && value !== '') {\n                        <div class=\"os-type-dropdown-item\">\n                          <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                          <div>{{ value }}</div>\n                        </div>\n                      }\n                    </ng-template>\n                    <ng-template libFilterSelectOption let-os>\n                      <div class=\"os-type-dropdown-item\">\n                        <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                        <div>{{ os.name }}</div>\n                      </div>\n                    </ng-template>\n                  </lib-filter-select>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Hashes</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Valid sha256 hashes of a binary\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-chips-input [(ngModel)]=\"process.hashes\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter hashes\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['processHashes'] }\"\n                    [invalid]=\"errors['processHashes']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Path</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Fingerprint</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Signer fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-chips-input (keyup)=\"macAddressesChange($event)\"\n                    [(ngModel)]=\"process.signerFingerprints\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter signer fingerprints\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['process[' + i +'].signerFingerprints'] }\"\n                    [invalid]=\"errors['process[' + i +'].signerFingerprints']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n              </div>\n            }\n            <div class=\"buttons process-multi-buttons\">\n              <button class=\"button\" (click)=\"addProcessItem()\">Add Another Process</button>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'MFA') {\n          <lib-form-field-container\n            [title]=\"'Multi Factor Details'\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\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\">Timeout (seconds)</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"# in seconds\" [(ngModel)]=\"formData.timeoutSeconds\" [ngClass]=\"{error: errors['timeoutSeconds']}\" type=\"number\"/>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('wake')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Wake</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnWake }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnWake\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnWake\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('unlock')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Unlock</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnUnlock }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnUnlock\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnUnlock\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'OS') {\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('Android')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button android-os-button\"></div>\n                    <div class=\"config-container-label\">Android</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Android.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Android.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Android.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></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\">Min Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.min\" [ngClass]=\"{error: errors['androidOSMin']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Max Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.max\" [ngClass]=\"{error: errors['androidOSMax']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('iOS')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button ios-os-button\"></div>\n                    <div class=\"config-container-label\">iOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.iOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.iOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.iOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.min\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.max\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Linux')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button linux-os-button\"></div>\n                    <div class=\"config-container-label\">Linux</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Linux.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Linux.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Linux.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.min\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.max\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('macOS')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button mac-os-button\"></div>\n                    <div class=\"config-container-label\">macOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.macOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.macOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.macOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.min\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.max\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Windows')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-os-button\"></div>\n                    <div class=\"config-container-label\">Windows</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Windows.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Windows.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Windows.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.min\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.max\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('WindowsServer')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-server-os-button\"></div>\n                    <div class=\"config-container-label\">Windows Server</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.WindowsServer.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.WindowsServer.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.WindowsServer.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.min\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.max\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\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          @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".posture-check-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}.os-toggle-container{gap:var(--gapSmall)}.os-toggle-container .config-container-label{text-transform:unset}.os-toggle-container{height:var(--defaultInputHeight);cursor:pointer}.os-toggle-container:hover .pc-os-button{transform:scale(1.05)}.os-version-row input:disabled{color:transparent!important}.os-version-row input:disabled::placeholder{color:transparent!important}.process-os-details-header{margin-top:var(--marginSmall)}input:disabled,select:disabled,textarea:disabled{opacity:.3!important;cursor:not-allowed}.process-multi-buttons{display:flex;flex-direction:row;justify-content:flex-end;margin:0}.process-multi-buttons button{background-color:var(--primaryColor);box-shadow:none;font-size:.75rem}.process-multi-buttons button:hover{filter:brightness(.8)}.process-multi-buttons button:active{transform:translateY(.0625rem)}.process-multi-item{display:flex;flex-direction:column;position:relative;gap:var(--gapMedium);border-width:.125rem;border-color:var(--menu);border-style:solid;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.process-multi-item .icon-clear{position:absolute;top:0;right:0;color:var(--red);margin-top:-.5rem;margin-right:-.5rem;background:var(--background);font-size:1.5rem;border-radius:2rem;cursor:pointer}.process-multi-item .icon-clear:hover{filter:brightness(.8)}.process-multi-item .icon-clear:active{transform:translateY(.0625rem)}.os-type-dropdown-item{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.os-type-dropdown-item div{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText)}.os-type-dropdown-item .os-type-dropdown-icon{background-size:1.75rem;height:1.75rem;width:1.75rem;display:inline-block;background-position-x:center;background-position-y:center}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Android{background-image:url(/assets/images/android-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-iOS{background-image:url(/assets/images/ios-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Linux{background-image:url(/assets/images/linux-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-macOS{background-image:url(/assets/images/mac-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Windows{background-image:url(/assets/images/windows-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-WindowsServer{background-image:url(/assets/images/windows-server-os.png)}.pc-os-button{background-size:2rem;height:2rem;width:2rem;display:inline-block;background-position-x:center;background-position-y:center;margin-right:.5rem}.pc-os-button.android-os-button{background-image:url(/assets/images/android-os.png)}.pc-os-button.ios-os-button{background-image:url(/assets/images/ios-os.png)}.pc-os-button.linux-os-button{background-image:url(/assets/images/linux-os.png)}.pc-os-button.mac-os-button{background-image:url(/assets/images/mac-os.png)}.pc-os-button.windows-os-button{background-image:url(/assets/images/windows-os.png)}.pc-os-button.windows-server-os-button{background-color:var(--offWhite_ALWAYS);border-radius:2rem;width:2rem;height:2rem;min-width:2rem;background-size:1.625rem;background-image:url(/assets/images/windows-server-os.png)}::ng-deep .posture-check-form-container .p-dropdown-panel .p-dropdown-items .p-dropdown-item{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText);padding:.25rem var(--paddingMedium)}::ng-deep .posture-check-form-container p-dropdown .p-dropdown.p-component .p-inputtext.p-dropdown-label{padding:0 var(--paddingMedium)}::ng-deep p-chips input[type=text]{width:100%}::ng-deep p-chips ul{padding:0}\n"] }]
+            args: [{ selector: 'lib-posture-check', standalone: false, template: "<div class=\"posture-check-form-container projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"posture-checkform-container projectable-form-container\" #formContainer>\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]=\"'Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n            id=\"PostureCheckName\"\n            type=\"text\"\n            maxlength=\"500\"\n            placeholder=\"Name this posture check\"\n            [ngClass]=\"{error: errors['name']}\"\n            [(ngModel)]=\"formData.name\"\n            [disabled]=\"useStrictReadonlyForm\"\n            >\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Posture Check attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Posture Checks to form a group of Posture Checks.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"pcRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Posture Checks'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        <lib-form-field-container [title]=\"'Type'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n          @if (postureCheckTypes.length > 0) {\n            <select\n              [(ngModel)]=\"formData.typeId\"\n              (change)=\"pcTypeChanged($event)\"\n              [disabled]=\"formData.id || useStrictReadonlyForm\"\n              [matTooltip]=\"formData.id ? 'Type cannot be changed' : ''\"\n              matTooltipPosition=\"below\"\n              id=\"SelectedConfigType\"\n              class=\"form-field-dropdown\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              >\n              <option value=\"\">Select posture check type...</option>\n              @for (type of postureCheckTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n          }\n        </lib-form-field-container>\n        @if (formData.typeId === 'MAC') {\n          <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.macAddresses\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter mc addresses\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['macAddresses'] }\"\n              [invalid]=\"errors['macAddresses']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'DOMAIN') {\n          <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.domains\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter domains\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['domains'] }\"\n              [invalid]=\"errors['domains']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS') {\n          <lib-form-field-container [title]=\"'Process Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" [contentClass]=\"'form-field-input-group'\">\n            <div class=\"form-field-label-container process-os-details-header\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-filter-select\n                placeholder=\"Select OS...\"\n                optionLabel=\"name\"\n                optionValue=\"type\"\n                [options]=\"osTypes\"\n                [searchable]=\"false\"\n                [showClear]=\"true\"\n                [(ngModel)]=\"formData.process.osType\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                >\n                <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                  @if (value && value !== '') {\n                    <div class=\"os-type-dropdown-item\">\n                      <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                      <div>{{ value }}</div>\n                    </div>\n                  }\n                </ng-template>\n                <ng-template libFilterSelectOption let-os>\n                  <div class=\"os-type-dropdown-item\">\n                    <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                    <div>{{ os.name }}</div>\n                  </div>\n                </ng-template>\n              </lib-filter-select>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Hashes</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Valid sha256 hashes of a binary\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-chips-input [(ngModel)]=\"formData.process.hashes\"\n                [allowDuplicate]=\"false\"\n                placeholder=\"Enter hashes\"\n                [addOnBlur]=\"true\"\n                [ngClass]=\"{ error: errors['processHashes'] }\"\n                [invalid]=\"errors['processHashes']\"\n                separator=\",\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                [disabled]=\"useStrictReadonlyForm\"\n              ></lib-chips-input>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Path</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"formData.process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Fingerprint</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter a fingerprint\" [(ngModel)]=\"formData.process.signerFingerprint\" [ngClass]=\"{error: errors['androidOSMin']}\"/>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS_MULTI') {\n          <lib-form-field-container [title]=\"'Process Multi Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" >\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Semantic</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <select\n                [(ngModel)]=\"formData.semantic\"\n                id=\"PolicySemantic\"\n                class=\"form-field-dropdown\"\n                >\n                <option value=\"AllOf\">AllOf</option>\n                <option value=\"AnyOf\">AnyOf</option>\n              </select>\n            </div>\n            @for (process of processMultiItems; track process; let i = $index) {\n              <div class=\"process-multi-item form-field-input-group\">\n                @if (processMultiItems.length > 1) {\n                  <div class=\"icon-clear\" (click)=\"removeProcessItem(i)\"></div>\n                }\n                <div class=\"form-field-label-container process-os-details-header\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Operating System</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-filter-select\n                    placeholder=\"Select OS...\"\n                    optionLabel=\"name\"\n                    optionValue=\"type\"\n                    [options]=\"osTypes\"\n                    [searchable]=\"false\"\n                    [showClear]=\"true\"\n                    [(ngModel)]=\"process.osType\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    >\n                    <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                      @if (value && value !== '') {\n                        <div class=\"os-type-dropdown-item\">\n                          <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                          <div>{{ value }}</div>\n                        </div>\n                      }\n                    </ng-template>\n                    <ng-template libFilterSelectOption let-os>\n                      <div class=\"os-type-dropdown-item\">\n                        <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                        <div>{{ os.name }}</div>\n                      </div>\n                    </ng-template>\n                  </lib-filter-select>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Hashes</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Valid sha256 hashes of a binary\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-chips-input [(ngModel)]=\"process.hashes\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter hashes\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['processHashes'] }\"\n                    [invalid]=\"errors['processHashes']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Path</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Fingerprint</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Signer fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-chips-input (keyup)=\"macAddressesChange($event)\"\n                    [(ngModel)]=\"process.signerFingerprints\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter signer fingerprints\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['process[' + i +'].signerFingerprints'] }\"\n                    [invalid]=\"errors['process[' + i +'].signerFingerprints']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n              </div>\n            }\n            <div class=\"buttons process-multi-buttons\">\n              <button class=\"button\" (click)=\"addProcessItem()\">Add Another Process</button>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'MFA') {\n          <lib-form-field-container\n            [title]=\"'Multi Factor Details'\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\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\">Timeout (seconds)</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"# in seconds\" [(ngModel)]=\"formData.timeoutSeconds\" [ngClass]=\"{error: errors['timeoutSeconds']}\" type=\"number\"/>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('wake')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Wake</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnWake }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnWake\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnWake\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('unlock')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Unlock</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnUnlock }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnUnlock\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnUnlock\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'OS') {\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('Android')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button android-os-button\"></div>\n                    <div class=\"config-container-label\">Android</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Android.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Android.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Android.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></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\">Min Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.min\" [ngClass]=\"{error: errors['androidOSMin']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Max Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.max\" [ngClass]=\"{error: errors['androidOSMax']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('iOS')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button ios-os-button\"></div>\n                    <div class=\"config-container-label\">iOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.iOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.iOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.iOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.min\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.max\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Linux')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button linux-os-button\"></div>\n                    <div class=\"config-container-label\">Linux</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Linux.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Linux.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Linux.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.min\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.max\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('macOS')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button mac-os-button\"></div>\n                    <div class=\"config-container-label\">macOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.macOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.macOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.macOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.min\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.max\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Windows')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-os-button\"></div>\n                    <div class=\"config-container-label\">Windows</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Windows.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Windows.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Windows.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.min\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.max\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('WindowsServer')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-server-os-button\"></div>\n                    <div class=\"config-container-label\">Windows Server</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.WindowsServer.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.WindowsServer.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.WindowsServer.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.min\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.max\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\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          @if (!hideTags) {\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\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\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-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".posture-check-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}.os-toggle-container{gap:var(--gapSmall)}.os-toggle-container .config-container-label{text-transform:unset}.os-toggle-container{height:var(--defaultInputHeight);cursor:pointer}.os-toggle-container:hover .pc-os-button{transform:scale(1.05)}.os-version-row input:disabled{color:transparent!important}.os-version-row input:disabled::placeholder{color:transparent!important}.process-os-details-header{margin-top:var(--marginSmall)}input:disabled,select:disabled,textarea:disabled{opacity:.3!important;cursor:not-allowed}.process-multi-buttons{display:flex;flex-direction:row;justify-content:flex-end;margin:0}.process-multi-buttons button{background-color:var(--primaryColor);box-shadow:none;font-size:.75rem}.process-multi-buttons button:hover{filter:brightness(.8)}.process-multi-buttons button:active{transform:translateY(.0625rem)}.process-multi-item{display:flex;flex-direction:column;position:relative;gap:var(--gapMedium);border-width:.125rem;border-color:var(--menu);border-style:solid;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.process-multi-item .icon-clear{position:absolute;top:0;right:0;color:var(--red);margin-top:-.5rem;margin-right:-.5rem;background:var(--background);font-size:1.5rem;border-radius:2rem;cursor:pointer}.process-multi-item .icon-clear:hover{filter:brightness(.8)}.process-multi-item .icon-clear:active{transform:translateY(.0625rem)}.os-type-dropdown-item{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.os-type-dropdown-item div{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText)}.os-type-dropdown-item .os-type-dropdown-icon{background-size:1.75rem;height:1.75rem;width:1.75rem;display:inline-block;background-position-x:center;background-position-y:center}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Android{background-image:url(/assets/images/android-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-iOS{background-image:url(/assets/images/ios-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Linux{background-image:url(/assets/images/linux-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-macOS{background-image:url(/assets/images/mac-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Windows{background-image:url(/assets/images/windows-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-WindowsServer{background-image:url(/assets/images/windows-server-os.png)}.pc-os-button{background-size:2rem;height:2rem;width:2rem;display:inline-block;background-position-x:center;background-position-y:center;margin-right:.5rem}.pc-os-button.android-os-button{background-image:url(/assets/images/android-os.png)}.pc-os-button.ios-os-button{background-image:url(/assets/images/ios-os.png)}.pc-os-button.linux-os-button{background-image:url(/assets/images/linux-os.png)}.pc-os-button.mac-os-button{background-image:url(/assets/images/mac-os.png)}.pc-os-button.windows-os-button{background-image:url(/assets/images/windows-os.png)}.pc-os-button.windows-server-os-button{background-color:var(--offWhite_ALWAYS);border-radius:2rem;width:2rem;height:2rem;min-width:2rem;background-size:1.625rem;background-image:url(/assets/images/windows-server-os.png)}::ng-deep .posture-check-form-container .p-dropdown-panel .p-dropdown-items .p-dropdown-item{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText);padding:.25rem var(--paddingMedium)}::ng-deep .posture-check-form-container p-dropdown .p-dropdown.p-component .p-inputtext.p-dropdown-label{padding:0 var(--paddingMedium)}::ng-deep p-chips input[type=text]{width:100%}::ng-deep p-chips ul{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: PostureCheckFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SHAREDZ_EXTENSION]
@@ -30703,7 +31254,7 @@ class APISessionFormService {
         this.growlerService.show(growlerData);
     }
     getAssociatedServices(id) {
-        this.zitiService.getSubdata('transit-routers', id, 'services').then((result) => {
+        this.zitiService.getSubdata('transit-routers', id, 'services', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedServices = result.data;
             this.associatedServiceNames = this.associatedServices.map((svc) => {
                 return svc.name;
@@ -30711,7 +31262,7 @@ class APISessionFormService {
         });
     }
     getAssociatedIdentities(id) {
-        this.zitiService.getSubdata('transit-routers', id, 'identities').then((result) => {
+        this.zitiService.getSubdata('transit-routers', id, 'identities', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedIdentities = result.data;
             this.associatedIdentityNames = this.associatedIdentities.map((policy) => {
                 return policy.name;
@@ -40599,7 +41150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 }] }, { type: ZitiOidcService }, { type: GrowlerService }, { type: i0.Injector }] });
 const ZAC_VERSION = {
-    "version": "4.3.0"
+    "version": "4.4.0"
 };
 /*