mithril-materialized 3.5.3 → 3.5.4

package/dist/index.js

@@ -7812,6 +7812,66 @@ const FileUpload = () => {
     };
 };
 
+// List of MaterialIcon SVG icons that are available
+const materialIconSvgNames = [
+    'caret', 'close', 'chevron', 'chevron_left', 'chevron_right', 'menu',
+    'expand', 'collapse', 'check', 'radio_checked', 'radio_unchecked',
+    'light_mode', 'dark_mode'
+];
+/**
+ * Helper function to render icons based on IconDefinition type
+ */
+const renderIcon = (icon, style) => {
+    if (!icon)
+        return null;
+    if (typeof icon === 'string') {
+        // Check if this is a MaterialIcon SVG name
+        if (materialIconSvgNames.includes(icon)) {
+            return m(MaterialIcon, { name: icon, style });
+        }
+        // Fall back to Material Icons font for other icon names
+        return m('i.material-icons', { style }, icon);
+    }
+    if (icon.type === 'svg') {
+        // Inline SVG
+        return m.trust(icon.content);
+    }
+    if (icon.type === 'image') {
+        // Image URL
+        return m('img', {
+            src: icon.content,
+            style: Object.assign(Object.assign({}, style), { width: '24px', height: '24px', objectFit: 'contain' }),
+        });
+    }
+    return null;
+};
+/**
+ * Helper function to render a single sidenav item (for header/footer items)
+ */
+const renderSidenavItem = (item, isExpanded, position) => {
+    const { text, icon, onclick, href, className = '' } = item;
+    const isRightAligned = position === 'right';
+    const content = isRightAligned
+        ? [
+            isExpanded && m('span.sidenav-item-text', { style: { 'flex': '1', 'text-align': 'left', 'margin-right': '8px' } }, text),
+            renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
+        ]
+        : [
+            renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
+            isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', 'flex': '1' } }, text),
+        ];
+    const linkStyle = {
+        display: 'flex',
+        'align-items': 'center',
+        padding: isExpanded ? '12px 16px' : '12px 18px',
+        'justify-content': isExpanded ? (isRightAligned ? 'flex-end' : 'flex-start') : 'center',
+    };
+    return m('li', { class: className }, m('a', {
+        href: href || '#!',
+        onclick: onclick,
+        style: linkStyle,
+    }, content));
+};
 /**
  * Sidenav Component
  * A responsive navigation drawer that slides in from the side
@@ -7934,6 +7994,8 @@ const Sidenav = () => {
                             name: 'menu',
                             style: { width: '24px', height: '24px' },
                         })),
+                    // Header item (if provided, appears before expand/collapse toggle)
+                    attrs.header && renderSidenavItem(attrs.header, isExpanded, position),
                     // Expand/collapse toggle button (if expandable, right below hamburger)
                     expandable &&
                         m('li.sidenav-expand-toggle', {
@@ -7962,6 +8024,8 @@ const Sidenav = () => {
                             return child;
                         })
                         : children,
+                    // Footer item (if provided, appears at the bottom)
+                    attrs.footer && renderSidenavItem(attrs.footer, isExpanded, position),
                 ]),
             ];
         },
@@ -7980,43 +8044,42 @@ const NavbarSubItem = () => {
                 }
             };
             const isRightAligned = position === 'right';
+            // Render indicator icon for checkbox/radio modes
+            const indicatorIcon = mode !== 'none'
+                ? m(MaterialIcon, {
+                    name: mode === 'checkbox' ? (selected ? 'check' : 'close') : selected ? 'radio_checked' : 'radio_unchecked',
+                    style: {
+                        width: '18px',
+                        height: '18px',
+                        opacity: mode === 'checkbox' && !selected ? '0.3' : '1',
+                    },
+                })
+                : null;
             const submenuContent = isRightAligned
                 ? [
                     // Right-aligned: text on left, icons on right
                     isExpanded && m('span', { style: { 'flex': '1', 'text-align': 'left' } }, text),
-                    icon && isExpanded && m('i.material-icons', { style: { 'font-size': '18px' } }, icon),
-                    m(MaterialIcon, {
-                        name: mode === 'checkbox' ? (selected ? 'check' : 'close') : selected ? 'radio_checked' : 'radio_unchecked',
-                        style: {
-                            width: '18px',
-                            height: '18px',
-                            opacity: mode === 'checkbox' && !selected ? '0.3' : '1',
-                        },
-                    }),
+                    icon && isExpanded && renderIcon(icon, { 'font-size': '18px' }),
+                    indicatorIcon,
                 ]
                 : [
                     // Left-aligned: indicator on left, text and icon on right
-                    m(MaterialIcon, {
-                        name: mode === 'checkbox' ? (selected ? 'check' : 'close') : selected ? 'radio_checked' : 'radio_unchecked',
-                        style: {
-                            width: '18px',
-                            height: '18px',
-                            opacity: mode === 'checkbox' && !selected ? '0.3' : '1',
-                        },
-                    }),
-                    icon && isExpanded && m('i.material-icons', { style: { 'font-size': '18px', 'margin-left': '8px' } }, icon),
-                    isExpanded && m('span', { style: { 'margin-left': icon ? '8px' : '8px' } }, text),
+                    indicatorIcon,
+                    icon && isExpanded && renderIcon(icon, { 'font-size': '18px', 'margin-left': indicatorIcon ? '8px' : '0' }),
+                    isExpanded && m('span', { style: { 'margin-left': icon || indicatorIcon ? '8px' : '0' } }, text),
                 ];
             return m('li.sidenav-subitem', {
                 class: selected ? 'selected' : '',
                 style: {
-                    padding: isExpanded ? '8px 16px 8px 48px' : '8px 16px',
+                    padding: isExpanded ? '0 16px 0 48px' : '0 16px',
                     cursor: 'pointer',
                     display: 'flex',
                     'align-items': 'center',
                     gap: '8px',
                     'font-size': '0.9em',
                     'justify-content': isRightAligned ? 'space-between' : 'flex-start',
+                    height: '48px',
+                    'min-height': '48px',
                 },
                 onclick: handleClick,
             }, submenuContent);
@@ -8048,8 +8111,8 @@ const SidenavItem = () => {
                 .filter(Boolean)
                 .join(' ') || undefined;
             const handleMainClick = (e) => {
-                e.preventDefault();
                 if (hasSubmenu) {
+                    e.preventDefault();
                     isSubmenuOpen = active ? !isSubmenuOpen : true;
                 }
                 if (onclick && !disabled) {
@@ -8066,11 +8129,11 @@ const SidenavItem = () => {
                 ? [
                     // Right-aligned: text on left, icon on right
                     isExpanded && m('span.sidenav-item-text', { style: { 'flex': '1', 'text-align': 'left', 'margin-right': '8px' } }, text || children),
-                    m('i.material-icons', { style: { 'min-width': '24px', 'width': '24px' } }, icon || ''),
+                    renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
                 ]
                 : [
                     // Left-aligned: icon on left, text on right
-                    m('i.material-icons', { style: { 'min-width': '24px', 'width': '24px' } }, icon || ''),
+                    renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
                     isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', 'flex': '1' } }, text || children),
                 ];
             const linkStyle = {