npm - @openziti/ziti-console-lib - Versions diffs - 0.5.1 → 0.6.1 - Mend

@openziti/ziti-console-lib 0.5.1 → 0.6.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 (100) hide show

package/esm2022/lib/features/reset-enrollment/reset-enrollment.component.mjs CHANGED Viewed

@@ -68,12 +68,12 @@ class ResetEnrollmentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResetEnrollmentComponent, deps: [{ token: i1.ResetEnrollmentService }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ZITI_DATA_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResetEnrollmentComponent, selector: "lib-reset-enrollment", viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<div id=\"ResetModal\" class=\"reset-enrollment-container modal\" style=\"height: fit-content;\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"reset-title-container\">\n        <div class=\"title\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n        <div class=\"subtitle\">Select a date to {{type === 'reset' ? 'reset' : 'reissue'}} the enrollment token</div>\n    </div>\n    <div class=\"reset-content-container\">\n        <label>Date Enrollment Expires</label>\n        <p-calendar\n                [(ngModel)]=\"dateValue\"\n                dateFormat=\"mm/dd/yy\"\n                selectionMode=\"single\"\n                [showIcon]=\"showIcon\"\n                [showTime]=\"true\"\n                [minDate]=\"minDate\"\n                placeholder=\"Select Time Range\"\n                #calendar\n        ></p-calendar>\n    </div>\n    <div class=\"reset-buttons-container\">\n        <div id=\"ResetEnrollButton\" class=\"button\" (click)=\"handleAction()\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n    </div>\n</div>", styles: [".reset-enrollment-container{display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;width:600px;padding:20px;gap:15px;background-color:var(--background);border-radius:10px;overflow:visible}.reset-title-container{display:flex;flex-direction:column;justify-content:flex-start}.reset-title-container .title,.reset-title-container .subtitle{padding:0;height:inherit;line-height:initial}.reset-content-container{display:flex;flex-direction:column}.reset-buttons-container{display:flex;flex-direction:row;width:100%;justify-content:flex-start}.reset-buttons-container .button{border-radius:7px;line-height:initial;margin-top:0;display:flex;align-items:center}::ng-deep .reset-enroll-dialog-container .mat-mdc-dialog-surface{overflow:visible}::ng-deep .p-component.p-datepicker{background:var(--background)!important}::ng-deep .p-datepicker .p-timepicker button.p-element{background-color:var(--primaryColor)}::ng-deep .p-datepicker .p-datepicker-header button.p-element.p-ripple{background-color:var(--primaryColor)}\n"], dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResetEnrollmentComponent, selector: "lib-reset-enrollment", viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<div id=\"ResetModal\" class=\"reset-enrollment-container modal\" style=\"height: fit-content;\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"reset-title-container\">\n        <div class=\"title\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n        <div class=\"subtitle\">Select a date to {{type === 'reset' ? 'reset' : 'reissue'}} the enrollment token</div>\n    </div>\n    <div class=\"reset-content-container\">\n        <label>Date Enrollment Expires</label>\n        <p-calendar\n                [(ngModel)]=\"dateValue\"\n                dateFormat=\"mm/dd/yy\"\n                selectionMode=\"single\"\n                [showIcon]=\"showIcon\"\n                [showTime]=\"true\"\n                [minDate]=\"minDate\"\n                placeholder=\"Select Time Range\"\n                #calendar\n        ></p-calendar>\n    </div>\n    <div class=\"reset-buttons-container\">\n        <div id=\"ResetEnrollButton\" class=\"button\" (click)=\"handleAction()\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n    </div>\n</div>", styles: [".reset-enrollment-container{display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;width:600px;padding:20px;gap:15px;background-color:var(--background);border-radius:10px;overflow:visible}.reset-title-container{display:flex;flex-direction:column;justify-content:flex-start}.reset-title-container .title,.reset-title-container .subtitle{padding:0;height:inherit;line-height:initial}.reset-content-container{display:flex;flex-direction:column}.reset-buttons-container{display:flex;flex-direction:row;width:100%;justify-content:flex-start}.reset-buttons-container .button{border-radius:var(--inputBorderRadius);line-height:initial;margin-top:0;display:flex;align-items:center}::ng-deep .reset-enroll-dialog-container .mat-mdc-dialog-surface{overflow:visible}::ng-deep .p-component.p-datepicker{background:var(--background)!important}::ng-deep .p-datepicker .p-timepicker button.p-element{background-color:var(--primaryColor)}::ng-deep .p-datepicker .p-datepicker-header button.p-element.p-ripple{background-color:var(--primaryColor)}\n"], dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }] }); }
 }
 export { ResetEnrollmentComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResetEnrollmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-reset-enrollment', template: "<div id=\"ResetModal\" class=\"reset-enrollment-container modal\" style=\"height: fit-content;\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"reset-title-container\">\n        <div class=\"title\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n        <div class=\"subtitle\">Select a date to {{type === 'reset' ? 'reset' : 'reissue'}} the enrollment token</div>\n    </div>\n    <div class=\"reset-content-container\">\n        <label>Date Enrollment Expires</label>\n        <p-calendar\n                [(ngModel)]=\"dateValue\"\n                dateFormat=\"mm/dd/yy\"\n                selectionMode=\"single\"\n                [showIcon]=\"showIcon\"\n                [showTime]=\"true\"\n                [minDate]=\"minDate\"\n                placeholder=\"Select Time Range\"\n                #calendar\n        ></p-calendar>\n    </div>\n    <div class=\"reset-buttons-container\">\n        <div id=\"ResetEnrollButton\" class=\"button\" (click)=\"handleAction()\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n    </div>\n</div>", styles: [".reset-enrollment-container{display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;width:600px;padding:20px;gap:15px;background-color:var(--background);border-radius:10px;overflow:visible}.reset-title-container{display:flex;flex-direction:column;justify-content:flex-start}.reset-title-container .title,.reset-title-container .subtitle{padding:0;height:inherit;line-height:initial}.reset-content-container{display:flex;flex-direction:column}.reset-buttons-container{display:flex;flex-direction:row;width:100%;justify-content:flex-start}.reset-buttons-container .button{border-radius:7px;line-height:initial;margin-top:0;display:flex;align-items:center}::ng-deep .reset-enroll-dialog-container .mat-mdc-dialog-surface{overflow:visible}::ng-deep .p-component.p-datepicker{background:var(--background)!important}::ng-deep .p-datepicker .p-timepicker button.p-element{background-color:var(--primaryColor)}::ng-deep .p-datepicker .p-datepicker-header button.p-element.p-ripple{background-color:var(--primaryColor)}\n"] }]
+            args: [{ selector: 'lib-reset-enrollment', template: "<div id=\"ResetModal\" class=\"reset-enrollment-container modal\" style=\"height: fit-content;\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"reset-title-container\">\n        <div class=\"title\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n        <div class=\"subtitle\">Select a date to {{type === 'reset' ? 'reset' : 'reissue'}} the enrollment token</div>\n    </div>\n    <div class=\"reset-content-container\">\n        <label>Date Enrollment Expires</label>\n        <p-calendar\n                [(ngModel)]=\"dateValue\"\n                dateFormat=\"mm/dd/yy\"\n                selectionMode=\"single\"\n                [showIcon]=\"showIcon\"\n                [showTime]=\"true\"\n                [minDate]=\"minDate\"\n                placeholder=\"Select Time Range\"\n                #calendar\n        ></p-calendar>\n    </div>\n    <div class=\"reset-buttons-container\">\n        <div id=\"ResetEnrollButton\" class=\"button\" (click)=\"handleAction()\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n    </div>\n</div>", styles: [".reset-enrollment-container{display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;width:600px;padding:20px;gap:15px;background-color:var(--background);border-radius:10px;overflow:visible}.reset-title-container{display:flex;flex-direction:column;justify-content:flex-start}.reset-title-container .title,.reset-title-container .subtitle{padding:0;height:inherit;line-height:initial}.reset-content-container{display:flex;flex-direction:column}.reset-buttons-container{display:flex;flex-direction:row;width:100%;justify-content:flex-start}.reset-buttons-container .button{border-radius:var(--inputBorderRadius);line-height:initial;margin-top:0;display:flex;align-items:center}::ng-deep .reset-enroll-dialog-container .mat-mdc-dialog-surface{overflow:visible}::ng-deep .p-component.p-datepicker{background:var(--background)!important}::ng-deep .p-datepicker .p-timepicker button.p-element{background-color:var(--primaryColor)}::ng-deep .p-datepicker .p-datepicker-header button.p-element.p-ripple{background-color:var(--primaryColor)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ResetEnrollmentService }, { type: i2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]

package/esm2022/lib/features/sidebars/side-navbar/side-navbar.component.mjs CHANGED Viewed

@@ -40,12 +40,12 @@ class SideNavbarComponent {
         this.isOpened = !this.isOpened;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SideNavbarComponent, deps: [{ token: i1.Router }, { token: ZITI_NAVIGATOR }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SideNavbarComponent, selector: "lib-side-navbar", inputs: { version: "version" }, ngImport: i0, template: "<div class=\"sideNavbar\">\n    <div class=\"title\" data-i18n=\"AppName\">Ziti Console</div>\n    <div id=\"Version\" class=\"version\">{{version}}</div>\n    <div id=\"CustomLogo\"></div>\n    <div class=\"side-navigator-menu-container\">\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 *ngFor=\"let item of group.menuItems\">\n                <div class=\"side-navigator-menu-item {{item.className}}\" [routerLink]=\"item.route\" *ngIf=\"!item.hidden\"\n                     [ngClass]=\"{ selected: item.selectedRoutes?.includes(url) }\">\n                    <div class=\"side-navigator-menu-item-icon\">\n                        <div class=\"image\" [ngClass]=\"item.iconClass\"></div>\n                        <span *ngIf=\"item.badgeCount\" class=\"counterBadge\">{{ item.badgeCount }}</span>\n                    </div>\n                    <span class=\"side-navigator-menu-item-label\">{{ item.label }}\n                        <span class=\"side-navigator-menu-item-sublabel\">{{item.sublabel}}</span>\n                    </span>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".sideNavbar{position:relative;display:inline-block;width:19.75rem;background-color:transparent;height:100%}.sideNavbar .title{color:var(--primary);filter:brightness(50%);font-family:Russo One,serif;text-align:center;font-size:24px;line-height:56px}.sideNavbar .navList{display:grid;grid-template-columns:100%;grid-row-gap:1.25rem;color:var(--white);margin-left:1.25rem}.sideNavbar .lock:before{color:var(--text)!important}.sideNavbar .lock{position:absolute;bottom:20px;right:10px;width:30px;height:30px;font-size:30px;line-height:30px;text-align:center;opacity:.2;cursor:pointer;transition:.2s}.sideNavbar .lock:hover{opacity:.4}.sideNavbar .lock.locked{opacity:.6}.sideNavbar .version{position:absolute;bottom:20px;width:100%;color:var(--text);opacity:.7;font-size:14px;right:0;left:0;display:flex;align-items:center;justify-content:center}.sideNavbar #CustomLogo{width:75%;height:100px;position:absolute;bottom:49px;right:20px;background-repeat:no-repeat;background-size:contain;background-position:center center}.sideNavbar [class^=icon-],.sideNavbar [class*=\" icon-\"]{font-family:zac,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}.sideNavbar .side-navigator-menu-container,.sideNavbar .side-navigator-menu-container .side-navigator-menu-group{display:flex;flex-direction:column;width:100%;margin-bottom:15px}.sideNavbar .side-navigator-menu-container .side-navigator-menu-group-label{margin-left:23px;color:var(--groupText);font-size:14px;position:relative;text-transform:uppercase;font-weight:600}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item{position:relative;display:flex;height:53px;cursor:pointer;align-items:center;padding-left:25px;margin-bottom:5px;margin-top:5px}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item.selected{background-color:var(--primaryColorShadowLight);border-right-color:var(--secondaryColor);border-right-width:4px;border-right-style:solid}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item.selected:hover{border-right-color:var(--secondaryColor)}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item:hover{background-color:var(--primaryColorShadowLight);border-right-color:var(--primaryColor);border-right-width:4px;border-right-style:solid;transition:.3s}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon{max-width:50px;width:50px;height:50px;background-color:var(--white);box-shadow:var(--shadow);border-color:var(--white);transition:var(--transition);border-radius:8px;display:flex;align-items:center;justify-content:center;border-width:2px;flex:1 0 auto;border-style:solid;font-size:35px}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon:hover{box-shadow:0 14px 20px #0000000d,0 14px 20px #0000000d}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon .image:before{color:var(--primary)}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label{color:var(--tableText);font-size:16px;text-transform:unset;font-weight:600;text-align:left;font-family:Open Sans,serif;width:100%;margin-bottom:0;margin-left:15px;display:flex}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label .side-navigator-menu-item-sublabel{color:var(--placeholder);margin-left:5px}.sideNavbar .headerNetworkList,.sideNavbar .headerTenantList{height:182px;overflow-y:scroll}.sideNavbar .headerNetworkList .row,.sideNavbar .headerTenantList .row{color:var(--white);font-size:14px;font-weight:600;line-height:30px;padding-left:45px;cursor:pointer;height:32px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:.2s;position:relative}.sideNavbar .headerNetworkList .row.selected,.sideNavbar .headerTenantList .row.selected{color:var(--white);font-weight:800;font-family:Open Sans,serif}.sideNavbar .headerNetworkList .row:hover,.sideNavbar .headerTenantList .row:hover{background-color:var(--primaryColor);transition:.2s}.sideNavbar .headerNetworkList .row:active,.sideNavbar .headerTenantList .row:active{background-color:var(--primaryColor);filter:brightness(.95);transition:.2s}.sideNavbar .headerNetworkList .status,.sideNavbar .headerTenantList .status{width:25px;height:25px;top:3px;left:10px}.sideNavbar #Networks .currentNetwork,.sideNavbar #Tenants .currentTenant{color:var(--white)}.sideNavbar .networks{border-color:var(--inputBorder);border-width:2px;border-radius:7px;border-style:solid;width:271px;height:40px;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-size:20px 10px;cursor:pointer;background-color:var(--background);animation:fadein .5s;position:relative;margin-top:18px;margin-bottom:10px}.sideNavbar .currentNetwork{font-family:Russo One,serif;font-size:18px;color:var(--tableText);padding-left:10px;line-height:36px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:20px;width:259px}.sideNavbar #Networks{border-radius:7px;height:0;width:101.5%;overflow:hidden;position:absolute;top:-2px;left:-2px;padding-top:2px;background-color:var(--menu);min-height:20px;z-index:60;opacity:0;transition:.5s;pointer-events:none}.sideNavbar #Networks.opened{height:300px;opacity:1;pointer-events:all}.sideNavbar #Networks .search.row{line-height:55px}.sideNavbar .counterBadge{display:flex;position:absolute;align-items:center;justify-content:center;top:2px;left:54px;background-color:var(--red);box-shadow:0 2px 7px #ff0d4980;z-index:999;color:#fff;font-size:12px;font-weight:700;width:18px;height:18px;line-height:18px;border-radius:9px;font-family:Open Sans,serif}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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: SideNavbarComponent, selector: "lib-side-navbar", inputs: { version: "version" }, ngImport: i0, template: "<div class=\"sideNavbar\">\n    <div class=\"title\" data-i18n=\"AppName\">Ziti Console</div>\n    <div id=\"Version\" class=\"version\">{{version}}</div>\n    <div id=\"CustomLogo\"></div>\n    <div class=\"side-navigator-menu-container\">\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 *ngFor=\"let item of group.menuItems\">\n                <div class=\"side-navigator-menu-item {{item.className}}\" [routerLink]=\"item.route\" *ngIf=\"!item.hidden\"\n                     [ngClass]=\"{ selected: item.selectedRoutes?.includes(url) }\">\n                    <div class=\"side-navigator-menu-item-icon\">\n                        <div class=\"image\" [ngClass]=\"item.iconClass\"></div>\n                        <span *ngIf=\"item.badgeCount\" class=\"counterBadge\">{{ item.badgeCount }}</span>\n                    </div>\n                    <span class=\"side-navigator-menu-item-label\">{{ item.label }}\n                        <span class=\"side-navigator-menu-item-sublabel\">{{item.sublabel}}</span>\n                    </span>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".sideNavbar{position:relative;display:inline-block;width:19.75rem;background-color:transparent;height:100%}.sideNavbar .title{color:var(--primary);filter:brightness(50%);font-family:Russo One,serif;text-align:center;font-size:24px;line-height:56px}.sideNavbar .navList{display:grid;grid-template-columns:100%;grid-row-gap:1.25rem;color:var(--white);margin-left:1.25rem}.sideNavbar .lock:before{color:var(--text)!important}.sideNavbar .lock{position:absolute;bottom:20px;right:10px;width:30px;height:30px;font-size:30px;line-height:30px;text-align:center;opacity:.2;cursor:pointer;transition:.2s}.sideNavbar .lock:hover{opacity:.4}.sideNavbar .lock.locked{opacity:.6}.sideNavbar .version{position:absolute;bottom:20px;width:100%;color:var(--text);opacity:.7;font-size:14px;right:0;left:0;display:flex;align-items:center;justify-content:center}.sideNavbar #CustomLogo{width:75%;height:100px;position:absolute;bottom:49px;right:20px;background-repeat:no-repeat;background-size:contain;background-position:center center}.sideNavbar [class^=icon-],.sideNavbar [class*=\" icon-\"]{font-family:zac,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}.sideNavbar .side-navigator-menu-container,.sideNavbar .side-navigator-menu-container .side-navigator-menu-group{display:flex;flex-direction:column;width:100%;margin-bottom:15px}.sideNavbar .side-navigator-menu-container .side-navigator-menu-group-label{margin-left:23px;color:var(--groupText);font-size:14px;position:relative;text-transform:uppercase;font-weight:600}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item{position:relative;display:flex;height:53px;cursor:pointer;align-items:center;padding-left:25px;margin-bottom:5px;margin-top:5px}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item.selected{background-color:var(--primaryColorShadowLight);border-right-color:var(--secondaryColor);border-right-width:4px;border-right-style:solid}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item.selected:hover{border-right-color:var(--secondaryColor)}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item:hover{background-color:var(--primaryColorShadowLight);border-right-color:var(--primaryColor);border-right-width:4px;border-right-style:solid;transition:.3s}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon{max-width:50px;width:50px;height:50px;background-color:var(--white);box-shadow:var(--shadow);border-color:var(--white);transition:var(--transition);border-radius:8px;display:flex;align-items:center;justify-content:center;border-width:var(--inputBorderWidth);flex:1 0 auto;border-style:solid;font-size:35px}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon:hover{box-shadow:0 14px 20px #0000000d,0 14px 20px #0000000d}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon .image:before{color:var(--primary)}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label{color:var(--tableText);font-size:16px;text-transform:unset;font-weight:600;text-align:left;font-family:Open Sans,serif;width:100%;margin-bottom:0;margin-left:15px;display:flex}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label .side-navigator-menu-item-sublabel{color:var(--placeholder);margin-left:5px}.sideNavbar .headerNetworkList,.sideNavbar .headerTenantList{height:182px;overflow-y:scroll}.sideNavbar .headerNetworkList .row,.sideNavbar .headerTenantList .row{color:var(--white);font-size:14px;font-weight:600;line-height:30px;padding-left:45px;cursor:pointer;height:32px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:.2s;position:relative}.sideNavbar .headerNetworkList .row.selected,.sideNavbar .headerTenantList .row.selected{color:var(--white);font-weight:800;font-family:Open Sans,serif}.sideNavbar .headerNetworkList .row:hover,.sideNavbar .headerTenantList .row:hover{background-color:var(--primaryColor);transition:.2s}.sideNavbar .headerNetworkList .row:active,.sideNavbar .headerTenantList .row:active{background-color:var(--primaryColor);filter:brightness(.95);transition:.2s}.sideNavbar .headerNetworkList .status,.sideNavbar .headerTenantList .status{width:25px;height:25px;top:3px;left:10px}.sideNavbar #Networks .currentNetwork,.sideNavbar #Tenants .currentTenant{color:var(--white)}.sideNavbar .networks{border-color:var(--inputBorder);border-width:var(--inputBorderWidth);border-radius:var(--inputBorderRadius);border-style:solid;width:271px;height:40px;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-size:20px 10px;cursor:pointer;background-color:var(--background);animation:fadein .5s;position:relative;margin-top:18px;margin-bottom:10px}.sideNavbar .currentNetwork{font-family:Russo One,serif;font-size:18px;color:var(--tableText);padding-left:10px;line-height:36px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:20px;width:259px}.sideNavbar #Networks{border-radius:var(--inputBorderRadius);height:0;width:101.5%;overflow:hidden;position:absolute;top:-2px;left:-2px;padding-top:2px;background-color:var(--menu);min-height:20px;z-index:60;opacity:0;transition:.5s;pointer-events:none}.sideNavbar #Networks.opened{height:300px;opacity:1;pointer-events:all}.sideNavbar #Networks .search.row{line-height:55px}.sideNavbar .counterBadge{display:flex;position:absolute;align-items:center;justify-content:center;top:2px;left:54px;background-color:var(--red);box-shadow:0 2px 7px #ff0d4980;z-index:999;color:#fff;font-size:12px;font-weight:700;width:18px;height:18px;line-height:18px;border-radius:9px;font-family:Open Sans,serif}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 export { SideNavbarComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SideNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-side-navbar', template: "<div class=\"sideNavbar\">\n    <div class=\"title\" data-i18n=\"AppName\">Ziti Console</div>\n    <div id=\"Version\" class=\"version\">{{version}}</div>\n    <div id=\"CustomLogo\"></div>\n    <div class=\"side-navigator-menu-container\">\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 *ngFor=\"let item of group.menuItems\">\n                <div class=\"side-navigator-menu-item {{item.className}}\" [routerLink]=\"item.route\" *ngIf=\"!item.hidden\"\n                     [ngClass]=\"{ selected: item.selectedRoutes?.includes(url) }\">\n                    <div class=\"side-navigator-menu-item-icon\">\n                        <div class=\"image\" [ngClass]=\"item.iconClass\"></div>\n                        <span *ngIf=\"item.badgeCount\" class=\"counterBadge\">{{ item.badgeCount }}</span>\n                    </div>\n                    <span class=\"side-navigator-menu-item-label\">{{ item.label }}\n                        <span class=\"side-navigator-menu-item-sublabel\">{{item.sublabel}}</span>\n                    </span>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".sideNavbar{position:relative;display:inline-block;width:19.75rem;background-color:transparent;height:100%}.sideNavbar .title{color:var(--primary);filter:brightness(50%);font-family:Russo One,serif;text-align:center;font-size:24px;line-height:56px}.sideNavbar .navList{display:grid;grid-template-columns:100%;grid-row-gap:1.25rem;color:var(--white);margin-left:1.25rem}.sideNavbar .lock:before{color:var(--text)!important}.sideNavbar .lock{position:absolute;bottom:20px;right:10px;width:30px;height:30px;font-size:30px;line-height:30px;text-align:center;opacity:.2;cursor:pointer;transition:.2s}.sideNavbar .lock:hover{opacity:.4}.sideNavbar .lock.locked{opacity:.6}.sideNavbar .version{position:absolute;bottom:20px;width:100%;color:var(--text);opacity:.7;font-size:14px;right:0;left:0;display:flex;align-items:center;justify-content:center}.sideNavbar #CustomLogo{width:75%;height:100px;position:absolute;bottom:49px;right:20px;background-repeat:no-repeat;background-size:contain;background-position:center center}.sideNavbar [class^=icon-],.sideNavbar [class*=\" icon-\"]{font-family:zac,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}.sideNavbar .side-navigator-menu-container,.sideNavbar .side-navigator-menu-container .side-navigator-menu-group{display:flex;flex-direction:column;width:100%;margin-bottom:15px}.sideNavbar .side-navigator-menu-container .side-navigator-menu-group-label{margin-left:23px;color:var(--groupText);font-size:14px;position:relative;text-transform:uppercase;font-weight:600}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item{position:relative;display:flex;height:53px;cursor:pointer;align-items:center;padding-left:25px;margin-bottom:5px;margin-top:5px}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item.selected{background-color:var(--primaryColorShadowLight);border-right-color:var(--secondaryColor);border-right-width:4px;border-right-style:solid}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item.selected:hover{border-right-color:var(--secondaryColor)}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item:hover{background-color:var(--primaryColorShadowLight);border-right-color:var(--primaryColor);border-right-width:4px;border-right-style:solid;transition:.3s}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon{max-width:50px;width:50px;height:50px;background-color:var(--white);box-shadow:var(--shadow);border-color:var(--white);transition:var(--transition);border-radius:8px;display:flex;align-items:center;justify-content:center;border-width:2px;flex:1 0 auto;border-style:solid;font-size:35px}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon:hover{box-shadow:0 14px 20px #0000000d,0 14px 20px #0000000d}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon .image:before{color:var(--primary)}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label{color:var(--tableText);font-size:16px;text-transform:unset;font-weight:600;text-align:left;font-family:Open Sans,serif;width:100%;margin-bottom:0;margin-left:15px;display:flex}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label .side-navigator-menu-item-sublabel{color:var(--placeholder);margin-left:5px}.sideNavbar .headerNetworkList,.sideNavbar .headerTenantList{height:182px;overflow-y:scroll}.sideNavbar .headerNetworkList .row,.sideNavbar .headerTenantList .row{color:var(--white);font-size:14px;font-weight:600;line-height:30px;padding-left:45px;cursor:pointer;height:32px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:.2s;position:relative}.sideNavbar .headerNetworkList .row.selected,.sideNavbar .headerTenantList .row.selected{color:var(--white);font-weight:800;font-family:Open Sans,serif}.sideNavbar .headerNetworkList .row:hover,.sideNavbar .headerTenantList .row:hover{background-color:var(--primaryColor);transition:.2s}.sideNavbar .headerNetworkList .row:active,.sideNavbar .headerTenantList .row:active{background-color:var(--primaryColor);filter:brightness(.95);transition:.2s}.sideNavbar .headerNetworkList .status,.sideNavbar .headerTenantList .status{width:25px;height:25px;top:3px;left:10px}.sideNavbar #Networks .currentNetwork,.sideNavbar #Tenants .currentTenant{color:var(--white)}.sideNavbar .networks{border-color:var(--inputBorder);border-width:2px;border-radius:7px;border-style:solid;width:271px;height:40px;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-size:20px 10px;cursor:pointer;background-color:var(--background);animation:fadein .5s;position:relative;margin-top:18px;margin-bottom:10px}.sideNavbar .currentNetwork{font-family:Russo One,serif;font-size:18px;color:var(--tableText);padding-left:10px;line-height:36px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:20px;width:259px}.sideNavbar #Networks{border-radius:7px;height:0;width:101.5%;overflow:hidden;position:absolute;top:-2px;left:-2px;padding-top:2px;background-color:var(--menu);min-height:20px;z-index:60;opacity:0;transition:.5s;pointer-events:none}.sideNavbar #Networks.opened{height:300px;opacity:1;pointer-events:all}.sideNavbar #Networks .search.row{line-height:55px}.sideNavbar .counterBadge{display:flex;position:absolute;align-items:center;justify-content:center;top:2px;left:54px;background-color:var(--red);box-shadow:0 2px 7px #ff0d4980;z-index:999;color:#fff;font-size:12px;font-weight:700;width:18px;height:18px;line-height:18px;border-radius:9px;font-family:Open Sans,serif}\n"] }]
+            args: [{ selector: 'lib-side-navbar', template: "<div class=\"sideNavbar\">\n    <div class=\"title\" data-i18n=\"AppName\">Ziti Console</div>\n    <div id=\"Version\" class=\"version\">{{version}}</div>\n    <div id=\"CustomLogo\"></div>\n    <div class=\"side-navigator-menu-container\">\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 *ngFor=\"let item of group.menuItems\">\n                <div class=\"side-navigator-menu-item {{item.className}}\" [routerLink]=\"item.route\" *ngIf=\"!item.hidden\"\n                     [ngClass]=\"{ selected: item.selectedRoutes?.includes(url) }\">\n                    <div class=\"side-navigator-menu-item-icon\">\n                        <div class=\"image\" [ngClass]=\"item.iconClass\"></div>\n                        <span *ngIf=\"item.badgeCount\" class=\"counterBadge\">{{ item.badgeCount }}</span>\n                    </div>\n                    <span class=\"side-navigator-menu-item-label\">{{ item.label }}\n                        <span class=\"side-navigator-menu-item-sublabel\">{{item.sublabel}}</span>\n                    </span>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".sideNavbar{position:relative;display:inline-block;width:19.75rem;background-color:transparent;height:100%}.sideNavbar .title{color:var(--primary);filter:brightness(50%);font-family:Russo One,serif;text-align:center;font-size:24px;line-height:56px}.sideNavbar .navList{display:grid;grid-template-columns:100%;grid-row-gap:1.25rem;color:var(--white);margin-left:1.25rem}.sideNavbar .lock:before{color:var(--text)!important}.sideNavbar .lock{position:absolute;bottom:20px;right:10px;width:30px;height:30px;font-size:30px;line-height:30px;text-align:center;opacity:.2;cursor:pointer;transition:.2s}.sideNavbar .lock:hover{opacity:.4}.sideNavbar .lock.locked{opacity:.6}.sideNavbar .version{position:absolute;bottom:20px;width:100%;color:var(--text);opacity:.7;font-size:14px;right:0;left:0;display:flex;align-items:center;justify-content:center}.sideNavbar #CustomLogo{width:75%;height:100px;position:absolute;bottom:49px;right:20px;background-repeat:no-repeat;background-size:contain;background-position:center center}.sideNavbar [class^=icon-],.sideNavbar [class*=\" icon-\"]{font-family:zac,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}.sideNavbar .side-navigator-menu-container,.sideNavbar .side-navigator-menu-container .side-navigator-menu-group{display:flex;flex-direction:column;width:100%;margin-bottom:15px}.sideNavbar .side-navigator-menu-container .side-navigator-menu-group-label{margin-left:23px;color:var(--groupText);font-size:14px;position:relative;text-transform:uppercase;font-weight:600}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item{position:relative;display:flex;height:53px;cursor:pointer;align-items:center;padding-left:25px;margin-bottom:5px;margin-top:5px}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item.selected{background-color:var(--primaryColorShadowLight);border-right-color:var(--secondaryColor);border-right-width:4px;border-right-style:solid}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item.selected:hover{border-right-color:var(--secondaryColor)}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item:hover{background-color:var(--primaryColorShadowLight);border-right-color:var(--primaryColor);border-right-width:4px;border-right-style:solid;transition:.3s}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon{max-width:50px;width:50px;height:50px;background-color:var(--white);box-shadow:var(--shadow);border-color:var(--white);transition:var(--transition);border-radius:8px;display:flex;align-items:center;justify-content:center;border-width:var(--inputBorderWidth);flex:1 0 auto;border-style:solid;font-size:35px}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon:hover{box-shadow:0 14px 20px #0000000d,0 14px 20px #0000000d}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-icon .image:before{color:var(--primary)}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label{color:var(--tableText);font-size:16px;text-transform:unset;font-weight:600;text-align:left;font-family:Open Sans,serif;width:100%;margin-bottom:0;margin-left:15px;display:flex}.sideNavbar .side-navigator-menu-container .side-navigator-menu-item .side-navigator-menu-item-label .side-navigator-menu-item-sublabel{color:var(--placeholder);margin-left:5px}.sideNavbar .headerNetworkList,.sideNavbar .headerTenantList{height:182px;overflow-y:scroll}.sideNavbar .headerNetworkList .row,.sideNavbar .headerTenantList .row{color:var(--white);font-size:14px;font-weight:600;line-height:30px;padding-left:45px;cursor:pointer;height:32px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:.2s;position:relative}.sideNavbar .headerNetworkList .row.selected,.sideNavbar .headerTenantList .row.selected{color:var(--white);font-weight:800;font-family:Open Sans,serif}.sideNavbar .headerNetworkList .row:hover,.sideNavbar .headerTenantList .row:hover{background-color:var(--primaryColor);transition:.2s}.sideNavbar .headerNetworkList .row:active,.sideNavbar .headerTenantList .row:active{background-color:var(--primaryColor);filter:brightness(.95);transition:.2s}.sideNavbar .headerNetworkList .status,.sideNavbar .headerTenantList .status{width:25px;height:25px;top:3px;left:10px}.sideNavbar #Networks .currentNetwork,.sideNavbar #Tenants .currentTenant{color:var(--white)}.sideNavbar .networks{border-color:var(--inputBorder);border-width:var(--inputBorderWidth);border-radius:var(--inputBorderRadius);border-style:solid;width:271px;height:40px;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-size:20px 10px;cursor:pointer;background-color:var(--background);animation:fadein .5s;position:relative;margin-top:18px;margin-bottom:10px}.sideNavbar .currentNetwork{font-family:Russo One,serif;font-size:18px;color:var(--tableText);padding-left:10px;line-height:36px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:20px;width:259px}.sideNavbar #Networks{border-radius:var(--inputBorderRadius);height:0;width:101.5%;overflow:hidden;position:absolute;top:-2px;left:-2px;padding-top:2px;background-color:var(--menu);min-height:20px;z-index:60;opacity:0;transition:.5s;pointer-events:none}.sideNavbar #Networks.opened{height:300px;opacity:1;pointer-events:all}.sideNavbar #Networks .search.row{line-height:55px}.sideNavbar .counterBadge{display:flex;position:absolute;align-items:center;justify-content:center;top:2px;left:54px;background-color:var(--red);box-shadow:0 2px 7px #ff0d4980;z-index:999;color:#fff;font-size:12px;font-weight:700;width:18px;height:18px;line-height:18px;border-radius:9px;font-family:Open Sans,serif}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [ZITI_NAVIGATOR]

package/esm2022/lib/features/tag-selector/tag-selector.component.mjs CHANGED Viewed

@@ -238,12 +238,12 @@ 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 .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:0;margin-top:0;font-size:16px;font-weight:600;line-height:unset;padding:5px 10px;float:left;border-radius:7px;margin-left:2px;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:7px;border-width:2px;border-color:var(--inputBorder);border-style:solid;color:var(--white);padding-left:0}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;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:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:32px;user-select:none;-webkit-user-select:none;border-radius:7px;border:2px 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:100%;overflow:hidden;position:relative}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow-y:auto;overflow-x:hidden;padding-left:8px;padding-right:8px;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:5px;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:10px;padding:10px}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:5px}.select2-results__option{display:flex;height:-moz-fit-content;height:fit-content;padding-left:10px;padding-top:2px;padding-bottom:2px;font-size:16px;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:4px}.select2-search--dropdown .select2-search__field{padding:4px;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:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!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 4px 5px 4px}.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 0 5px 5px;display:flex;flex-wrap:wrap;gap:5px;padding:0 5px 5px}.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:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:4px}.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:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;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:0px!important;width:100%;padding-left:10px;padding-right:10px;margin-bottom:0;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:50px}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:7px;border:2px solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-3px;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:10px;font-size:26px;cursor:pointer;display:inline-block;font-weight:400;margin-right:2px;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:0px;border-radius:7px;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:200px;overflow:auto;font-weight:600;margin-top:1px;box-shadow:0 0 0 1px var(--shadow),0 8px 16px var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0px;width:100%}.select2-container input{padding-top:2px;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:503px}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:417px}.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:14px}.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:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i4.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 .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:0;margin-top:0;font-size:16px;font-weight:600;line-height:unset;padding:5px 10px;float:left;border-radius:var(--inputBorderRadius);margin-left:2px;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:0}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;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:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:32px;user-select:none;-webkit-user-select:none;border-radius:var(--inputBorderRadius);border:2px 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:8px;padding-right:8px;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:5px;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:10px;padding:10px}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:5px}.select2-results__option{display:flex;height:-moz-fit-content;height:fit-content;padding-left:10px;padding-top:2px;padding-bottom:2px;font-size:16px;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:4px}.select2-search--dropdown .select2-search__field{padding:4px;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:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!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 4px 5px 4px}.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 0 5px 5px;display:flex;flex-wrap:wrap;gap:5px;padding:0 5px 5px}.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:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:4px}.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:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;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:0px!important;width:100%;padding-left:10px;padding-right:10px;margin-bottom:0;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:50px}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:var(--inputBorderRadius);border:2px solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-3px;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:10px;font-size:26px;cursor:pointer;display:inline-block;font-weight:400;margin-right:2px;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:0px;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:200px;overflow:auto;font-weight:600;margin-top:1px;box-shadow:0 0 0 1px var(--shadow),0 8px 16px var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0px;width:100%}.select2-container input{padding-top:2px;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:503px}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:417px}.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:14px}.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:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
 }
 export { TagSelectorComponent };
 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 .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:0;margin-top:0;font-size:16px;font-weight:600;line-height:unset;padding:5px 10px;float:left;border-radius:7px;margin-left:2px;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:7px;border-width:2px;border-color:var(--inputBorder);border-style:solid;color:var(--white);padding-left:0}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;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:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:32px;user-select:none;-webkit-user-select:none;border-radius:7px;border:2px 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:100%;overflow:hidden;position:relative}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow-y:auto;overflow-x:hidden;padding-left:8px;padding-right:8px;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:5px;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:10px;padding:10px}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:5px}.select2-results__option{display:flex;height:-moz-fit-content;height:fit-content;padding-left:10px;padding-top:2px;padding-bottom:2px;font-size:16px;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:4px}.select2-search--dropdown .select2-search__field{padding:4px;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:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!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 4px 5px 4px}.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 0 5px 5px;display:flex;flex-wrap:wrap;gap:5px;padding:0 5px 5px}.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:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:4px}.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:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;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:0px!important;width:100%;padding-left:10px;padding-right:10px;margin-bottom:0;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:50px}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:7px;border:2px solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-3px;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:10px;font-size:26px;cursor:pointer;display:inline-block;font-weight:400;margin-right:2px;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:0px;border-radius:7px;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:200px;overflow:auto;font-weight:600;margin-top:1px;box-shadow:0 0 0 1px var(--shadow),0 8px 16px var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0px;width:100%}.select2-container input{padding-top:2px;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:503px}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:417px}.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:14px}.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:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px 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 .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:0;margin-top:0;font-size:16px;font-weight:600;line-height:unset;padding:5px 10px;float:left;border-radius:var(--inputBorderRadius);margin-left:2px;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:0}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;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:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:32px;user-select:none;-webkit-user-select:none;border-radius:var(--inputBorderRadius);border:2px 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:8px;padding-right:8px;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:5px;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:10px;padding:10px}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:5px}.select2-results__option{display:flex;height:-moz-fit-content;height:fit-content;padding-left:10px;padding-top:2px;padding-bottom:2px;font-size:16px;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:4px}.select2-search--dropdown .select2-search__field{padding:4px;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:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!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 4px 5px 4px}.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 0 5px 5px;display:flex;flex-wrap:wrap;gap:5px;padding:0 5px 5px}.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:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:4px}.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:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;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:0px!important;width:100%;padding-left:10px;padding-right:10px;margin-bottom:0;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:50px}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:var(--inputBorderRadius);border:2px solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-3px;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:10px;font-size:26px;cursor:pointer;display:inline-block;font-weight:400;margin-right:2px;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:0px;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:200px;overflow:auto;font-weight:600;margin-top:1px;box-shadow:0 0 0 1px var(--shadow),0 8px 16px var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0px;width:100%}.select2-container input{padding-top:2px;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:503px}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:417px}.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:14px}.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:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
                 type: Input
             }], disableField: [{

package/esm2022/lib/features/visualizer/network-visualizer/network-visualizer.component.mjs CHANGED Viewed

@@ -1674,12 +1674,12 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         return info + '</div>';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NetworkVisualizerComponent, deps: [{ token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i1.HttpClient }, { token: i2.LoggerService }, { token: i3.TreeNodeProcessor }, { token: i4.NetworkVisualizerHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NetworkVisualizerComponent, selector: "app-network-visualizer", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-identities-container\">\n\n    <div class=\"nf-network-topology-container\" >\n\n      <div class=\"css-header\">{{title}} </div><br>\n\n      <div  class=\"nf-net-vis-controls-header\">\n        <div class=\"nf-topology-zoom-container\">\n          <!--button (click)=\"zoomOut()\" class=\"nf-topology-zoom-button minus\"></button>\n          <button (click)=\"zoomIn()\" class=\"nf-topology-zoom-button plus\"></button-->\n          <div (click)=\"resetTree('Yes')\" class=\"reset-button\" title=\"Reset\"></div>\n        </div>\n        <select\n            (change)=\"resourceTypeChanged()\"\n            [(ngModel)]=\"resourceType\"\n            [ngClass]=\"{ 'resource-type-error': resourceTypeError }\"\n            class=\"resource-type-select\"\n            id=\"ResourceTypeSelect\"\n        >\n          <option value=\"\">Select Resource Type</option>\n          <option value=\"service-policies\">Service Policies</option>\n          <option value=\"services\">Services</option>\n          <option value=\"identities\">Identities</option>\n          <option value=\"edge-routers\">Edge Routers</option>\n          <option value=\"edge-router-policies\">Edge Router Policies</option>\n          <option value=\"service-edge-router-policies\">Service Edge Router Policies</option>\n        </select>\n\n        <div class=\"nf-net-vis-filter-container listBox row\">\n          <input\n              (keyup)=\"nwSearchChange($event)\"\n              [(ngModel)]=\"filterText\"\n              [matAutocomplete]=\"auto\"\n              class=\"nf-topology-filter-input\"\n              id=\"filterText\"\n              matInput\n              placeholder=\"Type to Filter\"\n          />\n\n          <div\n              (click)=\"clearSearchFilter()\"\n              *ngIf=\"filterText !== ''\"\n              class=\"buttonBall close icon-close\"\n              id=\"ClearSearchFilter\"\n          ></div>\n\n          <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n            <mat-option *ngFor=\"let option of autocompleteOptions\" [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          </mat-autocomplete>\n        </div>\n      </div>\n\n      <div class=\"nf-topology-legend\">\n        <div class=\"legend-item\">\n          <div class=\"legend-circle servicepolicies\"></div>\n          <div class=\"legend-text\">Service Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle services\"></div>\n          <div class=\"legend-text\">Services</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle endpoints\"></div>\n          <div class=\"legend-text\">Identities</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle edgerouters\"></div>\n          <div class=\"legend-text\">Edge Routers</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle erpolicies\"></div>\n          <div class=\"legend-text\">Edge Router Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle serviceerpolicies\"></div>\n          <div class=\"legend-text\">Service Router Policies</div>\n        </div>\n\n        <div class=\"legend-item\">\n          <div class=\"node-expand-help\"></div>\n          <div class=\"legend-icon-text legend-associated-nodes\">View Associated Nodes</div>\n          <div class=\"legend-icon-pointer\"></div>\n        </div>\n      </div>\n\n      <div class=\"topotip\" id=\"tooltip\"></div>\n      <svg style='pointer-events:all' id=\"NetworkVisualizerSVG\"></svg>\n      <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n    </div>\n\n</div>\n", styles: [".ziti-page-container{height:100%;width:100%;left:0;display:flex;flex-direction:column;position:absolute;padding-top:1px;padding-left:3px;padding-right:3px;top:0}.nf-network-topology-container{overflow:hidden;width:100%;height:100%;background-color:var(--background);z-index:1001;margin:auto;inset:0;padding-top:1px;padding-left:3px;padding-right:3px;background:#ebefff;background-image:linear-gradient(#d1dcff 2px,transparent 0),linear-gradient(90deg,#d1dcff 2px,transparent 0),linear-gradient(#d1dcff 1px,transparent 0),linear-gradient(90deg,#d1dcff 1px,transparent 0);background-size:40px 40px,40px 40px,10px 10px,10px 10px}.css-header{height:50px;font-size:25px;font-weight:600;margin:8px 0 0 10px;font-family:Russo One;color:#0027ab;font-size:30px;text-transform:uppercase;font-weight:400;background-color:transparent}.resource-type-select{width:270px;flex-shrink:0;border-radius:27px;height:51px;margin-left:5px;-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px);background-color:#ffffff80!important;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);color:var(--tableText);padding-left:20px}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right 18px;background-repeat:no-repeat;background-size:18px;padding-right:38px}.no-results-warning{left:440px;font-size:15px;color:var(--tableText);padding-left:20px;padding-top:0;height:-moz-fit-content;height:fit-content;top:1px}.resource-type-error{border-width:3px;border-color:var(--red)!important}.nf-links{stroke:#fff;stroke-opacity:1.6}.nf-net-vis-controls-header{display:flex;flex-direction:row;position:absolute;z-index:99999;flex:1 0 auto;top:60px}.nf-net-vis-filter-container{max-width:490px;margin-top:0;margin-left:10px;flex:1 0 auto}.table-filter-container{max-width:300px;margin-top:0;margin-left:1px;flex:1 0 auto}#ClearSearchFilter{position:absolute;right:15px;top:5px;width:20px;height:20px;font-size:18px;font-weight:600;color:var(--formBase);z-index:99999999}#ClearSearchFilter:hover{filter:brightness(90%)}#ClearSearchFilter:active{transform:translateY(1px);filter:brightness(80%)}#popupTableTitle{width:100%;font-weight:900;display:inline-block;background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);border:2px #d3d3d3!important;text-align:center;border:2px;border-color:#d3d3d3;height:25px;top:2px;color:#fff;padding-right:5px;background:#000;cursor:move}#tra:hover{text-decoration:underline}#CloseDataTable{position:absolute;right:5px;top:-33px;width:25px;height:25px;font-size:15px;color:#fff;z-index:99999999}.copydatatable{width:135px;height:17px;font-size:10pt;font-family:tahoma;top:95%;right:0%;border-radius:5px;background:#fff;border:0px solid gray!important;position:absolute!important;text-transform:uppercase;cursor:pointer;z-index:999}.copydatatable:hover{text-decoration:underline}.nf-topology-filter-input{height:50px;width:485px;border-radius:25px;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:10px;padding-right:15px}.nf-topology-select-container{max-width:400px;margin-top:20px;margin-left:20px;flex:1 0 auto}.nf-topology-select-input{height:45px;border-radius:25px;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:20px}input:focus,textarea:focus,select:focus{box-shadow:0 20px 23px 0 var(--shadow)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-filter-input{background:var(--visualizerBackground)!important;-webkit-backdrop-filter:saturate(110%) blur(5px);backdrop-filter:saturate(110%) blur(15px)}}.nf-topology-zoom-container{display:flex;margin-left:10px;flex:1 0 auto}.nf-topology-zoom-button.minus{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s;background-image:url(/assets/images/Icon_Minus.png);background-size:40%;background-color:var(--red);box-shadow:0 6px 10px 0 var(--redShadow)}.nf-topology-zoom-label{padding-right:10px}.nf-topology-zoom-button{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s}.nf-topology-zoom-button.plus:before{content:\"\\e937\"}.nf-topology-zoom-button.minus:before{content:\"\\e943\"}.nf-topology-zoom-button:hover{color:var(--white);background-color:var(--primaryColor);filter:brightness(90%);transition:background-color 1s;transition:.3s}.nf-topology-zoom-button:active{background-color:var(--icon);transform:scale(.97);transition:background-color 1s;transition:.3s}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-zoom-button{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.placeholder{display:flex;align-items:center;justify-content:center;height:800px}.topotip{display:none;position:fixed;background:var(--navigation);border:0px;border-radius:12px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;font-size:15px;font-weight:600;color:var(--tableText);z-index:2000;opacity:1;max-width:400px;overflow:hidden}.nodes{cursor:pointer;box-shadow:0 30px 43px 0 var(--shadow)}.nf-links{cursor:pointer}.linkWidth{color:#fff}.nf-network-topology-container .loader{margin-left:-150px}.loader .bar1{background-color:var(--inputBorder)!important}.loader .bar2{background-color:var(--inputBorder)!important;animation-delay:-.7s}.loader .bar3{background-color:var(--inputBorder)!important;animation-delay:-.6s}.loader .bar4{background-color:var(--inputBorder)!important;animation-delay:-.5s}.loader .bar5{background-color:var(--inputBorder)!important;animation-delay:-.4s}.loader .bar6{background-color:var(--inputBorder)!important;animation-delay:-.3s}.changeView{display:flex;margin-top:32px;margin-left:10px;flex:1 0 auto}.changeView .changeViewLabel{margin-top:3px;margin-left:5px}.node circle{fill:#fff;stroke:#07397d;stroke-width:14px;box-shadow:0 20px 23px 0 var(--shadow)}.node text{font:27px sans-serif;cursor:pointer}.node-text-container{color:var(--tableText);font-size:24px;font-weight:600;margin-left:2px;margin-top:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.link{fill:none;stroke:var(--table);stroke-width:5px;color:#fff}.nf-topology-legend{width:230px;border-radius:12px;margin-top:10px;margin-right:10px;position:absolute;top:0;right:0;background:#ffffff80!important;-webkit-backdrop-filter:saturate(110%) blur(5px);backdrop-filter:saturate(110%) blur(15px);border-color:var(--navigation);border-style:solid;border-width:2px;display:inline-block;box-shadow:0 20px 23px 0 var(--shadow);padding:5px 5px 7px}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-legend{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.legend-item{width:100%;height:100%;display:inline-block;position:relative}.legend-itemA{width:100%;height:100%;margin-left:-3px;display:inline-block}.legend-circle{height:12px;width:12px;border-radius:15px;display:inline-block;margin-top:7px}.legend-circle.servicepolicies{background-color:#ff0d49}.legend-circle.services{background-color:#08dc5a}.legend-circle.endpoints{background-color:#0273fb}.legend-circle.edgerouters{background-color:#ffc000}.legend-circle.erpolicies{background-color:#ff8400}.legend-circle.serviceerpolicies{background-color:#ff5900}.legend-text{display:inline-block;font-size:15px;font-weight:600;color:var(--tableText);padding-left:7px;padding-bottom:4px}.legend-icon-text{display:inline-block;font-size:14px;font-weight:600;color:var(--tableText);padding-left:22px;padding-bottom:4px}.legend-icon-text.legend-associated-nodes{padding-left:20px}.legend-icon-pointer{background-size:16px 16px;background-image:url(/assets/svgs/cursor-pointer.svg);position:absolute;z-index:999999;width:20px;height:20px;top:10px;left:2px}.reset-button{height:50px;width:50px;border-radius:50px;margin-right:10px;background-size:contain;background-image:url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:.3s}.node-expand-help{border-radius:20px;border-width:4px;border-color:#08dc5a!important;border-style:solid;box-shadow:0 20px 23px 0 var(--shadow);width:16px;height:16px;position:absolute;background-color:brown;margin-left:-2px;top:2px}.reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}.reset-button:active{transform:scale(.9);transition:.3s}.sign_out_button{background-color:#2fa4e7;padding:16px 10px;color:#fff;float:left;text-decoration:none}.sign_out_button:hover{background-color:#1892d7}.sign_out_button a{color:#fff;text-decoration:none}.contextmenu_mouseout{fill:#f4f4f4;stroke:#fff;stroke-width:1px}.contextmenu_mouseover{fill:#c8c8c8}.menu2{position:fixed;background:#fff;color:#000;cursor:pointer;border:1px black solid}.contextmenu_text{position:fixed;background:var(--navigation);border:1px;border-radius:5px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;padding:5px;font-size:10px;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:400px}.contextmenu{z-index:2000;opacity:1;position:fixed;background:#fff;color:#000;font-family:sans-serif;font-size:11px;box-shadow:2px 2px 2px #90908d;padding:2px;border-radius:12px;border:1px solid #c6c6c6;max-width:400px}.menuItems{display:block;color:#555;text-decoration:none;padding:6px 8px 6px 30px;position:relative}.context-menu{display:none;position:absolute;z-index:10}.context-menu__items{list-style:none;margin:0;padding:0}.context-menu__item{display:block;margin-bottom:4px}.container{margin:0 auto;padding:0 24px;max-width:960px}.context-menu__link{display:block;padding:4px 12px;color:#06a;text-decoration:none}.contextmenu_text:hover .divItemsHover{color:#fff;background-color:#06a}.context-menu--active{display:block}#topoDataTableHeader{float:left;min-width:250px;width:auto;height:360px;top:100px;border-bottom-left-radius:13px;border-bottom-right-radius:13px;display:none;background:#fff;border:2px solid gray!important;position:absolute!important}.table-filter-input{height:30px;width:100%;top:40px;border-radius:1px;border-color:#d3d3d3;background-color:#d3d3d3;box-shadow:0 20px 23px 0 var(--shadow);padding-top:3px;padding-left:2px;padding-right:2px}#topoDataTable{float:down;min-width:250px;width:auto;height:300px;top:55px;border-radius:10px;position:absolute!important;overflow:auto;background:#fff;font-family:sans-serif;font-size:16px;color:#06a;overflow-x:scroll}table{width:auto;height:auto;max-height:300px}tr{width:auto;padding:5px}th{width:auto;font-family:sans-serif;font-size:16px;color:#06a;font-weight:700;background-color:#06a}td{width:auto}th{width:auto;font-weight:700;padding:2px;border:1px solid #ccc;text-align:center}.context-menu{border-radius:12px;background:var(--navigation);width:200px;box-shadow:0 20px 23px 0 var(--shadow);position:relative;display:none}.context-menu .menu-options{list-style:none;padding:0}.context-menu .menu-options .menu-option{font-weight:700;font-size:16px;line-height:36px;color:var(--tableText);padding:1px 4px 1px 20px;cursor:pointer}.context-menu .menu-options .menu-option:hover{background:var(--primaryColor);color:var(--navigation)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.context-menu{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.disabled{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;pointer-events:none;cursor:pointer;opacity:.6}path:not(.loader path,.highcharts-root path){fill:none;stroke:var(--navigation);stroke-width:5px;color:#fff}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotating{animation:rotating 2s linear infinite}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--icon);border-width:4px}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__inner-circle{border-color:var(--icon)}.mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:4px}#mat-radio-2>div>div>div.mdc-radio__background>div.mdc-radio__inner-circle .node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.endpoint circle{stroke:#0273fb!important;stroke-width:12px}.node.service circle{stroke:#08dc5a!important;stroke-width:12px}.node.service-policy circle{stroke:#ff0d49!important;stroke-width:12px}.node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.edge-router-policy circle{stroke:#ff8400!important;stroke-width:12px}.node.service-edge-router-policy circle{stroke:#ff5900!important;stroke-width:12px}.text-container{color:var(--tableText);font-size:24px;font-weight:700;margin-left:20px;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}svg>g>g.node:first-of-type.terminate{cursor:pointer}svg>g>g.node:first-of-type.terminate .text-container{cursor:pointer}svg>g>g.node:first-of-type.terminate circle{cursor:pointer}svg>g>g.node:first-of-type.terminate:hover>rect{fill:url(#NodeHoverGradient)}.node>rect{fill:url(#NodeGradient)}.node.terminate{cursor:default;stroke-width:14px}.node.terminate .text-container{cursor:default}.node.terminate circle{cursor:default;stroke-width:14px}.node.terminate:hover>rect{fill:url(#NodeGradient)}.node:hover>rect{fill:url(#NodeHoverGradient)}p-chips.error .p-chips.p-component .p-chips-multiple-container{border-color:var(--red);border-width:2px}.checkboxes.error .mat-checkbox-frame{border-color:var(--red)}.checkboxes.error .mat-checkbox-label{color:var(--red)}.stop1{stop-color:var(--table);stop-opacity:.9}.stop2{stop-color:var(--table);stop-opacity:.65}.stop3{stop-color:var(--table);stop-opacity:0}.stop1a{stop-color:var(--background);stop-opacity:1}.stop2a{stop-color:var(--background);stop-opacity:.7}.stop3a{stop-color:var(--background);stop-opacity:0}.tool-tip-container{font-size:14px;font-family:Open Sans;font-weight:600;font-color:var(--tableText)}.tool-tip-container .prop-row{display:grid;grid-template-columns:1fr 3fr;grid-gap:10px;grid-template-areas:\"propName propVal\";height:-moz-fit-content;height:fit-content;min-height:25px;align-items:center;padding:0 10px}.tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}.tool-tip-container .prop-row .prop-name{grid-area:propName;font-weight:700}.tool-tip-container .prop-row .prop-val{grid-area:propVal;font-weight:400}.tool-tip-container .tooltip-help-text{font-size:12px;padding-left:10px;padding-right:10px;display:flex;height:22px;align-items:center}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NetworkVisualizerComponent, selector: "app-network-visualizer", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-identities-container\">\n\n    <div class=\"nf-network-topology-container\" >\n\n      <div class=\"css-header\">{{title}} </div><br>\n\n      <div  class=\"nf-net-vis-controls-header\">\n        <div class=\"nf-topology-zoom-container\">\n          <!--button (click)=\"zoomOut()\" class=\"nf-topology-zoom-button minus\"></button>\n          <button (click)=\"zoomIn()\" class=\"nf-topology-zoom-button plus\"></button-->\n          <div (click)=\"resetTree('Yes')\" class=\"reset-button\" title=\"Reset\"></div>\n        </div>\n        <select\n            (change)=\"resourceTypeChanged()\"\n            [(ngModel)]=\"resourceType\"\n            [ngClass]=\"{ 'resource-type-error': resourceTypeError }\"\n            class=\"resource-type-select\"\n            id=\"ResourceTypeSelect\"\n        >\n          <option value=\"\">Select Resource Type</option>\n          <option value=\"service-policies\">Service Policies</option>\n          <option value=\"services\">Services</option>\n          <option value=\"identities\">Identities</option>\n          <option value=\"edge-routers\">Edge Routers</option>\n          <option value=\"edge-router-policies\">Edge Router Policies</option>\n          <option value=\"service-edge-router-policies\">Service Edge Router Policies</option>\n        </select>\n\n        <div class=\"nf-net-vis-filter-container listBox row\">\n          <input\n              (keyup)=\"nwSearchChange($event)\"\n              [(ngModel)]=\"filterText\"\n              [matAutocomplete]=\"auto\"\n              class=\"nf-topology-filter-input\"\n              id=\"filterText\"\n              matInput\n              placeholder=\"Type to Filter\"\n          />\n\n          <div\n              (click)=\"clearSearchFilter()\"\n              *ngIf=\"filterText !== ''\"\n              class=\"buttonBall close icon-close\"\n              id=\"ClearSearchFilter\"\n          ></div>\n\n          <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n            <mat-option *ngFor=\"let option of autocompleteOptions\" [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          </mat-autocomplete>\n        </div>\n      </div>\n\n      <div class=\"nf-topology-legend\">\n        <div class=\"legend-item\">\n          <div class=\"legend-circle servicepolicies\"></div>\n          <div class=\"legend-text\">Service Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle services\"></div>\n          <div class=\"legend-text\">Services</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle endpoints\"></div>\n          <div class=\"legend-text\">Identities</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle edgerouters\"></div>\n          <div class=\"legend-text\">Edge Routers</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle erpolicies\"></div>\n          <div class=\"legend-text\">Edge Router Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle serviceerpolicies\"></div>\n          <div class=\"legend-text\">Service Router Policies</div>\n        </div>\n\n        <div class=\"legend-item\">\n          <div class=\"node-expand-help\"></div>\n          <div class=\"legend-icon-text legend-associated-nodes\">View Associated Nodes</div>\n          <div class=\"legend-icon-pointer\"></div>\n        </div>\n      </div>\n\n      <div class=\"topotip\" id=\"tooltip\"></div>\n      <svg style='pointer-events:all' id=\"NetworkVisualizerSVG\"></svg>\n      <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n    </div>\n\n</div>\n", styles: [".ziti-page-container{height:100%;width:100%;left:0;display:flex;flex-direction:column;position:absolute;padding-top:1px;padding-left:3px;padding-right:3px;top:0}.nf-network-topology-container{overflow:hidden;width:100%;height:100%;background-color:var(--background);z-index:1001;margin:auto;inset:0;padding-top:1px;padding-left:3px;padding-right:3px;background:#ebefff;background-image:linear-gradient(#d1dcff 2px,transparent 0),linear-gradient(90deg,#d1dcff 2px,transparent 0),linear-gradient(#d1dcff 1px,transparent 0),linear-gradient(90deg,#d1dcff 1px,transparent 0);background-size:40px 40px,40px 40px,10px 10px,10px 10px}.css-header{height:50px;font-size:25px;font-weight:600;margin:8px 0 0 10px;font-family:Russo One;color:#0027ab;font-size:30px;text-transform:uppercase;font-weight:400;background-color:transparent}.resource-type-select{width:270px;flex-shrink:0;border-radius:27px;height:51px;margin-left:5px;-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px);background-color:#ffffff80!important;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);color:var(--tableText);padding-left:20px}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right 18px;background-repeat:no-repeat;background-size:18px;padding-right:38px}.no-results-warning{left:440px;font-size:15px;color:var(--tableText);padding-left:20px;padding-top:0;height:-moz-fit-content;height:fit-content;top:1px}.resource-type-error{border-width:3px;border-color:var(--red)!important}.nf-links{stroke:#fff;stroke-opacity:1.6}.nf-net-vis-controls-header{display:flex;flex-direction:row;position:absolute;z-index:99999;flex:1 0 auto;top:60px}.nf-net-vis-filter-container{max-width:490px;margin-top:0;margin-left:10px;flex:1 0 auto}.table-filter-container{max-width:300px;margin-top:0;margin-left:1px;flex:1 0 auto}#ClearSearchFilter{position:absolute;right:15px;top:5px;width:20px;height:20px;font-size:18px;font-weight:600;color:var(--formBase);z-index:99999999}#ClearSearchFilter:hover{filter:brightness(90%)}#ClearSearchFilter:active{transform:translateY(1px);filter:brightness(80%)}#popupTableTitle{width:100%;font-weight:900;display:inline-block;background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);border:2px #d3d3d3!important;text-align:center;border:2px;border-color:#d3d3d3;height:25px;top:2px;color:#fff;padding-right:5px;background:#000;cursor:move}#tra:hover{text-decoration:underline}#CloseDataTable{position:absolute;right:5px;top:-33px;width:25px;height:25px;font-size:15px;color:#fff;z-index:99999999}.copydatatable{width:135px;height:17px;font-size:10pt;font-family:tahoma;top:95%;right:0%;border-radius:5px;background:#fff;border:0px solid gray!important;position:absolute!important;text-transform:uppercase;cursor:pointer;z-index:999}.copydatatable:hover{text-decoration:underline}.nf-topology-filter-input{height:50px;width:485px;border-radius:25px;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:10px;padding-right:15px}.nf-topology-select-container{max-width:400px;margin-top:20px;margin-left:20px;flex:1 0 auto}.nf-topology-select-input{height:45px;border-radius:25px;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:20px}input:focus,textarea:focus,select:focus{box-shadow:0 20px 23px 0 var(--shadow)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-filter-input{background:var(--visualizerBackground)!important;-webkit-backdrop-filter:saturate(110%) blur(5px);backdrop-filter:saturate(110%) blur(15px)}}.nf-topology-zoom-container{display:flex;margin-left:10px;flex:1 0 auto}.nf-topology-zoom-button.minus{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s;background-image:url(/assets/images/Icon_Minus.png);background-size:40%;background-color:var(--red);box-shadow:0 6px 10px 0 var(--redShadow)}.nf-topology-zoom-label{padding-right:10px}.nf-topology-zoom-button{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s}.nf-topology-zoom-button.plus:before{content:\"\\e937\"}.nf-topology-zoom-button.minus:before{content:\"\\e943\"}.nf-topology-zoom-button:hover{color:var(--white);background-color:var(--primaryColor);filter:brightness(90%);transition:background-color 1s;transition:.3s}.nf-topology-zoom-button:active{background-color:var(--icon);transform:scale(.97);transition:background-color 1s;transition:.3s}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-zoom-button{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.placeholder{display:flex;align-items:center;justify-content:center;height:800px}.topotip{display:none;position:fixed;background:var(--navigation);border:0px;border-radius:12px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;font-size:15px;font-weight:600;color:var(--tableText);z-index:2000;opacity:1;max-width:400px;overflow:hidden}.nodes{cursor:pointer;box-shadow:0 30px 43px 0 var(--shadow)}.nf-links{cursor:pointer}.linkWidth{color:#fff}.nf-network-topology-container .loader{margin-left:-150px}.loader .bar1{background-color:var(--inputBorder)!important}.loader .bar2{background-color:var(--inputBorder)!important;animation-delay:-.7s}.loader .bar3{background-color:var(--inputBorder)!important;animation-delay:-.6s}.loader .bar4{background-color:var(--inputBorder)!important;animation-delay:-.5s}.loader .bar5{background-color:var(--inputBorder)!important;animation-delay:-.4s}.loader .bar6{background-color:var(--inputBorder)!important;animation-delay:-.3s}.changeView{display:flex;margin-top:32px;margin-left:10px;flex:1 0 auto}.changeView .changeViewLabel{margin-top:3px;margin-left:5px}.node circle{fill:#fff;stroke:#07397d;stroke-width:14px;box-shadow:0 20px 23px 0 var(--shadow)}.node text{font:27px sans-serif;cursor:pointer}.node-text-container{color:var(--tableText);font-size:24px;font-weight:600;margin-left:2px;margin-top:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.link{fill:none;stroke:var(--table);stroke-width:5px;color:#fff}.nf-topology-legend{width:230px;border-radius:12px;margin-top:10px;margin-right:10px;position:absolute;top:0;right:0;background:#ffffff80!important;-webkit-backdrop-filter:saturate(110%) blur(5px);backdrop-filter:saturate(110%) blur(15px);border-color:var(--navigation);border-style:solid;border-width:var(--inputBorderWidth);display:inline-block;box-shadow:0 20px 23px 0 var(--shadow);padding:5px 5px 7px}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-legend{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.legend-item{width:100%;height:100%;display:inline-block;position:relative}.legend-itemA{width:100%;height:100%;margin-left:-3px;display:inline-block}.legend-circle{height:12px;width:12px;border-radius:15px;display:inline-block;margin-top:7px}.legend-circle.servicepolicies{background-color:#ff0d49}.legend-circle.services{background-color:#08dc5a}.legend-circle.endpoints{background-color:#0273fb}.legend-circle.edgerouters{background-color:#ffc000}.legend-circle.erpolicies{background-color:#ff8400}.legend-circle.serviceerpolicies{background-color:#ff5900}.legend-text{display:inline-block;font-size:15px;font-weight:600;color:var(--tableText);padding-left:7px;padding-bottom:4px}.legend-icon-text{display:inline-block;font-size:14px;font-weight:600;color:var(--tableText);padding-left:22px;padding-bottom:4px}.legend-icon-text.legend-associated-nodes{padding-left:20px}.legend-icon-pointer{background-size:16px 16px;background-image:url(/assets/svgs/cursor-pointer.svg);position:absolute;z-index:999999;width:20px;height:20px;top:10px;left:2px}.reset-button{height:50px;width:50px;border-radius:50px;margin-right:10px;background-size:contain;background-image:url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:.3s}.node-expand-help{border-radius:20px;border-width:4px;border-color:#08dc5a!important;border-style:solid;box-shadow:0 20px 23px 0 var(--shadow);width:16px;height:16px;position:absolute;background-color:brown;margin-left:-2px;top:2px}.reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}.reset-button:active{transform:scale(.9);transition:.3s}.sign_out_button{background-color:#2fa4e7;padding:16px 10px;color:#fff;float:left;text-decoration:none}.sign_out_button:hover{background-color:#1892d7}.sign_out_button a{color:#fff;text-decoration:none}.contextmenu_mouseout{fill:#f4f4f4;stroke:#fff;stroke-width:1px}.contextmenu_mouseover{fill:#c8c8c8}.menu2{position:fixed;background:#fff;color:#000;cursor:pointer;border:1px black solid}.contextmenu_text{position:fixed;background:var(--navigation);border:1px;border-radius:5px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;padding:5px;font-size:10px;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:400px}.contextmenu{z-index:2000;opacity:1;position:fixed;background:#fff;color:#000;font-family:sans-serif;font-size:11px;box-shadow:2px 2px 2px #90908d;padding:2px;border-radius:12px;border:1px solid #c6c6c6;max-width:400px}.menuItems{display:block;color:#555;text-decoration:none;padding:6px 8px 6px 30px;position:relative}.context-menu{display:none;position:absolute;z-index:10}.context-menu__items{list-style:none;margin:0;padding:0}.context-menu__item{display:block;margin-bottom:4px}.container{margin:0 auto;padding:0 24px;max-width:960px}.context-menu__link{display:block;padding:4px 12px;color:#06a;text-decoration:none}.contextmenu_text:hover .divItemsHover{color:#fff;background-color:#06a}.context-menu--active{display:block}#topoDataTableHeader{float:left;min-width:250px;width:auto;height:360px;top:100px;border-bottom-left-radius:13px;border-bottom-right-radius:13px;display:none;background:#fff;border:2px solid gray!important;position:absolute!important}.table-filter-input{height:30px;width:100%;top:40px;border-radius:1px;border-color:#d3d3d3;background-color:#d3d3d3;box-shadow:0 20px 23px 0 var(--shadow);padding-top:3px;padding-left:2px;padding-right:2px}#topoDataTable{float:down;min-width:250px;width:auto;height:300px;top:55px;border-radius:10px;position:absolute!important;overflow:auto;background:#fff;font-family:sans-serif;font-size:16px;color:#06a;overflow-x:scroll}table{width:auto;height:auto;max-height:300px}tr{width:auto;padding:5px}th{width:auto;font-family:sans-serif;font-size:16px;color:#06a;font-weight:700;background-color:#06a}td{width:auto}th{width:auto;font-weight:700;padding:2px;border:1px solid #ccc;text-align:center}.context-menu{border-radius:12px;background:var(--navigation);width:200px;box-shadow:0 20px 23px 0 var(--shadow);position:relative;display:none}.context-menu .menu-options{list-style:none;padding:0}.context-menu .menu-options .menu-option{font-weight:700;font-size:16px;line-height:36px;color:var(--tableText);padding:1px 4px 1px 20px;cursor:pointer}.context-menu .menu-options .menu-option:hover{background:var(--primaryColor);color:var(--navigation)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.context-menu{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.disabled{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;pointer-events:none;cursor:pointer;opacity:.6}path:not(.loader path,.highcharts-root path){fill:none;stroke:var(--navigation);stroke-width:5px;color:#fff}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotating{animation:rotating 2s linear infinite}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--icon);border-width:4px}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__inner-circle{border-color:var(--icon)}.mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:4px}#mat-radio-2>div>div>div.mdc-radio__background>div.mdc-radio__inner-circle .node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.endpoint circle{stroke:#0273fb!important;stroke-width:12px}.node.service circle{stroke:#08dc5a!important;stroke-width:12px}.node.service-policy circle{stroke:#ff0d49!important;stroke-width:12px}.node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.edge-router-policy circle{stroke:#ff8400!important;stroke-width:12px}.node.service-edge-router-policy circle{stroke:#ff5900!important;stroke-width:12px}.text-container{color:var(--tableText);font-size:24px;font-weight:700;margin-left:20px;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}svg>g>g.node:first-of-type.terminate{cursor:pointer}svg>g>g.node:first-of-type.terminate .text-container{cursor:pointer}svg>g>g.node:first-of-type.terminate circle{cursor:pointer}svg>g>g.node:first-of-type.terminate:hover>rect{fill:url(#NodeHoverGradient)}.node>rect{fill:url(#NodeGradient)}.node.terminate{cursor:default;stroke-width:14px}.node.terminate .text-container{cursor:default}.node.terminate circle{cursor:default;stroke-width:14px}.node.terminate:hover>rect{fill:url(#NodeGradient)}.node:hover>rect{fill:url(#NodeHoverGradient)}p-chips.error .p-chips.p-component .p-chips-multiple-container{border-color:var(--red);border-width:var(--inputBorderWidth)}.checkboxes.error .mat-checkbox-frame{border-color:var(--red)}.checkboxes.error .mat-checkbox-label{color:var(--red)}.stop1{stop-color:var(--table);stop-opacity:.9}.stop2{stop-color:var(--table);stop-opacity:.65}.stop3{stop-color:var(--table);stop-opacity:0}.stop1a{stop-color:var(--background);stop-opacity:1}.stop2a{stop-color:var(--background);stop-opacity:.7}.stop3a{stop-color:var(--background);stop-opacity:0}.tool-tip-container{font-size:14px;font-family:Open Sans;font-weight:600;font-color:var(--tableText)}.tool-tip-container .prop-row{display:grid;grid-template-columns:1fr 3fr;grid-gap:10px;grid-template-areas:\"propName propVal\";height:-moz-fit-content;height:fit-content;min-height:25px;align-items:center;padding:0 10px}.tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}.tool-tip-container .prop-row .prop-name{grid-area:propName;font-weight:700}.tool-tip-container .prop-row .prop-val{grid-area:propVal;font-weight:400}.tool-tip-container .tooltip-help-text{font-size:12px;padding-left:10px;padding-right:10px;display:flex;height:22px;align-items:center}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 export { NetworkVisualizerComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NetworkVisualizerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-network-visualizer', encapsulation: ViewEncapsulation.None, template: "<div class=\"ziti-page-container ziti-identities-container\">\n\n    <div class=\"nf-network-topology-container\" >\n\n      <div class=\"css-header\">{{title}} </div><br>\n\n      <div  class=\"nf-net-vis-controls-header\">\n        <div class=\"nf-topology-zoom-container\">\n          <!--button (click)=\"zoomOut()\" class=\"nf-topology-zoom-button minus\"></button>\n          <button (click)=\"zoomIn()\" class=\"nf-topology-zoom-button plus\"></button-->\n          <div (click)=\"resetTree('Yes')\" class=\"reset-button\" title=\"Reset\"></div>\n        </div>\n        <select\n            (change)=\"resourceTypeChanged()\"\n            [(ngModel)]=\"resourceType\"\n            [ngClass]=\"{ 'resource-type-error': resourceTypeError }\"\n            class=\"resource-type-select\"\n            id=\"ResourceTypeSelect\"\n        >\n          <option value=\"\">Select Resource Type</option>\n          <option value=\"service-policies\">Service Policies</option>\n          <option value=\"services\">Services</option>\n          <option value=\"identities\">Identities</option>\n          <option value=\"edge-routers\">Edge Routers</option>\n          <option value=\"edge-router-policies\">Edge Router Policies</option>\n          <option value=\"service-edge-router-policies\">Service Edge Router Policies</option>\n        </select>\n\n        <div class=\"nf-net-vis-filter-container listBox row\">\n          <input\n              (keyup)=\"nwSearchChange($event)\"\n              [(ngModel)]=\"filterText\"\n              [matAutocomplete]=\"auto\"\n              class=\"nf-topology-filter-input\"\n              id=\"filterText\"\n              matInput\n              placeholder=\"Type to Filter\"\n          />\n\n          <div\n              (click)=\"clearSearchFilter()\"\n              *ngIf=\"filterText !== ''\"\n              class=\"buttonBall close icon-close\"\n              id=\"ClearSearchFilter\"\n          ></div>\n\n          <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n            <mat-option *ngFor=\"let option of autocompleteOptions\" [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          </mat-autocomplete>\n        </div>\n      </div>\n\n      <div class=\"nf-topology-legend\">\n        <div class=\"legend-item\">\n          <div class=\"legend-circle servicepolicies\"></div>\n          <div class=\"legend-text\">Service Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle services\"></div>\n          <div class=\"legend-text\">Services</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle endpoints\"></div>\n          <div class=\"legend-text\">Identities</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle edgerouters\"></div>\n          <div class=\"legend-text\">Edge Routers</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle erpolicies\"></div>\n          <div class=\"legend-text\">Edge Router Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle serviceerpolicies\"></div>\n          <div class=\"legend-text\">Service Router Policies</div>\n        </div>\n\n        <div class=\"legend-item\">\n          <div class=\"node-expand-help\"></div>\n          <div class=\"legend-icon-text legend-associated-nodes\">View Associated Nodes</div>\n          <div class=\"legend-icon-pointer\"></div>\n        </div>\n      </div>\n\n      <div class=\"topotip\" id=\"tooltip\"></div>\n      <svg style='pointer-events:all' id=\"NetworkVisualizerSVG\"></svg>\n      <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n    </div>\n\n</div>\n", styles: [".ziti-page-container{height:100%;width:100%;left:0;display:flex;flex-direction:column;position:absolute;padding-top:1px;padding-left:3px;padding-right:3px;top:0}.nf-network-topology-container{overflow:hidden;width:100%;height:100%;background-color:var(--background);z-index:1001;margin:auto;inset:0;padding-top:1px;padding-left:3px;padding-right:3px;background:#ebefff;background-image:linear-gradient(#d1dcff 2px,transparent 0),linear-gradient(90deg,#d1dcff 2px,transparent 0),linear-gradient(#d1dcff 1px,transparent 0),linear-gradient(90deg,#d1dcff 1px,transparent 0);background-size:40px 40px,40px 40px,10px 10px,10px 10px}.css-header{height:50px;font-size:25px;font-weight:600;margin:8px 0 0 10px;font-family:Russo One;color:#0027ab;font-size:30px;text-transform:uppercase;font-weight:400;background-color:transparent}.resource-type-select{width:270px;flex-shrink:0;border-radius:27px;height:51px;margin-left:5px;-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px);background-color:#ffffff80!important;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);color:var(--tableText);padding-left:20px}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right 18px;background-repeat:no-repeat;background-size:18px;padding-right:38px}.no-results-warning{left:440px;font-size:15px;color:var(--tableText);padding-left:20px;padding-top:0;height:-moz-fit-content;height:fit-content;top:1px}.resource-type-error{border-width:3px;border-color:var(--red)!important}.nf-links{stroke:#fff;stroke-opacity:1.6}.nf-net-vis-controls-header{display:flex;flex-direction:row;position:absolute;z-index:99999;flex:1 0 auto;top:60px}.nf-net-vis-filter-container{max-width:490px;margin-top:0;margin-left:10px;flex:1 0 auto}.table-filter-container{max-width:300px;margin-top:0;margin-left:1px;flex:1 0 auto}#ClearSearchFilter{position:absolute;right:15px;top:5px;width:20px;height:20px;font-size:18px;font-weight:600;color:var(--formBase);z-index:99999999}#ClearSearchFilter:hover{filter:brightness(90%)}#ClearSearchFilter:active{transform:translateY(1px);filter:brightness(80%)}#popupTableTitle{width:100%;font-weight:900;display:inline-block;background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);border:2px #d3d3d3!important;text-align:center;border:2px;border-color:#d3d3d3;height:25px;top:2px;color:#fff;padding-right:5px;background:#000;cursor:move}#tra:hover{text-decoration:underline}#CloseDataTable{position:absolute;right:5px;top:-33px;width:25px;height:25px;font-size:15px;color:#fff;z-index:99999999}.copydatatable{width:135px;height:17px;font-size:10pt;font-family:tahoma;top:95%;right:0%;border-radius:5px;background:#fff;border:0px solid gray!important;position:absolute!important;text-transform:uppercase;cursor:pointer;z-index:999}.copydatatable:hover{text-decoration:underline}.nf-topology-filter-input{height:50px;width:485px;border-radius:25px;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:10px;padding-right:15px}.nf-topology-select-container{max-width:400px;margin-top:20px;margin-left:20px;flex:1 0 auto}.nf-topology-select-input{height:45px;border-radius:25px;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:20px}input:focus,textarea:focus,select:focus{box-shadow:0 20px 23px 0 var(--shadow)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-filter-input{background:var(--visualizerBackground)!important;-webkit-backdrop-filter:saturate(110%) blur(5px);backdrop-filter:saturate(110%) blur(15px)}}.nf-topology-zoom-container{display:flex;margin-left:10px;flex:1 0 auto}.nf-topology-zoom-button.minus{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s;background-image:url(/assets/images/Icon_Minus.png);background-size:40%;background-color:var(--red);box-shadow:0 6px 10px 0 var(--redShadow)}.nf-topology-zoom-label{padding-right:10px}.nf-topology-zoom-button{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s}.nf-topology-zoom-button.plus:before{content:\"\\e937\"}.nf-topology-zoom-button.minus:before{content:\"\\e943\"}.nf-topology-zoom-button:hover{color:var(--white);background-color:var(--primaryColor);filter:brightness(90%);transition:background-color 1s;transition:.3s}.nf-topology-zoom-button:active{background-color:var(--icon);transform:scale(.97);transition:background-color 1s;transition:.3s}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-zoom-button{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.placeholder{display:flex;align-items:center;justify-content:center;height:800px}.topotip{display:none;position:fixed;background:var(--navigation);border:0px;border-radius:12px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;font-size:15px;font-weight:600;color:var(--tableText);z-index:2000;opacity:1;max-width:400px;overflow:hidden}.nodes{cursor:pointer;box-shadow:0 30px 43px 0 var(--shadow)}.nf-links{cursor:pointer}.linkWidth{color:#fff}.nf-network-topology-container .loader{margin-left:-150px}.loader .bar1{background-color:var(--inputBorder)!important}.loader .bar2{background-color:var(--inputBorder)!important;animation-delay:-.7s}.loader .bar3{background-color:var(--inputBorder)!important;animation-delay:-.6s}.loader .bar4{background-color:var(--inputBorder)!important;animation-delay:-.5s}.loader .bar5{background-color:var(--inputBorder)!important;animation-delay:-.4s}.loader .bar6{background-color:var(--inputBorder)!important;animation-delay:-.3s}.changeView{display:flex;margin-top:32px;margin-left:10px;flex:1 0 auto}.changeView .changeViewLabel{margin-top:3px;margin-left:5px}.node circle{fill:#fff;stroke:#07397d;stroke-width:14px;box-shadow:0 20px 23px 0 var(--shadow)}.node text{font:27px sans-serif;cursor:pointer}.node-text-container{color:var(--tableText);font-size:24px;font-weight:600;margin-left:2px;margin-top:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.link{fill:none;stroke:var(--table);stroke-width:5px;color:#fff}.nf-topology-legend{width:230px;border-radius:12px;margin-top:10px;margin-right:10px;position:absolute;top:0;right:0;background:#ffffff80!important;-webkit-backdrop-filter:saturate(110%) blur(5px);backdrop-filter:saturate(110%) blur(15px);border-color:var(--navigation);border-style:solid;border-width:2px;display:inline-block;box-shadow:0 20px 23px 0 var(--shadow);padding:5px 5px 7px}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-legend{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.legend-item{width:100%;height:100%;display:inline-block;position:relative}.legend-itemA{width:100%;height:100%;margin-left:-3px;display:inline-block}.legend-circle{height:12px;width:12px;border-radius:15px;display:inline-block;margin-top:7px}.legend-circle.servicepolicies{background-color:#ff0d49}.legend-circle.services{background-color:#08dc5a}.legend-circle.endpoints{background-color:#0273fb}.legend-circle.edgerouters{background-color:#ffc000}.legend-circle.erpolicies{background-color:#ff8400}.legend-circle.serviceerpolicies{background-color:#ff5900}.legend-text{display:inline-block;font-size:15px;font-weight:600;color:var(--tableText);padding-left:7px;padding-bottom:4px}.legend-icon-text{display:inline-block;font-size:14px;font-weight:600;color:var(--tableText);padding-left:22px;padding-bottom:4px}.legend-icon-text.legend-associated-nodes{padding-left:20px}.legend-icon-pointer{background-size:16px 16px;background-image:url(/assets/svgs/cursor-pointer.svg);position:absolute;z-index:999999;width:20px;height:20px;top:10px;left:2px}.reset-button{height:50px;width:50px;border-radius:50px;margin-right:10px;background-size:contain;background-image:url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:.3s}.node-expand-help{border-radius:20px;border-width:4px;border-color:#08dc5a!important;border-style:solid;box-shadow:0 20px 23px 0 var(--shadow);width:16px;height:16px;position:absolute;background-color:brown;margin-left:-2px;top:2px}.reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}.reset-button:active{transform:scale(.9);transition:.3s}.sign_out_button{background-color:#2fa4e7;padding:16px 10px;color:#fff;float:left;text-decoration:none}.sign_out_button:hover{background-color:#1892d7}.sign_out_button a{color:#fff;text-decoration:none}.contextmenu_mouseout{fill:#f4f4f4;stroke:#fff;stroke-width:1px}.contextmenu_mouseover{fill:#c8c8c8}.menu2{position:fixed;background:#fff;color:#000;cursor:pointer;border:1px black solid}.contextmenu_text{position:fixed;background:var(--navigation);border:1px;border-radius:5px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;padding:5px;font-size:10px;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:400px}.contextmenu{z-index:2000;opacity:1;position:fixed;background:#fff;color:#000;font-family:sans-serif;font-size:11px;box-shadow:2px 2px 2px #90908d;padding:2px;border-radius:12px;border:1px solid #c6c6c6;max-width:400px}.menuItems{display:block;color:#555;text-decoration:none;padding:6px 8px 6px 30px;position:relative}.context-menu{display:none;position:absolute;z-index:10}.context-menu__items{list-style:none;margin:0;padding:0}.context-menu__item{display:block;margin-bottom:4px}.container{margin:0 auto;padding:0 24px;max-width:960px}.context-menu__link{display:block;padding:4px 12px;color:#06a;text-decoration:none}.contextmenu_text:hover .divItemsHover{color:#fff;background-color:#06a}.context-menu--active{display:block}#topoDataTableHeader{float:left;min-width:250px;width:auto;height:360px;top:100px;border-bottom-left-radius:13px;border-bottom-right-radius:13px;display:none;background:#fff;border:2px solid gray!important;position:absolute!important}.table-filter-input{height:30px;width:100%;top:40px;border-radius:1px;border-color:#d3d3d3;background-color:#d3d3d3;box-shadow:0 20px 23px 0 var(--shadow);padding-top:3px;padding-left:2px;padding-right:2px}#topoDataTable{float:down;min-width:250px;width:auto;height:300px;top:55px;border-radius:10px;position:absolute!important;overflow:auto;background:#fff;font-family:sans-serif;font-size:16px;color:#06a;overflow-x:scroll}table{width:auto;height:auto;max-height:300px}tr{width:auto;padding:5px}th{width:auto;font-family:sans-serif;font-size:16px;color:#06a;font-weight:700;background-color:#06a}td{width:auto}th{width:auto;font-weight:700;padding:2px;border:1px solid #ccc;text-align:center}.context-menu{border-radius:12px;background:var(--navigation);width:200px;box-shadow:0 20px 23px 0 var(--shadow);position:relative;display:none}.context-menu .menu-options{list-style:none;padding:0}.context-menu .menu-options .menu-option{font-weight:700;font-size:16px;line-height:36px;color:var(--tableText);padding:1px 4px 1px 20px;cursor:pointer}.context-menu .menu-options .menu-option:hover{background:var(--primaryColor);color:var(--navigation)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.context-menu{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.disabled{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;pointer-events:none;cursor:pointer;opacity:.6}path:not(.loader path,.highcharts-root path){fill:none;stroke:var(--navigation);stroke-width:5px;color:#fff}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotating{animation:rotating 2s linear infinite}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--icon);border-width:4px}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__inner-circle{border-color:var(--icon)}.mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:4px}#mat-radio-2>div>div>div.mdc-radio__background>div.mdc-radio__inner-circle .node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.endpoint circle{stroke:#0273fb!important;stroke-width:12px}.node.service circle{stroke:#08dc5a!important;stroke-width:12px}.node.service-policy circle{stroke:#ff0d49!important;stroke-width:12px}.node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.edge-router-policy circle{stroke:#ff8400!important;stroke-width:12px}.node.service-edge-router-policy circle{stroke:#ff5900!important;stroke-width:12px}.text-container{color:var(--tableText);font-size:24px;font-weight:700;margin-left:20px;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}svg>g>g.node:first-of-type.terminate{cursor:pointer}svg>g>g.node:first-of-type.terminate .text-container{cursor:pointer}svg>g>g.node:first-of-type.terminate circle{cursor:pointer}svg>g>g.node:first-of-type.terminate:hover>rect{fill:url(#NodeHoverGradient)}.node>rect{fill:url(#NodeGradient)}.node.terminate{cursor:default;stroke-width:14px}.node.terminate .text-container{cursor:default}.node.terminate circle{cursor:default;stroke-width:14px}.node.terminate:hover>rect{fill:url(#NodeGradient)}.node:hover>rect{fill:url(#NodeHoverGradient)}p-chips.error .p-chips.p-component .p-chips-multiple-container{border-color:var(--red);border-width:2px}.checkboxes.error .mat-checkbox-frame{border-color:var(--red)}.checkboxes.error .mat-checkbox-label{color:var(--red)}.stop1{stop-color:var(--table);stop-opacity:.9}.stop2{stop-color:var(--table);stop-opacity:.65}.stop3{stop-color:var(--table);stop-opacity:0}.stop1a{stop-color:var(--background);stop-opacity:1}.stop2a{stop-color:var(--background);stop-opacity:.7}.stop3a{stop-color:var(--background);stop-opacity:0}.tool-tip-container{font-size:14px;font-family:Open Sans;font-weight:600;font-color:var(--tableText)}.tool-tip-container .prop-row{display:grid;grid-template-columns:1fr 3fr;grid-gap:10px;grid-template-areas:\"propName propVal\";height:-moz-fit-content;height:fit-content;min-height:25px;align-items:center;padding:0 10px}.tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}.tool-tip-container .prop-row .prop-name{grid-area:propName;font-weight:700}.tool-tip-container .prop-row .prop-val{grid-area:propVal;font-weight:400}.tool-tip-container .tooltip-help-text{font-size:12px;padding-left:10px;padding-right:10px;display:flex;height:22px;align-items:center}\n"] }]
+            args: [{ selector: 'app-network-visualizer', encapsulation: ViewEncapsulation.None, template: "<div class=\"ziti-page-container ziti-identities-container\">\n\n    <div class=\"nf-network-topology-container\" >\n\n      <div class=\"css-header\">{{title}} </div><br>\n\n      <div  class=\"nf-net-vis-controls-header\">\n        <div class=\"nf-topology-zoom-container\">\n          <!--button (click)=\"zoomOut()\" class=\"nf-topology-zoom-button minus\"></button>\n          <button (click)=\"zoomIn()\" class=\"nf-topology-zoom-button plus\"></button-->\n          <div (click)=\"resetTree('Yes')\" class=\"reset-button\" title=\"Reset\"></div>\n        </div>\n        <select\n            (change)=\"resourceTypeChanged()\"\n            [(ngModel)]=\"resourceType\"\n            [ngClass]=\"{ 'resource-type-error': resourceTypeError }\"\n            class=\"resource-type-select\"\n            id=\"ResourceTypeSelect\"\n        >\n          <option value=\"\">Select Resource Type</option>\n          <option value=\"service-policies\">Service Policies</option>\n          <option value=\"services\">Services</option>\n          <option value=\"identities\">Identities</option>\n          <option value=\"edge-routers\">Edge Routers</option>\n          <option value=\"edge-router-policies\">Edge Router Policies</option>\n          <option value=\"service-edge-router-policies\">Service Edge Router Policies</option>\n        </select>\n\n        <div class=\"nf-net-vis-filter-container listBox row\">\n          <input\n              (keyup)=\"nwSearchChange($event)\"\n              [(ngModel)]=\"filterText\"\n              [matAutocomplete]=\"auto\"\n              class=\"nf-topology-filter-input\"\n              id=\"filterText\"\n              matInput\n              placeholder=\"Type to Filter\"\n          />\n\n          <div\n              (click)=\"clearSearchFilter()\"\n              *ngIf=\"filterText !== ''\"\n              class=\"buttonBall close icon-close\"\n              id=\"ClearSearchFilter\"\n          ></div>\n\n          <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n            <mat-option *ngFor=\"let option of autocompleteOptions\" [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          </mat-autocomplete>\n        </div>\n      </div>\n\n      <div class=\"nf-topology-legend\">\n        <div class=\"legend-item\">\n          <div class=\"legend-circle servicepolicies\"></div>\n          <div class=\"legend-text\">Service Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle services\"></div>\n          <div class=\"legend-text\">Services</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle endpoints\"></div>\n          <div class=\"legend-text\">Identities</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle edgerouters\"></div>\n          <div class=\"legend-text\">Edge Routers</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle erpolicies\"></div>\n          <div class=\"legend-text\">Edge Router Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle serviceerpolicies\"></div>\n          <div class=\"legend-text\">Service Router Policies</div>\n        </div>\n\n        <div class=\"legend-item\">\n          <div class=\"node-expand-help\"></div>\n          <div class=\"legend-icon-text legend-associated-nodes\">View Associated Nodes</div>\n          <div class=\"legend-icon-pointer\"></div>\n        </div>\n      </div>\n\n      <div class=\"topotip\" id=\"tooltip\"></div>\n      <svg style='pointer-events:all' id=\"NetworkVisualizerSVG\"></svg>\n      <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n    </div>\n\n</div>\n", styles: [".ziti-page-container{height:100%;width:100%;left:0;display:flex;flex-direction:column;position:absolute;padding-top:1px;padding-left:3px;padding-right:3px;top:0}.nf-network-topology-container{overflow:hidden;width:100%;height:100%;background-color:var(--background);z-index:1001;margin:auto;inset:0;padding-top:1px;padding-left:3px;padding-right:3px;background:#ebefff;background-image:linear-gradient(#d1dcff 2px,transparent 0),linear-gradient(90deg,#d1dcff 2px,transparent 0),linear-gradient(#d1dcff 1px,transparent 0),linear-gradient(90deg,#d1dcff 1px,transparent 0);background-size:40px 40px,40px 40px,10px 10px,10px 10px}.css-header{height:50px;font-size:25px;font-weight:600;margin:8px 0 0 10px;font-family:Russo One;color:#0027ab;font-size:30px;text-transform:uppercase;font-weight:400;background-color:transparent}.resource-type-select{width:270px;flex-shrink:0;border-radius:27px;height:51px;margin-left:5px;-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px);background-color:#ffffff80!important;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);color:var(--tableText);padding-left:20px}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right 18px;background-repeat:no-repeat;background-size:18px;padding-right:38px}.no-results-warning{left:440px;font-size:15px;color:var(--tableText);padding-left:20px;padding-top:0;height:-moz-fit-content;height:fit-content;top:1px}.resource-type-error{border-width:3px;border-color:var(--red)!important}.nf-links{stroke:#fff;stroke-opacity:1.6}.nf-net-vis-controls-header{display:flex;flex-direction:row;position:absolute;z-index:99999;flex:1 0 auto;top:60px}.nf-net-vis-filter-container{max-width:490px;margin-top:0;margin-left:10px;flex:1 0 auto}.table-filter-container{max-width:300px;margin-top:0;margin-left:1px;flex:1 0 auto}#ClearSearchFilter{position:absolute;right:15px;top:5px;width:20px;height:20px;font-size:18px;font-weight:600;color:var(--formBase);z-index:99999999}#ClearSearchFilter:hover{filter:brightness(90%)}#ClearSearchFilter:active{transform:translateY(1px);filter:brightness(80%)}#popupTableTitle{width:100%;font-weight:900;display:inline-block;background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);border:2px #d3d3d3!important;text-align:center;border:2px;border-color:#d3d3d3;height:25px;top:2px;color:#fff;padding-right:5px;background:#000;cursor:move}#tra:hover{text-decoration:underline}#CloseDataTable{position:absolute;right:5px;top:-33px;width:25px;height:25px;font-size:15px;color:#fff;z-index:99999999}.copydatatable{width:135px;height:17px;font-size:10pt;font-family:tahoma;top:95%;right:0%;border-radius:5px;background:#fff;border:0px solid gray!important;position:absolute!important;text-transform:uppercase;cursor:pointer;z-index:999}.copydatatable:hover{text-decoration:underline}.nf-topology-filter-input{height:50px;width:485px;border-radius:25px;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:10px;padding-right:15px}.nf-topology-select-container{max-width:400px;margin-top:20px;margin-left:20px;flex:1 0 auto}.nf-topology-select-input{height:45px;border-radius:25px;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:20px}input:focus,textarea:focus,select:focus{box-shadow:0 20px 23px 0 var(--shadow)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-filter-input{background:var(--visualizerBackground)!important;-webkit-backdrop-filter:saturate(110%) blur(5px);backdrop-filter:saturate(110%) blur(15px)}}.nf-topology-zoom-container{display:flex;margin-left:10px;flex:1 0 auto}.nf-topology-zoom-button.minus{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s;background-image:url(/assets/images/Icon_Minus.png);background-size:40%;background-color:var(--red);box-shadow:0 6px 10px 0 var(--redShadow)}.nf-topology-zoom-label{padding-right:10px}.nf-topology-zoom-button{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s}.nf-topology-zoom-button.plus:before{content:\"\\e937\"}.nf-topology-zoom-button.minus:before{content:\"\\e943\"}.nf-topology-zoom-button:hover{color:var(--white);background-color:var(--primaryColor);filter:brightness(90%);transition:background-color 1s;transition:.3s}.nf-topology-zoom-button:active{background-color:var(--icon);transform:scale(.97);transition:background-color 1s;transition:.3s}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-zoom-button{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.placeholder{display:flex;align-items:center;justify-content:center;height:800px}.topotip{display:none;position:fixed;background:var(--navigation);border:0px;border-radius:12px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;font-size:15px;font-weight:600;color:var(--tableText);z-index:2000;opacity:1;max-width:400px;overflow:hidden}.nodes{cursor:pointer;box-shadow:0 30px 43px 0 var(--shadow)}.nf-links{cursor:pointer}.linkWidth{color:#fff}.nf-network-topology-container .loader{margin-left:-150px}.loader .bar1{background-color:var(--inputBorder)!important}.loader .bar2{background-color:var(--inputBorder)!important;animation-delay:-.7s}.loader .bar3{background-color:var(--inputBorder)!important;animation-delay:-.6s}.loader .bar4{background-color:var(--inputBorder)!important;animation-delay:-.5s}.loader .bar5{background-color:var(--inputBorder)!important;animation-delay:-.4s}.loader .bar6{background-color:var(--inputBorder)!important;animation-delay:-.3s}.changeView{display:flex;margin-top:32px;margin-left:10px;flex:1 0 auto}.changeView .changeViewLabel{margin-top:3px;margin-left:5px}.node circle{fill:#fff;stroke:#07397d;stroke-width:14px;box-shadow:0 20px 23px 0 var(--shadow)}.node text{font:27px sans-serif;cursor:pointer}.node-text-container{color:var(--tableText);font-size:24px;font-weight:600;margin-left:2px;margin-top:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.link{fill:none;stroke:var(--table);stroke-width:5px;color:#fff}.nf-topology-legend{width:230px;border-radius:12px;margin-top:10px;margin-right:10px;position:absolute;top:0;right:0;background:#ffffff80!important;-webkit-backdrop-filter:saturate(110%) blur(5px);backdrop-filter:saturate(110%) blur(15px);border-color:var(--navigation);border-style:solid;border-width:var(--inputBorderWidth);display:inline-block;box-shadow:0 20px 23px 0 var(--shadow);padding:5px 5px 7px}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-legend{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.legend-item{width:100%;height:100%;display:inline-block;position:relative}.legend-itemA{width:100%;height:100%;margin-left:-3px;display:inline-block}.legend-circle{height:12px;width:12px;border-radius:15px;display:inline-block;margin-top:7px}.legend-circle.servicepolicies{background-color:#ff0d49}.legend-circle.services{background-color:#08dc5a}.legend-circle.endpoints{background-color:#0273fb}.legend-circle.edgerouters{background-color:#ffc000}.legend-circle.erpolicies{background-color:#ff8400}.legend-circle.serviceerpolicies{background-color:#ff5900}.legend-text{display:inline-block;font-size:15px;font-weight:600;color:var(--tableText);padding-left:7px;padding-bottom:4px}.legend-icon-text{display:inline-block;font-size:14px;font-weight:600;color:var(--tableText);padding-left:22px;padding-bottom:4px}.legend-icon-text.legend-associated-nodes{padding-left:20px}.legend-icon-pointer{background-size:16px 16px;background-image:url(/assets/svgs/cursor-pointer.svg);position:absolute;z-index:999999;width:20px;height:20px;top:10px;left:2px}.reset-button{height:50px;width:50px;border-radius:50px;margin-right:10px;background-size:contain;background-image:url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:.3s}.node-expand-help{border-radius:20px;border-width:4px;border-color:#08dc5a!important;border-style:solid;box-shadow:0 20px 23px 0 var(--shadow);width:16px;height:16px;position:absolute;background-color:brown;margin-left:-2px;top:2px}.reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}.reset-button:active{transform:scale(.9);transition:.3s}.sign_out_button{background-color:#2fa4e7;padding:16px 10px;color:#fff;float:left;text-decoration:none}.sign_out_button:hover{background-color:#1892d7}.sign_out_button a{color:#fff;text-decoration:none}.contextmenu_mouseout{fill:#f4f4f4;stroke:#fff;stroke-width:1px}.contextmenu_mouseover{fill:#c8c8c8}.menu2{position:fixed;background:#fff;color:#000;cursor:pointer;border:1px black solid}.contextmenu_text{position:fixed;background:var(--navigation);border:1px;border-radius:5px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;padding:5px;font-size:10px;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:400px}.contextmenu{z-index:2000;opacity:1;position:fixed;background:#fff;color:#000;font-family:sans-serif;font-size:11px;box-shadow:2px 2px 2px #90908d;padding:2px;border-radius:12px;border:1px solid #c6c6c6;max-width:400px}.menuItems{display:block;color:#555;text-decoration:none;padding:6px 8px 6px 30px;position:relative}.context-menu{display:none;position:absolute;z-index:10}.context-menu__items{list-style:none;margin:0;padding:0}.context-menu__item{display:block;margin-bottom:4px}.container{margin:0 auto;padding:0 24px;max-width:960px}.context-menu__link{display:block;padding:4px 12px;color:#06a;text-decoration:none}.contextmenu_text:hover .divItemsHover{color:#fff;background-color:#06a}.context-menu--active{display:block}#topoDataTableHeader{float:left;min-width:250px;width:auto;height:360px;top:100px;border-bottom-left-radius:13px;border-bottom-right-radius:13px;display:none;background:#fff;border:2px solid gray!important;position:absolute!important}.table-filter-input{height:30px;width:100%;top:40px;border-radius:1px;border-color:#d3d3d3;background-color:#d3d3d3;box-shadow:0 20px 23px 0 var(--shadow);padding-top:3px;padding-left:2px;padding-right:2px}#topoDataTable{float:down;min-width:250px;width:auto;height:300px;top:55px;border-radius:10px;position:absolute!important;overflow:auto;background:#fff;font-family:sans-serif;font-size:16px;color:#06a;overflow-x:scroll}table{width:auto;height:auto;max-height:300px}tr{width:auto;padding:5px}th{width:auto;font-family:sans-serif;font-size:16px;color:#06a;font-weight:700;background-color:#06a}td{width:auto}th{width:auto;font-weight:700;padding:2px;border:1px solid #ccc;text-align:center}.context-menu{border-radius:12px;background:var(--navigation);width:200px;box-shadow:0 20px 23px 0 var(--shadow);position:relative;display:none}.context-menu .menu-options{list-style:none;padding:0}.context-menu .menu-options .menu-option{font-weight:700;font-size:16px;line-height:36px;color:var(--tableText);padding:1px 4px 1px 20px;cursor:pointer}.context-menu .menu-options .menu-option:hover{background:var(--primaryColor);color:var(--navigation)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.context-menu{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.disabled{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;pointer-events:none;cursor:pointer;opacity:.6}path:not(.loader path,.highcharts-root path){fill:none;stroke:var(--navigation);stroke-width:5px;color:#fff}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotating{animation:rotating 2s linear infinite}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--icon);border-width:4px}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__inner-circle{border-color:var(--icon)}.mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:4px}#mat-radio-2>div>div>div.mdc-radio__background>div.mdc-radio__inner-circle .node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.endpoint circle{stroke:#0273fb!important;stroke-width:12px}.node.service circle{stroke:#08dc5a!important;stroke-width:12px}.node.service-policy circle{stroke:#ff0d49!important;stroke-width:12px}.node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.edge-router-policy circle{stroke:#ff8400!important;stroke-width:12px}.node.service-edge-router-policy circle{stroke:#ff5900!important;stroke-width:12px}.text-container{color:var(--tableText);font-size:24px;font-weight:700;margin-left:20px;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}svg>g>g.node:first-of-type.terminate{cursor:pointer}svg>g>g.node:first-of-type.terminate .text-container{cursor:pointer}svg>g>g.node:first-of-type.terminate circle{cursor:pointer}svg>g>g.node:first-of-type.terminate:hover>rect{fill:url(#NodeHoverGradient)}.node>rect{fill:url(#NodeGradient)}.node.terminate{cursor:default;stroke-width:14px}.node.terminate .text-container{cursor:default}.node.terminate circle{cursor:default;stroke-width:14px}.node.terminate:hover>rect{fill:url(#NodeGradient)}.node:hover>rect{fill:url(#NodeHoverGradient)}p-chips.error .p-chips.p-component .p-chips-multiple-container{border-color:var(--red);border-width:var(--inputBorderWidth)}.checkboxes.error .mat-checkbox-frame{border-color:var(--red)}.checkboxes.error .mat-checkbox-label{color:var(--red)}.stop1{stop-color:var(--table);stop-opacity:.9}.stop2{stop-color:var(--table);stop-opacity:.65}.stop3{stop-color:var(--table);stop-opacity:0}.stop1a{stop-color:var(--background);stop-opacity:1}.stop2a{stop-color:var(--background);stop-opacity:.7}.stop3a{stop-color:var(--background);stop-opacity:0}.tool-tip-container{font-size:14px;font-family:Open Sans;font-weight:600;font-color:var(--tableText)}.tool-tip-container .prop-row{display:grid;grid-template-columns:1fr 3fr;grid-gap:10px;grid-template-areas:\"propName propVal\";height:-moz-fit-content;height:fit-content;min-height:25px;align-items:center;padding:0 10px}.tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}.tool-tip-container .prop-row .prop-name{grid-area:propName;font-weight:700}.tool-tip-container .prop-row .prop-val{grid-area:propVal;font-weight:400}.tool-tip-container .tooltip-help-text{font-size:12px;padding-left:10px;padding-right:10px;display:flex;height:22px;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i10.SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]