@openziti/ziti-console-lib 0.9.3 → 0.10.1

package/esm2022/lib/features/json-view/json-view.component.mjs

@@ -181,12 +181,12 @@ class JsonViewComponent {
         this.growlerService.show(growlerData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewComponent, deps: [{ token: i1.GrowlerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JsonViewComponent, selector: "lib-json-view", inputs: { data: "data", schema: "schema", readOnly: "readOnly", jsonInvalid: "jsonInvalid", showCopy: "showCopy" }, outputs: { dataChange: "dataChange", jsonChange: "jsonChange", jsonInvalidChange: "jsonInvalidChange" }, viewQueries: [{ propertyName: "editorDiv", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"jsoneditor\" [ngClass]=\"{'read-only': readOnly}\" #editor (keyup.enter)=\"enterKeyPressed($event)\" (keyup)=\"jsonChanged($event)\"></div>\n<div *ngIf=\"showCopy\" class=\"icon-copy copy\" (click)=\"copyToClipboad()\"></div>", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column;position:relative}#jsoneditor{height:100%;min-height:12.5rem;border-color:var(--inputBorder);border-style:solid;border-radius:var(--inputBorderRadius);overflow:hidden}#jsoneditor.read-only .jse-menu{display:none}.copy.icon-copy{position:absolute;top:.625rem;right:.625rem;background:transparent}::ng-deep #jsoneditor .jse-json-node.svelte-1wlxti1 .jse-insert-area.svelte-1wlxti1.svelte-1wlxti1.svelte-1wlxti1{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JsonViewComponent, selector: "lib-json-view", inputs: { data: "data", schema: "schema", readOnly: "readOnly", jsonInvalid: "jsonInvalid", showCopy: "showCopy" }, outputs: { dataChange: "dataChange", jsonChange: "jsonChange", jsonInvalidChange: "jsonInvalidChange" }, viewQueries: [{ propertyName: "editorDiv", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"jsoneditor\" [ngClass]=\"{'read-only': readOnly}\" #editor (keyup.enter)=\"enterKeyPressed($event)\" (keyup)=\"jsonChanged($event)\"></div>\n<div *ngIf=\"showCopy\" class=\"icon-copy copy\" (click)=\"copyToClipboad()\"></div>", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column;position:relative}#jsoneditor{height:100%;min-height:12.5rem;border:var(--jsonEditorBorder);border-radius:var(--inputBorderRadius);overflow:hidden}#jsoneditor.read-only .jse-menu{display:none}.copy.icon-copy{position:absolute;top:.625rem;right:.625rem;background:transparent}::ng-deep #jsoneditor .jse-json-node.svelte-1wlxti1 .jse-insert-area.svelte-1wlxti1.svelte-1wlxti1.svelte-1wlxti1{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 export { JsonViewComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-json-view', template: "<div id=\"jsoneditor\" [ngClass]=\"{'read-only': readOnly}\" #editor (keyup.enter)=\"enterKeyPressed($event)\" (keyup)=\"jsonChanged($event)\"></div>\n<div *ngIf=\"showCopy\" class=\"icon-copy copy\" (click)=\"copyToClipboad()\"></div>", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column;position:relative}#jsoneditor{height:100%;min-height:12.5rem;border-color:var(--inputBorder);border-style:solid;border-radius:var(--inputBorderRadius);overflow:hidden}#jsoneditor.read-only .jse-menu{display:none}.copy.icon-copy{position:absolute;top:.625rem;right:.625rem;background:transparent}::ng-deep #jsoneditor .jse-json-node.svelte-1wlxti1 .jse-insert-area.svelte-1wlxti1.svelte-1wlxti1.svelte-1wlxti1{display:none}\n"] }]
+            args: [{ selector: 'lib-json-view', template: "<div id=\"jsoneditor\" [ngClass]=\"{'read-only': readOnly}\" #editor (keyup.enter)=\"enterKeyPressed($event)\" (keyup)=\"jsonChanged($event)\"></div>\n<div *ngIf=\"showCopy\" class=\"icon-copy copy\" (click)=\"copyToClipboad()\"></div>", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column;position:relative}#jsoneditor{height:100%;min-height:12.5rem;border:var(--jsonEditorBorder);border-radius:var(--inputBorderRadius);overflow:hidden}#jsoneditor.read-only .jse-menu{display:none}.copy.icon-copy{position:absolute;top:.625rem;right:.625rem;background:transparent}::ng-deep #jsoneditor .jse-json-node.svelte-1wlxti1 .jse-insert-area.svelte-1wlxti1.svelte-1wlxti1.svelte-1wlxti1{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.GrowlerService }]; }, propDecorators: { data: [{
                 type: Input
             }], schema: [{

package/esm2022/lib/features/loading-indicator/loading-indicator.component.mjs

@@ -9,12 +9,12 @@ class LoadingIndicatorComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: { isLoading: "isLoading" }, ngImport: i0, template: "<div [hidden]=\"!isLoading\" id=\"Loading\">\n  <div class=\"grid-row\">\n    <div class=\"col\">\n      <div class=\"loader\">\n        <div class=\"nfloader\">\n          <ng-lottie [options]=\"lottieOptions\"></ng-lottie>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".loader{margin:0 auto;width:7.8125rem;height:7.8125rem;text-align:center;position:absolute;top:50%;left:50%;z-index:99999999;-webkit-transform:translateY(-50%) translateX(-50%)}.loader>div{height:100%;width:7.8125rem;display:inline-block;float:left}.nfloader{display:flex;align-items:center;justify-content:center;width:7.8125rem;height:7.8125rem}\n"], dependencies: [{ kind: "component", type: i1.LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: { isLoading: "isLoading" }, ngImport: i0, template: "<div [hidden]=\"!isLoading\" id=\"Loading\">\n  <div class=\"grid-row\">\n    <div class=\"col\">\n      <div class=\"loader\">\n        <div class=\"nfloader\">\n          <ng-lottie [options]=\"lottieOptions\"></ng-lottie>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".loader{margin:0 auto;width:var(--appLoaderSize);height:var(--appLoaderSize);text-align:center;position:absolute;top:50%;left:50%;z-index:99999999;-webkit-transform:translateY(-50%) translateX(-50%)}.loader>div{height:100%;width:var(--appLoaderSize);display:inline-block;float:left}.nfloader{display:flex;align-items:center;justify-content:center;width:var(--appLoaderSize);height:var(--appLoaderSize)}\n"], dependencies: [{ kind: "component", type: i1.LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }] }); }
 }
 export { LoadingIndicatorComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-loading-indicator', template: "<div [hidden]=\"!isLoading\" id=\"Loading\">\n  <div class=\"grid-row\">\n    <div class=\"col\">\n      <div class=\"loader\">\n        <div class=\"nfloader\">\n          <ng-lottie [options]=\"lottieOptions\"></ng-lottie>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".loader{margin:0 auto;width:7.8125rem;height:7.8125rem;text-align:center;position:absolute;top:50%;left:50%;z-index:99999999;-webkit-transform:translateY(-50%) translateX(-50%)}.loader>div{height:100%;width:7.8125rem;display:inline-block;float:left}.nfloader{display:flex;align-items:center;justify-content:center;width:7.8125rem;height:7.8125rem}\n"] }]
+            args: [{ selector: 'lib-loading-indicator', template: "<div [hidden]=\"!isLoading\" id=\"Loading\">\n  <div class=\"grid-row\">\n    <div class=\"col\">\n      <div class=\"loader\">\n        <div class=\"nfloader\">\n          <ng-lottie [options]=\"lottieOptions\"></ng-lottie>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".loader{margin:0 auto;width:var(--appLoaderSize);height:var(--appLoaderSize);text-align:center;position:absolute;top:50%;left:50%;z-index:99999999;-webkit-transform:translateY(-50%) translateX(-50%)}.loader>div{height:100%;width:var(--appLoaderSize);display:inline-block;float:left}.nfloader{display:flex;align-items:center;justify-content:center;width:var(--appLoaderSize);height:var(--appLoaderSize)}\n"] }]
         }], propDecorators: { isLoading: [{
                 type: Input
             }] } });

package/esm2022/lib/features/multi-action-button/multi-action-button.component.mjs

@@ -17,12 +17,12 @@ class MultiActionButtonComponent {
         this.actionRequested.emit(action);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: { actions: "actions" }, outputs: { actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"multi-action-button-container\">\n    <div class=\"form-field-action\"\n         *ngIf=\"actions\"\n         (clickOutside)=\"closeMoreActionsMenu()\"\n    >\n        <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n        <div class=\"secondary-action-button\"\n             *ngIf=\"actions.length > 1\"\n             (click)=\"showMoreActionsMenu()\"\n        ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n    </div>\n    <div class=\"multi-action-button-dropdown\" *ngIf=\"showMoreActions\">\n        <ul>\n            <li *ngFor=\"let action of actions\" class=\"confirm-item-name\" (click)=\"actionClicked(action)\">{{action.label}}</li>\n        </ul>\n    </div>\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(--white);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:hover{background-color:var(--inputBorder)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: { actions: "actions" }, outputs: { actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"multi-action-button-container\">\n    <div class=\"form-field-action\"\n         *ngIf=\"actions\"\n         (clickOutside)=\"closeMoreActionsMenu()\"\n    >\n        <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n        <div class=\"secondary-action-button\"\n             *ngIf=\"actions.length > 1\"\n             (click)=\"showMoreActionsMenu()\"\n        ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n    </div>\n    <div class=\"multi-action-button-dropdown\" *ngIf=\"showMoreActions\">\n        <ul>\n            <li *ngFor=\"let action of actions\" class=\"confirm-item-name\" (click)=\"actionClicked(action)\">{{action.label}}</li>\n        </ul>\n    </div>\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:hover{background-color:var(--inputBorder)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
 }
 export { MultiActionButtonComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiActionButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-multi-action-button', template: "<div class=\"multi-action-button-container\">\n    <div class=\"form-field-action\"\n         *ngIf=\"actions\"\n         (clickOutside)=\"closeMoreActionsMenu()\"\n    >\n        <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n        <div class=\"secondary-action-button\"\n             *ngIf=\"actions.length > 1\"\n             (click)=\"showMoreActionsMenu()\"\n        ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n    </div>\n    <div class=\"multi-action-button-dropdown\" *ngIf=\"showMoreActions\">\n        <ul>\n            <li *ngFor=\"let action of actions\" class=\"confirm-item-name\" (click)=\"actionClicked(action)\">{{action.label}}</li>\n        </ul>\n    </div>\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(--white);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:hover{background-color:var(--inputBorder)}\n"] }]
+            args: [{ selector: 'lib-multi-action-button', template: "<div class=\"multi-action-button-container\">\n    <div class=\"form-field-action\"\n         *ngIf=\"actions\"\n         (clickOutside)=\"closeMoreActionsMenu()\"\n    >\n        <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n        <div class=\"secondary-action-button\"\n             *ngIf=\"actions.length > 1\"\n             (click)=\"showMoreActionsMenu()\"\n        ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n    </div>\n    <div class=\"multi-action-button-dropdown\" *ngIf=\"showMoreActions\">\n        <ul>\n            <li *ngFor=\"let action of actions\" class=\"confirm-item-name\" (click)=\"actionClicked(action)\">{{action.label}}</li>\n        </ul>\n    </div>\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:hover{background-color:var(--inputBorder)}\n"] }]
         }], propDecorators: { actions: [{
                 type: Input
             }], actionRequested: [{

package/esm2022/lib/features/no-items/no-items.component.mjs

@@ -21,12 +21,12 @@ class NoItemsComponent {
         this.clickEmit.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NoItemsComponent, selector: "lib-no-items", inputs: { image: "image", typeName: "typeName", isEmpty: "isEmpty", hasAdd: "hasAdd", hiddenResults: "hiddenResults", isLoading: "isLoading" }, outputs: { clickEmit: "clickEmit", refresh: "refresh" }, usesOnChanges: true, ngImport: i0, template: "<div [hidden]=\"!isEmpty\" class=\"noarea\" id=\"NoArea\">\n    <div (click)=\"iconClick()\">\n        <div [ngStyle]=\"background\" class=\"icon\"></div>\n        <div class=\"title\">\n            This network currently has no {{ typeName }} to display.<br/><span [hidden]=\"!hasAdd\"\n        >Tap on the <span class=\"addExample\"></span> to add one.</span\n        >\n        </div>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:calc(100% - 12.5rem);width:100%;align-items:center;justify-content:center;position:relative}.addExample{display:inline-block;width:2.1875rem;height:2.1875rem;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Layer_1' style%3D'enable-background%3Anew 0 0 72 72%3B' version%3D'1.1' viewBox%3D'0 0 72 72'     x%3D'0px'     xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23E6ECED%3B    stroke%3A %23658292%3B    stroke-width%3A 3.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D  .st1 %7B    fill%3A none%3B    stroke%3A %23658292%3B    stroke-width%3A 3.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D%3C%2Fstyle%3E  %3Ccircle class%3D'st0' cx%3D'35.5' cy%3D'35.5' r%3D'30.6'%2F%3E  %3Cg%3E%09%3Cline class%3D'st1' x1%3D'22.2' x2%3D'48.9' y1%3D'35.1' y2%3D'35.1'%2F%3E%3C%2Fg%3E  %3Cline class%3D'st1' x1%3D'35.6' x2%3D'35.6' y1%3D'48.4' y2%3D'21.8'%2F%3E%3C%2Fsvg%3E\");background-size:contain;background-repeat:no-repeat;margin-bottom:-.5rem}.addExample:hover{filter:brightness(90%);transition:.3s}.addExample:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.noarea .icon{width:100%;height:15.625rem;background-position:center center;background-size:contain;position:relative;float:left;z-index:unset;left:unset;cursor:pointer;transition:.3s}@media only screen and (max-width: 715px){.addExample{width:1rem;height:1rem}}@media only screen and (max-width: 1500px){.noarea{transform:scale(.75)}}@media only screen and (max-width: 1250px){.noarea{transform:scale(.6)}}.hidden-results{margin-top:1.25rem}.hidden-results span{font-size:1.375rem;cursor:default}.hidden-results span a{cursor:pointer}.no-items-loader-container{position:absolute;width:100%;height:100%;left:0;top:0;background:#ffffff40;z-index:99999}::ng-deep .no-items-loader-container #Loading{position:absolute;width:100%;height:100%;z-index:9999;background:#fff3}.title{font-family:Open Sans;filter:unset;text-align:center;font-size:1.5rem;color:var(--menu);text-transform:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NoItemsComponent, selector: "lib-no-items", inputs: { image: "image", typeName: "typeName", isEmpty: "isEmpty", hasAdd: "hasAdd", hiddenResults: "hiddenResults", isLoading: "isLoading" }, outputs: { clickEmit: "clickEmit", refresh: "refresh" }, usesOnChanges: true, ngImport: i0, template: "<div [hidden]=\"!isEmpty\" class=\"noarea\" id=\"NoArea\">\n    <div (click)=\"iconClick()\">\n        <div [ngStyle]=\"background\" class=\"icon\"></div>\n        <div class=\"title\">\n            This network currently has no {{ typeName }} to display.<br/><span [hidden]=\"!hasAdd\"\n        >Tap on the <span class=\"addExample\"></span> to add one.</span\n        >\n        </div>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:calc(100% - 12.5rem);width:100%;align-items:center;justify-content:center;position:relative}.addExample{display:inline-block;width:2.1875rem;height:2.1875rem;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Layer_1' style%3D'enable-background%3Anew 0 0 72 72%3B' version%3D'1.1' viewBox%3D'0 0 72 72'     x%3D'0px'     xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23E6ECED%3B    stroke%3A %23658292%3B    stroke-width%3A 3.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D  .st1 %7B    fill%3A none%3B    stroke%3A %23658292%3B    stroke-width%3A 3.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D%3C%2Fstyle%3E  %3Ccircle class%3D'st0' cx%3D'35.5' cy%3D'35.5' r%3D'30.6'%2F%3E  %3Cg%3E%09%3Cline class%3D'st1' x1%3D'22.2' x2%3D'48.9' y1%3D'35.1' y2%3D'35.1'%2F%3E%3C%2Fg%3E  %3Cline class%3D'st1' x1%3D'35.6' x2%3D'35.6' y1%3D'48.4' y2%3D'21.8'%2F%3E%3C%2Fsvg%3E\");background-size:contain;background-repeat:no-repeat;margin-bottom:-.5rem}.addExample:hover{filter:brightness(90%);transition:.3s}.addExample:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.noarea .icon{width:100%;height:15.625rem;background-position:center center;background-size:contain;position:relative;float:left;z-index:unset;left:unset;cursor:pointer;transition:.3s}@media only screen and (max-width: 715px){.addExample{width:1rem;height:1rem}}@media only screen and (max-width: 1500px){.noarea{transform:scale(.75)}}@media only screen and (max-width: 1250px){.noarea{transform:scale(.6)}}.hidden-results{margin-top:1.25rem}.hidden-results span{font-size:1.375rem;cursor:default}.hidden-results span a{cursor:pointer}.no-items-loader-container{position:absolute;width:100%;height:100%;left:0;top:0;background:#ffffff40;z-index:99999}::ng-deep .no-items-loader-container #Loading{position:absolute;width:100%;height:100%;z-index:9999;background:#fff3}.title{font-family:Open Sans;filter:unset;text-align:center;font-size:1.5rem;color:var(--tableText);text-transform:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 export { NoItemsComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-no-items', template: "<div [hidden]=\"!isEmpty\" class=\"noarea\" id=\"NoArea\">\n    <div (click)=\"iconClick()\">\n        <div [ngStyle]=\"background\" class=\"icon\"></div>\n        <div class=\"title\">\n            This network currently has no {{ typeName }} to display.<br/><span [hidden]=\"!hasAdd\"\n        >Tap on the <span class=\"addExample\"></span> to add one.</span\n        >\n        </div>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:calc(100% - 12.5rem);width:100%;align-items:center;justify-content:center;position:relative}.addExample{display:inline-block;width:2.1875rem;height:2.1875rem;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Layer_1' style%3D'enable-background%3Anew 0 0 72 72%3B' version%3D'1.1' viewBox%3D'0 0 72 72'     x%3D'0px'     xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23E6ECED%3B    stroke%3A %23658292%3B    stroke-width%3A 3.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D  .st1 %7B    fill%3A none%3B    stroke%3A %23658292%3B    stroke-width%3A 3.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D%3C%2Fstyle%3E  %3Ccircle class%3D'st0' cx%3D'35.5' cy%3D'35.5' r%3D'30.6'%2F%3E  %3Cg%3E%09%3Cline class%3D'st1' x1%3D'22.2' x2%3D'48.9' y1%3D'35.1' y2%3D'35.1'%2F%3E%3C%2Fg%3E  %3Cline class%3D'st1' x1%3D'35.6' x2%3D'35.6' y1%3D'48.4' y2%3D'21.8'%2F%3E%3C%2Fsvg%3E\");background-size:contain;background-repeat:no-repeat;margin-bottom:-.5rem}.addExample:hover{filter:brightness(90%);transition:.3s}.addExample:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.noarea .icon{width:100%;height:15.625rem;background-position:center center;background-size:contain;position:relative;float:left;z-index:unset;left:unset;cursor:pointer;transition:.3s}@media only screen and (max-width: 715px){.addExample{width:1rem;height:1rem}}@media only screen and (max-width: 1500px){.noarea{transform:scale(.75)}}@media only screen and (max-width: 1250px){.noarea{transform:scale(.6)}}.hidden-results{margin-top:1.25rem}.hidden-results span{font-size:1.375rem;cursor:default}.hidden-results span a{cursor:pointer}.no-items-loader-container{position:absolute;width:100%;height:100%;left:0;top:0;background:#ffffff40;z-index:99999}::ng-deep .no-items-loader-container #Loading{position:absolute;width:100%;height:100%;z-index:9999;background:#fff3}.title{font-family:Open Sans;filter:unset;text-align:center;font-size:1.5rem;color:var(--menu);text-transform:unset}\n"] }]
+            args: [{ selector: 'lib-no-items', template: "<div [hidden]=\"!isEmpty\" class=\"noarea\" id=\"NoArea\">\n    <div (click)=\"iconClick()\">\n        <div [ngStyle]=\"background\" class=\"icon\"></div>\n        <div class=\"title\">\n            This network currently has no {{ typeName }} to display.<br/><span [hidden]=\"!hasAdd\"\n        >Tap on the <span class=\"addExample\"></span> to add one.</span\n        >\n        </div>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:calc(100% - 12.5rem);width:100%;align-items:center;justify-content:center;position:relative}.addExample{display:inline-block;width:2.1875rem;height:2.1875rem;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Layer_1' style%3D'enable-background%3Anew 0 0 72 72%3B' version%3D'1.1' viewBox%3D'0 0 72 72'     x%3D'0px'     xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23E6ECED%3B    stroke%3A %23658292%3B    stroke-width%3A 3.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D  .st1 %7B    fill%3A none%3B    stroke%3A %23658292%3B    stroke-width%3A 3.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D%3C%2Fstyle%3E  %3Ccircle class%3D'st0' cx%3D'35.5' cy%3D'35.5' r%3D'30.6'%2F%3E  %3Cg%3E%09%3Cline class%3D'st1' x1%3D'22.2' x2%3D'48.9' y1%3D'35.1' y2%3D'35.1'%2F%3E%3C%2Fg%3E  %3Cline class%3D'st1' x1%3D'35.6' x2%3D'35.6' y1%3D'48.4' y2%3D'21.8'%2F%3E%3C%2Fsvg%3E\");background-size:contain;background-repeat:no-repeat;margin-bottom:-.5rem}.addExample:hover{filter:brightness(90%);transition:.3s}.addExample:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.noarea .icon{width:100%;height:15.625rem;background-position:center center;background-size:contain;position:relative;float:left;z-index:unset;left:unset;cursor:pointer;transition:.3s}@media only screen and (max-width: 715px){.addExample{width:1rem;height:1rem}}@media only screen and (max-width: 1500px){.noarea{transform:scale(.75)}}@media only screen and (max-width: 1250px){.noarea{transform:scale(.6)}}.hidden-results{margin-top:1.25rem}.hidden-results span{font-size:1.375rem;cursor:default}.hidden-results span a{cursor:pointer}.no-items-loader-container{position:absolute;width:100%;height:100%;left:0;top:0;background:#ffffff40;z-index:99999}::ng-deep .no-items-loader-container #Loading{position:absolute;width:100%;height:100%;z-index:9999;background:#fff3}.title{font-family:Open Sans;filter:unset;text-align:center;font-size:1.5rem;color:var(--tableText);text-transform:unset}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { image: [{
                 type: Input
             }], typeName: [{

package/esm2022/lib/features/preview-selections/preview-selections.component.mjs

@@ -99,7 +99,7 @@ class PreviewSelectionsComponent {
         this.dialogRef.close({ confirmed: false });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewSelectionsComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ZITI_DATA_SERVICE }, { token: i2.ServicesPageService }, { token: i3.GrowlerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviewSelectionsComponent, selector: "preview-selections", ngImport: i0, template: "<div class=\"preview-selections-container confirm-modal-container\" [ngClass]=\"{'error-state': state === 'ERROR', 'loading-state': isLoading}\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"preview-selections-body\">\n        <div class=\"preview-selections-content\">\n            <div class=\"preview-selections-title-container\">\n                <div class=\"confirm-modal-icon\" style=\"background-image: url(&quot;../../assets/svgs/Confirm_Trash.svg&quot;);\"></div>\n                <span class=\"preview-selections-title\">Orphaned Configs & Service Policies</span>\n                <span class=\"preview-selections-subtitle\">Preview of all associated entities that will be orphaned and deleted once the selected services are deleted</span>\n            </div>\n            <div class=\"preview-selections-info-message\" *ngIf=\"infoMessage\" [ngClass]=\"{'error-message': state === 'ERROR'}\">{{infoMessage}}</div>\n            <div class=\"preview-selections-main\">\n                <div class=\"preview-selections-left-side\">\n                    <lib-form-field-container\n                            [showHeader]=\"true\"\n                            [title]=\"'Services To Delete'\"\n                            [class]=\"'hide-overflow bold-header-title'\"\n                            [count]=\"selectedItems.length\"\n                    >\n                        <div class=\"selected-items-container\">\n                            <div class=\"selected-items\">\n                                <div class=\"selected-items-category\">\n                                    <ul>\n                                        <li class=\"selected-items-item header-item\" (click)=\"previewItem(allItem)\" [ngClass]=\"{'selected': selectedItem.id === 'all'}\">\n                                            <span class=\"selected-item-name\">{{allItem.name}}</span>\n                                            <div class=\"associated-count-container\">\n                                                <div class=\"associated-count-header-group\">\n                                                    <div\n                                                        class=\"associated-header-icon icon-configuration\"\n                                                        matTooltip=\"Configs\"\n                                                        matTooltipPosition=\"below\"\n                                                        matTooltipShowDelay=\"500\"\n                                                    ></div>\n                                                    <span class=\"associated-configs-count\">{{allItem.associatedConfigs.length}}</span>\n                                                </div>\n                                                <div class=\"count-divider header-divider\"></div>\n                                                <div class=\"associated-count-header-group\">\n                                                    <div\n                                                        class=\"associated-header-icon icon-Policies\"\n                                                        matTooltip=\"Service Policies\"\n                                                        matTooltipPosition=\"below\"\n                                                        matTooltipShowDelay=\"500\"\n                                                    ></div>\n                                                    <span class=\"associated-policies-count\">{{allItem.associatedServicePolicies.length}}</span>\n                                                </div>\n                                            </div>\n                                        </li>\n                                        <div class=\"selected-items-divider\"></div>\n                                        <li *ngFor=\"let item of selectedItems\" class=\"selected-items-item\" (click)=\"previewItem(item)\" [ngClass]=\"{'selected': item.selected}\">\n                                            <span class=\"selected-item-name\">{{item.name}}</span>\n                                            <div class=\"associated-count-container\">\n                                                <div class=\"associated-count-list-group\">\n                                                    <span class=\"associated-configs-header-count\">{{allItem.associatedConfigs.length}}</span>\n                                                    <span class=\"associated-configs-count\">{{item.associatedConfigs.length}}</span>\n                                                </div>\n                                                <div class=\"count-divider\"></div>\n                                                <div class=\"associated-count-list-group\">\n                                                    <span class=\"associated-configs-header-count\">{{allItem.associatedServicePolicies.length}}</span>\n                                                    <span class=\"associated-policies-count\">{{item.associatedServicePolicies.length}}</span>\n                                                </div>\n                                            </div>\n                                        </li>\n                                    </ul>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                </div>\n                <div class=\"preview-selections-divider\"></div>\n                <div class=\"preview-selections-right-side\">\n                    <div class=\"preview-selections-lists-title\">\n                        <div class=\"resource-type\"> Selected Service </div>\n                        <div class=\"icon-next preview-selections-breadcrumb\"></div>\n                        <div class=\"selected-attribute\"> {{selectedItem.name}} </div>\n                    </div>\n                    <div class=\"preview-selections-lists\">\n                        <lib-form-field-container\n                                [title]=\"'Orphaned Configs'\"\n                                [titleIcon]=\"'icon-configuration'\"\n                                [count]=\"selectedItem.associatedConfigs.length\"\n                                [class]=\"'hide-overflow'\"\n                                [helpText]=\"'List of orphaned Configs that will be deleted.'\"\n                        >\n                            <lib-preview-list\n                                    [clickable]=\"false\"\n                                    [items]=\"selectedItem.associatedConfigs\"\n                                    [allowRemove]=\"false\"\n                            ></lib-preview-list>\n                        </lib-form-field-container>\n                        <lib-form-field-container\n                                [title]=\"'Orphaned Service Policies'\"\n                                [titleIcon]=\"'icon-Policies'\"\n                                [count]=\"selectedItem.associatedServicePolicies.length\"\n                                [class]=\"'hide-overflow'\"\n                                [helpText]=\"'List of all orphaned Service Policies that will be deleted.'\"\n                        >\n                            <lib-preview-list\n                                    [clickable]=\"false\"\n                                    [items]=\"selectedItem.associatedServicePolicies\"\n                                    [allowRemove]=\"false\"\n                            ></lib-preview-list>\n                        </lib-form-field-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"preview-selections-buttons-container\">\n        <button class=\"button save secondary-button\" (click)=\"return()\">Return</button>\n        <button class=\"button save confirm\" *ngIf=\"dataObj.deleteConfirmed && state !== 'ERROR'\" (click)=\"confirm()\" [disabled]=\"isLoading\">Delete All</button>\n    </div>\n</div>\n\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".preview-selections-container{display:flex;flex-direction:column;background-color:var(--formBackground);border-radius:1.5625rem}.preview-selections-container.loading-state .preview-selections-main,.preview-selections-container.error-state .preview-selections-main{filter:grayscale(1);opacity:.6;cursor:default;pointer-events:none}.preview-selections-container .preview-selections-divider{height:100%;min-height:20.625rem;flex:1 0 auto;display:flex;width:.125rem;max-width:.125rem;border-right-width:.125rem;border-right-color:var(--stroke);border-right-style:solid;margin-right:var(--marginMedium);margin-left:var(--marginMedium);padding-top:var(--paddingXXL);padding-bottom:var(--paddingXXL)}.preview-selections-container .selected-items-container{width:18.75rem;height:100%;min-height:18.75rem;max-height:18.75rem;background-color:var(--navigation);overflow:hidden;display:flex;flex-direction:column}.preview-selections-container .selected-items-container .selected-items-filter-header{display:flex;flex-direction:column;position:relative;margin-top:var(--marginMedium)}.preview-selections-container .selected-items-container .selected-items-filter-header .selected-items-filter-search{margin:0;width:100%;height:2.5rem;float:left;border-radius:1.875rem;font-size:.875rem;font-weight:600;padding-left:1.125rem;background-image:url(/assets/svgs/Filter.svg);background-size:1.125rem;background-position:right .9375rem top .625rem;background-repeat:no-repeat}.preview-selections-container .selected-items-container .selected-items{overflow:hidden;height:100%;display:flex;position:relative;flex-direction:column}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-category-title{margin-left:var(--marginMedium);color:var(--primaryColor);font-weight:700;font-size:.9375rem;filter:brightness(65%);text-transform:uppercase}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item{display:flex;flex-direction:row;justify-content:space-between;font-weight:600;font-size:1rem;padding-top:.1875rem;padding-bottom:.1875rem;padding-left:var(--paddingSmall);position:relative;cursor:pointer;border-left-width:.3125rem;border-left-color:transparent;border-left-style:solid}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.header-item{margin-top:1.375rem}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.header-item .selected-item-name{font-weight:900}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item:hover{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--primaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.selected{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--secondaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 2.5rem)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon{color:var(--red);margin-right:var(--marginSmall);font-weight:600;font-family:zac;display:flex;justify-content:center;align-items:center}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:before{content:\"\\e927\"}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:hover{filter:brightness(.8)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:active{transform:translateY(.0625rem)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container{display:flex;flex-direction:row;gap:var(--gapMedium);right:.3125rem;justify-content:flex-end;padding-right:var(--paddingSmall);padding-left:var(--paddingSmall)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .count-divider{height:150%;margin-top:-.625rem;width:.0625rem;border-width:0;border-right-width:.0625rem;border-style:solid;border-color:var(--placeholder)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .count-divider.header-divider{height:300%;margin-top:-2.5rem}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-configs-header-count{color:transparent;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group .associated-configs-count,.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group .associated-policies-count{position:absolute}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-header-group{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-header-group .associated-header-icon{position:absolute;display:flex;margin-top:-1.5625rem;margin-right:-.3125rem;top:0;right:0;font-size:1.25rem;cursor:default}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-configs-count{color:var(--primaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-policies-count{color:var(--secondaryColor);filter:brightness(.9)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-divider{width:100%;height:.125rem;border-color:var(--placeholder);border-bottom-style:solid;border-bottom-width:.0625rem;border-top-width:0;border-right-width:0;border-left-width:0}.preview-selections-container .selected-items-container .selected-items .selected-items-category ul{padding-inline-start:0rem;margin-block-start:var(--marginSmall);max-height:18.75rem;overflow:auto;overflow-x:hidden}.preview-selections-container .preview-selections-body{display:flex;flex-direction:row;align-items:center}.preview-selections-container .preview-selections-body .preview-selections-content{display:flex;flex-direction:column}.preview-selections-container .preview-selections-body .preview-selections-info-message{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;border-radius:var(--inputBorderRadius);padding:var(--paddingMedium) var(--paddingXL);margin:var(--marginMedium) var(--marginXL);margin-bottom:0}.preview-selections-container .preview-selections-body .preview-selections-info-message.error-message{color:var(--redText);background-color:var(--redShadow)}.preview-selections-container .preview-selections-body .preview-selections-main{display:flex;flex-direction:row;align-items:center;width:75rem;min-height:25rem;height:-moz-fit-content;height:fit-content;gap:var(--gapLarge);padding:0 var(--paddingXXL)}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-left-side{width:25rem}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side{display:flex;flex-direction:column;height:100%;width:100%;gap:var(--gapSmall)}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side .preview-selections-title{height:2.5rem}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side .preview-selections-lists{height:20rem;width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--gapLarge)}.preview-selections-container .preview-selections-body .preview-selections-icon{width:7.5rem;height:7.5rem;background-size:contain;z-index:20;box-sizing:var(--shadow);margin-left:var(--marginLarge)}.preview-selections-container .preview-selections-title-container{width:100%;display:flex;flex-direction:column}.preview-selections-container .preview-selections-title-container .confirm-modal-icon{width:3.75rem;height:3.75rem;position:absolute;top:1.25rem;left:1.25rem;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg id%3D'Layer_1' style%3D'enable-background%3Anew 0 0 72 72%3B' version%3D'1.1' viewBox%3D'0 0 72 72'     x%3D'0px'     xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23FFFFFF%3B  %7D  .st1 %7B    fill%3A %23D9DFE3%3B  %7D  .st2 %7B    fill%3A none%3B    stroke%3A %23648293%3B    stroke-width%3A 1.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D%3C%2Fstyle%3E  %3Cpolygon class%3D'st0' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 46.9%2C10.7 35.7%2C2.1 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 9.3%2C19.7%0915.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cpolygon class%3D'st1' points%3D'50.4%2C8.7 46.9%2C10.7 42.6%2C13.1 35.7%2C8.1 28.9%2C13.2 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 59.2%2C19.7%0959.2%2C13.7 '%2F%3E  %3Cpolygon class%3D'st2' points%3D'9.3%2C19.7 15.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cg%3E%09%3Cline class%3D'st2' x1%3D'60.1' x2%3D'26.9' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'54' x2%3D'14' y1%3D'19.7' y2%3D'59.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.6' x2%3D'31.3' y1%3D'39.3' y2%3D'19.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.3' x2%3D'44.5' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'17.4' x2%3D'57.4' y1%3D'19.7' y2%3D'59.6'%2F%3E    %3Cline class%3D'st2' x1%3D'59.8' x2%3D'40.1' y1%3D'39.3' y2%3D'19.7'%2F%3E%3C%2Fg%3E  %3Cline class%3D'st2' x1%3D'6.4' x2%3D'65' y1%3D'19.7' y2%3D'19.7'%2F%3E  %3Cpolyline class%3D'st2' points%3D'12.3%2C19.7 12.3%2C13.7 21.1%2C8.7 27.6%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 43.9%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'24.5%2C10.7 35.7%2C2.1 46.9%2C10.7 '%2F%3E%3C%2Fsvg%3E\")}.preview-selections-container .preview-selections-title-container .preview-selections-title{color:var(--primaryColor);font-size:1.875rem;position:relative;padding-left:0;width:37.5rem;background:none;text-transform:none;height:auto;font-family:Russo One;margin-top:1.5625rem;margin-left:5rem;filter:brightness(50%)}.preview-selections-container .preview-selections-title-container .preview-selections-subtitle{margin-left:5rem}.preview-selections-container .preview-selections-lists-title{display:flex;flex-direction:row;align-items:center;height:1.25rem;margin-left:var(--marginLarge);margin-top:var(--marginLarge)}.preview-selections-container .preview-selections-lists-title .selected-attribute,.preview-selections-container .preview-selections-lists-title .title-arrow,.preview-selections-container .preview-selections-lists-title .title-tag,.preview-selections-container .preview-selections-lists-title .resource-type{color:var(--primary);font-weight:100;font-size:1.125rem;font-family:Russo One;filter:brightness(.9);text-transform:uppercase}.preview-selections-container .preview-selections-lists-title .selected-attribute{color:var(--primaryColor);color:var(--tableText);text-transform:none}.preview-selections-container .preview-selections-lists-title .title-tag{margin-right:.1875rem;color:var(--red)}.preview-selections-container .preview-selections-lists-title .preview-selections-breadcrumb{font-size:1.25rem;line-height:1.25rem}.preview-selections-container .preview-selections-buttons-container{display:flex;justify-content:flex-end;flex-direction:row;width:100%;padding-right:var(--paddingXXL);padding-bottom:var(--paddingXXL);align-items:flex-end}.preview-selections-container .preview-selections-buttons-container .linkButton{position:absolute;left:1.5625rem;color:var(--subText);font-weight:600}.preview-selections-container .preview-selections-buttons-container .secondary-button{background-color:var(--primary)}.preview-selections-container .preview-selections-buttons-container .confirm{background-color:var(--secondary);margin-left:var(--marginMedium)}.preview-selections-container .preview-selections-buttons-container .confirm:disabled{filter:grayscale(1);opacity:.6;pointer-events:none}.preview-selections-container button{width:6.25rem;height:2.5rem;color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.75rem}.preview-selections-container button.confirm,.preview-selections-container button.cancel{background-color:var(--primary)}::ng-deep .preview-selections-container .form-field-content .listBox{min-height:16.5625rem;max-height:16.5625rem;min-width:22.5rem;max-width:22.5rem;overflow:auto}::ng-deep .preview-selections-container .form-field-content .listBox>input{display:none}::ng-deep .preview-selections-container .form-field-content .listBox .text{width:-moz-fit-content;width:fit-content;overflow-x:hidden}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i7.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i8.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviewSelectionsComponent, selector: "preview-selections", ngImport: i0, template: "<div class=\"preview-selections-container confirm-modal-container\" [ngClass]=\"{'error-state': state === 'ERROR', 'loading-state': isLoading}\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"preview-selections-body\">\n        <div class=\"preview-selections-content\">\n            <div class=\"preview-selections-title-container\">\n                <div class=\"confirm-modal-icon\" style=\"background-image: url(&quot;../../assets/svgs/Confirm_Trash.svg&quot;);\"></div>\n                <span class=\"preview-selections-title\">Orphaned Configs & Service Policies</span>\n                <span class=\"preview-selections-subtitle\">Preview of all associated entities that will be orphaned and deleted once the selected services are deleted</span>\n            </div>\n            <div class=\"preview-selections-info-message\" *ngIf=\"infoMessage\" [ngClass]=\"{'error-message': state === 'ERROR'}\">{{infoMessage}}</div>\n            <div class=\"preview-selections-main\">\n                <div class=\"preview-selections-left-side\">\n                    <lib-form-field-container\n                            [showHeader]=\"true\"\n                            [title]=\"'Services To Delete'\"\n                            [class]=\"'hide-overflow bold-header-title'\"\n                            [count]=\"selectedItems.length\"\n                    >\n                        <div class=\"selected-items-container\">\n                            <div class=\"selected-items\">\n                                <div class=\"selected-items-category\">\n                                    <ul>\n                                        <li class=\"selected-items-item header-item\" (click)=\"previewItem(allItem)\" [ngClass]=\"{'selected': selectedItem.id === 'all'}\">\n                                            <span class=\"selected-item-name\">{{allItem.name}}</span>\n                                            <div class=\"associated-count-container\">\n                                                <div class=\"associated-count-header-group\">\n                                                    <div\n                                                        class=\"associated-header-icon icon-configuration\"\n                                                        matTooltip=\"Configs\"\n                                                        matTooltipPosition=\"below\"\n                                                        matTooltipShowDelay=\"500\"\n                                                    ></div>\n                                                    <span class=\"associated-configs-count\">{{allItem.associatedConfigs.length}}</span>\n                                                </div>\n                                                <div class=\"count-divider header-divider\"></div>\n                                                <div class=\"associated-count-header-group\">\n                                                    <div\n                                                        class=\"associated-header-icon icon-Policies\"\n                                                        matTooltip=\"Service Policies\"\n                                                        matTooltipPosition=\"below\"\n                                                        matTooltipShowDelay=\"500\"\n                                                    ></div>\n                                                    <span class=\"associated-policies-count\">{{allItem.associatedServicePolicies.length}}</span>\n                                                </div>\n                                            </div>\n                                        </li>\n                                        <div class=\"selected-items-divider\"></div>\n                                        <li *ngFor=\"let item of selectedItems\" class=\"selected-items-item\" (click)=\"previewItem(item)\" [ngClass]=\"{'selected': item.selected}\">\n                                            <span class=\"selected-item-name\">{{item.name}}</span>\n                                            <div class=\"associated-count-container\">\n                                                <div class=\"associated-count-list-group\">\n                                                    <span class=\"associated-configs-header-count\">{{allItem.associatedConfigs.length}}</span>\n                                                    <span class=\"associated-configs-count\">{{item.associatedConfigs.length}}</span>\n                                                </div>\n                                                <div class=\"count-divider\"></div>\n                                                <div class=\"associated-count-list-group\">\n                                                    <span class=\"associated-configs-header-count\">{{allItem.associatedServicePolicies.length}}</span>\n                                                    <span class=\"associated-policies-count\">{{item.associatedServicePolicies.length}}</span>\n                                                </div>\n                                            </div>\n                                        </li>\n                                    </ul>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                </div>\n                <div class=\"preview-selections-divider\"></div>\n                <div class=\"preview-selections-right-side\">\n                    <div class=\"preview-selections-lists-title\">\n                        <div class=\"resource-type\"> Selected Service </div>\n                        <div class=\"icon-next preview-selections-breadcrumb\"></div>\n                        <div class=\"selected-attribute\"> {{selectedItem.name}} </div>\n                    </div>\n                    <div class=\"preview-selections-lists\">\n                        <lib-form-field-container\n                                [title]=\"'Orphaned Configs'\"\n                                [titleIcon]=\"'icon-configuration'\"\n                                [count]=\"selectedItem.associatedConfigs.length\"\n                                [class]=\"'hide-overflow'\"\n                                [helpText]=\"'List of orphaned Configs that will be deleted.'\"\n                        >\n                            <lib-preview-list\n                                    [clickable]=\"false\"\n                                    [items]=\"selectedItem.associatedConfigs\"\n                                    [allowRemove]=\"false\"\n                            ></lib-preview-list>\n                        </lib-form-field-container>\n                        <lib-form-field-container\n                                [title]=\"'Orphaned Service Policies'\"\n                                [titleIcon]=\"'icon-Policies'\"\n                                [count]=\"selectedItem.associatedServicePolicies.length\"\n                                [class]=\"'hide-overflow'\"\n                                [helpText]=\"'List of all orphaned Service Policies that will be deleted.'\"\n                        >\n                            <lib-preview-list\n                                    [clickable]=\"false\"\n                                    [items]=\"selectedItem.associatedServicePolicies\"\n                                    [allowRemove]=\"false\"\n                            ></lib-preview-list>\n                        </lib-form-field-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"preview-selections-buttons-container\">\n        <button class=\"button save secondary-button\" (click)=\"return()\">Return</button>\n        <button class=\"button save confirm\" *ngIf=\"dataObj.deleteConfirmed && state !== 'ERROR'\" (click)=\"confirm()\" [disabled]=\"isLoading\">Delete All</button>\n    </div>\n</div>\n\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".preview-selections-container{display:flex;flex-direction:column;background-color:var(--formBackground);border-radius:1.5625rem}.preview-selections-container.loading-state .preview-selections-main,.preview-selections-container.error-state .preview-selections-main{filter:grayscale(1);opacity:.6;cursor:default;pointer-events:none}.preview-selections-container .preview-selections-divider{height:100%;min-height:20.625rem;flex:1 0 auto;display:flex;width:.125rem;max-width:.125rem;border-right-width:.125rem;border-right-color:var(--stroke);border-right-style:solid;margin-right:var(--marginMedium);margin-left:var(--marginMedium);padding-top:var(--paddingXXL);padding-bottom:var(--paddingXXL)}.preview-selections-container .selected-items-container{width:18.75rem;height:100%;min-height:18.75rem;max-height:18.75rem;background-color:var(--navigation);overflow:hidden;display:flex;flex-direction:column}.preview-selections-container .selected-items-container .selected-items-filter-header{display:flex;flex-direction:column;position:relative;margin-top:var(--marginMedium)}.preview-selections-container .selected-items-container .selected-items-filter-header .selected-items-filter-search{margin:0;width:100%;height:2.5rem;float:left;border-radius:1.875rem;font-size:.875rem;font-weight:600;padding-left:1.125rem;background-image:url(/assets/svgs/Filter.svg);background-size:1.125rem;background-position:right .9375rem top .625rem;background-repeat:no-repeat}.preview-selections-container .selected-items-container .selected-items{overflow:hidden;height:100%;display:flex;position:relative;flex-direction:column}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-category-title{margin-left:var(--marginMedium);color:var(--primaryColor);font-weight:700;font-size:.9375rem;filter:brightness(65%);text-transform:uppercase}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item{display:flex;flex-direction:row;justify-content:space-between;font-weight:600;font-size:1rem;padding-top:.1875rem;padding-bottom:.1875rem;padding-left:var(--paddingSmall);position:relative;cursor:pointer;border-left-width:.3125rem;border-left-color:transparent;border-left-style:solid}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.header-item{margin-top:1.375rem}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.header-item .selected-item-name{font-weight:900}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item:hover{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--primaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.selected{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--secondaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 2.5rem)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon{color:var(--red);margin-right:var(--marginSmall);font-weight:600;font-family:zac;display:flex;justify-content:center;align-items:center}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:before{content:\"\\e927\"}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:hover{filter:brightness(.8)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:active{transform:translateY(.0625rem)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container{display:flex;flex-direction:row;gap:var(--gapMedium);right:.3125rem;justify-content:flex-end;padding-right:var(--paddingSmall);padding-left:var(--paddingSmall)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .count-divider{height:150%;margin-top:-.625rem;width:.0625rem;border-width:0;border-right-width:.0625rem;border-style:solid;border-color:var(--placeholder)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .count-divider.header-divider{height:300%;margin-top:-2.5rem}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-configs-header-count{color:transparent;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group .associated-configs-count,.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group .associated-policies-count{position:absolute}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-header-group{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-header-group .associated-header-icon{position:absolute;display:flex;margin-top:-1.5625rem;margin-right:-.3125rem;top:0;right:0;font-size:1.25rem;cursor:default}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-configs-count{color:var(--primaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-policies-count{color:var(--secondaryColor);filter:brightness(.9)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-divider{width:100%;height:.125rem;border-color:var(--placeholder);border-bottom-style:solid;border-bottom-width:.0625rem;border-top-width:0;border-right-width:0;border-left-width:0}.preview-selections-container .selected-items-container .selected-items .selected-items-category ul{padding-inline-start:0rem;margin-block-start:var(--marginSmall);max-height:18.75rem;overflow:auto;overflow-x:hidden}.preview-selections-container .preview-selections-body{display:flex;flex-direction:row;align-items:center}.preview-selections-container .preview-selections-body .preview-selections-content{display:flex;flex-direction:column}.preview-selections-container .preview-selections-body .preview-selections-info-message{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;border-radius:var(--inputBorderRadius);padding:var(--paddingMedium) var(--paddingXL);margin:var(--marginMedium) var(--marginXL);margin-bottom:0}.preview-selections-container .preview-selections-body .preview-selections-info-message.error-message{color:var(--redText);background-color:var(--redShadow)}.preview-selections-container .preview-selections-body .preview-selections-main{display:flex;flex-direction:row;align-items:center;width:75rem;min-height:25rem;height:-moz-fit-content;height:fit-content;gap:var(--gapLarge);padding:0 var(--paddingXXL)}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-left-side{width:25rem}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side{display:flex;flex-direction:column;height:100%;width:100%;gap:var(--gapSmall)}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side .preview-selections-title{height:2.5rem}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side .preview-selections-lists{height:20rem;width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--gapLarge)}.preview-selections-container .preview-selections-body .preview-selections-icon{width:7.5rem;height:7.5rem;background-size:contain;z-index:20;box-sizing:var(--shadow);margin-left:var(--marginLarge)}.preview-selections-container .preview-selections-title-container{width:100%;display:flex;flex-direction:column}.preview-selections-container .preview-selections-title-container .confirm-modal-icon{width:3.75rem;height:3.75rem;position:absolute;top:1.25rem;left:1.25rem;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg id%3D'Layer_1' style%3D'enable-background%3Anew 0 0 72 72%3B' version%3D'1.1' viewBox%3D'0 0 72 72'     x%3D'0px'     xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23FFFFFF%3B  %7D  .st1 %7B    fill%3A %23D9DFE3%3B  %7D  .st2 %7B    fill%3A none%3B    stroke%3A %23648293%3B    stroke-width%3A 1.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D%3C%2Fstyle%3E  %3Cpolygon class%3D'st0' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 46.9%2C10.7 35.7%2C2.1 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 9.3%2C19.7%0915.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cpolygon class%3D'st1' points%3D'50.4%2C8.7 46.9%2C10.7 42.6%2C13.1 35.7%2C8.1 28.9%2C13.2 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 59.2%2C19.7%0959.2%2C13.7 '%2F%3E  %3Cpolygon class%3D'st2' points%3D'9.3%2C19.7 15.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cg%3E%09%3Cline class%3D'st2' x1%3D'60.1' x2%3D'26.9' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'54' x2%3D'14' y1%3D'19.7' y2%3D'59.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.6' x2%3D'31.3' y1%3D'39.3' y2%3D'19.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.3' x2%3D'44.5' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'17.4' x2%3D'57.4' y1%3D'19.7' y2%3D'59.6'%2F%3E    %3Cline class%3D'st2' x1%3D'59.8' x2%3D'40.1' y1%3D'39.3' y2%3D'19.7'%2F%3E%3C%2Fg%3E  %3Cline class%3D'st2' x1%3D'6.4' x2%3D'65' y1%3D'19.7' y2%3D'19.7'%2F%3E  %3Cpolyline class%3D'st2' points%3D'12.3%2C19.7 12.3%2C13.7 21.1%2C8.7 27.6%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 43.9%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'24.5%2C10.7 35.7%2C2.1 46.9%2C10.7 '%2F%3E%3C%2Fsvg%3E\")}.preview-selections-container .preview-selections-title-container .preview-selections-title{color:var(--primaryColor);font-size:1.875rem;position:relative;padding-left:0;width:37.5rem;background:none;text-transform:none;height:auto;font-family:Russo One;margin-top:1.5625rem;margin-left:5rem;filter:brightness(50%)}.preview-selections-container .preview-selections-title-container .preview-selections-subtitle{margin-left:5rem}.preview-selections-container .preview-selections-lists-title{display:flex;flex-direction:row;align-items:center;height:1.25rem;margin-left:var(--marginLarge);margin-top:var(--marginLarge)}.preview-selections-container .preview-selections-lists-title .selected-attribute,.preview-selections-container .preview-selections-lists-title .title-arrow,.preview-selections-container .preview-selections-lists-title .title-tag,.preview-selections-container .preview-selections-lists-title .resource-type{color:var(--primary);font-weight:100;font-size:1.125rem;font-family:Russo One;filter:brightness(.9);text-transform:uppercase}.preview-selections-container .preview-selections-lists-title .selected-attribute{color:var(--primaryColor);color:var(--tableText);text-transform:none}.preview-selections-container .preview-selections-lists-title .title-tag{margin-right:.1875rem;color:var(--red)}.preview-selections-container .preview-selections-lists-title .preview-selections-breadcrumb{font-size:1.25rem;line-height:1.25rem}.preview-selections-container .preview-selections-buttons-container{display:flex;justify-content:flex-end;flex-direction:row;width:100%;padding-right:var(--paddingXXL);padding-bottom:var(--paddingXXL);align-items:flex-end}.preview-selections-container .preview-selections-buttons-container .linkButton{position:absolute;left:1.5625rem;color:var(--subText);font-weight:600}.preview-selections-container .preview-selections-buttons-container .secondary-button{background-color:var(--primary)}.preview-selections-container .preview-selections-buttons-container .confirm{background-color:var(--secondary);margin-left:var(--marginMedium)}.preview-selections-container .preview-selections-buttons-container .confirm:disabled{filter:grayscale(1);opacity:.6;pointer-events:none}.preview-selections-container button{width:6.25rem;height:2.5rem;color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.75rem}.preview-selections-container button.confirm,.preview-selections-container button.cancel{background-color:var(--primary)}::ng-deep .preview-selections-container .form-field-content .listBox{min-height:16.5625rem;max-height:16.5625rem;min-width:22.5rem;max-width:22.5rem;overflow:auto}::ng-deep .preview-selections-container .form-field-content .listBox>input{display:none}::ng-deep .preview-selections-container .form-field-content .listBox .text{width:-moz-fit-content;width:fit-content;overflow-x:hidden}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i7.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i8.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
 }
 export { PreviewSelectionsComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewSelectionsComponent, decorators: [{

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

@@ -314,7 +314,7 @@ class AuthPolicyFormComponent extends ProjectableForm {
         this.svc.getJwtSigners(filters, 1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPolicyFormComponent, deps: [{ token: i1.AuthPolicyFormService }, { token: i2.SchemaService }, { token: i3.GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i5.Location }, { token: i6.ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AuthPolicyFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n    ></lib-form-header>\n    <div class=\"jwt-signer-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Name'\"\n                        [label]=\"'Required'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Auth Policy\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Primary Authentication'\"\n                        [layout]=\"'row'\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Cert</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow x509 certificate based authentication\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleCertAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.cert.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.cert.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.cert.allowed\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Ext JWT</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow externally signed JWT bearer tokens\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleExtJwtAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.extJwt.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.extJwt.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.extJwt.allowed\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">UPDB</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow authentication via a traditional &quot;Username Password Database&quot;\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleUpdbAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.updb.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.updb.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.updb.allowed\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.primary.cert.allowed\"\n                        [title]=\"'Cert Options'\"\n                        [layout]=\"'row'\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Allow Expired Certificates</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow expired client certificates to authenticate\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleAllowExpiredCerts()\"\n                                    [ngClass]=\"{ on: formData.primary.cert.allowExpiredCerts }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.cert.allowExpiredCerts\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.cert.allowExpiredCerts\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.primary.extJwt.allowed\"\n                        [title]=\"'Ext JWT Options'\"\n                        [layout]=\"'column'\"\n                >\n                    <div class=\"form-field-label-container allowed-signers-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Allowed JWT Signers</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Choose which External JWT Signers may be used for authentication\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <lib-tag-selector\n                                [(selectedNamedAttributes)]=\"allowedJwtSignerAttributes\"\n                                [availableNamedAttributes]=\"svc.jwtSignerNamedAttributes\"\n                                [placeholder]=\"'Select which External JWT Signers to allow'\"\n                                (selectedNamedAttributesChange)=\"allowedJwtSignersChanged($event)\"\n                        ></lib-tag-selector>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.primary.updb.allowed\"\n                        [title]=\"'UPDB Options'\"\n                        [layout]=\"'column'\"\n                >\n                    <div class=\"form-field-row updb-input-options\">\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Minimum Length</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.minPasswordLength\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Max Attempts</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.maxAttempts\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Lockout Duration <div class=\"form-sub-text\">(min)</div></span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter time in min\" type=\"number\" [(ngModel)]=\"formData.primary.updb.lockoutDurationMinutes\"/>\n                        </div>\n                    </div>\n                    <div class=\"form-field-row\">\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Mixed Case</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require upper and lower case charachters\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbMixed()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireMixedCase }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireMixedCase\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireMixedCase\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Numeric</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require numerical charachters 0-9\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbNumeric()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireNumericChar }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireNumericChar\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireNumericChar\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Special</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require special (non-alpha numeric) charachters. ie. !%$@*\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbSpecial()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireSpecialChar }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireSpecialChar\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireSpecialChar\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Secondary Authentication'\"\n                        [label]=\"'OPTIONAL'\"\n                        [layout]=\"'column'\"\n                        [contentStyle]=\"'z-index: 1000001'\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">TOTP MFA</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Require authenticating clients to have TOTP MFA enabled (Time-based, One-Time Password)\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Require TOTP</div>\n                                </div>\n                                <div\n                                        (click)=\"toggleRequireTotp()\"\n                                        [ngClass]=\"{ on: formData.secondary.requireTotp }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.secondary.requireTotp\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.secondary.requireTotp\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">JWT Signer</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Require every client request to have a JWT from the specified External JTW Signer in the HTTP Authentication header\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <p-dropdown\n                                placeholder=\"Select JWT Signer...\"\n                                optionLabel=\"name\"\n                                optionValue=\"id\"\n                                filterBy=\"name\"\n                                [options]=\"svc.jwtSigners\"\n                                [filter]=\"true\"\n                                [showClear]=\"true\"\n                                (change)=\"secondaryJwtSignerChanged($event)\"\n                                [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n                        >\n                            <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                <div class=\"dropdown-filter-container\">\n                                    <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                        <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                        <input\n                                                type=\"text\"\n                                                pInputText\n                                                placeholder=\"Filter\"\n                                                (keyup)=\"jwtSignersFilterChangedDebounced($event)\" />\n                                    </div>\n                                    <button pButton\n                                            icon=\"pi pi-times\"\n                                            [ngClass]=\"{'configs-loading': svc.jwtSignersLoading}\"\n                                            (click)=\"clearJwtSignerFilter($event)\"\n                                            severity=\"secondary\">\n                                    </button>\n                                    <div class=\"spinner\" *ngIf=\"svc.jwtSignersLoading\"></div>\n                                </div>\n                            </ng-template>\n                        </p-dropdown>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                        [class]=\"'api-data-no-wrap'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:-moz-fit-content;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.InputText, selector: "[pInputText]" }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i13.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i14.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i15.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i16.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i17.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i18.TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: i19.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AuthPolicyFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n    ></lib-form-header>\n    <div class=\"jwt-signer-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Name'\"\n                        [label]=\"'Required'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Auth Policy\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Primary Authentication'\"\n                        [layout]=\"'row'\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Cert</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow x509 certificate based authentication\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleCertAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.cert.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.cert.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.cert.allowed\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Ext JWT</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow externally signed JWT bearer tokens\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleExtJwtAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.extJwt.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.extJwt.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.extJwt.allowed\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">UPDB</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow authentication via a traditional &quot;Username Password Database&quot;\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleUpdbAllowed()\"\n                                    [ngClass]=\"{ on: formData.primary.updb.allowed }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.updb.allowed\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.updb.allowed\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.primary.cert.allowed\"\n                        [title]=\"'Cert Options'\"\n                        [layout]=\"'row'\"\n                >\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"form-field-title-container\">\n                                <div class=\"config-container-label\">Allow Expired Certificates</div>\n                                <div\n                                        class=\"form-field-info infoicon\"\n                                        matTooltip=\"Allow expired client certificates to authenticate\"\n                                        matTooltipPosition=\"below\"\n                                ></div>\n                            </div>\n                            <div\n                                    (click)=\"toggleAllowExpiredCerts()\"\n                                    [ngClass]=\"{ on: formData.primary.cert.allowExpiredCerts }\"\n                                    class=\"toggle\"\n                            >\n                                <span [hidden]=\"!formData.primary.cert.allowExpiredCerts\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"formData.primary.cert.allowExpiredCerts\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.primary.extJwt.allowed\"\n                        [title]=\"'Ext JWT Options'\"\n                        [layout]=\"'column'\"\n                >\n                    <div class=\"form-field-label-container allowed-signers-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Allowed JWT Signers</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Choose which External JWT Signers may be used for authentication\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <lib-tag-selector\n                                [(selectedNamedAttributes)]=\"allowedJwtSignerAttributes\"\n                                [availableNamedAttributes]=\"svc.jwtSignerNamedAttributes\"\n                                [placeholder]=\"'Select which External JWT Signers to allow'\"\n                                (selectedNamedAttributesChange)=\"allowedJwtSignersChanged($event)\"\n                        ></lib-tag-selector>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.primary.updb.allowed\"\n                        [title]=\"'UPDB Options'\"\n                        [layout]=\"'column'\"\n                >\n                    <div class=\"form-field-row updb-input-options\">\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Minimum Length</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.minPasswordLength\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Max Attempts</span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.maxAttempts\"/>\n                        </div>\n                        <div class=\"form-field-label-container\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Lockout Duration <div class=\"form-sub-text\">(min)</div></span>\n                            </div>\n                            <input class=\"form-field-input\" placeholder=\"Enter time in min\" type=\"number\" [(ngModel)]=\"formData.primary.updb.lockoutDurationMinutes\"/>\n                        </div>\n                    </div>\n                    <div class=\"form-field-row\">\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Mixed Case</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require upper and lower case charachters\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbMixed()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireMixedCase }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireMixedCase\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireMixedCase\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Numeric</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require numerical charachters 0-9\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbNumeric()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireNumericChar }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireNumericChar\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireNumericChar\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Special</div>\n                                    <div\n                                            class=\"form-field-info infoicon\"\n                                            matTooltip=\"Require special (non-alpha numeric) charachters. ie. !%$@*\"\n                                            matTooltipPosition=\"below\"\n                                    ></div>\n                                </div>\n                                <div\n                                        (click)=\"toggleUpdbSpecial()\"\n                                        [ngClass]=\"{ on: formData.primary.updb.requireSpecialChar }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.primary.updb.requireSpecialChar\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.primary.updb.requireSpecialChar\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Secondary Authentication'\"\n                        [label]=\"'OPTIONAL'\"\n                        [layout]=\"'column'\"\n                        [contentStyle]=\"'z-index: 1000001'\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">TOTP MFA</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Require authenticating clients to have TOTP MFA enabled (Time-based, One-Time Password)\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"form-field-title-container\">\n                                    <div class=\"config-container-label\">Require TOTP</div>\n                                </div>\n                                <div\n                                        (click)=\"toggleRequireTotp()\"\n                                        [ngClass]=\"{ on: formData.secondary.requireTotp }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.secondary.requireTotp\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.secondary.requireTotp\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">JWT Signer</span>\n                            <div\n                                    class=\"form-field-info infoicon\"\n                                    matTooltip=\"Require every client request to have a JWT from the specified External JTW Signer in the HTTP Authentication header\"\n                                    matTooltipPosition=\"below\"\n                            ></div>\n                        </div>\n                        <p-dropdown\n                                placeholder=\"Select JWT Signer...\"\n                                optionLabel=\"name\"\n                                optionValue=\"id\"\n                                filterBy=\"name\"\n                                [options]=\"svc.jwtSigners\"\n                                [filter]=\"true\"\n                                [showClear]=\"true\"\n                                (change)=\"secondaryJwtSignerChanged($event)\"\n                                [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n                        >\n                            <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                <div class=\"dropdown-filter-container\">\n                                    <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                        <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                        <input\n                                                type=\"text\"\n                                                pInputText\n                                                placeholder=\"Filter\"\n                                                (keyup)=\"jwtSignersFilterChangedDebounced($event)\" />\n                                    </div>\n                                    <button pButton\n                                            icon=\"pi pi-times\"\n                                            [ngClass]=\"{'configs-loading': svc.jwtSignersLoading}\"\n                                            (click)=\"clearJwtSignerFilter($event)\"\n                                            severity=\"secondary\">\n                                    </button>\n                                    <div class=\"spinner\" *ngIf=\"svc.jwtSignersLoading\"></div>\n                                </div>\n                            </ng-template>\n                        </p-dropdown>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                        [class]=\"'api-data-no-wrap'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:-moz-fit-content;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.InputText, selector: "[pInputText]" }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i13.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i14.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i15.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i16.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i17.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i18.TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: i19.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 export { AuthPolicyFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPolicyFormComponent, decorators: [{