@openziti/ziti-console-lib 1.5.0 → 1.5.2

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

@@ -30,7 +30,7 @@ import * as i5$3 from '@angular/material/select';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import * as i1$4 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { catchError, map as map$1, distinctUntilChanged, debounceTime, takeUntil, throttleTime, filter as filter$1 } from 'rxjs/operators';
+import { catchError, map as map$1, distinctUntilChanged, debounceTime, skip, takeUntil, throttleTime, filter as filter$1 } from 'rxjs/operators';
 import * as i1$2 from 'ngx-logger';
 import { NgxLoggerLevel } from 'ngx-logger';
 import * as i5 from '@angular/material/dialog';
@@ -3728,9 +3728,9 @@ class ListPageComponent {
             this.filterApplied = filters && filters.length > 0;
             this.refreshData();
         }));
-        this.filterService.pageChanged.subscribe(page => {
+        this.subscription.add(this.filterService.pageChanged.pipe(skip(1)).subscribe(page => {
             this.refreshData();
-        });
+        }));
         this.subscription.add(this.consoleEvents.closeSideModal.subscribe((event) => {
             this.closeModal();
         }));
@@ -3894,6 +3894,7 @@ let Service$1 = class Service {
         this.roleAttributes = [];
         this.tags = {};
         this.configs = [];
+        this.maxIdleTimeMillis = 0;
     }
 };
 ;
@@ -7877,11 +7878,11 @@ class NoItemsComponent {
         this.clickEmit.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NoItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: NoItemsComponent, isStandalone: false, selector: "lib-no-items", inputs: { image: "image", typeName: "typeName", isEmpty: "isEmpty", hasAdd: "hasAdd", hiddenResults: "hiddenResults", isLoading: "isLoading", readonly: "readonly", accessDenied: "accessDenied" }, outputs: { clickEmit: "clickEmit", refresh: "refresh" }, usesOnChanges: true, ngImport: i0, template: "<div [hidden]=\"!isEmpty || isLoading\" class=\"noarea\" id=\"NoArea\">\n  <div (click)=\"iconClick()\">\n    <div [ngStyle]=\"background\" class=\"icon\"></div>\n    <div class=\"title\">\n      @if (accessDenied) {\n        You do not have permission to view {{ typeName }}.\n      } @else {\n        This network currently has no {{ typeName }} to display.<br/>\n        <span [hidden]=\"!hasAdd || readonly\"\n          >Tap on the <span class=\"addExample\"></span> to add one.</span\n        >\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(/assets/svgs/No_Plus.svg);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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: NoItemsComponent, isStandalone: false, selector: "lib-no-items", inputs: { image: "image", typeName: "typeName", isEmpty: "isEmpty", hasAdd: "hasAdd", hiddenResults: "hiddenResults", isLoading: "isLoading", readonly: "readonly", accessDenied: "accessDenied" }, outputs: { clickEmit: "clickEmit", refresh: "refresh" }, usesOnChanges: true, ngImport: i0, template: "<div [hidden]=\"!isEmpty || isLoading\" class=\"noarea\" id=\"NoArea\">\n  <div (click)=\"iconClick()\">\n    <div [ngStyle]=\"background\" class=\"icon\"></div>\n    <div class=\"title\">\n      @if (accessDenied) {\n        You do not have permission to view {{ typeName }}.\n      } @else {\n        This network currently has no {{ typeName }} to display.<br/>\n        <span [hidden]=\"!hasAdd || readonly\"\n          >Tap on the <span class=\"addExample\"></span> to add one.</span\n        >\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(/assets/svgs/No_Plus.svg);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{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NoItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-no-items', standalone: false, template: "<div [hidden]=\"!isEmpty || isLoading\" class=\"noarea\" id=\"NoArea\">\n  <div (click)=\"iconClick()\">\n    <div [ngStyle]=\"background\" class=\"icon\"></div>\n    <div class=\"title\">\n      @if (accessDenied) {\n        You do not have permission to view {{ typeName }}.\n      } @else {\n        This network currently has no {{ typeName }} to display.<br/>\n        <span [hidden]=\"!hasAdd || readonly\"\n          >Tap on the <span class=\"addExample\"></span> to add one.</span\n        >\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(/assets/svgs/No_Plus.svg);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}\n"] }]
