@record-evolution/widget-navbar 1.0.9 → 1.0.11

package/src/widget-navbar.ts

@@ -76,7 +76,7 @@ export class WidgetNavbar extends LitElement {
             box-sizing: border-box;
         }
 
-        mdif4-icon {
+        md-icon {
             font-family: 'Material Symbols Outlined';
         }
 
@@ -89,6 +89,8 @@ export class WidgetNavbar extends LitElement {
             margin: 0;
             padding: 0px;
             font-size: 1.2em;
+            line-height: 2.5;
+            height: 48px;
         }
     `
 
@@ -138,33 +140,33 @@ export class WidgetNavbar extends LitElement {
                 >
                     ${this.inputData?.title}
                 </h2>
-                <mdif4-tab class="xnav-list">
+                <md-tab class="xnav-list">
                     ${repeat(
                         this.inputData?.navItems || [],
                         (item) => item.label,
                         (item) => html`
-                            <mdif4-secondary-tab
+                            <md-secondary-tab
                                 ?active=${this.matchesRoute(this.addSlashes(item))}
                                 style="font-size: ${fontSize}px;
-                                --mdif4-secondary-tab-container-color: ${bgColor};
+                                --md-secondary-tab-container-color: ${bgColor};
                                 color: ${fontColor};"
                                 @click=${() => this.handleNavItemClick(this.addSlashes(item))}
                             >
                                 ${item.iconName
                                     ? html`
-                                          <mdif4-icon
+                                          <md-icon
                                               slot="icon"
                                               style="font-size: ${iconFontSize}px;width: ${iconFontSize}px;color: ${fontColor}"
                                           >
                                               ${item.iconName}
-                                          </mdif4-icon>
+                                          </md-icon>
                                       `
                                     : nothing}
                                 ${item.label}
-                            </mdif4-secondary-tab>
+                            </md-secondary-tab>
                         `
                     )}
-                </mdif4-tab>
+                </md-tab>
             </div>
         `
     }

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))}
-                >
-                    ${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)