@record-evolution/widget-navbutton 1.0.4 → 1.0.5

package/package.json

@@ -3,7 +3,7 @@
     "description": "Webcomponent widget-navbutton following open-wc recommendations",
     "license": "MIT",
     "author": "widget-navbutton",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "type": "module",
     "main": "dist/widget-navbutton.js",
     "types": "dist/src/widget-navbutton.d.ts",

package/src/definition-schema.d.ts

@@ -6,10 +6,22 @@
  */
 
 export type Label = string;
+/**
+ * Name of the icon from https://fonts.google.com/icons
+ */
+export type IconName = string;
 /**
  * Navigation to perform on button click. Leave blank to perform automatic back navigation. Example: If you are at route /my/route/asset then 'settings/profile' routes to '/my/route/settings/profile'.
  */
 export type Navigation = 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;
 /**
  * Font size in pixels
  */
@@ -17,7 +29,10 @@ export type FontSize = number;
 
 export interface InputData {
   title?: Label;
+  iconName?: IconName;
   route?: Navigation;
+  leadingSlash?: AddLeadingSlash;
+  trailingSlash?: AddTraillingSlash;
   style?: ButtonStyle;
   [k: string]: unknown;
 }

package/src/definition-schema.json

@@ -7,12 +7,33 @@
             "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",
             "order": 2,
             "description": "Navigation to perform on button click. Leave blank to perform automatic back navigation. 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": "Button Style",
             "order": 3,

package/src/widget-navbutton.ts

@@ -58,6 +58,16 @@ export class WidgetNavbutton extends LitElement {
         this.dispatchEvent(event)
     }
 
+    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
+    }
+
     static styles = css`
         :host {
             display: flex;
@@ -95,7 +105,7 @@ export class WidgetNavbutton extends LitElement {
                 --mdif5-filled-button-focus-label-text-color: ${fontColor};
                 --mdif5-filled-button-container-color: ${bgColor};
                 "
-                @click=${() => this.handleNavItemClick(this.inputData?.route)}
+                @click=${() => this.handleNavItemClick(this.addSlashes(this.inputData))}
             >
                 ${this.inputData?.title}
                 <mdif5-ripple></mdif5-ripple>