@kodaris/krubble-app-components 1.0.34 → 1.0.36

package/dist/krubble-app.umd.js

@@ -3163,9 +3163,8 @@
    * ## Usage
    * ```html
    * <kr-screen-nav
-   *   title="Acme Corporation"
-   *   subtitle="Company"
-   *   backUrl="/crm/companies"
+   *   label="Acme Corporation"
+   *   subLabel="Company"
    *   .navItems=${[
    *     { id: 'overview', label: 'Overview', url: '/companies/123/overview' },
    *     { id: 'contacts', label: 'Contacts', url: '/companies/123/contacts' },
@@ -3179,9 +3178,8 @@
    *
    * @slot - The main screen content
    *
-   * @property {string} title - Main title (e.g., entity name like "Acme Corporation")
-   * @property {string} subtitle - Subtitle/label (e.g., entity type like "Company")
-   * @property {string} backUrl - URL to navigate back to (e.g., the table/list view)
+   * @property {string} label - Main label (e.g., entity name like "Acme Corporation")
+   * @property {string} subLabel - Sub label (e.g., entity type like "Company")
    * @property {KRScreenNavItem[]} navItems - Navigation items as JSON array
    * @property {string} activeId - Currently active item ID
    */
@@ -3189,17 +3187,13 @@
       constructor() {
           super(...arguments);
           /**
-           * Main title (e.g., entity name like "Acme Corporation")
+           * Main label (e.g., entity name like "Acme Corporation")
            */
-          this.title = '';
-          /**
-           * Subtitle/label (e.g., entity type like "Company")
-           */
-          this.subtitle = '';
+          this.label = '';
           /**
-           * URL to navigate back to (e.g., the table/list view)
+           * Sub label (e.g., entity type like "Company")
            */
-          this.backUrl = '';
+          this.subLabel = '';
           /**
            * Navigation items
            */
@@ -3237,34 +3231,14 @@
               e.preventDefault();
           }
       }
-      /**
-       * Updates the active nav item based on the current URL.
-       * Called automatically by `KRScreenNavDirective` on Angular route changes.
-       */
-      updateActiveNavItem() {
-          const currentPath = window.location.pathname;
-          const activeItem = this.navItems.find(item => {
-              if (!item.url)
-                  return false;
-              // Handle both absolute and relative URLs
-              if (item.url.startsWith('./')) {
-                  const segment = item.url.replace(/^\.\//, '');
-                  return currentPath.endsWith('/' + segment);
-              }
-              return currentPath === item.url || currentPath.startsWith(item.url + '/');
-          });
-          if (activeItem) {
-              this.activeId = activeItem.id;
-          }
-      }
       render() {
           return b `
       <nav class="nav">
-        ${this.title ? b `
+        ${this.label ? b `
           <div class="nav-header">
             <div class="nav-header__text">
-              ${this.subtitle ? b `<div class="nav-header__subtitle">${this.subtitle}</div>` : A}
-              <div class="nav-header__title">${this.title}</div>
+              ${this.subLabel ? b `<div class="nav-header__subtitle">${this.subLabel}</div>` : A}
+              <div class="nav-header__title">${this.label}</div>
             </div>
           </div>
         ` : A}
@@ -3286,13 +3260,6 @@
         <div class="content__main">
           <slot></slot>
         </div>
-        <!--<div class="breadcrumbs">
-          <a href="/crm">CRM</a>
-          <span class="breadcrumbs__separator">/</span>
-          <a href="/crm/companies">Companies</a>
-          <span class="breadcrumbs__separator">/</span>
-          <span class="breadcrumbs__current">Acme Corporation</span>
-        </div>-->
       </main>
     `;
       }
@@ -3354,13 +3321,14 @@
     .nav-item {
       display: block;
       padding: 0 12px;
-      height: 40px;
-      line-height: 40px;
-      letter-spacing: 0.13px;
+      height: 32px;
+      line-height: 32px;
+      letter-spacing: 0.01em;
       color: rgb(32, 33, 36);
       text-decoration: none;
       font-size: 13px;
-      font-weight: 500;
+      font-weight: 400;
+      font-family: inherit;
       border-radius: 8px;
       transition: all 0.15s ease;
     }
@@ -3371,9 +3339,9 @@
     }
 
     .nav-item--active {
-      background: rgba(22, 48, 82, 0.08);
-      color: #163052;
-      font-weight: 600;
+      background: #e1e9f6;
+      color: #1a2332;
+      font-weight: 700;
     }
 
     .content {
@@ -3383,42 +3351,6 @@
       flex-direction: column;
     }
 
-    .breadcrumbs {
-      height: 32px;
-      padding: 0 1rem;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 12px;
-      color: #6b7280;
-      //background: #f9fafb;
-      background: #beea4e;
-      border-top: 1px solid #e5e7eb;
-      flex-shrink: 0;
-    }
-
-    .breadcrumbs a {
-      //color: #6b7280;
-      color: #10172a;
-      font-size: 13px;
-      font-weight: 600;
-      text-decoration: none;
-    }
-
-    .breadcrumbs a:hover {
-      color: #111827;
-      text-decoration: underline;
-    }
-
-    .breadcrumbs__separator {
-      color: #d1d5db;
-    }
-
-    .breadcrumbs__current {
-      color: #111827;
-      font-weight: 500;
-    }
-
     .content__main {
       flex: 1;
       overflow-y: auto;
@@ -3426,13 +3358,10 @@
   `;
   __decorate$2([
       n({ type: String })
-  ], exports.ScreenNav.prototype, "title", void 0);
-  __decorate$2([
-      n({ type: String })
-  ], exports.ScreenNav.prototype, "subtitle", void 0);
+  ], exports.ScreenNav.prototype, "label", void 0);
   __decorate$2([
       n({ type: String })
-  ], exports.ScreenNav.prototype, "backUrl", void 0);
+  ], exports.ScreenNav.prototype, "subLabel", void 0);
   __decorate$2([
       n({ type: Array })
   ], exports.ScreenNav.prototype, "navItems", void 0);