npm - @openziti/ziti-console-lib - Versions diffs - 1.0.0 → 1.0.1 - Mend

@openziti/ziti-console-lib 1.0.0 → 1.0.1

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

Files changed (33) hide show

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

@@ -2085,7 +2085,7 @@ class ZitiDataService {
         this.router = router;
         this.dataServiceType = '';
     }
-    getRoleFilter(roleAttributes) {
+    getRoleFilter(roleAttributes, semantic = 'AnyOf') {
         let hasAll = false;
         roleAttributes.forEach((attr) => {
             if (attr === 'all') {
@@ -2100,7 +2100,8 @@ class ZitiDataService {
                     filterName: "Attributes",
                     label: "",
                     type: "ATTRIBUTE",
-                    value: roleAttributes
+                    value: roleAttributes,
+                    semantic
                 }
             ];
         }
@@ -4743,11 +4744,11 @@ class ListPageHeaderComponent {
         return tabUrl === path;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListPageHeaderComponent, selector: "lib-list-page-header", inputs: { title: "title", tabs: "tabs", showAdd: "showAdd", hideAction: "hideAction" }, outputs: { actionClicked: "actionClicked" }, ngImport: i0, template: "<div class=\"header\">\n    <div class=\"title\">\n        <span>{{title}}</span>\n    </div>\n    <div class=\"bread\"></div>\n    <div class=\"line\"></div>\n    <div class=\"tabs\">\n        <div *ngFor=\"let tab of tabs\" class=\"tab\" [ngClass]=\"{selected: tabSelected(tab)}\" [routerLink]=\"tab.url\" [hidden]=\"tab.hidden\">{{tab.label}}</div>\n    </div>\n    <div *ngIf=\"showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('add')\"\n         class=\"action icon-plus icon-add\" data-action=\"add\"></div>\n    <div *ngIf=\"!showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('delete')\"\n         class=\"action icon-minus icon-delete\" data-action=\"delete\"></div>\n</div>\n", styles: [".header{position:relative;display:inline-block;width:100%}.header [class^=icon-],.header [class*=\" icon-\"]{font-family:icomoon,serif!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.header .hideAction{display:none}.header .action{text-align:center;color:var(--white);line-height:3rem;font-size:1.875rem;width:3rem;height:3rem;border-radius:var(--inputBorderRadius);position:absolute;right:0;top:1.125rem;background-color:var(--primary);cursor:pointer;overflow:hidden;z-index:24;box-shadow:var(--shadow);transition:var(--transition)}.header .action:hover{transform:translateY(0)}.header .action.icon-delete:active,.header .action:active{transform:scale(.9);background-color:var(--formSubGroup)}.header .action.icon-delete{background-color:var(--red)}.header .line{position:absolute;width:100%;top:2.5rem;height:.25rem;background-color:var(--stroke)}.header .bread{position:absolute;right:4.375rem;top:.625rem;font-size:.8125rem;font-weight:600;text-transform:uppercase}.header .tabs{position:relative;display:flex;flex:1 1;flex-wrap:wrap;width:100%;font-size:.875rem;min-height:2.5rem;padding-top:1rem}.header .tabs .tab{position:relative;float:left;margin-right:1.25rem;padding-bottom:.3125rem;margin-bottom:.625rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition);border-bottom-width:.25rem;border-bottom-color:transparent;border-bottom-style:solid}.header .tabs .tab:hover{border-bottom-color:var(--inputBorder)}.header .tabs .tab.selected,.header .tabs .tab.selected:hover{border-bottom-color:var(--primaryColor)}.header .title{height:1.875rem;overflow:hidden;font-family:Russo One,serif;color:var(--primary);filter:brightness(50%);font-size:1.875rem;text-transform:uppercase;font-weight:400;line-height:2.125rem}@media (max-width: 1024px){.title{font-size:1.25rem!important}.action{line-height:2.8125rem!important;font-size:1.25rem!important;width:2.8125rem!important;height:2.8125rem!important;border-radius:2.5rem!important;top:1.25rem!important;right:0!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListPageHeaderComponent, selector: "lib-list-page-header", inputs: { title: "title", tabs: "tabs", showAdd: "showAdd", hideAction: "hideAction" }, outputs: { actionClicked: "actionClicked" }, ngImport: i0, template: "<div class=\"header\">\n    <div class=\"title\">\n        <span>{{title}}</span>\n    </div>\n    <div class=\"bread\"></div>\n    <div class=\"line\"></div>\n    <div class=\"tabs\">\n        <div *ngFor=\"let tab of tabs\" class=\"tab\" [ngClass]=\"{selected: tabSelected(tab)}\" [routerLink]=\"tab.url\" [hidden]=\"tab.hidden\">{{tab.label}}</div>\n    </div>\n    <div *ngIf=\"showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('add')\"\n         class=\"action icon-plus icon-add\" data-action=\"add\"></div>\n    <div *ngIf=\"!showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('delete')\"\n         class=\"action icon-minus icon-delete\" data-action=\"delete\"></div>\n</div>\n", styles: [".header{position:relative;display:inline-block;width:100%}.header [class^=icon-],.header [class*=\" icon-\"]{font-family:icomoon,serif!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.header .hideAction{display:none}.header .action{text-align:center;color:var(--offWhite_ALWAYS);line-height:3rem;font-size:1.875rem;width:3rem;height:3rem;border-radius:var(--inputBorderRadius);position:absolute;right:0;top:1.125rem;background-color:var(--primary);cursor:pointer;overflow:hidden;z-index:24;box-shadow:var(--shadow);transition:var(--transition)}.header .action:hover{transform:translateY(0)}.header .action.icon-delete:active,.header .action:active{transform:scale(.9);background-color:var(--formSubGroup)}.header .action.icon-delete{background-color:var(--red)}.header .line{position:absolute;width:100%;top:2.5rem;height:.25rem;background-color:var(--stroke)}.header .bread{position:absolute;right:4.375rem;top:.625rem;font-size:.8125rem;font-weight:600;text-transform:uppercase}.header .tabs{position:relative;display:flex;flex:1 1;flex-wrap:wrap;width:100%;font-size:.875rem;min-height:2.5rem;padding-top:1rem}.header .tabs .tab{position:relative;float:left;margin-right:1.25rem;padding-bottom:.3125rem;margin-bottom:.625rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition);border-bottom-width:.25rem;border-bottom-color:transparent;border-bottom-style:solid}.header .tabs .tab:hover{border-bottom-color:var(--inputBorder)}.header .tabs .tab.selected,.header .tabs .tab.selected:hover{border-bottom-color:var(--primaryColor)}.header .title{height:1.875rem;overflow:hidden;font-family:Russo One,serif;color:var(--primary);filter:brightness(var(--brightnessDark));font-size:1.875rem;text-transform:uppercase;font-weight:400;line-height:2.125rem}@media (max-width: 1024px){.title{font-size:1.25rem!important}.action{line-height:2.8125rem!important;font-size:1.25rem!important;width:2.8125rem!important;height:2.8125rem!important;border-radius:2.5rem!important;top:1.25rem!important;right:0!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListPageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-list-page-header', template: "<div class=\"header\">\n    <div class=\"title\">\n        <span>{{title}}</span>\n    </div>\n    <div class=\"bread\"></div>\n    <div class=\"line\"></div>\n    <div class=\"tabs\">\n        <div *ngFor=\"let tab of tabs\" class=\"tab\" [ngClass]=\"{selected: tabSelected(tab)}\" [routerLink]=\"tab.url\" [hidden]=\"tab.hidden\">{{tab.label}}</div>\n    </div>\n    <div *ngIf=\"showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('add')\"\n         class=\"action icon-plus icon-add\" data-action=\"add\"></div>\n    <div *ngIf=\"!showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('delete')\"\n         class=\"action icon-minus icon-delete\" data-action=\"delete\"></div>\n</div>\n", styles: [".header{position:relative;display:inline-block;width:100%}.header [class^=icon-],.header [class*=\" icon-\"]{font-family:icomoon,serif!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.header .hideAction{display:none}.header .action{text-align:center;color:var(--white);line-height:3rem;font-size:1.875rem;width:3rem;height:3rem;border-radius:var(--inputBorderRadius);position:absolute;right:0;top:1.125rem;background-color:var(--primary);cursor:pointer;overflow:hidden;z-index:24;box-shadow:var(--shadow);transition:var(--transition)}.header .action:hover{transform:translateY(0)}.header .action.icon-delete:active,.header .action:active{transform:scale(.9);background-color:var(--formSubGroup)}.header .action.icon-delete{background-color:var(--red)}.header .line{position:absolute;width:100%;top:2.5rem;height:.25rem;background-color:var(--stroke)}.header .bread{position:absolute;right:4.375rem;top:.625rem;font-size:.8125rem;font-weight:600;text-transform:uppercase}.header .tabs{position:relative;display:flex;flex:1 1;flex-wrap:wrap;width:100%;font-size:.875rem;min-height:2.5rem;padding-top:1rem}.header .tabs .tab{position:relative;float:left;margin-right:1.25rem;padding-bottom:.3125rem;margin-bottom:.625rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition);border-bottom-width:.25rem;border-bottom-color:transparent;border-bottom-style:solid}.header .tabs .tab:hover{border-bottom-color:var(--inputBorder)}.header .tabs .tab.selected,.header .tabs .tab.selected:hover{border-bottom-color:var(--primaryColor)}.header .title{height:1.875rem;overflow:hidden;font-family:Russo One,serif;color:var(--primary);filter:brightness(50%);font-size:1.875rem;text-transform:uppercase;font-weight:400;line-height:2.125rem}@media (max-width: 1024px){.title{font-size:1.25rem!important}.action{line-height:2.8125rem!important;font-size:1.25rem!important;width:2.8125rem!important;height:2.8125rem!important;border-radius:2.5rem!important;top:1.25rem!important;right:0!important}}\n"] }]
+            args: [{ selector: 'lib-list-page-header', template: "<div class=\"header\">\n    <div class=\"title\">\n        <span>{{title}}</span>\n    </div>\n    <div class=\"bread\"></div>\n    <div class=\"line\"></div>\n    <div class=\"tabs\">\n        <div *ngFor=\"let tab of tabs\" class=\"tab\" [ngClass]=\"{selected: tabSelected(tab)}\" [routerLink]=\"tab.url\" [hidden]=\"tab.hidden\">{{tab.label}}</div>\n    </div>\n    <div *ngIf=\"showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('add')\"\n         class=\"action icon-plus icon-add\" data-action=\"add\"></div>\n    <div *ngIf=\"!showAdd\" [ngClass]=\"{hideAction: hideAction}\" (click)=\"clickAction('delete')\"\n         class=\"action icon-minus icon-delete\" data-action=\"delete\"></div>\n</div>\n", styles: [".header{position:relative;display:inline-block;width:100%}.header [class^=icon-],.header [class*=\" icon-\"]{font-family:icomoon,serif!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.header .hideAction{display:none}.header .action{text-align:center;color:var(--offWhite_ALWAYS);line-height:3rem;font-size:1.875rem;width:3rem;height:3rem;border-radius:var(--inputBorderRadius);position:absolute;right:0;top:1.125rem;background-color:var(--primary);cursor:pointer;overflow:hidden;z-index:24;box-shadow:var(--shadow);transition:var(--transition)}.header .action:hover{transform:translateY(0)}.header .action.icon-delete:active,.header .action:active{transform:scale(.9);background-color:var(--formSubGroup)}.header .action.icon-delete{background-color:var(--red)}.header .line{position:absolute;width:100%;top:2.5rem;height:.25rem;background-color:var(--stroke)}.header .bread{position:absolute;right:4.375rem;top:.625rem;font-size:.8125rem;font-weight:600;text-transform:uppercase}.header .tabs{position:relative;display:flex;flex:1 1;flex-wrap:wrap;width:100%;font-size:.875rem;min-height:2.5rem;padding-top:1rem}.header .tabs .tab{position:relative;float:left;margin-right:1.25rem;padding-bottom:.3125rem;margin-bottom:.625rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition);border-bottom-width:.25rem;border-bottom-color:transparent;border-bottom-style:solid}.header .tabs .tab:hover{border-bottom-color:var(--inputBorder)}.header .tabs .tab.selected,.header .tabs .tab.selected:hover{border-bottom-color:var(--primaryColor)}.header .title{height:1.875rem;overflow:hidden;font-family:Russo One,serif;color:var(--primary);filter:brightness(var(--brightnessDark));font-size:1.875rem;text-transform:uppercase;font-weight:400;line-height:2.125rem}@media (max-width: 1024px){.title{font-size:1.25rem!important}.action{line-height:2.8125rem!important;font-size:1.25rem!important;width:2.8125rem!important;height:2.8125rem!important;border-radius:2.5rem!important;top:1.25rem!important;right:0!important}}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], tabs: [{
@@ -6999,11 +7000,11 @@ class TagSelectorComponent {
         return this._selectedRoleAttributes?.length <= 0 && this._selectedNamedAttributes?.length <= 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagSelectorComponent, 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                <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n                <ul\n                        (click)=\"openSelect()\"\n                        [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n                        class=\"select2-selection__rendered\"\n                >\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedRoleAttributes\"\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                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedNamedAttributes\"\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\">@{{ 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\">@{{ item }}</span>\n                        </div>\n                    </li>\n                </ul>\n            </span>\n        </span>\n        <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n    </span>\n    <span *ngIf=\"_hasError\" class=\"err\">\n        {{ errorMessage }}\n    </span>\n\n    <span\n            *ngIf=\"!hideSelect\"\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                <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    *ngFor=\"let option of displayedRoleOptions\"\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                <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    *ngFor=\"let option of displayedNamedOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                </li>\n            </ul>\n        </span>\n    </span>\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:-moz-fit-content;width:fit-content;height:-moz-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(--white)}.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(--white)}.err{color:var(--red)!important}.select2-selection{border-radius:var(--inputBorderRadius);border-width:var(--inputBorderWidth);border-color:var(--inputBorder);border-style:solid;color:var(--white);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:-moz-fit-content;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:-moz-fit-content;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:-moz-fit-content;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:.3125rem;border-top-right-radius:0;border-top-left-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-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;height:0rem!important;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:hover{box-shadow:none;filter:none}.readOnly .select2-container input:disabled.empty{height:3.125rem}.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:-moz-fit-content;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;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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagSelectorComponent, 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                <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n                <ul\n                        (click)=\"openSelect()\"\n                        [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n                        class=\"select2-selection__rendered\"\n                >\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedRoleAttributes\"\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                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedNamedAttributes\"\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\">@{{ 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\">@{{ item }}</span>\n                        </div>\n                    </li>\n                </ul>\n            </span>\n        </span>\n        <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n    </span>\n    <span *ngIf=\"_hasError\" class=\"err\">\n        {{ errorMessage }}\n    </span>\n\n    <span\n            *ngIf=\"!hideSelect\"\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                <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    *ngFor=\"let option of displayedRoleOptions\"\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                <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    *ngFor=\"let option of displayedNamedOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                </li>\n            </ul>\n        </span>\n    </span>\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:-moz-fit-content;width:fit-content;height:-moz-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:-moz-fit-content;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:-moz-fit-content;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:-moz-fit-content;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-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;height:0rem!important;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:hover{box-shadow:none;filter:none}.readOnly .select2-container input:disabled.empty{height:3.125rem}.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:-moz-fit-content;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;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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tag-selector', 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                <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n                <ul\n                        (click)=\"openSelect()\"\n                        [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n                        class=\"select2-selection__rendered\"\n                >\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedRoleAttributes\"\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                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedNamedAttributes\"\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\">@{{ 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\">@{{ item }}</span>\n                        </div>\n                    </li>\n                </ul>\n            </span>\n        </span>\n        <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n    </span>\n    <span *ngIf=\"_hasError\" class=\"err\">\n        {{ errorMessage }}\n    </span>\n\n    <span\n            *ngIf=\"!hideSelect\"\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                <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    *ngFor=\"let option of displayedRoleOptions\"\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                <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    *ngFor=\"let option of displayedNamedOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                </li>\n            </ul>\n        </span>\n    </span>\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:-moz-fit-content;width:fit-content;height:-moz-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(--white)}.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(--white)}.err{color:var(--red)!important}.select2-selection{border-radius:var(--inputBorderRadius);border-width:var(--inputBorderWidth);border-color:var(--inputBorder);border-style:solid;color:var(--white);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:-moz-fit-content;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:-moz-fit-content;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:-moz-fit-content;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:.3125rem;border-top-right-radius:0;border-top-left-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-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;height:0rem!important;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:hover{box-shadow:none;filter:none}.readOnly .select2-container input:disabled.empty{height:3.125rem}.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:-moz-fit-content;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;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\n"] }]
+            args: [{ selector: 'lib-tag-selector', 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                <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n                <ul\n                        (click)=\"openSelect()\"\n                        [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n                        class=\"select2-selection__rendered\"\n                >\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedRoleAttributes\"\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                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedNamedAttributes\"\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\">@{{ 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\">@{{ item }}</span>\n                        </div>\n                    </li>\n                </ul>\n            </span>\n        </span>\n        <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n    </span>\n    <span *ngIf=\"_hasError\" class=\"err\">\n        {{ errorMessage }}\n    </span>\n\n    <span\n            *ngIf=\"!hideSelect\"\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                <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    *ngFor=\"let option of displayedRoleOptions\"\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                <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    *ngFor=\"let option of displayedNamedOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                </li>\n            </ul>\n        </span>\n    </span>\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:-moz-fit-content;width:fit-content;height:-moz-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:-moz-fit-content;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:-moz-fit-content;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:-moz-fit-content;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-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;height:0rem!important;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:hover{box-shadow:none;filter:none}.readOnly .select2-container input:disabled.empty{height:3.125rem}.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:-moz-fit-content;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;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
                 type: Input
             }], disableField: [{
@@ -11854,7 +11855,7 @@ class ServicePolicyFormService {
         });
     }
     getAssociatedIdentitiesById(id) {
-        this.zitiService.getSubdata('service-policies', id, 'identities').then((result) => {
+        return this.zitiService.getSubdata('service-policies', id, 'identities').then((result) => {
             this.associatedIdentities = result.data;
             this.associatedIdentityNames = this.associatedIdentities.map((ident) => {
                 return ident.name;
@@ -11869,13 +11870,13 @@ class ServicePolicyFormService {
             });
         });
     }
-    getAssociatedServicesByAttribute(roleAttributes, namedAttributes) {
+    getAssociatedServicesByAttribute(roleAttributes, namedAttributes, semantic = 'AnyOf') {
         this.associatedServiceNames = [];
         if (isEmpty(roleAttributes)) {
             this.associatedServiceNames = [...namedAttributes];
             return Promise.resolve([]);
         }
-        const filters = this.zitiService.getRoleFilter(roleAttributes);
+        const filters = this.zitiService.getRoleFilter(roleAttributes, semantic);
         const paging = this.zitiService.DEFAULT_PAGING;
         paging.noSearch = false;
         return this.zitiService.get('services', paging, filters).then((result) => {
@@ -11890,13 +11891,13 @@ class ServicePolicyFormService {
             return this.associatedServices;
         });
     }
-    getAssociatedIdentitiesByAttribute(roleAttributes, namedAttributes) {
+    getAssociatedIdentitiesByAttribute(roleAttributes, namedAttributes, semantic = 'AnyOf') {
         this.associatedIdentityNames = [];
         if (isEmpty(roleAttributes)) {
             this.associatedIdentityNames = [...namedAttributes];
             return;
         }
-        const filters = this.zitiService.getRoleFilter(roleAttributes);
+        const filters = this.zitiService.getRoleFilter(roleAttributes, semantic);
         const paging = this.zitiService.DEFAULT_PAGING;
         paging.noSearch = false;
         this.zitiService.get('identities', paging, filters).then((result) => {
@@ -11910,13 +11911,13 @@ class ServicePolicyFormService {
             this.associatedIdentityNames = this.associatedIdentityNames.filter(item => item !== undefined);
         });
     }
-    getAssociatedPostureChecksByAttribute(roleAttributes, namedAttributes) {
+    getAssociatedPostureChecksByAttribute(roleAttributes, namedAttributes, semantic = 'AnyOf') {
         this.associatedPostureCheckNames = [];
         if (isEmpty(roleAttributes)) {
             this.associatedPostureCheckNames = [...namedAttributes];
             return;
         }
-        const filters = this.zitiService.getRoleFilter(roleAttributes);
+        const filters = this.zitiService.getRoleFilter(roleAttributes, semantic);
         const paging = this.zitiService.DEFAULT_PAGING;
         paging.noSearch = false;
         this.zitiService.get('posture-checks', paging, filters).then((result) => {
@@ -20197,9 +20198,12 @@ class ServicePolicyFormComponent extends ProjectableForm {
                 this.selectedPostureRoleAttributes.push(attr.substring(1));
             }
         });
-        this.svc.getAssociatedServicesByAttribute(this.selectedServiceRoleAttributes, this.selectedServiceNamedAttributes);
-        this.svc.getAssociatedIdentitiesByAttribute(this.selectedIdentityRoleAttributes, this.selectedIdentityNamedAttributes);
-        this.svc.getAssociatedPostureChecksByAttribute(this.selectedPostureRoleAttributes, this.selectedPostureNamedAttributes);
+        this.updateAssociations();
+    }
+    updateAssociations() {
+        this.svc.getAssociatedServicesByAttribute(this.selectedServiceRoleAttributes, this.selectedServiceNamedAttributes, this.formData.semantic);
+        this.svc.getAssociatedIdentitiesByAttribute(this.selectedIdentityRoleAttributes, this.selectedIdentityNamedAttributes, this.formData.semantic);
+        this.svc.getAssociatedPostureChecksByAttribute(this.selectedPostureRoleAttributes, this.selectedPostureNamedAttributes, this.formData.semantic);
     }
     headerActionRequested(action) {
         switch (action.name) {
@@ -20321,7 +20325,7 @@ class ServicePolicyFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     [class.projectable-form-hidden]=\"!dataInit\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [class.is-scrolled]=\"isScrolled\"\n    ></lib-form-header>\n    <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"'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                    />\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                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\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                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'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                            [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n                            [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\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                            id=\"PolicyType\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"Bind\">Bind</option>\n                        <option value=\"Dial\">Dial</option>\n                    </select>\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated 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                <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                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading || !dataInit\" [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n", styles: [""], 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: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: 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"], 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            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [class.is-scrolled]=\"isScrolled\"\n    ></lib-form-header>\n    <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"'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                    />\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                            [(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]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, 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]=\"'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                            [(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                            id=\"PolicyType\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"Bind\">Bind</option>\n                        <option value=\"Dial\">Dial</option>\n                    </select>\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            (change)=\"updateAssociations()\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated 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                <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                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading || !dataInit\" [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n", styles: [""], 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: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: 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"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServicePolicyFormComponent, decorators: [{
             type: Component,
@@ -20330,7 +20334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     [class.projectable-form-hidden]=\"!dataInit\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [class.is-scrolled]=\"isScrolled\"\n    ></lib-form-header>\n    <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"'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                    />\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                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\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                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'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                            [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n                            [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\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                            id=\"PolicyType\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"Bind\">Bind</option>\n                        <option value=\"Dial\">Dial</option>\n                    </select>\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated 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                <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                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading || !dataInit\" [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n" }]
+                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     [class.projectable-form-hidden]=\"!dataInit\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [class.is-scrolled]=\"isScrolled\"\n    ></lib-form-header>\n    <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"'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                    />\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                            [(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]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, 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]=\"'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                            [(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                            id=\"PolicyType\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"Bind\">Bind</option>\n                        <option value=\"Dial\">Dial</option>\n                    </select>\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            (change)=\"updateAssociations()\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated 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                <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                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading || !dataInit\" [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n" }]
         }], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -20405,13 +20409,13 @@ class EdgeRouterPolicyFormService {
             });
         });
     }
-    getAssociatedEdgeRoutersByAttribute(roleAttributes, namedAttributes) {
+    getAssociatedEdgeRoutersByAttribute(roleAttributes, namedAttributes, semantic = 'AnyOf') {
         this.associatedEdgeRouterNames = [];
         if (isEmpty(roleAttributes)) {
             this.associatedEdgeRouterNames = [...namedAttributes];
             return;
         }
-        const filters = this.zitiService.getRoleFilter(roleAttributes);
+        const filters = this.zitiService.getRoleFilter(roleAttributes, semantic);
         const paging = this.zitiService.DEFAULT_PAGING;
         paging.noSearch = false;
         this.zitiService.get('edge-routers', paging, filters).then((result) => {
@@ -20425,13 +20429,13 @@ class EdgeRouterPolicyFormService {
             this.associatedEdgeRouterNames = this.associatedEdgeRouterNames.filter(item => item !== undefined);
         });
     }
-    getAssociatedIdentitiesByAttribute(roleAttributes, namedAttributes) {
+    getAssociatedIdentitiesByAttribute(roleAttributes, namedAttributes, semantic = 'AnyOf') {
         this.associatedIdentityNames = [];
         if (isEmpty(roleAttributes)) {
             this.associatedIdentityNames = [...namedAttributes];
             return;
         }
-        const filters = this.zitiService.getRoleFilter(roleAttributes);
+        const filters = this.zitiService.getRoleFilter(roleAttributes, semantic);
         const paging = this.zitiService.DEFAULT_PAGING;
         paging.noSearch = false;
         this.zitiService.get('identities', paging, filters).then((result) => {
@@ -20630,8 +20634,11 @@ class EdgeRouterPolicyFormComponent extends ProjectableForm {
                 this.selectedIdentityRoleAttributes.push(attr.substring(1));
             }
         });
-        this.svc.getAssociatedEdgeRoutersByAttribute(this.selectedEdgeRouterRoleAttributes, this.selectedEdgeRouterNamedAttributes);
-        this.svc.getAssociatedIdentitiesByAttribute(this.selectedIdentityRoleAttributes, this.selectedIdentityNamedAttributes);
+        this.updateAssociations();
+    }
+    updateAssociations() {
+        this.svc.getAssociatedEdgeRoutersByAttribute(this.selectedEdgeRouterRoleAttributes, this.selectedEdgeRouterNamedAttributes, this.formData?.semantic);
+        this.svc.getAssociatedIdentitiesByAttribute(this.selectedIdentityRoleAttributes, this.selectedIdentityNamedAttributes, this.formData?.semantic);
     }
     headerActionRequested(action) {
         switch (action.name) {
@@ -20747,7 +20754,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     [class.projectable-form-hidden]=\"!dataInit\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [class.is-scrolled]=\"isScrolled\"\n    ></lib-form-header>\n    <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"identitiesLoading\"\n                            [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading || !dataInit\" [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n", styles: [""], 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: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: 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"], 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            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [class.is-scrolled]=\"isScrolled\"\n    ></lib-form-header>\n    <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, 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                            [(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                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"identitiesLoading\"\n                            [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading || !dataInit\" [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n", styles: [""], 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: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: 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"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterPolicyFormComponent, decorators: [{
             type: Component,
@@ -20756,7 +20763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     [class.projectable-form-hidden]=\"!dataInit\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [class.is-scrolled]=\"isScrolled\"\n    ></lib-form-header>\n    <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"identitiesLoading\"\n                            [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading || !dataInit\" [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n" }]
+                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     [class.projectable-form-hidden]=\"!dataInit\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [class.is-scrolled]=\"isScrolled\"\n    ></lib-form-header>\n    <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, 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                            [(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                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"identitiesLoading\"\n                            [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading || !dataInit\" [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n" }]
         }], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -21285,13 +21292,13 @@ class ServiceEdgeRouterPolicyFormService {
             throw resp;
         });
     }
-    getAssociatedEdgeRoutersByAttribute(roleAttributes, namedAttributes) {
+    getAssociatedEdgeRoutersByAttribute(roleAttributes, namedAttributes, semantic = 'AnyOf') {
         this.associatedEdgeRouterNames = [];
         if (isEmpty(roleAttributes)) {
             this.associatedEdgeRouterNames = [...namedAttributes];
             return;
         }
-        const filters = this.zitiService.getRoleFilter(roleAttributes);
+        const filters = this.zitiService.getRoleFilter(roleAttributes, semantic);
         const paging = this.zitiService.DEFAULT_PAGING;
         paging.noSearch = false;
         this.zitiService.get('edge-routers', paging, filters).then((result) => {
@@ -21305,13 +21312,13 @@ class ServiceEdgeRouterPolicyFormService {
             this.associatedEdgeRouterNames = this.associatedEdgeRouterNames.filter(item => item !== undefined);
         });
     }
-    getAssociatedServicesByAttribute(roleAttributes, namedAttributes) {
+    getAssociatedServicesByAttribute(roleAttributes, namedAttributes, semantic = 'AnyOf') {
         this.associatedServiceNames = [];
         if (isEmpty(roleAttributes)) {
             this.associatedServiceNames = [...namedAttributes];
             return;
         }
-        const filters = this.zitiService.getRoleFilter(roleAttributes);
+        const filters = this.zitiService.getRoleFilter(roleAttributes, semantic);
         const paging = this.zitiService.DEFAULT_PAGING;
         paging.noSearch = false;
         this.zitiService.get('services', paging, filters).then((result) => {
@@ -21509,8 +21516,7 @@ class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
                 this.selectedServiceRoleAttributes.push(attr.substring(1));
             }
         });
-        this.svc.getAssociatedEdgeRoutersByAttribute(this.selectedEdgeRouterRoleAttributes, this.selectedEdgeRouterNamedAttributes);
-        this.svc.getAssociatedServicesByAttribute(this.selectedServiceRoleAttributes, this.selectedServiceNamedAttributes);
+        this.updateAssociations();
     }
     headerActionRequested(action) {
         switch (action.name) {
@@ -21575,6 +21581,10 @@ class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
                 break;
         }
     }
+    updateAssociations() {
+        this.svc.getAssociatedEdgeRoutersByAttribute(this.selectedEdgeRouterRoleAttributes, this.selectedEdgeRouterNamedAttributes, this.formData?.semantic);
+        this.svc.getAssociatedServicesByAttribute(this.selectedServiceRoleAttributes, this.selectedServiceNamedAttributes, this.formData?.semantic);
+    }
     copyCLICommand() {
         const erRoles = this.svc.getSelectedRoles(this.selectedEdgeRouterRoleAttributes, this.selectedEdgeRouterNamedAttributes, this.svc.edgeRouterNamedAttributesMap);
         let erRolesVar = this.getRolesCLIVariable(erRoles);
@@ -21625,7 +21635,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     [class.projectable-form-hidden]=\"!dataInit\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [class.is-scrolled]=\"isScrolled\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'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                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select 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                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\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                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this 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                <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                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading || !dataInit\" [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n", styles: [""], 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: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: 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"], 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            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [class.is-scrolled]=\"isScrolled\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'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                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, 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                            [(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                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this 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                <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                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading || !dataInit\" [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n", styles: [""], 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: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: 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"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceEdgeRouterPolicyFormComponent, decorators: [{
             type: Component,
@@ -21634,7 +21644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     [class.projectable-form-hidden]=\"!dataInit\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [class.is-scrolled]=\"isScrolled\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'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                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select 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                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\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                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this 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                <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                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading || !dataInit\" [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n" }]
+                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     [class.projectable-form-hidden]=\"!dataInit\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [class.is-scrolled]=\"isScrolled\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'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                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, 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                            [(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                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this 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                <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                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading || !dataInit\" [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n" }]
         }], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -28404,11 +28414,11 @@ class SideNavigatorComponent {
         return this.showExpandCollapseIcon || !this.navExpanded;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SideNavigatorComponent, deps: [{ token: i4.Router }, { token: ZITI_NAVIGATOR }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SideNavigatorComponent, selector: "lib-side-navigator", inputs: { version: "version" }, ngImport: i0, template: "<div class=\"side-navigator-wrapper\">\n  <div [ngClass]=\"{ 'nav-expanded': navExpanded, 'nav-hiddnen': navHidden }\" class=\"side-navigator-container\" (mouseenter)=\"showExpandCollapse($event)\" (mouseleave)=\"hideExpandCollapse($event)\">\n    <div cdkScrollable class=\"side-navigator-menu-container\" [ngClass]=\"{'hide-menu-nav-bar': hideMenuNavBar}\">\n      <div *ngFor=\"let group of currentNav.groups\" class=\"side-navigator-menu-group\">\n        <span class=\"side-navigator-menu-group-label\">{{ group.label }}</span>\n        <div class=\"side-navigator-header-buffer\" *ngIf=\"group.headerBuffer\"></div>\n        <div *ngFor=\"let item of group.menuItems\" class=\"{{item.class}}\">\n          <a\n            *ngIf=\"(!item.isBetaFeature || (item.isBetaFeature && betaFeaturesEnabled))\"\n            class=\"side-navigator-menu-item {{ item.className }}\"\n            (click)=\"doNavAction($event, item)\"\n            [ngClass]=\"{\n              selected: navItemSelected(item),\n              disabled: isNavItemDisabled(item)\n            }\"\n            [title]=\"item.tooltip\"\n            [href]=\"'./'+item.route\"\n          >\n            <div class=\"side-navigator-menu-item-icon\">\n              <div class=\"image\" class=\"{{ item.iconClass }}\"></div>\n              <span *ngIf=\"item.badgeCount\" class=\"counterBadge\">{{ item.badgeCount }}</span>\n            </div>\n            <span class=\"side-navigator-menu-item-label\">\n              {{ item.label }}\n                <span class=\"side-navigator-menu-item-sublabel\">{{ item.sublabel }}</span>\n            </span>\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"side-navigator-footer-container\">\n      <div class=\"side-navigator-version-container\">\n        <div style=\"font-size: .875rem;\" class=\"networkInfo\" id=\"NetworkVersion\">\n          <span class=\"network-semver\">{{ version }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"expand-collapse-hitbox-container\" [ngClass]=\"{'expand-collapse-container-closed': !navExpanded}\" (mouseenter)=\"showExpandCollapse($event)\" (mouseleave)=\"hideExpandCollapse($event)\">\n    <div class=\"expand-collapse-icon icon-prev\" [ngClass]=\"{'expand-collapse-icon-visible': expandCollapseIconVisible}\" (click)=\"toggleNavigationExpanded($event)\"></div>\n  </div>\n</div>\n", styles: [".side-navigator-wrapper{display:flex;flex-direction:row;height:100%}[class*=\" icon-\"].image{font-family:icomoon!important}.side-navigator-container{position:relative;top:0;left:0rem;height:100%;width:1.25rem;bottom:-.625rem;padding-top:0;padding-bottom:0;background-color:var(--formBackground);transition:var(--transition);overflow-y:hidden;z-index:999;display:flex;flex-direction:column;margin-left:var(--sideBarMargin);box-shadow:var(--sideNavigatorBoxShadow);border:none}.side-navigator-container.nav-expanded{width:19.75rem;border-right-style:solid;border-right-color:var(--inputBorder);border-width:var(--navContainerBorderWidth);background-color:var(--mainBackground)}.side-navigator-container.nav-expanded .side-navigator-header-container,.side-navigator-container.nav-expanded .side-navigator-footer-container,.side-navigator-container.nav-expanded .side-navigator-menu-container{opacity:1}.side-navigator-container .side-navigator-header-container{height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 .625rem;padding-top:var(--navHeaderPadding);opacity:0}.side-navigator-container .side-navigator-header-container .app-name-title{font-family:Russo One;text-align:center;font-size:1.5rem;line-height:2.5rem;color:var(--primaryColor);filter:brightness(var(--brightnessDark))}.side-navigator-container .side-navigator-header-container .list-area.search{padding-left:.625rem;padding-right:.625rem}.side-navigator-container .side-navigator-header-container .title{margin-top:.625rem;color:var(--primaryColor);filter:brightness(var(--brightnessDark));font-size:1.75rem;font-family:Russo One;text-align:center;font-size:1.5rem;line-height:3.5rem;animation:_ngcontent-dev-c217_fadein 1s}.side-navigator-container .side-navigator-footer-container{height:100%;display:flex;flex-direction:column;justify-content:flex-end;flex:1 1 auto;position:relative;max-height:5rem;opacity:0}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 1 auto;height:2.1875rem;max-height:2.1875rem;position:relative}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .zitiInfo,.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .networkInfo{font-size:.75rem;font-weight:800}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .ziti-semver,.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .network-semver{font-weight:900;margin-left:.1875rem;filter:brightness(.85)}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .network-semver{color:var(--primary)}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .ziti-semver{color:#f4044d}.side-navigator-container .side-navigator-menu-container{display:flex;flex-direction:column;width:100%;max-width:19.6875rem!important;flex:1 1 auto;height:100%;padding-top:var(--paddingLarge);overflow-y:auto;opacity:0}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-group{display:flex;flex-direction:column;width:100%;margin-bottom:.9375rem}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-group-label{margin-left:1.4375rem;color:var(--groupText);font-size:.875rem;position:relative;text-transform:uppercase;font-weight:600}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item{position:relative;display:flex;height:3.3125rem;cursor:pointer;align-items:center;padding-left:var(--navItemPadding);margin-left:var(--navItemMargin);margin-right:var(--navItemMargin);border-radius:var(--inputBorderRadius)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.selected{background-color:var(--navItemSelectedColor);border-right-color:var(--secondaryColor);border-right-width:.25rem;border-right-style:none}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.selected:focus,.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.selected:focus-visible{background-color:var(--navItemSelectedColor)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.disabled{opacity:.5;filter:grayscale(1);cursor:not-allowed}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.disabled:hover{background-color:transparent}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item:hover{background-color:var(--hoverBackground)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item:focus,.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item:focus-visible{background-color:var(--hoverBackground)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon{max-width:2.5rem;width:2.5rem;height:2.5rem;background-color:var(--mainBackground);border-radius:var(--inputBorderRadius);box-shadow:0 .1875rem .3125rem 1px var(--boxShadow);display:flex;align-items:center;justify-content:center;border-color:var(--mainBackground);border-width:.125rem;flex:1 0 auto;border-style:solid;font-size:1.875rem}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon .image:before{color:var(--primaryColor)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label{color:var(--tableText);font-size:1rem;text-transform:unset;font-weight:600;text-align:left;font-family:Open Sans;width:100%;margin-bottom:0;margin-left:.9375rem;display:flex}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label .side-navigator-menu-item-sublabel{color:var(--placeholder);margin-left:.3125rem}.side-navigator-container .side-navigator-menu-container.hide-menu-nav-bar::-webkit-scrollbar{display:none}.side-navigator-container .headerNetworkList,.side-navigator-container .headerTenantList{height:11.375rem;overflow-y:scroll}.side-navigator-container .headerNetworkList .row,.side-navigator-container .headerTenantList .row{color:var(--white);font-size:.875rem;font-weight:600;line-height:1.875rem;padding-left:2.8125rem;cursor:pointer;height:2rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;position:relative}.side-navigator-container .headerNetworkList .row.selected,.side-navigator-container .headerTenantList .row.selected{color:var(--white);font-weight:800;font-family:Open Sans}.side-navigator-container .headerNetworkList .row:hover,.side-navigator-container .headerTenantList .row:hover{background-color:var(--primaryColor)}.side-navigator-container .headerNetworkList .row:active,.side-navigator-container .headerTenantList .row:active{background-color:var(--primaryColor);filter:brightness(.95)}.side-navigator-container .headerNetworkList .status,.side-navigator-container .headerTenantList .status{width:1.5625rem;height:1.5625rem;top:.1875rem;left:.625rem}.side-navigator-container .navlogo{display:flex;align-items:center;justify-content:center;height:3.125rem;width:18.75rem;position:relative;background-image:var(--logoLight);background-color:transparent;background-size:14.0625rem;animation:fadein 3s;background-repeat:no-repeat;background-position:center}.side-navigator-container .navlogo.dark{background-image:var(--logoDark)}#Networks .currentNetwork,#Tenants .currentTenant{color:var(--white)}.tenants,.networks{border-color:var(--inputBorder);border-width:.125rem;border-radius:.4375rem;border-style:solid;width:16.9375rem;height:2.5rem;background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-size:1.25rem .625rem;cursor:pointer;background-color:var(--mainBackground);animation:fadein .5s;position:relative;margin-top:0;margin-bottom:.625rem}.counterBadge{display:flex;position:absolute;align-items:center;justify-content:center;top:.125rem;left:3.375rem;background-color:var(--red);box-shadow:0 .125rem .4375rem #ff0d4980;z-index:999;color:#fff;font-size:.75rem;font-weight:700;width:1.125rem;height:1.125rem;line-height:1.125rem;border-radius:.5625rem;font-family:Open Sans}.expand-collapse-hitbox-container-right{position:absolute;height:100%;width:.625rem;left:3.4375rem;z-index:1000001}.expand-collapse-hitbox-container{position:relative;height:100%;width:1.25rem;z-index:1000001}.expand-collapse-hitbox-container.expand-collapse-container-closed .expand-collapse-icon{transform:rotate(180deg)}.expand-collapse-hitbox-container .expand-collapse-icon{background:var(--background);border-radius:var(--inputBorderRadius);height:1.75rem;width:1.75rem;position:absolute;top:3.5rem;right:.4375rem;opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center;box-shadow:0 0 .375rem .1875rem var(--boxShadow);cursor:pointer;border-style:solid;border-width:1px;border-color:#dee2e6;color:var(--icon);font-weight:600;font-family:icomoon!important}.expand-collapse-hitbox-container .expand-collapse-icon:before{content:\"\\e938\"}.expand-collapse-hitbox-container .expand-collapse-icon:hover{background-color:var(--primaryColor);color:var(--white)}.expand-collapse-hitbox-container .expand-collapse-icon:active{filter:grayscale(1)}.expand-collapse-hitbox-container .expand-collapse-icon.expand-collapse-icon-visible{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SideNavigatorComponent, selector: "lib-side-navigator", inputs: { version: "version" }, ngImport: i0, template: "<div class=\"side-navigator-wrapper\">\n  <div [ngClass]=\"{ 'nav-expanded': navExpanded, 'nav-hiddnen': navHidden }\" class=\"side-navigator-container\" (mouseenter)=\"showExpandCollapse($event)\" (mouseleave)=\"hideExpandCollapse($event)\">\n    <div cdkScrollable class=\"side-navigator-menu-container\" [ngClass]=\"{'hide-menu-nav-bar': hideMenuNavBar}\">\n      <div *ngFor=\"let group of currentNav.groups\" class=\"side-navigator-menu-group\">\n        <span class=\"side-navigator-menu-group-label\">{{ group.label }}</span>\n        <div class=\"side-navigator-header-buffer\" *ngIf=\"group.headerBuffer\"></div>\n        <div *ngFor=\"let item of group.menuItems\" class=\"{{item.class}}\">\n          <a\n            *ngIf=\"(!item.isBetaFeature || (item.isBetaFeature && betaFeaturesEnabled))\"\n            class=\"side-navigator-menu-item {{ item.className }}\"\n            (click)=\"doNavAction($event, item)\"\n            [ngClass]=\"{\n              selected: navItemSelected(item),\n              disabled: isNavItemDisabled(item)\n            }\"\n            [title]=\"item.tooltip\"\n            [href]=\"'./'+item.route\"\n          >\n            <div class=\"side-navigator-menu-item-icon\">\n              <div class=\"image\" class=\"{{ item.iconClass }}\"></div>\n              <span *ngIf=\"item.badgeCount\" class=\"counterBadge\">{{ item.badgeCount }}</span>\n            </div>\n            <span class=\"side-navigator-menu-item-label\">\n              {{ item.label }}\n                <span class=\"side-navigator-menu-item-sublabel\">{{ item.sublabel }}</span>\n            </span>\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"side-navigator-footer-container\">\n      <div class=\"side-navigator-version-container\">\n        <div style=\"font-size: .875rem;\" class=\"networkInfo\" id=\"NetworkVersion\">\n          <span class=\"network-semver\">{{ version }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"expand-collapse-hitbox-container\" [ngClass]=\"{'expand-collapse-container-closed': !navExpanded}\" (mouseenter)=\"showExpandCollapse($event)\" (mouseleave)=\"hideExpandCollapse($event)\">\n    <div class=\"expand-collapse-icon icon-prev\" [ngClass]=\"{'expand-collapse-icon-visible': expandCollapseIconVisible}\" (click)=\"toggleNavigationExpanded($event)\"></div>\n  </div>\n</div>\n", styles: [".side-navigator-wrapper{display:flex;flex-direction:row;height:100%}[class*=\" icon-\"].image{font-family:icomoon!important}.side-navigator-container{position:relative;top:0;left:0rem;height:100%;width:1.25rem;bottom:-.625rem;padding-top:0;padding-bottom:0;background-color:var(--formBackground);transition:var(--transition);overflow-y:hidden;z-index:999;display:flex;flex-direction:column;margin-left:var(--sideBarMargin);box-shadow:var(--sideNavigatorBoxShadow);border:none}.side-navigator-container.nav-expanded{width:19.75rem;border-right-style:solid;border-right-color:var(--inputBorder);border-width:var(--navContainerBorderWidth);background-color:var(--mainBackground)}.side-navigator-container.nav-expanded .side-navigator-header-container,.side-navigator-container.nav-expanded .side-navigator-footer-container,.side-navigator-container.nav-expanded .side-navigator-menu-container{opacity:1}.side-navigator-container .side-navigator-header-container{height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 .625rem;padding-top:var(--navHeaderPadding);opacity:0}.side-navigator-container .side-navigator-header-container .app-name-title{font-family:Russo One;text-align:center;font-size:1.5rem;line-height:2.5rem;color:var(--primaryColor);filter:brightness(var(--brightnessDark))}.side-navigator-container .side-navigator-header-container .list-area.search{padding-left:.625rem;padding-right:.625rem}.side-navigator-container .side-navigator-header-container .title{margin-top:.625rem;color:var(--primaryColor);filter:brightness(var(--brightnessDark));font-size:1.75rem;font-family:Russo One;text-align:center;font-size:1.5rem;line-height:3.5rem;animation:_ngcontent-dev-c217_fadein 1s}.side-navigator-container .side-navigator-footer-container{height:100%;display:flex;flex-direction:column;justify-content:flex-end;flex:1 1 auto;position:relative;max-height:5rem;opacity:0}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 1 auto;height:2.1875rem;max-height:2.1875rem;position:relative}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .zitiInfo,.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .networkInfo{font-size:.75rem;font-weight:800}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .ziti-semver,.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .network-semver{font-weight:900;margin-left:.1875rem;filter:brightness(.85)}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .network-semver{color:var(--primary)}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .ziti-semver{color:#f4044d}.side-navigator-container .side-navigator-menu-container{display:flex;flex-direction:column;width:100%;max-width:19.6875rem!important;flex:1 1 auto;height:100%;padding-top:var(--paddingLarge);overflow-y:auto;opacity:0}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-group{display:flex;flex-direction:column;width:100%;margin-bottom:.9375rem}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-group-label{margin-left:1.4375rem;color:var(--groupText);font-size:.875rem;position:relative;text-transform:uppercase;font-weight:600}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item{position:relative;display:flex;height:3.3125rem;cursor:pointer;align-items:center;padding-left:var(--navItemPadding);margin-left:var(--navItemMargin);margin-right:var(--navItemMargin);border-radius:var(--inputBorderRadius)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.selected{background-color:var(--navItemSelectedColor);border-right-color:var(--secondaryColor);border-right-width:.25rem;border-right-style:none}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.selected:focus,.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.selected:focus-visible{background-color:var(--navItemSelectedColor)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.disabled{opacity:.5;filter:grayscale(1);cursor:not-allowed}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.disabled:hover{background-color:transparent}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item:hover{background-color:var(--hoverBackground)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item:focus,.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item:focus-visible{background-color:var(--hoverBackground)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon{max-width:2.5rem;width:2.5rem;height:2.5rem;background-color:var(--mainBackground);border-radius:var(--inputBorderRadius);box-shadow:0 .1875rem .3125rem 1px var(--boxShadow);display:flex;align-items:center;justify-content:center;border-color:var(--mainBackground);border-width:.125rem;flex:1 0 auto;border-style:solid;font-size:1.875rem}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon .image:before{color:var(--primaryColor)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label{color:var(--tableText);font-size:1rem;text-transform:unset;font-weight:600;text-align:left;font-family:Open Sans;width:100%;margin-bottom:0;margin-left:.9375rem;display:flex}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label .side-navigator-menu-item-sublabel{color:var(--placeholder);margin-left:.3125rem}.side-navigator-container .side-navigator-menu-container.hide-menu-nav-bar::-webkit-scrollbar{display:none}.side-navigator-container .headerNetworkList,.side-navigator-container .headerTenantList{height:11.375rem;overflow-y:scroll}.side-navigator-container .headerNetworkList .row,.side-navigator-container .headerTenantList .row{color:var(--white);font-size:.875rem;font-weight:600;line-height:1.875rem;padding-left:2.8125rem;cursor:pointer;height:2rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;position:relative}.side-navigator-container .headerNetworkList .row.selected,.side-navigator-container .headerTenantList .row.selected{color:var(--white);font-weight:800;font-family:Open Sans}.side-navigator-container .headerNetworkList .row:hover,.side-navigator-container .headerTenantList .row:hover{background-color:var(--primaryColor)}.side-navigator-container .headerNetworkList .row:active,.side-navigator-container .headerTenantList .row:active{background-color:var(--primaryColor);filter:brightness(.95)}.side-navigator-container .headerNetworkList .status,.side-navigator-container .headerTenantList .status{width:1.5625rem;height:1.5625rem;top:.1875rem;left:.625rem}.side-navigator-container .navlogo{display:flex;align-items:center;justify-content:center;height:3.125rem;width:18.75rem;position:relative;background-image:var(--logoLight);background-color:transparent;background-size:14.0625rem;animation:fadein 3s;background-repeat:no-repeat;background-position:center}.side-navigator-container .navlogo.dark{background-image:var(--logoDark)}#Networks .currentNetwork,#Tenants .currentTenant{color:var(--white)}.tenants,.networks{border-color:var(--inputBorder);border-width:.125rem;border-radius:.4375rem;border-style:solid;width:16.9375rem;height:2.5rem;background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-size:1.25rem .625rem;cursor:pointer;background-color:var(--mainBackground);animation:fadein .5s;position:relative;margin-top:0;margin-bottom:.625rem}.counterBadge{display:flex;position:absolute;align-items:center;justify-content:center;top:.125rem;left:3.375rem;background-color:var(--red);box-shadow:0 .125rem .4375rem #ff0d4980;z-index:999;color:#fff;font-size:.75rem;font-weight:700;width:1.125rem;height:1.125rem;line-height:1.125rem;border-radius:.5625rem;font-family:Open Sans}.expand-collapse-hitbox-container-right{position:absolute;height:100%;width:.625rem;left:3.4375rem;z-index:1000001}.expand-collapse-hitbox-container{position:relative;height:100%;width:1.25rem;z-index:1000001}.expand-collapse-hitbox-container.expand-collapse-container-closed .expand-collapse-icon{transform:rotate(180deg)}.expand-collapse-hitbox-container .expand-collapse-icon{background:var(--background);border-radius:var(--inputBorderRadius);height:1.75rem;width:1.75rem;position:absolute;top:3.5rem;right:.4375rem;opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center;box-shadow:0 0 .375rem .1875rem var(--boxShadow);cursor:pointer;border-style:solid;border-width:1px;border-color:var(--inputBorder);color:var(--icon);font-weight:600;font-family:icomoon!important}.expand-collapse-hitbox-container .expand-collapse-icon:before{content:\"\\e938\"}.expand-collapse-hitbox-container .expand-collapse-icon:hover{background-color:var(--primaryColor);color:var(--white)}.expand-collapse-hitbox-container .expand-collapse-icon:active{filter:grayscale(1)}.expand-collapse-hitbox-container .expand-collapse-icon.expand-collapse-icon-visible{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SideNavigatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-side-navigator', template: "<div class=\"side-navigator-wrapper\">\n  <div [ngClass]=\"{ 'nav-expanded': navExpanded, 'nav-hiddnen': navHidden }\" class=\"side-navigator-container\" (mouseenter)=\"showExpandCollapse($event)\" (mouseleave)=\"hideExpandCollapse($event)\">\n    <div cdkScrollable class=\"side-navigator-menu-container\" [ngClass]=\"{'hide-menu-nav-bar': hideMenuNavBar}\">\n      <div *ngFor=\"let group of currentNav.groups\" class=\"side-navigator-menu-group\">\n        <span class=\"side-navigator-menu-group-label\">{{ group.label }}</span>\n        <div class=\"side-navigator-header-buffer\" *ngIf=\"group.headerBuffer\"></div>\n        <div *ngFor=\"let item of group.menuItems\" class=\"{{item.class}}\">\n          <a\n            *ngIf=\"(!item.isBetaFeature || (item.isBetaFeature && betaFeaturesEnabled))\"\n            class=\"side-navigator-menu-item {{ item.className }}\"\n            (click)=\"doNavAction($event, item)\"\n            [ngClass]=\"{\n              selected: navItemSelected(item),\n              disabled: isNavItemDisabled(item)\n            }\"\n            [title]=\"item.tooltip\"\n            [href]=\"'./'+item.route\"\n          >\n            <div class=\"side-navigator-menu-item-icon\">\n              <div class=\"image\" class=\"{{ item.iconClass }}\"></div>\n              <span *ngIf=\"item.badgeCount\" class=\"counterBadge\">{{ item.badgeCount }}</span>\n            </div>\n            <span class=\"side-navigator-menu-item-label\">\n              {{ item.label }}\n                <span class=\"side-navigator-menu-item-sublabel\">{{ item.sublabel }}</span>\n            </span>\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"side-navigator-footer-container\">\n      <div class=\"side-navigator-version-container\">\n        <div style=\"font-size: .875rem;\" class=\"networkInfo\" id=\"NetworkVersion\">\n          <span class=\"network-semver\">{{ version }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"expand-collapse-hitbox-container\" [ngClass]=\"{'expand-collapse-container-closed': !navExpanded}\" (mouseenter)=\"showExpandCollapse($event)\" (mouseleave)=\"hideExpandCollapse($event)\">\n    <div class=\"expand-collapse-icon icon-prev\" [ngClass]=\"{'expand-collapse-icon-visible': expandCollapseIconVisible}\" (click)=\"toggleNavigationExpanded($event)\"></div>\n  </div>\n</div>\n", styles: [".side-navigator-wrapper{display:flex;flex-direction:row;height:100%}[class*=\" icon-\"].image{font-family:icomoon!important}.side-navigator-container{position:relative;top:0;left:0rem;height:100%;width:1.25rem;bottom:-.625rem;padding-top:0;padding-bottom:0;background-color:var(--formBackground);transition:var(--transition);overflow-y:hidden;z-index:999;display:flex;flex-direction:column;margin-left:var(--sideBarMargin);box-shadow:var(--sideNavigatorBoxShadow);border:none}.side-navigator-container.nav-expanded{width:19.75rem;border-right-style:solid;border-right-color:var(--inputBorder);border-width:var(--navContainerBorderWidth);background-color:var(--mainBackground)}.side-navigator-container.nav-expanded .side-navigator-header-container,.side-navigator-container.nav-expanded .side-navigator-footer-container,.side-navigator-container.nav-expanded .side-navigator-menu-container{opacity:1}.side-navigator-container .side-navigator-header-container{height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 .625rem;padding-top:var(--navHeaderPadding);opacity:0}.side-navigator-container .side-navigator-header-container .app-name-title{font-family:Russo One;text-align:center;font-size:1.5rem;line-height:2.5rem;color:var(--primaryColor);filter:brightness(var(--brightnessDark))}.side-navigator-container .side-navigator-header-container .list-area.search{padding-left:.625rem;padding-right:.625rem}.side-navigator-container .side-navigator-header-container .title{margin-top:.625rem;color:var(--primaryColor);filter:brightness(var(--brightnessDark));font-size:1.75rem;font-family:Russo One;text-align:center;font-size:1.5rem;line-height:3.5rem;animation:_ngcontent-dev-c217_fadein 1s}.side-navigator-container .side-navigator-footer-container{height:100%;display:flex;flex-direction:column;justify-content:flex-end;flex:1 1 auto;position:relative;max-height:5rem;opacity:0}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 1 auto;height:2.1875rem;max-height:2.1875rem;position:relative}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .zitiInfo,.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .networkInfo{font-size:.75rem;font-weight:800}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .ziti-semver,.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .network-semver{font-weight:900;margin-left:.1875rem;filter:brightness(.85)}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .network-semver{color:var(--primary)}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .ziti-semver{color:#f4044d}.side-navigator-container .side-navigator-menu-container{display:flex;flex-direction:column;width:100%;max-width:19.6875rem!important;flex:1 1 auto;height:100%;padding-top:var(--paddingLarge);overflow-y:auto;opacity:0}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-group{display:flex;flex-direction:column;width:100%;margin-bottom:.9375rem}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-group-label{margin-left:1.4375rem;color:var(--groupText);font-size:.875rem;position:relative;text-transform:uppercase;font-weight:600}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item{position:relative;display:flex;height:3.3125rem;cursor:pointer;align-items:center;padding-left:var(--navItemPadding);margin-left:var(--navItemMargin);margin-right:var(--navItemMargin);border-radius:var(--inputBorderRadius)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.selected{background-color:var(--navItemSelectedColor);border-right-color:var(--secondaryColor);border-right-width:.25rem;border-right-style:none}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.selected:focus,.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.selected:focus-visible{background-color:var(--navItemSelectedColor)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.disabled{opacity:.5;filter:grayscale(1);cursor:not-allowed}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.disabled:hover{background-color:transparent}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item:hover{background-color:var(--hoverBackground)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item:focus,.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item:focus-visible{background-color:var(--hoverBackground)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon{max-width:2.5rem;width:2.5rem;height:2.5rem;background-color:var(--mainBackground);border-radius:var(--inputBorderRadius);box-shadow:0 .1875rem .3125rem 1px var(--boxShadow);display:flex;align-items:center;justify-content:center;border-color:var(--mainBackground);border-width:.125rem;flex:1 0 auto;border-style:solid;font-size:1.875rem}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon .image:before{color:var(--primaryColor)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label{color:var(--tableText);font-size:1rem;text-transform:unset;font-weight:600;text-align:left;font-family:Open Sans;width:100%;margin-bottom:0;margin-left:.9375rem;display:flex}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label .side-navigator-menu-item-sublabel{color:var(--placeholder);margin-left:.3125rem}.side-navigator-container .side-navigator-menu-container.hide-menu-nav-bar::-webkit-scrollbar{display:none}.side-navigator-container .headerNetworkList,.side-navigator-container .headerTenantList{height:11.375rem;overflow-y:scroll}.side-navigator-container .headerNetworkList .row,.side-navigator-container .headerTenantList .row{color:var(--white);font-size:.875rem;font-weight:600;line-height:1.875rem;padding-left:2.8125rem;cursor:pointer;height:2rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;position:relative}.side-navigator-container .headerNetworkList .row.selected,.side-navigator-container .headerTenantList .row.selected{color:var(--white);font-weight:800;font-family:Open Sans}.side-navigator-container .headerNetworkList .row:hover,.side-navigator-container .headerTenantList .row:hover{background-color:var(--primaryColor)}.side-navigator-container .headerNetworkList .row:active,.side-navigator-container .headerTenantList .row:active{background-color:var(--primaryColor);filter:brightness(.95)}.side-navigator-container .headerNetworkList .status,.side-navigator-container .headerTenantList .status{width:1.5625rem;height:1.5625rem;top:.1875rem;left:.625rem}.side-navigator-container .navlogo{display:flex;align-items:center;justify-content:center;height:3.125rem;width:18.75rem;position:relative;background-image:var(--logoLight);background-color:transparent;background-size:14.0625rem;animation:fadein 3s;background-repeat:no-repeat;background-position:center}.side-navigator-container .navlogo.dark{background-image:var(--logoDark)}#Networks .currentNetwork,#Tenants .currentTenant{color:var(--white)}.tenants,.networks{border-color:var(--inputBorder);border-width:.125rem;border-radius:.4375rem;border-style:solid;width:16.9375rem;height:2.5rem;background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-size:1.25rem .625rem;cursor:pointer;background-color:var(--mainBackground);animation:fadein .5s;position:relative;margin-top:0;margin-bottom:.625rem}.counterBadge{display:flex;position:absolute;align-items:center;justify-content:center;top:.125rem;left:3.375rem;background-color:var(--red);box-shadow:0 .125rem .4375rem #ff0d4980;z-index:999;color:#fff;font-size:.75rem;font-weight:700;width:1.125rem;height:1.125rem;line-height:1.125rem;border-radius:.5625rem;font-family:Open Sans}.expand-collapse-hitbox-container-right{position:absolute;height:100%;width:.625rem;left:3.4375rem;z-index:1000001}.expand-collapse-hitbox-container{position:relative;height:100%;width:1.25rem;z-index:1000001}.expand-collapse-hitbox-container.expand-collapse-container-closed .expand-collapse-icon{transform:rotate(180deg)}.expand-collapse-hitbox-container .expand-collapse-icon{background:var(--background);border-radius:var(--inputBorderRadius);height:1.75rem;width:1.75rem;position:absolute;top:3.5rem;right:.4375rem;opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center;box-shadow:0 0 .375rem .1875rem var(--boxShadow);cursor:pointer;border-style:solid;border-width:1px;border-color:#dee2e6;color:var(--icon);font-weight:600;font-family:icomoon!important}.expand-collapse-hitbox-container .expand-collapse-icon:before{content:\"\\e938\"}.expand-collapse-hitbox-container .expand-collapse-icon:hover{background-color:var(--primaryColor);color:var(--white)}.expand-collapse-hitbox-container .expand-collapse-icon:active{filter:grayscale(1)}.expand-collapse-hitbox-container .expand-collapse-icon.expand-collapse-icon-visible{opacity:1}\n"] }]
+            args: [{ selector: 'lib-side-navigator', template: "<div class=\"side-navigator-wrapper\">\n  <div [ngClass]=\"{ 'nav-expanded': navExpanded, 'nav-hiddnen': navHidden }\" class=\"side-navigator-container\" (mouseenter)=\"showExpandCollapse($event)\" (mouseleave)=\"hideExpandCollapse($event)\">\n    <div cdkScrollable class=\"side-navigator-menu-container\" [ngClass]=\"{'hide-menu-nav-bar': hideMenuNavBar}\">\n      <div *ngFor=\"let group of currentNav.groups\" class=\"side-navigator-menu-group\">\n        <span class=\"side-navigator-menu-group-label\">{{ group.label }}</span>\n        <div class=\"side-navigator-header-buffer\" *ngIf=\"group.headerBuffer\"></div>\n        <div *ngFor=\"let item of group.menuItems\" class=\"{{item.class}}\">\n          <a\n            *ngIf=\"(!item.isBetaFeature || (item.isBetaFeature && betaFeaturesEnabled))\"\n            class=\"side-navigator-menu-item {{ item.className }}\"\n            (click)=\"doNavAction($event, item)\"\n            [ngClass]=\"{\n              selected: navItemSelected(item),\n              disabled: isNavItemDisabled(item)\n            }\"\n            [title]=\"item.tooltip\"\n            [href]=\"'./'+item.route\"\n          >\n            <div class=\"side-navigator-menu-item-icon\">\n              <div class=\"image\" class=\"{{ item.iconClass }}\"></div>\n              <span *ngIf=\"item.badgeCount\" class=\"counterBadge\">{{ item.badgeCount }}</span>\n            </div>\n            <span class=\"side-navigator-menu-item-label\">\n              {{ item.label }}\n                <span class=\"side-navigator-menu-item-sublabel\">{{ item.sublabel }}</span>\n            </span>\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"side-navigator-footer-container\">\n      <div class=\"side-navigator-version-container\">\n        <div style=\"font-size: .875rem;\" class=\"networkInfo\" id=\"NetworkVersion\">\n          <span class=\"network-semver\">{{ version }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"expand-collapse-hitbox-container\" [ngClass]=\"{'expand-collapse-container-closed': !navExpanded}\" (mouseenter)=\"showExpandCollapse($event)\" (mouseleave)=\"hideExpandCollapse($event)\">\n    <div class=\"expand-collapse-icon icon-prev\" [ngClass]=\"{'expand-collapse-icon-visible': expandCollapseIconVisible}\" (click)=\"toggleNavigationExpanded($event)\"></div>\n  </div>\n</div>\n", styles: [".side-navigator-wrapper{display:flex;flex-direction:row;height:100%}[class*=\" icon-\"].image{font-family:icomoon!important}.side-navigator-container{position:relative;top:0;left:0rem;height:100%;width:1.25rem;bottom:-.625rem;padding-top:0;padding-bottom:0;background-color:var(--formBackground);transition:var(--transition);overflow-y:hidden;z-index:999;display:flex;flex-direction:column;margin-left:var(--sideBarMargin);box-shadow:var(--sideNavigatorBoxShadow);border:none}.side-navigator-container.nav-expanded{width:19.75rem;border-right-style:solid;border-right-color:var(--inputBorder);border-width:var(--navContainerBorderWidth);background-color:var(--mainBackground)}.side-navigator-container.nav-expanded .side-navigator-header-container,.side-navigator-container.nav-expanded .side-navigator-footer-container,.side-navigator-container.nav-expanded .side-navigator-menu-container{opacity:1}.side-navigator-container .side-navigator-header-container{height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 .625rem;padding-top:var(--navHeaderPadding);opacity:0}.side-navigator-container .side-navigator-header-container .app-name-title{font-family:Russo One;text-align:center;font-size:1.5rem;line-height:2.5rem;color:var(--primaryColor);filter:brightness(var(--brightnessDark))}.side-navigator-container .side-navigator-header-container .list-area.search{padding-left:.625rem;padding-right:.625rem}.side-navigator-container .side-navigator-header-container .title{margin-top:.625rem;color:var(--primaryColor);filter:brightness(var(--brightnessDark));font-size:1.75rem;font-family:Russo One;text-align:center;font-size:1.5rem;line-height:3.5rem;animation:_ngcontent-dev-c217_fadein 1s}.side-navigator-container .side-navigator-footer-container{height:100%;display:flex;flex-direction:column;justify-content:flex-end;flex:1 1 auto;position:relative;max-height:5rem;opacity:0}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 1 auto;height:2.1875rem;max-height:2.1875rem;position:relative}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .zitiInfo,.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .networkInfo{font-size:.75rem;font-weight:800}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .ziti-semver,.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .network-semver{font-weight:900;margin-left:.1875rem;filter:brightness(.85)}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .network-semver{color:var(--primary)}.side-navigator-container .side-navigator-footer-container .side-navigator-version-container .ziti-semver{color:#f4044d}.side-navigator-container .side-navigator-menu-container{display:flex;flex-direction:column;width:100%;max-width:19.6875rem!important;flex:1 1 auto;height:100%;padding-top:var(--paddingLarge);overflow-y:auto;opacity:0}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-group{display:flex;flex-direction:column;width:100%;margin-bottom:.9375rem}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-group-label{margin-left:1.4375rem;color:var(--groupText);font-size:.875rem;position:relative;text-transform:uppercase;font-weight:600}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item{position:relative;display:flex;height:3.3125rem;cursor:pointer;align-items:center;padding-left:var(--navItemPadding);margin-left:var(--navItemMargin);margin-right:var(--navItemMargin);border-radius:var(--inputBorderRadius)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.selected{background-color:var(--navItemSelectedColor);border-right-color:var(--secondaryColor);border-right-width:.25rem;border-right-style:none}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.selected:focus,.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.selected:focus-visible{background-color:var(--navItemSelectedColor)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.disabled{opacity:.5;filter:grayscale(1);cursor:not-allowed}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item.disabled:hover{background-color:transparent}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item:hover{background-color:var(--hoverBackground)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item:focus,.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item:focus-visible{background-color:var(--hoverBackground)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon{max-width:2.5rem;width:2.5rem;height:2.5rem;background-color:var(--mainBackground);border-radius:var(--inputBorderRadius);box-shadow:0 .1875rem .3125rem 1px var(--boxShadow);display:flex;align-items:center;justify-content:center;border-color:var(--mainBackground);border-width:.125rem;flex:1 0 auto;border-style:solid;font-size:1.875rem}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon .image:before{color:var(--primaryColor)}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label{color:var(--tableText);font-size:1rem;text-transform:unset;font-weight:600;text-align:left;font-family:Open Sans;width:100%;margin-bottom:0;margin-left:.9375rem;display:flex}.side-navigator-container .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label .side-navigator-menu-item-sublabel{color:var(--placeholder);margin-left:.3125rem}.side-navigator-container .side-navigator-menu-container.hide-menu-nav-bar::-webkit-scrollbar{display:none}.side-navigator-container .headerNetworkList,.side-navigator-container .headerTenantList{height:11.375rem;overflow-y:scroll}.side-navigator-container .headerNetworkList .row,.side-navigator-container .headerTenantList .row{color:var(--white);font-size:.875rem;font-weight:600;line-height:1.875rem;padding-left:2.8125rem;cursor:pointer;height:2rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;position:relative}.side-navigator-container .headerNetworkList .row.selected,.side-navigator-container .headerTenantList .row.selected{color:var(--white);font-weight:800;font-family:Open Sans}.side-navigator-container .headerNetworkList .row:hover,.side-navigator-container .headerTenantList .row:hover{background-color:var(--primaryColor)}.side-navigator-container .headerNetworkList .row:active,.side-navigator-container .headerTenantList .row:active{background-color:var(--primaryColor);filter:brightness(.95)}.side-navigator-container .headerNetworkList .status,.side-navigator-container .headerTenantList .status{width:1.5625rem;height:1.5625rem;top:.1875rem;left:.625rem}.side-navigator-container .navlogo{display:flex;align-items:center;justify-content:center;height:3.125rem;width:18.75rem;position:relative;background-image:var(--logoLight);background-color:transparent;background-size:14.0625rem;animation:fadein 3s;background-repeat:no-repeat;background-position:center}.side-navigator-container .navlogo.dark{background-image:var(--logoDark)}#Networks .currentNetwork,#Tenants .currentTenant{color:var(--white)}.tenants,.networks{border-color:var(--inputBorder);border-width:.125rem;border-radius:.4375rem;border-style:solid;width:16.9375rem;height:2.5rem;background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-size:1.25rem .625rem;cursor:pointer;background-color:var(--mainBackground);animation:fadein .5s;position:relative;margin-top:0;margin-bottom:.625rem}.counterBadge{display:flex;position:absolute;align-items:center;justify-content:center;top:.125rem;left:3.375rem;background-color:var(--red);box-shadow:0 .125rem .4375rem #ff0d4980;z-index:999;color:#fff;font-size:.75rem;font-weight:700;width:1.125rem;height:1.125rem;line-height:1.125rem;border-radius:.5625rem;font-family:Open Sans}.expand-collapse-hitbox-container-right{position:absolute;height:100%;width:.625rem;left:3.4375rem;z-index:1000001}.expand-collapse-hitbox-container{position:relative;height:100%;width:1.25rem;z-index:1000001}.expand-collapse-hitbox-container.expand-collapse-container-closed .expand-collapse-icon{transform:rotate(180deg)}.expand-collapse-hitbox-container .expand-collapse-icon{background:var(--background);border-radius:var(--inputBorderRadius);height:1.75rem;width:1.75rem;position:absolute;top:3.5rem;right:.4375rem;opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center;box-shadow:0 0 .375rem .1875rem var(--boxShadow);cursor:pointer;border-style:solid;border-width:1px;border-color:var(--inputBorder);color:var(--icon);font-weight:600;font-family:icomoon!important}.expand-collapse-hitbox-container .expand-collapse-icon:before{content:\"\\e938\"}.expand-collapse-hitbox-container .expand-collapse-icon:hover{background-color:var(--primaryColor);color:var(--white)}.expand-collapse-hitbox-container .expand-collapse-icon:active{filter:grayscale(1)}.expand-collapse-hitbox-container .expand-collapse-icon.expand-collapse-icon-visible{opacity:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i4.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [ZITI_NAVIGATOR]
@@ -29626,7 +29636,7 @@ class ZitiControllerDataService extends ZitiDataService {
                     filterVal = `${filter.columnId} >= datetime(${filter.value[0]}) and ${filter.columnId} <= datetime(${filter.value[1]})`;
                     break;
                 case 'ATTRIBUTE':
-                    filterVal = this.getAttributeFilter(filter.value, filter.columnId);
+                    filterVal = this.getAttributeFilter(filter.value, filter.columnId, filter.semantic);
                     break;
                 case 'BOOLEAN':
                     filterVal = `${filter.columnId}=${filter.value}`;
@@ -29659,12 +29669,12 @@ class ZitiControllerDataService extends ZitiDataService {
         const schema = await resolver.resolve(data);
         return schema.result;
     }
-    getAttributeFilter(val, columnId) {
+    getAttributeFilter(val, columnId, semantic = 'AnyOf') {
         let filter = '';
         if (isArray(val)) {
             val.forEach((attr, index) => {
                 if (index > 0) {
-                    filter += ' or ';
+                    filter += ` ${semantic === 'AllOf' ? 'and' : 'or'} `;
                 }
                 filter += `anyOf(${columnId}) = "${attr}"`;
             });
@@ -29705,7 +29715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 const ZAC_VERSION = {
-    "version": "4.0.0"
+    "version": "4.0.1"
 };
 /*