@record-evolution/widget-navbar 1.0.2

package/src/definition-schema.json

@@ -0,0 +1,76 @@
+{
+    "title": "Input Data",
+    "type": "object",
+    "properties": {
+        "title": {
+            "title": "Title Settings",
+            "order": 1,
+            "type": "string"
+        },
+        "route": {
+            "title": "Title Navigation",
+            "order": 3,
+            "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": "Item Style",
+            "order": 3,
+            "type": "object",
+            "properties": {
+                "fontSize": {
+                    "title": "Font Size",
+                    "order": 1,
+                    "dataDrivenDisabled": true,
+                    "type": "number"
+                },
+                "fontWeight": {
+                    "title": "Font Weight",
+                    "order": 3,
+                    "dataDrivenDisabled": true,
+                    "type": "number"
+                },
+                "color": {
+                    "title": "Font Color",
+                    "order": 4,
+                    "type": "color",
+                    "dataDrivenDisabled": true
+                },
+                "backgroundColor": {
+                    "title": "Background Color",
+                    "order": 4,
+                    "type": "color",
+                    "dataDrivenDisabled": true
+                }
+            }
+        },
+        "navItems": {
+            "title": "Navigation Items",
+            "order": 3,
+            "type": "array",
+            "items": {
+                "type": "object",
+                "properties": {
+                    "label": {
+                        "title": "Label",
+                        "order": 1,
+                        "type": "string"
+                    },
+                    "iconName": {
+                        "title": "Icon Name",
+                        "order": 2,
+                        "description": "Name of the icon from https://fonts.google.com/icons",
+                        "dataDrivenDisabled": true,
+                        "type": "string"
+                    },
+                    "route": {
+                        "title": "Navigation Route",
+                        "order": 3,
+                        "description": "Navigation to perform on click. Example: If you are at route /my/route/asset then 'settings/profile' routes to '/my/route/settings/profile'.",
+                        "type": "string"
+                    }
+                }
+            }
+        }
+    }
+}

package/src/widget-navbar.ts

@@ -0,0 +1,162 @@
+import { html, css, LitElement, PropertyValues, nothing } from 'lit'
+import { property, state } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { InputData } from './definition-schema'
+
+import '@material/web/icon/icon'
+import '@material/web/tabs/tabs'
+import '@material/web/tabs/primary-tab'
+import '@material/web/tabs/secondary-tab'
+
+type Theme = {
+    theme_name: string
+    theme_object: any
+}
+export class WidgetNavbar 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:', item.route)
+        const event = new CustomEvent('nav-submit', {
+            detail: { path: route },
+            bubbles: true,
+            composed: true
+        })
+        this.dispatchEvent(event)
+    }
+
+    normalizeRoute(route?: string) {
+        if (!route) return '/'
+        return route
+    }
+
+    static styles = css`
+        :host {
+            display: block;
+            font-family: sans-serif;
+            box-sizing: border-box;
+            margin: auto;
+        }
+
+        .paging:not([active]) {
+            display: none !important;
+        }
+
+        .wrapper {
+            display: flex;
+            align-items: end;
+            height: 100%;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        mdif4-icon {
+            font-family: 'Material Symbols Outlined';
+        }
+
+        .selected {
+            font-weight: bold;
+            background-color: rgba(0, 0, 0, 0.1);
+        }
+
+        h2 {
+            margin: 0;
+            padding: 0px;
+            font-size: 1.2em;
+        }
+    `
+
+    trimRoute(route?: string) {
+        if (!route) return ''
+        return '/' + route.split('/').filter(Boolean).join('/')
+    }
+
+    matchesRoute(itemRoute?: string) {
+        if (itemRoute === undefined) return false
+        const route = this.trimRoute(decodeURIComponent(this.route || '/'))
+        const subRoute = this.trimRoute(itemRoute)
+        if (itemRoute.startsWith('/')) {
+            return route.startsWith(subRoute)
+        } else {
+            return route.endsWith('/' + subRoute) || route === subRoute
+        }
+    }
+
+    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'
+        return html`
+            <div
+                class="wrapper"
+                style="background-color: ${bgColor}; color: ${fontColor};
+                font-weight: ${this.inputData?.style?.fontWeight};
+                font-size: ${fontSize}px;"
+            >
+                <h2
+                    class="paging"
+                    style=${this.inputData?.route ? 'cursor: pointer' : ''}
+                    ?active=${this.inputData?.title}
+                    @click=${() => this.handleNavItemClick(this.inputData?.route)}
+                >
+                    ${this.inputData?.title}
+                </h2>
+                <mdif4-tab class="xnav-list">
+                    ${repeat(
+                        this.inputData?.navItems || [],
+                        (item) => item.label,
+                        (item) => html`
+                            <mdif4-secondary-tab
+                                ?active=${this.matchesRoute(item.route)}
+                                style="font-size: ${fontSize}px;
+                                --mdif4-secondary-tab-container-color: ${bgColor};
+                                color: ${fontColor};"
+                                @click=${() => this.handleNavItemClick(item.route)}
+                            >
+                                ${item.iconName
+                                    ? html`
+                                          <mdif4-icon
+                                              slot="icon"
+                                              style="font-size: ${iconFontSize}px;width: ${iconFontSize}px;color: ${fontColor}"
+                                          >
+                                              ${item.iconName}
+                                          </mdif4-icon>
+                                      `
+                                    : nothing}
+                                ${item.label}
+                            </mdif4-secondary-tab>
+                        `
+                    )}
+                </mdif4-tab>
+            </div>
+        `
+    }
+}
+window.customElements.define('widget-navbar-versionplaceholder', WidgetNavbar)