@kodaris/krubble-app-components 1.0.49 → 1.0.51

package/dist/krubble-app.umd.js

@@ -68,7 +68,7 @@
    * SPDX-License-Identifier: BSD-3-Clause
    */const e=e$2(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
 
-  var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$5 = (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;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -264,23 +264,23 @@
       background: #d4f472;
     }
   `;
-  __decorate$4([
+  __decorate$5([
       r()
   ], KRNavItemEdit.prototype, "label", void 0);
-  __decorate$4([
+  __decorate$5([
       r()
   ], KRNavItemEdit.prototype, "icon", void 0);
-  __decorate$4([
+  __decorate$5([
       r()
   ], KRNavItemEdit.prototype, "url", void 0);
-  __decorate$4([
+  __decorate$5([
       r()
   ], KRNavItemEdit.prototype, "active", void 0);
-  KRNavItemEdit = __decorate$4([
+  KRNavItemEdit = __decorate$5([
       t$1('kr-nav-item-edit')
   ], KRNavItemEdit);
 
-  var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  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;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2123,77 +2123,77 @@
       }
     }
   `;
-  __decorate$3([
+  __decorate$4([
       r()
   ], exports.Scaffold.prototype, "navItemsExpanded", void 0);
-  __decorate$3([
+  __decorate$4([
       r()
   ], exports.Scaffold.prototype, "navQuery", void 0);
-  __decorate$3([
+  __decorate$4([
       r()
   ], exports.Scaffold.prototype, "activeNavItemId", void 0);
-  __decorate$3([
+  __decorate$4([
       r()
   ], exports.Scaffold.prototype, "isNavScrolled", void 0);
-  __decorate$3([
+  __decorate$4([
       r()
   ], exports.Scaffold.prototype, "isNavOpened", void 0);
-  __decorate$3([
+  __decorate$4([
       r()
   ], exports.Scaffold.prototype, "isEditing", void 0);
-  __decorate$3([
+  __decorate$4([
       r()
   ], exports.Scaffold.prototype, "isUserMenuOpen", void 0);
-  __decorate$3([
+  __decorate$4([
       r()
   ], exports.Scaffold.prototype, "pref", void 0);
-  __decorate$3([
+  __decorate$4([
       r()
   ], exports.Scaffold.prototype, "draggedNavItemId", void 0);
-  __decorate$3([
+  __decorate$4([
       r()
   ], exports.Scaffold.prototype, "navItemDropTargetId", void 0);
-  __decorate$3([
+  __decorate$4([
       r()
   ], exports.Scaffold.prototype, "navItemDropPosition", void 0);
-  __decorate$3([
+  __decorate$4([
       r()
   ], exports.Scaffold.prototype, "pendingRequests", void 0);
-  __decorate$3([
+  __decorate$4([
       n({ type: String })
   ], exports.Scaffold.prototype, "logo", void 0);
-  __decorate$3([
+  __decorate$4([
       n({ type: String })
   ], exports.Scaffold.prototype, "label", void 0);
-  __decorate$3([
+  __decorate$4([
       n({ type: String, attribute: 'home-url' })
   ], exports.Scaffold.prototype, "homeUrl", void 0);
-  __decorate$3([
+  __decorate$4([
       n({ type: String, reflect: true })
   ], exports.Scaffold.prototype, "scheme", void 0);
-  __decorate$3([
+  __decorate$4([
       n({ type: Array })
   ], exports.Scaffold.prototype, "nav", void 0);
-  __decorate$3([
+  __decorate$4([
       n({ type: Boolean, attribute: 'nav-icons-displayed', reflect: true })
   ], exports.Scaffold.prototype, "navIconsDisplayed", void 0);
-  __decorate$3([
+  __decorate$4([
       n({ type: Boolean, attribute: 'nav-expanded' })
   ], exports.Scaffold.prototype, "navExpanded", void 0);
-  __decorate$3([
+  __decorate$4([
       n({ type: Object })
   ], exports.Scaffold.prototype, "user", void 0);
-  __decorate$3([
+  __decorate$4([
       n({ type: Boolean })
   ], exports.Scaffold.prototype, "subbar", void 0);
-  __decorate$3([
+  __decorate$4([
       n({ type: Array })
   ], exports.Scaffold.prototype, "breadcrumbs", void 0);
-  exports.Scaffold = __decorate$3([
+  exports.Scaffold = __decorate$4([
       t$1('kr-scaffold')
   ], exports.Scaffold);
 
-  var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$3 = (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;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2432,23 +2432,23 @@
       overflow-y: auto;
     }
   `;
-  __decorate$2([
+  __decorate$3([
       n({ type: String })
   ], exports.ScreenNav.prototype, "label", void 0);
-  __decorate$2([
+  __decorate$3([
       n({ type: String })
   ], exports.ScreenNav.prototype, "subLabel", void 0);
-  __decorate$2([
+  __decorate$3([
       n({ type: Array })
   ], exports.ScreenNav.prototype, "navItems", void 0);
-  __decorate$2([
+  __decorate$3([
       n({ type: String })
   ], exports.ScreenNav.prototype, "activeId", void 0);
-  exports.ScreenNav = __decorate$2([
+  exports.ScreenNav = __decorate$3([
       t$1('kr-screen-nav')
   ], exports.ScreenNav);
 
-  var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  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;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2542,14 +2542,14 @@
       max-width: 700px;
     }
   `;
-  __decorate$1([
+  __decorate$2([
       n({ type: String })
   ], exports.ScreenDetail.prototype, "title", void 0);
-  exports.ScreenDetail = __decorate$1([
+  exports.ScreenDetail = __decorate$2([
       t$1('kr-screen-detail')
   ], exports.ScreenDetail);
 
-  var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  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;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2722,16 +2722,203 @@
       height: 18px;
     }
   `;
-  __decorate([
+  __decorate$1([
       n({ type: Array })
   ], exports.Subbar.prototype, "breadcrumbs", void 0);
-  __decorate([
+  __decorate$1([
       n({ type: Boolean })
   ], exports.Subbar.prototype, "menu", void 0);
-  exports.Subbar = __decorate([
+  exports.Subbar = __decorate$1([
       t$1('kr-subbar')
   ], exports.Subbar);
 
+  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;
+      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  class KRRouter {
+      static configure(config) {
+          KRRouter.base = config.base;
+          KRRouter.routes = config.routes;
+          // Intercept <a> clicks for client-side navigation
+          window.addEventListener('click', (e) => {
+              const anchor = e.composedPath().find(el => el instanceof HTMLAnchorElement);
+              if (!anchor) {
+                  return;
+              }
+              if (anchor.origin !== window.location.origin) {
+                  return;
+              }
+              if (!anchor.pathname.startsWith(KRRouter.base)) {
+                  return;
+              }
+              e.preventDefault();
+              KRRouter.navigate(anchor.pathname);
+          });
+      }
+      static navigate(path) {
+          let fullPath = path;
+          if (!path.startsWith('/')) {
+              fullPath = KRRouter.base + '/' + path;
+          }
+          window.history.pushState({}, '', fullPath);
+          window.dispatchEvent(new PopStateEvent('popstate'));
+      }
+      static getParams() {
+          const matched = KRRouter.matchAll();
+          const params = {};
+          for (const match of matched) {
+              for (const key in match.params) {
+                  params[key] = decodeURIComponent(match.params[key]);
+              }
+          }
+          return params;
+      }
+      static outlet(level) {
+          const matched = KRRouter.matchAll();
+          if (level >= matched.length) {
+              return null;
+          }
+          const match = matched[level];
+          const tag = match.route.component;
+          const cached = KRRouter.elementCache.get(level + ':' + tag);
+          if (cached) {
+              return cached;
+          }
+          // Clear old cache entry for this level
+          for (const key of KRRouter.elementCache.keys()) {
+              if (key.startsWith(level + ':')) {
+                  KRRouter.elementCache.delete(key);
+              }
+          }
+          const el = document.createElement(tag);
+          KRRouter.elementCache.set(level + ':' + tag, el);
+          return el;
+      }
+      static matchAll() {
+          const path = window.location.pathname;
+          let relative = path;
+          if (path.startsWith(KRRouter.base)) {
+              relative = path.slice(KRRouter.base.length);
+          }
+          const segments = relative.split('/').filter(s => s);
+          return KRRouter.matchRoutes(KRRouter.routes, segments);
+      }
+      static matchRoutes(routes, segments) {
+          for (const route of routes) {
+              const routeSegments = route.path.split('/').filter(s => s);
+              if (routeSegments.length === 0 && segments.length === 0) {
+                  return [{ route, params: {} }];
+              }
+              if (routeSegments.length === 0) {
+                  continue;
+              }
+              if (segments.length < routeSegments.length) {
+                  continue;
+              }
+              const params = {};
+              let matched = true;
+              for (let i = 0; i < routeSegments.length; i++) {
+                  if (routeSegments[i].startsWith(':')) {
+                      params[routeSegments[i].slice(1)] = segments[i];
+                  }
+                  else if (routeSegments[i] !== segments[i]) {
+                      matched = false;
+                      break;
+                  }
+              }
+              if (!matched) {
+                  continue;
+              }
+              const remaining = segments.slice(routeSegments.length);
+              // If there are remaining segments but no children, this route doesn't fully match — try next route
+              if (remaining.length > 0 && !route.children) {
+                  continue;
+              }
+              const result = [{ route, params }];
+              if (route.children && remaining.length > 0) {
+                  const childMatches = KRRouter.matchRoutes(route.children, remaining);
+                  if (childMatches.length > 0) {
+                      result.push(...childMatches);
+                      return result;
+                  }
+              }
+              // No remaining segments + default child — redirect
+              if (route.children && remaining.length === 0 && route.default) {
+                  window.history.replaceState({}, '', window.location.pathname + '/' + route.default);
+                  const childMatches = KRRouter.matchRoutes(route.children, [route.default]);
+                  if (childMatches.length > 0) {
+                      result.push(...childMatches);
+                      return result;
+                  }
+              }
+              return result;
+          }
+          return [];
+      }
+  }
+  KRRouter.base = '';
+  KRRouter.routes = [];
+  KRRouter.elementCache = new Map();
+  exports.RouterOutlet = class KRRouterOutlet extends i$1 {
+      constructor() {
+          super(...arguments);
+          this.level = -1;
+          this.handlePopState = () => {
+              this.requestUpdate();
+          };
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          this.level = this.detectLevel();
+          window.addEventListener('popstate', this.handlePopState);
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          window.removeEventListener('popstate', this.handlePopState);
+      }
+      detectLevel() {
+          let level = 0;
+          let node = this;
+          while (node) {
+              if (node instanceof ShadowRoot) {
+                  node = node.host;
+                  continue;
+              }
+              if (node instanceof HTMLElement && node.tagName === 'KR-ROUTER-OUTLET' && node !== this) {
+                  level++;
+              }
+              if (node instanceof HTMLElement) {
+                  node = node.parentNode;
+              }
+              else {
+                  node = null;
+              }
+          }
+          return level;
+      }
+      render() {
+          const el = KRRouter.outlet(this.level);
+          if (!el) {
+              return b ``;
+          }
+          return b `${el}`;
+      }
+  };
+  exports.RouterOutlet.styles = i$4 `
+    :host {
+      display: block;
+      height: 100%;
+    }
+  `;
+  exports.RouterOutlet = __decorate([
+      t$1('kr-router-outlet')
+  ], exports.RouterOutlet);
+
+  exports.Router = KRRouter;
+
 }));
 (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);
 //# sourceMappingURL=krubble-app.umd.js.map