@kodaris/krubble-app-components 1.0.49 → 1.0.50

package/dist/index.d.ts

@@ -2,7 +2,9 @@ export { KRScaffold } from './scaffold.js';
 export { KRScreenNav } from './screen-nav.js';
 export { KRScreenDetail } from './screen-detail.js';
 export { KRSubbar } from './subbar.js';
+export { KRRouter, KRRouterOutlet } from './router.js';
 export type { KRSubbarBreadcrumb } from './subbar.js';
 export type { KRNavItem, KRNavItemFlat, KRUser } from './scaffold.js';
 export type { KRScreenNavItem } from './screen-nav.js';
+export type { KRRoute, KRRouterConfig, KRMatchedRoute } from './router.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtD,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACtE,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtD,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACtE,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,YAAY,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -3,4 +3,5 @@ export { KRScaffold } from './scaffold.js';
 export { KRScreenNav } from './screen-nav.js';
 export { KRScreenDetail } from './screen-detail.js';
 export { KRSubbar } from './subbar.js';
+export { KRRouter, KRRouterOutlet } from './router.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/krubble-app.bundled.js

@@ -65,7 +65,7 @@ const t={ATTRIBUTE:1,CHILD:2},e$2=t=>(...e)=>({_$litDirective$:t,values:e});clas
  * 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;
@@ -261,23 +261,23 @@ KRNavItemEdit.styles = i$4 `
       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;
@@ -2120,77 +2120,77 @@ KRScaffold.styles = i$4 `
       }
     }
   `;
-__decorate$3([
+__decorate$4([
     r()
 ], KRScaffold.prototype, "navItemsExpanded", void 0);
-__decorate$3([
+__decorate$4([
     r()
 ], KRScaffold.prototype, "navQuery", void 0);
-__decorate$3([
+__decorate$4([
     r()
 ], KRScaffold.prototype, "activeNavItemId", void 0);
-__decorate$3([
+__decorate$4([
     r()
 ], KRScaffold.prototype, "isNavScrolled", void 0);
-__decorate$3([
+__decorate$4([
     r()
 ], KRScaffold.prototype, "isNavOpened", void 0);
-__decorate$3([
+__decorate$4([
     r()
 ], KRScaffold.prototype, "isEditing", void 0);
-__decorate$3([
+__decorate$4([
     r()
 ], KRScaffold.prototype, "isUserMenuOpen", void 0);
-__decorate$3([
+__decorate$4([
     r()
 ], KRScaffold.prototype, "pref", void 0);
-__decorate$3([
+__decorate$4([
     r()
 ], KRScaffold.prototype, "draggedNavItemId", void 0);
-__decorate$3([
+__decorate$4([
     r()
 ], KRScaffold.prototype, "navItemDropTargetId", void 0);
-__decorate$3([
+__decorate$4([
     r()
 ], KRScaffold.prototype, "navItemDropPosition", void 0);
-__decorate$3([
+__decorate$4([
     r()
 ], KRScaffold.prototype, "pendingRequests", void 0);
-__decorate$3([
+__decorate$4([
     n({ type: String })
 ], KRScaffold.prototype, "logo", void 0);
-__decorate$3([
+__decorate$4([
     n({ type: String })
 ], KRScaffold.prototype, "label", void 0);
-__decorate$3([
+__decorate$4([
     n({ type: String, attribute: 'home-url' })
 ], KRScaffold.prototype, "homeUrl", void 0);
-__decorate$3([
+__decorate$4([
     n({ type: String, reflect: true })
 ], KRScaffold.prototype, "scheme", void 0);
-__decorate$3([
+__decorate$4([
     n({ type: Array })
 ], KRScaffold.prototype, "nav", void 0);
-__decorate$3([
+__decorate$4([
     n({ type: Boolean, attribute: 'nav-icons-displayed', reflect: true })
 ], KRScaffold.prototype, "navIconsDisplayed", void 0);
-__decorate$3([
+__decorate$4([
     n({ type: Boolean, attribute: 'nav-expanded' })
 ], KRScaffold.prototype, "navExpanded", void 0);
-__decorate$3([
+__decorate$4([
     n({ type: Object })
 ], KRScaffold.prototype, "user", void 0);
-__decorate$3([
+__decorate$4([
     n({ type: Boolean })
 ], KRScaffold.prototype, "subbar", void 0);
-__decorate$3([
+__decorate$4([
     n({ type: Array })
 ], KRScaffold.prototype, "breadcrumbs", void 0);
-KRScaffold = __decorate$3([
+KRScaffold = __decorate$4([
     t$1('kr-scaffold')
 ], KRScaffold);
 
-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;
@@ -2429,23 +2429,23 @@ KRScreenNav.styles = i$4 `
       overflow-y: auto;
     }
   `;
-__decorate$2([
+__decorate$3([
     n({ type: String })
 ], KRScreenNav.prototype, "label", void 0);
-__decorate$2([
+__decorate$3([
     n({ type: String })
 ], KRScreenNav.prototype, "subLabel", void 0);
-__decorate$2([
+__decorate$3([
     n({ type: Array })
 ], KRScreenNav.prototype, "navItems", void 0);
-__decorate$2([
+__decorate$3([
     n({ type: String })
 ], KRScreenNav.prototype, "activeId", void 0);
-KRScreenNav = __decorate$2([
+KRScreenNav = __decorate$3([
     t$1('kr-screen-nav')
 ], KRScreenNav);
 
-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;
@@ -2539,14 +2539,14 @@ KRScreenDetail.styles = i$4 `
       max-width: 700px;
     }
   `;
-__decorate$1([
+__decorate$2([
     n({ type: String })
 ], KRScreenDetail.prototype, "title", void 0);
-KRScreenDetail = __decorate$1([
+KRScreenDetail = __decorate$2([
     t$1('kr-screen-detail')
 ], KRScreenDetail);
 
-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;
@@ -2719,15 +2719,200 @@ KRSubbar.styles = i$4 `
       height: 18px;
     }
   `;
-__decorate([
+__decorate$1([
     n({ type: Array })
 ], KRSubbar.prototype, "breadcrumbs", void 0);
-__decorate([
+__decorate$1([
     n({ type: Boolean })
 ], KRSubbar.prototype, "menu", void 0);
-KRSubbar = __decorate([
+KRSubbar = __decorate$1([
     t$1('kr-subbar')
 ], KRSubbar);
 
-export { KRScaffold, KRScreenDetail, KRScreenNav, KRSubbar };
+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();
+let KRRouterOutlet = 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}`;
+    }
+};
+KRRouterOutlet.styles = i$4 `
+    :host {
+      display: block;
+      height: 100%;
+    }
+  `;
+KRRouterOutlet = __decorate([
+    t$1('kr-router-outlet')
+], KRRouterOutlet);
+
+export { KRRouter, KRRouterOutlet, KRScaffold, KRScreenDetail, KRScreenNav, KRSubbar };
 //# sourceMappingURL=krubble-app.bundled.js.map