@kodaris/krubble-app-components 1.0.13 → 1.0.14

package/dist/krubble-app.umd.js

@@ -1403,6 +1403,34 @@
               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
       // =========================================================================
@@ -1536,7 +1564,7 @@
        * 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', {
@@ -1612,6 +1640,10 @@
               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', {
@@ -1644,7 +1676,8 @@
           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;
@@ -2219,7 +2252,7 @@
             '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)}
@@ -2328,9 +2361,8 @@
       --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 */
@@ -2343,8 +2375,7 @@
       --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);
     }
 
     *,
@@ -2422,15 +2453,10 @@
       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;
@@ -3539,6 +3565,29 @@
       _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.
@@ -3549,6 +3598,10 @@
               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,
@@ -3579,7 +3632,7 @@
             ${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>
           `;
@@ -3603,6 +3656,7 @@
       align-items: center;
       padding: 0 16px;
       width: 100%;
+      flex-shrink: 0;
     }
 
     .breadcrumbs {