@serve.zone/dcrouter 13.3.0 → 13.4.0

package/ts_web/elements/ops-dashboard.ts

@@ -11,18 +11,45 @@ import {
   state,
   type TemplateResult
 } from '@design.estate/dees-element';
+import type { IView } from '@design.estate/dees-catalog';
 
-// Import view components
-import { OpsViewOverview } from './ops-view-overview.js';
-import { OpsViewNetwork } from './network/ops-view-network.js';
-import { OpsViewEmails } from './ops-view-emails.js';
+// Top-level / flat views
 import { OpsViewLogs } from './ops-view-logs.js';
-import { OpsViewConfig } from './ops-view-config.js';
-import { OpsViewApiTokens } from './ops-view-apitokens.js';
-import { OpsViewSecurity } from './security/ops-view-security.js';
 import { OpsViewCertificates } from './ops-view-certificates.js';
-import { OpsViewRemoteIngress } from './ops-view-remoteingress.js';
-import { OpsViewVpn } from './ops-view-vpn.js';
+
+// Overview group
+import { OpsViewOverview } from './overview/ops-view-overview.js';
+import { OpsViewConfig } from './overview/ops-view-config.js';
+
+// Network group
+import { OpsViewNetworkActivity } from './network/ops-view-network-activity.js';
+import { OpsViewRoutes } from './network/ops-view-routes.js';
+import { OpsViewSourceProfiles } from './network/ops-view-sourceprofiles.js';
+import { OpsViewNetworkTargets } from './network/ops-view-networktargets.js';
+import { OpsViewTargetProfiles } from './network/ops-view-targetprofiles.js';
+import { OpsViewRemoteIngress } from './network/ops-view-remoteingress.js';
+import { OpsViewVpn } from './network/ops-view-vpn.js';
+
+// Email group
+import { OpsViewEmails } from './email/ops-view-emails.js';
+import { OpsViewEmailSecurity } from './email/ops-view-email-security.js';
+
+// Access group
+import { OpsViewApiTokens } from './access/ops-view-apitokens.js';
+
+// Security group
+import { OpsViewSecurityOverview } from './security/ops-view-security-overview.js';
+import { OpsViewSecurityBlocked } from './security/ops-view-security-blocked.js';
+import { OpsViewSecurityAuthentication } from './security/ops-view-security-authentication.js';
+
+/**
+ * Extended IView with explicit URL slug. Without an explicit `slug`, the URL
+ * slug is derived from `name.toLowerCase().replace(/\s+/g, '')`.
+ */
+interface ITabbedView extends IView {
+  slug?: string;
+  subViews?: ITabbedView[];
+}
 
 @customElement('ops-dashboard')
 export class OpsDashboard extends DeesElement {
@@ -46,27 +73,36 @@ export class OpsDashboard extends DeesElement {
     error: null,
   };
 
-  // Store viewTabs as a property to maintain object references
-  private viewTabs = [
+  // Store viewTabs as a property to maintain object references (used for === selectedView identity)
+  private viewTabs: ITabbedView[] = [
     {
       name: 'Overview',
       iconName: 'lucide:layoutDashboard',
-      element: OpsViewOverview,
-    },
-    {
-      name: 'Configuration',
-      iconName: 'lucide:settings',
-      element: OpsViewConfig,
+      subViews: [
+        { slug: 'stats', name: 'Stats', iconName: 'lucide:activity', element: OpsViewOverview },
+        { slug: 'configuration', name: 'Configuration', iconName: 'lucide:settings', element: OpsViewConfig },
+      ],
     },
     {
       name: 'Network',
       iconName: 'lucide:network',
-      element: OpsViewNetwork,
+      subViews: [
+        { slug: 'activity', name: 'Network Activity', iconName: 'lucide:activity', element: OpsViewNetworkActivity },
+        { slug: 'routes', name: 'Routes', iconName: 'lucide:route', element: OpsViewRoutes },
+        { slug: 'sourceprofiles', name: 'Source Profiles', iconName: 'lucide:shieldCheck', element: OpsViewSourceProfiles },
+        { slug: 'networktargets', name: 'Network Targets', iconName: 'lucide:server', element: OpsViewNetworkTargets },
+        { slug: 'targetprofiles', name: 'Target Profiles', iconName: 'lucide:target', element: OpsViewTargetProfiles },
+        { slug: 'remoteingress', name: 'Remote Ingress', iconName: 'lucide:globe', element: OpsViewRemoteIngress },
+        { slug: 'vpn', name: 'VPN', iconName: 'lucide:shield', element: OpsViewVpn },
+      ],
     },
     {
-      name: 'Emails',
+      name: 'Email',
       iconName: 'lucide:mail',
-      element: OpsViewEmails,
+      subViews: [
+        { slug: 'log', name: 'Email Log', iconName: 'lucide:scrollText', element: OpsViewEmails },
+        { slug: 'security', name: 'Email Security', iconName: 'lucide:shieldCheck', element: OpsViewEmailSecurity },
+      ],
     },
     {
       name: 'Logs',
@@ -74,32 +110,48 @@ export class OpsDashboard extends DeesElement {
       element: OpsViewLogs,
     },
     {
-      name: 'ApiTokens',
-      iconName: 'lucide:key',
-      element: OpsViewApiTokens,
+      name: 'Access',
+      iconName: 'lucide:keyRound',
+      subViews: [
+        { slug: 'apitokens', name: 'API Tokens', iconName: 'lucide:key', element: OpsViewApiTokens },
+      ],
     },
     {
       name: 'Security',
       iconName: 'lucide:shield',
-      element: OpsViewSecurity,
+      subViews: [
+        { slug: 'overview', name: 'Overview', iconName: 'lucide:eye', element: OpsViewSecurityOverview },
+        { slug: 'blocked', name: 'Blocked IPs', iconName: 'lucide:shieldBan', element: OpsViewSecurityBlocked },
+        { slug: 'authentication', name: 'Authentication', iconName: 'lucide:lock', element: OpsViewSecurityAuthentication },
+      ],
     },
     {
       name: 'Certificates',
       iconName: 'lucide:badgeCheck',
       element: OpsViewCertificates,
     },
-    {
-      name: 'RemoteIngress',
-      iconName: 'lucide:globe',
-      element: OpsViewRemoteIngress,
-    },
-    {
-      name: 'VPN',
-      iconName: 'lucide:shield',
-      element: OpsViewVpn,
-    },
   ];
 
+  /** URL slug for a view (explicit `slug` field, or lowercased name with spaces stripped). */
+  private slugFor(view: ITabbedView): string {
+    return view.slug ?? view.name.toLowerCase().replace(/\s+/g, '');
+  }
+
+  /** Find the parent group of a subview, or undefined for top-level views. */
+  private findParent(view: ITabbedView): ITabbedView | undefined {
+    return this.viewTabs.find((v) => v.subViews?.includes(view));
+  }
+
+  /** Look up a view (or subview) by its URL slug pair. */
+  private findViewBySlug(viewSlug: string, subSlug: string | null): ITabbedView | undefined {
+    const top = this.viewTabs.find((v) => this.slugFor(v) === viewSlug);
+    if (!top) return undefined;
+    if (subSlug && top.subViews) {
+      return top.subViews.find((sv) => this.slugFor(sv) === subSlug) ?? top;
+    }
+    return top;
+  }
+
   private get globalMessages() {
     const messages: Array<{ id: string; type: string; message: string; dismissible?: boolean }> = [];
     const config = this.configState.config;
@@ -115,17 +167,19 @@ export class OpsDashboard extends DeesElement {
   }
 
   /**
-   * Get the current view tab based on the UI state's activeView.
+   * Get the current view tab based on the UI state's activeView/activeSubview.
    * Used to pass the correct selectedView to dees-simple-appdash on initial render.
    */
-  private get currentViewTab() {
-    return this.viewTabs.find(t => t.name.toLowerCase() === this.uiState.activeView) || this.viewTabs[0];
+  private get currentViewTab(): ITabbedView {
+    return (
+      this.findViewBySlug(this.uiState.activeView, this.uiState.activeSubview) ?? this.viewTabs[0]
+    );
   }
 
   constructor() {
     super();
     document.title = 'DCRouter OpsServer';
-    
+
     // Subscribe to login state
     const loginSubscription = appstate.loginStatePart
       .select((stateArg) => stateArg)
@@ -138,7 +192,7 @@ export class OpsDashboard extends DeesElement {
         }
       });
     this.rxSubscriptions.push(loginSubscription);
-    
+
     // Subscribe to config state (for global warnings)
     const configSubscription = appstate.configStatePart
       .select((stateArg) => stateArg)
@@ -153,38 +207,27 @@ export class OpsDashboard extends DeesElement {
       .subscribe((uiState) => {
         this.uiState = uiState;
         // Sync appdash view when state changes (e.g., from URL navigation)
-        this.syncAppdashView(uiState.activeView);
+        this.syncAppdashView(uiState.activeView, uiState.activeSubview);
       });
     this.rxSubscriptions.push(uiSubscription);
   }
 
   /**
    * Sync the dees-simple-appdash view selection with the current state.
-   * This is needed when the URL changes and we need to update the UI.
+   * This is needed when the URL changes externally (back/forward, deep link).
    */
-  private syncAppdashView(viewName: string): void {
+  private syncAppdashView(viewSlug: string, subviewSlug: string | null): void {
     const appDash = this.shadowRoot?.querySelector('dees-simple-appdash') as any;
     if (!appDash) return;
 
-    const targetTab = this.viewTabs.find(t => t.name.toLowerCase() === viewName);
-    if (!targetTab) return;
+    const targetView = this.findViewBySlug(viewSlug, subviewSlug);
+    if (!targetView) return;
 
-    // Check if we need to switch (avoid unnecessary updates)
-    if (appDash.selectedView === targetTab) return;
+    if (appDash.selectedView === targetView) return;
 
-    // Update the selected view programmatically
-    appDash.selectedView = targetTab;
-
-    // Update the displayed content
-    const content = appDash.shadowRoot?.querySelector('.appcontent');
-    if (content) {
-      if (appDash.currentView) {
-        appDash.currentView.remove();
-      }
-      const view = new targetTab.element();
-      content.appendChild(view);
-      appDash.currentView = view;
-    }
+    // Use loadView to update both selectedView and the mounted element.
+    // It will dispatch view-select; our handler skips when state already matches.
+    appDash.loadView(targetView);
   }
 
   public static styles = [
@@ -226,7 +269,7 @@ export class OpsDashboard extends DeesElement {
   public async firstUpdated() {
     const simpleLogin = this.shadowRoot!.querySelector('dees-simple-login') as any;
     simpleLogin.addEventListener('login', (e: Event) => {
-      // Handle logout event
+      // Handle login event
       const detail = (e as CustomEvent).detail;
       this.login(detail.data.username, detail.data.password);
     });
@@ -235,9 +278,24 @@ export class OpsDashboard extends DeesElement {
     const appDash = this.shadowRoot!.querySelector('dees-simple-appdash');
     if (appDash) {
       appDash.addEventListener('view-select', (e: Event) => {
-        const viewName = (e as CustomEvent).detail.view.name.toLowerCase();
-        // Use router for navigation instead of direct state update
-        appRouter.navigateToView(viewName);
+        const view = (e as CustomEvent).detail.view as ITabbedView;
+        const parent = this.findParent(view);
+        const currentState = appstate.uiStatePart.getState();
+        if (parent) {
+          const parentSlug = this.slugFor(parent);
+          const subSlug = this.slugFor(view);
+          // Skip if already on this exact subview — preserves URL on initial mount
+          if (currentState?.activeView === parentSlug && currentState?.activeSubview === subSlug) {
+            return;
+          }
+          appRouter.navigateToView(parentSlug, subSlug);
+        } else {
+          const slug = this.slugFor(view);
+          if (currentState?.activeView === slug && !currentState?.activeSubview) {
+            return;
+          }
+          appRouter.navigateToView(slug);
+        }
       });
 
       // Handle logout event
@@ -283,12 +341,12 @@ export class OpsDashboard extends DeesElement {
     const simpleLogin = this.shadowRoot!.querySelector('dees-simple-login') as any;
     const form = simpleLogin.shadowRoot!.querySelector('dees-form') as any;
     form.setStatus('pending', 'Logging in...');
-    
+
     const state = await appstate.loginStatePart.dispatchAction(appstate.loginAction, {
       username,
       password,
     });
-    
+
     if (state.identity) {
       console.log('Login successful');
       this.loginState = state;
@@ -302,4 +360,4 @@ export class OpsDashboard extends DeesElement {
       form!.reset();
     }
   }
-}
+}

package/ts_web/elements/overview/index.ts

@@ -0,0 +1,2 @@
+export * from './ops-view-overview.js';
+export * from './ops-view-config.js';

package/ts_web/elements/{ops-view-config.ts → overview/ops-view-config.ts}

@@ -1,7 +1,7 @@
-import * as plugins from '../plugins.js';
-import * as shared from './shared/index.js';
-import * as appstate from '../appstate.js';
-import { appRouter } from '../router.js';
+import * as plugins from '../../plugins.js';
+import * as shared from '../shared/index.js';
+import * as appstate from '../../appstate.js';
+import { appRouter } from '../../router.js';
 
 import {
   DeesElement,
@@ -181,7 +181,7 @@ export class OpsViewConfig extends DeesElement {
     }
 
     const actions: IConfigSectionAction[] = [
-      { label: 'View Emails', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'emails' } },
+      { label: 'View Emails', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'email', subview: 'log' } },
     ];
 
     return html`
@@ -305,7 +305,7 @@ export class OpsViewConfig extends DeesElement {
     ];
 
     const actions: IConfigSectionAction[] = [
-      { label: 'View Remote Ingress', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'remoteingress' } },
+      { label: 'View Remote Ingress', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'network', subview: 'remoteingress' } },
     ];
 
     return html`

package/ts_web/elements/{ops-view-overview.ts → overview/ops-view-overview.ts}

@@ -1,6 +1,6 @@
-import * as plugins from '../plugins.js';
-import * as shared from './shared/index.js';
-import * as appstate from '../appstate.js';
+import * as plugins from '../../plugins.js';
+import * as shared from '../shared/index.js';
+import * as appstate from '../../appstate.js';
 
 import {
   DeesElement,

package/ts_web/elements/security/index.ts

@@ -1,5 +1,3 @@
-export * from './ops-view-security.js';
 export * from './ops-view-security-overview.js';
 export * from './ops-view-security-blocked.js';
 export * from './ops-view-security-authentication.js';
-export * from './ops-view-security-emailsecurity.js';

package/ts_web/elements/security/ops-view-security-authentication.ts

@@ -1,4 +1,5 @@
 import * as appstate from '../../appstate.js';
+import { viewHostCss } from '../shared/css.js';
 
 import {
   DeesElement,
@@ -34,8 +35,8 @@ export class OpsViewSecurityAuthentication extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
+    viewHostCss,
     css`
-      :host { display: block; }
       h2 {
         margin: 32px 0 16px 0;
         font-size: 24px;

package/ts_web/elements/security/ops-view-security-blocked.ts

@@ -1,4 +1,5 @@
 import * as appstate from '../../appstate.js';
+import { viewHostCss } from '../shared/css.js';
 
 import {
   DeesElement,
@@ -34,8 +35,8 @@ export class OpsViewSecurityBlocked extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
+    viewHostCss,
     css`
-      :host { display: block; }
       dees-statsgrid {
         margin-bottom: 32px;
       }

package/ts_web/elements/security/ops-view-security-overview.ts

@@ -1,4 +1,5 @@
 import * as appstate from '../../appstate.js';
+import { viewHostCss } from '../shared/css.js';
 
 import {
   DeesElement,
@@ -34,8 +35,8 @@ export class OpsViewSecurityOverview extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
+    viewHostCss,
     css`
-      :host { display: block; }
       h2 {
         margin: 32px 0 16px 0;
         font-size: 24px;

package/ts_web/router.ts

@@ -4,17 +4,23 @@ import * as appstate from './appstate.js';
 const SmartRouter = plugins.domtools.plugins.smartrouter.SmartRouter;
 
 // Flat top-level views (no subviews)
-const flatViews = ['overview', 'configuration', 'emails', 'logs', 'apitokens', 'certificates', 'remoteingress', 'vpn'] as const;
+const flatViews = ['logs', 'certificates'] as const;
 
 // Tabbed views and their valid subviews
 const subviewMap: Record<string, readonly string[]> = {
-  network: ['activity', 'routes', 'sourceprofiles', 'networktargets', 'targetprofiles'] as const,
-  security: ['overview', 'blocked', 'authentication', 'emailsecurity'] as const,
+  overview: ['stats', 'configuration'] as const,
+  network: ['activity', 'routes', 'sourceprofiles', 'networktargets', 'targetprofiles', 'remoteingress', 'vpn'] as const,
+  email: ['log', 'security'] as const,
+  access: ['apitokens'] as const,
+  security: ['overview', 'blocked', 'authentication'] as const,
 };
 
 // Default subview when user visits the bare parent URL
 const defaultSubview: Record<string, string> = {
+  overview: 'stats',
   network: 'activity',
+  email: 'log',
+  access: 'apitokens',
   security: 'overview',
 };
 

package/dist_ts_web/elements/network/ops-view-network.d.ts

@@ -1,24 +0,0 @@
-import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
-import './ops-view-network-activity.js';
-import './ops-view-routes.js';
-import './ops-view-sourceprofiles.js';
-import './ops-view-networktargets.js';
-import './ops-view-targetprofiles.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'ops-view-network': OpsViewNetwork;
-    }
-}
-type TNetworkTab = 'activity' | 'routes' | 'sourceprofiles' | 'networktargets' | 'targetprofiles';
-export declare class OpsViewNetwork extends DeesElement {
-    accessor selectedTab: TNetworkTab;
-    private tabLabelMap;
-    private labelToTab;
-    private static isNetworkTab;
-    constructor();
-    firstUpdated(): Promise<void>;
-    static styles: import("@design.estate/dees-element").CSSResult[];
-    render(): TemplateResult;
-    private renderTabContent;
-}
-export {};

package/dist_ts_web/elements/network/ops-view-network.js

@@ -1,151 +0,0 @@
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-import * as appstate from '../../appstate.js';
-import { appRouter } from '../../router.js';
-import { viewHostCss } from '../shared/css.js';
-import { DeesElement, customElement, html, state, css, cssManager, } from '@design.estate/dees-element';
-// Side-effect imports register the subview custom elements
-import './ops-view-network-activity.js';
-import './ops-view-routes.js';
-import './ops-view-sourceprofiles.js';
-import './ops-view-networktargets.js';
-import './ops-view-targetprofiles.js';
-let OpsViewNetwork = (() => {
-    let _classDecorators = [customElement('ops-view-network')];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _classSuper = DeesElement;
-    let _selectedTab_decorators;
-    let _selectedTab_initializers = [];
-    let _selectedTab_extraInitializers = [];
-    var OpsViewNetwork = class extends _classSuper {
-        static { _classThis = this; }
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _selectedTab_decorators = [state()];
-            __esDecorate(this, null, _selectedTab_decorators, { kind: "accessor", name: "selectedTab", static: false, private: false, access: { has: obj => "selectedTab" in obj, get: obj => obj.selectedTab, set: (obj, value) => { obj.selectedTab = value; } }, metadata: _metadata }, _selectedTab_initializers, _selectedTab_extraInitializers);
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            OpsViewNetwork = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        #selectedTab_accessor_storage = __runInitializers(this, _selectedTab_initializers, 'activity');
-        get selectedTab() { return this.#selectedTab_accessor_storage; }
-        set selectedTab(value) { this.#selectedTab_accessor_storage = value; }
-        tabLabelMap = (__runInitializers(this, _selectedTab_extraInitializers), {
-            'activity': 'Network Activity',
-            'routes': 'Routes',
-            'sourceprofiles': 'Source Profiles',
-            'networktargets': 'Network Targets',
-            'targetprofiles': 'Target Profiles',
-        });
-        labelToTab = {
-            'Network Activity': 'activity',
-            'Routes': 'routes',
-            'Source Profiles': 'sourceprofiles',
-            'Network Targets': 'networktargets',
-            'Target Profiles': 'targetprofiles',
-        };
-        static isNetworkTab(s) {
-            return s === 'activity' || s === 'routes' || s === 'sourceprofiles'
-                || s === 'networktargets' || s === 'targetprofiles';
-        }
-        constructor() {
-            super();
-            // Read initial subview from state (URL-driven)
-            const initialState = appstate.uiStatePart.getState();
-            if (OpsViewNetwork.isNetworkTab(initialState.activeSubview)) {
-                this.selectedTab = initialState.activeSubview;
-            }
-            // Subscribe to future changes (back/forward navigation, direct URL entry)
-            const sub = appstate.uiStatePart.select((s) => s.activeSubview).subscribe((sub) => {
-                if (OpsViewNetwork.isNetworkTab(sub) && sub !== this.selectedTab) {
-                    this.selectedTab = sub;
-                }
-            });
-            this.rxSubscriptions.push(sub);
-        }
-        async firstUpdated() {
-            const toggle = this.shadowRoot.querySelector('dees-input-multitoggle');
-            if (toggle) {
-                const sub = toggle.changeSubject.subscribe(() => {
-                    const tab = this.labelToTab[toggle.selectedOption];
-                    if (tab && tab !== this.selectedTab) {
-                        // Push URL → router updates state → subscription updates selectedTab
-                        appRouter.navigateToView('network', tab);
-                    }
-                });
-                this.rxSubscriptions.push(sub);
-            }
-        }
-        static styles = [
-            cssManager.defaultStyles,
-            viewHostCss,
-            css `
-      dees-input-multitoggle {
-        margin-bottom: 24px;
-      }
-    `,
-        ];
-        render() {
-            return html `
-      <dees-heading level="2">Network</dees-heading>
-
-      <dees-input-multitoggle
-        .type=${'single'}
-        .options=${['Network Activity', 'Routes', 'Source Profiles', 'Network Targets', 'Target Profiles']}
-        .selectedOption=${this.tabLabelMap[this.selectedTab]}
-      ></dees-input-multitoggle>
-
-      ${this.renderTabContent()}
-    `;
-        }
-        renderTabContent() {
-            switch (this.selectedTab) {
-                case 'activity': return html `<ops-view-network-activity></ops-view-network-activity>`;
-                case 'routes': return html `<ops-view-routes></ops-view-routes>`;
-                case 'sourceprofiles': return html `<ops-view-sourceprofiles></ops-view-sourceprofiles>`;
-                case 'networktargets': return html `<ops-view-networktargets></ops-view-networktargets>`;
-                case 'targetprofiles': return html `<ops-view-targetprofiles></ops-view-targetprofiles>`;
-            }
-        }
-        static {
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-    };
-    return OpsViewNetwork = _classThis;
-})();
-export { OpsViewNetwork };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3BzLXZpZXctbmV0d29yay5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy9uZXR3b3JrL29wcy12aWV3LW5ldHdvcmsudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxRQUFRLE1BQU0sbUJBQW1CLENBQUM7QUFDOUMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzVDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUUvQyxPQUFPLEVBQ0wsV0FBVyxFQUNYLGFBQWEsRUFDYixJQUFJLEVBQ0osS0FBSyxFQUNMLEdBQUcsRUFDSCxVQUFVLEdBRVgsTUFBTSw2QkFBNkIsQ0FBQztBQUVyQywyREFBMkQ7QUFDM0QsT0FBTyxnQ0FBZ0MsQ0FBQztBQUN4QyxPQUFPLHNCQUFzQixDQUFDO0FBQzlCLE9BQU8sOEJBQThCLENBQUM7QUFDdEMsT0FBTyw4QkFBOEIsQ0FBQztBQUN0QyxPQUFPLDhCQUE4QixDQUFDO0lBV3pCLGNBQWM7NEJBRDFCLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQzs7OztzQkFDRSxXQUFXOzs7OzhCQUFuQixTQUFRLFdBQVc7Ozs7dUNBQzVDLEtBQUssRUFBRTtZQUNSLHNMQUFTLFdBQVcsNkJBQVgsV0FBVyxpR0FBMkI7WUFGakQsNktBd0ZDOzs7O1FBdEZDLG1GQUFvQyxVQUFVLEVBQUM7UUFBL0MsSUFBUyxXQUFXLGlEQUEyQjtRQUEvQyxJQUFTLFdBQVcsdURBQTJCO1FBRXZDLFdBQVcsNkRBQWdDO1lBQ2pELFVBQVUsRUFBUSxrQkFBa0I7WUFDcEMsUUFBUSxFQUFVLFFBQVE7WUFDMUIsZ0JBQWdCLEVBQUUsaUJBQWlCO1lBQ25DLGdCQUFnQixFQUFFLGlCQUFpQjtZQUNuQyxnQkFBZ0IsRUFBRSxpQkFBaUI7U0FDcEMsRUFBQztRQUVNLFVBQVUsR0FBZ0M7WUFDaEQsa0JBQWtCLEVBQUUsVUFBVTtZQUM5QixRQUFRLEVBQVksUUFBUTtZQUM1QixpQkFBaUIsRUFBRyxnQkFBZ0I7WUFDcEMsaUJBQWlCLEVBQUcsZ0JBQWdCO1lBQ3BDLGlCQUFpQixFQUFHLGdCQUFnQjtTQUNyQyxDQUFDO1FBRU0sTUFBTSxDQUFDLFlBQVksQ0FBQyxDQUFnQjtZQUMxQyxPQUFPLENBQUMsS0FBSyxVQUFVLElBQUksQ0FBQyxLQUFLLFFBQVEsSUFBSSxDQUFDLEtBQUssZ0JBQWdCO21CQUM1RCxDQUFDLEtBQUssZ0JBQWdCLElBQUksQ0FBQyxLQUFLLGdCQUFnQixDQUFDO1FBQzFELENBQUM7UUFFRDtZQUNFLEtBQUssRUFBRSxDQUFDO1lBQ1IsK0NBQStDO1lBQy9DLE1BQU0sWUFBWSxHQUFHLFFBQVEsQ0FBQyxXQUFXLENBQUMsUUFBUSxFQUFHLENBQUM7WUFDdEQsSUFBSSxjQUFjLENBQUMsWUFBWSxDQUFDLFlBQVksQ0FBQyxhQUFhLENBQUMsRUFBRSxDQUFDO2dCQUM1RCxJQUFJLENBQUMsV0FBVyxHQUFHLFlBQVksQ0FBQyxhQUFhLENBQUM7WUFDaEQsQ0FBQztZQUNELDBFQUEwRTtZQUMxRSxNQUFNLEdBQUcsR0FBRyxRQUFRLENBQUMsV0FBVyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFO2dCQUNoRixJQUFJLGNBQWMsQ0FBQyxZQUFZLENBQUMsR0FBRyxDQUFDLElBQUksR0FBRyxLQUFLLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztvQkFDakUsSUFBSSxDQUFDLFdBQVcsR0FBRyxHQUFHLENBQUM7Z0JBQ3pCLENBQUM7WUFDSCxDQUFDLENBQUMsQ0FBQztZQUNILElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ2pDLENBQUM7UUFFRCxLQUFLLENBQUMsWUFBWTtZQUNoQixNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsVUFBVyxDQUFDLGFBQWEsQ0FBQyx3QkFBd0IsQ0FBUSxDQUFDO1lBQy9FLElBQUksTUFBTSxFQUFFLENBQUM7Z0JBQ1gsTUFBTSxHQUFHLEdBQUcsTUFBTSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO29CQUM5QyxNQUFNLEdBQUcsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQztvQkFDbkQsSUFBSSxHQUFHLElBQUksR0FBRyxLQUFLLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQzt3QkFDcEMscUVBQXFFO3dCQUNyRSxTQUFTLENBQUMsY0FBYyxDQUFDLFNBQVMsRUFBRSxHQUFHLENBQUMsQ0FBQztvQkFDM0MsQ0FBQztnQkFDSCxDQUFDLENBQUMsQ0FBQztnQkFDSCxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUNqQyxDQUFDO1FBQ0gsQ0FBQztRQUVNLE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsVUFBVSxDQUFDLGFBQWE7WUFDeEIsV0FBVztZQUNYLEdBQUcsQ0FBQTs7OztLQUlGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQTs7OztnQkFJQyxRQUFRO21CQUNMLENBQUMsa0JBQWtCLEVBQUUsUUFBUSxFQUFFLGlCQUFpQixFQUFFLGlCQUFpQixFQUFFLGlCQUFpQixDQUFDOzBCQUNoRixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7OztRQUdwRCxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7S0FDMUIsQ0FBQztRQUNKLENBQUM7UUFFTyxnQkFBZ0I7WUFDdEIsUUFBUSxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7Z0JBQ3pCLEtBQUssVUFBVSxDQUFDLENBQU8sT0FBTyxJQUFJLENBQUEseURBQXlELENBQUM7Z0JBQzVGLEtBQUssUUFBUSxDQUFDLENBQVMsT0FBTyxJQUFJLENBQUEscUNBQXFDLENBQUM7Z0JBQ3hFLEtBQUssZ0JBQWdCLENBQUMsQ0FBQyxPQUFPLElBQUksQ0FBQSxxREFBcUQsQ0FBQztnQkFDeEYsS0FBSyxnQkFBZ0IsQ0FBQyxDQUFDLE9BQU8sSUFBSSxDQUFBLHFEQUFxRCxDQUFDO2dCQUN4RixLQUFLLGdCQUFnQixDQUFDLENBQUMsT0FBTyxJQUFJLENBQUEscURBQXFELENBQUM7WUFDMUYsQ0FBQztRQUNILENBQUM7O1lBdkZVLHVEQUFjOzs7OztTQUFkLGNBQWMifQ==

package/dist_ts_web/elements/security/ops-view-security.d.ts

@@ -1,23 +0,0 @@
-import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
-import './ops-view-security-overview.js';
-import './ops-view-security-blocked.js';
-import './ops-view-security-authentication.js';
-import './ops-view-security-emailsecurity.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'ops-view-security': OpsViewSecurity;
-    }
-}
-type TSecurityTab = 'overview' | 'blocked' | 'authentication' | 'emailsecurity';
-export declare class OpsViewSecurity extends DeesElement {
-    accessor selectedTab: TSecurityTab;
-    private tabLabelMap;
-    private labelToTab;
-    private static isSecurityTab;
-    constructor();
-    firstUpdated(): Promise<void>;
-    static styles: import("@design.estate/dees-element").CSSResult[];
-    render(): TemplateResult;
-    private renderTabContent;
-}
-export {};