@kodaris/krubble-app-components 1.0.13 → 1.0.14

package/dist/krubble-app.bundled.js

@@ -1400,6 +1400,34 @@ let KRScaffold = class KRScaffold extends i$1 {
             this.originalXhrOpen = null;
         }
     }
+    /**
+     * Resolves a navigation URL by prepending the base href.
+     *
+     * This method is used for:
+     * 1. Setting href attributes on anchor elements (so Cmd/Ctrl+click opens correct URL in new tab)
+     * 2. Comparing URLs with window.location.pathname in updateActiveNavItem()
+     *
+     * The original item.url is kept intact (without base href) and passed to Angular
+     * via the nav-item-click event. Angular Router expects paths relative to base,
+     * so it handles the base href internally.
+     *
+     * Example with base href "/operations/":
+     * - item.url = "/settings" (used for Angular routing)
+     * - resolveUrl(item) = "/operations/settings" (used for href and URL comparison)
+     */
+    resolveUrl(item) {
+        if (!item.url)
+            return '#';
+        // External URLs - return as-is
+        if (item.external) {
+            return item.url;
+        }
+        // Remove leading slash from url if present, then combine with base
+        const path = item.url.startsWith('/') ? item.url.slice(1) : item.url;
+        const baseHref = document.querySelector('base')?.getAttribute('href') || '/';
+        const base = baseHref.endsWith('/') ? baseHref : (baseHref + '/');
+        return base + path;
+    }
     // =========================================================================
     // Navigation Data
     // =========================================================================
