@kodaris/krubble-app-components 1.0.2 → 1.0.4

package/dist/krubble-app.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@kodaris/krubble-components')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@kodaris/krubble-components'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.krApp = {}, global.kr));
-})(this, (function (exports, krubbleComponents) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@kodaris/krubble-components'), require('@kodaris/krubble-data')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@kodaris/krubble-components', '@kodaris/krubble-data'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.krApp = {}, global.kr, global.kr.data));
+})(this, (function (exports, krubbleComponents, krubbleData) { 'use strict';
 
   /**
    * @license
@@ -97,7 +97,7 @@
    * @fires menu-item-click - When a menu item is clicked. Detail: { item: KRShellMenuItem }
    * @fires logout - When logout is clicked
    */
-  exports.KRShell = class KRShell extends i$1 {
+  exports.Shell = class KRShell extends i$1 {
       constructor() {
           super(...arguments);
           this.logo = 'https://s3.amazonaws.com/kodariscom/kodariscom/content/website/kodaris-logo-icon-light-53.png';
@@ -368,7 +368,7 @@
     `;
       }
   };
-  exports.KRShell.styles = i$4 `
+  exports.Shell.styles = i$4 `
     :host {
       display: flex;
       flex-direction: column;
@@ -897,99 +897,31 @@
   `;
   __decorate$5([
       n({ type: String })
-  ], exports.KRShell.prototype, "logo", void 0);
+  ], exports.Shell.prototype, "logo", void 0);
   __decorate$5([
       n({ type: Array })
-  ], exports.KRShell.prototype, "apps", void 0);
+  ], exports.Shell.prototype, "apps", void 0);
   __decorate$5([
       n({ type: String, attribute: 'active-app-id' })
-  ], exports.KRShell.prototype, "activeAppId", void 0);
+  ], exports.Shell.prototype, "activeAppId", void 0);
   __decorate$5([
       n({ type: Object })
-  ], exports.KRShell.prototype, "user", void 0);
+  ], exports.Shell.prototype, "user", void 0);
   __decorate$5([
       n({ type: Array, attribute: 'menu-items' })
-  ], exports.KRShell.prototype, "menuItems", void 0);
+  ], exports.Shell.prototype, "menuItems", void 0);
   __decorate$5([
       r()
-  ], exports.KRShell.prototype, "isUserMenuOpen", void 0);
+  ], exports.Shell.prototype, "isUserMenuOpen", void 0);
   __decorate$5([
       r()
-  ], exports.KRShell.prototype, "isAppsMenuOpen", void 0);
+  ], exports.Shell.prototype, "isAppsMenuOpen", void 0);
   __decorate$5([
       r()
-  ], exports.KRShell.prototype, "pendingRequests", void 0);
-  exports.KRShell = __decorate$5([
+  ], exports.Shell.prototype, "pendingRequests", void 0);
+  exports.Shell = __decorate$5([
       t$1('kr-shell')
-  ], exports.KRShell);
-
-  class KRClient {
-      constructor() {
-          this._url = `https://content.kodaris.com`;
-      }
-      static getInstance() {
-          if (!KRClient._instance) {
-              KRClient._instance = new KRClient();
-          }
-          return KRClient._instance;
-      }
-      fetch(options) {
-          let url = options.url;
-          // Add on the default base url if user
-          // has not provided the full url
-          if (url.indexOf('http') !== 0) {
-              url = this._url + url;
-          }
-          if (options.params) {
-              url += '?';
-              Object.keys(options.params).forEach((key, keyIdx) => {
-                  if (keyIdx > 0) {
-                      url += '&';
-                  }
-                  url += `${key}=${options.params[key]}`;
-              });
-          }
-          // fixme
-          if (!options) {
-              options = {};
-          }
-          if (!options.headers) {
-              options.headers = {};
-          }
-          if (!options.headers['Content-Type']) {
-              options.headers['Content-Type'] = 'application/json';
-          }
-          options.credentials = 'include';
-          // User and Customer apis require CSRF tokens on non-GET reequests
-          let token;
-          if (url.indexOf('/api/user/') > -1 || url.indexOf('/api/customer/') > -1) {
-              token = fetch(`${this._url}/api/user/customer/authToken`, { credentials: 'include' });
-          }
-          else {
-              token = Promise.resolve(null);
-          }
-          let response;
-          return token
-              .then(res => res?.json())
-              .then(res => {
-              if (res?.data) {
-                  options.headers['X-CSRF-TOKEN'] = res.data;
-              }
-              return fetch(url, options);
-          })
-              .then(res => {
-              response = res;
-              return res.json();
-          })
-              .then(json => {
-              if (!response?.ok) {
-                  return Promise.reject(json);
-              }
-              return Promise.resolve(json);
-          });
-      }
-  }
-  KRClient._instance = null;
+  ], exports.Shell);
 
   var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1260,13 +1192,13 @@
    * - Don't hardcode breadcrumbs
    * - Look at renderNormalFooter and renderEditFooter and see if that is what we want to do
    */
