@record-evolution/widget-navbar 1.0.5 → 1.0.7

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

@@ -10,6 +10,14 @@ 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;
@@ -21,16 +29,28 @@ 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;

package/dist/src/definition-schema.json

@@ -13,6 +13,20 @@
             "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": 3,
@@ -68,6 +82,20 @@
                         "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

@@ -97,6 +97,16 @@ export class WidgetNavbar extends LitElement {
         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 || '/'))
@@ -124,7 +134,7 @@ export class WidgetNavbar extends LitElement {
                     class="paging"
                     style=${this.inputData?.route ? 'cursor: pointer' : ''}
                     ?active=${this.inputData?.title}
-                    @click=${() => this.handleNavItemClick(this.inputData?.route)}
+                    @click=${() => this.handleNavItemClick(this.addSlashes(this.inputData?.route))}
                 >
                     ${this.inputData?.title}
                 </h2>
@@ -134,11 +144,11 @@ export class WidgetNavbar extends LitElement {
                         (item) => item.label,
                         (item) => html`
                             <mdif4-secondary-tab
-                                ?active=${this.matchesRoute(item.route)}
+                                ?active=${this.matchesRoute(this.addSlashes(item))}
                                 style="font-size: ${fontSize}px;
                                 --mdif4-secondary-tab-container-color: ${bgColor};
                                 color: ${fontColor};"
-                                @click=${() => this.handleNavItemClick(item.route)}
+                                @click=${() => this.handleNavItemClick(this.addSlashes(item))}
                             >
                                 ${item.iconName
                                     ? html`