@@ -1533,7 +1561,7 @@ let KRScaffold = class KRScaffold extends i$1 {
      * Handles click on the nav header (logo/title) to navigate home.
      * Dispatches a nav-item-click event so Angular can intercept and route.
      */
-    handleNavHeaderClick(_e) {
+    handleNavHeaderClick() {
         // Clear active state since we're going home
         this.activeNavItemId = null;
         const navEvent = new CustomEvent('nav-item-click', {
@@ -1609,6 +1637,10 @@ let KRScaffold = class KRScaffold extends i$1 {
             this.toggleNavItem(item.id);
         }
         else {
+            // Allow Ctrl/Cmd+click and middle-click to open in new tab without SPA navigation
+            if (e.ctrlKey || e.metaKey || e.button === 1) {
+                return;
+            }
             // Set active item immediately on click for instant visual feedback
             this.activeNavItemId = item.id;
             const navEvent = new CustomEvent('nav-item-click', {
@@ -1641,7 +1673,8 @@ let KRScaffold = class KRScaffold extends i$1 {
         let activeItem = null;
         let longestMatch = 0;
         for (const item of allItems) {
-            const url = item.url; // We filtered for items with url above
+            // Use resolveUrl because currentPath includes base href
+            const url = this.resolveUrl(item);
             if (currentPath.startsWith(url) && url.length > longestMatch) {
                 activeItem = item;
                 longestMatch = url.length;
@@ -2216,7 +2249,7 @@ let KRScaffold = class KRScaffold extends i$1 {
             'nav-item--drop-below': this.navItemDropTargetId === item.id && this.navItemDropPosition === 'below',
         })}
         data-id="${item.id}"
-        href=${item.url || '#'}
+        href=${this.resolveUrl(item)}
         target=${item.external ? '_blank' : A}
         @mousedown=${(e) => this.handleNavItemMouseDown(e, item)}
         @click=${(e) => this.handleNavItemClick(e, item)}
@@ -2325,9 +2358,8 @@ KRScaffold.styles = i$4 `
       --kr-scaffold-nav-active-bg: #e5e7eb;
       --kr-scaffold-nav-border: rgb(229, 229, 228);
       --kr-scaffold-nav-divider: #e5e7eb;
-      --kr-scaffold-nav-search-bg: #f3f4f6;
-      --kr-scaffold-nav-search-focus-bg: #ffffff;
-      --kr-scaffold-nav-search-focus-border: #d1d5db;
+      --kr-scaffold-nav-search-bg: #ffffff;
+      --kr-scaffold-nav-search-border: #d1d5db;
     }
 
     /* Dark scheme */
@@ -2340,8 +2372,7 @@ KRScaffold.styles = i$4 `
       --kr-scaffold-nav-border: transparent;
       --kr-scaffold-nav-divider: rgba(255, 255, 255, 0.06);
       --kr-scaffold-nav-search-bg: rgba(255, 255, 255, 0.15);
-      --kr-scaffold-nav-search-focus-bg: rgba(255, 255, 255, 0.2);
-      --kr-scaffold-nav-search-focus-border: rgba(255, 255, 255, 0.3);
+      --kr-scaffold-nav-search-border: rgba(255, 255, 255, 0.3);
     }
 
     *,
@@ -2419,15 +2450,10 @@ KRScaffold.styles = i$4 `
       padding: 0 12px;
       height: 40px;
       gap: 8px;
-      border: 1px solid transparent;
+      border: 1px solid var(--kr-scaffold-nav-search-border);
       transition: all 0.15s ease;
     }
 
-    .nav-search__wrapper:focus-within {
-      background: var(--kr-scaffold-nav-search-focus-bg);
-      border-color: var(--kr-scaffold-nav-search-focus-border);
-    }
-
     .nav-search__icon {
       width: 18px;
       height: 18px;
@@ -3536,6 +3562,29 @@ let KRSubbar = class KRSubbar extends i$1 {
     _handleMenuClick() {
         this.dispatchEvent(new CustomEvent('menu-click', { bubbles: true, composed: true }));
     }
+    /**
+     * Resolves a breadcrumb URL by prepending the base href.
+     *
+     * This method is used for setting href attributes on anchor elements
+     * (so Cmd/Ctrl+click opens correct URL in new tab).
+     *
+     * The original crumb.url is kept intact (without base href) and passed to Angular
+     * via the breadcrumb-click event. Angular Router expects paths relative to base,
+     * so it handles the base href internally.
+     *
+     * Example with base href "/operations/":
+     * - crumb.url = "/settings" (used for Angular routing)
+     * - resolveUrl(crumb) = "/operations/settings" (used for href)
+     */
+    resolveUrl(crumb) {
+        if (!crumb.url)
+            return '#';
+        // Remove leading slash from url if present, then combine with base
+        const path = crumb.url.startsWith('/') ? crumb.url.slice(1) : crumb.url;
+        const baseHref = document.querySelector('base')?.getAttribute('href') || '/';
+        const base = baseHref.endsWith('/') ? baseHref : (baseHref + '/');
+        return base + path;
+    }
     /**
      * Handles click on a breadcrumb link.
      * Dispatches a cancelable event so SPA routers can intercept.
@@ -3546,6 +3595,10 @@ let KRSubbar = class KRSubbar extends i$1 {
             e.preventDefault();
             return;
         }
+        // Allow Ctrl/Cmd+click and middle-click to open in new tab without SPA navigation
+        if (e.ctrlKey || e.metaKey || e.button === 1) {
+            return;
+        }
         const breadcrumbEvent = new CustomEvent('breadcrumb-click', {
             detail: { breadcrumb: crumb },
             bubbles: true,
@@ -3576,7 +3629,7 @@ let KRSubbar = class KRSubbar extends i$1 {
             ${index > 0 ? b `<span class="breadcrumb-separator">/</span>` : ''}
             <a
               class=${e$1({ 'breadcrumb': true, 'breadcrumb--current': isCurrent })}
-              href=${crumb.url || ''}
+              href=${this.resolveUrl(crumb)}
               @click=${(e) => this._handleBreadcrumbClick(e, crumb, isCurrent)}
             >${crumb.label}</a>
           `;
@@ -3600,6 +3653,7 @@ KRSubbar.styles = i$4 `
       align-items: center;
       padding: 0 16px;
       width: 100%;
+      flex-shrink: 0;
     }
 
     .breadcrumbs {