@kodaris/krubble-app-components 1.0.35 → 1.0.37

package/breaking-changes.json

@@ -1,6 +1,6 @@
 [
   {
     "version": "1.0.18",
-    "description": "<kr-scaffold> \"title\" attribute renamed to \"label\""
+    "description": "<kr-screen-nav> \"title\" renamed to \"label\", \"subtitle\" renamed to \"subLabel\", \"backUrl\" property removed, \"updateActiveNavItem()\" method removed"
   }
 ]

package/dist/krubble-app.bundled.js

@@ -3160,9 +3160,8 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
  * ## 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' },
@@ -3176,9 +3175,8 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
  *
  * @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
  */
@@ -3186,17 +3184,13 @@ let KRScreenNav = class KRScreenNav extends i$1 {
     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
          */
@@ -3234,34 +3228,14 @@ let KRScreenNav = class KRScreenNav extends i$1 {
             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}
@@ -3283,13 +3257,6 @@ let KRScreenNav = class KRScreenNav extends i$1 {
         <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>
     `;
     }
@@ -3351,13 +3318,14 @@ KRScreenNav.styles = i$4 `
     .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;
     }
@@ -3368,9 +3336,9 @@ KRScreenNav.styles = i$4 `
     }
 
     .nav-item--active {
-      background: rgba(22, 48, 82, 0.08);
-      color: #163052;
-      font-weight: 600;
+      background: #e1e9f6;
+      color: #1a2332;
+      font-weight: 700;
     }
 
     .content {
@@ -3380,42 +3348,6 @@ KRScreenNav.styles = i$4 `
       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;
@@ -3423,13 +3355,10 @@ KRScreenNav.styles = i$4 `
   `;
 __decorate$2([
     n({ type: String })
-], KRScreenNav.prototype, "title", void 0);
-__decorate$2([
-    n({ type: String })
-], KRScreenNav.prototype, "subtitle", void 0);
+], KRScreenNav.prototype, "label", void 0);
 __decorate$2([
     n({ type: String })
-], KRScreenNav.prototype, "backUrl", void 0);
+], KRScreenNav.prototype, "subLabel", void 0);
 __decorate$2([
     n({ type: Array })
 ], KRScreenNav.prototype, "navItems", void 0);