@record-evolution/widget-navbar 1.0.8 → 1.0.10

package/package.json

@@ -3,7 +3,7 @@
     "description": "Webcomponent widget-navbar following open-wc recommendations",
     "license": "MIT",
     "author": "widget-navbar",
-    "version": "1.0.8",
+    "version": "1.0.10",
     "type": "module",
     "main": "dist/widget-navbar.js",
     "types": "dist/src/widget-navbar.d.ts",
@@ -15,25 +15,24 @@
     "scripts": {
         "analyze": "cem analyze --litelement",
         "start": "node rename-material-package.js && vite",
-        "build": "node rename-material-package.js && vite build --mode production",
+        "build": "node rename-material-package.js && vite build",
         "watch": "node rename-material-package.js && vite build --watch",
-        "link": "npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-navbar",
+        "link": "npm run build && npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-navbar",
         "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-navbar && npm i @record-evolution/widget-navbar",
-        "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
+        "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"
     },
     "dependencies": {
-        "@material/web": "^2.4.0",
-        "lit": "^3.3.1"
+        "@material/web": "^2.4.1",
+        "lit": "^3.3.2",
+        "tslib": "^2.8.1"
     },
     "devDependencies": {
         "@custom-elements-manifest/analyzer": "^0.10.5",
         "@rollup/plugin-replace": "^6.0.2",
         "json-schema-to-typescript": "^15.0.4",
-        "rollup-plugin-copy": "^3.5.0",
-        "tslib": "^2.8.1",
         "typescript": "^5.9.2",
-        "vite": "^7.1.6"
+        "vite": "^7.3.0"
     },
     "repository": {
         "type": "git",

package/src/definition-schema.d.ts

@@ -38,33 +38,33 @@ export type AddLeadingSlash1 = boolean;
  */
 export type AddTraillingSlash1 = boolean;
 export type NavigationItems = {
-  label?: Label;
-  iconName?: IconName;
-  route?: NavigationRoute;
-  leadingSlash?: AddLeadingSlash1;
-  trailingSlash?: AddTraillingSlash1;
-  [k: string]: unknown;
+    label?: Label;
+    iconName?: IconName;
+    route?: NavigationRoute;
+    leadingSlash?: AddLeadingSlash1;
+    trailingSlash?: AddTraillingSlash1;
+    [k: string]: unknown;
 }[];
 
 export interface InputData {
-  title?: TitleSettings;
-  route?: TitleNavigation;
-  leadingSlash?: AddLeadingSlash;
-  trailingSlash?: AddTraillingSlash;
-  style?: ItemStyle;
-  navItems?: NavigationItems;
-  [k: string]: unknown;
+    title?: TitleSettings;
+    route?: TitleNavigation;
+    leadingSlash?: AddLeadingSlash;
+    trailingSlash?: AddTraillingSlash;
+    style?: ItemStyle;
+    navItems?: NavigationItems;
+    [k: string]: unknown;
 }
 export interface ItemStyle {
-  fontSize?: FontSize;
-  fontWeight?: FontWeight;
-  color?: FontColor;
-  backgroundColor?: BackgroundColor;
-  [k: string]: unknown;
+    fontSize?: FontSize;
+    fontWeight?: FontWeight;
+    color?: FontColor;
+    backgroundColor?: BackgroundColor;
+    [k: string]: unknown;
 }
 export interface FontColor {
-  [k: string]: unknown;
+    [k: string]: unknown;
 }
 export interface BackgroundColor {
-  [k: string]: unknown;
+    [k: string]: unknown;
 }

package/src/widget-navbar.ts

@@ -89,6 +89,8 @@ export class WidgetNavbar extends LitElement {
             margin: 0;
             padding: 0px;
             font-size: 1.2em;
+            line-height: 2.5;
+            height: 48px;
         }
     `
 
@@ -134,7 +136,7 @@ export class WidgetNavbar extends LitElement {
                     class="paging"
                     style=${this.inputData?.route ? 'cursor: pointer' : ''}
                     ?active=${this.inputData?.title}
-                    @click=${() => this.handleNavItemClick(this.addSlashes(this.inputData?.route))}
+                    @click=${() => this.handleNavItemClick(this.addSlashes(this.inputData))}
                 >
                     ${this.inputData?.title}
                 </h2>

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

@@ -1,70 +0,0 @@
-/* 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;
-/**
- * Whether to add a leading slash to the navigation route.
- */
-export type AddLeadingSlash = boolean;
-/**
- * Whether to add a trailing slash to the navigation route.
- */
-export type AddTraillingSlash = boolean;
-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;
-/**
- * Whether to add a leading slash to the navigation route.
- */
-export type AddLeadingSlash1 = boolean;
-/**
- * Whether to add a trailing slash to the navigation route.
- */
-export type AddTraillingSlash1 = boolean;
-export type NavigationItems = {
-  label?: Label;
-  iconName?: IconName;
-  route?: NavigationRoute;
-  leadingSlash?: AddLeadingSlash1;
-  trailingSlash?: AddTraillingSlash1;
-  [k: string]: unknown;
-}[];
-
-export interface InputData {
-  title?: TitleSettings;
-  route?: TitleNavigation;
-  leadingSlash?: AddLeadingSlash;
-  trailingSlash?: AddTraillingSlash;
-  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

@@ -1,104 +0,0 @@
-{
-    "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"
-        },
-        "leadingSlash": {
-            "title": "Add Leading Slash",
-            "order": 4,
-            "description": "Whether to add a leading slash to the navigation route.",
-            "dataDrivenDisabled": true,
-            "type": "boolean"
-        },
-        "trailingSlash": {
-            "title": "Add Trailling Slash",
-            "order": 5,
-            "description": "Whether to add a trailing slash to the navigation route.",
-            "dataDrivenDisabled": true,
-            "type": "boolean"
-        },
-        "style": {
-            "title": "Item Style",
-            "order": 6,
-            "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": 7,
-            "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"
-                    },
-                    "leadingSlash": {
-                        "title": "Add Leading Slash",
-                        "order": 4,
-                        "description": "Whether to add a leading slash to the navigation route.",
-                        "dataDrivenDisabled": true,
-                        "type": "boolean"
-                    },
-                    "trailingSlash": {
-                        "title": "Add Trailling Slash",
-                        "order": 5,
-                        "description": "Whether to add a trailing slash to the navigation route.",
-                        "dataDrivenDisabled": true,
-                        "type": "boolean"
-                    }
-                }
-            }
-        }
-    }
-}

package/dist/src/widget-navbar.ts

@@ -1,172 +0,0 @@
-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('/')
-    }
-
-    addSlashes(item?: any): string | undefined {
-        if (!item.route?.endsWith('/') && item.trailingSlash) {
-            item.route += '/'
-        }
-        if (!item.route?.startsWith('/') && item.leadingSlash) {
-            item.route = '/' + item.route
-        }
-        return item.route
-    }
-
-    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.addSlashes(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(this.addSlashes(item))}
-                                style="font-size: ${fontSize}px;
-                                --mdif4-secondary-tab-container-color: ${bgColor};
-                                color: ${fontColor};"
-                                @click=${() => this.handleNavItemClick(this.addSlashes(item))}
-                            >
-                                ${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)