-  exports.KRScaffold = class KRScaffold extends i$1 {
+  exports.Scaffold = class KRScaffold extends i$1 {
       constructor() {
           super();
           /**
            * HTTP client for API calls
            */
-          this.http = KRClient.getInstance();
+          this.http = krubbleData.Client.getInstance();
           /**
            * Default icon for nav items without an icon (shown at top level)
            */
@@ -1568,9 +1500,14 @@
               });
               this.dispatchEvent(navEvent);
               // If a listener called preventDefault(), prevent the native navigation
+              // (e.g., Angular router handles it and will call updateActiveNavItem() after route change)
               if (navEvent.defaultPrevented) {
                   e.preventDefault();
               }
+              else {
+                  // Native browser navigation - set active item immediately for visual feedback
+                  this.activeNavItemId = item.id;
+              }
           }
       }
       /**
@@ -1655,7 +1592,7 @@
           if (!this.isEditing)
               return;
           e.preventDefault();
-          krubbleComponents.KRContextMenu.open({
+          krubbleComponents.ContextMenu.open({
               x: e.clientX,
               y: e.clientY,
               items: [
@@ -1690,7 +1627,7 @@
        * @param item - The nav item to edit
        */
       openNavItemEdit(item) {
-          krubbleComponents.KRDialog.open(KRNavItemEdit, { data: item }).afterClosed().then((res) => {
+          krubbleComponents.Dialog.open(KRNavItemEdit, { data: item }).afterClosed().then((res) => {
               const result = res;
               if (!result)
                   return;
@@ -2253,7 +2190,7 @@
     `;
       }
   };
-  exports.KRScaffold.styles = i$4 `
+  exports.Scaffold.styles = i$4 `
     :host {
       display: flex;
       flex-direction: column;
@@ -2983,70 +2920,70 @@
   `;
   __decorate$3([
       r()
-  ], exports.KRScaffold.prototype, "navItemsExpanded", void 0);
+  ], exports.Scaffold.prototype, "navItemsExpanded", void 0);
   __decorate$3([
       r()
-  ], exports.KRScaffold.prototype, "navQuery", void 0);
+  ], exports.Scaffold.prototype, "navQuery", void 0);
   __decorate$3([
       r()
-  ], exports.KRScaffold.prototype, "activeNavItemId", void 0);
+  ], exports.Scaffold.prototype, "activeNavItemId", void 0);
   __decorate$3([
       r()
-  ], exports.KRScaffold.prototype, "isNavScrolled", void 0);
+  ], exports.Scaffold.prototype, "isNavScrolled", void 0);
   __decorate$3([
       r()
-  ], exports.KRScaffold.prototype, "isNavOpened", void 0);
+  ], exports.Scaffold.prototype, "isNavOpened", void 0);
   __decorate$3([
       r()
-  ], exports.KRScaffold.prototype, "isEditing", void 0);
+  ], exports.Scaffold.prototype, "isEditing", void 0);
   __decorate$3([
       r()
-  ], exports.KRScaffold.prototype, "isUserMenuOpen", void 0);
+  ], exports.Scaffold.prototype, "isUserMenuOpen", void 0);
   __decorate$3([
       r()
-  ], exports.KRScaffold.prototype, "pref", void 0);
+  ], exports.Scaffold.prototype, "pref", void 0);
   __decorate$3([
       r()
-  ], exports.KRScaffold.prototype, "draggedNavItemId", void 0);
+  ], exports.Scaffold.prototype, "draggedNavItemId", void 0);
   __decorate$3([
       r()
-  ], exports.KRScaffold.prototype, "navItemDropTargetId", void 0);
+  ], exports.Scaffold.prototype, "navItemDropTargetId", void 0);
   __decorate$3([
       r()
-  ], exports.KRScaffold.prototype, "navItemDropPosition", void 0);
+  ], exports.Scaffold.prototype, "navItemDropPosition", void 0);
   __decorate$3([
       r()
-  ], exports.KRScaffold.prototype, "pendingRequests", void 0);
+  ], exports.Scaffold.prototype, "pendingRequests", void 0);
   __decorate$3([
       n({ type: String })
-  ], exports.KRScaffold.prototype, "logo", void 0);
+  ], exports.Scaffold.prototype, "logo", void 0);
   __decorate$3([
       n({ type: String })
-  ], exports.KRScaffold.prototype, "title", void 0);
+  ], exports.Scaffold.prototype, "title", void 0);
   __decorate$3([
       n({ type: String, reflect: true })
-  ], exports.KRScaffold.prototype, "scheme", void 0);
+  ], exports.Scaffold.prototype, "scheme", void 0);
   __decorate$3([
       n({ type: Array })
-  ], exports.KRScaffold.prototype, "nav", void 0);
+  ], exports.Scaffold.prototype, "nav", void 0);
   __decorate$3([
       n({ type: Boolean, attribute: 'nav-icons-displayed', reflect: true })
-  ], exports.KRScaffold.prototype, "navIconsDisplayed", void 0);
+  ], exports.Scaffold.prototype, "navIconsDisplayed", void 0);
   __decorate$3([
       n({ type: Boolean, attribute: 'nav-expanded' })
-  ], exports.KRScaffold.prototype, "navExpanded", void 0);
+  ], exports.Scaffold.prototype, "navExpanded", void 0);
   __decorate$3([
       n({ type: Object })
-  ], exports.KRScaffold.prototype, "user", void 0);
+  ], exports.Scaffold.prototype, "user", void 0);
   __decorate$3([
       n({ type: Boolean })
-  ], exports.KRScaffold.prototype, "subbar", void 0);
+  ], exports.Scaffold.prototype, "subbar", void 0);
   __decorate$3([
       n({ type: Array })
-  ], exports.KRScaffold.prototype, "breadcrumbs", void 0);
-  exports.KRScaffold = __decorate$3([
+  ], exports.Scaffold.prototype, "breadcrumbs", void 0);
+  exports.Scaffold = __decorate$3([
       t$1('kr-scaffold')
-  ], exports.KRScaffold);
+  ], exports.Scaffold);
 
   var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -3084,7 +3021,7 @@
    * @property {KRScreenNavItem[]} navItems - Navigation items as JSON array
    * @property {string} activeId - Currently active item ID
    */
