npm - @record-evolution/widget-navbutton - Versions diffs - 1.0.10 → 1.0.12 - Mend

@record-evolution/widget-navbutton 1.0.10 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/widget-navbutton.js +18 -18
package/dist/widget-navbutton.js.map +1 -1
package/package.json +6 -2
package/src/default-data.json +1 -2
package/src/definition-schema.d.ts +1 -1
package/src/definition-schema.json +14 -1
package/src/widget-navbutton.ts +4 -6

package/dist/widget-navbutton.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { css as d, LitElement as h, html as m } from "lit";
+import { css as d, LitElement as f, html as h } from "lit";
 import { property as c, state as u, customElement as p } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/button/filled-button.js";
-var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (t, e, o, r) => {
-  for (var l = r > 1 ? void 0 : r ? b(e, o) : e, s = t.length - 1, a; s >= 0; s--)
-    (a = t[s]) && (l = (r ? a(e, o, l) : a(l)) || l);
-  return r && l && f(e, o, l), l;
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (t, e, o, l) => {
+  for (var r = l > 1 ? void 0 : l ? b(e, o) : e, s = t.length - 1, a; s >= 0; s--)
+    (a = t[s]) && (r = (l ? a(e, o, r) : a(r)) || r);
+  return l && r && m(e, o, r), r;
 };
 const g = (t) => {
   if (!t) return !0;
@@ -14,9 +14,9 @@ const g = (t) => {
   const o = e.match(/^(?:rgba|hsla)\([^)]*[,/]\s*([\d.]+%?)\s*\)$/);
   return o ? parseFloat(o[1]) === 0 : /^#[0-9a-f]{8}$/.test(e) ? e.slice(7) === "00" : /^#[0-9a-f]{4}$/.test(e) ? e[4] === "0" : !1;
 };
-let i = class extends h {
+let i = class extends f {
   constructor() {
-    super(...arguments), this.version = "1.0.10";
+    super(...arguments), this.version = "1.0.12";
   }
   update(t) {
     t.has("theme") && this.registerTheme(this.theme), super.update(t);
@@ -25,8 +25,8 @@ let i = class extends h {
     this.registerTheme(this.theme);
   }
   registerTheme(t) {
-    const e = getComputedStyle(this).getPropertyValue("--re-text-color").trim(), o = getComputedStyle(this).getPropertyValue("--re-tile-background-color").trim(), r = t?.theme_object?.backgroundColor;
-    this.themeBgColor = o || (g(r) ? void 0 : r), this.themeTitleColor = e || t?.theme_object?.title?.textStyle?.color;
+    const e = t?.theme_object?.backgroundColor;
+    this.themeBgColor = `var(--re-tile-background-color, ${(g(e) ? void 0 : e) || "transparent"})`, this.themeTitleColor = `var(--re-text-color, ${t?.theme_object?.title?.textStyle?.color || "inherit"})`;
   }
   handleNavItemClick() {
     let t;
@@ -47,21 +47,21 @@ let i = class extends h {
       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 l = 0; l < r.length; l++)
-        r[l] === "*" && (r[l] = o[l] ?? "");
-      e = (e.startsWith("/") ? "/" : "") + r.filter(Boolean).join("/");
+      const o = (this.route || "").split("/").filter(Boolean), l = e.split("/").filter(Boolean);
+      for (let r = 0; r < l.length; r++)
+        l[r] === "*" && (l[r] = o[r] ?? "");
+      e = (e.startsWith("/") ? "/" : "") + l.filter(Boolean).join("/");
     }
     return e;
   }
   render() {
-    const t = this.inputData?.style?.fontSize ?? 16, e = t * 1.5, o = this.inputData?.style?.color || this.themeTitleColor || "black", r = this.inputData?.style?.backgroundColor || this.themeBgColor || "white", l = Math.max(40, Math.round(t * 2.5));
-    return m`
+    const t = this.inputData?.style?.fontSize ?? 16, e = t * 1.5, o = this.inputData?.style?.color || this.themeTitleColor || "black", l = this.inputData?.style?.backgroundColor || this.themeBgColor || "white", r = Math.max(40, Math.round(t * 2.5));
+    return h`
             <md-filled-button
                 style="--btn-fg: ${o};
                 font-size: ${t}px;
                 --md-filled-button-label-text-size: ${t}px;
-                --md-filled-button-container-height: ${l}px;
+                --md-filled-button-container-height: ${r}px;
                 --md-filled-button-icon-size: ${e}px;
                 --md-filled-button-label-text-color: ${o};
                 --md-filled-button-hover-label-text-color: ${o};
@@ -71,7 +71,7 @@ let i = class extends h {
                 --md-filled-button-hover-icon-color: ${o};
                 --md-filled-button-pressed-icon-color: ${o};
                 --md-filled-button-focus-icon-color: ${o};
-                --md-filled-button-container-color: ${r};
+                --md-filled-button-container-color: ${l};
                 "
                 @click=${() => this.handleNavItemClick()}
             >
@@ -127,7 +127,7 @@ n([
   u()
 ], i.prototype, "themeTitleColor", 2);
 i = n([
-  p("widget-navbutton-1.0.10")
+  p("widget-navbutton-1.0.12")
 ], i);
 export {
   i as WidgetNavbutton

package/dist/widget-navbutton.js.map CHANGED Viewed

	@@ -1 +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'\n\ntype Theme = {\n theme_name: string\n theme_object: any\n}\n\n/*\n ECharts themes describe a chart canvas, and most of them set\n * `backgroundColor` to a fully transparent colour (the light theme uses\n * `rgba(0, 0, 0, 0)`). That is a valid, truthy colour string, so using it\n * verbatim as the button background paints nothing at all. Treat any\n * fully transparent theme colour as \"no colour\" so the fallback kicks in.\n /\nconst isTransparent = (color?: string) => {\n if (!color) return true\n const value = color.trim().toLowerCase()\n if (value === 'transparent') return true\n const functional = value.match(/^(?:rgba\|hsla)\$[^)][,/]\\s([\\d.]+%?)\\s\$$/)\n if (functional) return parseFloat(functional[1]) === 0\n // #rrggbbaa / #rgba\n if (/^#[0-9a-f]{8}$/.test(value)) return value.slice(7) === '00'\n if (/^#[0-9a-f]{4}$/.test(value)) return value[4] === '0'\n return false\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 const themeBgColor = theme?.theme_object?.backgroundColor\n this.themeBgColor = cssBgColor \|\| (isTransparent(themeBgColor) ? undefined : themeBgColor)\n this.themeTitleColor = cssTextColor \|\| 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 /* State layers follow the configured label color; a hard-coded\n accent stays teal no matter how the button is styled. /\n --md-ripple-hover-color: var(--btn-fg);\n --md-ripple-pressed-color: var(--btn-fg);\n --md-filled-button-hover-state-layer-color: var(--btn-fg);\n --md-filled-button-pressed-state-layer-color: var(--btn-fg);\n }\n `\n\n render() {\n const fontSize = this.inputData?.style?.fontSize ?? 16\n const iconFontSize = fontSize 1.5\n const fontColor = this.inputData?.style?.color \|\| this.themeTitleColor \|\| 'black'\n const bgColor = this.inputData?.style?.backgroundColor \|\| this.themeBgColor \|\| 'white'\n // The container height is a fixed 40px token, so it has to grow with the\n // label or larger font sizes overflow the button.\n const buttonHeight = Math.max(40, Math.round(fontSize * 2.5))\n return html`\n <md-filled-button\n style=\"--btn-fg: ${fontColor};\n font-size: ${fontSize}px;\n --md-filled-button-label-text-size: ${fontSize}px;\n --md-filled-button-container-height: ${buttonHeight}px;\n --md-filled-button-icon-size: ${iconFontSize}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-icon-color: ${fontColor};\n --md-filled-button-hover-icon-color: ${fontColor};\n --md-filled-button-pressed-icon-color: ${fontColor};\n --md-filled-button-focus-icon-color: ${fontColor};\n --md-filled-button-container-color: ${bgColor};\n \"\n @click=${() => this.handleNavItemClick()}\n >\n ${this.inputData?.title}\n <md-icon slot=\"icon\" style=\"--md-icon-size: ${iconFontSize}px;\"\n >${this.inputData?.iconName}</md-icon\n >\n </md-filled-button>\n `\n }\n}\n"],"names":["isTransparent","color","value","functional","WidgetNavbutton","LitElement","changedProperties","_changedProperties","theme","cssTextColor","cssBgColor","themeBgColor","goto","event","item","route","variable","currentSegments","routeSegments","i","fontSize","iconFontSize","fontColor","bgColor","buttonHeight","html","css","__decorateClass","property","state","customElement"],"mappings":"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"}
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 { NavigationButtonConfiguration } from './definition-schema'\n\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/filled-button.js'\n\ntype Theme = {\n theme_name: string\n theme_object: any\n}\n\n/*\n ECharts themes describe a chart canvas, and most of them set\n * `backgroundColor` to a fully transparent colour (the light theme uses\n * `rgba(0, 0, 0, 0)`). That is a valid, truthy colour string, so using it\n * verbatim as the button background paints nothing at all. Treat any\n * fully transparent theme colour as \"no colour\" so the fallback kicks in.\n /\nconst isTransparent = (color?: string) => {\n if (!color) return true\n const value = color.trim().toLowerCase()\n if (value === 'transparent') return true\n const functional = value.match(/^(?:rgba\|hsla)\$[^)][,/]\\s([\\d.]+%?)\\s\$$/)\n if (functional) return parseFloat(functional[1]) === 0\n // #rrggbbaa / #rgba\n if (/^#[0-9a-f]{8}$/.test(value)) return value.slice(7) === '00'\n if (/^#[0-9a-f]{4}$/.test(value)) return value[4] === '0'\n return false\n}\n\n@customElement('widget-navbutton-versionplaceholder')\nexport class WidgetNavbutton extends LitElement {\n @property({ type: Object }) inputData?: NavigationButtonConfiguration\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 themeBgColor = theme?.theme_object?.backgroundColor\n this.themeBgColor = `var(--re-tile-background-color, ${(isTransparent(themeBgColor) ? undefined : themeBgColor) \|\| 'transparent'})`\n this.themeTitleColor = `var(--re-text-color, ${theme?.theme_object?.title?.textStyle?.color \|\| 'inherit'})`\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 /* State layers follow the configured label color; a hard-coded\n accent stays teal no matter how the button is styled. /\n --md-ripple-hover-color: var(--btn-fg);\n --md-ripple-pressed-color: var(--btn-fg);\n --md-filled-button-hover-state-layer-color: var(--btn-fg);\n --md-filled-button-pressed-state-layer-color: var(--btn-fg);\n }\n `\n\n render() {\n const fontSize = this.inputData?.style?.fontSize ?? 16\n const iconFontSize = fontSize 1.5\n const fontColor = this.inputData?.style?.color \|\| this.themeTitleColor \|\| 'black'\n const bgColor = this.inputData?.style?.backgroundColor \|\| this.themeBgColor \|\| 'white'\n // The container height is a fixed 40px token, so it has to grow with the\n // label or larger font sizes overflow the button.\n const buttonHeight = Math.max(40, Math.round(fontSize * 2.5))\n return html`\n <md-filled-button\n style=\"--btn-fg: ${fontColor};\n font-size: ${fontSize}px;\n --md-filled-button-label-text-size: ${fontSize}px;\n --md-filled-button-container-height: ${buttonHeight}px;\n --md-filled-button-icon-size: ${iconFontSize}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-icon-color: ${fontColor};\n --md-filled-button-hover-icon-color: ${fontColor};\n --md-filled-button-pressed-icon-color: ${fontColor};\n --md-filled-button-focus-icon-color: ${fontColor};\n --md-filled-button-container-color: ${bgColor};\n \"\n @click=${() => this.handleNavItemClick()}\n >\n ${this.inputData?.title}\n <md-icon slot=\"icon\" style=\"--md-icon-size: ${iconFontSize}px;\"\n >${this.inputData?.iconName}</md-icon\n >\n </md-filled-button>\n `\n }\n}\n"],"names":["isTransparent","color","value","functional","WidgetNavbutton","LitElement","changedProperties","_changedProperties","theme","themeBgColor","goto","event","item","route","variable","currentSegments","routeSegments","i","fontSize","iconFontSize","fontColor","bgColor","buttonHeight","html","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
     "description": "Webcomponent widget-navbutton following open-wc recommendations",
     "license": "MIT",
     "author": "widget-navbutton",
-    "version": "1.0.10",
+    "version": "1.0.12",
     "engines": {
         "node": ">=24.9.0",
         "npm": ">=10.0.2"
@@ -25,7 +25,11 @@
         "link": "npm run build && npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-navbutton",
         "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-navbutton && npm i @record-evolution/widget-navbutton",
         "types": "cat src/definition-schema.json | json2ts --style.tabWidth=4 > src/definition-schema.d.ts",
-        "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag && npm run build"
+        "preversion": "sh scripts/release-preflight.sh",
+        "postversion": "git push --follow-tags && sh scripts/release-verify.sh",
+        "release": "npm version patch",
+        "release:minor": "npm version minor",
+        "release:major": "npm version major"
     },
     "dependencies": {
         "lit": "^3.3.3",

package/src/default-data.json CHANGED Viewed

@@ -3,7 +3,6 @@
     "iconName": "arrow_back",
     "route": "",
     "style": {
-        "fontSize": 16,
-        "fontWeight": 400
+        "fontSize": 16
     }
 }

package/src/definition-schema.d.ts CHANGED Viewed

@@ -41,7 +41,7 @@ export type FontSize = number;
 /**
  * A navigation button widget for in-dashboard navigation between pages or sections. Use this widget to create clickable buttons that navigate users to different dashboard views, external pages, or perform back navigation. Supports Material Design icons and customizable styling. Ideal for creating navigation flows, back buttons, call-to-action links, or any clickable element that should route users to another location.
  */
-export interface InputData {
+export interface NavigationButtonConfiguration {
     title?: Label;
     iconName?: IconName;
     route?: Navigation;

package/src/definition-schema.json CHANGED Viewed

@@ -1,6 +1,19 @@
 {
-    "title": "Input Data",
+    "title": "Navigation Button Configuration",
     "description": "A navigation button widget for in-dashboard navigation between pages or sections. Use this widget to create clickable buttons that navigate users to different dashboard views, external pages, or perform back navigation. Supports Material Design icons and customizable styling. Ideal for creating navigation flows, back buttons, call-to-action links, or any clickable element that should route users to another location.",
+    "aiSelection": {
+        "dataShape": "A single destination: a label, an icon and a route, plus optional route variables. No data input.",
+        "useWhen": [
+            "One clickable element should take the user somewhere — a detail page, an external site, or back.",
+            "A call to action belongs next to specific content rather than in a navigation menu."
+        ],
+        "notFor": [
+            "Several destinations that belong together as a menu — use widget-navbar or widget-sidenav.",
+            "A button that writes or submits data — use widget-form.",
+            "A button that commands a device — use widget-switch, or widget-scada for an industrial symbol.",
+            "Per-row links inside a list of records — use widget-table with a column of type 'button'."
+        ]
+    },
     "type": "object",
     "properties": {
         "title": {

package/src/widget-navbutton.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { html, css, LitElement, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
-import { InputData } from './definition-schema'
+import { NavigationButtonConfiguration } from './definition-schema'
 import '@material/web/icon/icon.js'
 import '@material/web/button/filled-button.js'
@@ -31,7 +31,7 @@ const isTransparent = (color?: string) => {
 @customElement('widget-navbutton-versionplaceholder')
 export class WidgetNavbutton extends LitElement {
-    @property({ type: Object }) inputData?: InputData
+    @property({ type: Object }) inputData?: NavigationButtonConfiguration
     @property({ type: Object }) theme?: Theme
     @property({ type: String }) route?: string
@@ -53,11 +53,9 @@ export class WidgetNavbutton extends LitElement {
     }
     registerTheme(theme?: Theme) {
-        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
-        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()
         const themeBgColor = theme?.theme_object?.backgroundColor
-        this.themeBgColor = cssBgColor || (isTransparent(themeBgColor) ? undefined : themeBgColor)
-        this.themeTitleColor = cssTextColor || theme?.theme_object?.title?.textStyle?.color
+        this.themeBgColor = `var(--re-tile-background-color, ${(isTransparent(themeBgColor) ? undefined : themeBgColor) || 'transparent'})`
+        this.themeTitleColor = `var(--re-text-color, ${theme?.theme_object?.title?.textStyle?.color || 'inherit'})`
     }
     handleNavItemClick() {