@record-evolution/widget-navbutton 1.0.1

package/package.json

@@ -0,0 +1,53 @@
+{
+    "name": "@record-evolution/widget-navbutton",
+    "description": "Webcomponent widget-navbutton following open-wc recommendations",
+    "license": "MIT",
+    "author": "widget-navbutton",
+    "version": "1.0.1",
+    "type": "module",
+    "main": "dist/widget-navbutton.js",
+    "types": "dist/src/widget-navbutton.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "analyze": "cem analyze --litelement",
+        "start": "concurrently -k -r \"npm run watch\" \"wds\"",
+        "build": "node rename-material-package.js && rollup -c rollup.config.js",
+        "watch": "node rename-material-package.js && rollup -w -c rollup.config.js",
+        "link": "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 > src/definition-schema.d.ts",
+        "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag"
+    },
+    "dependencies": {
+        "lit": "^3.3.1",
+        "@material/web": "^2.4.0"
+    },
+    "devDependencies": {
+        "@custom-elements-manifest/analyzer": "^0.10.5",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^28.0.6",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@rollup/plugin-typescript": "^12.1.4",
+        "@web/dev-server": "^0.4.6",
+        "concurrently": "^9.2.1",
+        "json-schema-to-typescript": "^15.0.4",
+        "tslib": "^2.8.1",
+        "typescript": "^5.9.2"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/RecordEvolution/widget-navbutton.git"
+    },
+    "keywords": [
+        "widget",
+        "navbutton"
+    ],
+    "bugs": {
+        "url": "https://github.com/RecordEvolution/widget-navbutton/issues"
+    },
+    "homepage": "https://github.com/RecordEvolution/widget-navbutton#readme"
+}

package/src/default-data.json

@@ -0,0 +1,9 @@
+{
+    "title": "Back",
+    "iconName": "arrow_back",
+    "route": "",
+    "style": {
+        "fontSize": 16,
+        "fontWeight": 400
+    }
+}

package/src/definition-schema.d.ts

@@ -0,0 +1,35 @@
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+export type TitleSettings = string;
+/**
+ * Navigation to perform on title click. Example: If you are at route /my/route/asset then 'settings/profile' routes to '/my/route/settings/profile'.
+ */
+export type TitleNavigation = string;
+/**
+ * Font size in pixels
+ */
+export type FontSize = number;
+
+export interface InputData {
+  title?: TitleSettings;
+  route?: TitleNavigation;
+  style?: ButtonStyle;
+  [k: string]: unknown;
+}
+export interface ButtonStyle {
+  fontSize?: FontSize;
+  color?: FontColor;
+  backgroundColor?: BackgroundColor;
+  [k: string]: unknown;
+}
+export interface FontColor {
+  [k: string]: unknown;
+}
+export interface BackgroundColor {
+  [k: string]: unknown;
+}

package/src/definition-schema.json

@@ -0,0 +1,43 @@
+{
+    "title": "Input Data",
+    "type": "object",
+    "properties": {
+        "title": {
+            "title": "Title Settings",
+            "order": 1,
+            "type": "string"
+        },
+        "route": {
+            "title": "Title Navigation",
+            "order": 2,
+            "description": "Navigation to perform on title click. Example: If you are at route /my/route/asset then 'settings/profile' routes to '/my/route/settings/profile'.",
+            "type": "string"
+        },
+        "style": {
+            "title": "Button Style",
+            "order": 3,
+            "type": "object",
+            "properties": {
+                "fontSize": {
+                    "title": "Font Size",
+                    "order": 1,
+                    "description": "Font size in pixels",
+                    "dataDrivenDisabled": true,
+                    "type": "number"
+                },
+                "color": {
+                    "title": "Font Color",
+                    "order": 4,
+                    "type": "color",
+                    "dataDrivenDisabled": true
+                },
+                "backgroundColor": {
+                    "title": "Background Color",
+                    "order": 4,
+                    "type": "color",
+                    "dataDrivenDisabled": true
+                }
+            }
+        }
+    }
+}

package/src/widget-navbutton.ts

@@ -0,0 +1,107 @@
+import { html, css, LitElement, PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { InputData } from './definition-schema'
+
+import '@material/web/icon/icon.js'
+import '@material/web/button/filled-button.js'
+import '@material/web/ripple/ripple.js'
+
+type Theme = {
+    theme_name: string
+    theme_object: any
+}
+
+@customElement('widget-navbutton-versionplaceholder')
+export class WidgetNavbutton extends LitElement {
+    @property({ type: Object }) inputData?: InputData
+    @property({ type: Object }) theme?: Theme
+    @property({ type: String }) route?: string
+
+    @state() private themeBgColor?: string
+    @state() private themeTitleColor?: string
+
+    version: string = 'versionplaceholder'
+
+    update(changedProperties: Map<string, any>) {
+        if (changedProperties.has('theme')) {
+            this.registerTheme(this.theme)
+        }
+
+        super.update(changedProperties)
+    }
+
+    protected firstUpdated(_changedProperties: PropertyValues): void {
+        this.registerTheme(this.theme)
+    }
+
+    registerTheme(theme?: Theme) {
+        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
+        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()
+        this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor
+        this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color
+    }
+
+    handleNavItemClick(route?: string) {
+        console.log('Navigating to:', route, this.route)
+        let goto: string
+        if (this.inputData?.route === '') {
+            goto = this.route?.split('/').filter(Boolean).slice(0, -1).join('/') || '/'
+        } else {
+            goto = this.inputData?.route || '/'
+        }
+        const event = new CustomEvent('nav-submit', {
+            detail: { path: goto },
+            bubbles: true,
+            composed: true
+        })
+        this.dispatchEvent(event)
+    }
+
+    static styles = css`
+        :host {
+            display: flex;
+            align-items: center;
+            font-family: sans-serif;
+            box-sizing: border-box;
+            margin: auto;
+            padding: 12px;
+        }
+
+        mdif5-icon {
+            font-family: 'Material Symbols Outlined';
+        }
+        mdif5-filled-button {
+            --mdif5-filled-button-container-shape: 4px;
+            --mdif5-filled-button-container-shadow-color: none;
+            --md-sys-color-primary: #006a6a;
+            --md-ripple-hover-color: var(--md-sys-color-primary);
+            --md-ripple-pressed-color: var(--md-sys-color-primary);
+        }
+    `
+
+    render() {
+        const fontSize = this.inputData?.style?.fontSize ?? 16
+        const iconFontSize = (this.inputData?.style?.fontSize ?? 16) * 1.5
+        const fontColor = this.inputData?.style?.color || this.themeTitleColor || 'black'
+        const bgColor = this.inputData?.style?.backgroundColor || this.themeBgColor || 'white'
+        const gap = fontSize * 0.4
+        return html`
+            <mdif5-filled-button
+                style="font-size: ${fontSize}px; 
+                --mdif5-filled-button-label-text-color: ${fontColor}; 
+                --mdif5-filled-button-hover-label-text-color: ${fontColor};
+                --mdif5-filled-button-pressed-label-text-color: ${fontColor};
+                --mdif5-filled-button-focus-label-text-color: ${fontColor};
+                --mdif5-filled-button-container-color: ${bgColor};
+                "
+                @click=${() => this.handleNavItemClick(this.inputData?.route)}
+            >
+                ${this.inputData?.title}
+                <mdif5-ripple></mdif5-ripple>
+                <mdif5-icon slot="icon" style="font-size: ${iconFontSize}px; color: ${fontColor}"
+                    >${this.inputData?.iconName}</mdif5-icon
+                >
+            </mdif5-filled-button>
+        `
+    }
+}