-  exports.KRScreenNav = class KRScreenNav extends i$1 {
+  exports.ScreenNav = class KRScreenNav extends i$1 {
       constructor() {
           super(...arguments);
           /**
@@ -3196,7 +3133,7 @@
     `;
       }
   };
-  exports.KRScreenNav.styles = i$4 `
+  exports.ScreenNav.styles = i$4 `
     :host {
       display: flex;
       height: 100%;
@@ -3325,22 +3262,22 @@
   `;
   __decorate$2([
       n({ type: String })
-  ], exports.KRScreenNav.prototype, "title", void 0);
+  ], exports.ScreenNav.prototype, "title", void 0);
   __decorate$2([
       n({ type: String })
-  ], exports.KRScreenNav.prototype, "subtitle", void 0);
+  ], exports.ScreenNav.prototype, "subtitle", void 0);
   __decorate$2([
       n({ type: String })
-  ], exports.KRScreenNav.prototype, "backUrl", void 0);
+  ], exports.ScreenNav.prototype, "backUrl", void 0);
   __decorate$2([
       n({ type: Array })
-  ], exports.KRScreenNav.prototype, "navItems", void 0);
+  ], exports.ScreenNav.prototype, "navItems", void 0);
   __decorate$2([
       n({ type: String })
-  ], exports.KRScreenNav.prototype, "activeId", void 0);
-  exports.KRScreenNav = __decorate$2([
+  ], exports.ScreenNav.prototype, "activeId", void 0);
+  exports.ScreenNav = __decorate$2([
       t$1('kr-screen-nav')
-  ], exports.KRScreenNav);
+  ], exports.ScreenNav);
 
   var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -3367,7 +3304,7 @@
    *
    * @property {string} title - Section title (e.g., "Company Details")
    */
-  exports.KRScreenDetail = class KRScreenDetail extends i$1 {
+  exports.ScreenDetail = class KRScreenDetail extends i$1 {
       constructor() {
           super(...arguments);
           /**
@@ -3391,7 +3328,7 @@
     `;
       }
   };
-  exports.KRScreenDetail.styles = i$4 `
+  exports.ScreenDetail.styles = i$4 `
     :host {
       display: flex;
       flex-direction: column;
@@ -3438,10 +3375,10 @@
   `;
   __decorate$1([
       n({ type: String })
-  ], exports.KRScreenDetail.prototype, "title", void 0);
-  exports.KRScreenDetail = __decorate$1([
+  ], exports.ScreenDetail.prototype, "title", void 0);
+  exports.ScreenDetail = __decorate$1([
       t$1('kr-screen-detail')
-  ], exports.KRScreenDetail);
+  ], exports.ScreenDetail);
 
   var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -3454,7 +3391,7 @@
    *
    * @slot - Content to display in the subbar (right side)
    */
-  exports.KRSubbar = class KRSubbar extends i$1 {
+  exports.Subbar = class KRSubbar extends i$1 {
       constructor() {
           super(...arguments);
           /**
@@ -3496,7 +3433,7 @@
     `;
       }
   };
-  exports.KRSubbar.styles = i$4 `
+  exports.Subbar.styles = i$4 `
     :host {
       display: flex;
       flex-direction: row;
@@ -3564,13 +3501,13 @@
   `;
   __decorate([
       n({ type: Array })
-  ], exports.KRSubbar.prototype, "breadcrumbs", void 0);
+  ], exports.Subbar.prototype, "breadcrumbs", void 0);
   __decorate([
       n({ type: Boolean })
-  ], exports.KRSubbar.prototype, "menu", void 0);
-  exports.KRSubbar = __decorate([
+  ], exports.Subbar.prototype, "menu", void 0);
+  exports.Subbar = __decorate([
       t$1('kr-subbar')
-  ], exports.KRSubbar);
+  ], exports.Subbar);
 
 }));
 (function(e){Object.keys(e).forEach(function(k){if(k.startsWith('KR')&&typeof e[k]==='function'){e[k.slice(2)]=e[k];delete e[k];}});})(krApp);