@record-evolution/widget-navbar 1.0.10 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/widget-navbar.js +48 -1472
  2. package/dist/widget-navbar.js.map +1 -1
  3. package/package.json +8 -4
  4. package/src/definition-schema.d.ts +34 -7
  5. package/src/definition-schema.json +16 -7
  6. package/src/widget-navbar.ts +8 -8
package/src/definition-schema.json CHANGED
@@ -1,57 +1,64 @@
1
1
  {
2
2
  "title": "Input Data",
3
+ "description": "A horizontal navigation bar widget for creating top-level dashboard navigation. Use this widget to provide consistent navigation across dashboard pages with a clickable title and multiple navigation items. Each item can have an icon and routes to different dashboard sections. Supports customizable styling for font size, weight, and colors. Ideal for multi-page dashboards requiring clear navigation structure and branding.",
3
4
  "type": "object",
4
5
  "properties": {
5
6
  "title": {
6
7
  "title": "Title Settings",
8
+ "description": "The main title/brand text displayed in the navigation bar, typically on the left side. Often used for logo text or application name.",
7
9
  "order": 1,
8
10
  "type": "string"
9
11
  },
10
12
  "route": {
11
13
  "title": "Title Navigation",
12
14
  "order": 3,
13
- "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'.",
15
+ "description": "The route to navigate to when the title is clicked. Use relative paths (e.g., 'home', 'dashboard') that append to the current base URL, or use leadingSlash for absolute paths.",
14
16
  "type": "string"
15
17
  },
16
18
  "leadingSlash": {
17
19
  "title": "Add Leading Slash",
18
20
  "order": 4,
19
- "description": "Whether to add a leading slash to the navigation route.",
21
+ "description": "When enabled, prepends '/' to the navigation route making it absolute from the root. When disabled, routes are relative to the current location.",
20
22
  "dataDrivenDisabled": true,
21
23
  "type": "boolean"
22
24
  },
23
25
  "trailingSlash": {
24
26
  "title": "Add Trailling Slash",
25
27
  "order": 5,
26
- "description": "Whether to add a trailing slash to the navigation route.",
28
+ "description": "When enabled, appends '/' to the end of the navigation route. Some routing systems require trailing slashes for proper page matching.",
27
29
  "dataDrivenDisabled": true,
28
30
  "type": "boolean"
29
31
  },
30
32
  "style": {
31
33
  "title": "Item Style",
34
+ "description": "Global styling options applied to all navigation items in the bar.",
32
35
  "order": 6,
33
36
  "type": "object",
34
37
  "properties": {
35
38
  "fontSize": {
36
39
  "title": "Font Size",
40
+ "description": "Font size in pixels for navigation item labels.",
37
41
  "order": 1,
38
42
  "dataDrivenDisabled": true,
39
43
  "type": "number"
40
44
  },
41
45
  "fontWeight": {
42
46
  "title": "Font Weight",
47
+ "description": "Font weight for navigation items (100=thin, 400=normal, 700=bold, 900=black).",
43
48
  "order": 3,
44
49
  "dataDrivenDisabled": true,
45
50
  "type": "number"
46
51
  },
47
52
  "color": {
48
53
  "title": "Font Color",
54
+ "description": "Text color for navigation item labels.",
49
55
  "order": 4,
50
56
  "type": "color",
51
57
  "dataDrivenDisabled": true
52
58
  },
53
59
  "backgroundColor": {
54
60
  "title": "Background Color",
61
+ "description": "Background color of the navigation bar.",
55
62
  "order": 4,
56
63
  "type": "color",
57
64
  "dataDrivenDisabled": true
@@ -60,6 +67,7 @@
60
67
  },
61
68
  "navItems": {
62
69
  "title": "Navigation Items",
70
+ "description": "Array of clickable navigation links displayed in the navigation bar. Each item can have a label, icon, and destination route.",
63
71
  "order": 7,
64
72
  "type": "array",
65
73
  "items": {
@@ -67,33 +75,34 @@
67
75
  "properties": {
68
76
  "label": {
69
77
  "title": "Label",
78
+ "description": "The text displayed for this navigation item. Should be short and descriptive (e.g., 'Dashboard', 'Settings', 'Reports').",
70
79
  "order": 1,
71
80
  "type": "string"
72
81
  },
73
82
  "iconName": {
74
83
  "title": "Icon Name",
75
84
  "order": 2,
76
- "description": "Name of the icon from https://fonts.google.com/icons",
85
+ "description": "Material icon name to display alongside the label. Find icon names at https://fonts.google.com/icons (e.g., 'home', 'settings', 'dashboard', 'analytics').",
77
86
  "dataDrivenDisabled": true,
78
87
  "type": "string"
79
88
  },
80
89
  "route": {
81
90
  "title": "Navigation Route",
82
91
  "order": 3,
83
- "description": "Navigation to perform on click. Example: If you are at route /my/route/asset then 'settings/profile' routes to '/my/route/settings/profile'.",
92
+ "description": "The destination path when this item is clicked. Use relative paths that append to the current URL, or enable leadingSlash for absolute paths.",
84
93
  "type": "string"
85
94
  },
86
95
  "leadingSlash": {
87
96
  "title": "Add Leading Slash",
88
97
  "order": 4,
89
- "description": "Whether to add a leading slash to the navigation route.",
98
+ "description": "When enabled, prepends '/' to this item's route making it absolute from the root.",
90
99
  "dataDrivenDisabled": true,
91
100
  "type": "boolean"
92
101
  },
93
102
  "trailingSlash": {
94
103
  "title": "Add Trailling Slash",
95
104
  "order": 5,
96
- "description": "Whether to add a trailing slash to the navigation route.",
105
+ "description": "When enabled, appends '/' to the end of this item's route.",
97
106
  "dataDrivenDisabled": true,
98
107
  "type": "boolean"
99
108
  }
package/src/widget-navbar.ts CHANGED
@@ -76,7 +76,7 @@ export class WidgetNavbar extends LitElement {
76
76
  box-sizing: border-box;
77
77
  }
78
78
 
79
- mdif4-icon {
79
+ md-icon {
80
80
  font-family: 'Material Symbols Outlined';
81
81
  }
82
82
 
@@ -140,33 +140,33 @@ export class WidgetNavbar extends LitElement {
140
140
  >
141
141
  ${this.inputData?.title}
142
142
  </h2>
143
- <mdif4-tab class="xnav-list">
143
+ <md-tab class="xnav-list">
144
144
  ${repeat(
145
145
  this.inputData?.navItems || [],
146
146
  (item) => item.label,
147
147
  (item) => html`
148
- <mdif4-secondary-tab
148
+ <md-secondary-tab
149
149
  ?active=${this.matchesRoute(this.addSlashes(item))}
150
150
  style="font-size: ${fontSize}px;
151
- --mdif4-secondary-tab-container-color: ${bgColor};
151
+ --md-secondary-tab-container-color: ${bgColor};
152
152
  color: ${fontColor};"
153
153
  @click=${() => this.handleNavItemClick(this.addSlashes(item))}
154
154
  >
155
155
  ${item.iconName
156
156
  ? html`
157
- <mdif4-icon
157
+ <md-icon
158
158
  slot="icon"
159
159
  style="font-size: ${iconFontSize}px;width: ${iconFontSize}px;color: ${fontColor}"
160
160
  >
161
161
  ${item.iconName}
162
- </mdif4-icon>
162
+ </md-icon>
163
163
  `
164
164
  : nothing}
165
165
  ${item.label}
166
- </mdif4-secondary-tab>
166
+ </md-secondary-tab>
167
167
  `
168
168
  )}
169
- </mdif4-tab>
169
+ </md-tab>
170
170
  </div>
171
171
  `
172
172
  }