@record-evolution/widget-navbutton 1.0.7 → 1.0.9

package/dist/widget-navbutton.js

@@ -1,16 +1,16 @@
-import { css as c, LitElement as d, html as m } from "lit";
-import { property as h, state as p, customElement as u } from "lit/decorators.js";
+import { css as c, LitElement as h, html as u } from "lit";
+import { property as p, state as m, customElement as d } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/button/filled-button.js";
 import "@material/web/ripple/ripple.js";
-var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (t, e, o, l) => {
-  for (var i = l > 1 ? void 0 : l ? b(e, o) : e, n = t.length - 1, a; n >= 0; n--)
-    (a = t[n]) && (i = (l ? a(e, o, i) : a(i)) || i);
-  return l && i && f(e, o, i), i;
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (t, e, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? b(e, o) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (i = (r ? a(e, o, i) : a(i)) || i);
+  return r && i && f(e, o, i), i;
 };
-let r = class extends d {
+let l = class extends h {
   constructor() {
-    super(...arguments), this.version = "1.0.7";
+    super(...arguments), this.version = "1.0.9";
   }
   update(t) {
     t.has("theme") && this.registerTheme(this.theme), super.update(t);
@@ -22,31 +22,44 @@ let r = class extends d {
     const e = getComputedStyle(this).getPropertyValue("--re-text-color").trim(), o = getComputedStyle(this).getPropertyValue("--re-tile-background-color").trim();
     this.themeBgColor = o || this.theme?.theme_object?.backgroundColor, this.themeTitleColor = e || this.theme?.theme_object?.title?.textStyle?.color;
   }
-  handleNavItemClick(t) {
-    let e;
-    this.inputData?.route === "" ? (e = "/" + this.route?.split("/").filter(Boolean).slice(0, -1).join("/") + "/" || "/", e = e === "//" ? "/" : e) : e = this.inputData?.route || "/", console.log("Navigating to:", t, this.route, { goto: e });
-    const o = new CustomEvent("nav-submit", {
-      detail: { path: e },
+  handleNavItemClick() {
+    let t;
+    this.inputData?.route === "" ? (t = "/" + this.route?.split("/").filter(Boolean).slice(0, -1).join("/") + "/" || "/", t = t === "//" ? "/" : t) : t = this.resolveRoute({
+      route: this.inputData?.route,
+      variables: this.inputData?.variables
+    }) || "/";
+    const e = new CustomEvent("nav-submit", {
+      detail: { path: t },
       bubbles: !0,
       composed: !0
     });
-    this.dispatchEvent(o);
+    this.dispatchEvent(e);
   }
-  addSlashes(t) {
-    return !t.route?.endsWith("/") && t.trailingSlash && (t.route += "/"), !t.route?.startsWith("/") && t.leadingSlash && (t.route = "/" + t.route), t.route;
+  resolveRoute(t) {
+    let e = String(t?.route ?? "");
+    if (t?.variables)
+      for (const o of t.variables)
+        o.label && (e = e.split(`{{${o.label}}}`).join(encodeURIComponent(String(o.value ?? ""))));
+    if (e.includes("*")) {
+      const o = (this.route || "").split("/").filter(Boolean), r = e.split("/").filter(Boolean);
+      for (let i = 0; i < r.length; i++)
+        r[i] === "*" && (r[i] = o[i] ?? "");
+      e = (e.startsWith("/") ? "/" : "") + r.filter(Boolean).join("/");
+    }
+    return e;
   }
   render() {
-    const t = this.inputData?.style?.fontSize ?? 16, e = (this.inputData?.style?.fontSize ?? 16) * 1.5, o = this.inputData?.style?.color || this.themeTitleColor || "black", l = this.inputData?.style?.backgroundColor || this.themeBgColor || "white";
-    return m`
+    const t = this.inputData?.style?.fontSize ?? 16, e = (this.inputData?.style?.fontSize ?? 16) * 1.5, o = this.inputData?.style?.color || this.themeTitleColor || "black", r = this.inputData?.style?.backgroundColor || this.themeBgColor || "white";
+    return u`
             <md-filled-button
                 style="font-size: ${t}px; 
                 --md-filled-button-label-text-color: ${o}; 
                 --md-filled-button-hover-label-text-color: ${o};
                 --md-filled-button-pressed-label-text-color: ${o};
                 --md-filled-button-focus-label-text-color: ${o};
-                --md-filled-button-container-color: ${l};
+                --md-filled-button-container-color: ${r};
                 "
-                @click=${() => this.handleNavItemClick(this.addSlashes(this.inputData))}
+                @click=${() => this.handleNavItemClick()}
             >
                 ${this.inputData?.title}
                 <md-ripple></md-ripple>
@@ -57,7 +70,7 @@ let r = class extends d {
         `;
   }
 };
-r.styles = c`
+l.styles = c`
         :host {
             display: flex;
             align-items: center;
@@ -83,24 +96,24 @@ r.styles = c`
         }
     `;
 s([
-  h({ type: Object })
-], r.prototype, "inputData", 2);
+  p({ type: Object })
+], l.prototype, "inputData", 2);
 s([
-  h({ type: Object })
-], r.prototype, "theme", 2);
+  p({ type: Object })
+], l.prototype, "theme", 2);
 s([
-  h({ type: String })
-], r.prototype, "route", 2);
+  p({ type: String })
+], l.prototype, "route", 2);
 s([
-  p()
-], r.prototype, "themeBgColor", 2);
+  m()
+], l.prototype, "themeBgColor", 2);
 s([
-  p()
-], r.prototype, "themeTitleColor", 2);
-r = s([
-  u("widget-navbutton-1.0.7")
-], r);
+  m()
+], l.prototype, "themeTitleColor", 2);
+l = s([
+  d("widget-navbutton-1.0.9")
+], l);
 export {
-  r as WidgetNavbutton
+  l as WidgetNavbutton
 };
 //# sourceMappingURL=widget-navbutton.js.map

package/dist/widget-navbutton.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget-navbutton.js","sources":["../src/widget-navbutton.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { InputData } from './definition-schema'\n\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/ripple/ripple.js'\n\ntype Theme = {\n    theme_name: string\n    theme_object: any\n}\n\n@customElement('widget-navbutton-versionplaceholder')\nexport class WidgetNavbutton extends LitElement {\n    @property({ type: Object }) inputData?: InputData\n    @property({ type: Object }) theme?: Theme\n    @property({ type: String }) route?: string\n\n    @state() private themeBgColor?: string\n    @state() private themeTitleColor?: string\n\n    version: string = 'versionplaceholder'\n\n    update(changedProperties: Map<string, any>) {\n        if (changedProperties.has('theme')) {\n            this.registerTheme(this.theme)\n        }\n\n        super.update(changedProperties)\n    }\n\n    protected firstUpdated(_changedProperties: PropertyValues): void {\n        this.registerTheme(this.theme)\n    }\n\n    registerTheme(theme?: Theme) {\n        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()\n        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()\n        this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor\n        this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color\n    }\n\n    handleNavItemClick(route?: string) {\n        let goto: string\n        if (this.inputData?.route === '') {\n            goto = '/' + this.route?.split('/').filter(Boolean).slice(0, -1).join('/') + '/' || '/'\n            goto = goto === '//' ? '/' : goto\n        } else {\n            goto = this.inputData?.route || '/'\n        }\n        console.log('Navigating to:', route, this.route, { goto })\n        const event = new CustomEvent('nav-submit', {\n            detail: { path: goto },\n            bubbles: true,\n            composed: true\n        })\n        this.dispatchEvent(event)\n    }\n\n    addSlashes(item?: any): string | undefined {\n        if (!item.route?.endsWith('/') && item.trailingSlash) {\n            item.route += '/'\n        }\n        if (!item.route?.startsWith('/') && item.leadingSlash) {\n            item.route = '/' + item.route\n        }\n        return item.route\n    }\n\n    static styles = css`\n        :host {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 100%;\n            height: 100%;\n            font-family: sans-serif;\n            box-sizing: border-box;\n            margin: auto;\n            padding: 2cqh 2cqw;\n        }\n\n        md-icon {\n            font-family: 'Material Symbols Outlined';\n        }\n        md-filled-button {\n            flex: 1;\n            --md-filled-button-container-shape: 4px;\n            --md-filled-button-container-shadow-color: none;\n            --md-sys-color-primary: #006a6a;\n            --md-ripple-hover-color: var(--md-sys-color-primary);\n            --md-ripple-pressed-color: var(--md-sys-color-primary);\n        }\n    `\n\n    render() {\n        const fontSize = this.inputData?.style?.fontSize ?? 16\n        const iconFontSize = (this.inputData?.style?.fontSize ?? 16) * 1.5\n        const fontColor = this.inputData?.style?.color || this.themeTitleColor || 'black'\n        const bgColor = this.inputData?.style?.backgroundColor || this.themeBgColor || 'white'\n        const gap = fontSize * 0.4\n        return html`\n            <md-filled-button\n                style=\"font-size: ${fontSize}px; \n                --md-filled-button-label-text-color: ${fontColor}; \n                --md-filled-button-hover-label-text-color: ${fontColor};\n                --md-filled-button-pressed-label-text-color: ${fontColor};\n                --md-filled-button-focus-label-text-color: ${fontColor};\n                --md-filled-button-container-color: ${bgColor};\n                \"\n                @click=${() => this.handleNavItemClick(this.addSlashes(this.inputData))}\n            >\n                ${this.inputData?.title}\n                <md-ripple></md-ripple>\n                <md-icon slot=\"icon\" style=\"font-size: ${iconFontSize}px; color: ${fontColor}\"\n                    >${this.inputData?.iconName}</md-icon\n                >\n            </md-filled-button>\n        `\n    }\n}\n"],"names":["WidgetNavbutton","LitElement","changedProperties","_changedProperties","theme","cssTextColor","cssBgColor","route","goto","event","item","fontSize","iconFontSize","fontColor","bgColor","html","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"widget-navbutton.js","sources":["../src/widget-navbutton.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { InputData } from './definition-schema'\n\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/ripple/ripple.js'\n\ntype Theme = {\n    theme_name: string\n    theme_object: any\n}\n\n@customElement('widget-navbutton-versionplaceholder')\nexport class WidgetNavbutton extends LitElement {\n    @property({ type: Object }) inputData?: InputData\n    @property({ type: Object }) theme?: Theme\n    @property({ type: String }) route?: string\n\n    @state() private themeBgColor?: string\n    @state() private themeTitleColor?: string\n\n    version: string = 'versionplaceholder'\n\n    update(changedProperties: Map<string, any>) {\n        if (changedProperties.has('theme')) {\n            this.registerTheme(this.theme)\n        }\n\n        super.update(changedProperties)\n    }\n\n    protected firstUpdated(_changedProperties: PropertyValues): void {\n        this.registerTheme(this.theme)\n    }\n\n    registerTheme(theme?: Theme) {\n        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()\n        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()\n        this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor\n        this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color\n    }\n\n    handleNavItemClick() {\n        let goto: string\n        if (this.inputData?.route === '') {\n            goto = '/' + this.route?.split('/').filter(Boolean).slice(0, -1).join('/') + '/' || '/'\n            goto = goto === '//' ? '/' : goto\n        } else {\n            goto =\n                this.resolveRoute({\n                    route: this.inputData?.route,\n                    variables: this.inputData?.variables\n                }) || '/'\n        }\n        const event = new CustomEvent('nav-submit', {\n            detail: { path: goto },\n            bubbles: true,\n            composed: true\n        })\n        this.dispatchEvent(event)\n    }\n\n    resolveRoute(item?: any): string | undefined {\n        let route = String(item?.route ?? '')\n        if (item?.variables) {\n            for (const variable of item.variables) {\n                if (variable.label) {\n                    route = route\n                        .split(`{{${variable.label}}}`)\n                        .join(encodeURIComponent(String(variable.value ?? '')))\n                }\n            }\n        }\n        if (route.includes('*')) {\n            const currentSegments = (this.route || '').split('/').filter(Boolean)\n            const routeSegments = route.split('/').filter(Boolean)\n            for (let i = 0; i < routeSegments.length; i++) {\n                if (routeSegments[i] === '*') {\n                    routeSegments[i] = currentSegments[i] ?? ''\n                }\n            }\n            route = (route.startsWith('/') ? '/' : '') + routeSegments.filter(Boolean).join('/')\n        }\n        return route\n    }\n\n    static styles = css`\n        :host {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 100%;\n            height: 100%;\n            font-family: sans-serif;\n            box-sizing: border-box;\n            margin: auto;\n            padding: 2cqh 2cqw;\n        }\n\n        md-icon {\n            font-family: 'Material Symbols Outlined';\n        }\n        md-filled-button {\n            flex: 1;\n            --md-filled-button-container-shape: 4px;\n            --md-filled-button-container-shadow-color: none;\n            --md-sys-color-primary: #006a6a;\n            --md-ripple-hover-color: var(--md-sys-color-primary);\n            --md-ripple-pressed-color: var(--md-sys-color-primary);\n        }\n    `\n\n    render() {\n        const fontSize = this.inputData?.style?.fontSize ?? 16\n        const iconFontSize = (this.inputData?.style?.fontSize ?? 16) * 1.5\n        const fontColor = this.inputData?.style?.color || this.themeTitleColor || 'black'\n        const bgColor = this.inputData?.style?.backgroundColor || this.themeBgColor || 'white'\n        const gap = fontSize * 0.4\n        return html`\n            <md-filled-button\n                style=\"font-size: ${fontSize}px; \n                --md-filled-button-label-text-color: ${fontColor}; \n                --md-filled-button-hover-label-text-color: ${fontColor};\n                --md-filled-button-pressed-label-text-color: ${fontColor};\n                --md-filled-button-focus-label-text-color: ${fontColor};\n                --md-filled-button-container-color: ${bgColor};\n                \"\n                @click=${() => this.handleNavItemClick()}\n            >\n                ${this.inputData?.title}\n                <md-ripple></md-ripple>\n                <md-icon slot=\"icon\" style=\"font-size: ${iconFontSize}px; color: ${fontColor}\"\n                    >${this.inputData?.iconName}</md-icon\n                >\n            </md-filled-button>\n        `\n    }\n}\n"],"names":["WidgetNavbutton","LitElement","changedProperties","_changedProperties","theme","cssTextColor","cssBgColor","goto","event","item","route","variable","currentSegments","routeSegments","fontSize","iconFontSize","fontColor","bgColor","html","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/package.json

@@ -3,7 +3,7 @@
     "description": "Webcomponent widget-navbutton following open-wc recommendations",
     "license": "MIT",
     "author": "widget-navbutton",
-    "version": "1.0.7",
+    "version": "1.0.9",
     "engines": {
         "node": ">=24.9.0",
         "npm": ">=10.0.2"
@@ -14,11 +14,12 @@
     "files": [
         "dist",
         "src",
-        "thumbnail.png"
+        "thumbnail.png",
+        "thumbnail.webp"
     ],
     "scripts": {
         "analyze": "cem analyze --litelement",
-        "start": "vite",
+        "start": "vite build --watch & vite",
         "build": "vite build",
         "watch": "vite build --watch",
         "link": "npm run build && npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-navbutton",

package/src/definition-schema.d.ts

@@ -14,17 +14,25 @@ export type Label = string;
  */
 export type IconName = string;
 /**
- * The destination path when the button is clicked. Leave blank to perform automatic browser back navigation. Use relative paths (e.g., 'details', '../overview') or enable leadingSlash for absolute paths from root.
+ * The destination path when the button is clicked. Leave blank to perform automatic browser back navigation. Supports two dynamic substitution mechanisms: (1) Variable placeholders using double curly braces — define variables in the 'Variables' array below and reference them as {{variableName}} in the route string (e.g., '/device/{{deviceId}}/details' where a variable with label 'deviceId' provides the value). (2) Wildcard segments using a single asterisk '*' as a full path segment — each '*' is replaced at runtime by the segment at the same position from the current browser route (e.g., '/* /settings' navigates to the settings page while preserving the first segment of the current URL). The '*' must be the entire segment to be substituted; partial wildcards like 'test*' are treated as literal text. Routes starting with '/' are absolute; routes without a leading slash are relative to the current location.
  */
 export type Navigation = string;
 /**
- * When enabled, prepends '/' to the navigation route making it absolute from the root. When disabled, routes are relative to the current URL location.
+ * The variable name used in the route string. Reference this in your route using the {{label}} syntax. Use descriptive names like 'temperature', 'status', 'deviceName'.
  */
-export type AddLeadingSlash = boolean;
+export type Label1 = string;
 /**
- * When enabled, appends '/' to the end of the navigation route. Required by some routing configurations for proper page matching.
+ * The replacement text that will appear in place of {{label}} in the rendered output. Can be a static value or bound to a data column for dynamic updates.
  */
-export type AddTraillingSlash = boolean;
+export type Value = string;
+/**
+ * Array of variable definitions for dynamic route segment substitution. Each variable has a label (used in the route string as {{label}}) and a value (the replacement text). Values can be static or bound to data columns for real-time updates.
+ */
+export type NavigationVariables = {
+    label?: Label1;
+    value?: Value;
+    [k: string]: unknown;
+}[];
 /**
  * Font size in pixels for the button label text.
  */
@@ -37,8 +45,7 @@ export interface InputData {
     title?: Label;
     iconName?: IconName;
     route?: Navigation;
-    leadingSlash?: AddLeadingSlash;
-    trailingSlash?: AddTraillingSlash;
+    variables?: NavigationVariables;
     style?: ButtonStyle;
     [k: string]: unknown;
 }

package/src/definition-schema.json

@@ -19,22 +19,32 @@
         "route": {
             "title": "Navigation",
             "order": 3,
-            "description": "The destination path when the button is clicked. Leave blank to perform automatic browser back navigation. Use relative paths (e.g., 'details', '../overview') or enable leadingSlash for absolute paths from root.",
+            "description": "The destination path when the button is clicked. Leave blank to perform automatic browser back navigation. Supports two dynamic substitution mechanisms: (1) Variable placeholders using double curly braces — define variables in the 'Variables' array below and reference them as {{variableName}} in the route string (e.g., '/device/{{deviceId}}/details' where a variable with label 'deviceId' provides the value). (2) Wildcard segments using a single asterisk '*' as a full path segment — each '*' is replaced at runtime by the segment at the same position from the current browser route (e.g., '/*/settings' navigates to the settings page while preserving the first segment of the current URL). The '*' must be the entire segment to be substituted; partial wildcards like 'test*' are treated as literal text. Routes starting with '/' are absolute; routes without a leading slash are relative to the current location.",
             "type": "string"
         },
-        "leadingSlash": {
-            "title": "Add Leading Slash",
-            "order": 4,
-            "description": "When enabled, prepends '/' to the navigation route making it absolute from the root. When disabled, routes are relative to the current URL location.",
-            "dataDrivenDisabled": true,
-            "type": "boolean"
-        },
-        "trailingSlash": {
-            "title": "Add Trailling Slash",
-            "order": 5,
-            "description": "When enabled, appends '/' to the end of the navigation route. Required by some routing configurations for proper page matching.",
+        "variables": {
+            "title": "Navigation Variables",
+            "description": "Array of variable definitions for dynamic route segment substitution. Each variable has a label (used in the route string as {{label}}) and a value (the replacement text). Values can be static or bound to data columns for real-time updates.",
+            "type": "array",
             "dataDrivenDisabled": true,
-            "type": "boolean"
+            "order": 4,
+            "items": {
+                "type": "object",
+                "properties": {
+                    "label": {
+                        "title": "Label",
+                        "description": "The variable name used in the route string. Reference this in your route using the {{label}} syntax. Use descriptive names like 'temperature', 'status', 'deviceName'.",
+                        "type": "string",
+                        "order": 1
+                    },
+                    "value": {
+                        "title": "Value",
+                        "description": "The replacement text that will appear in place of {{label}} in the rendered output. Can be a static value or bound to a data column for dynamic updates.",
+                        "type": "string",
+                        "order": 2
+                    }
+                }
+            }
         },
         "style": {
             "title": "Button Style",

package/src/widget-navbutton.ts

@@ -41,15 +41,18 @@ export class WidgetNavbutton extends LitElement {
         this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color
     }
 
-    handleNavItemClick(route?: string) {
+    handleNavItemClick() {
         let goto: string
         if (this.inputData?.route === '') {
             goto = '/' + this.route?.split('/').filter(Boolean).slice(0, -1).join('/') + '/' || '/'
             goto = goto === '//' ? '/' : goto
         } else {
-            goto = this.inputData?.route || '/'
+            goto =
+                this.resolveRoute({
+                    route: this.inputData?.route,
+                    variables: this.inputData?.variables
+                }) || '/'
         }
-        console.log('Navigating to:', route, this.route, { goto })
         const event = new CustomEvent('nav-submit', {
             detail: { path: goto },
             bubbles: true,
@@ -58,14 +61,28 @@ export class WidgetNavbutton extends LitElement {
         this.dispatchEvent(event)
     }
 
-    addSlashes(item?: any): string | undefined {
-        if (!item.route?.endsWith('/') && item.trailingSlash) {
-            item.route += '/'
+    resolveRoute(item?: any): string | undefined {
+        let route = String(item?.route ?? '')
+        if (item?.variables) {
+            for (const variable of item.variables) {
+                if (variable.label) {
+                    route = route
+                        .split(`{{${variable.label}}}`)
+                        .join(encodeURIComponent(String(variable.value ?? '')))
+                }
+            }
         }
-        if (!item.route?.startsWith('/') && item.leadingSlash) {
-            item.route = '/' + item.route
+        if (route.includes('*')) {
+            const currentSegments = (this.route || '').split('/').filter(Boolean)
+            const routeSegments = route.split('/').filter(Boolean)
+            for (let i = 0; i < routeSegments.length; i++) {
+                if (routeSegments[i] === '*') {
+                    routeSegments[i] = currentSegments[i] ?? ''
+                }
+            }
+            route = (route.startsWith('/') ? '/' : '') + routeSegments.filter(Boolean).join('/')
         }
-        return item.route
+        return route
     }
 
     static styles = css`
@@ -109,7 +126,7 @@ export class WidgetNavbutton extends LitElement {
                 --md-filled-button-focus-label-text-color: ${fontColor};
                 --md-filled-button-container-color: ${bgColor};
                 "
-                @click=${() => this.handleNavItemClick(this.addSlashes(this.inputData))}
+                @click=${() => this.handleNavItemClick()}
             >
                 ${this.inputData?.title}
                 <md-ripple></md-ripple>