@openziti/ziti-console-lib 1.3.0 → 1.3.1

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

@@ -6955,7 +6955,7 @@ class EdgeRouterFormService {
         this.growlerService.show(growlerData);
     }
     getAssociatedServices(id) {
-        this.zitiService.getSubdata('edge-routers', id, 'services').then((result) => {
+        this.zitiService.getSubdata('edge-routers', id, 'services', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedServices = result.data;
             this.associatedServiceNames = this.associatedServices.map((svc) => {
                 return svc.name;
@@ -6963,7 +6963,7 @@ class EdgeRouterFormService {
         });
     }
     getAssociatedIdentities(id) {
-        this.zitiService.getSubdata('edge-routers', id, 'identities').then((result) => {
+        this.zitiService.getSubdata('edge-routers', id, 'identities', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedIdentities = result.data;
             this.associatedIdentityNames = this.associatedIdentities.map((policy) => {
                 return policy.name;
@@ -10742,6 +10742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 class Link {
     constructor() {
+        this.statusReason = null;
         this.linkType = 'inferred';
     }
 }
@@ -10829,6 +10830,7 @@ class IdentityServicePathHelper {
         srNode.id = selectedServiceOb.id;
         srNode.name = selectedServiceOb.name;
         srNode.intercept = serviceConfigAlias(serviceConfigs);
+        buildServiceDetails(srNode, selectedServiceOb, serviceConfigs);
         srNode.type = 'Config Service';
         srNode.group = '4';
         srNode.status = '1';
@@ -10932,6 +10934,36 @@ class IdentityServicePathHelper {
                 }
             }
         });
+        // Per-host connectivity is derived from the identity's own controller-reported state
+        // (hasEdgeRouterConnection / edgeRouterConnectionStatus -> routerConnection/apiSession),
+        // NOT from terminators: real ziti terminators carry no hosting-identity id (identity:"",
+        // no hostId), so a terminator can't be mapped back to the host that created it. Terminator
+        // COUNT remains a service-level health hint only.
+        // Annotate node connectivity so the renderer can pick a broken icon and the tooltip can
+        // explain the cause. A hosting tunneler that is enrolled but unreachable, or expected to
+        // host (Bind policy) yet has no terminator, is "broken".
+        group3Nodes.forEach((node) => {
+            if (node.status === 'Un-Registered') {
+                node.brokenCause = 'misconfigured';
+                node.connectivity = 'Not enrolled';
+            }
+            else if (node.apiSession === 'No' || node.routerConnection === 'No') {
+                node.brokenCause = 'tunneler-unreachable';
+                node.connectivity = 'Configured but not connected (offline or blocked)';
+            }
+            else {
+                node.connectivity = 'Connected';
+            }
+        });
+        if (endpointNodeOb && endpointNodeOb.status !== 'Un-Registered') {
+            if (endpointNodeOb.apiSession === 'No' || endpointNodeOb.routerConnection === 'No') {
+                endpointNodeOb.brokenCause = 'tunneler-unreachable';
+                endpointNodeOb.connectivity = 'Configured but not connected (offline or blocked)';
+            }
+            else {
+                endpointNodeOb.connectivity = 'Connected';
+            }
+        }
         // Build fabric link lookup
         const fabricLinkSet = new Set();
         fabricLinks.forEach((link) => {
@@ -10950,8 +10982,7 @@ class IdentityServicePathHelper {
                     lnk.sourceName = endpointNodeOb.name;
                     lnk.target = nd.id;
                     lnk.targetName = nd.name;
-                    lnk.status = getEndpointToRouterLinkState(endpointNodeOb, nd);
-                    lnk.weight = getWeight(lnk.status);
+                    applyLinkState(lnk, getEndpointToRouterLinkState(endpointNodeOb, nd));
                     lnk.linkType = activeCircuitHops.has(hopKey(endpointNodeOb.id, nd.id))
                         ? 'active-circuit' : 'endpoint-connection';
                     rootOb.addLink(lnk);
@@ -11055,11 +11086,17 @@ class IdentityServicePathHelper {
             lnk.target = r2.id;
             lnk.targetName = r2.name;
             lnk.linkType = isActiveCircuit ? 'active-circuit' : 'fabric-link';
-            lnk.status = (r1.online === 'Yes' || r1.status === 'PROVISIONED') &&
-                (r2.online === 'Yes' || r2.status === 'PROVISIONED') ? 1 : 0;
-            if (isActiveCircuit)
-                lnk.status = 1;
-            lnk.weight = getWeight(lnk.status);
+            const r1Up = r1.online === 'Yes' || r1.status === 'PROVISIONED';
+            const r2Up = r2.online === 'Yes' || r2.status === 'PROVISIONED';
+            if (isActiveCircuit) {
+                applyLinkState(lnk, { state: 1, reason: null });
+            }
+            else if (!r1Up || !r2Up) {
+                applyLinkState(lnk, { state: 2, reason: 'router-down' });
+            }
+            else {
+                applyLinkState(lnk, { state: 1, reason: null });
+            }
             rootOb.addLink(lnk);
         });
         // If no fabric links connect dial to host side, add inferred connections
@@ -11108,8 +11145,7 @@ class IdentityServicePathHelper {
                             lnk.sourceName = routerNode.name;
                             lnk.target = hostNode.id;
                             lnk.targetName = hostNode.name;
-                            lnk.status = getEndpointToRouterLinkState(hostNode, routerNode);
-                            lnk.weight = getWeight(lnk.status);
+                            applyLinkState(lnk, getEndpointToRouterLinkState(hostNode, routerNode));
                             lnk.linkType = activeCircuitHops.has(hopKey(routerNode.id, hostNode.id))
                                 ? 'active-circuit' : 'endpoint-connection';
                             rootOb.addLink(lnk);
@@ -11126,8 +11162,7 @@ class IdentityServicePathHelper {
                         lnk.sourceName = routerNode.name;
                         lnk.target = hostNode.id;
                         lnk.targetName = hostNode.name;
-                        lnk.status = getEndpointToRouterLinkState(hostNode, routerNode);
-                        lnk.weight = getWeight(lnk.status);
+                        applyLinkState(lnk, getEndpointToRouterLinkState(hostNode, routerNode));
                         lnk.linkType = activeCircuitHops.has(hopKey(routerNode.id, hostNode.id))
                             ? 'active-circuit'
                             : (lnk.status === 1 ? 'endpoint-connection' : 'inferred');
@@ -11150,8 +11185,7 @@ class IdentityServicePathHelper {
                         lnk.sourceName = dialRouter.name;
                         lnk.target = hostNode.id;
                         lnk.targetName = hostNode.name;
-                        lnk.status = getEndpointToRouterLinkState(hostNode, dialRouter);
-                        lnk.weight = getWeight(lnk.status);
+                        applyLinkState(lnk, getEndpointToRouterLinkState(hostNode, dialRouter));
                         lnk.linkType = lnk.status === 1 ? 'endpoint-connection' : 'inferred';
                         rootOb.addLink(lnk);
                     }
@@ -11178,8 +11212,7 @@ class IdentityServicePathHelper {
                 lnk.target = serviceNode.id;
                 lnk.targetName = serviceNode.name;
                 lnk.weight = 1;
-                lnk.status = getServiceToEndpointLinkState(hostNode, serviceNode);
-                lnk.weight = getWeight(lnk.status);
+                applyLinkState(lnk, getServiceToEndpointLinkState(hostNode, serviceNode));
                 lnk.linkType = activeCircuitHops.has(hopKey(hostNode.id, serviceNode.id))
                     ? 'active-circuit' : 'endpoint-connection';
                 rootOb.addLink(lnk);
@@ -11199,6 +11232,28 @@ class IdentityServicePathHelper {
                 return false;
             return true;
         });
+        // Collapse parallel links between the same node pair. A router that is on BOTH the dial
+        // and host side can otherwise produce two links to the same node — e.g. an 'available'
+        // inferred link and a 'router-down' link — which overlap and render as mixed dashed/dotted.
+        // Keep the single most-significant link per pair.
+        const linkSeverity = (l) => {
+            if (l.linkType === 'active-circuit')
+                return 4; // live traffic wins
+            if (l.status === 2)
+                return 3; // broken (router-down / tunneler-unreachable)
+            if (l.status === 1)
+                return 2; // connected
+            return 1; // available / inferred
+        };
+        const bestLinkByPair = new Map();
+        rootOb.links.forEach((lnk) => {
+            const key = [lnk.source, lnk.target].sort().join('::');
+            const existing = bestLinkByPair.get(key);
+            if (!existing || linkSeverity(lnk) > linkSeverity(existing)) {
+                bestLinkByPair.set(key, lnk);
+            }
+        });
+        rootOb.links = Array.from(bestLinkByPair.values());
         return rootOb;
     }
     /**
@@ -11236,6 +11291,7 @@ class IdentityServicePathHelper {
         srNode.id = selectedServiceOb.id;
         srNode.name = selectedServiceOb.name;
         srNode.intercept = serviceConfigAlias(serviceConfigs);
+        buildServiceDetails(srNode, selectedServiceOb, serviceConfigs);
         srNode.type = 'Config Service';
         srNode.group = '4';
         srNode.status = '1';
@@ -11335,8 +11391,7 @@ class IdentityServicePathHelper {
                 lnk.sourceName = endpointNodeOb.name;
                 lnk.target = nd.id;
                 lnk.targetName = nd.name;
-                lnk.status = getEndpointToRouterLinkState(endpointNodeOb, nd);
-                lnk.weight = getWeight(lnk.status);
+                applyLinkState(lnk, getEndpointToRouterLinkState(endpointNodeOb, nd));
                 lnk.linkType = 'endpoint-connection';
                 rootOb.addLink(lnk);
             }
@@ -11361,9 +11416,10 @@ class IdentityServicePathHelper {
                                 nd2.status === 'PROVISIONED' &&
                                 nd2.online === 'Yes'
                                 ? 1 : 0;
+                        lnk.statusReason = lnk.status === 1 ? null : 'router-down';
                     }
                     else {
-                        lnk.status = getEndpointToRouterLinkState(nd2, nd1);
+                        applyLinkState(lnk, getEndpointToRouterLinkState(nd2, nd1));
                     }
                     lnk.weight = getWeight(lnk.status);
                     lnk.linkType = 'inferred';
@@ -11386,8 +11442,7 @@ class IdentityServicePathHelper {
                     lnk.status = foundNd.online === 'Yes' ? 1 : -1;
                 }
                 else {
-                    lnk.status = getServiceToEndpointLinkState(group3Nodes[k1], group4Nodes[k0]);
-                    lnk.weight = getWeight(lnk.status);
+                    applyLinkState(lnk, getServiceToEndpointLinkState(group3Nodes[k1], group4Nodes[k0]));
                 }
                 lnk.linkType = 'endpoint-connection';
                 rootOb.addLink(lnk);
@@ -11455,6 +11510,44 @@ function serviceConfigAlias(configs) {
     });
     return intercept;
 }
+// Annotates the service node with labeled, purpose-specific details so the hover card can explain
+// what each address is for and surface the service's configuration. Handles services that are
+// intercept+host, host-only, intercept-only, or SDK-defined (no address configs at all).
+function buildServiceDetails(srNode, service, configs) {
+    srNode.encryptionRequired = service ? service.encryptionRequired : undefined;
+    srNode.terminatorStrategy = service ? service.terminatorStrategy : undefined;
+    srNode.serviceRoleAttributes = _.isArray(service && service.roleAttributes) ? service.roleAttributes : [];
+    srNode.permissions = _.isArray(service && service.permissions) ? service.permissions : [];
+    const fmtPorts = (portRanges, port) => {
+        if (_.isArray(portRanges)) {
+            return portRanges.map((r) => (r.low === r.high ? `${r.low}` : `${r.low}-${r.high}`));
+        }
+        if (port !== undefined && port !== null)
+            return [String(port)];
+        return [];
+    };
+    const fmtEndpoint = (addrs, ports, protos) => {
+        const a = (addrs || []).filter(Boolean).join(', ');
+        const detail = [(protos || []).join('/'), (ports || []).join(',')].filter(Boolean).join('/');
+        return detail ? `${a}  ${detail}` : a;
+    };
+    const types = [];
+    _.isArray(configs) && configs.forEach((conf) => {
+        const t = ((conf && conf.configType && conf.configType.name) || (conf && conf.type) || '').toString();
+        const d = (conf && conf.data) || {};
+        if (t)
+            types.push(t);
+        if (t.indexOf('intercept') === 0) {
+            const addrs = d.addresses || (d.address ? [d.address] : []);
+            srNode.interceptSummary = fmtEndpoint(addrs, fmtPorts(d.portRanges, d.port), d.protocols || (d.protocol ? [d.protocol] : []));
+        }
+        else if (t.indexOf('host') === 0) {
+            const addrs = d.address ? [d.address] : (d.forwardAddress ? ['(forwarded)'] : []);
+            srNode.hostSummary = fmtEndpoint(addrs, fmtPorts(d.allowedPortRanges, d.port), d.protocol ? [d.protocol] : (d.protocols || (d.forwardProtocol ? ['(forwarded)'] : [])));
+        }
+    });
+    srNode.configTypeNames = types;
+}
 function findEndpoint(endpointId, endpoints) {
     if (endpointId === null) {
         return null;
@@ -11474,7 +11567,10 @@ function createEndpoint(ePoint) {
     node.id = ePoint.id;
     node.name = ePoint.name;
     node.type = 'Identity';
-    if (_.has(ePoint, 'edgeRouterConnectionStatus')) {
+    // Prefer the explicit booleans, which controllers populate reliably. Only fall back to the
+    // edgeRouterConnectionStatus string when it actually carries a value — note its key can be
+    // PRESENT-BUT-NULL, so `_.has` is not a safe guard (that bug made every identity look "Yes").
+    if (ePoint.edgeRouterConnectionStatus != null) {
         node.routerConnection = ePoint.edgeRouterConnectionStatus === 'offline' ? 'No' : 'Yes';
         node.apiSession = node.routerConnection;
     }
@@ -11484,7 +11580,27 @@ function createEndpoint(ePoint) {
     }
     node.os = ePoint.envInfo ? ePoint.envInfo.os : '';
     node.mfaEnabled = ePoint.isMfaEnabled;
-    node.status = ePoint.envInfo && ePoint.envInfo.os !== null ? 'Registered' : 'Un-Registered';
+    // "Registered" means the identity has enrolled and run (it has reported env info). Guard on a
+    // truthy os: the controller returns envInfo as an empty object {} for a created-but-never-
+    // enrolled identity, and `{}.os !== null` is true — which previously mis-classed it Registered.
+    node.status = (ePoint.envInfo && ePoint.envInfo.os) ? 'Registered' : 'Un-Registered';
+    // Node status indicator. Mirrors the controller's edgeRouterConnectionStatus enum
+    // (online | offline | unknown) when present, falling back to the hasEdgeRouterConnection
+    // boolean otherwise. An identity that hasn't enrolled is "unenrolled" (its own state, not an
+    // error). There is no "error" value in the API, so we don't synthesize one.
+    if (node.status === 'Un-Registered') {
+        node.connState = 'unenrolled';
+    }
+    else {
+        const ers = ePoint.edgeRouterConnectionStatus;
+        if (ers === 'online' || ers === 'offline' || ers === 'unknown') {
+            node.connState = ers;
+        }
+        else {
+            node.connState = (ePoint.hasEdgeRouterConnection === true || ePoint.hasApiSession === true)
+                ? 'online' : 'offline';
+        }
+    }
     return node;
 }
 function createERNode(erouter) {
@@ -11509,38 +11625,58 @@ function createFabricRouterNode(fabricRouter, routerType) {
     nodeOb.routerType = routerType;
     return nodeOb;
 }
+// Determines the state of an identity/tunneler <-> edge-router link.
+// A router-reported problem (offline/errored router) is distinguished from a tunneler-side
+// problem (enrolled identity that cannot establish a connection to the router, e.g. blocked
+// by a firewall) so the visualizer can render the two causes differently.
 function getEndpointToRouterLinkState(endpointNode, routerNode) {
-    let linkstate = -1;
-    if (routerNode.status === 'ERROR') {
-        linkstate = 2; // router is broken — warning
+    if (routerNode.status === 'ERROR' || routerNode.online === 'No') {
+        return { state: 2, reason: 'router-down' }; // router-reported issue
     }
-    else if (endpointNode.status === 'Un-Registered') {
-        linkstate = -1;
-    }
-    else if (endpointNode.apiSession === 'No' || endpointNode.routerConnection === 'No') {
-        // No session or no connection = offline, not error
-        linkstate = -1;
+    if (endpointNode.status === 'Un-Registered') {
+        // Never enrolled — the path through this identity can't carry traffic, so it's not
+        // "available". Marked unavailable (the node still shows the specific "Not enrolled" cause).
+        return { state: 2, reason: 'misconfigured' };
     }
-    else if (routerNode.online === 'Yes' && endpointNode.routerConnection === 'Yes') {
-        linkstate = 1;
+    if (endpointNode.apiSession === 'No' || endpointNode.routerConnection === 'No') {
+        // Enrolled but cannot reach the edge router — tunneler-side broken (was previously
+        // shown as a benign "available" link, which is exactly what we're fixing).
+        return { state: 2, reason: 'tunneler-unreachable' };
     }
-    else {
-        linkstate = -1;
+    if (routerNode.online === 'Yes' && endpointNode.routerConnection === 'Yes') {
+        return { state: 1, reason: null }; // active/available
     }
-    return linkstate;
+    return { state: -1, reason: null };
 }
-function getServiceToEndpointLinkState(endpointNode, serviceNode) {
-    // status 1 = active, -1 = offline/available, 2 = warning/misconfigured
-    if (endpointNode.status === 'Un-Registered') {
-        return 2; // hosting identity never enrolled — misconfigured
+// Determines the state of a hosting identity/router <-> service link.
+// hasTerminator is the authoritative signal that the host actually established its hosting
+// connection: a Bind policy makes a host "expected", but only a terminator proves it connected.
+function getServiceToEndpointLinkState(hostNode, serviceNode) {
+    const isRouter = !!(hostNode.type && String(hostNode.type).includes('Router'));
+    if (isRouter) {
+        if (hostNode.status === 'ERROR' || hostNode.online === 'No') {
+            return { state: 2, reason: 'router-down' };
+        }
+        return { state: 1, reason: null };
+    }
+    // Identity host (tunneler). Broken-detection uses the host's own connection state, since
+    // terminators can't be attributed to a specific host (see note in getEndpointGraphObj).
+    if (hostNode.status === 'Un-Registered') {
+        return { state: 2, reason: 'misconfigured' }; // never enrolled
     }
-    else if (endpointNode.apiSession === 'No' || endpointNode.routerConnection === 'No') {
-        return -1; // just offline
+    if (hostNode.apiSession === 'No' || hostNode.routerConnection === 'No') {
+        return { state: 2, reason: 'tunneler-unreachable' }; // enrolled but unreachable (e.g. firewall)
     }
-    else if (endpointNode.status === 'Registered' && endpointNode.routerConnection === 'Yes') {
-        return 1; // active
+    if (hostNode.status === 'Registered' && hostNode.routerConnection === 'Yes') {
+        return { state: 1, reason: null }; // active/available
     }
-    return -1;
+    return { state: -1, reason: null };
+}
+// Applies a computed LinkState to a link, including its derived weight.
+function applyLinkState(lnk, ls) {
+    lnk.status = ls.state;
+    lnk.statusReason = ls.reason;
+    lnk.weight = getWeight(ls.state);
 }
 function getWeight(linkState) {
     return linkState === -1 ? 5 : 1;
@@ -11747,10 +11883,16 @@ class IdentityServicePathComponent {
         this.isDarkMode = false;
         this.refreshRotate = false;
         this.closeRotate = true;
+        this.lastRenderContext = null;
+        this.zoomBehavior = null;
+        this.hasInitialFit = false;
+        this.viewBoxWidth = 1050;
+        this.viewBoxHeight = 500;
         this.filterText = 'fetching services..';
         this.noSearchResults = false;
         this.autocompleteOptions = [];
         this.fullScreen = false;
+        this.legendCollapsed = false;
         this.endpoints = [];
         this.selectedService = '';
         this.doEndpointHasAppwans = false;
@@ -11901,6 +12043,8 @@ class IdentityServicePathComponent {
         this.serviceChanged();
     }
     serviceChanged() {
+        // Service change implies new topology — re-fit on next render.
+        this.hasInitialFit = false;
         this.isLoading = true;
         const allPromises = [];
         let serviceOb = null;
@@ -12013,12 +12157,57 @@ class IdentityServicePathComponent {
                             });
                         }
                     }
+                    this.lastRenderContext = {
+                        bindIdnetities,
+                        serviceOb,
+                        serviceConfigs: service_configs,
+                        hostEdgeRouters,
+                    };
                     this.startVisProcess(bindIdnetities, serviceOb, service_configs, hostEdgeRouters, serviceTerminators, serviceCircuits);
                     this.isLoading = false;
                 });
             });
         });
     }
+    async refreshFabricData() {
+        if (this.refreshRotate) {
+            return;
+        }
+        this.refreshRotate = true;
+        try {
+            const results = await Promise.allSettled([
+                this.mapDataService.fetchRouters(),
+                this.mapDataService.fetchLinks(),
+                this.mapDataService.fetchCircuits(),
+                this.mapDataService.fetchTerminators(),
+            ]);
+            const [routersResult, linksResult, circuitsResult, terminatorsResult] = results;
+            const allFailed = results.every((r) => r.status === 'rejected');
+            this.fabricApiAvailable = !allFailed;
+            if (routersResult.status === 'fulfilled') {
+                this.allRouters = routersResult.value.routers || [];
+                this.routerTypesMap = routersResult.value.routerTypes || new Map();
+            }
+            if (linksResult.status === 'fulfilled') {
+                this.allLinks = linksResult.value || [];
+            }
+            if (circuitsResult.status === 'fulfilled') {
+                this.allCircuits = circuitsResult.value || [];
+            }
+            if (terminatorsResult.status === 'fulfilled') {
+                this.allTerminators = terminatorsResult.value || [];
+            }
+            if (this.lastRenderContext) {
+                const { bindIdnetities, serviceOb, serviceConfigs, hostEdgeRouters } = this.lastRenderContext;
+                const serviceTerminators = this.allTerminators.filter((t) => (t.serviceId || t.service?.id || t.service) === serviceOb.id);
+                const serviceCircuits = this.allCircuits.filter((c) => c.service?.id === serviceOb.id);
+                this.startVisProcess(bindIdnetities, serviceOb, serviceConfigs, hostEdgeRouters, serviceTerminators, serviceCircuits);
+            }
+        }
+        finally {
+            this.refreshRotate = false;
+        }
+    }
     addItemToArray(bindIdnetities, ob) {
         if (!bindIdnetities.find((item) => item.id === ob.id)) {
             bindIdnetities.push(ob);
@@ -12076,21 +12265,42 @@ class IdentityServicePathComponent {
         this.dialogRef.close();
     }
     initTopoView() {
-        const vbWidth = 1050;
-        const vbHeight = 500;
+        const vbWidth = this.viewBoxWidth;
+        const vbHeight = this.viewBoxHeight;
         const colors = d3.scaleOrdinal(d3.schemeCategory10);
         const tooltip = d3.select('#epTooltip');
-        let svg = d3.select('#IdentityTopology'), node, link;
-        const handleZoom = (e) => svg.attr('transform', e.transform);
-        const zoom = d3.zoom().on('zoom', handleZoom);
+        // Hide is deferred so the cursor can travel from the node into the popover (to read/select
+        // its content); entering the popover cancels the hide, leaving it dismisses it.
+        let tooltipHideTimer = null;
+        tooltip.on('mouseenter', () => clearTimeout(tooltipHideTimer));
+        tooltip.on('mouseleave', () => tooltip.style('display', 'none'));
+        const svg = d3.select('#IdentityTopology');
+        const svgEl = svg.node();
+        let node, link;
         svg
             .attr('width', '100%')
             .attr('height', '100%')
-            // .call(zoom)
             .attr('viewBox', '-20 -20 ' + (vbWidth + 40) + ' ' + vbHeight)
-            .attr('preserveAspectRatio', 'xMidYMin meet')
-            .append('g');
+            .attr('preserveAspectRatio', 'xMidYMin meet');
+        // Capture any pre-existing zoom transform (from previous render / user gestures)
+        // so we can re-apply it after recreating the content group.
+        const existingTransform = svgEl
+            ? d3.zoomTransform(svgEl)
+            : d3.zoomIdentity;
         svg.selectAll('g').remove();
+        // Wrap all topology content in a <g> so zoom transforms have something to translate.
+        const contentG = svg.append('g').attr('class', 'topology-content');
+        contentG.attr('transform', existingTransform.toString());
+        const handleZoom = (e) => {
+            contentG.attr('transform', e.transform);
+        };
+        if (!this.zoomBehavior) {
+            this.zoomBehavior = d3.zoom().scaleExtent([0.1, 5]).on('zoom', handleZoom);
+        }
+        else {
+            this.zoomBehavior.on('zoom', handleZoom);
+        }
+        svg.call(this.zoomBehavior);
         const simulation = d3
             .forceSimulation()
             .force('link', d3
@@ -12104,47 +12314,49 @@ class IdentityServicePathComponent {
             .force('center', d3.forceCenter(vbWidth / 2, vbHeight / 2));
         const links = this.graphJsonObj.links;
         const nodes = this.graphJsonObj.nodes;
-        link = svg
+        link = contentG
             .selectAll('g.line.line')
             .data(links)
             .enter()
             .append('g')
             .attr('class', 'link')
             .attr('marker-end', 'url(#arrowhead)');
+        // Three link styles, distinguishable by pattern (color-blind-safe) and color. A single
+        // "broken" style covers every failure — which END is the problem is read from the node
+        // colors (an offline router vs an unreachable/un-enrolled endpoint), so the link needn't
+        // re-encode the cause:
+        //   active circuit -> green solid
+        //   available      -> gray dashed
+        //   broken         -> red dotted
+        const isBroken = (d) => d.status === 2;
         link
             .append('line')
             .style('stroke-width', function (d) {
-            if (d.linkType === 'active-circuit') {
+            if (d.linkType === 'active-circuit')
                 return 1.5;
-            }
+            if (isBroken(d))
+                return 2.25;
             return 1.25;
+        })
+            .style('stroke-linecap', function (d) {
+            // Rounded caps turn the tight broken dash array into actual dots.
+            return isBroken(d) ? 'round' : 'butt';
         })
             .style('stroke', function (d) {
-            if (d.linkType === 'active-circuit') {
+            if (d.linkType === 'active-circuit')
                 return '#00cd13';
-            }
+            if (isBroken(d))
+                return '#e6432e';
             return '#8a8f9a';
         })
             .style('stroke-dasharray', function (d) {
-            if (d.linkType === 'active-circuit') {
-                return null;
-            }
-            return '5,5';
-        });
-        link.each(function (d, i) {
-            const _this = d3.select(this);
-            if (d.status === 2) {
-                // Warning/misconfigured — show link-cut icon
-                _this
-                    .append('image')
-                    .attr('xlink:href', function () {
-                    return 'assets/images/visualizer/link-cut.png';
-                })
-                    .attr('width', '20')
-                    .attr('height', '24');
-            }
+            if (d.linkType === 'active-circuit')
+                return null; // solid
+            if (isBroken(d))
+                return '0.5,6'; // dotted
+            return '5,5'; // available: dashed
         });
-        node = svg
+        node = contentG
             .selectAll('.node')
             .data(nodes)
             .enter()
@@ -12154,61 +12366,73 @@ class IdentityServicePathComponent {
             .append('image')
             .attr('xlink:href', function (d) {
             const routerImagePath = 'assets/images/visualizer/Routers.png';
-            const nonProvisionedRouterImagePath = 'assets/images/visualizer/ER.png';
-            const errRouterImagePath = 'assets/images/visualizer/error_er.png';
-            const errEndpointImagePath = 'assets/images/visualizer/host-error.png';
             const unregisteredEndpointImagePath = 'assets/images/visualizer/host_unregistered.png';
             const endPointPath = 'assets/images/visualizer/host.png';
-            if (d.type.includes('Identity') && d.status === 'Un-Registered') {
-                return unregisteredEndpointImagePath;
-            }
-            else if (d.type.includes('Identity') && d.routerConnection === 'No') {
-                return unregisteredEndpointImagePath;
-            }
-            else if (d.type.includes('Identity')) {
+            if (d.type.includes('Identity')) {
+                // Un-enrolled identities get the distinct "unregistered" icon; otherwise the normal
+                // host icon — the status dot below conveys online/offline/unknown.
+                if (d.connState === 'unenrolled' || d.status === 'Un-Registered') {
+                    return unregisteredEndpointImagePath;
+                }
                 return endPointPath;
             }
-            else if (d.type.includes('Router') &&
-                (d.status === 'ERROR' || d.online === 'No')) {
-                return errRouterImagePath;
-            }
-            else if (d.type.includes('Router') && d.status === 'PROVISIONED') {
+            if (d.type.includes('Router')) {
+                // One base router icon; the status dot below carries online/offline (the baked dot in
+                // the PNG is covered by that overlay).
                 return routerImagePath;
             }
-            else if (d.type.includes('Router')) {
-                return nonProvisionedRouterImagePath;
-            }
             if (d.group === '4') {
                 return 'assets/images/visualizer/service.png';
             }
-            else {
-                return '';
-            }
+            return '';
         })
             .attr('x', -25)
             .attr('y', -25)
             .attr('width', '40')
             .attr('height', '40');
-        // Add status circle overlay for identity nodes
-        node.filter((d) => d.type.includes('Identity'))
+        // Status dot for identities AND routers. Colors a single dot by the node's real state
+        // (no "error" — that isn't a value the API exposes). Routers use a larger dot positioned to
+        // cover the status dot baked into the router PNG.
+        const statusColor = (d) => {
+            if (d.type.includes('Router')) {
+                return (d.online === 'No' || d.status === 'ERROR') ? '#8a8f9a' : '#08dc5a';
+            }
+            switch (d.connState) {
+                case 'online': return '#08dc5a'; // green
+                case 'unknown': return '#e6a700'; // amber — controller can't determine
+                case 'unenrolled': return '#ffffff'; // hollow (gray ring below)
+                case 'offline':
+                default: return '#8a8f9a'; // gray
+            }
+        };
+        // Positioned to sit directly over the dot baked into each icon PNG (≈ the icon's top-right),
+        // sized just large enough to cover it (the white halo masks the baked dot's soft glow).
+        node.filter((d) => d.type.includes('Identity') || d.type.includes('Router'))
             .append('circle')
-            .attr('cx', 10)
-            .attr('cy', -20)
-            .attr('r', 4.5)
-            .attr('fill', function (d) {
-            if (d.routerConnection === 'Yes' || d.apiSession === 'Yes')
-                return '#08dc5a';
-            return '#8a8f9a';
-        })
-            .attr('stroke', 'white')
-            .attr('stroke-width', 1.5);
-        // Symmetric labels — truncated, centered below each node
+            .attr('cx', (d) => d.type.includes('Router') ? 6 : 8)
+            .attr('cy', (d) => d.type.includes('Router') ? -20 : -19)
+            .attr('r', 5)
+            .attr('fill', (d) => statusColor(d))
+            // Un-enrolled identities render as a hollow ring (gray border); everything else gets a
+            // white separator ring against the icon.
+            .attr('stroke', (d) => (!d.type.includes('Router') && d.connState === 'unenrolled') ? '#8a8f9a' : 'white')
+            .attr('stroke-width', 2);
+        // Node labels: for compound pipe-delimited names ("<networkId>|<identityId>|Human Name")
+        // show only the last segment so the canvas stays readable; the full name remains in the
+        // hover tooltip.
+        const getDisplayLabel = (fullName) => {
+            if (!fullName)
+                return '';
+            const segments = fullName.split('|').map((s) => s.trim()).filter((s) => s.length > 0);
+            const candidate = segments.length > 0 ? segments[segments.length - 1] : fullName;
+            const maxLen = 28;
+            return candidate.length > maxLen
+                ? candidate.substring(0, maxLen) + '…'
+                : candidate;
+        };
         node.each(function (d) {
             const g = d3.select(this);
-            const maxLen = 50;
-            const displayName = d.name && d.name.length > maxLen
-                ? d.name.substring(0, maxLen) + '\u2026'
-                : d.name;
+            const displayName = getDisplayLabel(d.name);
             const text = g.append('text')
                 .attr('x', 0)
                 .attr('y', 28)
@@ -12311,10 +12535,13 @@ class IdentityServicePathComponent {
         } // end of ticked
         function removeTooltip() {
             if (tooltip) {
-                tooltip.style('display', 'none');
+                // Defer the hide so the user can move onto the popover; mouseenter (above) cancels it.
+                clearTimeout(tooltipHideTimer);
+                tooltipHideTimer = setTimeout(() => tooltip.style('display', 'none'), 220);
             }
         }
         function drawTooltip(event, d, endpointUtlizationJson) {
+            clearTimeout(tooltipHideTimer);
             document.getElementById('epTooltip').innerHTML = readKeyValues(d, endpointUtlizationJson);
             tooltip.style('display', 'block');
             tooltip.style('white-space', 'pre-wrap');
@@ -12323,34 +12550,133 @@ class IdentityServicePathComponent {
             tooltip.style('left', x);
             tooltip.style('top', y);
         }
+        // Builds a compact status "card" for a node's hover tooltip: a bold name, a prominent
+        // plain-language status line (with cause), and a few key facts. Makes the connectivity of
+        // customer-hosted tunnelers and routers immediately legible.
         function readKeyValues(d, endpointUtlizationJson) {
-            const excludeKeys = new Set([
-                'status', 'posy', 'posx', 'group', 'hostedEdgeId', 'value',
-                'index', 'parent', 'depth', 'x', 'y', 'id', 'x0', 'y0',
-                'vy', 'vx', 'routerType', 'linkType', 'provider', 'usage',
-            ]);
-            let info = "<div class='tool-tip-container'>";
-            // Show name as header
-            if (d.name) {
-                info += '<div class="tooltip-header">' + d.name + '</div>';
-            }
-            const keys = Object.keys(d);
-            keys.forEach(function (k) {
-                if (excludeKeys.has(k) || k === 'name')
-                    return;
-                let val = d[k];
-                if (val === null || val === undefined || val === '')
-                    return;
-                const label = k.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase());
-                if (isAnObject(val)) {
-                    val = val.name || JSON.stringify(val);
+            const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+            const isRouter = !!(d.type && String(d.type).includes('Router'));
+            const isService = d.group === '4' || !!(d.type && String(d.type).includes('Service'));
+            // The status band is the single source of truth for connectivity/enrollment — it replaces
+            // any separate "Enrolled" row. `caption` is a short fragment, used only where it tells the
+            // operator something the label alone doesn't (i.e. what to go check).
+            // Status pill mirrors the node dot — the component's real state (online / offline /
+            // unknown / not-enrolled), never a synthesized "error". Path problems live on the links.
+            let cls = 'neutral';
+            let label = '';
+            if (isService) {
+                label = 'Service';
+            }
+            else if (isRouter) {
+                // Routers only expose isOnline (no edgeRouterConnectionStatus).
+                if (d.online === 'No' || d.status === 'ERROR') {
+                    cls = 'offline';
+                    label = 'Offline';
+                }
+                else {
+                    cls = 'ok';
+                    label = 'Online';
                 }
-                else if (val instanceof Array) {
-                    val = val.join(', ');
+            }
+            else {
+                switch (d.connState) {
+                    case 'online':
+                        cls = 'ok';
+                        label = 'Online';
+                        break;
+                    case 'unknown':
+                        cls = 'unknown';
+                        label = 'Unknown';
+                        break;
+                    case 'unenrolled':
+                        cls = 'offline';
+                        label = 'Not enrolled';
+                        break;
+                    case 'offline':
+                    default:
+                        cls = 'offline';
+                        label = 'Offline';
+                        break;
                 }
-                info += '<div class="prop-row">'
-                    + '<span class="prop-label">' + label + '</span>'
-                    + '<span class="prop-value">' + val + '</span>'
+            }
+            // No role for the service node — the icon/name already make it obvious, and a "Role: Service"
+            // row would just repeat itself.
+            // Role is the policy action (Dial/Bind) the identity has for the service — NOT the host
+            // mechanism, which we can't know (tunneler vs SDK vs router all look the same here).
+            let role = '';
+            if (d.group === '1')
+                role = 'Client (Dial)';
+            else if (d.group === '3')
+                role = 'Host (Bind)';
+            else if (isRouter)
+                role = d.routerType === 'transit-router' ? 'Transit router' : 'Edge router';
+            // Facts that add detail beyond the status pill. The pill summarizes overall state; these
+            // are the granular signals an operator uses to diagnose it (a host can have an API session
+            // yet no router connection). Only the pill's own inputs (Online/Type/Enrolled) are omitted.
+            // Rows are [label, value, optional hover-context]. Service rows are purpose-labeled and
+            // adapt to how the service is configured (intercept+host, host-only, intercept-only, or
+            // SDK-defined with no address config).
+            const rows = [];
+            if (isService) {
+                if (d.interceptSummary) {
+                    rows.push(['Intercept', d.interceptSummary]);
+                }
+                if (d.hostSummary) {
+                    rows.push(['Host', d.hostSummary]);
+                }
+                if (!d.interceptSummary && !d.hostSummary) {
+                    // No intercept/host config. State the facts (the config types present, or none) rather
+                    // than inferring "SDK-defined" — there's no property that actually tells us the host type.
+                    rows.push(['Config types',
+                        (d.configTypeNames && d.configTypeNames.length) ? d.configTypeNames.join(', ') : 'None']);
+                }
+                if (typeof d.encryptionRequired === 'boolean') {
+                    rows.push(['Encryption', d.encryptionRequired ? 'Required' : 'Not required']);
+                }
+                if (d.terminatorStrategy) {
+                    rows.push(['Terminators', d.terminatorStrategy]);
+                }
+                if (d.serviceRoleAttributes && d.serviceRoleAttributes.length) {
+                    rows.push(['Attributes', d.serviceRoleAttributes.join(', ')]);
+                }
+                if (d.permissions && d.permissions.length) {
+                    rows.push(['Your access', d.permissions.join(', ')]);
+                }
+            }
+            else {
+                if (role)
+                    rows.push(['Role', role]);
+                if (isRouter) {
+                    if (d.tunnelerEnabled === 'Yes' || d.tunnelerEnabled === 'No') {
+                        rows.push(['Tunneler Enabled', d.tunnelerEnabled]);
+                    }
+                }
+                else {
+                    if (d.routerConnection === 'Yes' || d.routerConnection === 'No') {
+                        rows.push(['Router Connection', d.routerConnection]);
+                    }
+                    if (d.apiSession === 'Yes' || d.apiSession === 'No') {
+                        rows.push(['API Session', d.apiSession]);
+                    }
+                    if (d.os)
+                        rows.push(['OS', d.os]);
+                    if (d.mfaEnabled === true)
+                        rows.push(['MFA', 'Enabled']);
+                }
+            }
+            let info = "<div class='tool-tip-container tooltip-card'>";
+            info += '<div class="tooltip-header">' + esc(d.name || '') + '</div>';
+            // The service node carries no connectivity state, so it gets no status pill.
+            if (!isService) {
+                info += '<div class="tt-status-pill tt-' + cls + '">'
+                    + '<span class="tt-status-dot"></span>'
+                    + '<span class="tt-status-label">' + esc(label) + '</span>'
+                    + '</div>';
+            }
+            rows.forEach(([k, v, t]) => {
+                info += '<div class="prop-row"' + (t ? ' title="' + esc(t) + '"' : '') + '>'
+                    + '<span class="prop-label">' + esc(k) + '</span>'
+                    + '<span class="prop-value">' + esc(v) + '</span>'
                     + '</div>';
             });
             return info + '</div>';
@@ -12359,13 +12685,79 @@ class IdentityServicePathComponent {
             return o instanceof Object && o.constructor === Object;
         }
         this.refreshRotate = false;
+        // After the first render only, fit the graph to the viewBox so big topologies don't
+        // overflow off-screen. Subsequent renders (refresh ticks) preserve the user's transform.
+        if (!this.hasInitialFit) {
+            setTimeout(() => {
+                this.fitToContent();
+                this.hasInitialFit = true;
+            }, 0);
+        }
     } // end of initTopoView
+    fitToContent() {
+        if (!this.zoomBehavior)
+            return;
+        const nodes = this.graphJsonObj?.nodes || [];
+        if (nodes.length === 0)
+            return;
+        const xs = nodes
+            .map((n) => n.posx)
+            .filter((v) => typeof v === 'number' && !isNaN(v));
+        const ys = nodes
+            .map((n) => n.posy)
+            .filter((v) => typeof v === 'number' && !isNaN(v));
+        if (xs.length === 0 || ys.length === 0)
+            return;
+        const padding = 60;
+        const minX = Math.min(...xs);
+        const maxX = Math.max(...xs);
+        const minY = Math.min(...ys);
+        const maxY = Math.max(...ys);
+        const contentWidth = (maxX - minX) + padding * 2;
+        const contentHeight = (maxY - minY) + padding * 2;
+        if (contentWidth <= 0 || contentHeight <= 0)
+            return;
+        // Reserve room in the bottom-right for the legend so the auto-fit doesn't place nodes
+        // underneath it. When the legend is collapsed there's nothing to avoid.
+        const reserveRight = this.legendCollapsed ? 0 : 160;
+        const reserveBottom = this.legendCollapsed ? 0 : 90;
+        const availWidth = this.viewBoxWidth - reserveRight;
+        const availHeight = this.viewBoxHeight - reserveBottom;
+        const scale = Math.min(availWidth / contentWidth, availHeight / contentHeight, 1);
+        // Center the content within the available (legend-free) area, which sits at the top-left,
+        // leaving the reserved margin on the right/bottom for the legend panel.
+        const tx = (availWidth - contentWidth * scale) / 2 - (minX - padding) * scale;
+        const ty = (availHeight - contentHeight * scale) / 2 - (minY - padding) * scale;
+        d3.select('#IdentityTopology')
+            .transition()
+            .duration(300)
+            .call(this.zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
+    }
+    zoomIn() {
+        if (!this.zoomBehavior)
+            return;
+        d3.select('#IdentityTopology')
+            .transition()
+            .duration(200)
+            .call(this.zoomBehavior.scaleBy, 1.4);
+    }
+    zoomOut() {
+        if (!this.zoomBehavior)
+            return;
+        d3.select('#IdentityTopology')
+            .transition()
+            .duration(200)
+            .call(this.zoomBehavior.scaleBy, 1 / 1.4);
+    }
+    resetView() {
+        this.fitToContent();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IdentityServicePathComponent, deps: [{ token: IdentityServicePathHelper }, { token: MapDataService }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: IdentityServicePathComponent, isStandalone: false, selector: "app-identity-visualizer", ngImport: i0, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizer\">\n  <div class=\"tp-data-header\">\n    <div class=\"modaltitle\">Identity Service Path</div>\n    <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n    <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n  </div>\n  <div [ngClass]=\"isDarkMode==true?'darkMode':'lightMode'\" class=\"identity-topology-container\">\n    <div style=\"width: 100%; height: 80px; float: left\">\n      <div class=\"ep-topology-filter-container listBox row\">\n        <input\n          (keyup)=\"filterSearchArray()\"\n          [(ngModel)]=\"selectedService\"\n          [matAutocomplete]=\"auto\"\n          class=\"topology-filter-input\"\n          id=\"filterText\"\n          matInput\n          placeholder=\"Type to search identity accessible services.\"\n          />\n\n        @if (filterText) {\n          <div\n            (click)=\"clearSearchFilter()\"\n            class=\"clear-svc-icon icon-close\"\n            id=\"ClearSearchFilter\"\n          ></div>\n        }\n        <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n          @for (option of autocompleteOptions; track option) {\n            <mat-option [value]=\"option.name\">\n              {{ option.name }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </div>\n    </div>\n\n    <div class=\"topotip\" id=\"epTooltip\"></div>\n\n    <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1400\">\n    </svg>\n    @if (isLoading) {\n      <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n    }\n\n    <div class=\"topology-legend\">\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Nodes</div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/host.png\" /></div>\n          <div class=\"legend-text\">Identity</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/Routers.png\" /></div>\n          <div class=\"legend-text\">Edge Router</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/service.png\" /></div>\n          <div class=\"legend-text\">Service</div>\n        </div>\n      </div>\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Status</div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle registered_in_use\"></div></div>\n          <div class=\"legend-text\">Online</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle unregistered\"></div></div>\n          <div class=\"legend-text\">Offline</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle errored\"></div></div>\n          <div class=\"legend-text\">Error</div>\n        </div>\n      </div>\n      @if (fabricApiAvailable) {\n        <div class=\"legend-section\">\n          <div class=\"legend-section-title\">Path</div>\n          <div class=\"legend-item\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line active-circuit\"></div></div>\n            <div class=\"legend-text\">Active Circuit</div>\n          </div>\n          <div class=\"legend-item\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line available\"></div></div>\n            <div class=\"legend-text\">Available</div>\n          </div>\n          <div class=\"legend-item\">\n            <div class=\"legend-icon-col\"><div class=\"legend-icon misconfigured\"></div></div>\n            <div class=\"legend-text\">Broken</div>\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n</div>\n", styles: ["#IdentityVisualizer{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed;display:flex;flex-direction:column}#IdentityVisualizer .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizer .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizer .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizer .clear-svc-icon{font-size:1.4375rem;font-weight:600;position:relative;top:.9375rem;right:2.5rem;color:var(--icon);cursor:pointer}#IdentityVisualizer .clear-svc-icon:hover{filter:brightness(50%)}#IdentityVisualizer.full-screen{width:100%;height:100%;border-radius:0}.ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}.buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}.identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;cursor:grab;flex:1;overflow:hidden}.lightMode{background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.darkMode{background:#000a17;background-image:linear-gradient(#001127 .125rem,transparent 0),linear-gradient(90deg,#001127 .125rem,transparent 0),linear-gradient(#001127 1px,transparent 0),linear-gradient(90deg,#001127 1px,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}.node text{font:.75rem Open Sans,Arial,sans-serif}.modaltitle{padding-top:.375rem;padding-left:.3125rem;color:var(--primaryColor)}.modalbuttons{padding-right:1.25rem}.listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}.tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}.services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}.topology-filter-input{height:3.125rem;width:95%;border-radius:1.5625rem;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding-left:1.25rem}::ng-deep .topotip{display:none;position:fixed;background:var(--navigation);border-radius:.5rem;pointer-events:none;box-shadow:0 .25rem 1rem 0 var(--shadow);color:var(--tableText);z-index:2000;padding:0;max-width:24rem;overflow:hidden}.topology-legend{width:13rem;border-radius:.5rem;position:absolute;bottom:1rem;right:.625rem;background:var(--navigation);box-shadow:0 .25rem .75rem 0 var(--shadow);padding:.9rem}.legend-section{padding:.3rem 0}.legend-section:first-child{padding-top:0}.legend-section:last-child{padding-bottom:0;margin-bottom:-.5rem}.legend-section:not(:last-child){border-bottom:1px solid var(--shadow)}.legend-section-title{font-family:Russo One,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin-bottom:.25rem}.legend-item{display:flex;align-items:center;gap:0;padding:.225rem 0}.legend-icon-col{width:2.5rem;min-width:2.5rem;display:flex;align-items:center;justify-content:center;margin-right:.4rem}.legend-circle{height:.75rem;width:.75rem;min-width:.75rem;border-radius:50%}.legend-circle.unregistered{background-color:#8a8f9a}.legend-circle.registered_in_use{background-color:#08dc5a}.legend-circle.errored{background-color:#fb0d3d}.legend-line{height:.225rem;width:1.5rem}.legend-line.active-circuit{background-color:#00cd13}.legend-line.available{background:repeating-linear-gradient(to right,#8a8f9a 0,#8a8f9a .25rem,transparent .25rem,transparent .5rem)}.legend-text{font-size:.975rem;font-weight:500;color:var(--tableText);white-space:nowrap}.legend-node-icon{width:2rem;height:2rem;min-width:2rem;object-fit:contain}.legend-icon.misconfigured{width:1.2rem;height:1.2rem;min-width:1.2rem;background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain;background-repeat:no-repeat}.legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.rotating{-webkit-animation:rotating 2s linear infinite;-moz-animation:rotating 2s linear infinite;-ms-animation:rotating 2s linear infinite;-o-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}::ng-deep .tool-tip-container{padding:0}::ng-deep .tool-tip-container .tooltip-header{font-family:Russo One,sans-serif;font-size:.975rem;color:var(--primary);padding:.75rem .9rem .45rem;border-bottom:1px solid var(--shadow)}::ng-deep .tool-tip-container .prop-row{display:flex;justify-content:space-between;gap:1.2rem;padding:.375rem .9rem;font-size:.9rem}::ng-deep .tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}::ng-deep .tool-tip-container .prop-row:last-child{padding-bottom:.6rem}::ng-deep .tool-tip-container .prop-label{color:var(--tableText);opacity:.6;font-weight:500;white-space:nowrap}::ng-deep .tool-tip-container .prop-value{color:var(--tableText);font-weight:600;text-align:right}::ng-deep .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-radius:14px;background:var(--background);color:var(--tableText)}::ng-deep .mat-mdc-option.mdc-list-item{align-items:center;color:var(--tableText)}::ng-deep .mat-mdc-option.mdc-list-item:hover:not(.mat-option-disabled),::ng-deep .mat-mdc-option.mdc-list-item:focus:not(.mat-option-disabled){border-color:var(--primaryColor);border-radius:14px;border:.01rem solid var(--primaryColor)}::ng-deep .mat-mdc-raised-button .mdc-button__ripple{border:.1rem solid var(--primaryColor)}::ng-deep .p-button.p-button-icon-only{width:1.357rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: IdentityServicePathComponent, isStandalone: false, selector: "app-identity-visualizer", ngImport: i0, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizer\">\n  <div class=\"tp-data-header\">\n    <div class=\"modaltitle\">Identity Service Path</div>\n    <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n    <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n  </div>\n  <div [ngClass]=\"isDarkMode==true?'darkMode':'lightMode'\" class=\"identity-topology-container\">\n    <div class=\"topology-toolbar\">\n      <div class=\"ep-topology-filter-container listBox row\">\n        <input\n          (keyup)=\"filterSearchArray()\"\n          [(ngModel)]=\"selectedService\"\n          [matAutocomplete]=\"auto\"\n          class=\"topology-filter-input\"\n          id=\"filterText\"\n          matInput\n          placeholder=\"Type to search identity accessible services.\"\n          />\n\n        @if (filterText) {\n          <div\n            (click)=\"clearSearchFilter()\"\n            class=\"clear-svc-icon icon-close\"\n            id=\"ClearSearchFilter\"\n          ></div>\n        }\n        <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n          @for (option of autocompleteOptions; track option) {\n            <mat-option [value]=\"option.name\">\n              {{ option.name }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </div>\n      <div class=\"topology-refresh-controls\">\n        <div\n          (click)=\"refreshFabricData()\"\n          [ngClass]=\"{ rotating: refreshRotate }\"\n          class=\"refresh-button\"\n          id=\"RefreshFabricButton\"\n          title=\"Refresh fabric data\"\n        >\n          <div class=\"refresh-icon\"></div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"topotip\" id=\"epTooltip\"></div>\n\n    <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1400\">\n    </svg>\n    <div class=\"topology-zoom-controls\">\n      <div (click)=\"zoomIn()\" class=\"zoom-btn\" title=\"Zoom in\" id=\"ZoomInButton\">+</div>\n      <div (click)=\"zoomOut()\" class=\"zoom-btn\" title=\"Zoom out\" id=\"ZoomOutButton\">&#8722;</div>\n      <div (click)=\"resetView()\" class=\"zoom-btn zoom-btn-text\" title=\"Fit to content\" id=\"FitToContentButton\">Fit</div>\n    </div>\n    @if (isLoading) {\n      <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n    }\n\n    <div class=\"topology-legend\" [class.collapsed]=\"legendCollapsed\">\n      <div class=\"legend-header\" (click)=\"legendCollapsed = !legendCollapsed\"\n           [title]=\"legendCollapsed ? 'Show legend' : 'Hide legend'\">\n        <span class=\"legend-header-title\">Legend</span>\n        <span class=\"legend-header-toggle\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 16 16\" width=\"13\" height=\"13\">\n            <path d=\"M3.5 6 L8 10.5 L12.5 6\" fill=\"none\" stroke=\"currentColor\"\n                  stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </div>\n      @if (!legendCollapsed) {\n      <div class=\"legend-body\">\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Nodes</div>\n        <div class=\"legend-item\" title=\"An endpoint identity \u2014 a client that dials the service or a tunneler that hosts it.\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/host.png\" /></div>\n          <div class=\"legend-text\">Identity</div>\n        </div>\n        <div class=\"legend-item\" title=\"A Ziti edge router that relays traffic between identities.\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/Routers.png\" /></div>\n          <div class=\"legend-text\">Edge Router</div>\n        </div>\n        <div class=\"legend-item\" title=\"The service being dialed and hosted.\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/service.png\" /></div>\n          <div class=\"legend-text\">Service</div>\n        </div>\n      </div>\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Status</div>\n        <div class=\"legend-item\" title=\"Connected to an edge router.\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle online\"></div></div>\n          <div class=\"legend-text\">Online</div>\n        </div>\n        <div class=\"legend-item\" title=\"Enrolled but not currently connected (e.g. powered off or idle).\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle offline\"></div></div>\n          <div class=\"legend-text\">Offline</div>\n        </div>\n        <div class=\"legend-item\" title=\"Identity-only: the controller can't currently determine the connection state.\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle unknown\"></div></div>\n          <div class=\"legend-text\">Unknown</div>\n        </div>\n        <div class=\"legend-item\" title=\"Identity has not completed enrollment.\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle notenrolled\"></div></div>\n          <div class=\"legend-text\">Not enrolled</div>\n        </div>\n      </div>\n      @if (fabricApiAvailable) {\n        <div class=\"legend-section\">\n          <div class=\"legend-section-title\">Path</div>\n          <div class=\"legend-item\" title=\"Live traffic is flowing over this hop right now.\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line active-circuit\"></div></div>\n            <div class=\"legend-text\">Active Circuit</div>\n          </div>\n          <div class=\"legend-item\" title=\"Reachable and authorized, but no active circuit at the moment.\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line available\"></div></div>\n            <div class=\"legend-text\">Available</div>\n          </div>\n          <div class=\"legend-item\" title=\"This hop can't carry traffic right now. The node colors show which end is the problem \u2014 an offline router, or an unreachable / un-enrolled endpoint.\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line broken\"></div></div>\n            <div class=\"legend-text\">Unavailable</div>\n          </div>\n        </div>\n      }\n      </div>\n      }\n    </div>\n\n  </div>\n</div>\n", styles: ["#IdentityVisualizer{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed;display:flex;flex-direction:column}#IdentityVisualizer .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizer .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizer .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizer .clear-svc-icon{position:absolute;top:50%;right:.55rem;transform:translateY(-50%);width:1.65rem;height:1.65rem;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:.95rem;color:var(--icon);cursor:pointer;transition:background .12s ease,color .12s ease}#IdentityVisualizer .clear-svc-icon:hover{background:color-mix(in srgb,var(--tableText) 12%,transparent);color:var(--tableText)}#IdentityVisualizer.full-screen{width:100%;height:100%;border-radius:0}.ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}.topology-toolbar .ep-topology-filter-container{position:relative;margin:0;flex:1 1 auto;min-width:0;max-width:28rem}.topology-toolbar{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.25rem .625rem;box-sizing:border-box;width:100%;flex-shrink:0;position:relative;z-index:4}.buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}.topology-refresh-controls{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.topology-refresh-controls .refresh-button{width:2.5rem;height:2.5rem;border-radius:50%;background-color:var(--navigation);box-shadow:0 .375rem 1rem 0 var(--shadow),0 0 0 .0625rem var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:filter .15s ease,transform .1s ease,box-shadow .15s ease}.topology-refresh-controls .refresh-button .refresh-icon{width:1.125rem;height:1.125rem;background-color:var(--tableText);opacity:.85;-webkit-mask:url(/assets/svgs/refresh.svg) center/contain no-repeat;mask:url(/assets/svgs/refresh.svg) center/contain no-repeat;transition:opacity .15s ease}.topology-refresh-controls .refresh-button:hover{box-shadow:0 .5rem 1.25rem 0 var(--shadow),0 0 0 .0625rem var(--primaryColor)}.topology-refresh-controls .refresh-button:hover .refresh-icon{opacity:1}.topology-refresh-controls .refresh-button:active{transform:scale(.95)}.topology-refresh-controls .refresh-button.rotating .refresh-icon{animation:rotating 1s linear infinite}.topology-zoom-controls{position:absolute;bottom:1rem;left:1rem;display:flex;flex-direction:column;gap:.375rem;z-index:5}.topology-zoom-controls .zoom-btn{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background-color:var(--navigation);color:var(--tableText);font-family:Open Sans,Arial,sans-serif;font-size:1.25rem;font-weight:600;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:0 .5rem 1.25rem 0 var(--shadow);transition:filter .15s ease,transform .15s ease}.topology-zoom-controls .zoom-btn.zoom-btn-text{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}.topology-zoom-controls .zoom-btn:hover{filter:brightness(85%)}.topology-zoom-controls .zoom-btn:active{transform:scale(.95)}.identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;flex:1;overflow:hidden;position:relative}#IdentityTopology{cursor:grab;flex:1;min-height:0}#IdentityTopology:active{cursor:grabbing}.lightMode{background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.darkMode{background:#000a17;background-image:linear-gradient(#001127 .125rem,transparent 0),linear-gradient(90deg,#001127 .125rem,transparent 0),linear-gradient(#001127 1px,transparent 0),linear-gradient(90deg,#001127 1px,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}.node text{font:.75rem Open Sans,Arial,sans-serif}.modaltitle{padding-top:.375rem;padding-left:.3125rem;color:var(--primaryColor)}.modalbuttons{padding-right:1.25rem}.listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}.tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}.services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}.topology-filter-input{height:2.75rem;width:100%;box-sizing:border-box;border-radius:.75rem;border:1px solid var(--shadow);background-color:var(--background);color:var(--tableText);box-shadow:0 .0625rem .125rem #0000000f;padding:0 2.6rem 0 1rem;font-size:.95rem;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.topology-filter-input::placeholder{color:color-mix(in srgb,var(--tableText) 50%,transparent)}.topology-filter-input:hover{border-color:color-mix(in srgb,var(--tableText) 28%,transparent)}.topology-filter-input:focus{border-color:var(--primary);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--primary) 18%,transparent)}::ng-deep .topotip{display:none;position:fixed;background:var(--navigation);border-radius:.5rem;pointer-events:auto;box-shadow:0 .25rem 1rem 0 var(--shadow);color:var(--tableText);z-index:2000;padding:0;max-width:24rem;overflow:hidden}.topology-legend{width:15rem;border-radius:.5rem;position:absolute;bottom:1rem;right:.625rem;background:var(--navigation);box-shadow:0 .25rem .75rem 0 var(--shadow);padding:.9rem}.topology-legend.collapsed{width:auto}.legend-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none}.legend-header-title{font-family:Russo One,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--primary)}.legend-header-toggle{color:var(--primary);display:flex;align-items:center}.legend-header-toggle svg{display:block;transition:transform .15s ease}.topology-legend.collapsed .legend-header-toggle svg{transform:rotate(180deg)}.legend-body{padding-top:.6rem}.legend-section{padding:.3rem 0}.legend-section:first-child{padding-top:0}.legend-section:last-child{padding-bottom:0;margin-bottom:-.5rem}.legend-section:not(:last-child){border-bottom:1px solid var(--shadow)}.legend-section-title{font-family:Russo One,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin-bottom:.25rem}.legend-item{display:flex;align-items:center;gap:0;padding:.225rem 0;cursor:help}.legend-icon-col{width:2.5rem;min-width:2.5rem;display:flex;align-items:center;justify-content:center;margin-right:.4rem}.legend-circle{height:.75rem;width:.75rem;min-width:.75rem;border-radius:50%}.legend-circle.online{background-color:#08dc5a}.legend-circle.offline{background-color:#8a8f9a}.legend-circle.unknown{background-color:#e6a700}.legend-circle.notenrolled{background-color:var(--background);border:.125rem solid #8a8f9a}.legend-line{height:.225rem;width:1.5rem}.legend-line.active-circuit{background-color:#00cd13}.legend-line.available{background:repeating-linear-gradient(to right,#8a8f9a 0,#8a8f9a .25rem,transparent .25rem,transparent .5rem)}.legend-line.broken{height:0;background:none;border-top:.28rem dotted #e6432e}.legend-text{font-size:.975rem;font-weight:500;color:var(--tableText);white-space:nowrap}.legend-node-icon{width:2rem;height:2rem;min-width:2rem;object-fit:contain}.legend-icon.misconfigured,.legend-icon.broken-link{width:1.2rem;height:1.2rem;min-width:1.2rem;background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain;background-repeat:no-repeat}.legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.rotating{-webkit-animation:rotating 2s linear infinite;-moz-animation:rotating 2s linear infinite;-ms-animation:rotating 2s linear infinite;-o-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}::ng-deep .tool-tip-container{padding:0}::ng-deep .tool-tip-container .tooltip-header{font-family:Russo One,sans-serif;font-size:.975rem;color:var(--primary);padding:.7rem .9rem .15rem}::ng-deep .tool-tip-container .prop-row{display:flex;justify-content:space-between;gap:1.2rem;padding:.375rem .9rem;font-size:.9rem}::ng-deep .tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}::ng-deep .tool-tip-container .prop-row:last-child{padding-bottom:.6rem}::ng-deep .tool-tip-container .prop-label{color:var(--tableText);opacity:.6;font-weight:500;white-space:nowrap}::ng-deep .tool-tip-container .prop-value{color:var(--tableText);font-weight:600;text-align:right}::ng-deep .tool-tip-container .tt-status-pill{display:inline-flex;align-items:center;gap:.35rem;margin:0 .9rem .55rem;padding:.14rem .55rem .14rem .45rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em}::ng-deep .tool-tip-container .tt-status-dot{width:.45rem;height:.45rem;min-width:.45rem;border-radius:50%}::ng-deep .tool-tip-container .prop-row:first-of-type{border-top:1px solid var(--shadow);padding-top:.5rem}::ng-deep .tool-tip-container .tt-ok{background:#08dc5a1f}::ng-deep .tool-tip-container .tt-ok .tt-status-dot{background:#08dc5a}::ng-deep .tool-tip-container .tt-ok .tt-status-label{color:#0a9d4a}::ng-deep .tool-tip-container .tt-broken{background:#e6432e1f}::ng-deep .tool-tip-container .tt-broken .tt-status-dot{background:#e6432e}::ng-deep .tool-tip-container .tt-broken .tt-status-label{color:#d23b27}::ng-deep .tool-tip-container .tt-offline{background:#8a8f9a29}::ng-deep .tool-tip-container .tt-offline .tt-status-dot{background:#8a8f9a}::ng-deep .tool-tip-container .tt-offline .tt-status-label{color:#6f7480}::ng-deep .tool-tip-container .tt-unknown{background:#e6a70024}::ng-deep .tool-tip-container .tt-unknown .tt-status-dot{background:#e6a700}::ng-deep .tool-tip-container .tt-unknown .tt-status-label{color:#b07f00}::ng-deep .tool-tip-container .tt-neutral{background:#6e78c81f}::ng-deep .tool-tip-container .tt-neutral .tt-status-dot{background:var(--primary)}::ng-deep .tool-tip-container .tt-neutral .tt-status-label{color:var(--primary)}::ng-deep .cdk-overlay-pane .mat-mdc-autocomplete-panel{border-radius:.75rem!important;background:var(--background);color:var(--tableText);padding:.35rem;border:1px solid var(--shadow);box-shadow:0 .5rem 1.5rem #00000029!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item{align-items:center;min-height:2.5rem;margin:.1rem 0;border-radius:.5rem;color:var(--tableText);transition:background-color .12s ease,color .12s ease}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled){background-color:color-mix(in srgb,var(--primary) 9%,transparent)!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled){background-color:color-mix(in srgb,var(--primary) 14%,transparent)!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:var(--primary);font-weight:600}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-mdc-option-ripple,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-ripple{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-pseudo-checkbox-minimal{color:var(--primary)}::ng-deep .mat-mdc-raised-button .mdc-button__ripple{border:.1rem solid var(--primaryColor)}::ng-deep .p-button.p-button-icon-only{width:1.357rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IdentityServicePathComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-identity-visualizer', standalone: false, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizer\">\n  <div class=\"tp-data-header\">\n    <div class=\"modaltitle\">Identity Service Path</div>\n    <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n    <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n  </div>\n  <div [ngClass]=\"isDarkMode==true?'darkMode':'lightMode'\" class=\"identity-topology-container\">\n    <div style=\"width: 100%; height: 80px; float: left\">\n      <div class=\"ep-topology-filter-container listBox row\">\n        <input\n          (keyup)=\"filterSearchArray()\"\n          [(ngModel)]=\"selectedService\"\n          [matAutocomplete]=\"auto\"\n          class=\"topology-filter-input\"\n          id=\"filterText\"\n          matInput\n          placeholder=\"Type to search identity accessible services.\"\n          />\n\n        @if (filterText) {\n          <div\n            (click)=\"clearSearchFilter()\"\n            class=\"clear-svc-icon icon-close\"\n            id=\"ClearSearchFilter\"\n          ></div>\n        }\n        <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n          @for (option of autocompleteOptions; track option) {\n            <mat-option [value]=\"option.name\">\n              {{ option.name }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </div>\n    </div>\n\n    <div class=\"topotip\" id=\"epTooltip\"></div>\n\n    <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1400\">\n    </svg>\n    @if (isLoading) {\n      <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n    }\n\n    <div class=\"topology-legend\">\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Nodes</div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/host.png\" /></div>\n          <div class=\"legend-text\">Identity</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/Routers.png\" /></div>\n          <div class=\"legend-text\">Edge Router</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/service.png\" /></div>\n          <div class=\"legend-text\">Service</div>\n        </div>\n      </div>\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Status</div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle registered_in_use\"></div></div>\n          <div class=\"legend-text\">Online</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle unregistered\"></div></div>\n          <div class=\"legend-text\">Offline</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle errored\"></div></div>\n          <div class=\"legend-text\">Error</div>\n        </div>\n      </div>\n      @if (fabricApiAvailable) {\n        <div class=\"legend-section\">\n          <div class=\"legend-section-title\">Path</div>\n          <div class=\"legend-item\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line active-circuit\"></div></div>\n            <div class=\"legend-text\">Active Circuit</div>\n          </div>\n          <div class=\"legend-item\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line available\"></div></div>\n            <div class=\"legend-text\">Available</div>\n          </div>\n          <div class=\"legend-item\">\n            <div class=\"legend-icon-col\"><div class=\"legend-icon misconfigured\"></div></div>\n            <div class=\"legend-text\">Broken</div>\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n</div>\n", styles: ["#IdentityVisualizer{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed;display:flex;flex-direction:column}#IdentityVisualizer .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizer .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizer .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizer .clear-svc-icon{font-size:1.4375rem;font-weight:600;position:relative;top:.9375rem;right:2.5rem;color:var(--icon);cursor:pointer}#IdentityVisualizer .clear-svc-icon:hover{filter:brightness(50%)}#IdentityVisualizer.full-screen{width:100%;height:100%;border-radius:0}.ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}.buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}.identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;cursor:grab;flex:1;overflow:hidden}.lightMode{background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.darkMode{background:#000a17;background-image:linear-gradient(#001127 .125rem,transparent 0),linear-gradient(90deg,#001127 .125rem,transparent 0),linear-gradient(#001127 1px,transparent 0),linear-gradient(90deg,#001127 1px,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}.node text{font:.75rem Open Sans,Arial,sans-serif}.modaltitle{padding-top:.375rem;padding-left:.3125rem;color:var(--primaryColor)}.modalbuttons{padding-right:1.25rem}.listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}.tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}.services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}.topology-filter-input{height:3.125rem;width:95%;border-radius:1.5625rem;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding-left:1.25rem}::ng-deep .topotip{display:none;position:fixed;background:var(--navigation);border-radius:.5rem;pointer-events:none;box-shadow:0 .25rem 1rem 0 var(--shadow);color:var(--tableText);z-index:2000;padding:0;max-width:24rem;overflow:hidden}.topology-legend{width:13rem;border-radius:.5rem;position:absolute;bottom:1rem;right:.625rem;background:var(--navigation);box-shadow:0 .25rem .75rem 0 var(--shadow);padding:.9rem}.legend-section{padding:.3rem 0}.legend-section:first-child{padding-top:0}.legend-section:last-child{padding-bottom:0;margin-bottom:-.5rem}.legend-section:not(:last-child){border-bottom:1px solid var(--shadow)}.legend-section-title{font-family:Russo One,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin-bottom:.25rem}.legend-item{display:flex;align-items:center;gap:0;padding:.225rem 0}.legend-icon-col{width:2.5rem;min-width:2.5rem;display:flex;align-items:center;justify-content:center;margin-right:.4rem}.legend-circle{height:.75rem;width:.75rem;min-width:.75rem;border-radius:50%}.legend-circle.unregistered{background-color:#8a8f9a}.legend-circle.registered_in_use{background-color:#08dc5a}.legend-circle.errored{background-color:#fb0d3d}.legend-line{height:.225rem;width:1.5rem}.legend-line.active-circuit{background-color:#00cd13}.legend-line.available{background:repeating-linear-gradient(to right,#8a8f9a 0,#8a8f9a .25rem,transparent .25rem,transparent .5rem)}.legend-text{font-size:.975rem;font-weight:500;color:var(--tableText);white-space:nowrap}.legend-node-icon{width:2rem;height:2rem;min-width:2rem;object-fit:contain}.legend-icon.misconfigured{width:1.2rem;height:1.2rem;min-width:1.2rem;background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain;background-repeat:no-repeat}.legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.rotating{-webkit-animation:rotating 2s linear infinite;-moz-animation:rotating 2s linear infinite;-ms-animation:rotating 2s linear infinite;-o-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}::ng-deep .tool-tip-container{padding:0}::ng-deep .tool-tip-container .tooltip-header{font-family:Russo One,sans-serif;font-size:.975rem;color:var(--primary);padding:.75rem .9rem .45rem;border-bottom:1px solid var(--shadow)}::ng-deep .tool-tip-container .prop-row{display:flex;justify-content:space-between;gap:1.2rem;padding:.375rem .9rem;font-size:.9rem}::ng-deep .tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}::ng-deep .tool-tip-container .prop-row:last-child{padding-bottom:.6rem}::ng-deep .tool-tip-container .prop-label{color:var(--tableText);opacity:.6;font-weight:500;white-space:nowrap}::ng-deep .tool-tip-container .prop-value{color:var(--tableText);font-weight:600;text-align:right}::ng-deep .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-radius:14px;background:var(--background);color:var(--tableText)}::ng-deep .mat-mdc-option.mdc-list-item{align-items:center;color:var(--tableText)}::ng-deep .mat-mdc-option.mdc-list-item:hover:not(.mat-option-disabled),::ng-deep .mat-mdc-option.mdc-list-item:focus:not(.mat-option-disabled){border-color:var(--primaryColor);border-radius:14px;border:.01rem solid var(--primaryColor)}::ng-deep .mat-mdc-raised-button .mdc-button__ripple{border:.1rem solid var(--primaryColor)}::ng-deep .p-button.p-button-icon-only{width:1.357rem}\n"] }]
+            args: [{ selector: 'app-identity-visualizer', standalone: false, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizer\">\n  <div class=\"tp-data-header\">\n    <div class=\"modaltitle\">Identity Service Path</div>\n    <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n    <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n  </div>\n  <div [ngClass]=\"isDarkMode==true?'darkMode':'lightMode'\" class=\"identity-topology-container\">\n    <div class=\"topology-toolbar\">\n      <div class=\"ep-topology-filter-container listBox row\">\n        <input\n          (keyup)=\"filterSearchArray()\"\n          [(ngModel)]=\"selectedService\"\n          [matAutocomplete]=\"auto\"\n          class=\"topology-filter-input\"\n          id=\"filterText\"\n          matInput\n          placeholder=\"Type to search identity accessible services.\"\n          />\n\n        @if (filterText) {\n          <div\n            (click)=\"clearSearchFilter()\"\n            class=\"clear-svc-icon icon-close\"\n            id=\"ClearSearchFilter\"\n          ></div>\n        }\n        <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n          @for (option of autocompleteOptions; track option) {\n            <mat-option [value]=\"option.name\">\n              {{ option.name }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </div>\n      <div class=\"topology-refresh-controls\">\n        <div\n          (click)=\"refreshFabricData()\"\n          [ngClass]=\"{ rotating: refreshRotate }\"\n          class=\"refresh-button\"\n          id=\"RefreshFabricButton\"\n          title=\"Refresh fabric data\"\n        >\n          <div class=\"refresh-icon\"></div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"topotip\" id=\"epTooltip\"></div>\n\n    <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1400\">\n    </svg>\n    <div class=\"topology-zoom-controls\">\n      <div (click)=\"zoomIn()\" class=\"zoom-btn\" title=\"Zoom in\" id=\"ZoomInButton\">+</div>\n      <div (click)=\"zoomOut()\" class=\"zoom-btn\" title=\"Zoom out\" id=\"ZoomOutButton\">&#8722;</div>\n      <div (click)=\"resetView()\" class=\"zoom-btn zoom-btn-text\" title=\"Fit to content\" id=\"FitToContentButton\">Fit</div>\n    </div>\n    @if (isLoading) {\n      <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n    }\n\n    <div class=\"topology-legend\" [class.collapsed]=\"legendCollapsed\">\n      <div class=\"legend-header\" (click)=\"legendCollapsed = !legendCollapsed\"\n           [title]=\"legendCollapsed ? 'Show legend' : 'Hide legend'\">\n        <span class=\"legend-header-title\">Legend</span>\n        <span class=\"legend-header-toggle\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 16 16\" width=\"13\" height=\"13\">\n            <path d=\"M3.5 6 L8 10.5 L12.5 6\" fill=\"none\" stroke=\"currentColor\"\n                  stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </div>\n      @if (!legendCollapsed) {\n      <div class=\"legend-body\">\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Nodes</div>\n        <div class=\"legend-item\" title=\"An endpoint identity \u2014 a client that dials the service or a tunneler that hosts it.\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/host.png\" /></div>\n          <div class=\"legend-text\">Identity</div>\n        </div>\n        <div class=\"legend-item\" title=\"A Ziti edge router that relays traffic between identities.\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/Routers.png\" /></div>\n          <div class=\"legend-text\">Edge Router</div>\n        </div>\n        <div class=\"legend-item\" title=\"The service being dialed and hosted.\">\n          <div class=\"legend-icon-col\"><img class=\"legend-node-icon\" src=\"assets/images/visualizer/service.png\" /></div>\n          <div class=\"legend-text\">Service</div>\n        </div>\n      </div>\n      <div class=\"legend-section\">\n        <div class=\"legend-section-title\">Status</div>\n        <div class=\"legend-item\" title=\"Connected to an edge router.\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle online\"></div></div>\n          <div class=\"legend-text\">Online</div>\n        </div>\n        <div class=\"legend-item\" title=\"Enrolled but not currently connected (e.g. powered off or idle).\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle offline\"></div></div>\n          <div class=\"legend-text\">Offline</div>\n        </div>\n        <div class=\"legend-item\" title=\"Identity-only: the controller can't currently determine the connection state.\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle unknown\"></div></div>\n          <div class=\"legend-text\">Unknown</div>\n        </div>\n        <div class=\"legend-item\" title=\"Identity has not completed enrollment.\">\n          <div class=\"legend-icon-col\"><div class=\"legend-circle notenrolled\"></div></div>\n          <div class=\"legend-text\">Not enrolled</div>\n        </div>\n      </div>\n      @if (fabricApiAvailable) {\n        <div class=\"legend-section\">\n          <div class=\"legend-section-title\">Path</div>\n          <div class=\"legend-item\" title=\"Live traffic is flowing over this hop right now.\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line active-circuit\"></div></div>\n            <div class=\"legend-text\">Active Circuit</div>\n          </div>\n          <div class=\"legend-item\" title=\"Reachable and authorized, but no active circuit at the moment.\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line available\"></div></div>\n            <div class=\"legend-text\">Available</div>\n          </div>\n          <div class=\"legend-item\" title=\"This hop can't carry traffic right now. The node colors show which end is the problem \u2014 an offline router, or an unreachable / un-enrolled endpoint.\">\n            <div class=\"legend-icon-col\"><div class=\"legend-line broken\"></div></div>\n            <div class=\"legend-text\">Unavailable</div>\n          </div>\n        </div>\n      }\n      </div>\n      }\n    </div>\n\n  </div>\n</div>\n", styles: ["#IdentityVisualizer{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed;display:flex;flex-direction:column}#IdentityVisualizer .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizer .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizer .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizer .clear-svc-icon{position:absolute;top:50%;right:.55rem;transform:translateY(-50%);width:1.65rem;height:1.65rem;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:.95rem;color:var(--icon);cursor:pointer;transition:background .12s ease,color .12s ease}#IdentityVisualizer .clear-svc-icon:hover{background:color-mix(in srgb,var(--tableText) 12%,transparent);color:var(--tableText)}#IdentityVisualizer.full-screen{width:100%;height:100%;border-radius:0}.ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}.topology-toolbar .ep-topology-filter-container{position:relative;margin:0;flex:1 1 auto;min-width:0;max-width:28rem}.topology-toolbar{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.25rem .625rem;box-sizing:border-box;width:100%;flex-shrink:0;position:relative;z-index:4}.buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}.topology-refresh-controls{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.topology-refresh-controls .refresh-button{width:2.5rem;height:2.5rem;border-radius:50%;background-color:var(--navigation);box-shadow:0 .375rem 1rem 0 var(--shadow),0 0 0 .0625rem var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:filter .15s ease,transform .1s ease,box-shadow .15s ease}.topology-refresh-controls .refresh-button .refresh-icon{width:1.125rem;height:1.125rem;background-color:var(--tableText);opacity:.85;-webkit-mask:url(/assets/svgs/refresh.svg) center/contain no-repeat;mask:url(/assets/svgs/refresh.svg) center/contain no-repeat;transition:opacity .15s ease}.topology-refresh-controls .refresh-button:hover{box-shadow:0 .5rem 1.25rem 0 var(--shadow),0 0 0 .0625rem var(--primaryColor)}.topology-refresh-controls .refresh-button:hover .refresh-icon{opacity:1}.topology-refresh-controls .refresh-button:active{transform:scale(.95)}.topology-refresh-controls .refresh-button.rotating .refresh-icon{animation:rotating 1s linear infinite}.topology-zoom-controls{position:absolute;bottom:1rem;left:1rem;display:flex;flex-direction:column;gap:.375rem;z-index:5}.topology-zoom-controls .zoom-btn{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background-color:var(--navigation);color:var(--tableText);font-family:Open Sans,Arial,sans-serif;font-size:1.25rem;font-weight:600;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:0 .5rem 1.25rem 0 var(--shadow);transition:filter .15s ease,transform .15s ease}.topology-zoom-controls .zoom-btn.zoom-btn-text{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}.topology-zoom-controls .zoom-btn:hover{filter:brightness(85%)}.topology-zoom-controls .zoom-btn:active{transform:scale(.95)}.identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;flex:1;overflow:hidden;position:relative}#IdentityTopology{cursor:grab;flex:1;min-height:0}#IdentityTopology:active{cursor:grabbing}.lightMode{background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.darkMode{background:#000a17;background-image:linear-gradient(#001127 .125rem,transparent 0),linear-gradient(90deg,#001127 .125rem,transparent 0),linear-gradient(#001127 1px,transparent 0),linear-gradient(90deg,#001127 1px,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}.node text{font:.75rem Open Sans,Arial,sans-serif}.modaltitle{padding-top:.375rem;padding-left:.3125rem;color:var(--primaryColor)}.modalbuttons{padding-right:1.25rem}.listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}.tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}.services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}.topology-filter-input{height:2.75rem;width:100%;box-sizing:border-box;border-radius:.75rem;border:1px solid var(--shadow);background-color:var(--background);color:var(--tableText);box-shadow:0 .0625rem .125rem #0000000f;padding:0 2.6rem 0 1rem;font-size:.95rem;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.topology-filter-input::placeholder{color:color-mix(in srgb,var(--tableText) 50%,transparent)}.topology-filter-input:hover{border-color:color-mix(in srgb,var(--tableText) 28%,transparent)}.topology-filter-input:focus{border-color:var(--primary);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--primary) 18%,transparent)}::ng-deep .topotip{display:none;position:fixed;background:var(--navigation);border-radius:.5rem;pointer-events:auto;box-shadow:0 .25rem 1rem 0 var(--shadow);color:var(--tableText);z-index:2000;padding:0;max-width:24rem;overflow:hidden}.topology-legend{width:15rem;border-radius:.5rem;position:absolute;bottom:1rem;right:.625rem;background:var(--navigation);box-shadow:0 .25rem .75rem 0 var(--shadow);padding:.9rem}.topology-legend.collapsed{width:auto}.legend-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none}.legend-header-title{font-family:Russo One,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--primary)}.legend-header-toggle{color:var(--primary);display:flex;align-items:center}.legend-header-toggle svg{display:block;transition:transform .15s ease}.topology-legend.collapsed .legend-header-toggle svg{transform:rotate(180deg)}.legend-body{padding-top:.6rem}.legend-section{padding:.3rem 0}.legend-section:first-child{padding-top:0}.legend-section:last-child{padding-bottom:0;margin-bottom:-.5rem}.legend-section:not(:last-child){border-bottom:1px solid var(--shadow)}.legend-section-title{font-family:Russo One,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin-bottom:.25rem}.legend-item{display:flex;align-items:center;gap:0;padding:.225rem 0;cursor:help}.legend-icon-col{width:2.5rem;min-width:2.5rem;display:flex;align-items:center;justify-content:center;margin-right:.4rem}.legend-circle{height:.75rem;width:.75rem;min-width:.75rem;border-radius:50%}.legend-circle.online{background-color:#08dc5a}.legend-circle.offline{background-color:#8a8f9a}.legend-circle.unknown{background-color:#e6a700}.legend-circle.notenrolled{background-color:var(--background);border:.125rem solid #8a8f9a}.legend-line{height:.225rem;width:1.5rem}.legend-line.active-circuit{background-color:#00cd13}.legend-line.available{background:repeating-linear-gradient(to right,#8a8f9a 0,#8a8f9a .25rem,transparent .25rem,transparent .5rem)}.legend-line.broken{height:0;background:none;border-top:.28rem dotted #e6432e}.legend-text{font-size:.975rem;font-weight:500;color:var(--tableText);white-space:nowrap}.legend-node-icon{width:2rem;height:2rem;min-width:2rem;object-fit:contain}.legend-icon.misconfigured,.legend-icon.broken-link{width:1.2rem;height:1.2rem;min-width:1.2rem;background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain;background-repeat:no-repeat}.legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.rotating{-webkit-animation:rotating 2s linear infinite;-moz-animation:rotating 2s linear infinite;-ms-animation:rotating 2s linear infinite;-o-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}::ng-deep .tool-tip-container{padding:0}::ng-deep .tool-tip-container .tooltip-header{font-family:Russo One,sans-serif;font-size:.975rem;color:var(--primary);padding:.7rem .9rem .15rem}::ng-deep .tool-tip-container .prop-row{display:flex;justify-content:space-between;gap:1.2rem;padding:.375rem .9rem;font-size:.9rem}::ng-deep .tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}::ng-deep .tool-tip-container .prop-row:last-child{padding-bottom:.6rem}::ng-deep .tool-tip-container .prop-label{color:var(--tableText);opacity:.6;font-weight:500;white-space:nowrap}::ng-deep .tool-tip-container .prop-value{color:var(--tableText);font-weight:600;text-align:right}::ng-deep .tool-tip-container .tt-status-pill{display:inline-flex;align-items:center;gap:.35rem;margin:0 .9rem .55rem;padding:.14rem .55rem .14rem .45rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em}::ng-deep .tool-tip-container .tt-status-dot{width:.45rem;height:.45rem;min-width:.45rem;border-radius:50%}::ng-deep .tool-tip-container .prop-row:first-of-type{border-top:1px solid var(--shadow);padding-top:.5rem}::ng-deep .tool-tip-container .tt-ok{background:#08dc5a1f}::ng-deep .tool-tip-container .tt-ok .tt-status-dot{background:#08dc5a}::ng-deep .tool-tip-container .tt-ok .tt-status-label{color:#0a9d4a}::ng-deep .tool-tip-container .tt-broken{background:#e6432e1f}::ng-deep .tool-tip-container .tt-broken .tt-status-dot{background:#e6432e}::ng-deep .tool-tip-container .tt-broken .tt-status-label{color:#d23b27}::ng-deep .tool-tip-container .tt-offline{background:#8a8f9a29}::ng-deep .tool-tip-container .tt-offline .tt-status-dot{background:#8a8f9a}::ng-deep .tool-tip-container .tt-offline .tt-status-label{color:#6f7480}::ng-deep .tool-tip-container .tt-unknown{background:#e6a70024}::ng-deep .tool-tip-container .tt-unknown .tt-status-dot{background:#e6a700}::ng-deep .tool-tip-container .tt-unknown .tt-status-label{color:#b07f00}::ng-deep .tool-tip-container .tt-neutral{background:#6e78c81f}::ng-deep .tool-tip-container .tt-neutral .tt-status-dot{background:var(--primary)}::ng-deep .tool-tip-container .tt-neutral .tt-status-label{color:var(--primary)}::ng-deep .cdk-overlay-pane .mat-mdc-autocomplete-panel{border-radius:.75rem!important;background:var(--background);color:var(--tableText);padding:.35rem;border:1px solid var(--shadow);box-shadow:0 .5rem 1.5rem #00000029!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item{align-items:center;min-height:2.5rem;margin:.1rem 0;border-radius:.5rem;color:var(--tableText);transition:background-color .12s ease,color .12s ease}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled){background-color:color-mix(in srgb,var(--primary) 9%,transparent)!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled){background-color:color-mix(in srgb,var(--primary) 14%,transparent)!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:var(--primary);font-weight:600}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-mdc-option-ripple,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-ripple{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-pseudo-checkbox-minimal{color:var(--primary)}::ng-deep .mat-mdc-raised-button .mdc-button__ripple{border:.1rem solid var(--primaryColor)}::ng-deep .p-button.p-button-icon-only{width:1.357rem}\n"] }]
         }], ctorParameters: () => [{ type: IdentityServicePathHelper }, { type: MapDataService }, { type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -14218,7 +14610,7 @@ class ServicePolicyFormService {
         });
     }
     getAssociatedServicesByRole(id) {
-        this.zitiService.getSubdata('service-policies', id, 'services').then((result) => {
+        this.zitiService.getSubdata('service-policies', id, 'services', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedServices = result.data;
             this.associatedServiceNames = this.associatedServices.map((svc) => {
                 return svc.name;
@@ -14226,7 +14618,7 @@ class ServicePolicyFormService {
         });
     }
     getAssociatedIdentitiesById(id) {
-        return this.zitiService.getSubdata('service-policies', id, 'identities').then((result) => {
+        return this.zitiService.getSubdata('service-policies', id, 'identities', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedIdentities = result.data;
             this.associatedIdentityNames = this.associatedIdentities.map((ident) => {
                 return ident.name;
@@ -14858,11 +15250,11 @@ class PreviewListComponent {
         return './' + hrefVal;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PreviewListComponent, deps: [{ token: i4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PreviewListComponent, isStandalone: false, selector: "lib-preview-list", inputs: { label: "label", clickable: "clickable", isLoading: "isLoading", allNames: "allNames", items: "items", allowRemove: "allowRemove", tooltip: "tooltip", showfilter: "showfilter", localFilter: "localFilter" }, outputs: { itemSelected: "itemSelected", itemRemoved: "itemRemoved", filterChanged: "filterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"listBox row\">\n  @if (showfilter) {\n    <input (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n  }\n  <div class=\"text row\">\n    @if (previewItems.length <= 0) {\n      <div class=\"listText\">\n        <span class=\"preview-name preview-placeholder no-items-preview\">no items to display...</span>\n      </div>\n    }\n    @for (item of previewItems; track item) {\n      <div (click)=\"selected(item)\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n        @if (allowRemove) {\n          <div class=\"icon-clear\" (click)=\"remove(item)\"></div>\n        }\n        @if (!item.href) {\n          <span class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item.name || item }}</span>\n        }\n        @if (item.href) {\n          <a [href]=\"getHrefVal(item.href)\" (click)=\"linkClicked($event, item)\" class=\"{{item.linkClass ? item.linkClass : ''}}\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\">\n            @if (item.name) {\n              <span class=\"preview-name\">{{ item.name }}@if (item.iconClass) {\n                <div class=\"preview-item-icon {{item.iconClass}}\" (click)=\"remove(item)\"></div>\n              }</span>\n            }\n          </a>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <div class=\"spinner-container\">\n    <span class=\"spinner\"></span>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0rem}.listBox{background-color:var(--stroke);padding:.625rem;border-radius:var(--inputBorderRadius);height:100%;min-height:3.75rem}.listBox input{height:2.5rem;border-radius:var(--inputBorderRadius);font-size:.875rem;font-weight:600;background-image:url(/assets/images/Filter.png);background-size:auto 1.3125rem;background-position:top .5rem right .75rem;background-repeat:no-repeat;margin-bottom:.625rem;padding-left:.875rem}.text{overflow-y:scroll;height:100%}.listText{width:100%;position:relative;float:left;font-size:.875rem;font-weight:600;padding-left:.625rem;padding-right:.625rem;margin-bottom:.125rem;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:.3125rem}.listText a{color:var(--primary);display:flex;flex-direction:row;align-items:center}.listText a:hover .preview-item-icon{text-decoration:underline}.listText .icon-clear{margin-top:.125rem}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);-webkit-transform:translateY(.0625rem);transform:translateY(.0625rem)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.preview-name{white-space:pre}.preview-name.preview-placeholder{font-style:italic}.preview-name.no-items-preview{font-weight:400}.preview-item-icon{margin-left:.4375rem;font-family:zac!important}.preview-more-results{margin-top:.3125rem}.preview-more-results .preview-name{font-weight:600;border-top-width:1px;text-transform:uppercase;font-size:.825rem;font-style:italic}.preview-more-results .preview-name:after{content:\"\\e939\";font-family:icomoon!important;font-style:normal}.spinner-container{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spinner-container .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--tableText);border-right:.3125rem solid var(--tableText);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PreviewListComponent, isStandalone: false, selector: "lib-preview-list", inputs: { label: "label", clickable: "clickable", isLoading: "isLoading", allNames: "allNames", items: "items", allowRemove: "allowRemove", tooltip: "tooltip", showfilter: "showfilter", localFilter: "localFilter" }, outputs: { itemSelected: "itemSelected", itemRemoved: "itemRemoved", filterChanged: "filterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"listBox row\">\n  @if (showfilter) {\n    <input (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n  }\n  <div class=\"text row\">\n    @if (previewItems.length <= 0) {\n      <div class=\"listText\">\n        <span class=\"preview-name preview-placeholder no-items-preview\">no items to display...</span>\n      </div>\n    }\n    @for (item of previewItems; track item) {\n      <div (click)=\"selected(item)\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n        @if (allowRemove) {\n          <div class=\"icon-clear\" (click)=\"remove(item)\"></div>\n        }\n        @if (!item.href) {\n          <span class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item.name || item }}</span>\n        }\n        @if (item.href) {\n          <a [href]=\"getHrefVal(item.href)\" (click)=\"linkClicked($event, item)\" class=\"{{item.linkClass ? item.linkClass : ''}}\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\">\n            @if (item.name) {\n              <span class=\"preview-name\">{{ item.name }}@if (item.iconClass) {\n                <div class=\"preview-item-icon {{item.iconClass}}\" (click)=\"remove(item)\"></div>\n              }</span>\n            }\n          </a>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <div class=\"spinner-container\">\n    <span class=\"spinner\"></span>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;height:auto;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0rem}.listBox{background-color:var(--stroke);padding:.625rem;border-radius:var(--inputBorderRadius);height:auto;min-height:3.75rem}.listBox input{height:2.5rem;border-radius:var(--inputBorderRadius);font-size:.875rem;font-weight:600;background-image:url(/assets/images/Filter.png);background-size:auto 1.3125rem;background-position:top .5rem right .75rem;background-repeat:no-repeat;margin-bottom:.625rem;padding-left:.875rem}.text{overflow-y:auto;height:auto;max-height:12.5rem}.listText{width:100%;position:relative;float:left;font-size:.875rem;font-weight:600;padding-left:.625rem;padding-right:.625rem;margin-bottom:.125rem;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:.3125rem}.listText a{color:var(--primary);display:flex;flex-direction:row;align-items:center}.listText a:hover .preview-item-icon{text-decoration:underline}.listText .icon-clear{margin-top:.125rem}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);-webkit-transform:translateY(.0625rem);transform:translateY(.0625rem)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.preview-name{white-space:pre}.preview-name.preview-placeholder{font-style:italic}.preview-name.no-items-preview{font-weight:400}.preview-item-icon{margin-left:.4375rem;font-family:zac!important}.preview-more-results{margin-top:.3125rem}.preview-more-results .preview-name{font-weight:600;border-top-width:1px;text-transform:uppercase;font-size:.825rem;font-style:italic}.preview-more-results .preview-name:after{content:\"\\e939\";font-family:icomoon!important;font-style:normal}.spinner-container{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spinner-container .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--tableText);border-right:.3125rem solid var(--tableText);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PreviewListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-preview-list', standalone: false, template: "<div class=\"listBox row\">\n  @if (showfilter) {\n    <input (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n  }\n  <div class=\"text row\">\n    @if (previewItems.length <= 0) {\n      <div class=\"listText\">\n        <span class=\"preview-name preview-placeholder no-items-preview\">no items to display...</span>\n      </div>\n    }\n    @for (item of previewItems; track item) {\n      <div (click)=\"selected(item)\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n        @if (allowRemove) {\n          <div class=\"icon-clear\" (click)=\"remove(item)\"></div>\n        }\n        @if (!item.href) {\n          <span class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item.name || item }}</span>\n        }\n        @if (item.href) {\n          <a [href]=\"getHrefVal(item.href)\" (click)=\"linkClicked($event, item)\" class=\"{{item.linkClass ? item.linkClass : ''}}\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\">\n            @if (item.name) {\n              <span class=\"preview-name\">{{ item.name }}@if (item.iconClass) {\n                <div class=\"preview-item-icon {{item.iconClass}}\" (click)=\"remove(item)\"></div>\n              }</span>\n            }\n          </a>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <div class=\"spinner-container\">\n    <span class=\"spinner\"></span>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0rem}.listBox{background-color:var(--stroke);padding:.625rem;border-radius:var(--inputBorderRadius);height:100%;min-height:3.75rem}.listBox input{height:2.5rem;border-radius:var(--inputBorderRadius);font-size:.875rem;font-weight:600;background-image:url(/assets/images/Filter.png);background-size:auto 1.3125rem;background-position:top .5rem right .75rem;background-repeat:no-repeat;margin-bottom:.625rem;padding-left:.875rem}.text{overflow-y:scroll;height:100%}.listText{width:100%;position:relative;float:left;font-size:.875rem;font-weight:600;padding-left:.625rem;padding-right:.625rem;margin-bottom:.125rem;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:.3125rem}.listText a{color:var(--primary);display:flex;flex-direction:row;align-items:center}.listText a:hover .preview-item-icon{text-decoration:underline}.listText .icon-clear{margin-top:.125rem}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);-webkit-transform:translateY(.0625rem);transform:translateY(.0625rem)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.preview-name{white-space:pre}.preview-name.preview-placeholder{font-style:italic}.preview-name.no-items-preview{font-weight:400}.preview-item-icon{margin-left:.4375rem;font-family:zac!important}.preview-more-results{margin-top:.3125rem}.preview-more-results .preview-name{font-weight:600;border-top-width:1px;text-transform:uppercase;font-size:.825rem;font-style:italic}.preview-more-results .preview-name:after{content:\"\\e939\";font-family:icomoon!important;font-style:normal}.spinner-container{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spinner-container .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--tableText);border-right:.3125rem solid var(--tableText);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear;opacity:.7}\n"] }]
+            args: [{ selector: 'lib-preview-list', standalone: false, template: "<div class=\"listBox row\">\n  @if (showfilter) {\n    <input (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n  }\n  <div class=\"text row\">\n    @if (previewItems.length <= 0) {\n      <div class=\"listText\">\n        <span class=\"preview-name preview-placeholder no-items-preview\">no items to display...</span>\n      </div>\n    }\n    @for (item of previewItems; track item) {\n      <div (click)=\"selected(item)\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n        @if (allowRemove) {\n          <div class=\"icon-clear\" (click)=\"remove(item)\"></div>\n        }\n        @if (!item.href) {\n          <span class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item.name || item }}</span>\n        }\n        @if (item.href) {\n          <a [href]=\"getHrefVal(item.href)\" (click)=\"linkClicked($event, item)\" class=\"{{item.linkClass ? item.linkClass : ''}}\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\">\n            @if (item.name) {\n              <span class=\"preview-name\">{{ item.name }}@if (item.iconClass) {\n                <div class=\"preview-item-icon {{item.iconClass}}\" (click)=\"remove(item)\"></div>\n              }</span>\n            }\n          </a>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <div class=\"spinner-container\">\n    <span class=\"spinner\"></span>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;height:auto;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0rem}.listBox{background-color:var(--stroke);padding:.625rem;border-radius:var(--inputBorderRadius);height:auto;min-height:3.75rem}.listBox input{height:2.5rem;border-radius:var(--inputBorderRadius);font-size:.875rem;font-weight:600;background-image:url(/assets/images/Filter.png);background-size:auto 1.3125rem;background-position:top .5rem right .75rem;background-repeat:no-repeat;margin-bottom:.625rem;padding-left:.875rem}.text{overflow-y:auto;height:auto;max-height:12.5rem}.listText{width:100%;position:relative;float:left;font-size:.875rem;font-weight:600;padding-left:.625rem;padding-right:.625rem;margin-bottom:.125rem;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:.3125rem}.listText a{color:var(--primary);display:flex;flex-direction:row;align-items:center}.listText a:hover .preview-item-icon{text-decoration:underline}.listText .icon-clear{margin-top:.125rem}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);-webkit-transform:translateY(.0625rem);transform:translateY(.0625rem)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.preview-name{white-space:pre}.preview-name.preview-placeholder{font-style:italic}.preview-name.no-items-preview{font-weight:400}.preview-item-icon{margin-left:.4375rem;font-family:zac!important}.preview-more-results{margin-top:.3125rem}.preview-more-results .preview-name{font-weight:600;border-top-width:1px;text-transform:uppercase;font-size:.825rem;font-style:italic}.preview-more-results .preview-name:after{content:\"\\e939\";font-family:icomoon!important;font-style:normal}.spinner-container{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spinner-container .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--tableText);border-right:.3125rem solid var(--tableText);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear;opacity:.7}\n"] }]
         }], ctorParameters: () => [{ type: i4.Router }], propDecorators: { label: [{
                 type: Input
             }], clickable: [{
@@ -15620,7 +16012,7 @@ class IdentityFormComponent extends ProjectableForm {
         });
     }
     getAssociatedServices() {
-        this.zitiService.getSubdata('identities', this.formData.id, 'services').then((result) => {
+        this.zitiService.getSubdata('identities', this.formData.id, 'services', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedServices = result.data;
             this.associatedServiceNames = this.associatedServices.map((svc) => {
                 return svc.name;
@@ -15628,7 +16020,7 @@ class IdentityFormComponent extends ProjectableForm {
         });
     }
     getAssociatedServicePolicies() {
-        this.zitiService.getSubdata('identities', this.formData.id, 'service-policies').then((result) => {
+        this.zitiService.getSubdata('identities', this.formData.id, 'service-policies', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedServicePolicies = result.data;
             this.associatedServicePolicyNames = this.associatedServicePolicies.map((policy) => {
                 return policy.name;
@@ -19487,7 +19879,7 @@ class TransitRouterFormService {
         this.growlerService.show(growlerData);
     }
     getAssociatedServices(id) {
-        this.zitiService.getSubdata('transit-routers', id, 'services').then((result) => {
+        this.zitiService.getSubdata('transit-routers', id, 'services', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedServices = result.data;
             this.associatedServiceNames = this.associatedServices.map((svc) => {
                 return svc.name;
@@ -19495,7 +19887,7 @@ class TransitRouterFormService {
         });
     }
     getAssociatedIdentities(id) {
-        this.zitiService.getSubdata('transit-routers', id, 'identities').then((result) => {
+        this.zitiService.getSubdata('transit-routers', id, 'identities', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedIdentities = result.data;
             this.associatedIdentityNames = this.associatedIdentities.map((policy) => {
                 return policy.name;
@@ -20989,7 +21381,9 @@ class SimpleServiceComponent extends ProjectableForm {
             this.identityNamedAttributes = namedAttributes;
             this.mergeSelectedIdentityNamesIntoAvailableList();
         }).finally(() => {
-            this.identitiesInit.next(true);
+            if (!this.identitiesInit.value) {
+                this.identitiesInit.next(true);
+            }
         });
     }
     checkAllDataInit() {
@@ -23293,7 +23687,7 @@ class EdgeRouterPolicyFormService {
         });
     }
     getAssociatedServicesByRole(id) {
-        this.zitiService.getSubdata('edge-router-policies', id, 'edge-routers').then((result) => {
+        this.zitiService.getSubdata('edge-router-policies', id, 'edge-routers', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedEdgeRouters = result.data;
             this.associatedEdgeRouterNames = this.associatedEdgeRouters.map((svc) => {
                 return svc.name;
@@ -23301,7 +23695,7 @@ class EdgeRouterPolicyFormService {
         });
     }
     getAssociatedIdentitiesById(id) {
-        this.zitiService.getSubdata('edge-router-policies', id, 'identities').then((result) => {
+        this.zitiService.getSubdata('edge-router-policies', id, 'identities', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedIdentities = result.data;
             this.associatedIdentityNames = this.associatedIdentities.map((ident) => {
                 return ident.name;
@@ -24963,7 +25357,7 @@ class ConfigurationService {
         });
     }
     getAssociatedServices(configId) {
-        return this.dataService.getSubdata('configs', configId, 'services').then((result) => {
+        return this.dataService.getSubdata('configs', configId, 'services', this.dataService.DEFAULT_PAGING).then((result) => {
             const associatedServices = result.data;
             const associatedServiceNames = associatedServices.map((svc) => {
                 return svc.name;
@@ -30703,7 +31097,7 @@ class APISessionFormService {
         this.growlerService.show(growlerData);
     }
     getAssociatedServices(id) {
-        this.zitiService.getSubdata('transit-routers', id, 'services').then((result) => {
+        this.zitiService.getSubdata('transit-routers', id, 'services', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedServices = result.data;
             this.associatedServiceNames = this.associatedServices.map((svc) => {
                 return svc.name;
@@ -30711,7 +31105,7 @@ class APISessionFormService {
         });
     }
     getAssociatedIdentities(id) {
-        this.zitiService.getSubdata('transit-routers', id, 'identities').then((result) => {
+        this.zitiService.getSubdata('transit-routers', id, 'identities', this.zitiService.DEFAULT_PAGING).then((result) => {
             this.associatedIdentities = result.data;
             this.associatedIdentityNames = this.associatedIdentities.map((policy) => {
                 return policy.name;
@@ -40599,7 +40993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 }] }, { type: ZitiOidcService }, { type: GrowlerService }, { type: i0.Injector }] });
 
 const ZAC_VERSION = {
-    "version": "4.3.0"
+    "version": "4.3.1"
 };
 
 /*