+            args: [{ selector: 'lib-no-items', standalone: false, template: "<div [hidden]=\"!isEmpty || isLoading\" class=\"noarea\" id=\"NoArea\">\n  <div (click)=\"iconClick()\">\n    <div [ngStyle]=\"background\" class=\"icon\"></div>\n    <div class=\"title\">\n      @if (accessDenied) {\n        You do not have permission to view {{ typeName }}.\n      } @else {\n        This network currently has no {{ typeName }} to display.<br/>\n        <span [hidden]=\"!hasAdd || readonly\"\n          >Tap on the <span class=\"addExample\"></span> to add one.</span\n        >\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(/assets/svgs/No_Plus.svg);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{text-align:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { image: [{
                 type: Input
             }], typeName: [{
@@ -7915,6 +7916,7 @@ class TagSelectorComponent {
         this.isLoading = false;
         this.errorMessage = '';
         this.focusOnInit = false;
+        this.namedAttributesServerFiltered = false;
         this.addRoleAttribute = new EventEmitter();
         this.addNamedAttribute = new EventEmitter();
         this.roleAttributeRemoved = new EventEmitter();
@@ -8087,12 +8089,13 @@ class TagSelectorComponent {
         let filteredAvailableRoleAttributes = [];
         let filteredAvailableNamedAttributes = [];
         if (this.filterString) {
+            const filterLower = this.filterString.toLowerCase();
             filteredAvailableRoleAttributes = this._availableRoleAttributes.filter((attr) => {
-                return attr.indexOf(this.filterString) >= 0;
-            });
-            filteredAvailableNamedAttributes = this._availableNamedAttributes.filter((attr) => {
-                return attr.indexOf(this.filterString) >= 0;
+                return attr.toLowerCase().indexOf(filterLower) >= 0;
             });
+            filteredAvailableNamedAttributes = this.namedAttributesServerFiltered
+                ? this._availableNamedAttributes
+                : this._availableNamedAttributes.filter((attr) => attr.toLowerCase().indexOf(filterLower) >= 0);
         }
         else {
             filteredAvailableRoleAttributes = this._availableRoleAttributes;
@@ -8138,7 +8141,7 @@ class TagSelectorComponent {
         return this._selectedRoleAttributes?.length <= 0 && this._selectedNamedAttributes?.length <= 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TagSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TagSelectorComponent, isStandalone: false, selector: "lib-tag-selector", inputs: { placeholder: "placeholder", disableField: "disableField", disableCreate: "disableCreate", hideOption: "hideOption", isLoading: "isLoading", errorMessage: "errorMessage", focusOnInit: "focusOnInit", selectedRoleAttributes: "selectedRoleAttributes", selectedNamedAttributes: "selectedNamedAttributes", hasError: "hasError", availableRoleAttributes: "availableRoleAttributes", availableNamedAttributes: "availableNamedAttributes" }, outputs: { addRoleAttribute: "addRoleAttribute", addNamedAttribute: "addNamedAttribute", roleAttributeRemoved: "roleAttributeRemoved", namedAttributeRemoved: "namedAttributeRemoved", selectedRoleAttributesChange: "selectedRoleAttributesChange", selectedNamedAttributesChange: "selectedNamedAttributesChange", filterChange: "filterChange" }, viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }, { propertyName: "dropdownWrapper", first: true, predicate: ["dropdownWrapper"], descendants: true }], ngImport: i0, template: "<span (clickOutside)=\"hide()\" [ngClass]=\"{ readOnly: disableField }\" class=\"clickOutside fullWidth tagsSelector\" >\n  <span\n    class=\"select2 select2-container select2-container--default select2-container--below select2-container--focus\"\n    dir=\"ltr\"\n    >\n    <span class=\"selection\">\n      <span\n        [ngClass]=\"{ 'select2-selection-focus': !hideSelect, tagError: _hasError }\"\n        aria-expanded=\"false\"\n        aria-haspopup=\"true\"\n        class=\"select2-selection select2-selection--multiple\"\n        role=\"combobox\"\n        tabindex=\"-1\"\n        >\n        <input\n          (focus)=\"inputFocus()\"\n          (keydown)=\"handleKeyDown($event);\"\n          (keyup)=\"handleKeyUp($event, filterString);\"\n          (mouseup)=\"applyFilterMouseUp()\"\n          [(ngModel)]=\"filterString\"\n          [disabled]=\"disableField\"\n          [ngClass]=\"{ empty: isNothingSelected, tagError: _hasError }\"\n          aria-autocomplete=\"list\"\n          autocapitalize=\"off\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          class=\"select2-search__field\"\n          placeholder=\"{{disableField ? (isNothingSelected ? 'Nothing selected' : '') : placeholder}}\"\n          role=\"textbox\"\n          spellcheck=\"false\"\n          tabindex=\"0\"\n          type=\"search\"\n          #search\n          />\n        @if (isLoading) {\n          <span class=\"spinner\"></span>\n        }\n\n        <ul\n          (click)=\"openSelect()\"\n          [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n          class=\"select2-selection__rendered\"\n          >\n          @for (item of _selectedRoleAttributes; track item) {\n            <li\n              (click)=\"$event.stopPropagation()\"\n              [hidden]=\"item === this.hideOption\"\n              class=\"hashtag select2-selection__choice\"\n              title=\"#{{ item }}\"\n              >\n              <span\n                (click)=\"removeRoleAttribute(item); $event.stopPropagation()\"\n                class=\"select2-selection__choice__remove\"\n                role=\"presentation\"\n                >\u00D7</span\n                ><span class=\"select2-selection__choice__text\">#{{ item }}</span>\n              </li>\n            }\n            @for (item of _selectedNamedAttributes; track item) {\n              <li\n                (click)=\"$event.stopPropagation()\"\n                [hidden]=\"item === this.hideOption\"\n                class=\"select2-selection_choice_item\"\n                >\n                <div class=\"attag select2-selection__choice\" title=\"@{{ item }}\">\n                  <span\n                    class=\"select2-selection__choice__remove\"\n                    role=\"presentation\"\n                    >\u00D7</span\n                    ><span class=\"select2-selection__choice__text\">&#64;{{ item }}</span>\n                  </div>\n                  <div class=\"tag-name select2-selection__choice\" title=\"@{{ item }}\">\n                    <span\n                      (click)=\"removeNamedAttribute(item); $event.stopPropagation()\"\n                      class=\"select2-selection__choice__remove\"\n                      role=\"presentation\"\n                      >\u00D7</span\n                      ><span class=\"select2-selection__choice__text\">&#64;{{ item }}</span>\n                    </div>\n                  </li>\n                }\n              </ul>\n            </span>\n          </span>\n          <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n        </span>\n        @if (_hasError) {\n          <span class=\"err\">\n            {{ errorMessage }}\n          </span>\n        }\n\n        @if (!hideSelect) {\n          <span\n            [ngClass]=\"{ withBorder: !hideSelect }\"\n            class=\"nf-select2-dropdown select2-dropdown--below\"\n            dir=\"ltr\"\n            >\n            <span class=\"select2-results\">\n              <ul\n                aria-expanded=\"true\"\n                aria-hidden=\"false\"\n                aria-multiselectable=\"true\"\n                class=\"select2-results__options\"\n                role=\"tree\"\n                >\n                <li\n                  (click)=\"addNewAttribute(filterString)\"\n                  [hidden]=\"filterString === '' || isAttributeSelected(filterString)\"\n                  aria-selected=\"false\"\n                  class=\"select2-results__option hashtag\"\n                  role=\"treeitem\"\n                  title=\"{{ filterString }} (New Attribute)\"\n                  >\n                  {{ filterString }} (New Attribute)\n                </li>\n                @for (option of displayedRoleOptions; track option) {\n                  <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                    class=\"hashtag select2-results__option\"\n                    role=\"treeitem\"\n                    >\n                    #{{ option }}\n                  </li>\n                }\n                @for (option of displayedNamedOptions; track option) {\n                  <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                    >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                      &#64;{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                      &#64;{{ option }}\n                    </div>\n                  </li>\n                }\n              </ul>\n            </span>\n          </span>\n        }\n      </span>\n", styles: [".searchSelector .tagButton{cursor:pointer;transition:.5s}.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container.select2-container--focus .select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container.select2-container--focus .select2-selection .select2-selection__choice__text{cursor:text;user-select:text;-webkit-user-select:text}.select2-container--default .select2-selection--multiple input{height:calc(var(--defaultInputHeight) - .1875rem)}.select2-container--default .select2-selection--multiple .select2-selection__choice{overflow:hidden;text-wrap:wrap;display:flex}.select2-container--default .select2-selection--multiple .select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-container--default .select2-selection--multiple .select2-selection__choice.tag-name{background-color:transparent}.select2-results__options li{display:flex;flex-direction:row;width:fit-content;height:fit-content;position:relative}.select2-results__options li[hidden]{display:none}.select2-results__option.tag-name,.select2-results__option.attag,.select2-results__option.hashtag,.select2-selection__choice.tag-name,.select2-selection__choice.attag,.select2-selection__choice.hashtag{margin-bottom:0rem;margin-top:0rem;font-size:1rem;font-weight:600;line-height:unset;padding:.3125rem .625rem;float:left;border-radius:var(--inputBorderRadius);margin-left:.125rem;transition:var(--transition);overflow:hidden;text-wrap:wrap;display:flex}.select2-results__option.hashtag,.select2-selection__choice.hashtag{background-color:var(--primary);position:relative;color:var(--offWhite_ALWAYS)}.select2-results__option.attag,.select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-results__option.tag-name,.select2-selection__choice.tag-name{background-color:transparent;position:relative;color:var(--offWhite_ALWAYS)}.err{color:var(--red)!important}.select2-selection{border-radius:var(--inputBorderRadius);border-width:var(--inputBorderWidth);border-color:var(--inputBorder);border-style:solid;color:var(--offWhite_ALWAYS);padding-left:0rem}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:1.75rem;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:.5rem;padding-right:1.25rem;overflow-y:auto;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:.5rem;padding-left:1.25rem}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:2rem;user-select:none;-webkit-user-select:none;border-radius:var(--inputBorderRadius);border:.125rem solid var(--stroke);color:var(--white);padding-left:0;background-color:var(--table);overflow:hidden}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection_choice_item{width:fit-content;overflow:hidden;position:relative}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow-y:auto;overflow-x:hidden;padding-left:.5rem;padding-right:.5rem;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:.3125rem;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-results{display:flex;flex-grow:1;height:fit-content;width:100%;gap:.625rem;padding:.625rem}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:.3125rem}.select2-results__option{display:flex;height:fit-content;padding-left:.625rem;padding-top:.125rem;padding-bottom:.125rem;font-size:1rem;font-weight:600;user-select:none;-webkit-user-select:none;margin:0}.select2-results__option[hidden]{display:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:.25rem}.select2-search--dropdown .select2-search__field{padding:.25rem;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:.0625rem!important;margin:-.0625rem!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:.0625rem!important}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 .25rem .3125rem .25rem}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;width:100%;background-color:var(--background);border-radius:0;display:flex;flex-wrap:wrap;gap:.3125rem;padding:0rem .3125rem .3125rem}.select2-container--default .select2-selection--multiple .select2-selection__rendered.empty{padding:0;margin:0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:var(--placeholder);margin-top:.3125rem;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:.3125rem;margin-right:.625rem}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:.25rem}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--white);filter:brightness(90%);transition:.3s}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:.3125rem;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:.125rem;margin-right:auto}.readOnly{opacity:.75;cursor:default}.readOnly .select2-selection__choice__remove{display:none!important}.readOnly .select2-container .select2-selection__rendered:not(.empty){min-height:var(--defaultInputHeight)}.readOnly .select2-container input:disabled{font-weight:600;font-family:Open Sans,Arial,sans-serif;width:100%;padding-left:.625rem;padding-right:.625rem;margin-bottom:0rem;border:none;outline:none;box-sizing:border-box;box-shadow:none;cursor:text;text-align:left;background-color:var(--background)!important;color:var(--tableText);text-transform:none}.readOnly .select2-container input:disabled:not(.empty){height:0rem!important}.readOnly .select2-container input:disabled.empty{height:var(--defaultInputHeight)!important}.readOnly .select2-container input:disabled:hover{box-shadow:none;filter:none}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:var(--inputBorderRadius);border:.125rem solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-.1875rem;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:.625rem;font-size:1.625rem;cursor:pointer;display:inline-block;font-weight:400;margin-right:.125rem;color:var(--white)}.fullModal .select2-container--default .select2-selection--multiple{background-color:unset}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--primaryColor)}.select2-container .select2-dropdown{background-color:var(--background)}.select2-container.select2-container--default .select2-results__option[aria-selected=true]{background-color:var(--primaryColor)}.nf-select2-dropdown{background-color:var(--menu);border-top:0rem;border-radius:var(--inputBorderRadius);color:var(--white);box-sizing:border-box;display:flex;flex-grow:1;height:fit-content;position:absolute;width:100%;z-index:99999;max-height:12.5rem;overflow:auto;font-weight:600;margin-top:.0625rem;box-shadow:0 0 0 .0625rem var(--shadow),0 .5rem 1rem var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0rem;width:100%}.select2-container input{padding-top:.125rem;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:31.4375rem}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:26.0625rem}.fullWidth .select2-container--below.select2-container--focus,.fullWidth .nf-select2-dropdown.select2-dropdown--below{width:100%}.nf-select2-dropdown.select2-dropdown--below.withBorder{border:none}input{box-shadow:none;font-size:.875rem}.tagError{border-color:var(--red)!important}::ng-deep .select2-container ::placeholder{color:var(--placeholder)}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--placeholder);border-right:.3125rem solid var(--placeholder);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TagSelectorComponent, isStandalone: false, selector: "lib-tag-selector", inputs: { placeholder: "placeholder", disableField: "disableField", disableCreate: "disableCreate", hideOption: "hideOption", isLoading: "isLoading", errorMessage: "errorMessage", focusOnInit: "focusOnInit", namedAttributesServerFiltered: "namedAttributesServerFiltered", selectedRoleAttributes: "selectedRoleAttributes", selectedNamedAttributes: "selectedNamedAttributes", hasError: "hasError", availableRoleAttributes: "availableRoleAttributes", availableNamedAttributes: "availableNamedAttributes" }, outputs: { addRoleAttribute: "addRoleAttribute", addNamedAttribute: "addNamedAttribute", roleAttributeRemoved: "roleAttributeRemoved", namedAttributeRemoved: "namedAttributeRemoved", selectedRoleAttributesChange: "selectedRoleAttributesChange", selectedNamedAttributesChange: "selectedNamedAttributesChange", filterChange: "filterChange" }, viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }, { propertyName: "dropdownWrapper", first: true, predicate: ["dropdownWrapper"], descendants: true }], ngImport: i0, template: "<span (clickOutside)=\"hide()\" [ngClass]=\"{ readOnly: disableField }\" class=\"clickOutside fullWidth tagsSelector\" >\n  <span\n    class=\"select2 select2-container select2-container--default select2-container--below select2-container--focus\"\n    dir=\"ltr\"\n    >\n    <span class=\"selection\">\n      <span\n        [ngClass]=\"{ 'select2-selection-focus': !hideSelect, tagError: _hasError }\"\n        aria-expanded=\"false\"\n        aria-haspopup=\"true\"\n        class=\"select2-selection select2-selection--multiple\"\n        role=\"combobox\"\n        tabindex=\"-1\"\n        >\n        <input\n          (focus)=\"inputFocus()\"\n          (keydown)=\"handleKeyDown($event);\"\n          (keyup)=\"handleKeyUp($event, filterString);\"\n          (mouseup)=\"applyFilterMouseUp()\"\n          [(ngModel)]=\"filterString\"\n          [disabled]=\"disableField\"\n          [ngClass]=\"{ empty: isNothingSelected, tagError: _hasError }\"\n          aria-autocomplete=\"list\"\n          autocapitalize=\"off\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          class=\"select2-search__field\"\n          placeholder=\"{{disableField ? (isNothingSelected ? 'Nothing selected' : '') : placeholder}}\"\n          role=\"textbox\"\n          spellcheck=\"false\"\n          tabindex=\"0\"\n          type=\"search\"\n          #search\n          />\n        @if (isLoading) {\n          <span class=\"spinner\"></span>\n        }\n\n        <ul\n          (click)=\"openSelect()\"\n          [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n          class=\"select2-selection__rendered\"\n          >\n          @for (item of _selectedRoleAttributes; track item) {\n            <li\n              (click)=\"$event.stopPropagation()\"\n              [hidden]=\"item === this.hideOption\"\n              class=\"hashtag select2-selection__choice\"\n              title=\"#{{ item }}\"\n              >\n              <span\n                (click)=\"removeRoleAttribute(item); $event.stopPropagation()\"\n                class=\"select2-selection__choice__remove\"\n                role=\"presentation\"\n                >\u00D7</span\n                ><span class=\"select2-selection__choice__text\">#{{ item }}</span>\n              </li>\n            }\n            @for (item of _selectedNamedAttributes; track item) {\n              <li\n                (click)=\"$event.stopPropagation()\"\n                [hidden]=\"item === this.hideOption\"\n                class=\"select2-selection_choice_item\"\n                >\n                <div class=\"attag select2-selection__choice\" title=\"@{{ item }}\">\n                  <span\n                    class=\"select2-selection__choice__remove\"\n                    role=\"presentation\"\n                    >\u00D7</span\n                    ><span class=\"select2-selection__choice__text\">&#64;{{ item }}</span>\n                  </div>\n                  <div class=\"tag-name select2-selection__choice\" title=\"@{{ item }}\">\n                    <span\n                      (click)=\"removeNamedAttribute(item); $event.stopPropagation()\"\n                      class=\"select2-selection__choice__remove\"\n                      role=\"presentation\"\n                      >\u00D7</span\n                      ><span class=\"select2-selection__choice__text\">&#64;{{ item }}</span>\n                    </div>\n                  </li>\n                }\n              </ul>\n            </span>\n          </span>\n          <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n        </span>\n        @if (_hasError) {\n          <span class=\"err\">\n            {{ errorMessage }}\n          </span>\n        }\n\n        @if (!hideSelect) {\n          <span\n            [ngClass]=\"{ withBorder: !hideSelect }\"\n            class=\"nf-select2-dropdown select2-dropdown--below\"\n            dir=\"ltr\"\n            >\n            <span class=\"select2-results\">\n              <ul\n                aria-expanded=\"true\"\n                aria-hidden=\"false\"\n                aria-multiselectable=\"true\"\n                class=\"select2-results__options\"\n                role=\"tree\"\n                >\n                <li\n                  (click)=\"addNewAttribute(filterString)\"\n                  [hidden]=\"filterString === '' || isAttributeSelected(filterString)\"\n                  aria-selected=\"false\"\n                  class=\"select2-results__option hashtag\"\n                  role=\"treeitem\"\n                  title=\"{{ filterString }} (New Attribute)\"\n                  >\n                  {{ filterString }} (New Attribute)\n                </li>\n                @for (option of displayedRoleOptions; track option) {\n                  <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                    class=\"hashtag select2-results__option\"\n                    role=\"treeitem\"\n                    >\n                    #{{ option }}\n                  </li>\n                }\n                @for (option of displayedNamedOptions; track option) {\n                  <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                    >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                      &#64;{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                      &#64;{{ option }}\n                    </div>\n                  </li>\n                }\n              </ul>\n            </span>\n          </span>\n        }\n      </span>\n", styles: [".searchSelector .tagButton{cursor:pointer;transition:.5s}.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container.select2-container--focus .select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container.select2-container--focus .select2-selection .select2-selection__choice__text{cursor:text;user-select:text;-webkit-user-select:text}.select2-container--default .select2-selection--multiple input{height:calc(var(--defaultInputHeight) - .1875rem)}.select2-container--default .select2-selection--multiple .select2-selection__choice{overflow:hidden;text-wrap:wrap;display:flex}.select2-container--default .select2-selection--multiple .select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-container--default .select2-selection--multiple .select2-selection__choice.tag-name{background-color:transparent}.select2-results__options li{display:flex;flex-direction:row;width:fit-content;height:fit-content;position:relative}.select2-results__options li[hidden]{display:none}.select2-results__option.tag-name,.select2-results__option.attag,.select2-results__option.hashtag,.select2-selection__choice.tag-name,.select2-selection__choice.attag,.select2-selection__choice.hashtag{margin-bottom:0rem;margin-top:0rem;font-size:1rem;font-weight:600;line-height:unset;padding:.3125rem .625rem;float:left;border-radius:var(--inputBorderRadius);margin-left:.125rem;transition:var(--transition);overflow:hidden;text-wrap:wrap;display:flex}.select2-results__option.hashtag,.select2-selection__choice.hashtag{background-color:var(--primary);position:relative;color:var(--offWhite_ALWAYS)}.select2-results__option.attag,.select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-results__option.tag-name,.select2-selection__choice.tag-name{background-color:transparent;position:relative;color:var(--offWhite_ALWAYS)}.err{color:var(--red)!important}.select2-selection{border-radius:var(--inputBorderRadius);border-width:var(--inputBorderWidth);border-color:var(--inputBorder);border-style:solid;color:var(--offWhite_ALWAYS);padding-left:0rem}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:1.75rem;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:.5rem;padding-right:1.25rem;overflow-y:auto;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:.5rem;padding-left:1.25rem}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:2rem;user-select:none;-webkit-user-select:none;border-radius:var(--inputBorderRadius);border:.125rem solid var(--stroke);color:var(--white);padding-left:0;background-color:var(--table);overflow:hidden}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection_choice_item{width:fit-content;overflow:hidden;position:relative}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow-y:auto;overflow-x:hidden;padding-left:.5rem;padding-right:.5rem;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:.3125rem;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-results{display:flex;flex-grow:1;height:fit-content;width:100%;gap:.625rem;padding:.625rem}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:.3125rem}.select2-results__option{display:flex;height:fit-content;padding-left:.625rem;padding-top:.125rem;padding-bottom:.125rem;font-size:1rem;font-weight:600;user-select:none;-webkit-user-select:none;margin:0}.select2-results__option[hidden]{display:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:.25rem}.select2-search--dropdown .select2-search__field{padding:.25rem;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:.0625rem!important;margin:-.0625rem!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:.0625rem!important}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 .25rem .3125rem .25rem}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;width:100%;background-color:var(--background);border-radius:0;display:flex;flex-wrap:wrap;gap:.3125rem;padding:0rem .3125rem .3125rem}.select2-container--default .select2-selection--multiple .select2-selection__rendered.empty{padding:0;margin:0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:var(--placeholder);margin-top:.3125rem;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:.3125rem;margin-right:.625rem}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:.25rem}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--white);filter:brightness(90%);transition:.3s}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:.3125rem;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:.125rem;margin-right:auto}.readOnly{opacity:.75;cursor:default}.readOnly .select2-selection__choice__remove{display:none!important}.readOnly .select2-container .select2-selection__rendered:not(.empty){min-height:var(--defaultInputHeight)}.readOnly .select2-container input:disabled{font-weight:600;font-family:Open Sans,Arial,sans-serif;width:100%;padding-left:.625rem;padding-right:.625rem;margin-bottom:0rem;border:none;outline:none;box-sizing:border-box;box-shadow:none;cursor:text;text-align:left;background-color:var(--background)!important;color:var(--tableText);text-transform:none}.readOnly .select2-container input:disabled:not(.empty){height:0rem!important}.readOnly .select2-container input:disabled.empty{height:var(--defaultInputHeight)!important}.readOnly .select2-container input:disabled:hover{box-shadow:none;filter:none}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:var(--inputBorderRadius);border:.125rem solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-.1875rem;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:.625rem;font-size:1.625rem;cursor:pointer;display:inline-block;font-weight:400;margin-right:.125rem;color:var(--white)}.fullModal .select2-container--default .select2-selection--multiple{background-color:unset}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--primaryColor)}.select2-container .select2-dropdown{background-color:var(--background)}.select2-container.select2-container--default .select2-results__option[aria-selected=true]{background-color:var(--primaryColor)}.nf-select2-dropdown{background-color:var(--menu);border-top:0rem;border-radius:var(--inputBorderRadius);color:var(--white);box-sizing:border-box;display:flex;flex-grow:1;height:fit-content;position:absolute;width:100%;z-index:99999;max-height:12.5rem;overflow:auto;font-weight:600;margin-top:.0625rem;box-shadow:0 0 0 .0625rem var(--shadow),0 .5rem 1rem var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0rem;width:100%}.select2-container input{padding-top:.125rem;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:31.4375rem}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:26.0625rem}.fullWidth .select2-container--below.select2-container--focus,.fullWidth .nf-select2-dropdown.select2-dropdown--below{width:100%}.nf-select2-dropdown.select2-dropdown--below.withBorder{border:none}input{box-shadow:none;font-size:.875rem}.tagError{border-color:var(--red)!important}::ng-deep .select2-container ::placeholder{color:var(--placeholder)}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--placeholder);border-right:.3125rem solid var(--placeholder);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TagSelectorComponent, decorators: [{
             type: Component,
@@ -8157,6 +8160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }], focusOnInit: [{
                 type: Input
+            }], namedAttributesServerFiltered: [{
+                type: Input
             }], addRoleAttribute: [{
                 type: Output
             }], addNamedAttribute: [{
@@ -9056,7 +9061,7 @@ class DataTableComponent {
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DataTableComponent, deps: [{ token: DataTableService }, { token: DataTableFilterService }, { token: DateRangeQuickHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: DataTableComponent, isStandalone: false, selector: "lib-data-table", inputs: { rowData: "rowData", expandRowData: "expandRowData", collapseRowData: "collapseRowData", rowValidation: "rowValidation", isTimeSearchAvailable: "isTimeSearchAvailable", isLoading: "isLoading", tableId: "tableId", options: "options", validateService: "validateService", rowsToggled: "rowsToggled", tableRefreshCount: "tableRefreshCount", view: "view", serverSideDataSource: "serverSideDataSource", allowDownload: "allowDownload", startCount: "startCount", endCount: "endCount", totalCount: "totalCount", emptyMsg: "emptyMsg", filterApplied: "filterApplied", menuItems: "menuItems", headerActions: "headerActions", noItemsClass: "noItemsClass", entityTypeName: "entityTypeName", showNoItemsAdd: "showNoItemsAdd", noItemsReadonly: "noItemsReadonly", accessDenied: "accessDenied", currentPage: "currentPage", noItemsImage: "noItemsImage", rowHeight: "rowHeight", filterName: "filterName", filterColumn: "filterColumn", columnDefinitions: "columnDefinitions", refreshCount: "refreshCount" }, outputs: { actionRequested: "actionRequested", gridReady: "gridReady", dragStart: "dragStart", dragLeave: "dragLeave", pageChanged: "pageChanged" }, providers: [DateRangeQuickHeaderService], viewQueries: [{ propertyName: "rangePicker", first: true, predicate: ["rangePicker"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (showTable && !accessDenied) {\n  <div #tableContainer class=\"data-table-container\">\n    <lib-table-filter-bar\n      [startCount]=\"startCount\"\n      [endCount]=\"endCount\"\n      [totalCount]=\"totalCount\"\n      [currentPage]=\"currentPage\"\n      [filterName]=\"filterName\"\n      [filterColumn]=\"filterColumn\"\n    ></lib-table-filter-bar>\n    @if (showDateTimePicker) {\n      <div\n        class=\"date-time-container data-table-date-time\"\n        [class.date-picker-from-header]=\"datePickerFromHeader\"\n        [ngStyle]=\"datePickerFromHeader ? { left: menuLeft + 'px', top: menuTop + 'px' } : {}\"\n        (clickOutside)=\"closeDateTime($event)\"\n        >\n        <div class=\"data-table-date-range-control\">\n          @if (!datePickerFromHeader) {\n            <input\n              class=\"data-table-date-range-input\"\n              [value]=\"dateRangeDisplayText\"\n              placeholder=\"Select Time Range\"\n              readonly\n              (click)=\"rangePicker.open()\"\n              />\n            <button\n              type=\"button\"\n              class=\"data-table-date-range-button\"\n              aria-label=\"Select time range\"\n              (click)=\"rangePicker.open(); $event.stopPropagation()\"\n              >\n              <i class=\"pi pi-calendar\" aria-hidden=\"true\"></i>\n            </button>\n          }\n          <!-- Keep Material range input in DOM for picker wiring + ngModel updates -->\n          <mat-date-range-input class=\"data-table-date-range-hidden\" [rangePicker]=\"rangePicker\">\n            <input\n              matStartDate\n              matInput\n              [(ngModel)]=\"dateRangeStart\"\n              (dateChange)=\"onCustomDateRangeStartChanged($event.value)\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              />\n            <input\n              matEndDate\n              matInput\n              [(ngModel)]=\"dateRangeEnd\"\n              (dateChange)=\"onCustomDateRangeEndChanged($event.value)\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              />\n          </mat-date-range-input>\n          <mat-date-range-picker\n            #rangePicker\n            [calendarHeaderComponent]=\"rangeHeader\"\n            panelClass=\"ziti-date-range-panel\"\n            [xPosition]=\"datePickerFromHeader ? 'start' : 'end'\"\n            [yPosition]=\"datePickerFromHeader ? 'above' : 'below'\"\n          ></mat-date-range-picker>\n        </div>\n      </div>\n    }\n    @if (gridRendered && showFilterBar) {\n      <lib-table-hidden-columns-bar\n        [hiddenColumns]=\"hiddenColumns\"\n        (columnVisibilityChanged)=\"columnVisibilityChanged($event)\"\n      ></lib-table-hidden-columns-bar>\n    }\n    <div (resize)=\"resizeGridColumnsDebounced($event)\" class=\"ziti-ag-grid\" id=\"ItemTable\">\n      <ag-grid-angular\n        #nfAgGrid\n        [columnDefs]=\"mergedColumnDefinitions\"\n        [components]=\"frameworkComponents\"\n        [getDataPath]=\"svc.getDataPath\"\n        [getRowId]=\"svc.getRowNodeId\"\n        [gridOptions]=\"gridOptions\"\n        [modules]=\"gridModules\"\n        [rowData]=\"rowData\"\n        [tooltipHideDelay]=\"20000\"\n        [tooltipShowDelay]=\"0\"\n        (gridReady)=\"onGridReady($event)\"\n        class=\"ziti-ag-grid-table ag-theme-alpine rows\"\n        id=\"ItemGrid\"\n        >\n      </ag-grid-angular>\n      @if (!isLoading && filterApplied && (!rowData || rowData.length === 0)) {\n        <div class=\"no-rows-message\">No Rows To Show</div>\n      }\n    </div>\n    <div\n      [ngClass]=\"{ open: openHeaderMenu }\"\n      [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\"\n      class=\"tMenu action-menu header-menu\"\n      id=\"HeaderActionMenu\"\n      >\n      <div (click)=\"resetTableColumns()\" class=\"tActionRow\" id=\"ResetTableButton\">Restore Default Table</div>\n      @for (headerAction of headerActions; track headerAction) {\n        <div\n          (click)=\"actionRequested.emit({ action: headerAction.action })\"\n          class=\"tActionRow\"\n          id=\"ResetTableButton\"\n          >\n          {{headerAction.name || headerAction.label}}\n        </div>\n      }\n    </div>\n    <div\n      [ngClass]=\"{ open: openMenu }\"\n      [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\"\n      class=\"tMenu action-menu item-menu\"\n      id=\"RowActionMenu\"\n      #contextMenu\n      >\n      @for (menuItem of menuItems; track menuItem) {\n        <div\n          (click)=\"actionRequested.emit({ action: menuItem.action, item: selectedItem })\"\n          [ngClass]=\"{'menu-item-hidden': hideMenuItem(menuItem, selectedItem) }\"\n          class=\"tActionRow\"\n          id=\"TableActionButton_{{menuItem.action}}\"\n          >\n          {{menuItem.name || menuItem.label}}\n        </div>\n      }\n    </div>\n    <div\n      (clickOutside)=\"closeHeaderFilter($event)\"\n      [ngClass]=\"{ open: showFilterOptions }\"\n      [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\"\n      class=\"tMenu action-menu header-menu\"\n      id=\"HeaderFilterOptions\"\n      >\n      @for (filter of filterOptions; track filter) {\n        <div (click)=\"applyFilter($event, filter)\" class=\"tActionRow\" [ngClass]=\"{'has-icon': filter.icon}\" [id]=\"filter.columnId\">\n          @if (filter.bubbleClass) {\n            <span [ngClass]=\"filter.bubbleClass\" class=\"bubble\">\n              @if (filter.showLoader) {\n                <svg class=\"circular\" viewBox=\"25 25 50 50\">\n                  <circle\n                    class=\"path\"\n                    cx=\"50\"\n                    cy=\"50\"\n                    fill=\"none\"\n                    r=\"20\"\n                    stroke-miterlimit=\"10\"\n                    stroke-width=\"3\"\n                  ></circle>\n                </svg>\n              }\n            </span>\n          }\n          @if (filter.icon) {\n            <span class=\"os-icon {{filter.icon}}\"></span>\n          }\n          {{ filter.label }}\n        </div>\n      }\n    </div>\n  </div>\n} @else {\n  <lib-no-items\n    (clickEmit)=\"openCreate()\"\n    [image]=\"noItemsImage\"\n    [isEmpty]=\"!rowData || rowData.length === 0\"\n    [isLoading]=\"isLoading\"\n    [typeName]=\"this.entityTypeLabel\"\n    [hasAdd]=\"showNoItemsAdd\"\n    [readonly]=\"noItemsReadonly\"\n    [accessDenied]=\"accessDenied\"\n  ></lib-no-items>\n}\n@if (showTagSelector) {\n  <div class=\"tag-selector-container data-table-tag-selector\" [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\" (clickOutside)=\"closeTagSelector($event)\">\n    <div class=\"buttonBall icon-close\" (click)=\"closeTagSelector($event)\"></div>\n    <div class=\"tag-selector-label\">\n      <span>Select an Attribute:</span>\n    </div>\n    <lib-tag-selector\n      [focusOnInit]=\"true\"\n      [availableRoleAttributes]=\"roleAttributes\"\n      [availableNamedAttributes]=\"namedAttributes\"\n      [(selectedRoleAttributes)]=\"selectedRoleAttributes\"\n      [(selectedNamedAttributes)]=\"selectedNamedAttributes\"\n      (selectedNamedAttributesChange)=\"tagSelectionChanged($event, false)\"\n      (selectedRoleAttributesChange)=\"tagSelectionChanged($event, true)\"\n    ></lib-tag-selector>\n  </div>\n}\n", styles: [".data-table-container{display:flex;position:relative;height:calc(100% - 5.625rem);width:100%;flex-direction:column}.data-table-container .ziti-ag-grid{position:relative;width:100%;height:100%;display:flex;clear:both;align-items:center;justify-content:center}.data-table-container .ziti-ag-grid .ziti-ag-grid-table{height:100%;width:100%}.data-table-container .ziti-ag-grid .no-rows-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text);font-size:.875rem;pointer-events:none}.data-table-container .tMenu.action-menu.header-menu,.data-table-container .tMenu.action-menu.item-menu{position:fixed;height:unset;width:12.5rem;transition-property:opacity}.data-table-container .tMenu.action-menu.header-menu .tActionRow,.data-table-container .tMenu.action-menu.item-menu .tActionRow{display:flex;color:var(--offWhite_ALWAYS)}.data-table-container .tMenu.action-menu.header-menu .tActionRow.menu-item-hidden,.data-table-container .tMenu.action-menu.item-menu .tActionRow.menu-item-hidden{display:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-body-vertical-scroll-viewport{background-color:var(--formBackground)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row{border:none;background-color:var(--formBackground);color:var(--text)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.row-invalid{background-color:var(--invalid)!important}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.row-invalid.row-copied{background-color:var(--copiedRow)!important}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.row-copied{background-color:var(--copiedRow)!important}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-selected{background-color:var(--formBackground)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-selected.ag-row-hover{background-color:#2196f31a}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd{background:var(--white)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.ag-row-selected{background-color:var(--shaded)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.ag-row-selected.ag-row-hover{background-color:#2196f31a}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.ag-row-hover{background-color:#2196f31a}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-hover{background-color:#2196f31a}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row .dots{right:1.5625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.row-role-item .tCol{font-size:.8125rem;height:2.1875rem;line-height:2.1875rem;font-weight:600}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell.ag-cell-value.ziti-table-cell-error{outline:.125rem var(--red) solid;outline-offset:-.1875rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell.ag-cell-value.ag-cell-inline-editing{width:100%;height:100%;padding-left:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell:focus:after{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-header{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-header .ag-icon-pin{margin-top:.9375rem;transform:rotate(-45deg)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-header .ag-header-cell-text{cursor:default}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-header .ag-header-col-pin-button:hover .ag-icon-pin{animation-name:unpinColumn;animation-duration:.5s;animation-delay:.1s;animation-iteration-count:1;animation-fill-mode:forwards}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-col-pin-button:hover .ag-icon-pin{animation-name:pinColumn;animation-duration:.6s;animation-delay:.1s;animation-iteration-count:1;animation-fill-mode:forwards}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row-level-1 app-table-cell-resource-status app-resource-status{margin-left:2.5rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row-level-1 app-table-cell-resource-status app-resource-status .bubble{height:.6875rem;width:.6875rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row-level-1 app-table-cell-resource-status app-resource-status .bubble .circular{margin-left:2.5rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-icon-eye-slash{margin-top:.75rem;margin-right:.3125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-icon-pin{margin-top:.75rem}@keyframes pinColumn{0%{transform:rotate(0);margin-top:.75rem}15%{transform:rotate(-10deg);margin-top:.75rem}30%{transform:rotate(-20deg);margin-top:.75rem}45%{transform:rotate(-30deg);margin-top:.8125rem}60%{transform:rotate(-40deg);margin-top:.875rem}75%{transform:rotate(-45deg);margin-top:.9375rem}to{transform:rotate(-45deg);margin-top:1rem}}@keyframes unpinColumn{0%{transform:rotate(-45deg);margin-top:.9375rem}15%{transform:rotate(-45deg);margin-top:.875rem}30%{transform:rotate(-45deg);margin-top:.8125rem}45%{transform:rotate(-40deg);margin-top:.75rem}60%{transform:rotate(-30deg);margin-top:.6875rem}75%{transform:rotate(-20deg);margin-top:.625rem}90%{transform:rotate(-10deg);margin-top:.5625rem}to{transform:rotate(0);margin-top:.5rem}}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-right-header{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .selectHeader{background-image:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .menuHeader{background-image:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-right-header .ag-header-row:after{height:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-horizontal-left-spacer{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-horizontal-right-spacer{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell-resize{margin-top:.125rem;border-left-color:#d4d9e2;border-right-color:#d4d9e2;border-left-width:.0625rem;border-right-width:.0625rem;border-left-style:solid;border-right-style:solid;width:.1875rem;height:.875rem;position:absolute;right:.125rem;top:1.1875rem;cursor:col-resize}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell-resize:after{display:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell-text{height:3rem;cursor:move;color:var(--text);line-height:3.4375rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-icon-menu{margin-top:.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-menu{margin-left:-2.8125rem;z-index:99999999}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell{padding-right:.3125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-input-field-input{height:100%;margin-right:0;width:100%;box-shadow:0 0 .3125rem 0 var(--primary);border:solid .125rem var(--primary);overflow:visible}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-checkbox-input-wrapper .ag-input-field-input{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-viewport{box-sizing:border-box;border-bottom:.25rem solid var(--primary);background-color:var(--formBackground);padding-left:.25rem;line-height:3.4375rem;position:-webkit-sticky!important;position:sticky!important;top:0;z-index:10;transition:all .15s linear;opacity:.97}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container{cursor:default}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container.nf-can-sort{cursor:pointer}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header{background-color:var(--navigation);border-bottom:solid .0625rem;border-bottom-color:var(--navigation)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-icon{color:var(--icon)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-icon-pin{font-weight:800;margin-right:.3125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-icon-menu{font-weight:800}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-icon-eye-slash{font-weight:800;color:var(--icon)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell-resize{border-left-color:var(--stroke);border-right-color:var(--stroke);border-left-width:var(--inputBorderWidth);border-right-width:var(--inputBorderWidth);border-left-style:solid;border-right-style:solid;width:.3125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell-resize:hover{border-left-color:var(--icon);border-right-color:var(--icon)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-viewport,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-floating-top-viewport,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-body-viewport,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-center-cols-viewport,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-floating-bottom-viewport,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-body-horizontal-scroll-viewport,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-virtual-list-viewport{background-color:var(--navigation)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-theme-alpine .ag-row{background-color:var(--navigation)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .tSelect{left:1.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-shadow{box-shadow:.5rem 0 .3125rem -.25rem #dddd;z-index:40}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-right-shadow{box-shadow:-.5rem 0 .3125rem -.25rem #dddd;z-index:40}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-header .ag-header-row-column{border-bottom-style:solid;border-bottom-width:.25rem;border-bottom-color:var(--stroke)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-right-header .ag-header-row-column{border-bottom-style:solid;border-bottom-width:.25rem;border-bottom-color:var(--stroke)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-right-header .dots{right:.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-body-viewport .ag-cell{padding-left:1.25rem;text-align:left;line-height:3.0625rem!important}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-cols-container .ag-row{border-left:.25rem solid transparent}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-cols-container .ag-row-hover{border-left:.25rem solid var(--primary)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-cols-container .tSelect{margin-left:-.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-filter-button{margin-top:.3125rem;opacity:0;transition:opacity .2s;height:2.5rem;cursor:pointer}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button.nf-ag-col-pinned,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button.nf-ag-col-pinned,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-filter-button.nf-ag-col-pinned{opacity:1}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button:hover .ag-icon-eye-slash,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button:hover .ag-icon-pin,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button:hover .ag-icon-filter,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button:hover .ag-icon-eye-slash,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button:hover .ag-icon-pin,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button:hover .ag-icon-filter,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-filter-button:hover .ag-icon-eye-slash,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-filter-button:hover .ag-icon-pin,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-filter-button:hover .ag-icon-filter{color:var(--ag-alpine-active-color, var(--primary))}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button .ag-icon-filter,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button .ag-icon-filter,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-filter-button .ag-icon-filter{font-weight:700;margin-top:.8125rem;margin-right:0rem;margin-left:-.0625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button{position:absolute;margin-top:.625rem!important}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button{margin-right:1.3125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container:hover .ag-header-col-hide-button,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container:hover .ag-header-col-pin-button,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container:hover .ag-header-col-filter-button{position:relative;display:block;opacity:1}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container:hover .ag-header-col-hide-button{margin-right:0rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .tSelectHeader{top:1.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell{padding-left:0rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-sort-descending-icon{margin-top:.9375rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .nf-ag-main-col .ag-cell-label-container{margin-left:-.5rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .nf-ag-main-col .ag-cell-label-container .ag-header-cell-text{padding-left:.1875rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ziti-ag-grid .ag-root-wrapper .ag-row.row-child{background-color:#fff;border-bottom:solid var(--stroke) .0625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper app-table-column-default{width:100%}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper app-table-cell-registration{width:100%}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper app-table-cell-registration .tcol{width:100%}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd{background-color:var(--table)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd.row-role-item,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd.row-role-item{background-color:var(--shaded);border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd.row-role-item.ag-row-hover,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd.row-role-item.ag-row-hover{background-color:#2196f31a}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd.row-child-second,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd.row-child-second{background-color:var(--shaded)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd.row-child-second.row-child-header,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd.row-child-second.row-child-header{background-color:var(--shaded)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd.row-child-warn,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd.row-child-warn{background-color:var(--copiedRow)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd.row-child-header,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd.row-child-header{background-color:var(--shaded)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even{background-color:var(--shaded)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even.row-role-item,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even.row-role-item{background-color:var(--table);border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even.row-role-item.ag-row-hover,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even.row-role-item.ag-row-hover{background-color:#2196f31a}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even.row-child-second,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even.row-child-second{background-color:var(--table)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even.row-child-second.row-child-header,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even.row-child-second.row-child-header{background-color:var(--table)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even.row-child-warn,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even.row-child-warn{background-color:var(--copiedRow)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even.row-child-header,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even.row-child-header{background-color:var(--table)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child{border-top:solid var(--stroke) .0625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child.row-child-second{border-top:transparent}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child.row-child-second .ag-cell{font-size:.6875rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child .bubble{width:.5rem;height:.5625rem;margin-left:.3125rem;margin-bottom:.0625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child .ag-cell{font-size:.8125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child app-resource-status{margin-left:1.4375rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child app-resource-status .circular{height:.75rem;margin-left:1.125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child app-resource-status>span{font-size:.8125rem;margin-left:.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child.row-child-second app-resource-status{margin-left:1.625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child.row-child-second app-resource-status .circular{margin-left:1.625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child.row-child-second app-resource-status>span{font-size:.8125rem;margin-left:.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .step-content{position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-grow:1;flex-shrink:0;padding-right:.3125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .step-label{padding-left:3.4375rem;margin-left:1.25rem;width:calc(20% + 1.25rem)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .step-label.step-content{padding-left:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .started-label{width:calc(20% + 1.25rem);overflow:hidden;flex-grow:1;flex-shrink:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .finished-label{width:calc(20% + 1.25rem);overflow:hidden;flex-grow:1;flex-shrink:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .duration-label{width:calc(20% + 1.25rem);overflow:hidden;flex-grow:1;flex-shrink:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .state-label{width:calc(20% + 1.25rem);overflow:hidden;flex-grow:1;flex-shrink:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .process-info-container app-resource-status .circular{margin-left:.8125rem;margin-top:-.0625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper app-table-cell-resource-status{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-left:-.625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper app-table-cell-resource-status .bubble{margin-left:.125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper app-table-cell-resource-status .bubble .circular{left:0;top:1rem}.data-table-container ::ng-deep body{overflow-x:auto!important}.data-table-container ::ng-deep body .ag-theme-alpine.ag-dnd-ghost{height:2.1875rem!important;line-height:2.1875rem!important}.data-table-container ::ng-deep body .ag-header-row{box-sizing:border-box;border-bottom:.25rem solid var(--primary);background-color:var(--formBackground);padding-left:.25rem;line-height:3.4375rem;position:-webkit-sticky!important;position:sticky!important;top:0;z-index:10;transition:all .15s linear;opacity:.97;color:var(--text)}.data-table-container ::ng-deep body .ag-header-cell-text{position:relative;float:left;color:var(--tableText);font-size:.875rem;font-weight:600;font-family:Open Sans;height:3.4375rem;transition:.5s;white-space:nowrap;color:var(--text)}.data-table-container ::ng-deep body .ag-header-cell-resize:after{display:none}.data-table-container ::ng-deep body .ag-header-cell-menu-button{height:1rem;width:1rem}.data-table-container ::ng-deep body .ag-icon{font-family:agGridAlpine;font-size:1rem;line-height:1rem;font-style:normal;font-weight:800;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-table-container ::ng-deep body .ag-icon-menu:before{content:\"\\f11b\"}.data-table-container ::ng-deep body .ag-icon-menu:hover{color:var(--primary)}.data-table-container ::ng-deep body .ag-icon-asc{margin-top:.4375rem;font-weight:800}.data-table-container ::ng-deep body .ag-icon-desc{margin-top:-.4375rem;font-weight:800}.data-table-container ::ng-deep body .tSelectHeader{left:1.3125rem;top:.625rem}.data-table-container ::ng-deep body .cellMenu{overflow:visible}.data-table-container ::ng-deep body .ag-theme-alpine{-webkit-font-smoothing:antialiased;color:var(--tableText)!important;color:var(--ag-foreground-color, var(--tableText))!important;font-family:Open Sans,sans-serif;font-size:.8125rem;line-height:normal}.data-table-container ::ng-deep body .ag-theme-alpine .ag-row{color:var(--tableText)!important;color:var(--ag-foreground-color, var(--tableText))!important}.data-table-container ::ng-deep body .ag-theme-alpine .ag-header-cell,.data-table-container ::ng-deep body .ag-theme-alpine .ag-header-group-cell{padding-left:.3125rem;padding-right:.9375rem}.os-icon{width:1.4375rem;height:1.4375rem;background-size:1.4375rem 1.4375rem;display:inline-flex;margin-right:.5rem;margin-top:.3125rem;margin-bottom:.3125rem}.os-icon.empty{background:transparent}.os-icon.apple{background-image:url(/assets/images/apple.png)}.os-icon.windows{background-image:url(/assets/images/windows.png)}.os-icon.linux{background-image:url(/assets/images/linux.png)}.os-icon.android{background-image:url(/assets/images/android.png)}.os-icon.other{background-image:url(/assets/images/other.png)}::ng-deep .date-time-container.data-table-date-time{position:relative;z-index:10;width:100%;display:flex;justify-content:flex-end;margin-top:.75rem}::ng-deep .date-time-container.data-table-date-time.date-picker-from-header{position:fixed;width:0;height:0;margin:0;min-width:0;overflow:visible}::ng-deep .date-time-container.data-table-date-time.date-picker-from-header .data-table-date-range-control{position:absolute;left:0;top:0;width:1px;height:1px;min-width:0}::ng-deep .date-time-container.data-table-date-time .p-calendar .p-inputtext{height:.0625rem;width:.0625rem;padding:0}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-control{display:flex;align-items:stretch;justify-content:flex-end;position:relative;max-width:100%}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-input{height:var(--defaultInputHeight, 3rem);flex:1 1 auto;min-width:0;padding:0 1.25rem;border:1px solid var(--inputBorder, #d4d9e2);border-right:none;border-top-left-radius:var(--inputBorderRadius, .5rem);border-bottom-left-radius:var(--inputBorderRadius, .5rem);background:#fff;color:var(--menu, #111827);font-size:1rem;font-weight:600;outline:none;box-sizing:border-box;cursor:pointer}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-input::placeholder{color:#c6ccd6;font-size:1rem;font-weight:600}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-button{height:var(--defaultInputHeight, 3rem);width:var(--defaultInputHeight, 3rem);border:1px solid var(--primaryColor, #0d6efd);border-top-right-radius:var(--inputBorderRadius, .5rem);border-bottom-right-radius:var(--inputBorderRadius, .5rem);border-top-left-radius:0;border-bottom-left-radius:0;background:var(--primaryColor, #0d6efd);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-button .pi{font-size:1.5rem;line-height:1}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-button:hover:not(:disabled){filter:brightness(1.03)}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-hidden{position:absolute;right:0;top:0;width:1px;height:1px;min-width:1px;opacity:0;pointer-events:none}::ng-deep .date-time-container.data-table-date-time .mdc-floating-label.mat-mdc-floating-label{margin-top:0rem}::ng-deep .ziti-date-range-panel .mat-datepicker-content,::ng-deep .mat-datepicker-content.ziti-date-range-panel{width:min(345px,100vw - 1.5rem);max-width:calc(100vw - 1.5rem)}::ng-deep .ziti-date-range-panel .mat-datepicker-content .mat-calendar,::ng-deep .mat-datepicker-content.ziti-date-range-panel .mat-calendar{width:100%}::ng-deep .tag-selector-container.data-table-tag-selector{position:fixed;z-index:9999;width:21.875rem;height:fit-content;background:var(--formBackground);display:flex;flex-direction:column;justify-content:flex-end;padding:.625rem;border-radius:var(--inputBorderRadius);box-shadow:var(--shadowLarge);margin-top:-1.25rem;border-color:var(--stroke);border-style:solid}::ng-deep .tag-selector-container.data-table-tag-selector .tag-selector-label{margin-bottom:.3125rem;margin-left:.125rem;font-weight:600;color:var(--menu)}::ng-deep .tag-selector-container.data-table-tag-selector .select2-search__field{height:2.1875rem}::ng-deep .tag-selector-container.data-table-tag-selector .nf-select2-dropdown{width:calc(100% - 1.25rem)!important}::ng-deep .tag-selector-container .icon-close{position:absolute;top:.5rem;right:.5rem;cursor:pointer;color:var(--icon);font-weight:600}::ng-deep .tag-selector-container .icon-close:hover{filter:brightness(50%)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i8.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterMovesDown", "enterMovesDownAfterEdit", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "excludeHiddenColumnsFromQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "enableChartToolPanelsButton", "suppressChartToolPanelsButton", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressParentsInRowNodes", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "suppressAggAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideFilterAllLevels", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "functionsPassive", "enableGroupEdit", "initialState", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "gridPreDestroyed", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: FilterBarComponent, selector: "lib-table-filter-bar", inputs: ["filterName", "filterColumn", "startCount", "endCount", "totalCount", "currentPage"] }, { kind: "component", type: HiddenColumnsBarComponent, selector: "lib-table-hidden-columns-bar", inputs: ["hiddenColumns"], outputs: ["columnVisibilityChanged"] }, { kind: "component", type: NoItemsComponent, selector: "lib-no-items", inputs: ["image", "typeName", "isEmpty", "hasAdd", "hiddenResults", "isLoading", "readonly", "accessDenied"], outputs: ["clickEmit", "refresh"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: DataTableComponent, isStandalone: false, selector: "lib-data-table", inputs: { rowData: "rowData", expandRowData: "expandRowData", collapseRowData: "collapseRowData", rowValidation: "rowValidation", isTimeSearchAvailable: "isTimeSearchAvailable", isLoading: "isLoading", tableId: "tableId", options: "options", validateService: "validateService", rowsToggled: "rowsToggled", tableRefreshCount: "tableRefreshCount", view: "view", serverSideDataSource: "serverSideDataSource", allowDownload: "allowDownload", startCount: "startCount", endCount: "endCount", totalCount: "totalCount", emptyMsg: "emptyMsg", filterApplied: "filterApplied", menuItems: "menuItems", headerActions: "headerActions", noItemsClass: "noItemsClass", entityTypeName: "entityTypeName", showNoItemsAdd: "showNoItemsAdd", noItemsReadonly: "noItemsReadonly", accessDenied: "accessDenied", currentPage: "currentPage", noItemsImage: "noItemsImage", rowHeight: "rowHeight", filterName: "filterName", filterColumn: "filterColumn", columnDefinitions: "columnDefinitions", refreshCount: "refreshCount" }, outputs: { actionRequested: "actionRequested", gridReady: "gridReady", dragStart: "dragStart", dragLeave: "dragLeave", pageChanged: "pageChanged" }, providers: [DateRangeQuickHeaderService], viewQueries: [{ propertyName: "rangePicker", first: true, predicate: ["rangePicker"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (showTable && !accessDenied) {\n  <div #tableContainer class=\"data-table-container\">\n    <lib-table-filter-bar\n      [startCount]=\"startCount\"\n      [endCount]=\"endCount\"\n      [totalCount]=\"totalCount\"\n      [currentPage]=\"currentPage\"\n      [filterName]=\"filterName\"\n      [filterColumn]=\"filterColumn\"\n    ></lib-table-filter-bar>\n    @if (showDateTimePicker) {\n      <div\n        class=\"date-time-container data-table-date-time\"\n        [class.date-picker-from-header]=\"datePickerFromHeader\"\n        [ngStyle]=\"datePickerFromHeader ? { left: menuLeft + 'px', top: menuTop + 'px' } : {}\"\n        (clickOutside)=\"closeDateTime($event)\"\n        >\n        <div class=\"data-table-date-range-control\">\n          @if (!datePickerFromHeader) {\n            <input\n              class=\"data-table-date-range-input\"\n              [value]=\"dateRangeDisplayText\"\n              placeholder=\"Select Time Range\"\n              readonly\n              (click)=\"rangePicker.open()\"\n              />\n            <button\n              type=\"button\"\n              class=\"data-table-date-range-button\"\n              aria-label=\"Select time range\"\n              (click)=\"rangePicker.open(); $event.stopPropagation()\"\n              >\n              <i class=\"pi pi-calendar\" aria-hidden=\"true\"></i>\n            </button>\n          }\n          <!-- Keep Material range input in DOM for picker wiring + ngModel updates -->\n          <mat-date-range-input class=\"data-table-date-range-hidden\" [rangePicker]=\"rangePicker\">\n            <input\n              matStartDate\n              matInput\n              [(ngModel)]=\"dateRangeStart\"\n              (dateChange)=\"onCustomDateRangeStartChanged($event.value)\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              />\n            <input\n              matEndDate\n              matInput\n              [(ngModel)]=\"dateRangeEnd\"\n              (dateChange)=\"onCustomDateRangeEndChanged($event.value)\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              />\n          </mat-date-range-input>\n          <mat-date-range-picker\n            #rangePicker\n            [calendarHeaderComponent]=\"rangeHeader\"\n            panelClass=\"ziti-date-range-panel\"\n            [xPosition]=\"datePickerFromHeader ? 'start' : 'end'\"\n            [yPosition]=\"datePickerFromHeader ? 'above' : 'below'\"\n          ></mat-date-range-picker>\n        </div>\n      </div>\n    }\n    @if (gridRendered && showFilterBar) {\n      <lib-table-hidden-columns-bar\n        [hiddenColumns]=\"hiddenColumns\"\n        (columnVisibilityChanged)=\"columnVisibilityChanged($event)\"\n      ></lib-table-hidden-columns-bar>\n    }\n    <div (resize)=\"resizeGridColumnsDebounced($event)\" class=\"ziti-ag-grid\" id=\"ItemTable\">\n      <ag-grid-angular\n        #nfAgGrid\n        [columnDefs]=\"mergedColumnDefinitions\"\n        [components]=\"frameworkComponents\"\n        [getDataPath]=\"svc.getDataPath\"\n        [getRowId]=\"svc.getRowNodeId\"\n        [gridOptions]=\"gridOptions\"\n        [modules]=\"gridModules\"\n        [rowData]=\"rowData\"\n        [tooltipHideDelay]=\"20000\"\n        [tooltipShowDelay]=\"0\"\n        (gridReady)=\"onGridReady($event)\"\n        class=\"ziti-ag-grid-table ag-theme-alpine rows\"\n        id=\"ItemGrid\"\n        >\n      </ag-grid-angular>\n      @if (!isLoading && filterApplied && (!rowData || rowData.length === 0)) {\n        <div class=\"no-rows-message\">No Rows To Show</div>\n      }\n    </div>\n    <div\n      [ngClass]=\"{ open: openHeaderMenu }\"\n      [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\"\n      class=\"tMenu action-menu header-menu\"\n      id=\"HeaderActionMenu\"\n      >\n      <div (click)=\"resetTableColumns()\" class=\"tActionRow\" id=\"ResetTableButton\">Restore Default Table</div>\n      @for (headerAction of headerActions; track headerAction) {\n        <div\n          (click)=\"actionRequested.emit({ action: headerAction.action })\"\n          class=\"tActionRow\"\n          id=\"ResetTableButton\"\n          >\n          {{headerAction.name || headerAction.label}}\n        </div>\n      }\n    </div>\n    <div\n      [ngClass]=\"{ open: openMenu }\"\n      [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\"\n      class=\"tMenu action-menu item-menu\"\n      id=\"RowActionMenu\"\n      #contextMenu\n      >\n      @for (menuItem of menuItems; track menuItem) {\n        <div\n          (click)=\"actionRequested.emit({ action: menuItem.action, item: selectedItem })\"\n          [ngClass]=\"{'menu-item-hidden': hideMenuItem(menuItem, selectedItem) }\"\n          class=\"tActionRow\"\n          id=\"TableActionButton_{{menuItem.action}}\"\n          >\n          {{menuItem.name || menuItem.label}}\n        </div>\n      }\n    </div>\n    <div\n      (clickOutside)=\"closeHeaderFilter($event)\"\n      [ngClass]=\"{ open: showFilterOptions }\"\n      [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\"\n      class=\"tMenu action-menu header-menu\"\n      id=\"HeaderFilterOptions\"\n      >\n      @for (filter of filterOptions; track filter) {\n        <div (click)=\"applyFilter($event, filter)\" class=\"tActionRow\" [ngClass]=\"{'has-icon': filter.icon}\" [id]=\"filter.columnId\">\n          @if (filter.bubbleClass) {\n            <span [ngClass]=\"filter.bubbleClass\" class=\"bubble\">\n              @if (filter.showLoader) {\n                <svg class=\"circular\" viewBox=\"25 25 50 50\">\n                  <circle\n                    class=\"path\"\n                    cx=\"50\"\n                    cy=\"50\"\n                    fill=\"none\"\n                    r=\"20\"\n                    stroke-miterlimit=\"10\"\n                    stroke-width=\"3\"\n                  ></circle>\n                </svg>\n              }\n            </span>\n          }\n          @if (filter.icon) {\n            <span class=\"os-icon {{filter.icon}}\"></span>\n          }\n          {{ filter.label }}\n        </div>\n      }\n    </div>\n  </div>\n} @else {\n  <lib-no-items\n    (clickEmit)=\"openCreate()\"\n    [image]=\"noItemsImage\"\n    [isEmpty]=\"!rowData || rowData.length === 0\"\n    [isLoading]=\"isLoading\"\n    [typeName]=\"this.entityTypeLabel\"\n    [hasAdd]=\"showNoItemsAdd\"\n    [readonly]=\"noItemsReadonly\"\n    [accessDenied]=\"accessDenied\"\n  ></lib-no-items>\n}\n@if (showTagSelector) {\n  <div class=\"tag-selector-container data-table-tag-selector\" [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\" (clickOutside)=\"closeTagSelector($event)\">\n    <div class=\"buttonBall icon-close\" (click)=\"closeTagSelector($event)\"></div>\n    <div class=\"tag-selector-label\">\n      <span>Select an Attribute:</span>\n    </div>\n    <lib-tag-selector\n      [focusOnInit]=\"true\"\n      [availableRoleAttributes]=\"roleAttributes\"\n      [availableNamedAttributes]=\"namedAttributes\"\n      [(selectedRoleAttributes)]=\"selectedRoleAttributes\"\n      [(selectedNamedAttributes)]=\"selectedNamedAttributes\"\n      (selectedNamedAttributesChange)=\"tagSelectionChanged($event, false)\"\n      (selectedRoleAttributesChange)=\"tagSelectionChanged($event, true)\"\n    ></lib-tag-selector>\n  </div>\n}\n", styles: [".data-table-container{display:flex;position:relative;height:calc(100% - 5.625rem);width:100%;flex-direction:column}.data-table-container .ziti-ag-grid{position:relative;width:100%;height:100%;display:flex;clear:both;align-items:center;justify-content:center}.data-table-container .ziti-ag-grid .ziti-ag-grid-table{height:100%;width:100%}.data-table-container .ziti-ag-grid .no-rows-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text);font-size:.875rem;pointer-events:none}.data-table-container .tMenu.action-menu.header-menu,.data-table-container .tMenu.action-menu.item-menu{position:fixed;height:unset;width:12.5rem;transition-property:opacity}.data-table-container .tMenu.action-menu.header-menu .tActionRow,.data-table-container .tMenu.action-menu.item-menu .tActionRow{display:flex;color:var(--offWhite_ALWAYS)}.data-table-container .tMenu.action-menu.header-menu .tActionRow.menu-item-hidden,.data-table-container .tMenu.action-menu.item-menu .tActionRow.menu-item-hidden{display:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-body-vertical-scroll-viewport{background-color:var(--formBackground)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row{border:none;background-color:var(--formBackground);color:var(--text)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.row-invalid{background-color:var(--invalid)!important}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.row-invalid.row-copied{background-color:var(--copiedRow)!important}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.row-copied{background-color:var(--copiedRow)!important}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-selected{background-color:var(--formBackground)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-selected.ag-row-hover{background-color:#2196f31a}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd{background:var(--white)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.ag-row-selected{background-color:var(--shaded)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.ag-row-selected.ag-row-hover{background-color:#2196f31a}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.ag-row-hover{background-color:#2196f31a}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-hover{background-color:#2196f31a}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row .dots{right:1.5625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.row-role-item .tCol{font-size:.8125rem;height:2.1875rem;line-height:2.1875rem;font-weight:600}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell.ag-cell-value.ziti-table-cell-error{outline:.125rem var(--red) solid;outline-offset:-.1875rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell.ag-cell-value.ag-cell-inline-editing{width:100%;height:100%;padding-left:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell:focus:after{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-header{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-header .ag-icon-pin{margin-top:.9375rem;transform:rotate(-45deg)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-header .ag-header-cell-text{cursor:default}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-header .ag-header-col-pin-button:hover .ag-icon-pin{animation-name:unpinColumn;animation-duration:.5s;animation-delay:.1s;animation-iteration-count:1;animation-fill-mode:forwards}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-col-pin-button:hover .ag-icon-pin{animation-name:pinColumn;animation-duration:.6s;animation-delay:.1s;animation-iteration-count:1;animation-fill-mode:forwards}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row-level-1 app-table-cell-resource-status app-resource-status{margin-left:2.5rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row-level-1 app-table-cell-resource-status app-resource-status .bubble{height:.6875rem;width:.6875rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row-level-1 app-table-cell-resource-status app-resource-status .bubble .circular{margin-left:2.5rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-icon-eye-slash{margin-top:.75rem;margin-right:.3125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-icon-pin{margin-top:.75rem}@keyframes pinColumn{0%{transform:rotate(0);margin-top:.75rem}15%{transform:rotate(-10deg);margin-top:.75rem}30%{transform:rotate(-20deg);margin-top:.75rem}45%{transform:rotate(-30deg);margin-top:.8125rem}60%{transform:rotate(-40deg);margin-top:.875rem}75%{transform:rotate(-45deg);margin-top:.9375rem}to{transform:rotate(-45deg);margin-top:1rem}}@keyframes unpinColumn{0%{transform:rotate(-45deg);margin-top:.9375rem}15%{transform:rotate(-45deg);margin-top:.875rem}30%{transform:rotate(-45deg);margin-top:.8125rem}45%{transform:rotate(-40deg);margin-top:.75rem}60%{transform:rotate(-30deg);margin-top:.6875rem}75%{transform:rotate(-20deg);margin-top:.625rem}90%{transform:rotate(-10deg);margin-top:.5625rem}to{transform:rotate(0);margin-top:.5rem}}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-right-header{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .selectHeader{background-image:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .menuHeader{background-image:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-right-header .ag-header-row:after{height:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-horizontal-left-spacer{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-horizontal-right-spacer{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell-resize{margin-top:.125rem;border-left-color:#d4d9e2;border-right-color:#d4d9e2;border-left-width:.0625rem;border-right-width:.0625rem;border-left-style:solid;border-right-style:solid;width:.1875rem;height:.875rem;position:absolute;right:.125rem;top:1.1875rem;cursor:col-resize}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell-resize:after{display:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell-text{height:3rem;cursor:move;color:var(--text);line-height:3.4375rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-icon-menu{margin-top:.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-menu{margin-left:-2.8125rem;z-index:99999999}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell{padding-right:.3125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-input-field-input{height:100%;margin-right:0;width:100%;box-shadow:0 0 .3125rem 0 var(--primary);border:solid .125rem var(--primary);overflow:visible}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-checkbox-input-wrapper .ag-input-field-input{border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-viewport{box-sizing:border-box;border-bottom:.25rem solid var(--primary);background-color:var(--formBackground);padding-left:.25rem;line-height:3.4375rem;position:-webkit-sticky!important;position:sticky!important;top:0;z-index:10;transition:all .15s linear;opacity:.97}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container{cursor:default}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container.nf-can-sort{cursor:pointer}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header{background-color:var(--navigation);border-bottom:solid .0625rem;border-bottom-color:var(--navigation)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-icon{color:var(--icon)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-icon-pin{font-weight:800;margin-right:.3125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-icon-menu{font-weight:800}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-icon-eye-slash{font-weight:800;color:var(--icon)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell-resize{border-left-color:var(--stroke);border-right-color:var(--stroke);border-left-width:var(--inputBorderWidth);border-right-width:var(--inputBorderWidth);border-left-style:solid;border-right-style:solid;width:.3125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell-resize:hover{border-left-color:var(--icon);border-right-color:var(--icon)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-viewport,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-floating-top-viewport,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-body-viewport,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-center-cols-viewport,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-floating-bottom-viewport,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-body-horizontal-scroll-viewport,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-virtual-list-viewport{background-color:var(--navigation)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-theme-alpine .ag-row{background-color:var(--navigation)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .tSelect{left:1.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-shadow{box-shadow:.5rem 0 .3125rem -.25rem #dddd;z-index:40}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-right-shadow{box-shadow:-.5rem 0 .3125rem -.25rem #dddd;z-index:40}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-header .ag-header-row-column{border-bottom-style:solid;border-bottom-width:.25rem;border-bottom-color:var(--stroke)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-right-header .ag-header-row-column{border-bottom-style:solid;border-bottom-width:.25rem;border-bottom-color:var(--stroke)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-right-header .dots{right:.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-body-viewport .ag-cell{padding-left:1.25rem;text-align:left;line-height:3.0625rem!important}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-cols-container .ag-row{border-left:.25rem solid transparent}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-cols-container .ag-row-hover{border-left:.25rem solid var(--primary)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-pinned-left-cols-container .tSelect{margin-left:-.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-filter-button{margin-top:.3125rem;opacity:0;transition:opacity .2s;height:2.5rem;cursor:pointer}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button.nf-ag-col-pinned,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button.nf-ag-col-pinned,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-filter-button.nf-ag-col-pinned{opacity:1}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button:hover .ag-icon-eye-slash,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button:hover .ag-icon-pin,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button:hover .ag-icon-filter,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button:hover .ag-icon-eye-slash,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button:hover .ag-icon-pin,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button:hover .ag-icon-filter,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-filter-button:hover .ag-icon-eye-slash,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-filter-button:hover .ag-icon-pin,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-filter-button:hover .ag-icon-filter{color:var(--ag-alpine-active-color, var(--primary))}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button .ag-icon-filter,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button .ag-icon-filter,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-filter-button .ag-icon-filter{font-weight:700;margin-top:.8125rem;margin-right:0rem;margin-left:-.0625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-pin-button{position:absolute;margin-top:.625rem!important}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container .ag-header-col-hide-button{margin-right:1.3125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container:hover .ag-header-col-hide-button,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container:hover .ag-header-col-pin-button,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container:hover .ag-header-col-filter-button{position:relative;display:block;opacity:1}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-cell-label-container:hover .ag-header-col-hide-button{margin-right:0rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .tSelectHeader{top:1.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-header-cell{padding-left:0rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-sort-descending-icon{margin-top:.9375rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .nf-ag-main-col .ag-cell-label-container{margin-left:-.5rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .nf-ag-main-col .ag-cell-label-container .ag-header-cell-text{padding-left:.1875rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ziti-ag-grid .ag-root-wrapper .ag-row.row-child{background-color:#fff;border-bottom:solid var(--stroke) .0625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper app-table-column-default{width:100%}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper app-table-cell-registration{width:100%}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper app-table-cell-registration .tcol{width:100%}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd{background-color:var(--table)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd.row-role-item,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd.row-role-item{background-color:var(--shaded);border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd.row-role-item.ag-row-hover,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd.row-role-item.ag-row-hover{background-color:#2196f31a}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd.row-child-second,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd.row-child-second{background-color:var(--shaded)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd.row-child-second.row-child-header,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd.row-child-second.row-child-header{background-color:var(--shaded)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd.row-child-warn,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd.row-child-warn{background-color:var(--copiedRow)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-odd.row-child-header,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-odd.row-child-header{background-color:var(--shaded)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even{background-color:var(--shaded)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even.row-role-item,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even.row-role-item{background-color:var(--table);border:none}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even.row-role-item.ag-row-hover,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even.row-role-item.ag-row-hover{background-color:#2196f31a}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even.row-child-second,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even.row-child-second{background-color:var(--table)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even.row-child-second.row-child-header,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even.row-child-second.row-child-header{background-color:var(--table)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even.row-child-warn,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even.row-child-warn{background-color:var(--copiedRow)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-even.row-child.row-child-even.row-child-header,.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .ag-row.ag-row-odd.row-child.row-child-even.row-child-header{background-color:var(--table)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child{border-top:solid var(--stroke) .0625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child.row-child-second{border-top:transparent}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child.row-child-second .ag-cell{font-size:.6875rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child .bubble{width:.5rem;height:.5625rem;margin-left:.3125rem;margin-bottom:.0625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child .ag-cell{font-size:.8125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child app-resource-status{margin-left:1.4375rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child app-resource-status .circular{height:.75rem;margin-left:1.125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child app-resource-status>span{font-size:.8125rem;margin-left:.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child.row-child-second app-resource-status{margin-left:1.625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child.row-child-second app-resource-status .circular{margin-left:1.625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child.row-child-second app-resource-status>span{font-size:.8125rem;margin-left:.25rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .step-content{position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-grow:1;flex-shrink:0;padding-right:.3125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .step-label{padding-left:3.4375rem;margin-left:1.25rem;width:calc(20% + 1.25rem)}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .step-label.step-content{padding-left:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .started-label{width:calc(20% + 1.25rem);overflow:hidden;flex-grow:1;flex-shrink:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .finished-label{width:calc(20% + 1.25rem);overflow:hidden;flex-grow:1;flex-shrink:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .duration-label{width:calc(20% + 1.25rem);overflow:hidden;flex-grow:1;flex-shrink:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .row-child-second .step-header-container .state-label{width:calc(20% + 1.25rem);overflow:hidden;flex-grow:1;flex-shrink:0}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper .process-info-container app-resource-status .circular{margin-left:.8125rem;margin-top:-.0625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper app-table-cell-resource-status{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-left:-.625rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper app-table-cell-resource-status .bubble{margin-left:.125rem}.data-table-container ::ng-deep #ItemTable.ziti-ag-grid .ag-root-wrapper app-table-cell-resource-status .bubble .circular{left:0;top:1rem}.data-table-container ::ng-deep body{overflow-x:auto!important}.data-table-container ::ng-deep body .ag-theme-alpine.ag-dnd-ghost{height:2.1875rem!important;line-height:2.1875rem!important}.data-table-container ::ng-deep body .ag-header-row{box-sizing:border-box;border-bottom:.25rem solid var(--primary);background-color:var(--formBackground);padding-left:.25rem;line-height:3.4375rem;position:-webkit-sticky!important;position:sticky!important;top:0;z-index:10;transition:all .15s linear;opacity:.97;color:var(--text)}.data-table-container ::ng-deep body .ag-header-cell-text{position:relative;float:left;color:var(--tableText);font-size:.875rem;font-weight:600;font-family:Open Sans;height:3.4375rem;transition:.5s;white-space:nowrap;color:var(--text)}.data-table-container ::ng-deep body .ag-header-cell-resize:after{display:none}.data-table-container ::ng-deep body .ag-header-cell-menu-button{height:1rem;width:1rem}.data-table-container ::ng-deep body .ag-icon{font-family:agGridAlpine;font-size:1rem;line-height:1rem;font-style:normal;font-weight:800;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-table-container ::ng-deep body .ag-icon-menu:before{content:\"\\f11b\"}.data-table-container ::ng-deep body .ag-icon-menu:hover{color:var(--primary)}.data-table-container ::ng-deep body .ag-icon-asc{margin-top:.4375rem;font-weight:800}.data-table-container ::ng-deep body .ag-icon-desc{margin-top:-.4375rem;font-weight:800}.data-table-container ::ng-deep body .tSelectHeader{left:1.3125rem;top:.625rem}.data-table-container ::ng-deep body .cellMenu{overflow:visible}.data-table-container ::ng-deep body .ag-theme-alpine{-webkit-font-smoothing:antialiased;color:var(--tableText)!important;color:var(--ag-foreground-color, var(--tableText))!important;font-family:Open Sans,sans-serif;font-size:.8125rem;line-height:normal}.data-table-container ::ng-deep body .ag-theme-alpine .ag-row{color:var(--tableText)!important;color:var(--ag-foreground-color, var(--tableText))!important}.data-table-container ::ng-deep body .ag-theme-alpine .ag-header-cell,.data-table-container ::ng-deep body .ag-theme-alpine .ag-header-group-cell{padding-left:.3125rem;padding-right:.9375rem}.os-icon{width:1.4375rem;height:1.4375rem;background-size:1.4375rem 1.4375rem;display:inline-flex;margin-right:.5rem;margin-top:.3125rem;margin-bottom:.3125rem}.os-icon.empty{background:transparent}.os-icon.apple{background-image:url(/assets/images/apple.png)}.os-icon.windows{background-image:url(/assets/images/windows.png)}.os-icon.linux{background-image:url(/assets/images/linux.png)}.os-icon.android{background-image:url(/assets/images/android.png)}.os-icon.other{background-image:url(/assets/images/other.png)}::ng-deep .date-time-container.data-table-date-time{position:relative;z-index:10;width:100%;display:flex;justify-content:flex-end;margin-top:.75rem}::ng-deep .date-time-container.data-table-date-time.date-picker-from-header{position:fixed;width:0;height:0;margin:0;min-width:0;overflow:visible}::ng-deep .date-time-container.data-table-date-time.date-picker-from-header .data-table-date-range-control{position:absolute;left:0;top:0;width:1px;height:1px;min-width:0}::ng-deep .date-time-container.data-table-date-time .p-calendar .p-inputtext{height:.0625rem;width:.0625rem;padding:0}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-control{display:flex;align-items:stretch;justify-content:flex-end;position:relative;max-width:100%}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-input{height:var(--defaultInputHeight, 3rem);flex:1 1 auto;min-width:0;padding:0 1.25rem;border:1px solid var(--inputBorder, #d4d9e2);border-right:none;border-top-left-radius:var(--inputBorderRadius, .5rem);border-bottom-left-radius:var(--inputBorderRadius, .5rem);background:#fff;color:var(--menu, #111827);font-size:1rem;font-weight:600;outline:none;box-sizing:border-box;cursor:pointer}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-input::placeholder{color:#c6ccd6;font-size:1rem;font-weight:600}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-button{height:var(--defaultInputHeight, 3rem);width:var(--defaultInputHeight, 3rem);border:1px solid var(--primaryColor, #0d6efd);border-top-right-radius:var(--inputBorderRadius, .5rem);border-bottom-right-radius:var(--inputBorderRadius, .5rem);border-top-left-radius:0;border-bottom-left-radius:0;background:var(--primaryColor, #0d6efd);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-button .pi{font-size:1.5rem;line-height:1}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-button:hover:not(:disabled){filter:brightness(1.03)}::ng-deep .date-time-container.data-table-date-time .data-table-date-range-hidden{position:absolute;right:0;top:0;width:1px;height:1px;min-width:1px;opacity:0;pointer-events:none}::ng-deep .date-time-container.data-table-date-time .mdc-floating-label.mat-mdc-floating-label{margin-top:0rem}::ng-deep .ziti-date-range-panel .mat-datepicker-content,::ng-deep .mat-datepicker-content.ziti-date-range-panel{width:min(345px,100vw - 1.5rem);max-width:calc(100vw - 1.5rem)}::ng-deep .ziti-date-range-panel .mat-datepicker-content .mat-calendar,::ng-deep .mat-datepicker-content.ziti-date-range-panel .mat-calendar{width:100%}::ng-deep .tag-selector-container.data-table-tag-selector{position:fixed;z-index:9999;width:21.875rem;height:fit-content;background:var(--formBackground);display:flex;flex-direction:column;justify-content:flex-end;padding:.625rem;border-radius:var(--inputBorderRadius);box-shadow:var(--shadowLarge);margin-top:-1.25rem;border-color:var(--stroke);border-style:solid}::ng-deep .tag-selector-container.data-table-tag-selector .tag-selector-label{margin-bottom:.3125rem;margin-left:.125rem;font-weight:600;color:var(--menu)}::ng-deep .tag-selector-container.data-table-tag-selector .select2-search__field{height:2.1875rem}::ng-deep .tag-selector-container.data-table-tag-selector .nf-select2-dropdown{width:calc(100% - 1.25rem)!important}::ng-deep .tag-selector-container .icon-close{position:absolute;top:.5rem;right:.5rem;cursor:pointer;color:var(--icon);font-weight:600}::ng-deep .tag-selector-container .icon-close:hover{filter:brightness(50%)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i8.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterMovesDown", "enterMovesDownAfterEdit", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "excludeHiddenColumnsFromQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "enableChartToolPanelsButton", "suppressChartToolPanelsButton", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressParentsInRowNodes", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "suppressAggAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideFilterAllLevels", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "functionsPassive", "enableGroupEdit", "initialState", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "gridPreDestroyed", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: FilterBarComponent, selector: "lib-table-filter-bar", inputs: ["filterName", "filterColumn", "startCount", "endCount", "totalCount", "currentPage"] }, { kind: "component", type: HiddenColumnsBarComponent, selector: "lib-table-hidden-columns-bar", inputs: ["hiddenColumns"], outputs: ["columnVisibilityChanged"] }, { kind: "component", type: NoItemsComponent, selector: "lib-no-items", inputs: ["image", "typeName", "isEmpty", "hasAdd", "hiddenResults", "isLoading", "readonly", "accessDenied"], outputs: ["clickEmit", "refresh"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -10079,11 +10084,11 @@ class FormFieldContainerComponent {
         this.headerToggleChange.emit(this.headerToggle);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FormFieldContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FormFieldContainerComponent, isStandalone: false, selector: "lib-form-field-container", inputs: { title: "title", title2: "title2", titleIcon: "titleIcon", layout: "layout", helpText: "helpText", helpText2: "helpText2", label: "label", count: "count", action: "action", actionLabel: "actionLabel", class: "class", contentStyle: "contentStyle", contentClass: "contentClass", showHeader: "showHeader", showToggle: "showToggle", headerActions: "headerActions", headerToggle: "headerToggle" }, outputs: { actionRequested: "actionRequested", headerToggleChange: "headerToggleChange", helpClicked: "helpClicked" }, ngImport: i0, template: "<div class=\"form-field-container\" class=\"{{class}}\" [ngClass]=\"{'form-field-row': layout === 'row'}\">\n  @if (showHeader) {\n    <div class=\"form-field-header\">\n      <div class=\"form-field-title-container\">\n        @if (titleIcon) {\n          <div class=\"title-icon {{titleIcon}}\"></div>\n        }\n        <span class=\"form-field-title\">{{title}}</span>\n        @if (helpText) {\n          <div\n            class=\"form-field-help-icon\"\n            (click)=\"onHelpClick()\"\n          >?</div>\n        }\n      </div>\n      @if (label) {\n        <span class=\"form-field-label\">{{label}}</span>\n      }\n      @if (count || count === 0) {\n        <span class=\"form-field-count\">{{count}}</span>\n      }\n      @if (title2) {\n        <div class=\"form-field-title-container title-container-2\">\n          <span class=\"form-field-title title2\">{{title2}}</span>\n          @if (helpText2) {\n            <div\n              class=\"form-field-info infoicon\"\n              matTooltip=\"{{helpText2}}\"\n              matTooltipPosition=\"below\"\n            ></div>\n          }\n        </div>\n      }\n      @if (showToggle) {\n        <div class=\"form-header-toggle-container\">\n          <span\n            class=\"toggle-option-text\"\n            [ngClass]=\"{'toggle-option-selected': !headerToggle}\"\n            (click)=\"toggleHeader('left')\"\n            >\n            OFF\n          </span>\n          <div class=\"form-header-toggle\" (click)=\"toggleHeader()\">\n            <div\n              class=\"form-toggle-switch form-toggle-switch-inverse\"\n              [ngClass]=\"{'toggle-left': !headerToggle, 'toggle-right': headerToggle}\"\n              >\n              <div class=\"form-toggle-indicator\"></div>\n              <div class=\"form-toggle-indicator\"></div>\n            </div>\n          </div>\n          <span\n            class=\"toggle-option-text\"\n            [ngClass]=\"{'toggle-option-selected': headerToggle}\"\n            (click)=\"toggleHeader('right')\"\n            >\n            ON\n          </span>\n        </div>\n      }\n    </div>\n  }\n  <div class=\"form-field-content\" [style]=\"contentStyle\" class=\"{{contentClass}}\">\n    <ng-content></ng-content>\n  </div>\n  @if (headerActions) {\n    <lib-multi-action-button\n      [actions]=\"headerActions\"\n      (actionRequested)=\"actionClicked($event)\"\n    ></lib-multi-action-button>\n  }\n</div>\n", styles: [":host{height:fit-content;display:flex;width:100%;flex-direction:column;position:relative}.form-field-help-icon{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:50%;background-color:var(--tableText);color:#fff;font-weight:700;font-size:.75rem;cursor:pointer;margin-left:.5rem;margin-bottom:.125rem;transition:all .3s ease;opacity:.5}.form-field-help-icon:hover{transform:scale(1.1);background-color:var(--primary);opacity:1}.form-field-container{display:flex;flex-direction:column;background-color:var(--navigation);padding:.9375rem;border-radius:var(--formFieldBorderRadius);gap:var(--marginMedium);height:100%;position:relative;border:var(--formFieldBorder)}.form-field-container.no-padding{padding:0;margin:0}.form-field-container.bold-header-title .form-field-title{color:var(--primary);font-weight:100;font-size:1.125rem;font-family:Russo One;filter:brightness(.9)}.form-field-container.hide-overflow .form-field-content{overflow:hidden}.form-field-container.no-gap .form-field-content{gap:0}.form-field-container .form-field-content{display:flex;flex-direction:column;width:100%;gap:.9375rem;z-index:99999;position:relative;border-radius:var(--inputBorderRadius)}.form-field-container.form-field-row .form-field-content{flex-direction:row;width:100%}.form-field-container .form-field-title-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 auto;width:100%}.form-field-container .form-field-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:.875rem;z-index:9999}.form-field-container .title-icon{font-size:1.25rem;margin-right:.3125rem;margin-left:.3125rem}.form-field-container .form-field-title{display:flex;align-items:center;font-size:.875rem;font-weight:600;color:var(--tableText);text-transform:uppercase;height:.875rem}.form-field-container .form-field-label{font-size:.875rem;font-weight:600;color:var(--placeholder)}.form-field-container .form-field-count{background-color:#4c5566;color:var(--white);display:flex;align-items:center;font-weight:700;border-radius:.875rem;height:1.5rem;padding-left:.8125rem;padding-right:.8125rem;font-size:.8125rem}.form-field-container .form-field-input::placeholder{font-weight:600}.form-field-container .save-button{text-wrap:nowrap;height:1.5625rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: ["actions"], outputs: ["actionRequested"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FormFieldContainerComponent, isStandalone: false, selector: "lib-form-field-container", inputs: { title: "title", title2: "title2", titleIcon: "titleIcon", layout: "layout", helpText: "helpText", helpText2: "helpText2", label: "label", count: "count", action: "action", actionLabel: "actionLabel", class: "class", contentStyle: "contentStyle", contentClass: "contentClass", showHeader: "showHeader", showToggle: "showToggle", headerActions: "headerActions", headerToggle: "headerToggle" }, outputs: { actionRequested: "actionRequested", headerToggleChange: "headerToggleChange", helpClicked: "helpClicked" }, ngImport: i0, template: "<div class=\"form-field-container\" class=\"{{class}}\" [ngClass]=\"{'form-field-row': layout === 'row'}\">\n  @if (showHeader) {\n    <div class=\"form-field-header\">\n      <div class=\"form-field-title-container\">\n        @if (titleIcon) {\n          <div class=\"title-icon {{titleIcon}}\"></div>\n        }\n        <span class=\"form-field-title\">{{title}}</span>\n        @if (helpText) {\n          <div\n            class=\"form-field-help-icon\"\n            matTooltip=\"{{helpText}}\"\n            matTooltipPosition=\"below\"\n            (click)=\"onHelpClick()\"\n          >?</div>\n        }\n      </div>\n      @if (label) {\n        <span class=\"form-field-label\">{{label}}</span>\n      }\n      @if (count || count === 0) {\n        <span class=\"form-field-count\">{{count}}</span>\n      }\n      @if (title2) {\n        <div class=\"form-field-title-container title-container-2\">\n          <span class=\"form-field-title title2\">{{title2}}</span>\n          @if (helpText2) {\n            <div\n              class=\"form-field-info infoicon\"\n              matTooltip=\"{{helpText2}}\"\n              matTooltipPosition=\"below\"\n            ></div>\n          }\n        </div>\n      }\n      @if (showToggle) {\n        <div class=\"form-header-toggle-container\">\n          <span\n            class=\"toggle-option-text\"\n            [ngClass]=\"{'toggle-option-selected': !headerToggle}\"\n            (click)=\"toggleHeader('left')\"\n            >\n            OFF\n          </span>\n          <div class=\"form-header-toggle\" (click)=\"toggleHeader()\">\n            <div\n              class=\"form-toggle-switch form-toggle-switch-inverse\"\n              [ngClass]=\"{'toggle-left': !headerToggle, 'toggle-right': headerToggle}\"\n              >\n              <div class=\"form-toggle-indicator\"></div>\n              <div class=\"form-toggle-indicator\"></div>\n            </div>\n          </div>\n          <span\n            class=\"toggle-option-text\"\n            [ngClass]=\"{'toggle-option-selected': headerToggle}\"\n            (click)=\"toggleHeader('right')\"\n            >\n            ON\n          </span>\n        </div>\n      }\n    </div>\n  }\n  <div class=\"form-field-content\" [style]=\"contentStyle\" class=\"{{contentClass}}\">\n    <ng-content></ng-content>\n  </div>\n  @if (headerActions) {\n    <lib-multi-action-button\n      [actions]=\"headerActions\"\n      (actionRequested)=\"actionClicked($event)\"\n    ></lib-multi-action-button>\n  }\n</div>\n", styles: [":host{height:fit-content;display:flex;width:100%;flex-direction:column;position:relative}.form-field-help-icon{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:50%;background-color:var(--tableText);color:#fff;font-weight:700;font-size:.75rem;cursor:pointer;margin-left:.5rem;margin-bottom:.125rem;transition:all .3s ease;opacity:.5}.form-field-help-icon:hover{transform:scale(1.1);background-color:var(--primary);opacity:1}.form-field-container{display:flex;flex-direction:column;background-color:var(--navigation);padding:.9375rem;border-radius:var(--formFieldBorderRadius);gap:var(--marginMedium);height:100%;position:relative;border:var(--formFieldBorder)}.form-field-container.no-padding{padding:0;margin:0}.form-field-container.bold-header-title .form-field-title{color:var(--primary);font-weight:100;font-size:1.125rem;font-family:Russo One;filter:brightness(.9)}.form-field-container.hide-overflow .form-field-content{overflow:hidden}.form-field-container.no-gap .form-field-content{gap:0}.form-field-container .form-field-content{display:flex;flex-direction:column;width:100%;gap:.9375rem;z-index:99999;position:relative;border-radius:var(--inputBorderRadius)}.form-field-container.form-field-row .form-field-content{flex-direction:row;width:100%}.form-field-container .form-field-title-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 auto;width:100%}.form-field-container .form-field-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:.875rem;z-index:9999}.form-field-container .title-icon{font-size:1.25rem;margin-right:.3125rem;margin-left:.3125rem}.form-field-container .form-field-title{display:flex;align-items:center;font-size:.875rem;font-weight:600;color:var(--tableText);text-transform:uppercase;height:.875rem}.form-field-container .form-field-label{font-size:.875rem;font-weight:600;color:var(--placeholder)}.form-field-container .form-field-count{background-color:#4c5566;color:var(--white);display:flex;align-items:center;font-weight:700;border-radius:.875rem;height:1.5rem;padding-left:.8125rem;padding-right:.8125rem;font-size:.8125rem}.form-field-container .form-field-input::placeholder{font-weight:600}.form-field-container .save-button{text-wrap:nowrap;height:1.5625rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: ["actions"], outputs: ["actionRequested"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FormFieldContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-field-container', standalone: false, template: "<div class=\"form-field-container\" class=\"{{class}}\" [ngClass]=\"{'form-field-row': layout === 'row'}\">\n  @if (showHeader) {\n    <div class=\"form-field-header\">\n      <div class=\"form-field-title-container\">\n        @if (titleIcon) {\n          <div class=\"title-icon {{titleIcon}}\"></div>\n        }\n        <span class=\"form-field-title\">{{title}}</span>\n        @if (helpText) {\n          <div\n            class=\"form-field-help-icon\"\n            (click)=\"onHelpClick()\"\n          >?</div>\n        }\n      </div>\n      @if (label) {\n        <span class=\"form-field-label\">{{label}}</span>\n      }\n      @if (count || count === 0) {\n        <span class=\"form-field-count\">{{count}}</span>\n      }\n      @if (title2) {\n        <div class=\"form-field-title-container title-container-2\">\n          <span class=\"form-field-title title2\">{{title2}}</span>\n          @if (helpText2) {\n            <div\n              class=\"form-field-info infoicon\"\n              matTooltip=\"{{helpText2}}\"\n              matTooltipPosition=\"below\"\n            ></div>\n          }\n        </div>\n      }\n      @if (showToggle) {\n        <div class=\"form-header-toggle-container\">\n          <span\n            class=\"toggle-option-text\"\n            [ngClass]=\"{'toggle-option-selected': !headerToggle}\"\n            (click)=\"toggleHeader('left')\"\n            >\n            OFF\n          </span>\n          <div class=\"form-header-toggle\" (click)=\"toggleHeader()\">\n            <div\n              class=\"form-toggle-switch form-toggle-switch-inverse\"\n              [ngClass]=\"{'toggle-left': !headerToggle, 'toggle-right': headerToggle}\"\n              >\n              <div class=\"form-toggle-indicator\"></div>\n              <div class=\"form-toggle-indicator\"></div>\n            </div>\n          </div>\n          <span\n            class=\"toggle-option-text\"\n            [ngClass]=\"{'toggle-option-selected': headerToggle}\"\n            (click)=\"toggleHeader('right')\"\n            >\n            ON\n          </span>\n        </div>\n      }\n    </div>\n  }\n  <div class=\"form-field-content\" [style]=\"contentStyle\" class=\"{{contentClass}}\">\n    <ng-content></ng-content>\n  </div>\n  @if (headerActions) {\n    <lib-multi-action-button\n      [actions]=\"headerActions\"\n      (actionRequested)=\"actionClicked($event)\"\n    ></lib-multi-action-button>\n  }\n</div>\n", styles: [":host{height:fit-content;display:flex;width:100%;flex-direction:column;position:relative}.form-field-help-icon{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:50%;background-color:var(--tableText);color:#fff;font-weight:700;font-size:.75rem;cursor:pointer;margin-left:.5rem;margin-bottom:.125rem;transition:all .3s ease;opacity:.5}.form-field-help-icon:hover{transform:scale(1.1);background-color:var(--primary);opacity:1}.form-field-container{display:flex;flex-direction:column;background-color:var(--navigation);padding:.9375rem;border-radius:var(--formFieldBorderRadius);gap:var(--marginMedium);height:100%;position:relative;border:var(--formFieldBorder)}.form-field-container.no-padding{padding:0;margin:0}.form-field-container.bold-header-title .form-field-title{color:var(--primary);font-weight:100;font-size:1.125rem;font-family:Russo One;filter:brightness(.9)}.form-field-container.hide-overflow .form-field-content{overflow:hidden}.form-field-container.no-gap .form-field-content{gap:0}.form-field-container .form-field-content{display:flex;flex-direction:column;width:100%;gap:.9375rem;z-index:99999;position:relative;border-radius:var(--inputBorderRadius)}.form-field-container.form-field-row .form-field-content{flex-direction:row;width:100%}.form-field-container .form-field-title-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 auto;width:100%}.form-field-container .form-field-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:.875rem;z-index:9999}.form-field-container .title-icon{font-size:1.25rem;margin-right:.3125rem;margin-left:.3125rem}.form-field-container .form-field-title{display:flex;align-items:center;font-size:.875rem;font-weight:600;color:var(--tableText);text-transform:uppercase;height:.875rem}.form-field-container .form-field-label{font-size:.875rem;font-weight:600;color:var(--placeholder)}.form-field-container .form-field-count{background-color:#4c5566;color:var(--white);display:flex;align-items:center;font-weight:700;border-radius:.875rem;height:1.5rem;padding-left:.8125rem;padding-right:.8125rem;font-size:.8125rem}.form-field-container .form-field-input::placeholder{font-weight:600}.form-field-container .save-button{text-wrap:nowrap;height:1.5625rem}\n"] }]
+            args: [{ selector: 'lib-form-field-container', standalone: false, template: "<div class=\"form-field-container\" class=\"{{class}}\" [ngClass]=\"{'form-field-row': layout === 'row'}\">\n  @if (showHeader) {\n    <div class=\"form-field-header\">\n      <div class=\"form-field-title-container\">\n        @if (titleIcon) {\n          <div class=\"title-icon {{titleIcon}}\"></div>\n        }\n        <span class=\"form-field-title\">{{title}}</span>\n        @if (helpText) {\n          <div\n            class=\"form-field-help-icon\"\n            matTooltip=\"{{helpText}}\"\n            matTooltipPosition=\"below\"\n            (click)=\"onHelpClick()\"\n          >?</div>\n        }\n      </div>\n      @if (label) {\n        <span class=\"form-field-label\">{{label}}</span>\n      }\n      @if (count || count === 0) {\n        <span class=\"form-field-count\">{{count}}</span>\n      }\n      @if (title2) {\n        <div class=\"form-field-title-container title-container-2\">\n          <span class=\"form-field-title title2\">{{title2}}</span>\n          @if (helpText2) {\n            <div\n              class=\"form-field-info infoicon\"\n              matTooltip=\"{{helpText2}}\"\n              matTooltipPosition=\"below\"\n            ></div>\n          }\n        </div>\n      }\n      @if (showToggle) {\n        <div class=\"form-header-toggle-container\">\n          <span\n            class=\"toggle-option-text\"\n            [ngClass]=\"{'toggle-option-selected': !headerToggle}\"\n            (click)=\"toggleHeader('left')\"\n            >\n            OFF\n          </span>\n          <div class=\"form-header-toggle\" (click)=\"toggleHeader()\">\n            <div\n              class=\"form-toggle-switch form-toggle-switch-inverse\"\n              [ngClass]=\"{'toggle-left': !headerToggle, 'toggle-right': headerToggle}\"\n              >\n              <div class=\"form-toggle-indicator\"></div>\n              <div class=\"form-toggle-indicator\"></div>\n            </div>\n          </div>\n          <span\n            class=\"toggle-option-text\"\n            [ngClass]=\"{'toggle-option-selected': headerToggle}\"\n            (click)=\"toggleHeader('right')\"\n            >\n            ON\n          </span>\n        </div>\n      }\n    </div>\n  }\n  <div class=\"form-field-content\" [style]=\"contentStyle\" class=\"{{contentClass}}\">\n    <ng-content></ng-content>\n  </div>\n  @if (headerActions) {\n    <lib-multi-action-button\n      [actions]=\"headerActions\"\n      (actionRequested)=\"actionClicked($event)\"\n    ></lib-multi-action-button>\n  }\n</div>\n", styles: [":host{height:fit-content;display:flex;width:100%;flex-direction:column;position:relative}.form-field-help-icon{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:50%;background-color:var(--tableText);color:#fff;font-weight:700;font-size:.75rem;cursor:pointer;margin-left:.5rem;margin-bottom:.125rem;transition:all .3s ease;opacity:.5}.form-field-help-icon:hover{transform:scale(1.1);background-color:var(--primary);opacity:1}.form-field-container{display:flex;flex-direction:column;background-color:var(--navigation);padding:.9375rem;border-radius:var(--formFieldBorderRadius);gap:var(--marginMedium);height:100%;position:relative;border:var(--formFieldBorder)}.form-field-container.no-padding{padding:0;margin:0}.form-field-container.bold-header-title .form-field-title{color:var(--primary);font-weight:100;font-size:1.125rem;font-family:Russo One;filter:brightness(.9)}.form-field-container.hide-overflow .form-field-content{overflow:hidden}.form-field-container.no-gap .form-field-content{gap:0}.form-field-container .form-field-content{display:flex;flex-direction:column;width:100%;gap:.9375rem;z-index:99999;position:relative;border-radius:var(--inputBorderRadius)}.form-field-container.form-field-row .form-field-content{flex-direction:row;width:100%}.form-field-container .form-field-title-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 auto;width:100%}.form-field-container .form-field-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:.875rem;z-index:9999}.form-field-container .title-icon{font-size:1.25rem;margin-right:.3125rem;margin-left:.3125rem}.form-field-container .form-field-title{display:flex;align-items:center;font-size:.875rem;font-weight:600;color:var(--tableText);text-transform:uppercase;height:.875rem}.form-field-container .form-field-label{font-size:.875rem;font-weight:600;color:var(--placeholder)}.form-field-container .form-field-count{background-color:#4c5566;color:var(--white);display:flex;align-items:center;font-weight:700;border-radius:.875rem;height:1.5rem;padding-left:.8125rem;padding-right:.8125rem;font-size:.8125rem}.form-field-container .form-field-input::placeholder{font-weight:600}.form-field-container .save-button{text-wrap:nowrap;height:1.5625rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], title2: [{
@@ -14533,6 +14538,7 @@ class ServiceFormService {
             configs: this.formData?.configs || [],
             encryptionRequired: this.formData?.encryptionRequired,
             terminatorStrategy: this.formData?.terminatorStrategy || '',
+            maxIdleTimeMillis: this.formData?.maxIdleTimeMillis || 0,
             tags: this.formData?.tags || {}
         };
         return data;
@@ -14605,6 +14611,9 @@ class ServicePolicyFormService {
         this.serviceRoleAttributes = [];
         this.identityRoleAttributes = [];
         this.postureRoleAttributes = [];
+        this.identityNamedAttributesRequestId = 0;
+        this.serviceNamedAttributesRequestId = 0;
+        this.postureNamedAttributesRequestId = 0;
     }
     save(formData) {
         const isUpdate = !isEmpty(formData.id);
@@ -14747,8 +14756,17 @@ class ServicePolicyFormService {
             return result;
         });
     }
-    getIdentityNamedAttributes() {
-        return this.zitiService.get('identities', { rawFilter: true, filter: '', sort: 'name', order: 'asc', total: -1, page: 1 }, []).then((result) => {
+    getIdentityNamedAttributes(filter) {
+        const requestId = ++this.identityNamedAttributesRequestId;
+        const paging = { searchOn: 'name', filter: filter || '', total: 100, page: 1, sort: 'name', order: 'asc' };
+        const filters = [];
+        if (!isEmpty(filter)) {
+            filters.push({ filterName: 'name', columnId: 'name', value: filter || '%', label: '', type: 'TEXTINPUT' });
+        }
+        return this.zitiService.get('identities', paging, filters).then((result) => {
+            if (requestId !== this.identityNamedAttributesRequestId) {
+                return this.identityNamedAttributes;
+            }
             const namedAttributes = result.data.map((identity) => {
                 this.identityNamedAttributesMap[identity.name] = identity.id;
                 return identity.name;
@@ -14757,8 +14775,17 @@ class ServicePolicyFormService {
             return namedAttributes;
         });
     }
-    getServiceNamedAttributes() {
-        return this.zitiService.get('services', { rawFilter: true, filter: '', sort: 'name', order: 'asc', total: -1, page: 1 }, []).then((result) => {
+    getServiceNamedAttributes(filter) {
+        const requestId = ++this.serviceNamedAttributesRequestId;
+        const paging = { searchOn: 'name', filter: filter || '', total: 100, page: 1, sort: 'name', order: 'asc' };
+        const filters = [];
+        if (!isEmpty(filter)) {
+            filters.push({ filterName: 'name', columnId: 'name', value: filter || '%', label: '', type: 'TEXTINPUT' });
+        }
+        return this.zitiService.get('services', paging, filters).then((result) => {
+            if (requestId !== this.serviceNamedAttributesRequestId) {
+                return this.serviceNamedAttributes;
+            }
             const namedAttributes = result.data.map((service) => {
                 this.serviceNamedAttributesMap[service.name] = service.id;
                 return service.name;
@@ -14773,8 +14800,17 @@ class ServicePolicyFormService {
             return result;
         });
     }
-    getPostureNamedAttributes() {
-        return this.zitiService.get('posture-checks', {}, []).then((result) => {
+    getPostureNamedAttributes(filter) {
+        const requestId = ++this.postureNamedAttributesRequestId;
+        const paging = { searchOn: 'name', filter: filter || '', total: 100, page: 1, sort: 'name', order: 'asc' };
+        const filters = [];
+        if (!isEmpty(filter)) {
+            filters.push({ filterName: 'name', columnId: 'name', value: filter || '%', label: '', type: 'TEXTINPUT' });
+        }
+        return this.zitiService.get('posture-checks', paging, filters).then((result) => {
+            if (requestId !== this.postureNamedAttributesRequestId) {
+                return this.postureNamedAttributes;
+            }
             const namedAttributes = result.data.map((postureCheck) => {
                 this.postureNamedAttributesMap[postureCheck.name] = postureCheck.id;
                 return postureCheck.name;
@@ -14783,6 +14819,38 @@ class ServicePolicyFormService {
             return namedAttributes;
         });
     }
+    /**
+     * The policy response includes serviceRolesDisplay/identityRolesDisplay/postureCheckRolesDisplay
+     * alongside the raw #role/@id arrays, resolving every referenced name for free (no extra
+     * request) even when that entity falls outside the paged named-attribute fetch above.
+     */
+    mergeRolesDisplayIntoMaps(formData) {
+        this.mergeDisplayIntoMap(formData?.serviceRolesDisplay, this.serviceNamedAttributesMap);
+        this.mergeDisplayIntoMap(formData?.identityRolesDisplay, this.identityNamedAttributesMap);
+        this.mergeDisplayIntoMap(formData?.postureCheckRolesDisplay, this.postureNamedAttributesMap);
+    }
+    mergeDisplayIntoMap(displays, namedAttributesMap) {
+        if (!Array.isArray(displays)) {
+            return;
+        }
+        displays.forEach((entry) => {
+            const role = entry?.role;
+            const id = typeof role === 'string' && role.charAt(0) === '@' ? role.slice(1) : undefined;
+            if (!id) {
+                return;
+            }
+            let displayName = entry?.name;
+            if (!displayName || typeof displayName !== 'string') {
+                return;
+            }
+            if (displayName.charAt(0) === '@') {
+                displayName = displayName.slice(1);
+            }
+            if (!namedAttributesMap[displayName]) {
+                namedAttributesMap[displayName] = id;
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServicePolicyFormService, deps: [{ token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: SERVICE_POLICY_EXTENSION_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServicePolicyFormService, providedIn: 'root' }); }
 }
@@ -16329,7 +16397,7 @@ class IdentityFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"identity-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this identity\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Identity attributes'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n            >\n            <lib-tag-selector\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              (selectedRoleAttributesChange)=\"roleAttributesChanged($event)\"\n              [availableRoleAttributes]=\"identityRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Identities'\"\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          @if (canReadRelated('auth-policies')) {\n          <lib-form-field-container\n            [title]=\"'Auth Policy'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n            [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n            >\n            <select\n              [(ngModel)]=\"formData.authPolicyId\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"\">Select an Authentication Policy</option>\n              @for (policy of authPolicies; track policy) {\n                <option\n                  [value]=\"policy.id\"\n                  >\n                  {{ policy.name }}\n                </option>\n              }\n            </select>\n            <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">External ID</span>\n                </div>\n                <span class=\"form-field-label\">{{ useStrictReadonlyForm ? '' : 'OPTIONAL' }}</span>\n              </div>\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Optional External ID\"\n                [(ngModel)]=\"formData.externalId\"\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n            </div>\n          </lib-form-field-container>\n          }\n          <ng-content select=\"[slot=column-1-slot-2]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Enrollment Type'\"\n              [title2]=\"enrollmentTypeTitle\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                id=\"EnrollmentType\"\n                class=\"form-field-dropdown\"\n                [ngClass]=\"{disabled: isEditing}\"\n                [disabled]=\"useStrictReadonlyForm || isEditing\"\n                [(ngModel)]=\"enrollmentType\"\n                (change)=\"updateEnrollment()\"\n                >\n                <option value=\"ott\">One Time Token</option>\n                <option value=\"CA\" [hidden]=\"!canReadRelated('cas')\">Certificate Authority</option>\n                <option value=\"updb\">UPDB</option>\n                <option value=\"none\">None</option>\n              </select>\n              @if (enrollmentType === 'CA' && canReadRelated('cas')) {\n                <select\n                  id=\"CertAuthorities\"\n                  class=\"form-field-dropdown\"\n                  [ngClass]=\"{disabled: isEditing, error: errors.enrollmentCA}\"\n                  [disabled]=\"useStrictReadonlyForm || isEditing\"\n                  [(ngModel)]=\"enrollmentCA\"\n                  (change)=\"updateEnrollment()\"\n                  >\n                  @for (ca of cas; track ca) {\n                    <option [value]=\"ca.id\">{{ca.name}}</option>\n                  }\n                </select>\n              }\n              @if (enrollmentType === 'updb' && !isEditing) {\n                <input\n                  id=\"UPDBName\"\n                  class=\"form-field-input\"\n                  [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                  [(ngModel)]=\"enrollmentUPDB\"\n                  (keyup)=\"updateEnrollment()\"\n                  type=\"text\"\n                  maxlength=\"500\"\n                  placeholder=\"Enter a name\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  >\n              }\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Admin'\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced is-admin-container\"\n              >\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">IS ADMIN</div>\n                  <div\n                    (click)=\"toggleIsAdmin()\"\n                    [ngClass]=\"{ on: formData.isAdmin, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Hosting Cost'\"\n              [title2]=\"'Precedence'\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced\"\n              >\n              <input\n                class=\"form-field-input\"\n                [(ngModel)]=\"formData.defaultHostingCost\"\n                type=\"number\"\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n              <select\n                [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                id=\"hostingPrecedence\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"default\">Default</option>\n                <option value=\"required\">Required</option>\n                <option value=\"failed\">Failed</option>\n              </select>\n            </lib-form-field-container>\n            @for (tagElement of tagElements; track tagElement) {\n              <lib-form-field-container\n                [title]=\"tagElement.label\"\n                [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <div [innerHTML]=\"tagElement.content | safe\"></div>\n              </lib-form-field-container>\n            }\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n            <lib-form-field-container\n              [title]=\"'App Data'\"\n              [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n            </lib-form-field-container>\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (isEdit && (hasEnrolmentToken || hasAuthenticator)) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              [layout]=\"'column'\"\n              [contentStyle]=\"'z-index: 99999999'\"\n              >\n              <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Enrollment:</span>\n                  </div>\n                  @if (jwtExpired !== undefined && !showResetToken) {\n                    <span class=\"form-field-label info-text\"\n                      [class.expired-text]=\"jwtExpired\"\n                      >\n                      {{jwtExpired ? 'EXPIRED' : 'EXPIRES'}} {{expirationDate}}\n                    </span>\n                  }\n                </div>\n                @if (!useStrictReadonlyForm) {\n                <lib-qr-code\n                  [identity]=\"formData\"\n                  [jwt]=\"jwt\"\n                  [expiration]=\"enrollmentExpiration\"\n                  [authenticators]=\"formData.authenticators\"\n                  [type]=\"'identity'\"\n                  [canExpand]=\"true\"\n                  (doRefresh)=\"refreshIdentity(true)\"\n                ></lib-qr-code>\n                }\n              </div>\n            </lib-form-field-container>\n          }\n          @if (isEdit && !useStrictReadonlyForm) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              [layout]=\"'column'\"\n              [contentStyle]=\"'z-index: 99999999'\"\n              >\n              <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Enable / Disable:</span>\n                  </div>\n                </div>\n                @if (entityDisabled) {\n                  <div class=\"disable-identity-button-container\" (click)=\"enableIdentity()\">\n                    <div class=\"disable-identity-background\"></div>\n                    <button class=\"download-button disable-identity-button\">Enable Identity</button>\n                  </div>\n                }\n                @if (!entityDisabled) {\n                  <div class=\"disable-identity-button-container\" (click)=\"disableIdentity()\">\n                    <div class=\"disable-identity-background\"></div>\n                    <button class=\"download-button disable-identity-button\">Disable Identity</button>\n                  </div>\n                }\n              </div>\n              @if (!entityDisabled) {\n                <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Disable Until:</span>\n                    </div>\n                  </div>\n                  <div class=\"disable-identity-duration-container\">\n                    <select [(ngModel)]=\"disableDurationType\" id=\"DurationType\" class=\"form-field-dropdown\">\n                      <option value=\"indefinite\">Indefinite</option>\n                      <option value=\"pick-date\">Pick a Date & Time</option>\n                    </select>\n                    @if (disableDurationType === 'pick-date') {\n                      <div class=\"disable-identity-datetime-inputs\">\n                        <lib-date-time-picker\n                          class=\"disable-identity-date-time-picker\"\n                          [(ngModel)]=\"disableDuration\"\n                          [minDate]=\"minDate\"\n                          [closeOnDateSelect]=\"true\"\n                        ></lib-date-time-picker>\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </lib-form-field-container>\n          }\n          @if (formData.id && canReadRelated('services')) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n              >\n              <lib-preview-list\n                (itemSelected)=\"serviceSelected($event)\"\n                [clickable]=\"true\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"associatedServiceNames\"\n              ></lib-preview-list>\n              <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n              </div>\n            </lib-form-field-container>\n          }\n          @if (formData.id && canReadRelated('service-policies')) {\n            <lib-form-field-container\n              [title]=\"'Associated Service Policies'\"\n              [count]=\"associatedServicePolicies.length\"\n              [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n              >\n              <lib-preview-list\n                (itemSelected)=\"serviceSelected($event)\"\n                [clickable]=\"false\"\n                [isLoading]=\"servicePoliciesLoading\"\n                [allNames]=\"associatedServicePolicyNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"''\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.disable-identity-button-container{position:relative}.disable-identity-duration-container{display:flex;flex-direction:row;gap:var(--gapMedium);flex-wrap:wrap;width:100%;max-width:100%}.disable-identity-duration-container .form-field-dropdown{min-width:10rem;flex:1 1 10rem;width:100%;max-width:100%}.disable-identity-datetime-inputs{display:flex;flex-direction:row;gap:var(--gapMedium);align-items:center;flex:1 1 16.5rem;min-width:0;max-width:100%}.disable-identity-date-time-picker{width:100%;max-width:100%;min-width:0;flex:1 1 16.5rem}.disable-identity-background{width:100%;height:100%;position:absolute;background:var(--red);border-radius:var(--inputBorderRadius);filter:brightness(.95);height:var(--defaultInputHeight)}.disable-identity-button{background:transparent;border:none;position:relative;z-index:9999999;display:flex;align-items:center;justify-content:center;height:var(--defaultInputHeight)}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.info-text{color:var(--groupText)}.info-text.expired-text{color:var(--red)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .copy-text.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}.disable-identity-datetime-inputs{width:100%}.disable-identity-date-time-picker{flex:1 1 100%;width:100%;min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DateTimePickerComponent, selector: "lib-date-time-picker", inputs: ["minDate", "placeholder", "displayFormat", "ariaLabel", "closeOnDateSelect", "panelWidth"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"identity-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this identity\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Identity attributes'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n            >\n            <lib-tag-selector\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              (selectedRoleAttributesChange)=\"roleAttributesChanged($event)\"\n              [availableRoleAttributes]=\"identityRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Identities'\"\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          @if (canReadRelated('auth-policies')) {\n          <lib-form-field-container\n            [title]=\"'Auth Policy'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n            [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n            >\n            <select\n              [(ngModel)]=\"formData.authPolicyId\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"\">Select an Authentication Policy</option>\n              @for (policy of authPolicies; track policy) {\n                <option\n                  [value]=\"policy.id\"\n                  >\n                  {{ policy.name }}\n                </option>\n              }\n            </select>\n            <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">External ID</span>\n                </div>\n                <span class=\"form-field-label\">{{ useStrictReadonlyForm ? '' : 'OPTIONAL' }}</span>\n              </div>\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Optional External ID\"\n                [(ngModel)]=\"formData.externalId\"\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n            </div>\n          </lib-form-field-container>\n          }\n          <ng-content select=\"[slot=column-1-slot-2]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Enrollment Type'\"\n              [title2]=\"enrollmentTypeTitle\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                id=\"EnrollmentType\"\n                class=\"form-field-dropdown\"\n                [ngClass]=\"{disabled: isEditing}\"\n                [disabled]=\"useStrictReadonlyForm || isEditing\"\n                [(ngModel)]=\"enrollmentType\"\n                (change)=\"updateEnrollment()\"\n                >\n                <option value=\"ott\">One Time Token</option>\n                <option value=\"CA\" [hidden]=\"!canReadRelated('cas')\">Certificate Authority</option>\n                <option value=\"updb\">UPDB</option>\n                <option value=\"none\">None</option>\n              </select>\n              @if (enrollmentType === 'CA' && canReadRelated('cas')) {\n                <select\n                  id=\"CertAuthorities\"\n                  class=\"form-field-dropdown\"\n                  [ngClass]=\"{disabled: isEditing, error: errors.enrollmentCA}\"\n                  [disabled]=\"useStrictReadonlyForm || isEditing\"\n                  [(ngModel)]=\"enrollmentCA\"\n                  (change)=\"updateEnrollment()\"\n                  >\n                  @for (ca of cas; track ca) {\n                    <option [value]=\"ca.id\">{{ca.name}}</option>\n                  }\n                </select>\n              }\n              @if (enrollmentType === 'updb' && !isEditing) {\n                <input\n                  id=\"UPDBName\"\n                  class=\"form-field-input\"\n                  [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                  [(ngModel)]=\"enrollmentUPDB\"\n                  (keyup)=\"updateEnrollment()\"\n                  type=\"text\"\n                  maxlength=\"500\"\n                  placeholder=\"Enter a name\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  >\n              }\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Admin'\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced is-admin-container\"\n              >\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">IS ADMIN</div>\n                  <div\n                    (click)=\"toggleIsAdmin()\"\n                    [ngClass]=\"{ on: formData.isAdmin, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Hosting Cost'\"\n              [title2]=\"'Precedence'\"\n              [layout]=\"'row'\"\n              class=\"form-field-advanced\"\n              >\n              <input\n                class=\"form-field-input\"\n                [(ngModel)]=\"formData.defaultHostingCost\"\n                type=\"number\"\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n              <select\n                [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                id=\"hostingPrecedence\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"default\">Default</option>\n                <option value=\"required\">Required</option>\n                <option value=\"failed\">Failed</option>\n              </select>\n            </lib-form-field-container>\n            @for (tagElement of tagElements; track tagElement) {\n              <lib-form-field-container\n                [title]=\"tagElement.label\"\n                [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <div [innerHTML]=\"tagElement.content | safe\"></div>\n              </lib-form-field-container>\n            }\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n            <lib-form-field-container\n              [title]=\"'App Data'\"\n              [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n            </lib-form-field-container>\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (isEdit && (hasEnrolmentToken || hasAuthenticator)) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              [layout]=\"'column'\"\n              [contentStyle]=\"'z-index: 99999999'\"\n              >\n              <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Enrollment:</span>\n                  </div>\n                  @if (jwtExpired !== undefined && !showResetToken) {\n                    <span class=\"form-field-label info-text\"\n                      [class.expired-text]=\"jwtExpired\"\n                      >\n                      {{jwtExpired ? 'EXPIRED' : 'EXPIRES'}} {{expirationDate}}\n                    </span>\n                  }\n                </div>\n                @if (!useStrictReadonlyForm) {\n                <lib-qr-code\n                  [identity]=\"formData\"\n                  [jwt]=\"jwt\"\n                  [expiration]=\"enrollmentExpiration\"\n                  [authenticators]=\"formData.authenticators\"\n                  [type]=\"'identity'\"\n                  [canExpand]=\"true\"\n                  (doRefresh)=\"refreshIdentity(true)\"\n                ></lib-qr-code>\n                }\n              </div>\n            </lib-form-field-container>\n          }\n          @if (isEdit && !useStrictReadonlyForm) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              [layout]=\"'column'\"\n              [contentStyle]=\"'z-index: 99999999'\"\n              >\n              <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Enable / Disable:</span>\n                  </div>\n                </div>\n                @if (entityDisabled) {\n                  <div class=\"disable-identity-button-container\" (click)=\"enableIdentity()\">\n                    <div class=\"disable-identity-background\"></div>\n                    <button class=\"download-button disable-identity-button\">Enable Identity</button>\n                  </div>\n                }\n                @if (!entityDisabled) {\n                  <div class=\"disable-identity-button-container\" (click)=\"disableIdentity()\">\n                    <div class=\"disable-identity-background\"></div>\n                    <button class=\"download-button disable-identity-button\">Disable Identity</button>\n                  </div>\n                }\n              </div>\n              @if (!entityDisabled) {\n                <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Disable Until:</span>\n                    </div>\n                  </div>\n                  <div class=\"disable-identity-duration-container\">\n                    <select [(ngModel)]=\"disableDurationType\" id=\"DurationType\" class=\"form-field-dropdown\">\n                      <option value=\"indefinite\">Indefinite</option>\n                      <option value=\"pick-date\">Pick a Date & Time</option>\n                    </select>\n                    @if (disableDurationType === 'pick-date') {\n                      <div class=\"disable-identity-datetime-inputs\">\n                        <lib-date-time-picker\n                          class=\"disable-identity-date-time-picker\"\n                          [(ngModel)]=\"disableDuration\"\n                          [minDate]=\"minDate\"\n                          [closeOnDateSelect]=\"true\"\n                        ></lib-date-time-picker>\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </lib-form-field-container>\n          }\n          @if (formData.id && canReadRelated('services')) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n              >\n              <lib-preview-list\n                (itemSelected)=\"serviceSelected($event)\"\n                [clickable]=\"true\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"associatedServiceNames\"\n              ></lib-preview-list>\n              <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n              </div>\n            </lib-form-field-container>\n          }\n          @if (formData.id && canReadRelated('service-policies')) {\n            <lib-form-field-container\n              [title]=\"'Associated Service Policies'\"\n              [count]=\"associatedServicePolicies.length\"\n              [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n              >\n              <lib-preview-list\n                (itemSelected)=\"serviceSelected($event)\"\n                [clickable]=\"false\"\n                [isLoading]=\"servicePoliciesLoading\"\n                [allNames]=\"associatedServicePolicyNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"''\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.disable-identity-button-container{position:relative}.disable-identity-duration-container{display:flex;flex-direction:row;gap:var(--gapMedium);flex-wrap:wrap;width:100%;max-width:100%}.disable-identity-duration-container .form-field-dropdown{min-width:10rem;flex:1 1 10rem;width:100%;max-width:100%}.disable-identity-datetime-inputs{display:flex;flex-direction:row;gap:var(--gapMedium);align-items:center;flex:1 1 16.5rem;min-width:0;max-width:100%}.disable-identity-date-time-picker{width:100%;max-width:100%;min-width:0;flex:1 1 16.5rem}.disable-identity-background{width:100%;height:100%;position:absolute;background:var(--red);border-radius:var(--inputBorderRadius);filter:brightness(.95);height:var(--defaultInputHeight)}.disable-identity-button{background:transparent;border:none;position:relative;z-index:9999999;display:flex;align-items:center;justify-content:center;height:var(--defaultInputHeight)}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.info-text{color:var(--groupText)}.info-text.expired-text{color:var(--red)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .copy-text.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}.disable-identity-datetime-inputs{width:100%}.disable-identity-date-time-picker{flex:1 1 100%;width:100%;min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DateTimePickerComponent, selector: "lib-date-time-picker", inputs: ["minDate", "placeholder", "displayFormat", "ariaLabel", "closeOnDateSelect", "panelWidth"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IdentityFormComponent, decorators: [{
             type: Component,
@@ -19826,7 +19894,7 @@ class EdgeRouterFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EdgeRouterFormComponent, decorators: [{
             type: Component,
@@ -20904,7 +20972,7 @@ class ServiceFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"returnToListPage()\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container [title]=\"'Service Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n              class=\"form-field-input\"\n              placeholder=\"Name this Service\"\n              [ngClass]=\"{error: svc.errors['name']}\"\n              [(ngModel)]=\"formData.name\"\n              autofocus\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Service attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"serviceRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Services'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        @if (!useStrictReadonlyForm && canCreateConfig) {\n          <lib-form-field-container\n            [title]=\"'Add Configurations'\"\n            (actionRequested)=\"attachConfig()\"\n            (keyup.enter)=\"captureConfigEnterEvent($event)\"\n            [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n            >\n            <div class=\"form-field-input-group\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Select a Config</span>\n              </div>\n              <select\n                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                (change)=\"configTypeChanged($event)\"\n                id=\"SelectedConfigType\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n              <option value=\"\">Select configuration type...</option>\n              @for (type of svc.configTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n            <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n              <lib-filter-select\n                placeholder=\"Select configuration...\"\n                optionLabel=\"name\"\n                optionValue=\"id\"\n                [options]=\"svc.filteredConfigs\"\n                [showClear]=\"true\"\n                [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                (selectionChange)=\"configChanged($event)\"\n                (filterChange)=\"configFilterChangedDebounced($event)\"\n                [(ngModel)]=\"svc.selectedConfigId\"\n              ></lib-filter-select>\n            </div>\n            @if (!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview') {\n              <div class=\"button-row-right\" >\n                <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                  {{svc.attachLabel}}\n                </div>\n              </div>\n            }\n            <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n              @if (showConfigData) {\n                <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                  <span class=\"form-field-title\">Config Name</span>\n                  @if (svc.selectedConfigId !== 'preview') {\n                    <div\n                      class=\"save-button\"\n                      (click)=\"attachConfig()\"\n                      >{{svc.attachLabel}}\n                    </div>\n                  }\n                </div>\n              }\n              @if (showConfigData) {\n                  <input\n                    [(ngModel)]=\"svc.newConfigName\"\n                    class=\"form-field-input\"\n                    [placeholder]=\"'New Config Name'\"\n                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                    style=\"margin-bottom: 20px;\"\n                    />\n              }\n              <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                <span class=\"form-field-title\">Configuration Data</span>\n                @if (svc.selectedConfigId !== 'preview') {\n                  <div class=\"form-header-toggle-container\">\n                    <span\n                      class=\"toggle-option-text\"\n                      [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                      (click)=\"svc.toggleJSONView()\"\n                      >\n                      FORM\n                    </span>\n                    <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                      <div\n                        class=\"form-toggle-switch\"\n                        [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                        >\n                        <div class=\"form-toggle-indicator\"></div>\n                        <div class=\"form-toggle-indicator\"></div>\n                      </div>\n                    </div>\n                    <span\n                      class=\"toggle-option-text\"\n                      [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                      (click)=\"svc.toggleJSONView()\"\n                      >\n                      JSON\n                    </span>\n                  </div>\n                }\n              </div>\n              <lib-config-editor\n                [(configData)]=\"svc.configData\"\n                [schema]=\"svc.selectedSchema\"\n                [showJsonView]=\"svc.configJsonView\"\n                [(configErrors)]=\"svc.configErrors\"\n                #configEditor\n              ></lib-config-editor>\n            </div>\n          </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore) {\n          <div class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Terminator Strategy'\"\n              [title2]=\"'Encryption'\"\n              [layout]=\"'row'\"\n              [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n              [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                [(ngModel)]=\"formData.terminatorStrategy\"\n                id=\"authPolicyId\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"\">Select a Strategy....</option>\n                @for (strat of strategies; track strat) {\n                  <option\n                    [value]=\"strat.id\"\n                    >\n                    {{ strat.label }}\n                  </option>\n                }\n              </select>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Require Encryption</div>\n                  <div\n                    (click)=\"toggleEncryptionRequired()\"\n                    [ngClass]=\"{ on: formData.encryptionRequired, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Custom Tags'\"\n              [label]=\"'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          </div>\n        }\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Associated Entities'\"\n          [label]=\"'click item to view details'\"\n          [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n          [class]=\"'no-gap'\"\n          >\n          @if (canReadRelated('configs')) {\n            <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Configurations</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedConfigsLoading\"\n              [allNames]=\"svc.addedConfigs\"\n              [allowRemove]=\"!useStrictReadonlyForm\"\n              [clickable]=\"true\"\n              [tooltip]=\"'View Config'\"\n              [showfilter]=\"false\"\n              (itemRemoved)=\"svc.removeConfig($event)\"\n              (itemSelected)=\"svc.previewConfig($event, router)\"\n            ></lib-preview-list>\n          }\n          @if (canReadRelated('service-policies')) {\n            <div class=\"form-row space-between\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Service Policies</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedServicePoliciesLoading\"\n              [clickable]=\"true\"\n              (itemSelected)=\"svc.previewPolicy($event, router)\"\n              [tooltip]=\"'View Service Policy'\"\n              [allNames]=\"svc.associatedServicePolicies\"\n              [showfilter]=\"svc.showServicePoliciesFilter\"\n              [localFilter]=\"false\"\n              (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n            ></lib-preview-list>\n          }\n          <div class=\"form-row space-between\">\n            <div class=\"config-title-row\">\n              <span class=\"form-field-title\">Terminators</span>\n            </div>\n            <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n          </div>\n          <lib-preview-list\n            [isLoading]=\"svc.associatedTerminatorsLoading\"\n            [clickable]=\"true\"\n            (itemSelected)=\"svc.previewTerminator($event, router)\"\n            [tooltip]=\"'View Terminator'\"\n            [allNames]=\"svc.associatedTerminators\"\n            [showfilter]=\"false\"\n            [showfilter]=\"svc.showTerminatorsFilter\"\n            [localFilter]=\"false\"\n            (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n          ></lib-preview-list>\n        </lib-form-field-container>\n        <!--                <lib-form-field-container\n        *ngIf=\"formData.id\"\n        [title]=\"'Associated Service Policies'\"\n        [count]=\"svc.associatedServicePolicies.length\"\n        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n        >\n      </lib-form-field-container>-->\n      @if (showApiCalls) {\n        <lib-form-field-container\n          [title]=\"'API Calls'\"\n          [label]=\"''\"\n          [class]=\"'api-call-container'\"\n          [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n          >\n          <div class=\"form-row\">\n            <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n            <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n          </div>\n          @if (formData) {\n            <lib-json-view [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n          }\n        </lib-form-field-container>\n      }\n    </div>\n  </div>\n  @if (formView === 'raw') {\n    <div class=\"form-group-column\">\n      @if (formData) {\n        <lib-json-view [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n      }\n    </div>\n  }\n</div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["readOnly", "configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }] }); }
+        ], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"returnToListPage()\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container [title]=\"'Service Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n              class=\"form-field-input\"\n              placeholder=\"Name this Service\"\n              [ngClass]=\"{error: svc.errors['name']}\"\n              [(ngModel)]=\"formData.name\"\n              autofocus\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Service attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"serviceRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Services'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        @if (!useStrictReadonlyForm && canCreateConfig) {\n          <lib-form-field-container\n            [title]=\"'Add Configurations'\"\n            (actionRequested)=\"attachConfig()\"\n            (keyup.enter)=\"captureConfigEnterEvent($event)\"\n            [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n            >\n            <div class=\"form-field-input-group\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Select a Config</span>\n              </div>\n              <select\n                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                (change)=\"configTypeChanged($event)\"\n                id=\"SelectedConfigType\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n              <option value=\"\">Select configuration type...</option>\n              @for (type of svc.configTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n            <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n              <lib-filter-select\n                placeholder=\"Select configuration...\"\n                optionLabel=\"name\"\n                optionValue=\"id\"\n                [options]=\"svc.filteredConfigs\"\n                [showClear]=\"true\"\n                [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                (selectionChange)=\"configChanged($event)\"\n                (filterChange)=\"configFilterChangedDebounced($event)\"\n                [(ngModel)]=\"svc.selectedConfigId\"\n              ></lib-filter-select>\n            </div>\n            @if (!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview') {\n              <div class=\"button-row-right\" >\n                <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                  {{svc.attachLabel}}\n                </div>\n              </div>\n            }\n            <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n              @if (showConfigData) {\n                <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                  <span class=\"form-field-title\">Config Name</span>\n                  @if (svc.selectedConfigId !== 'preview') {\n                    <div\n                      class=\"save-button\"\n                      (click)=\"attachConfig()\"\n                      >{{svc.attachLabel}}\n                    </div>\n                  }\n                </div>\n              }\n              @if (showConfigData) {\n                  <input\n                    [(ngModel)]=\"svc.newConfigName\"\n                    class=\"form-field-input\"\n                    [placeholder]=\"'New Config Name'\"\n                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                    style=\"margin-bottom: 20px;\"\n                    />\n              }\n              <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                <span class=\"form-field-title\">Configuration Data</span>\n                @if (svc.selectedConfigId !== 'preview') {\n                  <div class=\"form-header-toggle-container\">\n                    <span\n                      class=\"toggle-option-text\"\n                      [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                      (click)=\"svc.toggleJSONView()\"\n                      >\n                      FORM\n                    </span>\n                    <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                      <div\n                        class=\"form-toggle-switch\"\n                        [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                        >\n                        <div class=\"form-toggle-indicator\"></div>\n                        <div class=\"form-toggle-indicator\"></div>\n                      </div>\n                    </div>\n                    <span\n                      class=\"toggle-option-text\"\n                      [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                      (click)=\"svc.toggleJSONView()\"\n                      >\n                      JSON\n                    </span>\n                  </div>\n                }\n              </div>\n              <lib-config-editor\n                [(configData)]=\"svc.configData\"\n                [schema]=\"svc.selectedSchema\"\n                [showJsonView]=\"svc.configJsonView\"\n                [(configErrors)]=\"svc.configErrors\"\n                #configEditor\n              ></lib-config-editor>\n            </div>\n          </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore) {\n          <div class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Terminator Strategy'\"\n              [title2]=\"'Encryption'\"\n              [layout]=\"'row'\"\n              [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n              [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                [(ngModel)]=\"formData.terminatorStrategy\"\n                id=\"authPolicyId\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"\">Select a Strategy....</option>\n                @for (strat of strategies; track strat) {\n                  <option\n                    [value]=\"strat.id\"\n                    >\n                    {{ strat.label }}\n                  </option>\n                }\n              </select>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Require Encryption</div>\n                  <div\n                    (click)=\"toggleEncryptionRequired()\"\n                    [ngClass]=\"{ on: formData.encryptionRequired, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Max Idle Time'\"\n              [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <input\n                type=\"number\"\n                class=\"form-field-input\"\n                min=\"0\"\n                step=\"1\"\n                placeholder=\"0\"\n                [(ngModel)]=\"formData.maxIdleTimeMillis\"\n                [disabled]=\"useStrictReadonlyForm\"\n                id=\"MaxIdleTimeMillis\"\n                />\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Custom Tags'\"\n              [label]=\"'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          </div>\n        }\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Associated Entities'\"\n          [label]=\"'click item to view details'\"\n          [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n          [class]=\"'no-gap'\"\n          >\n          @if (canReadRelated('configs')) {\n            <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Configurations</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedConfigsLoading\"\n              [allNames]=\"svc.addedConfigs\"\n              [allowRemove]=\"!useStrictReadonlyForm\"\n              [clickable]=\"true\"\n              [tooltip]=\"'View Config'\"\n              [showfilter]=\"false\"\n              (itemRemoved)=\"svc.removeConfig($event)\"\n              (itemSelected)=\"svc.previewConfig($event, router)\"\n            ></lib-preview-list>\n          }\n          @if (canReadRelated('service-policies')) {\n            <div class=\"form-row space-between\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Service Policies</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedServicePoliciesLoading\"\n              [clickable]=\"true\"\n              (itemSelected)=\"svc.previewPolicy($event, router)\"\n              [tooltip]=\"'View Service Policy'\"\n              [allNames]=\"svc.associatedServicePolicies\"\n              [showfilter]=\"svc.showServicePoliciesFilter\"\n              [localFilter]=\"false\"\n              (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n            ></lib-preview-list>\n          }\n          <div class=\"form-row space-between\">\n            <div class=\"config-title-row\">\n              <span class=\"form-field-title\">Terminators</span>\n            </div>\n            <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n          </div>\n          <lib-preview-list\n            [isLoading]=\"svc.associatedTerminatorsLoading\"\n            [clickable]=\"true\"\n            (itemSelected)=\"svc.previewTerminator($event, router)\"\n            [tooltip]=\"'View Terminator'\"\n            [allNames]=\"svc.associatedTerminators\"\n            [showfilter]=\"false\"\n            [showfilter]=\"svc.showTerminatorsFilter\"\n            [localFilter]=\"false\"\n            (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n          ></lib-preview-list>\n        </lib-form-field-container>\n        <!--                <lib-form-field-container\n        *ngIf=\"formData.id\"\n        [title]=\"'Associated Service Policies'\"\n        [count]=\"svc.associatedServicePolicies.length\"\n        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n        >\n      </lib-form-field-container>-->\n      @if (showApiCalls) {\n        <lib-form-field-container\n          [title]=\"'API Calls'\"\n          [label]=\"''\"\n          [class]=\"'api-call-container'\"\n          [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n          >\n          <div class=\"form-row\">\n            <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n            <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n          </div>\n          @if (formData) {\n            <lib-json-view [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n          }\n        </lib-form-field-container>\n      }\n    </div>\n  </div>\n  @if (formView === 'raw') {\n    <div class=\"form-group-column\">\n      @if (formData) {\n        <lib-json-view [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n      }\n    </div>\n  }\n</div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["readOnly", "configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServiceFormComponent, decorators: [{
             type: Component,
@@ -20913,7 +20981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"returnToListPage()\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container [title]=\"'Service Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n              class=\"form-field-input\"\n              placeholder=\"Name this Service\"\n              [ngClass]=\"{error: svc.errors['name']}\"\n              [(ngModel)]=\"formData.name\"\n              autofocus\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Service attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"serviceRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Services'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        @if (!useStrictReadonlyForm && canCreateConfig) {\n          <lib-form-field-container\n            [title]=\"'Add Configurations'\"\n            (actionRequested)=\"attachConfig()\"\n            (keyup.enter)=\"captureConfigEnterEvent($event)\"\n            [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n            >\n            <div class=\"form-field-input-group\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Select a Config</span>\n              </div>\n              <select\n                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                (change)=\"configTypeChanged($event)\"\n                id=\"SelectedConfigType\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n              <option value=\"\">Select configuration type...</option>\n              @for (type of svc.configTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n            <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n              <lib-filter-select\n                placeholder=\"Select configuration...\"\n                optionLabel=\"name\"\n                optionValue=\"id\"\n                [options]=\"svc.filteredConfigs\"\n                [showClear]=\"true\"\n                [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                (selectionChange)=\"configChanged($event)\"\n                (filterChange)=\"configFilterChangedDebounced($event)\"\n                [(ngModel)]=\"svc.selectedConfigId\"\n              ></lib-filter-select>\n            </div>\n            @if (!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview') {\n              <div class=\"button-row-right\" >\n                <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                  {{svc.attachLabel}}\n                </div>\n              </div>\n            }\n            <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n              @if (showConfigData) {\n                <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                  <span class=\"form-field-title\">Config Name</span>\n                  @if (svc.selectedConfigId !== 'preview') {\n                    <div\n                      class=\"save-button\"\n                      (click)=\"attachConfig()\"\n                      >{{svc.attachLabel}}\n                    </div>\n                  }\n                </div>\n              }\n              @if (showConfigData) {\n                  <input\n                    [(ngModel)]=\"svc.newConfigName\"\n                    class=\"form-field-input\"\n                    [placeholder]=\"'New Config Name'\"\n                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                    style=\"margin-bottom: 20px;\"\n                    />\n              }\n              <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                <span class=\"form-field-title\">Configuration Data</span>\n                @if (svc.selectedConfigId !== 'preview') {\n                  <div class=\"form-header-toggle-container\">\n                    <span\n                      class=\"toggle-option-text\"\n                      [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                      (click)=\"svc.toggleJSONView()\"\n                      >\n                      FORM\n                    </span>\n                    <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                      <div\n                        class=\"form-toggle-switch\"\n                        [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                        >\n                        <div class=\"form-toggle-indicator\"></div>\n                        <div class=\"form-toggle-indicator\"></div>\n                      </div>\n                    </div>\n                    <span\n                      class=\"toggle-option-text\"\n                      [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                      (click)=\"svc.toggleJSONView()\"\n                      >\n                      JSON\n                    </span>\n                  </div>\n                }\n              </div>\n              <lib-config-editor\n                [(configData)]=\"svc.configData\"\n                [schema]=\"svc.selectedSchema\"\n                [showJsonView]=\"svc.configJsonView\"\n                [(configErrors)]=\"svc.configErrors\"\n                #configEditor\n              ></lib-config-editor>\n            </div>\n          </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore) {\n          <div class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Terminator Strategy'\"\n              [title2]=\"'Encryption'\"\n              [layout]=\"'row'\"\n              [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n              [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                [(ngModel)]=\"formData.terminatorStrategy\"\n                id=\"authPolicyId\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"\">Select a Strategy....</option>\n                @for (strat of strategies; track strat) {\n                  <option\n                    [value]=\"strat.id\"\n                    >\n                    {{ strat.label }}\n                  </option>\n                }\n              </select>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Require Encryption</div>\n                  <div\n                    (click)=\"toggleEncryptionRequired()\"\n                    [ngClass]=\"{ on: formData.encryptionRequired, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Custom Tags'\"\n              [label]=\"'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          </div>\n        }\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Associated Entities'\"\n          [label]=\"'click item to view details'\"\n          [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n          [class]=\"'no-gap'\"\n          >\n          @if (canReadRelated('configs')) {\n            <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Configurations</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedConfigsLoading\"\n              [allNames]=\"svc.addedConfigs\"\n              [allowRemove]=\"!useStrictReadonlyForm\"\n              [clickable]=\"true\"\n              [tooltip]=\"'View Config'\"\n              [showfilter]=\"false\"\n              (itemRemoved)=\"svc.removeConfig($event)\"\n              (itemSelected)=\"svc.previewConfig($event, router)\"\n            ></lib-preview-list>\n          }\n          @if (canReadRelated('service-policies')) {\n            <div class=\"form-row space-between\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Service Policies</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedServicePoliciesLoading\"\n              [clickable]=\"true\"\n              (itemSelected)=\"svc.previewPolicy($event, router)\"\n              [tooltip]=\"'View Service Policy'\"\n              [allNames]=\"svc.associatedServicePolicies\"\n              [showfilter]=\"svc.showServicePoliciesFilter\"\n              [localFilter]=\"false\"\n              (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n            ></lib-preview-list>\n          }\n          <div class=\"form-row space-between\">\n            <div class=\"config-title-row\">\n              <span class=\"form-field-title\">Terminators</span>\n            </div>\n            <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n          </div>\n          <lib-preview-list\n            [isLoading]=\"svc.associatedTerminatorsLoading\"\n            [clickable]=\"true\"\n            (itemSelected)=\"svc.previewTerminator($event, router)\"\n            [tooltip]=\"'View Terminator'\"\n            [allNames]=\"svc.associatedTerminators\"\n            [showfilter]=\"false\"\n            [showfilter]=\"svc.showTerminatorsFilter\"\n            [localFilter]=\"false\"\n            (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n          ></lib-preview-list>\n        </lib-form-field-container>\n        <!--                <lib-form-field-container\n        *ngIf=\"formData.id\"\n        [title]=\"'Associated Service Policies'\"\n        [count]=\"svc.associatedServicePolicies.length\"\n        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n        >\n      </lib-form-field-container>-->\n      @if (showApiCalls) {\n        <lib-form-field-container\n          [title]=\"'API Calls'\"\n          [label]=\"''\"\n          [class]=\"'api-call-container'\"\n          [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n          >\n          <div class=\"form-row\">\n            <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n            <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n          </div>\n          @if (formData) {\n            <lib-json-view [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n          }\n        </lib-form-field-container>\n      }\n    </div>\n  </div>\n  @if (formView === 'raw') {\n    <div class=\"form-group-column\">\n      @if (formData) {\n        <lib-json-view [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n      }\n    </div>\n  }\n</div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"] }]
+                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"returnToListPage()\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container [title]=\"'Service Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n              class=\"form-field-input\"\n              placeholder=\"Name this Service\"\n              [ngClass]=\"{error: svc.errors['name']}\"\n              [(ngModel)]=\"formData.name\"\n              autofocus\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Service attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"serviceRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Services'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        @if (!useStrictReadonlyForm && canCreateConfig) {\n          <lib-form-field-container\n            [title]=\"'Add Configurations'\"\n            (actionRequested)=\"attachConfig()\"\n            (keyup.enter)=\"captureConfigEnterEvent($event)\"\n            [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n            >\n            <div class=\"form-field-input-group\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Select a Config</span>\n              </div>\n              <select\n                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                (change)=\"configTypeChanged($event)\"\n                id=\"SelectedConfigType\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n              <option value=\"\">Select configuration type...</option>\n              @for (type of svc.configTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n            <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n              <lib-filter-select\n                placeholder=\"Select configuration...\"\n                optionLabel=\"name\"\n                optionValue=\"id\"\n                [options]=\"svc.filteredConfigs\"\n                [showClear]=\"true\"\n                [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                (selectionChange)=\"configChanged($event)\"\n                (filterChange)=\"configFilterChangedDebounced($event)\"\n                [(ngModel)]=\"svc.selectedConfigId\"\n              ></lib-filter-select>\n            </div>\n            @if (!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview') {\n              <div class=\"button-row-right\" >\n                <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                  {{svc.attachLabel}}\n                </div>\n              </div>\n            }\n            <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n              @if (showConfigData) {\n                <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                  <span class=\"form-field-title\">Config Name</span>\n                  @if (svc.selectedConfigId !== 'preview') {\n                    <div\n                      class=\"save-button\"\n                      (click)=\"attachConfig()\"\n                      >{{svc.attachLabel}}\n                    </div>\n                  }\n                </div>\n              }\n              @if (showConfigData) {\n                  <input\n                    [(ngModel)]=\"svc.newConfigName\"\n                    class=\"form-field-input\"\n                    [placeholder]=\"'New Config Name'\"\n                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                    style=\"margin-bottom: 20px;\"\n                    />\n              }\n              <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                <span class=\"form-field-title\">Configuration Data</span>\n                @if (svc.selectedConfigId !== 'preview') {\n                  <div class=\"form-header-toggle-container\">\n                    <span\n                      class=\"toggle-option-text\"\n                      [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                      (click)=\"svc.toggleJSONView()\"\n                      >\n                      FORM\n                    </span>\n                    <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                      <div\n                        class=\"form-toggle-switch\"\n                        [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                        >\n                        <div class=\"form-toggle-indicator\"></div>\n                        <div class=\"form-toggle-indicator\"></div>\n                      </div>\n                    </div>\n                    <span\n                      class=\"toggle-option-text\"\n                      [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                      (click)=\"svc.toggleJSONView()\"\n                      >\n                      JSON\n                    </span>\n                  </div>\n                }\n              </div>\n              <lib-config-editor\n                [(configData)]=\"svc.configData\"\n                [schema]=\"svc.selectedSchema\"\n                [showJsonView]=\"svc.configJsonView\"\n                [(configErrors)]=\"svc.configErrors\"\n                #configEditor\n              ></lib-config-editor>\n            </div>\n          </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore) {\n          <div class=\"form-group-column\">\n            <lib-form-field-container\n              [title]=\"'Terminator Strategy'\"\n              [title2]=\"'Encryption'\"\n              [layout]=\"'row'\"\n              [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n              [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n              class=\"form-field-advanced\"\n              >\n              <select\n                [(ngModel)]=\"formData.terminatorStrategy\"\n                id=\"authPolicyId\"\n                class=\"form-field-dropdown\"\n                [disabled]=\"useStrictReadonlyForm\"\n                >\n                <option value=\"\">Select a Strategy....</option>\n                @for (strat of strategies; track strat) {\n                  <option\n                    [value]=\"strat.id\"\n                    >\n                    {{ strat.label }}\n                  </option>\n                }\n              </select>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Require Encryption</div>\n                  <div\n                    (click)=\"toggleEncryptionRequired()\"\n                    [ngClass]=\"{ on: formData.encryptionRequired, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Max Idle Time'\"\n              [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <input\n                type=\"number\"\n                class=\"form-field-input\"\n                min=\"0\"\n                step=\"1\"\n                placeholder=\"0\"\n                [(ngModel)]=\"formData.maxIdleTimeMillis\"\n                [disabled]=\"useStrictReadonlyForm\"\n                id=\"MaxIdleTimeMillis\"\n                />\n            </lib-form-field-container>\n            <lib-form-field-container\n              [title]=\"'Custom Tags'\"\n              [label]=\"'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          </div>\n        }\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Associated Entities'\"\n          [label]=\"'click item to view details'\"\n          [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n          [class]=\"'no-gap'\"\n          >\n          @if (canReadRelated('configs')) {\n            <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Configurations</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedConfigsLoading\"\n              [allNames]=\"svc.addedConfigs\"\n              [allowRemove]=\"!useStrictReadonlyForm\"\n              [clickable]=\"true\"\n              [tooltip]=\"'View Config'\"\n              [showfilter]=\"false\"\n              (itemRemoved)=\"svc.removeConfig($event)\"\n              (itemSelected)=\"svc.previewConfig($event, router)\"\n            ></lib-preview-list>\n          }\n          @if (canReadRelated('service-policies')) {\n            <div class=\"form-row space-between\">\n              <div class=\"config-title-row\">\n                <span class=\"form-field-title\">Service Policies</span>\n              </div>\n              <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n            </div>\n            <lib-preview-list\n              [isLoading]=\"svc.associatedServicePoliciesLoading\"\n              [clickable]=\"true\"\n              (itemSelected)=\"svc.previewPolicy($event, router)\"\n              [tooltip]=\"'View Service Policy'\"\n              [allNames]=\"svc.associatedServicePolicies\"\n              [showfilter]=\"svc.showServicePoliciesFilter\"\n              [localFilter]=\"false\"\n              (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n            ></lib-preview-list>\n          }\n          <div class=\"form-row space-between\">\n            <div class=\"config-title-row\">\n              <span class=\"form-field-title\">Terminators</span>\n            </div>\n            <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n          </div>\n          <lib-preview-list\n            [isLoading]=\"svc.associatedTerminatorsLoading\"\n            [clickable]=\"true\"\n            (itemSelected)=\"svc.previewTerminator($event, router)\"\n            [tooltip]=\"'View Terminator'\"\n            [allNames]=\"svc.associatedTerminators\"\n            [showfilter]=\"false\"\n            [showfilter]=\"svc.showTerminatorsFilter\"\n            [localFilter]=\"false\"\n            (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n          ></lib-preview-list>\n        </lib-form-field-container>\n        <!--                <lib-form-field-container\n        *ngIf=\"formData.id\"\n        [title]=\"'Associated Service Policies'\"\n        [count]=\"svc.associatedServicePolicies.length\"\n        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n        >\n      </lib-form-field-container>-->\n      @if (showApiCalls) {\n        <lib-form-field-container\n          [title]=\"'API Calls'\"\n          [label]=\"''\"\n          [class]=\"'api-call-container'\"\n          [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n          >\n          <div class=\"form-row\">\n            <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n            <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n          </div>\n          @if (formData) {\n            <lib-json-view [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n          }\n        </lib-form-field-container>\n      }\n    </div>\n  </div>\n  @if (formView === 'raw') {\n    <div class=\"form-group-column\">\n      @if (formData) {\n        <lib-json-view [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n      }\n    </div>\n  }\n</div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -22285,7 +22353,7 @@ class SimpleServiceComponent extends ProjectableForm {
     clear() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SimpleServiceComponent, deps: [{ token: SETTINGS_SERVICE }, { token: ServiceFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: SERVICE_EXTENSION_SERVICE }, { token: i5.MatDialog }, { token: ValidationService }, { token: ServicesPageService }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SimpleServiceComponent, isStandalone: false, selector: "lib-simple-service", inputs: { serviceRoleAttributes: "serviceRoleAttributes", identityRoleAttributes: "identityRoleAttributes", identityNamedAttributes: "identityNamedAttributes", formData: "formData" }, outputs: { close: "close", selected: "selected" }, usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper simple-service-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(true, false, 'cards', $event)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"isEdit ? 'Edit Simple Service' : 'Create a Simple Service'\"\n    [actionButtonText]=\"'Save'\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [moreActions]=\"moreActions\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n  ></lib-form-header>\n\n  <div class=\"simple-service-form-container projectable-form-container\" #formContainer>\n    @if (showForm) {\n      <div class=\"form-group-column three-fifths\">\n        <div  id=\"InlineServiceArea\" class=\"anyadd\">\n          <div class=\"simple-service-inputs\">\n            <lib-form-field-container [title]=\"'Service Details'\">\n              <div class=\"form-field-input-group service-group\">\n                <div class=\"form-field-sub-group\">\n                  <div class=\"config-title-row\">\n                    <span class=\"form-field-title\">Service Name</span>\n                  </div>\n                  @if (!useStrictReadonlyForm) {\n                    <input\n                    class=\"form-field-input\"\n                    placeholder=\"Name this service\"\n                    autofocus\n                    #nameFieldInput\n                    [ngClass]=\"{error: errors.name}\"\n                    [(ngModel)]=\"serviceApiData.name\"\n                    (keyup)=\"serviceNameChanged($event)\"\n                    (change)=\"validateServiceName()\"\n                    />\n                  } @else {\n                    <div class=\"form-field-readonly-value\">{{ serviceApiData.name }}</div>\n                  }\n                </div>\n                <div class=\"form-field-sub-group\">\n                  <div class=\"config-title-row\">\n                    <span class=\"form-field-title\">SELECT OR CREATE SERVICE ATTRIBUTES</span>\n                  </div>\n                  <lib-tag-selector\n                    [disableField]=\"useStrictReadonlyForm\"\n                    [disableCreate]=\"useStrictReadonlyForm\"\n                    [(selectedRoleAttributes)]=\"serviceApiData.roleAttributes\"\n                    [availableRoleAttributes]=\"serviceRoleAttributes\"\n                    [placeholder]=\"'Add attributes to group services'\"\n                  ></lib-tag-selector>\n                </div>\n              </div>\n            </lib-form-field-container>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showForm) {\n      <div class=\"simple-service-center-content\">\n        <div class=\"form-group-row\">\n          <lib-form-field-container\n            [title]=\"'ACCESSING CONFIGURATION'\"\n            [contentStyle]=\"'z-index: 10001'\"\n            [helpText]=\"'How will client applications use this service? Specify an address and port, or use the &quot;SDK Only&quot; toggle for an application embedded configuration.'\"\n            >\n            <div class=\"form-field-input-group accessing-group\">\n              @if (canReadRelated('identities')) {\n              <div class=\"form-field-sub-group\">\n                <div class=\"config-title-row\">\n                  <span class=\"form-field-title\">What identities can access this service?</span>\n                </div>\n                <lib-tag-selector\n                  [disableField]=\"useStrictReadonlyForm\"\n                  [disableCreate]=\"useStrictReadonlyForm\"\n                  [(selectedNamedAttributes)]=\"dialPolicyNamedAttributes\"\n                  [(selectedRoleAttributes)]=\"dialPolicyRoleAttributes\"\n                  [availableNamedAttributes]=\"identityNamedAttributes\"\n                  [availableRoleAttributes]=\"identityRoleAttributes\"\n                  [placeholder]=\"'Select identity attributes to grant access'\"\n                  [hasError]=\"errors.dialIdentities\"\n                  (selectedNamedAttributesChange)=\"validateDialIdentities()\"\n                  (selectedRoleAttributesChange)=\"validateDialIdentities()\"\n                  (filterChange)=\"getIdentityNamedAttributes($event)\"\n                ></lib-tag-selector>\n              </div>\n              }\n              <div class=\"form-field-sub-group\">\n                <div class=\"config-title-row\">\n                  <span class=\"form-field-title\">How will the service be accessed?</span>\n                </div>\n                <div class=\"grid addressPort\">\n                  <div class=\"config-item-container\">\n                    <span class=\"config-item-label\">SDK ONLY</span>\n                    <div\n                      class=\"sdk-toggle form-field-toggle\"\n                      >\n                      <div class=\"switchGrid\">\n                        <div>\n                          <div\n                            (click)=\"toggleSdkOnlyDial()\"\n                            [ngClass]=\"{ on: sdkOnlyDial }\"\n                            class=\"toggle\"\n                            >\n                            <span [hidden]=\"!sdkOnlyDial\" class=\"on-label\">YES</span>\n                            <span [hidden]=\"sdkOnlyDial\" class=\"off-label\">NO</span>\n                            <div class=\"switch\"></div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n                    <div class=\"config-hostname-label\">\n                      <span class=\"config-item-label\">Address</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Accessing hostnames must include a '.'\"\n                        matTooltipPosition=\"above\"\n                      ></div>\n                      @if (errors.interceptAddressFormat) {\n                        <span class=\"error-label\">Accessing address must include a '.'</span>\n                      }\n                    </div>\n                    <input id=\"HowTo\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateInterceptAddress()\" [ngClass]=\"{error: errors.interceptAddress}\" [placeholder]=\"sdkOnlyDial ? '' : 'e.g. myservice.ziti'\" [ngModel]=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0]\" (ngModelChange)=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0] = $event\"/>\n                  </div>\n                  <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n                    <span class=\"config-item-label\">PORT</span>\n                    <input id=\"HowToPort\" type=\"number\" maxlength=\"10\" (change)=\"validateInterceptPort()\" [ngClass]=\"{error: errors.interceptPort}\" [placeholder]=\"sdkOnlyDial ? '' : 443\" (keyup)=\"interceptPortChanged($event)\" [ngModel]=\"sdkOnlyDial ? '' : interceptPort\" (ngModelChange)=\"sdkOnlyDial ? '' : interceptPort = $event\"/>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'HOSTING CONFIGURATION'\"\n            [contentStyle]=\"'z-index: 10000'\"\n            [helpText]=\"'Where should traffic for this service be sent? Specify a protocol, address, and port, or use the &quot;SDK Only&quot; toggle for an application embedded configuration.'\"\n            >\n            <div class=\"form-field-input-group hosting-group\">\n              @if (canReadRelated('identities')) {\n              <div class=\"form-field-sub-group\">\n                <div class=\"config-title-row\">\n                  <span class=\"form-field-title\">What identities can host this service?</span>\n                </div>\n                <lib-tag-selector\n                  [disableField]=\"useStrictReadonlyForm\"\n                  [disableCreate]=\"useStrictReadonlyForm\"\n                  [(selectedNamedAttributes)]=\"bindPolicyNamedAttributes\"\n                  [(selectedRoleAttributes)]=\"bindPolicyRoleAttributes\"\n                  [availableNamedAttributes]=\"identityNamedAttributes\"\n                  [availableRoleAttributes]=\"identityRoleAttributes\"\n                  [placeholder]=\"'Select identity attributes'\"\n                  [hasError]=\"errors.bindIdentities\"\n                  (selectedNamedAttributesChange)=\"validateBindIdentities()\"\n                  (selectedRoleAttributesChange)=\"validateBindIdentities()\"\n                  (filterChange)=\"getIdentityNamedAttributes($event)\"\n                ></lib-tag-selector>\n              </div>\n              }\n              <div class=\"form-field-sub-group\">\n                <div class=\"config-title-row\">\n                  <span class=\"form-field-title\">Where should traffic be sent?</span>\n                </div>\n                <div class=\"grid addressFull\">\n                  <div class=\"config-item-container\">\n                    <span class=\"config-item-label\">SDK ONLY</span>\n                    <div\n                      class=\"sdk-toggle form-field-toggle\"\n                      >\n                      <div class=\"switchGrid\">\n                        <div>\n                          <div\n                            (click)=\"toggleSdkOnlyBind()\"\n                            [ngClass]=\"{ on: sdkOnlyBind }\"\n                            class=\"toggle\"\n                            >\n                            <span [hidden]=\"!sdkOnlyBind\" class=\"on-label\">YES</span>\n                            <span [hidden]=\"sdkOnlyBind\" class=\"off-label\">NO</span>\n                            <div class=\"switch\"></div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n                    <span class=\"config-item-label\">PROTOCOL</span>\n                    <select id=\"HostedProtocol\" (change)=\"hostProtocolsChanged($event)\" [ngModel]=\"sdkOnlyBind ? '' : hostProtocol\" (ngModelChange)=\"sdkOnlyBind ? '' : hostProtocol = $event\">\n                      <option value=\"tcp\">TCP</option>\n                      <option value=\"udp\" >UDP</option>\n                      <option value=\"both\" >TCP/UDP</option>\n                    </select>\n                  </div>\n                  <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n                    <span class=\"config-item-label\">Address</span>\n                    <input id=\"HostedHost\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateHostAddress()\" [ngClass]=\"{error: errors.hostAddress}\" [placeholder]=\"sdkOnlyBind ? '' : 'e.g. myservice.ziti'\" [ngModel]=\"sdkOnlyBind ? '' : hostConfigApiData.data.address\" (ngModelChange)=\"sdkOnlyBind ? '' : hostConfigApiData.data.address = $event\"/>\n                  </div>\n                  <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n                    <span class=\"config-item-label\">PORT</span>\n                    <input id=\"HostedPort\" type=\"number\" maxlength=\"10\" (change)=\"validateHostPort()\" [ngClass]=\"{error: errors.hostPort}\" [placeholder]=\"sdkOnlyBind ? '' : 443\" [ngModel]=\"sdkOnlyBind ? '' : hostConfigApiData.data.port\" (ngModelChange)=\"sdkOnlyBind ? '' : hostConfigApiData.data.port = $event\"/>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".service-header-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.simple-service-wrapper .simple-service-form-container .form-group-column{height:fit-content;max-width:40.625rem;width:100%;transition:var(--transition);flex-grow:0;padding-bottom:0}.simple-service-wrapper .simple-service-form-container .simple-service-center-content lib-form-field-container{min-width:23.4375rem}.simple-service-wrapper .simple-service-form-container .simple-service-center-content .form-field-input-group{display:flex;flex-direction:column;gap:.9375rem}.simple-service-wrapper .grid.addressFull{grid-template-columns:4.375rem 5.9375rem auto 4.0625rem}.simple-service-wrapper .grid.addressPort{grid-template-columns:4.375rem auto 4.0625rem}.simple-service-wrapper input:disabled{opacity:.5!important}.simple-service-wrapper .addressPort .config-item-container.disabled,.simple-service-wrapper .addressFull .config-item-container.disabled{opacity:.3;pointer-events:none}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle{color:var(--white);display:flex;justify-content:space-between;height:var(--defaultInputHeight);align-items:center;margin-bottom:0}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .label{display:flex;font-size:.875rem;font-weight:600;text-transform:uppercase}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label{display:flex;flex-direction:row;justify-content:flex-start;white-space:nowrap}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .form-field-info,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .form-field-info{margin-top:.0625rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .error-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .error-label{margin-left:.3125rem}.simple-service-wrapper .form-field-input-group.service-group{gap:.625rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group.accessing-group{gap:.9375rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group .form-field-sub-group{display:flex;flex-direction:column;gap:.3125rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .config-title-row{height:.875rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull,.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressPort{gap:.625rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull select{height:var(--defaultInputHeight)}.simple-service-wrapper .simple-service-center-content{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:wrap;gap:.9375rem;max-width:40.625rem;justify-content:center;padding:0}.config-item-label{color:#a9abaf;font-weight:600;margin-bottom:.3125rem;position:relative;display:flex;text-transform:uppercase}.simple-service-inputs{display:flex;flex-direction:column;gap:.9375rem}.form-field-input-group .form-field-title{color:var(--offWhite);margin-bottom:.625rem}.config-item .config-container.encryption-pod{background-color:#222f3e;background-image:linear-gradient(90deg,#232f3e,#f6f7fb);background-image:-ms-linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%);border-radius:var(--inputBorderRadius)}.config-item .config-container .config-container-label{color:#fff}.convert-service-button{background-color:var(--primaryColor);width:2.0625rem;height:2.0625rem;color:var(--white);font-family:icomoon!important;font-size:1.5rem;border:none;border-radius:var(--inputBorderRadius);position:relative}::ng-deep .simple-service-wrapper input{max-height:var(--defaultInputHeight);min-height:0rem;height:var(--defaultInputHeight)}::ng-deep .simple-service-wrapper .select2-search__field{height:100%;min-height:2.5rem;max-height:2.5rem}::ng-deep .simple-service-wrapper .select2-selection__rendered{padding:0;max-height:7.1875rem!important;overflow:auto}::ng-deep .simple-service-wrapper .form-header-container{align-items:center}::ng-deep .simple-service-wrapper .form-header-container .form-header-group{width:40.625rem!important}::ng-deep .simple-service-wrapper .form-header-container .header-actions-container{min-width:0rem}::ng-deep .simple-service-wrapper .form-header-container .form-header-toggle-container{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SimpleServiceComponent, isStandalone: false, selector: "lib-simple-service", inputs: { serviceRoleAttributes: "serviceRoleAttributes", identityRoleAttributes: "identityRoleAttributes", identityNamedAttributes: "identityNamedAttributes", formData: "formData" }, outputs: { close: "close", selected: "selected" }, usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper simple-service-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(true, false, 'cards', $event)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"isEdit ? 'Edit Simple Service' : 'Create a Simple Service'\"\n    [actionButtonText]=\"'Save'\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [moreActions]=\"moreActions\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n  ></lib-form-header>\n\n  <div class=\"simple-service-form-container projectable-form-container\" #formContainer>\n    @if (showForm) {\n      <div class=\"form-group-column three-fifths\">\n        <div  id=\"InlineServiceArea\" class=\"anyadd\">\n          <div class=\"simple-service-inputs\">\n            <lib-form-field-container [title]=\"'Service Details'\">\n              <div class=\"form-field-input-group service-group\">\n                <div class=\"form-field-sub-group\">\n                  <div class=\"config-title-row\">\n                    <span class=\"form-field-title\">Service Name</span>\n                  </div>\n                  @if (!useStrictReadonlyForm) {\n                    <input\n                    class=\"form-field-input\"\n                    placeholder=\"Name this service\"\n                    autofocus\n                    #nameFieldInput\n                    [ngClass]=\"{error: errors.name}\"\n                    [(ngModel)]=\"serviceApiData.name\"\n                    (keyup)=\"serviceNameChanged($event)\"\n                    (change)=\"validateServiceName()\"\n                    />\n                  } @else {\n                    <div class=\"form-field-readonly-value\">{{ serviceApiData.name }}</div>\n                  }\n                </div>\n                <div class=\"form-field-sub-group\">\n                  <div class=\"config-title-row\">\n                    <span class=\"form-field-title\">SELECT OR CREATE SERVICE ATTRIBUTES</span>\n                  </div>\n                  <lib-tag-selector\n                    [disableField]=\"useStrictReadonlyForm\"\n                    [disableCreate]=\"useStrictReadonlyForm\"\n                    [(selectedRoleAttributes)]=\"serviceApiData.roleAttributes\"\n                    [availableRoleAttributes]=\"serviceRoleAttributes\"\n                    [placeholder]=\"'Add attributes to group services'\"\n                  ></lib-tag-selector>\n                </div>\n              </div>\n            </lib-form-field-container>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showForm) {\n      <div class=\"simple-service-center-content\">\n        <div class=\"form-group-row\">\n          <lib-form-field-container\n            [title]=\"'ACCESSING CONFIGURATION'\"\n            [contentStyle]=\"'z-index: 10001'\"\n            [helpText]=\"'How will client applications use this service? Specify an address and port, or use the &quot;SDK Only&quot; toggle for an application embedded configuration.'\"\n            >\n            <div class=\"form-field-input-group accessing-group\">\n              @if (canReadRelated('identities')) {\n              <div class=\"form-field-sub-group\">\n                <div class=\"config-title-row\">\n                  <span class=\"form-field-title\">What identities can access this service?</span>\n                </div>\n                <lib-tag-selector\n                  [disableField]=\"useStrictReadonlyForm\"\n                  [disableCreate]=\"useStrictReadonlyForm\"\n                  [(selectedNamedAttributes)]=\"dialPolicyNamedAttributes\"\n                  [(selectedRoleAttributes)]=\"dialPolicyRoleAttributes\"\n                  [availableNamedAttributes]=\"identityNamedAttributes\"\n                  [availableRoleAttributes]=\"identityRoleAttributes\"\n                  [placeholder]=\"'Select identity attributes to grant access'\"\n                  [hasError]=\"errors.dialIdentities\"\n                  (selectedNamedAttributesChange)=\"validateDialIdentities()\"\n                  (selectedRoleAttributesChange)=\"validateDialIdentities()\"\n                  (filterChange)=\"getIdentityNamedAttributes($event)\"\n                ></lib-tag-selector>\n              </div>\n              }\n              <div class=\"form-field-sub-group\">\n                <div class=\"config-title-row\">\n                  <span class=\"form-field-title\">How will the service be accessed?</span>\n                </div>\n                <div class=\"grid addressPort\">\n                  <div class=\"config-item-container\">\n                    <span class=\"config-item-label\">SDK ONLY</span>\n                    <div\n                      class=\"sdk-toggle form-field-toggle\"\n                      >\n                      <div class=\"switchGrid\">\n                        <div>\n                          <div\n                            (click)=\"toggleSdkOnlyDial()\"\n                            [ngClass]=\"{ on: sdkOnlyDial }\"\n                            class=\"toggle\"\n                            >\n                            <span [hidden]=\"!sdkOnlyDial\" class=\"on-label\">YES</span>\n                            <span [hidden]=\"sdkOnlyDial\" class=\"off-label\">NO</span>\n                            <div class=\"switch\"></div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n                    <div class=\"config-hostname-label\">\n                      <span class=\"config-item-label\">Address</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Accessing hostnames must include a '.'\"\n                        matTooltipPosition=\"above\"\n                      ></div>\n                      @if (errors.interceptAddressFormat) {\n                        <span class=\"error-label\">Accessing address must include a '.'</span>\n                      }\n                    </div>\n                    <input id=\"HowTo\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateInterceptAddress()\" [ngClass]=\"{error: errors.interceptAddress}\" [placeholder]=\"sdkOnlyDial ? '' : 'e.g. myservice.ziti'\" [ngModel]=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0]\" (ngModelChange)=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0] = $event\"/>\n                  </div>\n                  <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n                    <span class=\"config-item-label\">PORT</span>\n                    <input id=\"HowToPort\" type=\"number\" maxlength=\"10\" (change)=\"validateInterceptPort()\" [ngClass]=\"{error: errors.interceptPort}\" [placeholder]=\"sdkOnlyDial ? '' : 443\" (keyup)=\"interceptPortChanged($event)\" [ngModel]=\"sdkOnlyDial ? '' : interceptPort\" (ngModelChange)=\"sdkOnlyDial ? '' : interceptPort = $event\"/>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'HOSTING CONFIGURATION'\"\n            [contentStyle]=\"'z-index: 10000'\"\n            [helpText]=\"'Where should traffic for this service be sent? Specify a protocol, address, and port, or use the &quot;SDK Only&quot; toggle for an application embedded configuration.'\"\n            >\n            <div class=\"form-field-input-group hosting-group\">\n              @if (canReadRelated('identities')) {\n              <div class=\"form-field-sub-group\">\n                <div class=\"config-title-row\">\n                  <span class=\"form-field-title\">What identities can host this service?</span>\n                </div>\n                <lib-tag-selector\n                  [disableField]=\"useStrictReadonlyForm\"\n                  [disableCreate]=\"useStrictReadonlyForm\"\n                  [(selectedNamedAttributes)]=\"bindPolicyNamedAttributes\"\n                  [(selectedRoleAttributes)]=\"bindPolicyRoleAttributes\"\n                  [availableNamedAttributes]=\"identityNamedAttributes\"\n                  [availableRoleAttributes]=\"identityRoleAttributes\"\n                  [placeholder]=\"'Select identity attributes'\"\n                  [hasError]=\"errors.bindIdentities\"\n                  (selectedNamedAttributesChange)=\"validateBindIdentities()\"\n                  (selectedRoleAttributesChange)=\"validateBindIdentities()\"\n                  (filterChange)=\"getIdentityNamedAttributes($event)\"\n                ></lib-tag-selector>\n              </div>\n              }\n              <div class=\"form-field-sub-group\">\n                <div class=\"config-title-row\">\n                  <span class=\"form-field-title\">Where should traffic be sent?</span>\n                </div>\n                <div class=\"grid addressFull\">\n                  <div class=\"config-item-container\">\n                    <span class=\"config-item-label\">SDK ONLY</span>\n                    <div\n                      class=\"sdk-toggle form-field-toggle\"\n                      >\n                      <div class=\"switchGrid\">\n                        <div>\n                          <div\n                            (click)=\"toggleSdkOnlyBind()\"\n                            [ngClass]=\"{ on: sdkOnlyBind }\"\n                            class=\"toggle\"\n                            >\n                            <span [hidden]=\"!sdkOnlyBind\" class=\"on-label\">YES</span>\n                            <span [hidden]=\"sdkOnlyBind\" class=\"off-label\">NO</span>\n                            <div class=\"switch\"></div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n                    <span class=\"config-item-label\">PROTOCOL</span>\n                    <select id=\"HostedProtocol\" (change)=\"hostProtocolsChanged($event)\" [ngModel]=\"sdkOnlyBind ? '' : hostProtocol\" (ngModelChange)=\"sdkOnlyBind ? '' : hostProtocol = $event\">\n                      <option value=\"tcp\">TCP</option>\n                      <option value=\"udp\" >UDP</option>\n                      <option value=\"both\" >TCP/UDP</option>\n                    </select>\n                  </div>\n                  <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n                    <span class=\"config-item-label\">Address</span>\n                    <input id=\"HostedHost\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateHostAddress()\" [ngClass]=\"{error: errors.hostAddress}\" [placeholder]=\"sdkOnlyBind ? '' : 'e.g. myservice.ziti'\" [ngModel]=\"sdkOnlyBind ? '' : hostConfigApiData.data.address\" (ngModelChange)=\"sdkOnlyBind ? '' : hostConfigApiData.data.address = $event\"/>\n                  </div>\n                  <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n                    <span class=\"config-item-label\">PORT</span>\n                    <input id=\"HostedPort\" type=\"number\" maxlength=\"10\" (change)=\"validateHostPort()\" [ngClass]=\"{error: errors.hostPort}\" [placeholder]=\"sdkOnlyBind ? '' : 443\" [ngModel]=\"sdkOnlyBind ? '' : hostConfigApiData.data.port\" (ngModelChange)=\"sdkOnlyBind ? '' : hostConfigApiData.data.port = $event\"/>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".service-header-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.simple-service-wrapper .simple-service-form-container .form-group-column{height:fit-content;max-width:40.625rem;width:100%;transition:var(--transition);flex-grow:0;padding-bottom:0}.simple-service-wrapper .simple-service-form-container .simple-service-center-content lib-form-field-container{min-width:23.4375rem}.simple-service-wrapper .simple-service-form-container .simple-service-center-content .form-field-input-group{display:flex;flex-direction:column;gap:.9375rem}.simple-service-wrapper .grid.addressFull{grid-template-columns:4.375rem 5.9375rem auto 4.0625rem}.simple-service-wrapper .grid.addressPort{grid-template-columns:4.375rem auto 4.0625rem}.simple-service-wrapper input:disabled{opacity:.5!important}.simple-service-wrapper .addressPort .config-item-container.disabled,.simple-service-wrapper .addressFull .config-item-container.disabled{opacity:.3;pointer-events:none}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle{color:var(--white);display:flex;justify-content:space-between;height:var(--defaultInputHeight);align-items:center;margin-bottom:0}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .label{display:flex;font-size:.875rem;font-weight:600;text-transform:uppercase}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label{display:flex;flex-direction:row;justify-content:flex-start;white-space:nowrap}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .form-field-info,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .form-field-info{margin-top:.0625rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .error-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .error-label{margin-left:.3125rem}.simple-service-wrapper .form-field-input-group.service-group{gap:.625rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group.accessing-group{gap:.9375rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group .form-field-sub-group{display:flex;flex-direction:column;gap:.3125rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .config-title-row{height:.875rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull,.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressPort{gap:.625rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull select{height:var(--defaultInputHeight)}.simple-service-wrapper .simple-service-center-content{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:wrap;gap:.9375rem;max-width:40.625rem;justify-content:center;padding:0}.config-item-label{color:#a9abaf;font-weight:600;margin-bottom:.3125rem;position:relative;display:flex;text-transform:uppercase}.simple-service-inputs{display:flex;flex-direction:column;gap:.9375rem}.form-field-input-group .form-field-title{color:var(--offWhite);margin-bottom:.625rem}.config-item .config-container.encryption-pod{background-color:#222f3e;background-image:linear-gradient(90deg,#232f3e,#f6f7fb);background-image:-ms-linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%);border-radius:var(--inputBorderRadius)}.config-item .config-container .config-container-label{color:#fff}.convert-service-button{background-color:var(--primaryColor);width:2.0625rem;height:2.0625rem;color:var(--white);font-family:icomoon!important;font-size:1.5rem;border:none;border-radius:var(--inputBorderRadius);position:relative}::ng-deep .simple-service-wrapper input{max-height:var(--defaultInputHeight);min-height:0rem;height:var(--defaultInputHeight)}::ng-deep .simple-service-wrapper .select2-search__field{height:100%;min-height:2.5rem;max-height:2.5rem}::ng-deep .simple-service-wrapper .select2-selection__rendered{padding:0;max-height:7.1875rem!important;overflow:auto}::ng-deep .simple-service-wrapper .form-header-container{align-items:center}::ng-deep .simple-service-wrapper .form-header-container .form-header-group{width:40.625rem!important}::ng-deep .simple-service-wrapper .form-header-container .header-actions-container{min-width:0rem}::ng-deep .simple-service-wrapper .form-header-container .form-header-toggle-container{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SimpleServiceComponent, decorators: [{
             type: Component,
@@ -23442,6 +23510,9 @@ class ServicePolicyFormComponent extends ProjectableForm {
         this.settings = {};
         this.entityType = 'service-policies';
         this.entityClass = ServicePolicy$1;
+        this.getServiceNamedAttributesDebounced = debounce((filter) => this.svc.getServiceNamedAttributes(filter).then(() => this.mergeSelectedIntoAvailable()), 250);
+        this.getIdentityNamedAttributesDebounced = debounce((filter) => this.svc.getIdentityNamedAttributes(filter).then(() => this.mergeSelectedIntoAvailable()), 250);
+        this.getPostureNamedAttributesDebounced = debounce((filter) => this.svc.getPostureNamedAttributes(filter).then(() => this.mergeSelectedIntoAvailable()), 250);
         this._apiData = {};
     }
     ngOnInit() {
@@ -23452,6 +23523,7 @@ class ServicePolicyFormComponent extends ProjectableForm {
     }
     entityUpdated() {
         super.entityUpdated();
+        this.svc.mergeRolesDisplayIntoMaps(this.formData);
         const promises = [];
         promises.push(this.svc.getServiceRoleAttributes());
         promises.push(this.svc.getIdentityRoleAttributes());
@@ -23481,6 +23553,18 @@ class ServicePolicyFormComponent extends ProjectableForm {
     ngOnChanges(changes) {
         this.isEditing = !isEmpty(this.formData.id);
     }
+    /**
+     * Keeps already-selected names visible in each picker's available list even though the
+     * underlying fetch only returns a bounded/filtered page.
+     */
+    mergeSelectedIntoAvailable() {
+        const serviceNames = new Set([...(this.svc.serviceNamedAttributes || []), ...this.selectedServiceNamedAttributes.filter((n) => n != null)]);
+        this.svc.serviceNamedAttributes = Array.from(serviceNames).sort((a, b) => String(a).localeCompare(String(b)));
+        const identityNames = new Set([...(this.svc.identityNamedAttributes || []), ...this.selectedIdentityNamedAttributes.filter((n) => n != null)]);
+        this.svc.identityNamedAttributes = Array.from(identityNames).sort((a, b) => String(a).localeCompare(String(b)));
+        const postureNames = new Set([...(this.svc.postureNamedAttributes || []), ...this.selectedPostureNamedAttributes.filter((n) => n != null)]);
+        this.svc.postureNamedAttributes = Array.from(postureNames).sort((a, b) => String(a).localeCompare(String(b)));
+    }
     initSelectedAttributes() {
         if (isEmpty(this.formData.id)) {
             this.svc.associatedServices = [];
@@ -23524,6 +23608,7 @@ class ServicePolicyFormComponent extends ProjectableForm {
                 this.selectedPostureRoleAttributes.push(attr.substring(1));
             }
         });
+        this.mergeSelectedIntoAvailable();
         this.updateAssociations();
     }
     updateAssociations() {
@@ -23695,7 +23780,7 @@ class ServicePolicyFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onServiceAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onServiceAttributesChanged()\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onIdentityAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onIdentityAttributesChanged()\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Posture Check Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100001'\"\n            [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n              [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n              [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select posture check attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Type'\"\n            [title2]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.type\"\n              (change)=\"onPolicyTypeChanged()\"\n              id=\"PolicyType\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"Bind\">Bind</option>\n              <option value=\"Dial\">Dial</option>\n            </select>\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"onPolicySemanticChanged()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Posture Checks'\"\n            [count]=\"svc.associatedPostureCheckNames.length\"\n            [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"postureChecksLoading\"\n              [allNames]=\"svc.associatedPostureCheckNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onServiceAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onServiceAttributesChanged()\"\n              (filterChange)=\"getServiceNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onIdentityAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onIdentityAttributesChanged()\"\n              (filterChange)=\"getIdentityNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Posture Check Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100001'\"\n            [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n              [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n              [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              (filterChange)=\"getPostureNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select posture check attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Type'\"\n            [title2]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.type\"\n              (change)=\"onPolicyTypeChanged()\"\n              id=\"PolicyType\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"Bind\">Bind</option>\n              <option value=\"Dial\">Dial</option>\n            </select>\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"onPolicySemanticChanged()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Posture Checks'\"\n            [count]=\"svc.associatedPostureCheckNames.length\"\n            [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"postureChecksLoading\"\n              [allNames]=\"svc.associatedPostureCheckNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServicePolicyFormComponent, decorators: [{
             type: Component,
@@ -23704,7 +23789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onServiceAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onServiceAttributesChanged()\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onIdentityAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onIdentityAttributesChanged()\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Posture Check Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100001'\"\n            [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n              [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n              [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select posture check attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Type'\"\n            [title2]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.type\"\n              (change)=\"onPolicyTypeChanged()\"\n              id=\"PolicyType\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"Bind\">Bind</option>\n              <option value=\"Dial\">Dial</option>\n            </select>\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"onPolicySemanticChanged()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Posture Checks'\"\n            [count]=\"svc.associatedPostureCheckNames.length\"\n            [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"postureChecksLoading\"\n              [allNames]=\"svc.associatedPostureCheckNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
+                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onServiceAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onServiceAttributesChanged()\"\n              (filterChange)=\"getServiceNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"onIdentityAttributesChanged()\"\n              (selectedRoleAttributesChange)=\"onIdentityAttributesChanged()\"\n              (filterChange)=\"getIdentityNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Posture Check Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100001'\"\n            [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n              [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n              [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n              (filterChange)=\"getPostureNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select posture check attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Type'\"\n            [title2]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.type\"\n              (change)=\"onPolicyTypeChanged()\"\n              id=\"PolicyType\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"Bind\">Bind</option>\n              <option value=\"Dial\">Dial</option>\n            </select>\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"onPolicySemanticChanged()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Posture Checks'\"\n            [count]=\"svc.associatedPostureCheckNames.length\"\n            [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"postureChecksLoading\"\n              [allNames]=\"svc.associatedPostureCheckNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -23735,6 +23820,8 @@ class EdgeRouterPolicyFormService {
         this.edgeRouterNamedAttributes = [];
         this.edgeRouterRoleAttributes = [];
         this.identityRoleAttributes = [];
+        this.identityNamedAttributesRequestId = 0;
+        this.edgeRouterNamedAttributesRequestId = 0;
     }
     save(formData) {
         const isUpdate = !isEmpty(formData.id);
@@ -23825,8 +23912,18 @@ class EdgeRouterPolicyFormService {
             return result;
         });
     }
-    getIdentityNamedAttributes() {
-        return this.zitiService.get('identities', {}, []).then((result) => {
+    getIdentityNamedAttributes(filter) {
+        const requestId = ++this.identityNamedAttributesRequestId;
+        const paging = { searchOn: 'name', filter: filter || '', total: 100, page: 1, sort: 'name', order: 'asc' };
+        const filters = [];
+        if (!isEmpty(filter)) {
+            filters.push({ filterName: 'name', columnId: 'name', value: filter || '%', label: '', type: 'TEXTINPUT' });
+        }
+        return this.zitiService.get('identities', paging, filters).then((result) => {
+            // a newer search has since started; discard this now-stale response
+            if (requestId !== this.identityNamedAttributesRequestId) {
+                return this.identityNamedAttributes;
+            }
             const namedAttributes = result.data.map((identity) => {
                 this.identityNamedAttributesMap[identity.name] = identity.id;
                 return identity.name;
@@ -23835,8 +23932,17 @@ class EdgeRouterPolicyFormService {
             return namedAttributes;
         });
     }
-    getEdgeRouterNamedAttributes() {
-        return this.zitiService.get('edge-routers', {}, []).then((result) => {
+    getEdgeRouterNamedAttributes(filter) {
+        const requestId = ++this.edgeRouterNamedAttributesRequestId;
+        const paging = { searchOn: 'name', filter: filter || '', total: 100, page: 1, sort: 'name', order: 'asc' };
+        const filters = [];
+        if (!isEmpty(filter)) {
+            filters.push({ filterName: 'name', columnId: 'name', value: filter || '%', label: '', type: 'TEXTINPUT' });
+        }
+        return this.zitiService.get('edge-routers', paging, filters).then((result) => {
+            if (requestId !== this.edgeRouterNamedAttributesRequestId) {
+                return this.edgeRouterNamedAttributes;
+            }
             const namedAttributes = result.data.map((router) => {
                 this.edgeRouterNamedAttributesMap[router.name] = router.id;
                 return router.name;
@@ -23851,6 +23957,37 @@ class EdgeRouterPolicyFormService {
             return result;
         });
     }
+    /**
+     * The policy response includes edgeRouterRolesDisplay/identityRolesDisplay alongside the
+     * raw #role/@id arrays, resolving every referenced name for free (no extra request) even
+     * when that entity falls outside the paged named-attribute fetch above.
+     */
+    mergeRolesDisplayIntoMaps(formData) {
+        this.mergeDisplayIntoMap(formData?.edgeRouterRolesDisplay, this.edgeRouterNamedAttributesMap);
+        this.mergeDisplayIntoMap(formData?.identityRolesDisplay, this.identityNamedAttributesMap);
+    }
+    mergeDisplayIntoMap(displays, namedAttributesMap) {
+        if (!Array.isArray(displays)) {
+            return;
+        }
+        displays.forEach((entry) => {
+            const role = entry?.role;
+            const id = typeof role === 'string' && role.charAt(0) === '@' ? role.slice(1) : undefined;
+            if (!id) {
+                return;
+            }
+            let displayName = entry?.name;
+            if (!displayName || typeof displayName !== 'string') {
+                return;
+            }
+            if (displayName.charAt(0) === '@') {
+                displayName = displayName.slice(1);
+            }
+            if (!namedAttributesMap[displayName]) {
+                namedAttributesMap[displayName] = id;
+            }
+        });
+    }
     getEdgeRouterPolicyDataModel(formData, isUpdate) {
         const saveModel = new EdgeRouterPolicy();
         const modelProperties = keys(saveModel);
@@ -23916,6 +24053,8 @@ class EdgeRouterPolicyFormComponent extends ProjectableForm {
         this.settings = {};
         this.entityType = 'edge-router-policies';
         this.entityClass = EdgeRouterPolicy;
+        this.getEdgeRouterNamedAttributesDebounced = debounce((filter) => this.svc.getEdgeRouterNamedAttributes(filter).then(() => this.mergeSelectedIntoAvailable()), 250);
+        this.getIdentityNamedAttributesDebounced = debounce((filter) => this.svc.getIdentityNamedAttributes(filter).then(() => this.mergeSelectedIntoAvailable()), 250);
         this._apiData = {};
     }
     ngOnInit() {
@@ -23966,6 +24105,7 @@ class EdgeRouterPolicyFormComponent extends ProjectableForm {
         this.isEditing = !isEmpty(this.formData.id);
     }
     loadAttributes() {
+        this.svc.mergeRolesDisplayIntoMaps(this.formData);
         const promises = [];
         promises.push(this.svc.getEdgeRouterRoleAttributes());
         promises.push(this.svc.getIdentityRoleAttributes());
@@ -23975,6 +24115,16 @@ class EdgeRouterPolicyFormComponent extends ProjectableForm {
             this.initSelectedAttributes();
         });
     }
+    /**
+     * Keeps already-selected names visible in the picker's available list even though the
+     * underlying fetch only returns a bounded/filtered page.
+     */
+    mergeSelectedIntoAvailable() {
+        const edgeRouterNames = new Set([...(this.svc.edgeRouterNamedAttributes || []), ...this.selectedEdgeRouterNamedAttributes.filter((n) => n != null)]);
+        this.svc.edgeRouterNamedAttributes = Array.from(edgeRouterNames).sort((a, b) => String(a).localeCompare(String(b)));
+        const identityNames = new Set([...(this.svc.identityNamedAttributes || []), ...this.selectedIdentityNamedAttributes.filter((n) => n != null)]);
+        this.svc.identityNamedAttributes = Array.from(identityNames).sort((a, b) => String(a).localeCompare(String(b)));
+    }
     initSelectedAttributes() {
         if (isEmpty(this.formData.id)) {
             this.svc.associatedEdgeRouters = [];
@@ -24005,6 +24155,7 @@ class EdgeRouterPolicyFormComponent extends ProjectableForm {
                 this.selectedIdentityRoleAttributes.push(attr.substring(1));
             }
         });
+        this.mergeSelectedIntoAvailable();
         this.updateAssociations();
     }
     updateAssociations() {
@@ -24141,7 +24292,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (filterChange)=\"getEdgeRouterNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              (filterChange)=\"getIdentityNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EdgeRouterPolicyFormComponent, decorators: [{
             type: Component,
@@ -24150,7 +24301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
+                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (filterChange)=\"getEdgeRouterNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Identity Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n              [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n              [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n              (filterChange)=\"getIdentityNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select identity attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Identities'\"\n            [count]=\"svc.associatedIdentityNames.length\"\n            [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"identitiesLoading\"\n              [allNames]=\"svc.associatedIdentityNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -24664,6 +24815,8 @@ class ServiceEdgeRouterPolicyFormService {
         this.edgeRouterNamedAttributes = [];
         this.edgeRouterRoleAttributes = [];
         this.serviceRoleAttributes = [];
+        this.serviceNamedAttributesRequestId = 0;
+        this.edgeRouterNamedAttributesRequestId = 0;
     }
     save(formData) {
         const isUpdate = !isEmpty(formData.id);
@@ -24738,8 +24891,17 @@ class ServiceEdgeRouterPolicyFormService {
             return result;
         });
     }
-    getServiceNamedAttributes() {
-        return this.zitiService.get('services', { rawFilter: true, filter: '', sort: 'name', order: 'asc', total: -1, page: 1 }, []).then((result) => {
+    getServiceNamedAttributes(filter) {
+        const requestId = ++this.serviceNamedAttributesRequestId;
+        const paging = { searchOn: 'name', filter: filter || '', total: 100, page: 1, sort: 'name', order: 'asc' };
+        const filters = [];
+        if (!isEmpty(filter)) {
+            filters.push({ filterName: 'name', columnId: 'name', value: filter || '%', label: '', type: 'TEXTINPUT' });
+        }
+        return this.zitiService.get('services', paging, filters).then((result) => {
+            if (requestId !== this.serviceNamedAttributesRequestId) {
+                return this.serviceNamedAttributes;
+            }
             const namedAttributes = result.data.map((service) => {
                 this.serviceNamedAttributesMap[service.name] = service.id;
                 return service.name;
@@ -24748,8 +24910,17 @@ class ServiceEdgeRouterPolicyFormService {
             return namedAttributes;
         });
     }
-    getEdgeRouterNamedAttributes() {
-        return this.zitiService.get('edge-routers', { rawFilter: true, filter: '', sort: 'name', order: 'asc', total: -1, page: 1 }, []).then((result) => {
+    getEdgeRouterNamedAttributes(filter) {
+        const requestId = ++this.edgeRouterNamedAttributesRequestId;
+        const paging = { searchOn: 'name', filter: filter || '', total: 100, page: 1, sort: 'name', order: 'asc' };
+        const filters = [];
+        if (!isEmpty(filter)) {
+            filters.push({ filterName: 'name', columnId: 'name', value: filter || '%', label: '', type: 'TEXTINPUT' });
+        }
+        return this.zitiService.get('edge-routers', paging, filters).then((result) => {
+            if (requestId !== this.edgeRouterNamedAttributesRequestId) {
+                return this.edgeRouterNamedAttributes;
+            }
             const namedAttributes = result.data.map((router) => {
                 this.edgeRouterNamedAttributesMap[router.name] = router.id;
                 return router.name;
@@ -24764,6 +24935,37 @@ class ServiceEdgeRouterPolicyFormService {
             return result;
         });
     }
+    /**
+     * The policy response includes edgeRouterRolesDisplay/serviceRolesDisplay alongside the
+     * raw #role/@id arrays, resolving every referenced name for free (no extra request) even
+     * when that entity falls outside the paged named-attribute fetch above.
+     */
+    mergeRolesDisplayIntoMaps(formData) {
+        this.mergeDisplayIntoMap(formData?.edgeRouterRolesDisplay, this.edgeRouterNamedAttributesMap);
+        this.mergeDisplayIntoMap(formData?.serviceRolesDisplay, this.serviceNamedAttributesMap);
+    }
+    mergeDisplayIntoMap(displays, namedAttributesMap) {
+        if (!Array.isArray(displays)) {
+            return;
+        }
+        displays.forEach((entry) => {
+            const role = entry?.role;
+            const id = typeof role === 'string' && role.charAt(0) === '@' ? role.slice(1) : undefined;
+            if (!id) {
+                return;
+            }
+            let displayName = entry?.name;
+            if (!displayName || typeof displayName !== 'string') {
+                return;
+            }
+            if (displayName.charAt(0) === '@') {
+                displayName = displayName.slice(1);
+            }
+            if (!namedAttributesMap[displayName]) {
+                namedAttributesMap[displayName] = id;
+            }
+        });
+    }
     getEdgeRouterPolicyDataModel(formData, isUpdate) {
         const saveModel = new ServiceEdgeRouterPolicy();
         const modelProperties = keys(saveModel);
@@ -24828,6 +25030,8 @@ class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
         this.settings = {};
         this.entityType = 'service-edge-router-policies';
         this.entityClass = ServiceEdgeRouterPolicy;
+        this.getEdgeRouterNamedAttributesDebounced = debounce((filter) => this.svc.getEdgeRouterNamedAttributes(filter).then(() => this.mergeSelectedIntoAvailable()), 250);
+        this.getServiceNamedAttributesDebounced = debounce((filter) => this.svc.getServiceNamedAttributes(filter).then(() => this.mergeSelectedIntoAvailable()), 250);
         this._apiData = {};
     }
     ngOnInit() {
@@ -24878,6 +25082,7 @@ class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
         this.isEditing = !isEmpty(this.formData.id);
     }
     loadAttributes() {
+        this.svc.mergeRolesDisplayIntoMaps(this.formData);
         const promises = [];
         promises.push(this.svc.getEdgeRouterRoleAttributes());
         promises.push(this.svc.getServiceRoleAttributes());
@@ -24887,6 +25092,16 @@ class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
             this.initSelectedAttributes();
         });
     }
+    /**
+     * Keeps already-selected names visible in the picker's available list even though the
+     * underlying fetch only returns a bounded/filtered page.
+     */
+    mergeSelectedIntoAvailable() {
+        const edgeRouterNames = new Set([...(this.svc.edgeRouterNamedAttributes || []), ...this.selectedEdgeRouterNamedAttributes.filter((n) => n != null)]);
+        this.svc.edgeRouterNamedAttributes = Array.from(edgeRouterNames).sort((a, b) => String(a).localeCompare(String(b)));
+        const serviceNames = new Set([...(this.svc.serviceNamedAttributes || []), ...this.selectedServiceNamedAttributes.filter((n) => n != null)]);
+        this.svc.serviceNamedAttributes = Array.from(serviceNames).sort((a, b) => String(a).localeCompare(String(b)));
+    }
     initSelectedAttributes() {
         if (isEmpty(this.formData.id)) {
             this.svc.associatedEdgeRouters = [];
@@ -24917,6 +25132,7 @@ class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
                 this.selectedServiceRoleAttributes.push(attr.substring(1));
             }
         });
+        this.mergeSelectedIntoAvailable();
         this.updateAssociations();
     }
     headerActionRequested(action) {
@@ -25052,7 +25268,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (filterChange)=\"getEdgeRouterNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              (filterChange)=\"getServiceNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServiceEdgeRouterPolicyFormComponent, decorators: [{
             type: Component,
@@ -25061,7 +25277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
+                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this service edge router policy\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Edge Router Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100003'\"\n            [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n              [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n              [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n              (filterChange)=\"getEdgeRouterNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select edge router attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select Service Attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 100002'\"\n            [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n              [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n              [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n              [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n              (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n              (filterChange)=\"getServiceNamedAttributesDebounced($event)\"\n              [namedAttributesServerFiltered]=\"true\"\n              [placeholder]=\"'Select service attributes'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Semantic'\"\n            [layout]=\"'row'\"\n            >\n            <select\n              [(ngModel)]=\"formData.semantic\"\n              (change)=\"updateAssociations()\"\n              id=\"PolicySemantic\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"AnyOf\">AnyOf</option>\n              <option value=\"AllOf\">AllOf</option>\n            </select>\n          </lib-form-field-container>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          <div [hidden]=\"!showMore\" class=\"form-group-column\">\n            @if (!hideTags) {\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n            }\n          </div>\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'Associated Edge Routers'\"\n            [count]=\"svc.associatedEdgeRouterNames.length\"\n            [class]=\"'hide-overflow'\"\n            [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"edgeRoutersLoading\"\n              [allNames]=\"svc.associatedEdgeRouterNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Associated Services'\"\n            [count]=\"svc.associatedServiceNames.length\"\n            [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n            >\n            <lib-preview-list\n              [clickable]=\"false\"\n              [isLoading]=\"servicesLoading\"\n              [allNames]=\"svc.associatedServiceNames\"\n            ></lib-preview-list>\n          </lib-form-field-container>\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [headerActions]=\"apiOptions\"\n              (actionRequested)=\"apiActionRequested($event)\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -27650,7 +27866,7 @@ class AuthPolicyFormComponent extends ProjectableForm {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthPolicyFormComponent, deps: [{ token: AuthPolicyFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: AuthPolicyFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container\n          [title]=\"'Name'\"\n          [label]=\"'Required'\"\n          >\n            <input\n              class=\"form-field-input\"\n              [(ngModel)]=\"formData.name\"\n              [ngClass]=\"{error: errors['name']}\"\n              placeholder=\"Name this Auth Policy\"\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Primary Authentication'\"\n          [layout]=\"'row'\"\n          >\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"form-field-title-container\">\n                <div class=\"config-container-label\">Cert</div>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Allow x509 certificate based authentication\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <div\n                (click)=\"!useStrictReadonlyForm && toggleCertAllowed()\"\n                [ngClass]=\"{ on: formData.primary.cert.allowed, 'toggle-readonly': useStrictReadonlyForm }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.primary.cert.allowed\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.primary.cert.allowed\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"form-field-title-container\">\n                <div class=\"config-container-label\">Ext JWT</div>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Allow externally signed JWT bearer tokens\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <div\n                (click)=\"toggleExtJwtAllowed()\"\n                [ngClass]=\"{ on: formData.primary.extJwt.allowed }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.primary.extJwt.allowed\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.primary.extJwt.allowed\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"form-field-title-container\">\n                <div class=\"config-container-label\">UPDB</div>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Allow authentication via a traditional &quot;Username Password Database&quot;\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <div\n                (click)=\"toggleUpdbAllowed()\"\n                [ngClass]=\"{ on: formData.primary.updb.allowed }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.primary.updb.allowed\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.primary.updb.allowed\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        @if (formData.primary.cert.allowed) {\n          <lib-form-field-container\n            [title]=\"'Cert Options'\"\n            [layout]=\"'row'\"\n            >\n            <div class=\"config-item\">\n              <div class=\"config-container toggle-container\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"config-container-label\">Allow Expired Certificates</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Allow expired client certificates to authenticate\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <div\n                  (click)=\"toggleAllowExpiredCerts()\"\n                  [ngClass]=\"{ on: formData.primary.cert.allowExpiredCerts }\"\n                  class=\"toggle\"\n                  >\n                  <span [hidden]=\"!formData.primary.cert.allowExpiredCerts\" class=\"on-label\">YES</span>\n                  <span [hidden]=\"formData.primary.cert.allowExpiredCerts\" class=\"off-label\">NO</span>\n                  <div class=\"switch\"></div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.primary.extJwt.allowed) {\n          <lib-form-field-container\n            [title]=\"'Ext JWT Options'\"\n            [layout]=\"'column'\"\n            >\n            <div class=\"form-field-label-container allowed-signers-container\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Allowed JWT Signers</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Choose which External JWT Signers may be used for authentication\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <lib-tag-selector\n                [disableField]=\"useStrictReadonlyForm\"\n                [disableCreate]=\"useStrictReadonlyForm\"\n                [(selectedNamedAttributes)]=\"allowedJwtSignerAttributes\"\n                [availableNamedAttributes]=\"svc.jwtSignerNamedAttributes\"\n                [placeholder]=\"'Select which External JWT Signers to allow'\"\n                (selectedNamedAttributesChange)=\"allowedJwtSignersChanged($event)\"\n              ></lib-tag-selector>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.primary.updb.allowed) {\n          <lib-form-field-container\n            [title]=\"'UPDB Options'\"\n            [layout]=\"'column'\"\n            >\n            <div class=\"form-field-row updb-input-options\">\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Minimum Length</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.minPasswordLength\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Max Attempts</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.maxAttempts\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Lockout Duration <div class=\"form-sub-text\">(min)</div></span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter time in min\" type=\"number\" [(ngModel)]=\"formData.primary.updb.lockoutDurationMinutes\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row\">\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Mixed Case</div>\n                    <div\n                      class=\"form-field-info infoicon\"\n                      matTooltip=\"Require upper and lower case charachters\"\n                      matTooltipPosition=\"below\"\n                    ></div>\n                  </div>\n                  <div\n                    (click)=\"toggleUpdbMixed()\"\n                    [ngClass]=\"{ on: formData.primary.updb.requireMixedCase }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.primary.updb.requireMixedCase\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.primary.updb.requireMixedCase\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Numeric</div>\n                    <div\n                      class=\"form-field-info infoicon\"\n                      matTooltip=\"Require numerical charachters 0-9\"\n                      matTooltipPosition=\"below\"\n                    ></div>\n                  </div>\n                  <div\n                    (click)=\"toggleUpdbNumeric()\"\n                    [ngClass]=\"{ on: formData.primary.updb.requireNumericChar }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.primary.updb.requireNumericChar\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.primary.updb.requireNumericChar\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Special</div>\n                    <div\n                      class=\"form-field-info infoicon\"\n                      matTooltip=\"Require special (non-alpha numeric) charachters. ie. !%$@*\"\n                      matTooltipPosition=\"below\"\n                    ></div>\n                  </div>\n                  <div\n                    (click)=\"toggleUpdbSpecial()\"\n                    [ngClass]=\"{ on: formData.primary.updb.requireSpecialChar }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.primary.updb.requireSpecialChar\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.primary.updb.requireSpecialChar\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          <lib-form-field-container\n            [title]=\"'Custom Tags'\"\n            [label]=\"'OPTIONAL'\"\n            class=\"form-field-advanced\"\n            >\n            <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n          </lib-form-field-container>\n        </div>\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Secondary Authentication'\"\n          [label]=\"'OPTIONAL'\"\n          [layout]=\"'column'\"\n          [contentStyle]=\"'z-index: 1000001'\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">TOTP MFA</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"Require authenticating clients to have TOTP MFA enabled (Time-based, One-Time Password)\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <div class=\"config-item\">\n              <div class=\"config-container toggle-container\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"config-container-label\">Require TOTP</div>\n                </div>\n                <div\n                  (click)=\"toggleRequireTotp()\"\n                  [ngClass]=\"{ on: formData.secondary.requireTotp }\"\n                  class=\"toggle\"\n                  >\n                  <span [hidden]=\"!formData.secondary.requireTotp\" class=\"on-label\">YES</span>\n                  <span [hidden]=\"formData.secondary.requireTotp\" class=\"off-label\">NO</span>\n                  <div class=\"switch\"></div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">JWT Signer</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"Require every client request to have a JWT from the specified External JTW Signer in the HTTP Authentication header\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <lib-filter-select\n              class=\"auth-policy__jwt-signer-select\"\n              placeholder=\"Select JWT Signer...\"\n              optionLabel=\"name\"\n              optionValue=\"id\"\n              [options]=\"svc.jwtSigners\"\n              [showClear]=\"true\"\n              [panelClass]=\"'auth-policy__jwt-signer-select-panel'\"\n              (selectionChange)=\"secondaryJwtSignerChanged($event)\"\n              (filterChange)=\"jwtSignersFilterChangedDebounced($event)\"\n              [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-filter-select>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\n          <lib-form-field-container\n            [title]=\"'API Calls'\"\n            [headerActions]=\"apiOptions\"\n            (actionRequested)=\"apiActionRequested($event)\"\n            [class]=\"'api-data-no-wrap'\"\n            >\n            <div class=\"form-row\">\n              <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n              <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-text-field-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{height:36px!important;min-height:36px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{display:flex!important;align-items:center!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value-text,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-min-line{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option{min-height:32px!important;height:32px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;line-height:1.2!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: AuthPolicyFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [class.is-scrolled]=\"isScrolled\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container\n          [title]=\"'Name'\"\n          [label]=\"'Required'\"\n          >\n            <input\n              class=\"form-field-input\"\n              [(ngModel)]=\"formData.name\"\n              [ngClass]=\"{error: errors['name']}\"\n              placeholder=\"Name this Auth Policy\"\n              #nameFieldInput\n              [disabled]=\"useStrictReadonlyForm\"\n              />\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Primary Authentication'\"\n          [layout]=\"'row'\"\n          >\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"form-field-title-container\">\n                <div class=\"config-container-label\">Cert</div>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Allow x509 certificate based authentication\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <div\n                (click)=\"!useStrictReadonlyForm && toggleCertAllowed()\"\n                [ngClass]=\"{ on: formData.primary.cert.allowed, 'toggle-readonly': useStrictReadonlyForm }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.primary.cert.allowed\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.primary.cert.allowed\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"form-field-title-container\">\n                <div class=\"config-container-label\">Ext JWT</div>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Allow externally signed JWT bearer tokens\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <div\n                (click)=\"toggleExtJwtAllowed()\"\n                [ngClass]=\"{ on: formData.primary.extJwt.allowed }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.primary.extJwt.allowed\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.primary.extJwt.allowed\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"form-field-title-container\">\n                <div class=\"config-container-label\">UPDB</div>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Allow authentication via a traditional &quot;Username Password Database&quot;\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <div\n                (click)=\"toggleUpdbAllowed()\"\n                [ngClass]=\"{ on: formData.primary.updb.allowed }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.primary.updb.allowed\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.primary.updb.allowed\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        @if (formData.primary.cert.allowed) {\n          <lib-form-field-container\n            [title]=\"'Cert Options'\"\n            [layout]=\"'row'\"\n            >\n            <div class=\"config-item\">\n              <div class=\"config-container toggle-container\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"config-container-label\">Allow Expired Certificates</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Allow expired client certificates to authenticate\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <div\n                  (click)=\"toggleAllowExpiredCerts()\"\n                  [ngClass]=\"{ on: formData.primary.cert.allowExpiredCerts }\"\n                  class=\"toggle\"\n                  >\n                  <span [hidden]=\"!formData.primary.cert.allowExpiredCerts\" class=\"on-label\">YES</span>\n                  <span [hidden]=\"formData.primary.cert.allowExpiredCerts\" class=\"off-label\">NO</span>\n                  <div class=\"switch\"></div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.primary.extJwt.allowed) {\n          <lib-form-field-container\n            [title]=\"'Ext JWT Options'\"\n            [layout]=\"'column'\"\n            >\n            <div class=\"form-field-label-container allowed-signers-container\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Allowed JWT Signers</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Choose which External JWT Signers may be used for authentication\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <lib-tag-selector\n                [disableField]=\"useStrictReadonlyForm\"\n                [disableCreate]=\"useStrictReadonlyForm\"\n                [(selectedNamedAttributes)]=\"allowedJwtSignerAttributes\"\n                [availableNamedAttributes]=\"svc.jwtSignerNamedAttributes\"\n                [placeholder]=\"'Select which External JWT Signers to allow'\"\n                (selectedNamedAttributesChange)=\"allowedJwtSignersChanged($event)\"\n              ></lib-tag-selector>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.primary.updb.allowed) {\n          <lib-form-field-container\n            [title]=\"'UPDB Options'\"\n            [layout]=\"'column'\"\n            >\n            <div class=\"form-field-row updb-input-options\">\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Minimum Length</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.minPasswordLength\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Max Attempts</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.maxAttempts\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Lockout Duration <div class=\"form-sub-text\">(min)</div></span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter time in min\" type=\"number\" [(ngModel)]=\"formData.primary.updb.lockoutDurationMinutes\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row\">\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Mixed Case</div>\n                    <div\n                      class=\"form-field-info infoicon\"\n                      matTooltip=\"Require upper and lower case charachters\"\n                      matTooltipPosition=\"below\"\n                    ></div>\n                  </div>\n                  <div\n                    (click)=\"toggleUpdbMixed()\"\n                    [ngClass]=\"{ on: formData.primary.updb.requireMixedCase }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.primary.updb.requireMixedCase\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.primary.updb.requireMixedCase\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Numeric</div>\n                    <div\n                      class=\"form-field-info infoicon\"\n                      matTooltip=\"Require numerical charachters 0-9\"\n                      matTooltipPosition=\"below\"\n                    ></div>\n                  </div>\n                  <div\n                    (click)=\"toggleUpdbNumeric()\"\n                    [ngClass]=\"{ on: formData.primary.updb.requireNumericChar }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.primary.updb.requireNumericChar\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.primary.updb.requireNumericChar\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Special</div>\n                    <div\n                      class=\"form-field-info infoicon\"\n                      matTooltip=\"Require special (non-alpha numeric) charachters. ie. !%$@*\"\n                      matTooltipPosition=\"below\"\n                    ></div>\n                  </div>\n                  <div\n                    (click)=\"toggleUpdbSpecial()\"\n                    [ngClass]=\"{ on: formData.primary.updb.requireSpecialChar }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.primary.updb.requireSpecialChar\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.primary.updb.requireSpecialChar\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          <lib-form-field-container\n            [title]=\"'Custom Tags'\"\n            [label]=\"'OPTIONAL'\"\n            class=\"form-field-advanced\"\n            >\n            <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n          </lib-form-field-container>\n        </div>\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Secondary Authentication'\"\n          [label]=\"'OPTIONAL'\"\n          [layout]=\"'column'\"\n          [contentStyle]=\"'z-index: 1000001'\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">TOTP MFA</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"Require authenticating clients to have TOTP MFA enabled (Time-based, One-Time Password)\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <div class=\"config-item\">\n              <div class=\"config-container toggle-container\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"config-container-label\">Require TOTP</div>\n                </div>\n                <div\n                  (click)=\"toggleRequireTotp()\"\n                  [ngClass]=\"{ on: formData.secondary.requireTotp }\"\n                  class=\"toggle\"\n                  >\n                  <span [hidden]=\"!formData.secondary.requireTotp\" class=\"on-label\">YES</span>\n                  <span [hidden]=\"formData.secondary.requireTotp\" class=\"off-label\">NO</span>\n                  <div class=\"switch\"></div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">JWT Signer</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"Require every client request to have a JWT from the specified External JTW Signer in the HTTP Authentication header\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <lib-filter-select\n              class=\"auth-policy__jwt-signer-select\"\n              placeholder=\"Select JWT Signer...\"\n              optionLabel=\"name\"\n              optionValue=\"id\"\n              [options]=\"svc.jwtSigners\"\n              [showClear]=\"true\"\n              [panelClass]=\"'auth-policy__jwt-signer-select-panel'\"\n              (selectionChange)=\"secondaryJwtSignerChanged($event)\"\n              (filterChange)=\"jwtSignersFilterChangedDebounced($event)\"\n              [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-filter-select>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\n          <lib-form-field-container\n            [title]=\"'API Calls'\"\n            [headerActions]=\"apiOptions\"\n            (actionRequested)=\"apiActionRequested($event)\"\n            [class]=\"'api-data-no-wrap'\"\n            >\n            <div class=\"form-row\">\n              <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n              <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-text-field-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{height:36px!important;min-height:36px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{display:flex!important;align-items:center!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value-text,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-min-line{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option{min-height:32px!important;height:32px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;line-height:1.2!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthPolicyFormComponent, decorators: [{
             type: Component,
@@ -28482,7 +28698,7 @@ class CertificateAuthorityFormComponent extends ProjectableForm {
         this.formData.externalIdClaim.parserCriteria = parserCriteria;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CertificateAuthorityFormComponent, deps: [{ token: CertificateAuthorityFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CertificateAuthorityFormComponent, isStandalone: false, selector: "lib-certificate-authority", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Certificate Authority Details' : 'Create Certificate Authority')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [badges]=\"badges\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\">\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container\n          [title]=\"'Name'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Identity Name Format'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n          >\n          @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.identityNameFormat }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Identity Roles'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.identityRoles\"\n            [availableRoleAttributes]=\"identityRoleAttributes\"\n            [placeholder]=\"'Type to filter and enter to assign'\"\n            [hasError]=\"errors.dialIdentities\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Enrollment Options'\"\n          [layout]=\"'row'\"\n          >\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"form-field-title-container\">\n                <div class=\"config-container-label\">Auto Enroll</div>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Allows client certificates of the CA to automatically enroll when encountered\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <div\n                (click)=\"toggleSwitch('isAutoCaEnrollmentEnabled')\"\n                [ngClass]=\"{ on: formData.isAutoCaEnrollmentEnabled }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.isAutoCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.isAutoCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"form-field-title-container\">\n                <div class=\"config-container-label\">OTT Enroll</div>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Allows client certificates of the CA to enroll if an identity with an ottca enrollment was created\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <div\n                (click)=\"toggleSwitch('isOttCaEnrollmentEnabled')\"\n                [ngClass]=\"{ on: formData.isOttCaEnrollmentEnabled }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.isOttCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.isOttCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"form-field-title-container\">\n                <div class=\"config-container-label\">Auth Enabled</div>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Allows client certificates of the CA to attempt to enroll\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <div\n                (click)=\"toggleSwitch('isAuthEnabled')\"\n                [ngClass]=\"{ on: formData.isAuthEnabled }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.isAuthEnabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.isAuthEnabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'External ID Claim'\"\n          [layout]=\"'column'\"\n          [helpText]=\"'Configuration used to pull values out of the x509 client certificate used to match identity externalId'\"\n          [showToggle]=\"true\"\n          [(headerToggle)]=\"externalIdClaim\"\n          (headerToggleChange)=\"externalIdClaimChanged()\"\n          >\n          <div class=\"form-field-input-group\" [ngClass]=\"{disabled: !externalIdClaim}\">\n            <div class=\"form-field-row\">\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Location</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Defines which value(s) in an x509 certificate will be processed\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <select [(ngModel)]=\"claimLocation\" id=\"ClaimLocation\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['claimLocation']}\">\n                  <option value=\"\">Select an option</option>\n                  @for (loc of locations; track loc) {\n                    <option [value]=\"loc\">\n                      {{ loc }}\n                    </option>\n                  }\n                </select>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Matcher</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Defines how values from location will be filtered\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <select [(ngModel)]=\"matcher\" id=\"ClaimMatcher\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['matcher']}\">\n                  <option value=\"\">Select an option</option>\n                  @for (matcher of matchers; track matcher) {\n                    <option [value]=\"matcher\">\n                      {{ matcher }}\n                    </option>\n                  }\n                </select>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Parser</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Defines how values from location filtered by matcher will be parsed\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <select [(ngModel)]=\"parser\" id=\"ClaimParser\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['parser']}\">\n                  <option value=\"\">Select an option</option>\n                  @for (parser of parsers; track parser) {\n                    <option [value]=\"parser\">\n                      {{ parser }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n            <div class=\"form-field-row\">\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Index</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Should multiple values still be available after location, matcher, and parser processing the integer value here will be used from the set\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <input class=\"form-field-input\" type=\"number\" placeholder=\"Enter a number\" [(ngModel)]=\"index\" [ngClass]=\"{error: errors['index']}\" [disabled]=\"!externalIdClaim\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Match Criteria</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Defines the PREFIX, SUFFIX, or SCHEME to look for based on matcher\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter matcher criteria\" [(ngModel)]=\"matcherCriteria\" [ngClass]=\"{error: errors['matcherCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Parser Criteria</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Defines the criteria to provide to parser\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter parser criteria\" [(ngModel)]=\"parserCriteria\" [ngClass]=\"{error: errors['parserCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'PEM'\"\n          [label]=\"'REQUIRED'\"\n          >\n          <div class=\"form-field-input-group\">\n            <div class=\"form-field-label-container select-file-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Enter PEM</span>\n                </div>\n                <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n                  Select File\n                  @if (fileSelectOpening) {\n                    <div class=\"spinner\"></div>\n                  }\n                </span>\n                <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n              </div>\n              <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"formData.certPem\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          <lib-form-field-container\n            [title]=\"'Custom Tags'\"\n            [label]=\"'OPTIONAL'\"\n            class=\"form-field-advanced\"\n            >\n            <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n          </lib-form-field-container>\n        </div>\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        @if (formData.id && !this.formData.isVerified) {\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            >\n            <a class=\"download-button\" href=\"./{{this.basePath}}/{{this.formData.id}}/verify\" (click)=\"verifyCertificate($event)\">\n              <div class=\"verify-certificate\"></div>\n              <span>Verify Certificate</span>\n              <div class=\"tap-to-download\"></div>\n            </a>\n          </lib-form-field-container>\n        }\n        @if (showApiCalls) {\n          <lib-form-field-container\n            [title]=\"'API Calls'\"\n            [headerActions]=\"apiOptions\"\n            (actionRequested)=\"apiActionRequested($event)\"\n            [class]=\"'api-data-no-wrap'\"\n            >\n            <div class=\"form-row\">\n              <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n              <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.toggle-container .config-container-label{font-size:.8rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CertificateAuthorityFormComponent, isStandalone: false, selector: "lib-certificate-authority", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Certificate Authority Details' : 'Create Certificate Authority')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [badges]=\"badges\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\">\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container\n          [title]=\"'Name'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Identity Name Format'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n          >\n          @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.identityNameFormat }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Identity Roles'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.identityRoles\"\n            [availableRoleAttributes]=\"identityRoleAttributes\"\n            [placeholder]=\"'Type to filter and enter to assign'\"\n            [hasError]=\"errors.dialIdentities\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Enrollment Options'\"\n          [layout]=\"'row'\"\n          >\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"form-field-title-container\">\n                <div class=\"config-container-label\">Auto Enroll</div>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Allows client certificates of the CA to automatically enroll when encountered\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <div\n                (click)=\"toggleSwitch('isAutoCaEnrollmentEnabled')\"\n                [ngClass]=\"{ on: formData.isAutoCaEnrollmentEnabled }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.isAutoCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.isAutoCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"form-field-title-container\">\n                <div class=\"config-container-label\">OTT Enroll</div>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Allows client certificates of the CA to enroll if an identity with an ottca enrollment was created\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <div\n                (click)=\"toggleSwitch('isOttCaEnrollmentEnabled')\"\n                [ngClass]=\"{ on: formData.isOttCaEnrollmentEnabled }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.isOttCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.isOttCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"form-field-title-container\">\n                <div class=\"config-container-label\">Auth Enabled</div>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"Allows client certificates of the CA to attempt to enroll\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <div\n                (click)=\"toggleSwitch('isAuthEnabled')\"\n                [ngClass]=\"{ on: formData.isAuthEnabled }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.isAuthEnabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.isAuthEnabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'External ID Claim'\"\n          [layout]=\"'column'\"\n          [helpText]=\"'Configuration used to pull values out of the x509 client certificate used to match identity externalId'\"\n          [showToggle]=\"true\"\n          [(headerToggle)]=\"externalIdClaim\"\n          (headerToggleChange)=\"externalIdClaimChanged()\"\n          >\n          <div class=\"form-field-input-group\" [ngClass]=\"{disabled: !externalIdClaim}\">\n            <div class=\"form-field-row\">\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Location</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Defines which value(s) in an x509 certificate will be processed\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <select [(ngModel)]=\"claimLocation\" id=\"ClaimLocation\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['claimLocation']}\">\n                  <option value=\"\">Select an option</option>\n                  @for (loc of locations; track loc) {\n                    <option [value]=\"loc\">\n                      {{ loc }}\n                    </option>\n                  }\n                </select>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Matcher</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Defines how values from location will be filtered\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <select [(ngModel)]=\"matcher\" id=\"ClaimMatcher\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['matcher']}\">\n                  <option value=\"\">Select an option</option>\n                  @for (matcher of matchers; track matcher) {\n                    <option [value]=\"matcher\">\n                      {{ matcher }}\n                    </option>\n                  }\n                </select>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Parser</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Defines how values from location filtered by matcher will be parsed\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <select [(ngModel)]=\"parser\" id=\"ClaimParser\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['parser']}\">\n                  <option value=\"\">Select an option</option>\n                  @for (parser of parsers; track parser) {\n                    <option [value]=\"parser\">\n                      {{ parser }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n            <div class=\"form-field-row\">\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Index</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Should multiple values still be available after location, matcher, and parser processing the integer value here will be used from the set\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <input class=\"form-field-input\" type=\"number\" placeholder=\"Enter a number\" [(ngModel)]=\"index\" [ngClass]=\"{error: errors['index']}\" [disabled]=\"!externalIdClaim\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Match Criteria</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Defines the PREFIX, SUFFIX, or SCHEME to look for based on matcher\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter matcher criteria\" [(ngModel)]=\"matcherCriteria\" [ngClass]=\"{error: errors['matcherCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Parser Criteria</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Defines the criteria to provide to parser\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter parser criteria\" [(ngModel)]=\"parserCriteria\" [ngClass]=\"{error: errors['parserCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'PEM'\"\n          [label]=\"'REQUIRED'\"\n          >\n          <div class=\"form-field-input-group\">\n            <div class=\"form-field-label-container select-file-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Enter PEM</span>\n                </div>\n                <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n                  Select File\n                  @if (fileSelectOpening) {\n                    <div class=\"spinner\"></div>\n                  }\n                </span>\n                <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n              </div>\n              <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"formData.certPem\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          <lib-form-field-container\n            [title]=\"'Custom Tags'\"\n            [label]=\"'OPTIONAL'\"\n            class=\"form-field-advanced\"\n            >\n            <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n          </lib-form-field-container>\n        </div>\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        @if (formData.id && !this.formData.isVerified) {\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            >\n            <a class=\"download-button\" href=\"./{{this.basePath}}/{{this.formData.id}}/verify\" (click)=\"verifyCertificate($event)\">\n              <div class=\"verify-certificate\"></div>\n              <span>Verify Certificate</span>\n              <div class=\"tap-to-download\"></div>\n            </a>\n          </lib-form-field-container>\n        }\n        @if (showApiCalls) {\n          <lib-form-field-container\n            [title]=\"'API Calls'\"\n            [headerActions]=\"apiOptions\"\n            (actionRequested)=\"apiActionRequested($event)\"\n            [class]=\"'api-data-no-wrap'\"\n            >\n            <div class=\"form-row\">\n              <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n              <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.toggle-container .config-container-label{font-size:.8rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CertificateAuthorityFormComponent, decorators: [{
             type: Component,
@@ -30229,11 +30445,11 @@ class PostureCheckFormComponent extends ProjectableForm {
     macAddressesChange(event) {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PostureCheckFormComponent, deps: [{ token: PostureCheckFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PostureCheckFormComponent, isStandalone: false, selector: "lib-posture-check", inputs: { errors: "errors" }, outputs: { close: "close" }, usesInheritance: true, ngImport: i0, template: "<div class=\"posture-check-form-container projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"posture-checkform-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container [title]=\"'Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n            id=\"PostureCheckName\"\n            type=\"text\"\n            maxlength=\"500\"\n            placeholder=\"Name this posture check\"\n            [ngClass]=\"{error: errors['name']}\"\n            [(ngModel)]=\"formData.name\"\n            [disabled]=\"useStrictReadonlyForm\"\n            >\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Posture Check attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Posture Checks to form a group of Posture Checks.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"pcRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Posture Checks'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        <lib-form-field-container [title]=\"'Type'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n          @if (postureCheckTypes.length > 0) {\n            <select\n              [(ngModel)]=\"formData.typeId\"\n              (change)=\"pcTypeChanged($event)\"\n              [disabled]=\"formData.id || useStrictReadonlyForm\"\n              [matTooltip]=\"formData.id ? 'Type cannot be changed' : ''\"\n              matTooltipPosition=\"below\"\n              id=\"SelectedConfigType\"\n              class=\"form-field-dropdown\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              >\n              <option value=\"\">Select posture check type...</option>\n              @for (type of postureCheckTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n          }\n        </lib-form-field-container>\n        @if (formData.typeId === 'MAC') {\n          <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.macAddresses\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter mc addresses\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['macAddresses'] }\"\n              [invalid]=\"errors['macAddresses']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'DOMAIN') {\n          <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.domains\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter domains\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['domains'] }\"\n              [invalid]=\"errors['domains']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS') {\n          <lib-form-field-container [title]=\"'Process Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" [contentClass]=\"'form-field-input-group'\">\n            <div class=\"form-field-label-container process-os-details-header\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-filter-select\n                placeholder=\"Select OS...\"\n                optionLabel=\"name\"\n                optionValue=\"type\"\n                [options]=\"osTypes\"\n                [searchable]=\"false\"\n                [showClear]=\"true\"\n                [(ngModel)]=\"formData.process.osType\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                >\n                <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                  @if (value && value !== '') {\n                    <div class=\"os-type-dropdown-item\">\n                      <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                      <div>{{ value }}</div>\n                    </div>\n                  }\n                </ng-template>\n                <ng-template libFilterSelectOption let-os>\n                  <div class=\"os-type-dropdown-item\">\n                    <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                    <div>{{ os.name }}</div>\n                  </div>\n                </ng-template>\n              </lib-filter-select>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Hashes</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Valid sha256 hashes of a binary\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-chips-input [(ngModel)]=\"formData.process.hashes\"\n                [allowDuplicate]=\"false\"\n                placeholder=\"Enter hashes\"\n                [addOnBlur]=\"true\"\n                [ngClass]=\"{ error: errors['processHashes'] }\"\n                [invalid]=\"errors['processHashes']\"\n                separator=\",\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                [disabled]=\"useStrictReadonlyForm\"\n              ></lib-chips-input>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Path</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"formData.process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Fingerprint</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter a fingerprint\" [(ngModel)]=\"formData.process.signerFingerprint\" [ngClass]=\"{error: errors['androidOSMin']}\"/>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS_MULTI') {\n          <lib-form-field-container [title]=\"'Process Multi Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" >\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Semantic</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <select\n                [(ngModel)]=\"formData.semantic\"\n                id=\"PolicySemantic\"\n                class=\"form-field-dropdown\"\n                >\n                <option value=\"AllOf\">AllOf</option>\n                <option value=\"AnyOf\">AnyOf</option>\n              </select>\n            </div>\n            @for (process of processMultiItems; track process; let i = $index) {\n              <div class=\"process-multi-item form-field-input-group\">\n                @if (processMultiItems.length > 1) {\n                  <div class=\"icon-clear\" (click)=\"removeProcessItem(i)\"></div>\n                }\n                <div class=\"form-field-label-container process-os-details-header\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Operating System</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-filter-select\n                    placeholder=\"Select OS...\"\n                    optionLabel=\"name\"\n                    optionValue=\"type\"\n                    [options]=\"osTypes\"\n                    [searchable]=\"false\"\n                    [showClear]=\"true\"\n                    [(ngModel)]=\"process.osType\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    >\n                    <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                      @if (value && value !== '') {\n                        <div class=\"os-type-dropdown-item\">\n                          <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                          <div>{{ value }}</div>\n                        </div>\n                      }\n                    </ng-template>\n                    <ng-template libFilterSelectOption let-os>\n                      <div class=\"os-type-dropdown-item\">\n                        <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                        <div>{{ os.name }}</div>\n                      </div>\n                    </ng-template>\n                  </lib-filter-select>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Hashes</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Valid sha256 hashes of a binary\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-chips-input [(ngModel)]=\"process.hashes\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter hashes\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['processHashes'] }\"\n                    [invalid]=\"errors['processHashes']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Path</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Fingerprint</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Signer fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-chips-input (keyup)=\"macAddressesChange($event)\"\n                    [(ngModel)]=\"process.signerFingerprints\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter signer fingerprints\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['process[' + i +'].signerFingerprints'] }\"\n                    [invalid]=\"errors['process[' + i +'].signerFingerprints']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n              </div>\n            }\n            <div class=\"buttons process-multi-buttons\">\n              <button class=\"button\" (click)=\"addProcessItem()\">Add Another Process</button>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'MFA') {\n          <lib-form-field-container\n            [title]=\"'Multi Factor Details'\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\n            <div class=\"form-field-row\">\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Timeout (seconds)</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"# in seconds\" [(ngModel)]=\"formData.timeoutSeconds\" [ngClass]=\"{error: errors['timeoutSeconds']}\" type=\"number\"/>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('wake')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Wake</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnWake }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnWake\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnWake\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('unlock')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Unlock</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnUnlock }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnUnlock\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnUnlock\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'OS') {\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('Android')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button android-os-button\"></div>\n                    <div class=\"config-container-label\">Android</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Android.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Android.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Android.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Min Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.min\" [ngClass]=\"{error: errors['androidOSMin']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Max Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.max\" [ngClass]=\"{error: errors['androidOSMax']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('iOS')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button ios-os-button\"></div>\n                    <div class=\"config-container-label\">iOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.iOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.iOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.iOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.min\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.max\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Linux')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button linux-os-button\"></div>\n                    <div class=\"config-container-label\">Linux</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Linux.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Linux.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Linux.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.min\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.max\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('macOS')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button mac-os-button\"></div>\n                    <div class=\"config-container-label\">macOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.macOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.macOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.macOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.min\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.max\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Windows')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-os-button\"></div>\n                    <div class=\"config-container-label\">Windows</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Windows.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Windows.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Windows.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.min\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.max\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('WindowsServer')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-server-os-button\"></div>\n                    <div class=\"config-container-label\">Windows Server</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.WindowsServer.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.WindowsServer.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.WindowsServer.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.min\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.max\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          @if (!hideTags) {\n            <lib-form-field-container\n              [title]=\"'Custom Tags'\"\n              [label]=\"'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'API Calls'\"\n            [label]=\"''\"\n            [headerActions]=\"apiOptions\"\n            (actionRequested)=\"apiActionRequested($event)\"\n            >\n            <div class=\"form-row\">\n              <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n              <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".posture-check-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}.os-toggle-container{gap:var(--gapSmall)}.os-toggle-container .config-container-label{text-transform:unset}.os-toggle-container{height:var(--defaultInputHeight);cursor:pointer}.os-toggle-container:hover .pc-os-button{transform:scale(1.05)}.os-version-row input:disabled{color:transparent!important}.os-version-row input:disabled::placeholder{color:transparent!important}.process-os-details-header{margin-top:var(--marginSmall)}input:disabled,select:disabled,textarea:disabled{opacity:.3!important;cursor:not-allowed}.process-multi-buttons{display:flex;flex-direction:row;justify-content:flex-end;margin:0}.process-multi-buttons button{background-color:var(--primaryColor);box-shadow:none;font-size:.75rem}.process-multi-buttons button:hover{filter:brightness(.8)}.process-multi-buttons button:active{transform:translateY(.0625rem)}.process-multi-item{display:flex;flex-direction:column;position:relative;gap:var(--gapMedium);border-width:.125rem;border-color:var(--menu);border-style:solid;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.process-multi-item .icon-clear{position:absolute;top:0;right:0;color:var(--red);margin-top:-.5rem;margin-right:-.5rem;background:var(--background);font-size:1.5rem;border-radius:2rem;cursor:pointer}.process-multi-item .icon-clear:hover{filter:brightness(.8)}.process-multi-item .icon-clear:active{transform:translateY(.0625rem)}.os-type-dropdown-item{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.os-type-dropdown-item div{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText)}.os-type-dropdown-item .os-type-dropdown-icon{background-size:1.75rem;height:1.75rem;width:1.75rem;display:inline-block;background-position-x:center;background-position-y:center}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Android{background-image:url(/assets/images/android-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-iOS{background-image:url(/assets/images/ios-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Linux{background-image:url(/assets/images/linux-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-macOS{background-image:url(/assets/images/mac-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Windows{background-image:url(/assets/images/windows-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-WindowsServer{background-image:url(/assets/images/windows-server-os.png)}.pc-os-button{background-size:2rem;height:2rem;width:2rem;display:inline-block;background-position-x:center;background-position-y:center;margin-right:.5rem}.pc-os-button.android-os-button{background-image:url(/assets/images/android-os.png)}.pc-os-button.ios-os-button{background-image:url(/assets/images/ios-os.png)}.pc-os-button.linux-os-button{background-image:url(/assets/images/linux-os.png)}.pc-os-button.mac-os-button{background-image:url(/assets/images/mac-os.png)}.pc-os-button.windows-os-button{background-image:url(/assets/images/windows-os.png)}.pc-os-button.windows-server-os-button{background-color:var(--offWhite_ALWAYS);border-radius:2rem;width:2rem;height:2rem;min-width:2rem;background-size:1.625rem;background-image:url(/assets/images/windows-server-os.png)}::ng-deep .posture-check-form-container .p-dropdown-panel .p-dropdown-items .p-dropdown-item{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText);padding:.25rem var(--paddingMedium)}::ng-deep .posture-check-form-container p-dropdown .p-dropdown.p-component .p-inputtext.p-dropdown-label{padding:0 var(--paddingMedium)}::ng-deep p-chips input[type=text]{width:100%}::ng-deep p-chips ul{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "inputId", "addOnBlur", "allowDuplicate", "separator", "invalid"], outputs: ["onAdd", "onRemove", "onModelChange", "onBlur", "keyup"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }, { kind: "directive", type: FilterSelectOptionTemplateDirective, selector: "ng-template[libFilterSelectOption]" }, { kind: "directive", type: FilterSelectTriggerTemplateDirective, selector: "ng-template[libFilterSelectTrigger]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PostureCheckFormComponent, isStandalone: false, selector: "lib-posture-check", inputs: { errors: "errors" }, outputs: { close: "close" }, usesInheritance: true, ngImport: i0, template: "<div class=\"posture-check-form-container projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"posture-checkform-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container [title]=\"'Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n            id=\"PostureCheckName\"\n            type=\"text\"\n            maxlength=\"500\"\n            placeholder=\"Name this posture check\"\n            [ngClass]=\"{error: errors['name']}\"\n            [(ngModel)]=\"formData.name\"\n            [disabled]=\"useStrictReadonlyForm\"\n            >\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Posture Check attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Posture Checks to form a group of Posture Checks.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"pcRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Posture Checks'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        <lib-form-field-container [title]=\"'Type'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n          @if (postureCheckTypes.length > 0) {\n            <select\n              [(ngModel)]=\"formData.typeId\"\n              (change)=\"pcTypeChanged($event)\"\n              [disabled]=\"formData.id || useStrictReadonlyForm\"\n              [matTooltip]=\"formData.id ? 'Type cannot be changed' : ''\"\n              matTooltipPosition=\"below\"\n              id=\"SelectedConfigType\"\n              class=\"form-field-dropdown\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              >\n              <option value=\"\">Select posture check type...</option>\n              @for (type of postureCheckTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n          }\n        </lib-form-field-container>\n        @if (formData.typeId === 'MAC') {\n          <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.macAddresses\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter mc addresses\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['macAddresses'] }\"\n              [invalid]=\"errors['macAddresses']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'DOMAIN') {\n          <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.domains\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter domains\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['domains'] }\"\n              [invalid]=\"errors['domains']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS') {\n          <lib-form-field-container [title]=\"'Process Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" [contentClass]=\"'form-field-input-group'\">\n            <div class=\"form-field-label-container process-os-details-header\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-filter-select\n                placeholder=\"Select OS...\"\n                optionLabel=\"name\"\n                optionValue=\"type\"\n                [options]=\"osTypes\"\n                [searchable]=\"false\"\n                [showClear]=\"true\"\n                [(ngModel)]=\"formData.process.osType\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                >\n                <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                  @if (value && value !== '') {\n                    <div class=\"os-type-dropdown-item\">\n                      <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                      <div>{{ value }}</div>\n                    </div>\n                  }\n                </ng-template>\n                <ng-template libFilterSelectOption let-os>\n                  <div class=\"os-type-dropdown-item\">\n                    <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                    <div>{{ os.name }}</div>\n                  </div>\n                </ng-template>\n              </lib-filter-select>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Binary Hashes</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Valid sha256 hashes of a binary\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n              </div>\n              <lib-chips-input [(ngModel)]=\"formData.process.hashes\"\n                [allowDuplicate]=\"false\"\n                placeholder=\"Enter hashes\"\n                [addOnBlur]=\"true\"\n                [ngClass]=\"{ error: errors['processHashes'] }\"\n                [invalid]=\"errors['processHashes']\"\n                separator=\",\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                [disabled]=\"useStrictReadonlyForm\"\n              ></lib-chips-input>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Path</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"formData.process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Signer Fingerprints</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter a fingerprint\" [(ngModel)]=\"formData.process.signerFingerprint\" [ngClass]=\"{error: errors['androidOSMin']}\"/>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS_MULTI') {\n          <lib-form-field-container [title]=\"'Process Multi Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" >\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Semantic</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <select\n                [(ngModel)]=\"formData.semantic\"\n                id=\"PolicySemantic\"\n                class=\"form-field-dropdown\"\n                >\n                <option value=\"AllOf\">AllOf</option>\n                <option value=\"AnyOf\">AnyOf</option>\n              </select>\n            </div>\n            @for (process of processMultiItems; track process; let i = $index) {\n              <div class=\"process-multi-item form-field-input-group\">\n                @if (processMultiItems.length > 1) {\n                  <div class=\"icon-clear\" (click)=\"removeProcessItem(i)\"></div>\n                }\n                <div class=\"form-field-label-container process-os-details-header\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Operating System</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-filter-select\n                    placeholder=\"Select OS...\"\n                    optionLabel=\"name\"\n                    optionValue=\"type\"\n                    [options]=\"osTypes\"\n                    [searchable]=\"false\"\n                    [showClear]=\"true\"\n                    [(ngModel)]=\"process.osType\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    >\n                    <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                      @if (value && value !== '') {\n                        <div class=\"os-type-dropdown-item\">\n                          <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                          <div>{{ value }}</div>\n                        </div>\n                      }\n                    </ng-template>\n                    <ng-template libFilterSelectOption let-os>\n                      <div class=\"os-type-dropdown-item\">\n                        <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                        <div>{{ os.name }}</div>\n                      </div>\n                    </ng-template>\n                  </lib-filter-select>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Binary Hashes</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Valid sha256 hashes of a binary\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                  </div>\n                  <lib-chips-input [(ngModel)]=\"process.hashes\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter hashes\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['processHashes'] }\"\n                    [invalid]=\"errors['processHashes']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Path</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Signer Fingerprints</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Signer fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                  </div>\n                  <lib-chips-input (keyup)=\"macAddressesChange($event)\"\n                    [(ngModel)]=\"process.signerFingerprints\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter signer fingerprints\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['process[' + i +'].signerFingerprints'] }\"\n                    [invalid]=\"errors['process[' + i +'].signerFingerprints']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n              </div>\n            }\n            <div class=\"buttons process-multi-buttons\">\n              <button class=\"button\" (click)=\"addProcessItem()\">Add Another Process</button>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'MFA') {\n          <lib-form-field-container\n            [title]=\"'Multi Factor Details'\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\n            <div class=\"form-field-row\">\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Timeout (seconds)</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"# in seconds\" [(ngModel)]=\"formData.timeoutSeconds\" [ngClass]=\"{error: errors['timeoutSeconds']}\" type=\"number\"/>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('wake')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Wake</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnWake }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnWake\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnWake\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('unlock')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Unlock</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnUnlock }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnUnlock\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnUnlock\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'OS') {\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('Android')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button android-os-button\"></div>\n                    <div class=\"config-container-label\">Android</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Android.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Android.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Android.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Min Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.min\" [ngClass]=\"{error: errors['androidOSMin']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Max Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.max\" [ngClass]=\"{error: errors['androidOSMax']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('iOS')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button ios-os-button\"></div>\n                    <div class=\"config-container-label\">iOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.iOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.iOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.iOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.min\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.max\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Linux')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button linux-os-button\"></div>\n                    <div class=\"config-container-label\">Linux</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Linux.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Linux.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Linux.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.min\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.max\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('macOS')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button mac-os-button\"></div>\n                    <div class=\"config-container-label\">macOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.macOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.macOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.macOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.min\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.max\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Windows')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-os-button\"></div>\n                    <div class=\"config-container-label\">Windows</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Windows.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Windows.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Windows.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.min\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.max\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('WindowsServer')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-server-os-button\"></div>\n                    <div class=\"config-container-label\">Windows Server</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.WindowsServer.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.WindowsServer.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.WindowsServer.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.min\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.max\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          @if (!hideTags) {\n            <lib-form-field-container\n              [title]=\"'Custom Tags'\"\n              [label]=\"'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'API Calls'\"\n            [label]=\"''\"\n            [headerActions]=\"apiOptions\"\n            (actionRequested)=\"apiActionRequested($event)\"\n            >\n            <div class=\"form-row\">\n              <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n              <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".posture-check-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}.os-toggle-container{gap:var(--gapSmall)}.os-toggle-container .config-container-label{text-transform:unset}.os-toggle-container{height:var(--defaultInputHeight);cursor:pointer}.os-toggle-container:hover .pc-os-button{transform:scale(1.05)}.os-version-row input:disabled{color:transparent!important}.os-version-row input:disabled::placeholder{color:transparent!important}.process-os-details-header{margin-top:var(--marginSmall)}input:disabled,select:disabled,textarea:disabled{opacity:.3!important;cursor:not-allowed}.process-multi-buttons{display:flex;flex-direction:row;justify-content:flex-end;margin:0}.process-multi-buttons button{background-color:var(--primaryColor);box-shadow:none;font-size:.75rem}.process-multi-buttons button:hover{filter:brightness(.8)}.process-multi-buttons button:active{transform:translateY(.0625rem)}.process-multi-item{display:flex;flex-direction:column;position:relative;gap:var(--gapMedium);border-width:.125rem;border-color:var(--menu);border-style:solid;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.process-multi-item .icon-clear{position:absolute;top:0;right:0;color:var(--red);margin-top:-.5rem;margin-right:-.5rem;background:var(--background);font-size:1.5rem;border-radius:2rem;cursor:pointer}.process-multi-item .icon-clear:hover{filter:brightness(.8)}.process-multi-item .icon-clear:active{transform:translateY(.0625rem)}.os-type-dropdown-item{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.os-type-dropdown-item div{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText)}.os-type-dropdown-item .os-type-dropdown-icon{background-size:1.75rem;height:1.75rem;width:1.75rem;display:inline-block;background-position-x:center;background-position-y:center}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Android{background-image:url(/assets/images/android-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-iOS{background-image:url(/assets/images/ios-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Linux{background-image:url(/assets/images/linux-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-macOS{background-image:url(/assets/images/mac-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Windows{background-image:url(/assets/images/windows-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-WindowsServer{background-image:url(/assets/images/windows-server-os.png)}.pc-os-button{background-size:2rem;height:2rem;width:2rem;display:inline-block;background-position-x:center;background-position-y:center;margin-right:.5rem}.pc-os-button.android-os-button{background-image:url(/assets/images/android-os.png)}.pc-os-button.ios-os-button{background-image:url(/assets/images/ios-os.png)}.pc-os-button.linux-os-button{background-image:url(/assets/images/linux-os.png)}.pc-os-button.mac-os-button{background-image:url(/assets/images/mac-os.png)}.pc-os-button.windows-os-button{background-image:url(/assets/images/windows-os.png)}.pc-os-button.windows-server-os-button{background-color:var(--offWhite_ALWAYS);border-radius:2rem;width:2rem;height:2rem;min-width:2rem;background-size:1.625rem;background-image:url(/assets/images/windows-server-os.png)}::ng-deep .posture-check-form-container .p-dropdown-panel .p-dropdown-items .p-dropdown-item{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText);padding:.25rem var(--paddingMedium)}::ng-deep .posture-check-form-container p-dropdown .p-dropdown.p-component .p-inputtext.p-dropdown-label{padding:0 var(--paddingMedium)}::ng-deep p-chips input[type=text]{width:100%}::ng-deep p-chips ul{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "inputId", "addOnBlur", "allowDuplicate", "separator", "invalid"], outputs: ["onAdd", "onRemove", "onModelChange", "onBlur", "keyup"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }, { kind: "directive", type: FilterSelectOptionTemplateDirective, selector: "ng-template[libFilterSelectOption]" }, { kind: "directive", type: FilterSelectTriggerTemplateDirective, selector: "ng-template[libFilterSelectTrigger]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PostureCheckFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-posture-check', standalone: false, template: "<div class=\"posture-check-form-container projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"posture-checkform-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container [title]=\"'Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n            id=\"PostureCheckName\"\n            type=\"text\"\n            maxlength=\"500\"\n            placeholder=\"Name this posture check\"\n            [ngClass]=\"{error: errors['name']}\"\n            [(ngModel)]=\"formData.name\"\n            [disabled]=\"useStrictReadonlyForm\"\n            >\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Posture Check attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Posture Checks to form a group of Posture Checks.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"pcRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Posture Checks'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        <lib-form-field-container [title]=\"'Type'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n          @if (postureCheckTypes.length > 0) {\n            <select\n              [(ngModel)]=\"formData.typeId\"\n              (change)=\"pcTypeChanged($event)\"\n              [disabled]=\"formData.id || useStrictReadonlyForm\"\n              [matTooltip]=\"formData.id ? 'Type cannot be changed' : ''\"\n              matTooltipPosition=\"below\"\n              id=\"SelectedConfigType\"\n              class=\"form-field-dropdown\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              >\n              <option value=\"\">Select posture check type...</option>\n              @for (type of postureCheckTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n          }\n        </lib-form-field-container>\n        @if (formData.typeId === 'MAC') {\n          <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.macAddresses\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter mc addresses\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['macAddresses'] }\"\n              [invalid]=\"errors['macAddresses']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'DOMAIN') {\n          <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.domains\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter domains\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['domains'] }\"\n              [invalid]=\"errors['domains']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS') {\n          <lib-form-field-container [title]=\"'Process Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" [contentClass]=\"'form-field-input-group'\">\n            <div class=\"form-field-label-container process-os-details-header\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-filter-select\n                placeholder=\"Select OS...\"\n                optionLabel=\"name\"\n                optionValue=\"type\"\n                [options]=\"osTypes\"\n                [searchable]=\"false\"\n                [showClear]=\"true\"\n                [(ngModel)]=\"formData.process.osType\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                >\n                <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                  @if (value && value !== '') {\n                    <div class=\"os-type-dropdown-item\">\n                      <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                      <div>{{ value }}</div>\n                    </div>\n                  }\n                </ng-template>\n                <ng-template libFilterSelectOption let-os>\n                  <div class=\"os-type-dropdown-item\">\n                    <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                    <div>{{ os.name }}</div>\n                  </div>\n                </ng-template>\n              </lib-filter-select>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Hashes</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Valid sha256 hashes of a binary\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-chips-input [(ngModel)]=\"formData.process.hashes\"\n                [allowDuplicate]=\"false\"\n                placeholder=\"Enter hashes\"\n                [addOnBlur]=\"true\"\n                [ngClass]=\"{ error: errors['processHashes'] }\"\n                [invalid]=\"errors['processHashes']\"\n                separator=\",\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                [disabled]=\"useStrictReadonlyForm\"\n              ></lib-chips-input>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Path</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"formData.process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Fingerprint</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter a fingerprint\" [(ngModel)]=\"formData.process.signerFingerprint\" [ngClass]=\"{error: errors['androidOSMin']}\"/>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS_MULTI') {\n          <lib-form-field-container [title]=\"'Process Multi Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" >\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Semantic</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <select\n                [(ngModel)]=\"formData.semantic\"\n                id=\"PolicySemantic\"\n                class=\"form-field-dropdown\"\n                >\n                <option value=\"AllOf\">AllOf</option>\n                <option value=\"AnyOf\">AnyOf</option>\n              </select>\n            </div>\n            @for (process of processMultiItems; track process; let i = $index) {\n              <div class=\"process-multi-item form-field-input-group\">\n                @if (processMultiItems.length > 1) {\n                  <div class=\"icon-clear\" (click)=\"removeProcessItem(i)\"></div>\n                }\n                <div class=\"form-field-label-container process-os-details-header\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Operating System</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-filter-select\n                    placeholder=\"Select OS...\"\n                    optionLabel=\"name\"\n                    optionValue=\"type\"\n                    [options]=\"osTypes\"\n                    [searchable]=\"false\"\n                    [showClear]=\"true\"\n                    [(ngModel)]=\"process.osType\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    >\n                    <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                      @if (value && value !== '') {\n                        <div class=\"os-type-dropdown-item\">\n                          <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                          <div>{{ value }}</div>\n                        </div>\n                      }\n                    </ng-template>\n                    <ng-template libFilterSelectOption let-os>\n                      <div class=\"os-type-dropdown-item\">\n                        <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                        <div>{{ os.name }}</div>\n                      </div>\n                    </ng-template>\n                  </lib-filter-select>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Hashes</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Valid sha256 hashes of a binary\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-chips-input [(ngModel)]=\"process.hashes\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter hashes\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['processHashes'] }\"\n                    [invalid]=\"errors['processHashes']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Path</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Fingerprint</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Signer fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-chips-input (keyup)=\"macAddressesChange($event)\"\n                    [(ngModel)]=\"process.signerFingerprints\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter signer fingerprints\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['process[' + i +'].signerFingerprints'] }\"\n                    [invalid]=\"errors['process[' + i +'].signerFingerprints']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n              </div>\n            }\n            <div class=\"buttons process-multi-buttons\">\n              <button class=\"button\" (click)=\"addProcessItem()\">Add Another Process</button>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'MFA') {\n          <lib-form-field-container\n            [title]=\"'Multi Factor Details'\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\n            <div class=\"form-field-row\">\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Timeout (seconds)</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"# in seconds\" [(ngModel)]=\"formData.timeoutSeconds\" [ngClass]=\"{error: errors['timeoutSeconds']}\" type=\"number\"/>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('wake')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Wake</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnWake }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnWake\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnWake\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('unlock')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Unlock</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnUnlock }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnUnlock\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnUnlock\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'OS') {\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('Android')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button android-os-button\"></div>\n                    <div class=\"config-container-label\">Android</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Android.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Android.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Android.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Min Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.min\" [ngClass]=\"{error: errors['androidOSMin']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Max Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.max\" [ngClass]=\"{error: errors['androidOSMax']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('iOS')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button ios-os-button\"></div>\n                    <div class=\"config-container-label\">iOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.iOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.iOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.iOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.min\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.max\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Linux')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button linux-os-button\"></div>\n                    <div class=\"config-container-label\">Linux</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Linux.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Linux.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Linux.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.min\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.max\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('macOS')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button mac-os-button\"></div>\n                    <div class=\"config-container-label\">macOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.macOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.macOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.macOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.min\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.max\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Windows')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-os-button\"></div>\n                    <div class=\"config-container-label\">Windows</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Windows.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Windows.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Windows.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.min\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.max\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('WindowsServer')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-server-os-button\"></div>\n                    <div class=\"config-container-label\">Windows Server</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.WindowsServer.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.WindowsServer.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.WindowsServer.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.min\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.max\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          @if (!hideTags) {\n            <lib-form-field-container\n              [title]=\"'Custom Tags'\"\n              [label]=\"'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'API Calls'\"\n            [label]=\"''\"\n            [headerActions]=\"apiOptions\"\n            (actionRequested)=\"apiActionRequested($event)\"\n            >\n            <div class=\"form-row\">\n              <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n              <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".posture-check-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}.os-toggle-container{gap:var(--gapSmall)}.os-toggle-container .config-container-label{text-transform:unset}.os-toggle-container{height:var(--defaultInputHeight);cursor:pointer}.os-toggle-container:hover .pc-os-button{transform:scale(1.05)}.os-version-row input:disabled{color:transparent!important}.os-version-row input:disabled::placeholder{color:transparent!important}.process-os-details-header{margin-top:var(--marginSmall)}input:disabled,select:disabled,textarea:disabled{opacity:.3!important;cursor:not-allowed}.process-multi-buttons{display:flex;flex-direction:row;justify-content:flex-end;margin:0}.process-multi-buttons button{background-color:var(--primaryColor);box-shadow:none;font-size:.75rem}.process-multi-buttons button:hover{filter:brightness(.8)}.process-multi-buttons button:active{transform:translateY(.0625rem)}.process-multi-item{display:flex;flex-direction:column;position:relative;gap:var(--gapMedium);border-width:.125rem;border-color:var(--menu);border-style:solid;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.process-multi-item .icon-clear{position:absolute;top:0;right:0;color:var(--red);margin-top:-.5rem;margin-right:-.5rem;background:var(--background);font-size:1.5rem;border-radius:2rem;cursor:pointer}.process-multi-item .icon-clear:hover{filter:brightness(.8)}.process-multi-item .icon-clear:active{transform:translateY(.0625rem)}.os-type-dropdown-item{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.os-type-dropdown-item div{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText)}.os-type-dropdown-item .os-type-dropdown-icon{background-size:1.75rem;height:1.75rem;width:1.75rem;display:inline-block;background-position-x:center;background-position-y:center}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Android{background-image:url(/assets/images/android-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-iOS{background-image:url(/assets/images/ios-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Linux{background-image:url(/assets/images/linux-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-macOS{background-image:url(/assets/images/mac-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Windows{background-image:url(/assets/images/windows-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-WindowsServer{background-image:url(/assets/images/windows-server-os.png)}.pc-os-button{background-size:2rem;height:2rem;width:2rem;display:inline-block;background-position-x:center;background-position-y:center;margin-right:.5rem}.pc-os-button.android-os-button{background-image:url(/assets/images/android-os.png)}.pc-os-button.ios-os-button{background-image:url(/assets/images/ios-os.png)}.pc-os-button.linux-os-button{background-image:url(/assets/images/linux-os.png)}.pc-os-button.mac-os-button{background-image:url(/assets/images/mac-os.png)}.pc-os-button.windows-os-button{background-image:url(/assets/images/windows-os.png)}.pc-os-button.windows-server-os-button{background-color:var(--offWhite_ALWAYS);border-radius:2rem;width:2rem;height:2rem;min-width:2rem;background-size:1.625rem;background-image:url(/assets/images/windows-server-os.png)}::ng-deep .posture-check-form-container .p-dropdown-panel .p-dropdown-items .p-dropdown-item{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText);padding:.25rem var(--paddingMedium)}::ng-deep .posture-check-form-container p-dropdown .p-dropdown.p-component .p-inputtext.p-dropdown-label{padding:0 var(--paddingMedium)}::ng-deep p-chips input[type=text]{width:100%}::ng-deep p-chips ul{padding:0}\n"] }]
+            args: [{ selector: 'lib-posture-check', standalone: false, template: "<div class=\"posture-check-form-container projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"posture-checkform-container projectable-form-container\" #formContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container [title]=\"'Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <input\n            id=\"PostureCheckName\"\n            type=\"text\"\n            maxlength=\"500\"\n            placeholder=\"Name this posture check\"\n            [ngClass]=\"{error: errors['name']}\"\n            [(ngModel)]=\"formData.name\"\n            [disabled]=\"useStrictReadonlyForm\"\n            >\n        </lib-form-field-container>\n        <lib-form-field-container\n          [title]=\"'Select or create Posture Check attributes'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n          [contentStyle]=\"'z-index: 99999999'\"\n          [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Posture Checks to form a group of Posture Checks.'\"\n          >\n          <lib-tag-selector\n            [disableField]=\"useStrictReadonlyForm\"\n            [disableCreate]=\"useStrictReadonlyForm\"\n            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n            [availableRoleAttributes]=\"pcRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Posture Checks'\"\n          ></lib-tag-selector>\n        </lib-form-field-container>\n        <lib-form-field-container [title]=\"'Type'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n          @if (postureCheckTypes.length > 0) {\n            <select\n              [(ngModel)]=\"formData.typeId\"\n              (change)=\"pcTypeChanged($event)\"\n              [disabled]=\"formData.id || useStrictReadonlyForm\"\n              [matTooltip]=\"formData.id ? 'Type cannot be changed' : ''\"\n              matTooltipPosition=\"below\"\n              id=\"SelectedConfigType\"\n              class=\"form-field-dropdown\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              >\n              <option value=\"\">Select posture check type...</option>\n              @for (type of postureCheckTypes; track type) {\n                <option\n                  [value]=\"type.id\"\n                  >\n                  {{ type.name }}\n                </option>\n              }\n            </select>\n          }\n        </lib-form-field-container>\n        @if (formData.typeId === 'MAC') {\n          <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.macAddresses\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter mc addresses\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['macAddresses'] }\"\n              [invalid]=\"errors['macAddresses']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'DOMAIN') {\n          <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n            <lib-chips-input\n              (keyup)=\"macAddressesChange($event)\"\n              [(ngModel)]=\"formData.domains\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter domains\"\n              [addOnBlur]=\"true\"\n              [ngClass]=\"{ error: errors['domains'] }\"\n              [invalid]=\"errors['domains']\"\n              separator=\",\"\n              (keyup.enter)=\"preventEnterProp($event)\"\n            ></lib-chips-input>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS') {\n          <lib-form-field-container [title]=\"'Process Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" [contentClass]=\"'form-field-input-group'\">\n            <div class=\"form-field-label-container process-os-details-header\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <lib-filter-select\n                placeholder=\"Select OS...\"\n                optionLabel=\"name\"\n                optionValue=\"type\"\n                [options]=\"osTypes\"\n                [searchable]=\"false\"\n                [showClear]=\"true\"\n                [(ngModel)]=\"formData.process.osType\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                >\n                <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                  @if (value && value !== '') {\n                    <div class=\"os-type-dropdown-item\">\n                      <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                      <div>{{ value }}</div>\n                    </div>\n                  }\n                </ng-template>\n                <ng-template libFilterSelectOption let-os>\n                  <div class=\"os-type-dropdown-item\">\n                    <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                    <div>{{ os.name }}</div>\n                  </div>\n                </ng-template>\n              </lib-filter-select>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Binary Hashes</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Valid sha256 hashes of a binary\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n              </div>\n              <lib-chips-input [(ngModel)]=\"formData.process.hashes\"\n                [allowDuplicate]=\"false\"\n                placeholder=\"Enter hashes\"\n                [addOnBlur]=\"true\"\n                [ngClass]=\"{ error: errors['processHashes'] }\"\n                [invalid]=\"errors['processHashes']\"\n                separator=\",\"\n                (keyup.enter)=\"preventEnterProp($event)\"\n                [disabled]=\"useStrictReadonlyForm\"\n              ></lib-chips-input>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Path</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"formData.process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Signer Fingerprints</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"Fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter a fingerprint\" [(ngModel)]=\"formData.process.signerFingerprint\" [ngClass]=\"{error: errors['androidOSMin']}\"/>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'PROCESS_MULTI') {\n          <lib-form-field-container [title]=\"'Process Multi Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" >\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Semantic</span>\n                </div>\n                <span class=\"form-field-label\" >Required</span>\n              </div>\n              <select\n                [(ngModel)]=\"formData.semantic\"\n                id=\"PolicySemantic\"\n                class=\"form-field-dropdown\"\n                >\n                <option value=\"AllOf\">AllOf</option>\n                <option value=\"AnyOf\">AnyOf</option>\n              </select>\n            </div>\n            @for (process of processMultiItems; track process; let i = $index) {\n              <div class=\"process-multi-item form-field-input-group\">\n                @if (processMultiItems.length > 1) {\n                  <div class=\"icon-clear\" (click)=\"removeProcessItem(i)\"></div>\n                }\n                <div class=\"form-field-label-container process-os-details-header\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Operating System</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <lib-filter-select\n                    placeholder=\"Select OS...\"\n                    optionLabel=\"name\"\n                    optionValue=\"type\"\n                    [options]=\"osTypes\"\n                    [searchable]=\"false\"\n                    [showClear]=\"true\"\n                    [(ngModel)]=\"process.osType\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    >\n                    <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n                      @if (value && value !== '') {\n                        <div class=\"os-type-dropdown-item\">\n                          <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n                          <div>{{ value }}</div>\n                        </div>\n                      }\n                    </ng-template>\n                    <ng-template libFilterSelectOption let-os>\n                      <div class=\"os-type-dropdown-item\">\n                        <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n                        <div>{{ os.name }}</div>\n                      </div>\n                    </ng-template>\n                  </lib-filter-select>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Binary Hashes</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Valid sha256 hashes of a binary\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                  </div>\n                  <lib-chips-input [(ngModel)]=\"process.hashes\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter hashes\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['processHashes'] }\"\n                    [invalid]=\"errors['processHashes']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Path</span>\n                    </div>\n                    <span class=\"form-field-label\" >Required</span>\n                  </div>\n                  <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-header\">\n                    <div class=\"form-field-title-container\">\n                      <span class=\"form-field-title\">Signer Fingerprints</span>\n                      <div\n                        class=\"form-field-info infoicon\"\n                        matTooltip=\"Signer fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n                        matTooltipPosition=\"below\"\n                      ></div>\n                    </div>\n                  </div>\n                  <lib-chips-input (keyup)=\"macAddressesChange($event)\"\n                    [(ngModel)]=\"process.signerFingerprints\"\n                    [allowDuplicate]=\"false\"\n                    placeholder=\"Enter signer fingerprints\"\n                    [addOnBlur]=\"true\"\n                    [ngClass]=\"{ error: errors['process[' + i +'].signerFingerprints'] }\"\n                    [invalid]=\"errors['process[' + i +'].signerFingerprints']\"\n                    separator=\",\"\n                    (keyup.enter)=\"preventEnterProp($event)\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                  ></lib-chips-input>\n                </div>\n              </div>\n            }\n            <div class=\"buttons process-multi-buttons\">\n              <button class=\"button\" (click)=\"addProcessItem()\">Add Another Process</button>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'MFA') {\n          <lib-form-field-container\n            [title]=\"'Multi Factor Details'\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\n            <div class=\"form-field-row\">\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Timeout (seconds)</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"# in seconds\" [(ngModel)]=\"formData.timeoutSeconds\" [ngClass]=\"{error: errors['timeoutSeconds']}\" type=\"number\"/>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('wake')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Wake</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnWake }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnWake\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnWake\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('unlock')\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Require On Unlock</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Require</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: formData.promptOnUnlock }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.promptOnUnlock\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.promptOnUnlock\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        @if (formData.typeId === 'OS') {\n          <lib-form-field-container\n            [showHeader]=\"false\"\n            [layout]=\"'column'\"\n            [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n            >\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Operating System</span>\n                </div>\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('Android')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button android-os-button\"></div>\n                    <div class=\"config-container-label\">Android</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Android.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Android.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Android.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Min Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.min\" [ngClass]=\"{error: errors['androidOSMin']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Max Version</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.max\" [ngClass]=\"{error: errors['androidOSMax']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('iOS')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button ios-os-button\"></div>\n                    <div class=\"config-container-label\">iOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.iOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.iOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.iOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.min\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.max\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Linux')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button linux-os-button\"></div>\n                    <div class=\"config-container-label\">Linux</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Linux.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Linux.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Linux.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.min\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.max\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\">\n                <div class=\"config-container toggle-container os-toggle-container\"\n                  (click)=\"toggleOS('macOS')\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button mac-os-button\"></div>\n                    <div class=\"config-container-label\">macOS</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.macOS.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.macOS.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.macOS.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.min\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.max\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('Windows')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-os-button\"></div>\n                    <div class=\"config-container-label\">Windows</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.Windows.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.Windows.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.Windows.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.min\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.max\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n              </div>\n            </div>\n            <div class=\"form-field-row os-version-row\">\n              <div class=\"config-item os-toggle-container\"\n                (click)=\"toggleOS('WindowsServer')\">\n                <div class=\"config-container toggle-container os-toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"pc-os-button windows-server-os-button\"></div>\n                    <div class=\"config-container-label\">Windows Server</div>\n                  </div>\n                  <div\n                    [ngClass]=\"{ on: osCheckData.WindowsServer.enabled }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!osCheckData.WindowsServer.enabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"osCheckData.WindowsServer.enabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.min\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n              <div class=\"form-field-label-container\">\n                <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.max\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          @if (!hideTags) {\n            <lib-form-field-container\n              [title]=\"'Custom Tags'\"\n              [label]=\"'OPTIONAL'\"\n              class=\"form-field-advanced\"\n              >\n              <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n      @if (showApiCalls) {\n        <div class=\"form-group-column two-fifths\">\n          <lib-form-field-container\n            [title]=\"'API Calls'\"\n            [label]=\"''\"\n            [headerActions]=\"apiOptions\"\n            (actionRequested)=\"apiActionRequested($event)\"\n            >\n            <div class=\"form-row\">\n              <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n              <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        </div>\n      }\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".posture-check-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}.os-toggle-container{gap:var(--gapSmall)}.os-toggle-container .config-container-label{text-transform:unset}.os-toggle-container{height:var(--defaultInputHeight);cursor:pointer}.os-toggle-container:hover .pc-os-button{transform:scale(1.05)}.os-version-row input:disabled{color:transparent!important}.os-version-row input:disabled::placeholder{color:transparent!important}.process-os-details-header{margin-top:var(--marginSmall)}input:disabled,select:disabled,textarea:disabled{opacity:.3!important;cursor:not-allowed}.process-multi-buttons{display:flex;flex-direction:row;justify-content:flex-end;margin:0}.process-multi-buttons button{background-color:var(--primaryColor);box-shadow:none;font-size:.75rem}.process-multi-buttons button:hover{filter:brightness(.8)}.process-multi-buttons button:active{transform:translateY(.0625rem)}.process-multi-item{display:flex;flex-direction:column;position:relative;gap:var(--gapMedium);border-width:.125rem;border-color:var(--menu);border-style:solid;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.process-multi-item .icon-clear{position:absolute;top:0;right:0;color:var(--red);margin-top:-.5rem;margin-right:-.5rem;background:var(--background);font-size:1.5rem;border-radius:2rem;cursor:pointer}.process-multi-item .icon-clear:hover{filter:brightness(.8)}.process-multi-item .icon-clear:active{transform:translateY(.0625rem)}.os-type-dropdown-item{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.os-type-dropdown-item div{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText)}.os-type-dropdown-item .os-type-dropdown-icon{background-size:1.75rem;height:1.75rem;width:1.75rem;display:inline-block;background-position-x:center;background-position-y:center}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Android{background-image:url(/assets/images/android-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-iOS{background-image:url(/assets/images/ios-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Linux{background-image:url(/assets/images/linux-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-macOS{background-image:url(/assets/images/mac-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Windows{background-image:url(/assets/images/windows-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-WindowsServer{background-image:url(/assets/images/windows-server-os.png)}.pc-os-button{background-size:2rem;height:2rem;width:2rem;display:inline-block;background-position-x:center;background-position-y:center;margin-right:.5rem}.pc-os-button.android-os-button{background-image:url(/assets/images/android-os.png)}.pc-os-button.ios-os-button{background-image:url(/assets/images/ios-os.png)}.pc-os-button.linux-os-button{background-image:url(/assets/images/linux-os.png)}.pc-os-button.mac-os-button{background-image:url(/assets/images/mac-os.png)}.pc-os-button.windows-os-button{background-image:url(/assets/images/windows-os.png)}.pc-os-button.windows-server-os-button{background-color:var(--offWhite_ALWAYS);border-radius:2rem;width:2rem;height:2rem;min-width:2rem;background-size:1.625rem;background-image:url(/assets/images/windows-server-os.png)}::ng-deep .posture-check-form-container .p-dropdown-panel .p-dropdown-items .p-dropdown-item{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText);padding:.25rem var(--paddingMedium)}::ng-deep .posture-check-form-container p-dropdown .p-dropdown.p-component .p-inputtext.p-dropdown-label{padding:0 var(--paddingMedium)}::ng-deep p-chips input[type=text]{width:100%}::ng-deep p-chips ul{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: PostureCheckFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SHAREDZ_EXTENSION]
@@ -34017,7 +34233,7 @@ class GeolocateFilterBarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: GeolocateFilterBarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: GeolocateFilterBarComponent, isStandalone: false, selector: "lib-geolocate-filter-bar", inputs: { selectedRouterAttributes: "selectedRouterAttributes", selectedIdentityAttributes: "selectedIdentityAttributes", selectedIdentityNamedAttributes: "selectedIdentityNamedAttributes", selectedServiceAttributes: "selectedServiceAttributes", selectedServiceNamedAttributes: "selectedServiceNamedAttributes", selectedConnectionStatus: "selectedConnectionStatus", routerRoleAttributes: "routerRoleAttributes", identityRoleAttributes: "identityRoleAttributes", identityNamedAttributes: "identityNamedAttributes", serviceRoleAttributes: "serviceRoleAttributes", serviceNamedAttributes: "serviceNamedAttributes", filtersApplied: "filtersApplied", showRouterFilterSelector: "showRouterFilterSelector", showIdentityFilterSelector: "showIdentityFilterSelector", showServiceFilterSelector: "showServiceFilterSelector", showConnectionStatusFilterSelector: "showConnectionStatusFilterSelector" }, outputs: { routerFilterClicked: "routerFilterClicked", identityFilterClicked: "identityFilterClicked", serviceFilterClicked: "serviceFilterClicked", connectionStatusFilterClicked: "connectionStatusFilterClicked", routerFilterClosed: "routerFilterClosed", identityFilterClosed: "identityFilterClosed", serviceFilterClosed: "serviceFilterClosed", connectionStatusFilterClosed: "connectionStatusFilterClosed", routerRoleAttributesChanged: "routerRoleAttributesChanged", identityNamedAttributesChanged: "identityNamedAttributesChanged", identityRoleAttributesChanged: "identityRoleAttributesChanged", serviceNamedAttributesChanged: "serviceNamedAttributesChanged", serviceRoleAttributesChanged: "serviceRoleAttributesChanged", connectionStatusChanged: "connectionStatusChanged", identityFilterChanged: "identityFilterChanged", serviceFilterChanged: "serviceFilterChanged", clearFiltersClicked: "clearFiltersClicked", selectedRouterAttributesChange: "selectedRouterAttributesChange", selectedIdentityAttributesChange: "selectedIdentityAttributesChange", selectedIdentityNamedAttributesChange: "selectedIdentityNamedAttributesChange", selectedServiceAttributesChange: "selectedServiceAttributesChange", selectedServiceNamedAttributesChange: "selectedServiceNamedAttributesChange", selectedConnectionStatusChange: "selectedConnectionStatusChange" }, viewQueries: [{ propertyName: "routerFilterSelector", first: true, predicate: ["routerFilterSelector"], descendants: true }, { propertyName: "identityFilterSelector", first: true, predicate: ["identityFilterSelector"], descendants: true }, { propertyName: "serviceFilterSelector", first: true, predicate: ["serviceFilterSelector"], descendants: true }, { propertyName: "connectionStatusFilterSelector", first: true, predicate: ["connectionStatusFilterSelector"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dashboard-filters-container\">\n  <div class=\"left-side-filters\">\n    <div class=\"map-filters\">\n      <div class=\"dashboard-multi-filter\" (click)=\"routerFilterClicked.emit($event)\" [ngClass]=\"{'filter-open': showRouterFilterSelector, 'filter-applied': selectedRouterAttributes.length > 0}\">\n        <span class=\"dashboard-multi-title\">{{selectedRouterAttributes.length > 0 ? '(' + selectedRouterAttributes.length + ') ' : ''}}Routers</span>\n        <div class=\"expand-collapse-icon icon-RightPage\"></div>\n        <div class=\"filter-dropdown\"  *ngIf=\"showRouterFilterSelector\" (clickOutside)=\"routerFilterClosed.emit($event)\">\n          <lib-tag-selector\n            [(selectedRoleAttributes)]=\"selectedRouterAttributes\"\n            (selectedRoleAttributesChange)=\"routerRoleAttributesChanged.emit($event); selectedRouterAttributesChange.emit($event)\"\n            [availableRoleAttributes]=\"routerRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Routers'\"\n            #routerFilterSelector\n          ></lib-tag-selector>\n        </div>\n      </div>\n      <div class=\"dashboard-multi-filter\" (click)=\"identityFilterClicked.emit($event)\" [ngClass]=\"{'filter-open': showIdentityFilterSelector, 'filter-applied': selectedIdentityAttributes.length > 0 || selectedIdentityNamedAttributes.length > 0}\">\n        <span class=\"dashboard-multi-title\">{{(selectedIdentityAttributes.length + selectedIdentityNamedAttributes.length) > 0 ? '(' + (selectedIdentityAttributes.length + selectedIdentityNamedAttributes.length) + ') ' : ''}}Identities</span>\n        <div class=\"expand-collapse-icon icon-RightPage\"></div>\n        <div class=\"filter-dropdown\"  *ngIf=\"showIdentityFilterSelector\" (clickOutside)=\"identityFilterClosed.emit($event)\">\n          <lib-tag-selector\n            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n            [(selectedRoleAttributes)]=\"selectedIdentityAttributes\"\n            (selectedNamedAttributesChange)=\"identityNamedAttributesChanged.emit($event); selectedIdentityNamedAttributesChange.emit($event)\"\n            (selectedRoleAttributesChange)=\"identityRoleAttributesChanged.emit($event); selectedIdentityAttributesChange.emit($event)\"\n            [availableNamedAttributes]=\"identityNamedAttributes\"\n            [availableRoleAttributes]=\"identityRoleAttributes\"\n            [placeholder]=\"'Select identity attributes'\"\n            (filterChange)=\"identityFilterChanged.emit($event)\"\n            #identityFilterSelector\n          ></lib-tag-selector>\n        </div>\n      </div>\n      <div class=\"dashboard-multi-filter\" (click)=\"serviceFilterClicked.emit($event)\" [ngClass]=\"{'filter-open': showServiceFilterSelector, 'filter-applied': selectedServiceAttributes.length > 0 || selectedServiceNamedAttributes.length > 0}\">\n        <span class=\"dashboard-multi-title\">{{(selectedServiceAttributes.length + selectedServiceNamedAttributes.length) > 0 ? '(' + (selectedServiceAttributes.length + selectedServiceNamedAttributes.length) + ') ' : ''}}Services</span>\n        <div class=\"expand-collapse-icon icon-RightPage\"></div>\n        <div class=\"filter-dropdown\"  *ngIf=\"showServiceFilterSelector\" (clickOutside)=\"serviceFilterClosed.emit($event)\">\n          <lib-tag-selector\n            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n            [(selectedRoleAttributes)]=\"selectedServiceAttributes\"\n            (selectedNamedAttributesChange)=\"serviceNamedAttributesChanged.emit($event); selectedServiceNamedAttributesChange.emit($event)\"\n            (selectedRoleAttributesChange)=\"serviceRoleAttributesChanged.emit($event); selectedServiceAttributesChange.emit($event)\"\n            [availableNamedAttributes]=\"serviceNamedAttributes\"\n            [availableRoleAttributes]=\"serviceRoleAttributes\"\n            [placeholder]=\"'Select service attributes'\"\n            (filterChange)=\"serviceFilterChanged.emit($event)\"\n            #serviceFilterSelector\n          ></lib-tag-selector>\n        </div>\n      </div>\n      <div class=\"dashboard-multi-filter\" (click)=\"connectionStatusFilterClicked.emit($event)\" [ngClass]=\"{'filter-open': showConnectionStatusFilterSelector, 'filter-applied': selectedConnectionStatus !== 'all'}\">\n        <span class=\"dashboard-multi-title\">Connection Status</span>\n        <div class=\"expand-collapse-icon icon-RightPage\"></div>\n        <div class=\"filter-dropdown connection-status-dropdown\" *ngIf=\"showConnectionStatusFilterSelector\" (clickOutside)=\"connectionStatusFilterClosed.emit($event)\">\n          <select [(ngModel)]=\"selectedConnectionStatus\" (change)=\"selectedConnectionStatusChange.emit(selectedConnectionStatus); connectionStatusChanged.emit(selectedConnectionStatus)\" class=\"connection-status-select form-field-dropdown\" #connectionStatusFilterSelector>\n            <option value=\"all\">All</option>\n            <option value=\"online\">Online</option>\n            <option value=\"offline\">Offline</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"dashboard-filter-actions\">\n        <div *ngIf=\"filtersApplied\" class=\"add-filter-container clear-rule-filters\" (click)=\"clearFiltersClicked.emit($event)\" [ngClass]=\"{'filters-added': filtersApplied}\">\n          <div class=\"icon-HamburgerAppClose\"></div>\n          <span class=\"add-icon-label\">Clear Filters</span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"right-side-stats\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.dashboard-filters-container{height:3.25rem;width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-shrink:0;background-color:var(--mainBackground);padding:var(--paddingSmall);border-radius:4.25px}.dashboard-filters-container .left-side-filters{height:100%;width:fit-content;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--gapXL);margin-left:0}.dashboard-filters-container .map-filters{display:flex;gap:var(--gapMedium);align-items:center;justify-content:flex-start;border-radius:var(--inputBorderRadius)}.dashboard-filters-container .dashboard-multi-filter{display:flex;flex-direction:row;width:fit-content;cursor:pointer;color:var(--tableText);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);position:relative;padding:7px}.dashboard-filters-container .dashboard-multi-filter .dashboard-multi-title{font-size:.875rem;font-weight:600}.dashboard-filters-container .dashboard-multi-filter.filter-open,.dashboard-filters-container .dashboard-multi-filter:hover{color:var(--primaryColor)}.dashboard-filters-container .dashboard-multi-filter.filter-applied{background-color:var(--primary);color:var(--offWhite_ALWAYS)}.dashboard-filters-container .dashboard-multi-filter .expand-collapse-icon{font-size:.675rem;font-weight:600;transform:rotate(90deg);cursor:pointer;margin-right:.25rem}.dashboard-filters-container .filter-dropdown{position:absolute;top:2.625rem;left:4.25rem;margin-left:-4rem;z-index:9999999;background:#fff;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);box-shadow:#00000038 0 1px 24px;border-width:1px;border-style:solid;border-color:var(--placeholder);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;cursor:default;min-width:15rem}.dashboard-filters-container .filter-dropdown lib-tag-selector{min-width:15rem}.dashboard-filters-container .filter-dropdown.connection-status-dropdown{min-width:10rem}.dashboard-filters-container .filter-dropdown .connection-status-select{width:100%;padding:var(--paddingSmall) var(--paddingMedium);border:1px solid var(--inputBorder);border-radius:var(--inputBorderRadius);background-color:var(--formBackground);color:var(--tableText);font-size:.875rem;cursor:pointer}.dashboard-filters-container .filter-dropdown .connection-status-select:focus{outline:none;border-color:var(--primaryColor)}.dashboard-filters-container .dashboard-filter-actions{gap:var(--gapMedium);display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.dashboard-filters-container .dashboard-filter-actions .add-filter-container{display:flex;flex-direction:row;height:1.625rem;width:fit-content;align-items:center;border-radius:var(--inputBorderRadius);padding:var(--paddingSmall);background:var(--mainBackground);color:var(--inputBorder);cursor:pointer;transition:.3s}.dashboard-filters-container .dashboard-filter-actions .add-filter-container.filters-added{background-color:var(--primaryColor)!important}.dashboard-filters-container .dashboard-filter-actions .add-filter-container.filters-added.clear-rule-filters{background:var(--red);background-color:var(--red)!important;opacity:.15;filter:grayscale(1)}.dashboard-filters-container .dashboard-filter-actions .add-filter-container.filters-added.clear-rule-filters:hover{opacity:1;filter:none}.dashboard-filters-container .dashboard-filter-actions .add-filter-container.filters-added .icon-HamburgerAppClose{font-size:1.275rem;font-weight:600;margin-top:2px;margin-left:-2px}.dashboard-filters-container .dashboard-filter-actions .add-filter-container.filters-added .icon-HamburgerAppClose:before{color:var(--white)!important}.dashboard-filters-container .dashboard-filter-actions .add-filter-container.filters-added .add-icon-label{color:var(--white)!important}.dashboard-filters-container .dashboard-filter-actions .add-filter-container:hover{filter:brightness(.93)}.dashboard-filters-container .dashboard-filter-actions .add-filter-container .add-icon-label{font-size:.875rem;font-weight:600;color:var(--stroke)}.dashboard-filters-container .dashboard-filter-actions .add-filter-container:active{transform:translateY(1px)}.dashboard-filters-container .right-side-stats{height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:var(--paddingSmall)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: GeolocateFilterBarComponent, isStandalone: false, selector: "lib-geolocate-filter-bar", inputs: { selectedRouterAttributes: "selectedRouterAttributes", selectedIdentityAttributes: "selectedIdentityAttributes", selectedIdentityNamedAttributes: "selectedIdentityNamedAttributes", selectedServiceAttributes: "selectedServiceAttributes", selectedServiceNamedAttributes: "selectedServiceNamedAttributes", selectedConnectionStatus: "selectedConnectionStatus", routerRoleAttributes: "routerRoleAttributes", identityRoleAttributes: "identityRoleAttributes", identityNamedAttributes: "identityNamedAttributes", serviceRoleAttributes: "serviceRoleAttributes", serviceNamedAttributes: "serviceNamedAttributes", filtersApplied: "filtersApplied", showRouterFilterSelector: "showRouterFilterSelector", showIdentityFilterSelector: "showIdentityFilterSelector", showServiceFilterSelector: "showServiceFilterSelector", showConnectionStatusFilterSelector: "showConnectionStatusFilterSelector" }, outputs: { routerFilterClicked: "routerFilterClicked", identityFilterClicked: "identityFilterClicked", serviceFilterClicked: "serviceFilterClicked", connectionStatusFilterClicked: "connectionStatusFilterClicked", routerFilterClosed: "routerFilterClosed", identityFilterClosed: "identityFilterClosed", serviceFilterClosed: "serviceFilterClosed", connectionStatusFilterClosed: "connectionStatusFilterClosed", routerRoleAttributesChanged: "routerRoleAttributesChanged", identityNamedAttributesChanged: "identityNamedAttributesChanged", identityRoleAttributesChanged: "identityRoleAttributesChanged", serviceNamedAttributesChanged: "serviceNamedAttributesChanged", serviceRoleAttributesChanged: "serviceRoleAttributesChanged", connectionStatusChanged: "connectionStatusChanged", identityFilterChanged: "identityFilterChanged", serviceFilterChanged: "serviceFilterChanged", clearFiltersClicked: "clearFiltersClicked", selectedRouterAttributesChange: "selectedRouterAttributesChange", selectedIdentityAttributesChange: "selectedIdentityAttributesChange", selectedIdentityNamedAttributesChange: "selectedIdentityNamedAttributesChange", selectedServiceAttributesChange: "selectedServiceAttributesChange", selectedServiceNamedAttributesChange: "selectedServiceNamedAttributesChange", selectedConnectionStatusChange: "selectedConnectionStatusChange" }, viewQueries: [{ propertyName: "routerFilterSelector", first: true, predicate: ["routerFilterSelector"], descendants: true }, { propertyName: "identityFilterSelector", first: true, predicate: ["identityFilterSelector"], descendants: true }, { propertyName: "serviceFilterSelector", first: true, predicate: ["serviceFilterSelector"], descendants: true }, { propertyName: "connectionStatusFilterSelector", first: true, predicate: ["connectionStatusFilterSelector"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dashboard-filters-container\">\n  <div class=\"left-side-filters\">\n    <div class=\"map-filters\">\n      <div class=\"dashboard-multi-filter\" (click)=\"routerFilterClicked.emit($event)\" [ngClass]=\"{'filter-open': showRouterFilterSelector, 'filter-applied': selectedRouterAttributes.length > 0}\">\n        <span class=\"dashboard-multi-title\">{{selectedRouterAttributes.length > 0 ? '(' + selectedRouterAttributes.length + ') ' : ''}}Routers</span>\n        <div class=\"expand-collapse-icon icon-RightPage\"></div>\n        <div class=\"filter-dropdown\"  *ngIf=\"showRouterFilterSelector\" (clickOutside)=\"routerFilterClosed.emit($event)\">\n          <lib-tag-selector\n            [(selectedRoleAttributes)]=\"selectedRouterAttributes\"\n            (selectedRoleAttributesChange)=\"routerRoleAttributesChanged.emit($event); selectedRouterAttributesChange.emit($event)\"\n            [availableRoleAttributes]=\"routerRoleAttributes\"\n            [placeholder]=\"'Add attributes to group Routers'\"\n            #routerFilterSelector\n          ></lib-tag-selector>\n        </div>\n      </div>\n      <div class=\"dashboard-multi-filter\" (click)=\"identityFilterClicked.emit($event)\" [ngClass]=\"{'filter-open': showIdentityFilterSelector, 'filter-applied': selectedIdentityAttributes.length > 0 || selectedIdentityNamedAttributes.length > 0}\">\n        <span class=\"dashboard-multi-title\">{{(selectedIdentityAttributes.length + selectedIdentityNamedAttributes.length) > 0 ? '(' + (selectedIdentityAttributes.length + selectedIdentityNamedAttributes.length) + ') ' : ''}}Identities</span>\n        <div class=\"expand-collapse-icon icon-RightPage\"></div>\n        <div class=\"filter-dropdown\"  *ngIf=\"showIdentityFilterSelector\" (clickOutside)=\"identityFilterClosed.emit($event)\">\n          <lib-tag-selector\n            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n            [(selectedRoleAttributes)]=\"selectedIdentityAttributes\"\n            (selectedNamedAttributesChange)=\"identityNamedAttributesChanged.emit($event); selectedIdentityNamedAttributesChange.emit($event)\"\n            (selectedRoleAttributesChange)=\"identityRoleAttributesChanged.emit($event); selectedIdentityAttributesChange.emit($event)\"\n            [availableNamedAttributes]=\"identityNamedAttributes\"\n            [availableRoleAttributes]=\"identityRoleAttributes\"\n            [placeholder]=\"'Select identity attributes'\"\n            (filterChange)=\"identityFilterChanged.emit($event)\"\n            #identityFilterSelector\n          ></lib-tag-selector>\n        </div>\n      </div>\n      <div class=\"dashboard-multi-filter\" (click)=\"serviceFilterClicked.emit($event)\" [ngClass]=\"{'filter-open': showServiceFilterSelector, 'filter-applied': selectedServiceAttributes.length > 0 || selectedServiceNamedAttributes.length > 0}\">\n        <span class=\"dashboard-multi-title\">{{(selectedServiceAttributes.length + selectedServiceNamedAttributes.length) > 0 ? '(' + (selectedServiceAttributes.length + selectedServiceNamedAttributes.length) + ') ' : ''}}Services</span>\n        <div class=\"expand-collapse-icon icon-RightPage\"></div>\n        <div class=\"filter-dropdown\"  *ngIf=\"showServiceFilterSelector\" (clickOutside)=\"serviceFilterClosed.emit($event)\">\n          <lib-tag-selector\n            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n            [(selectedRoleAttributes)]=\"selectedServiceAttributes\"\n            (selectedNamedAttributesChange)=\"serviceNamedAttributesChanged.emit($event); selectedServiceNamedAttributesChange.emit($event)\"\n            (selectedRoleAttributesChange)=\"serviceRoleAttributesChanged.emit($event); selectedServiceAttributesChange.emit($event)\"\n            [availableNamedAttributes]=\"serviceNamedAttributes\"\n            [availableRoleAttributes]=\"serviceRoleAttributes\"\n            [placeholder]=\"'Select service attributes'\"\n            (filterChange)=\"serviceFilterChanged.emit($event)\"\n            #serviceFilterSelector\n          ></lib-tag-selector>\n        </div>\n      </div>\n      <div class=\"dashboard-multi-filter\" (click)=\"connectionStatusFilterClicked.emit($event)\" [ngClass]=\"{'filter-open': showConnectionStatusFilterSelector, 'filter-applied': selectedConnectionStatus !== 'all'}\">\n        <span class=\"dashboard-multi-title\">Connection Status</span>\n        <div class=\"expand-collapse-icon icon-RightPage\"></div>\n        <div class=\"filter-dropdown connection-status-dropdown\" *ngIf=\"showConnectionStatusFilterSelector\" (clickOutside)=\"connectionStatusFilterClosed.emit($event)\">\n          <select [(ngModel)]=\"selectedConnectionStatus\" (change)=\"selectedConnectionStatusChange.emit(selectedConnectionStatus); connectionStatusChanged.emit(selectedConnectionStatus)\" class=\"connection-status-select form-field-dropdown\" #connectionStatusFilterSelector>\n            <option value=\"all\">All</option>\n            <option value=\"online\">Online</option>\n            <option value=\"offline\">Offline</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"dashboard-filter-actions\">\n        <div *ngIf=\"filtersApplied\" class=\"add-filter-container clear-rule-filters\" (click)=\"clearFiltersClicked.emit($event)\" [ngClass]=\"{'filters-added': filtersApplied}\">\n          <div class=\"icon-HamburgerAppClose\"></div>\n          <span class=\"add-icon-label\">Clear Filters</span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"right-side-stats\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.dashboard-filters-container{height:3.25rem;width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-shrink:0;background-color:var(--mainBackground);padding:var(--paddingSmall);border-radius:4.25px}.dashboard-filters-container .left-side-filters{height:100%;width:fit-content;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--gapXL);margin-left:0}.dashboard-filters-container .map-filters{display:flex;gap:var(--gapMedium);align-items:center;justify-content:flex-start;border-radius:var(--inputBorderRadius)}.dashboard-filters-container .dashboard-multi-filter{display:flex;flex-direction:row;width:fit-content;cursor:pointer;color:var(--tableText);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);position:relative;padding:7px}.dashboard-filters-container .dashboard-multi-filter .dashboard-multi-title{font-size:.875rem;font-weight:600}.dashboard-filters-container .dashboard-multi-filter.filter-open,.dashboard-filters-container .dashboard-multi-filter:hover{color:var(--primaryColor)}.dashboard-filters-container .dashboard-multi-filter.filter-applied{background-color:var(--primary);color:var(--offWhite_ALWAYS)}.dashboard-filters-container .dashboard-multi-filter .expand-collapse-icon{font-size:.675rem;font-weight:600;transform:rotate(90deg);cursor:pointer;margin-right:.25rem}.dashboard-filters-container .filter-dropdown{position:absolute;top:2.625rem;left:4.25rem;margin-left:-4rem;z-index:9999999;background:#fff;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);box-shadow:#00000038 0 1px 24px;border-width:1px;border-style:solid;border-color:var(--placeholder);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;cursor:default;min-width:15rem}.dashboard-filters-container .filter-dropdown lib-tag-selector{min-width:15rem}.dashboard-filters-container .filter-dropdown.connection-status-dropdown{min-width:10rem}.dashboard-filters-container .filter-dropdown .connection-status-select{width:100%;padding:var(--paddingSmall) var(--paddingMedium);border:1px solid var(--inputBorder);border-radius:var(--inputBorderRadius);background-color:var(--formBackground);color:var(--tableText);font-size:.875rem;cursor:pointer}.dashboard-filters-container .filter-dropdown .connection-status-select:focus{outline:none;border-color:var(--primaryColor)}.dashboard-filters-container .dashboard-filter-actions{gap:var(--gapMedium);display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.dashboard-filters-container .dashboard-filter-actions .add-filter-container{display:flex;flex-direction:row;height:1.625rem;width:fit-content;align-items:center;border-radius:var(--inputBorderRadius);padding:var(--paddingSmall);background:var(--mainBackground);color:var(--inputBorder);cursor:pointer;transition:.3s}.dashboard-filters-container .dashboard-filter-actions .add-filter-container.filters-added{background-color:var(--primaryColor)!important}.dashboard-filters-container .dashboard-filter-actions .add-filter-container.filters-added.clear-rule-filters{background:var(--red);background-color:var(--red)!important;opacity:.15;filter:grayscale(1)}.dashboard-filters-container .dashboard-filter-actions .add-filter-container.filters-added.clear-rule-filters:hover{opacity:1;filter:none}.dashboard-filters-container .dashboard-filter-actions .add-filter-container.filters-added .icon-HamburgerAppClose{font-size:1.275rem;font-weight:600;margin-top:2px;margin-left:-2px}.dashboard-filters-container .dashboard-filter-actions .add-filter-container.filters-added .icon-HamburgerAppClose:before{color:var(--white)!important}.dashboard-filters-container .dashboard-filter-actions .add-filter-container.filters-added .add-icon-label{color:var(--white)!important}.dashboard-filters-container .dashboard-filter-actions .add-filter-container:hover{filter:brightness(.93)}.dashboard-filters-container .dashboard-filter-actions .add-filter-container .add-icon-label{font-size:.875rem;font-weight:600;color:var(--stroke)}.dashboard-filters-container .dashboard-filter-actions .add-filter-container:active{transform:translateY(1px)}.dashboard-filters-container .right-side-stats{height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:var(--paddingSmall)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: GeolocateFilterBarComponent, decorators: [{
             type: Component,
@@ -41195,7 +41411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 }] }, { type: ZitiOidcService }, { type: GrowlerService }, { type: i0.Injector }] });
 
 const ZAC_VERSION = {
-    "version": "4.5.0"
+    "version": "4.5.2"
 };
 
 /*