mithril-materialized 3.5.4 → 3.5.6

package/dist/advanced.css

@@ -866,6 +866,8 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   backface-visibility: hidden;
   transform: translateX(-105%);
   transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
+  display: flex;
+  flex-direction: column;
 }
 .sidenav.sidenav-left {
   left: 0;
@@ -1220,6 +1222,10 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   color: var(--mm-primary-color, #26a69a);
 }
 
+.sidenav-footer-item {
+  margin-top: auto;
+}
+
 .sidenav {
   transition: transform 0.3s ease, width 0.3s ease;
 }

package/dist/components.css

@@ -1619,6 +1619,8 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   backface-visibility: hidden;
   transform: translateX(-105%);
   transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
+  display: flex;
+  flex-direction: column;
 }
 .sidenav.sidenav-left {
   left: 0;
@@ -1973,6 +1975,10 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   color: var(--mm-primary-color, #26a69a);
 }
 
+.sidenav-footer-item {
+  margin-top: auto;
+}
+
 .sidenav {
   transition: transform 0.3s ease, width 0.3s ease;
 }

package/dist/index.css

@@ -7731,6 +7731,8 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   backface-visibility: hidden;
   transform: translateX(-105%);
   transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
+  display: flex;
+  flex-direction: column;
 }
 .sidenav.sidenav-left {
   left: 0;
@@ -8087,6 +8089,10 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   color: var(--mm-primary-color, #26a69a);
 }
 
+.sidenav-footer-item {
+  margin-top: auto;
+}
+
 .sidenav {
   transition: transform 0.3s ease, width 0.3s ease;
 }

package/dist/index.esm.js

@@ -3300,8 +3300,8 @@ const InputField = (type, defaultClass = '') => () => {
             const shouldValidate = !isNonInteractive && (validate || type === 'email' || type === 'url' || isNumeric);
             return m('.input-field', { className: cn, style }, [
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
-                m('input', Object.assign(Object.assign({ class: shouldValidate ? 'validate' : undefined }, params), { type, tabindex: 0, id,
-                    placeholder, value: controlled ? value : undefined, class: type === 'range' && attrs.vertical ? 'range-slider vertical' : undefined, style: type === 'range' && attrs.vertical
+                m('input', Object.assign(Object.assign({ class: type === 'range' && attrs.vertical ? 'range-slider vertical' : shouldValidate ? 'validate' : undefined }, params), { type, tabindex: 0, id,
+                    placeholder, value: controlled ? value : undefined, style: type === 'range' && attrs.vertical
                         ? {
                             height: attrs.height || '200px',
                             width: '6px',
@@ -4894,7 +4894,7 @@ const ModalPanel = () => {
                     closeModal(attrs);
                 }
             }
-            const { id, title, description, fixedFooter, bottomSheet, buttons, richContent, className, showCloseButton = true, closeOnBackdropClick = true, } = attrs;
+            const { id, title, description, fixedFooter, bottomSheet, buttons, richContent, className, showCloseButton = true, closeOnBackdropClick = true, closeOnButtonClick = true, } = attrs;
             const modalClasses = [
                 'modal',
                 className || '',
@@ -4991,7 +4991,7 @@ const ModalPanel = () => {
                         }, buttons.map((buttonProps) => m(FlatButton, Object.assign(Object.assign({}, buttonProps), { className: `modal-close ${buttonProps.className || ''}`, onclick: (e) => {
                                 if (buttonProps.onclick)
                                     buttonProps.onclick(e);
-                                closeModal(attrs);
+                                closeOnButtonClick && closeModal(attrs);
                             } })))),
                 ]),
             ]);
@@ -5169,6 +5169,7 @@ const defaultOptions = {
     autoClose: false,
     twelveHour: true,
     vibrate: true,
+    roundBy5: false,
     onOpen: () => { },
     onOpenStart: () => { },
     onOpenEnd: () => { },
@@ -5220,7 +5221,7 @@ const TimePicker = () => {
         const clickPos = getPos(e);
         state.dx = clickPos.x - state.x0;
         state.dy = clickPos.y - state.y0;
-        setHand(state.dx, state.dy, false);
+        setHand(state.dx, state.dy, options.roundBy5);
         document.addEventListener('mousemove', handleDocumentClickMove);
         document.addEventListener('touchmove', handleDocumentClickMove);
         document.addEventListener('mouseup', handleDocumentClickEnd);
@@ -5232,7 +5233,7 @@ const TimePicker = () => {
         const x = clickPos.x - state.x0;
         const y = clickPos.y - state.y0;
         state.moved = true;
-        setHand(x, y, false);
+        setHand(x, y, options.roundBy5);
         m.redraw();
     };
     const handleDocumentClickEnd = (e) => {
@@ -7812,9 +7813,19 @@ 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'
+    '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
@@ -7844,31 +7855,42 @@ const renderIcon = (icon, style) => {
     return null;
 };
 /**
- * Helper function to render a single sidenav item (for header/footer items)
+ * Sidenav Header/Footer Item Component
  */
-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));
+const SidenavHeaderFooterItem = () => {
+    return {
+        view: ({ attrs }) => {
+            const { text, icon, onclick, href, className = '', _isExpanded = true, _position = 'left' } = attrs;
+            const isRightAligned = _position === 'right';
+            const handleClick = (e) => {
+                if (onclick) {
+                    e.preventDefault();
+                    onclick(e);
+                }
+            };
+            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: handleClick,
+                style: linkStyle,
+            }, content));
+        },
+    };
 };
 /**
  * Sidenav Component
@@ -7993,7 +8015,8 @@ const Sidenav = () => {
                             style: { width: '24px', height: '24px' },
                         })),
                     // Header item (if provided, appears before expand/collapse toggle)
-                    attrs.header && renderSidenavItem(attrs.header, isExpanded, position),
+                    attrs.header &&
+                        m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.header), { _isExpanded: isExpanded, _position: position })),
                     // Expand/collapse toggle button (if expandable, right below hamburger)
                     expandable &&
                         m('li.sidenav-expand-toggle', {
@@ -8008,8 +8031,12 @@ const Sidenav = () => {
                             onclick: () => toggleExpanded(attrs),
                         }, m(MaterialIcon, {
                             name: position === 'right'
-                                ? (isExpanded ? 'chevron_right' : 'chevron_left')
-                                : (isExpanded ? 'chevron_left' : 'chevron_right'),
+                                ? isExpanded
+                                    ? 'chevron_right'
+                                    : 'chevron_left'
+                                : isExpanded
+                                    ? 'chevron_left'
+                                    : 'chevron_right',
                             style: { width: '24px', height: '24px' },
                         })),
                     // Children (menu items) - inject internal props
@@ -8023,7 +8050,8 @@ const Sidenav = () => {
                         })
                         : children,
                     // Footer item (if provided, appears at the bottom)
-                    attrs.footer && renderSidenavItem(attrs.footer, isExpanded, position),
+                    attrs.footer &&
+                        m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.footer), { _isExpanded: isExpanded, _position: position, className: 'sidenav-footer-item' })),
                 ]),
             ];
         },
@@ -8056,7 +8084,7 @@ const NavbarSubItem = () => {
             const submenuContent = isRightAligned
                 ? [
                     // Right-aligned: text on left, icons on right
-                    isExpanded && m('span', { style: { 'flex': '1', 'text-align': 'left' } }, text),
+                    isExpanded && m('span', { style: { flex: '1', 'text-align': 'left' } }, text),
                     icon && isExpanded && renderIcon(icon, { 'font-size': '18px' }),
                     indicatorIcon,
                 ]
@@ -8100,12 +8128,7 @@ const SidenavItem = () => {
                 return m('li.subheader', text || children);
             }
             const hasSubmenu = submenu && submenu.length > 0;
-            const itemClasses = [
-                active ? 'active' : '',
-                disabled ? 'disabled' : '',
-                hasSubmenu ? 'has-submenu' : '',
-                className,
-            ]
+            const itemClasses = [active ? 'active' : '', disabled ? 'disabled' : '', hasSubmenu ? 'has-submenu' : '', className]
                 .filter(Boolean)
                 .join(' ') || undefined;
             const handleMainClick = (e) => {
@@ -8114,6 +8137,7 @@ const SidenavItem = () => {
                     isSubmenuOpen = active ? !isSubmenuOpen : true;
                 }
                 if (onclick && !disabled) {
+                    e.preventDefault();
                     onclick(e);
                 }
             };
@@ -8126,13 +8150,14 @@ const SidenavItem = () => {
             const content = isRightAligned
                 ? [
                     // 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),
-                    renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
+                    isExpanded &&
+                        m('span.sidenav-item-text', { style: { flex: '1', 'text-align': 'left', 'margin-right': '8px' } }, text || children),
+                    renderIcon(icon, { 'min-width': '24px', width: '24px' }),
                 ]
                 : [
                     // Left-aligned: icon on left, text on right
-                    renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
-                    isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', 'flex': '1' } }, text || children),
+                    renderIcon(icon, { 'min-width': '24px', width: '24px' }),
+                    isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', flex: '1' } }, text || children),
                 ];
             const linkStyle = {
                 display: 'flex',

package/dist/index.js

@@ -3302,8 +3302,8 @@ const InputField = (type, defaultClass = '') => () => {
             const shouldValidate = !isNonInteractive && (validate || type === 'email' || type === 'url' || isNumeric);
             return m('.input-field', { className: cn, style }, [
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
-                m('input', Object.assign(Object.assign({ class: shouldValidate ? 'validate' : undefined }, params), { type, tabindex: 0, id,
-                    placeholder, value: controlled ? value : undefined, class: type === 'range' && attrs.vertical ? 'range-slider vertical' : undefined, style: type === 'range' && attrs.vertical
+                m('input', Object.assign(Object.assign({ class: type === 'range' && attrs.vertical ? 'range-slider vertical' : shouldValidate ? 'validate' : undefined }, params), { type, tabindex: 0, id,
+                    placeholder, value: controlled ? value : undefined, style: type === 'range' && attrs.vertical
                         ? {
                             height: attrs.height || '200px',
                             width: '6px',
@@ -4896,7 +4896,7 @@ const ModalPanel = () => {
                     closeModal(attrs);
                 }
             }
-            const { id, title, description, fixedFooter, bottomSheet, buttons, richContent, className, showCloseButton = true, closeOnBackdropClick = true, } = attrs;
+            const { id, title, description, fixedFooter, bottomSheet, buttons, richContent, className, showCloseButton = true, closeOnBackdropClick = true, closeOnButtonClick = true, } = attrs;
             const modalClasses = [
                 'modal',
                 className || '',
@@ -4993,7 +4993,7 @@ const ModalPanel = () => {
                         }, buttons.map((buttonProps) => m(FlatButton, Object.assign(Object.assign({}, buttonProps), { className: `modal-close ${buttonProps.className || ''}`, onclick: (e) => {
                                 if (buttonProps.onclick)
                                     buttonProps.onclick(e);
-                                closeModal(attrs);
+                                closeOnButtonClick && closeModal(attrs);
                             } })))),
                 ]),
             ]);
@@ -5171,6 +5171,7 @@ const defaultOptions = {
     autoClose: false,
     twelveHour: true,
     vibrate: true,
+    roundBy5: false,
     onOpen: () => { },
     onOpenStart: () => { },
     onOpenEnd: () => { },
@@ -5222,7 +5223,7 @@ const TimePicker = () => {
         const clickPos = getPos(e);
         state.dx = clickPos.x - state.x0;
         state.dy = clickPos.y - state.y0;
-        setHand(state.dx, state.dy, false);
+        setHand(state.dx, state.dy, options.roundBy5);
         document.addEventListener('mousemove', handleDocumentClickMove);
         document.addEventListener('touchmove', handleDocumentClickMove);
         document.addEventListener('mouseup', handleDocumentClickEnd);
@@ -5234,7 +5235,7 @@ const TimePicker = () => {
         const x = clickPos.x - state.x0;
         const y = clickPos.y - state.y0;
         state.moved = true;
-        setHand(x, y, false);
+        setHand(x, y, options.roundBy5);
         m.redraw();
     };
     const handleDocumentClickEnd = (e) => {
@@ -7814,9 +7815,19 @@ 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'
+    '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
@@ -7846,31 +7857,42 @@ const renderIcon = (icon, style) => {
     return null;
 };
 /**
- * Helper function to render a single sidenav item (for header/footer items)
+ * Sidenav Header/Footer Item Component
  */
-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));
+const SidenavHeaderFooterItem = () => {
+    return {
+        view: ({ attrs }) => {
+            const { text, icon, onclick, href, className = '', _isExpanded = true, _position = 'left' } = attrs;
+            const isRightAligned = _position === 'right';
+            const handleClick = (e) => {
+                if (onclick) {
+                    e.preventDefault();
+                    onclick(e);
+                }
+            };
+            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: handleClick,
+                style: linkStyle,
+            }, content));
+        },
+    };
 };
 /**
  * Sidenav Component
@@ -7995,7 +8017,8 @@ const Sidenav = () => {
                             style: { width: '24px', height: '24px' },
                         })),
                     // Header item (if provided, appears before expand/collapse toggle)
-                    attrs.header && renderSidenavItem(attrs.header, isExpanded, position),
+                    attrs.header &&
+                        m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.header), { _isExpanded: isExpanded, _position: position })),
                     // Expand/collapse toggle button (if expandable, right below hamburger)
                     expandable &&
                         m('li.sidenav-expand-toggle', {
@@ -8010,8 +8033,12 @@ const Sidenav = () => {
                             onclick: () => toggleExpanded(attrs),
                         }, m(MaterialIcon, {
                             name: position === 'right'
-                                ? (isExpanded ? 'chevron_right' : 'chevron_left')
-                                : (isExpanded ? 'chevron_left' : 'chevron_right'),
+                                ? isExpanded
+                                    ? 'chevron_right'
+                                    : 'chevron_left'
+                                : isExpanded
+                                    ? 'chevron_left'
+                                    : 'chevron_right',
                             style: { width: '24px', height: '24px' },
                         })),
                     // Children (menu items) - inject internal props
@@ -8025,7 +8052,8 @@ const Sidenav = () => {
                         })
                         : children,
                     // Footer item (if provided, appears at the bottom)
-                    attrs.footer && renderSidenavItem(attrs.footer, isExpanded, position),
+                    attrs.footer &&
+                        m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.footer), { _isExpanded: isExpanded, _position: position, className: 'sidenav-footer-item' })),
                 ]),
             ];
         },
@@ -8058,7 +8086,7 @@ const NavbarSubItem = () => {
             const submenuContent = isRightAligned
                 ? [
                     // Right-aligned: text on left, icons on right
-                    isExpanded && m('span', { style: { 'flex': '1', 'text-align': 'left' } }, text),
+                    isExpanded && m('span', { style: { flex: '1', 'text-align': 'left' } }, text),
                     icon && isExpanded && renderIcon(icon, { 'font-size': '18px' }),
                     indicatorIcon,
                 ]
@@ -8102,12 +8130,7 @@ const SidenavItem = () => {
                 return m('li.subheader', text || children);
             }
             const hasSubmenu = submenu && submenu.length > 0;
-            const itemClasses = [
-                active ? 'active' : '',
-                disabled ? 'disabled' : '',
-                hasSubmenu ? 'has-submenu' : '',
-                className,
-            ]
+            const itemClasses = [active ? 'active' : '', disabled ? 'disabled' : '', hasSubmenu ? 'has-submenu' : '', className]
                 .filter(Boolean)
                 .join(' ') || undefined;
             const handleMainClick = (e) => {
@@ -8116,6 +8139,7 @@ const SidenavItem = () => {
                     isSubmenuOpen = active ? !isSubmenuOpen : true;
                 }
                 if (onclick && !disabled) {
+                    e.preventDefault();
                     onclick(e);
                 }
             };
@@ -8128,13 +8152,14 @@ const SidenavItem = () => {
             const content = isRightAligned
                 ? [
                     // 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),
-                    renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
+                    isExpanded &&
+                        m('span.sidenav-item-text', { style: { flex: '1', 'text-align': 'left', 'margin-right': '8px' } }, text || children),
+                    renderIcon(icon, { 'min-width': '24px', width: '24px' }),
                 ]
                 : [
                     // Left-aligned: icon on left, text on right
-                    renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
-                    isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', 'flex': '1' } }, text || children),
+                    renderIcon(icon, { 'min-width': '24px', width: '24px' }),
+                    isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', flex: '1' } }, text || children),
                 ];
             const linkStyle = {
                 display: 'flex',