@record-evolution/widget-navbar 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 widget-linechart
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+# \<widget-navbar>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i widget-navbar
+```
+
+## Usage
+
+```html
+<script type="module">
+    import 'widget-navbar/widget-navbar.js'
+</script>
+
+<widget-navbar></widget-navbar>
+```
+
+## Expected data format
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/dist/src/default-data.json

@@ -0,0 +1,19 @@
+{
+    "title": "",
+    "style": {
+        "fontSize": 16,
+        "fontWeight": 400
+    },
+    "navItems": [
+        {
+            "label": "Assets",
+            "iconName": "image",
+            "route": "/assets/"
+        },
+        {
+            "label": "Settings",
+            "iconName": "settings",
+            "route": "/settings/"
+        }
+    ]
+}

package/dist/src/definition-schema.d.ts

@@ -0,0 +1,50 @@
+/* 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;
+export type FontSize = number;
+export type FontWeight = number;
+export type Label = string;
+/**
+ * Name of the icon from https://fonts.google.com/icons
+ */
+export type IconName = string;
+/**
+ * Navigation to perform on click. Example: If you are at route /my/route/asset then 'settings/profile' routes to '/my/route/settings/profile'.
+ */
+export type NavigationRoute = string;
+export type NavigationItems = {
+  label?: Label;
+  iconName?: IconName;
+  route?: NavigationRoute;
+  [k: string]: unknown;
+}[];
+
+export interface InputData {
+  title?: TitleSettings;
+  route?: TitleNavigation;
+  style?: ItemStyle;
+  navItems?: NavigationItems;
+  [k: string]: unknown;
+}
+export interface ItemStyle {
+  fontSize?: FontSize;
+  fontWeight?: FontWeight;
+  color?: FontColor;
+  backgroundColor?: BackgroundColor;
+  [k: string]: unknown;
+}
+export interface FontColor {
+  [k: string]: unknown;
+}
+export interface BackgroundColor {
+  [k: string]: unknown;
+}

package/dist/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/dist/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)