mithril-materialized 3.5.4 → 3.5.6

package/dist/index.umd.js

@@ -3304,8 +3304,8 @@
                 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',
@@ -4898,7 +4898,7 @@
                         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 || '',
@@ -4995,7 +4995,7 @@
                             }, 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);
                                 } })))),
                     ]),
                 ]);
@@ -5173,6 +5173,7 @@
         autoClose: false,
         twelveHour: true,
         vibrate: true,
+        roundBy5: false,
         onOpen: () => { },
         onOpenStart: () => { },
         onOpenEnd: () => { },
@@ -5224,7 +5225,7 @@
             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);
@@ -5236,7 +5237,7 @@
             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) => {
@@ -7816,9 +7817,19 @@
 
     // 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
@@ -7848,31 +7859,42 @@
         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
@@ -7997,7 +8019,8 @@
                                 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', {
@@ -8012,8 +8035,12 @@
                                 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
@@ -8027,7 +8054,8 @@
                             })
                             : 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' })),
                     ]),
                 ];
             },
@@ -8060,7 +8088,7 @@
                 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,
                     ]
@@ -8104,12 +8132,7 @@
                     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) => {
@@ -8118,6 +8141,7 @@
                         isSubmenuOpen = active ? !isSubmenuOpen : true;
                     }
                     if (onclick && !disabled) {
+                        e.preventDefault();
                         onclick(e);
                     }
                 };
@@ -8130,13 +8154,14 @@
                 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/modal.d.ts

@@ -27,10 +27,12 @@ export interface ModalAttrs extends Attributes {
     onToggle?: (open: boolean) => void;
     /** Called when modal is closed */
     onClose?: () => void;
-    /** Show close button in top right */
+    /** Show close button in top right (default true) */
     showCloseButton?: boolean;
-    /** Close modal when clicking backdrop */
+    /** Close modal when clicking backdrop (default true) */
     closeOnBackdropClick?: boolean;
+    /** Close modal when clicking a button (default true) */
+    closeOnButtonClick?: boolean;
     /** Close modal when pressing escape key */
     closeOnEsc?: boolean;
 }

package/dist/timepicker.d.ts

@@ -19,6 +19,7 @@ export interface TimepickerOptions {
     autoClose?: boolean;
     twelveHour?: boolean;
     vibrate?: boolean;
+    roundBy5?: boolean;
     onOpen?: () => void;
     onOpenStart?: () => void;
     onOpenEnd?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.5.4",
+  "version": "3.5.6",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -38,7 +38,7 @@
     "build": "rollup -c rollup.config.mjs && npm run build:css-min",
     "build:css-min": "sass --no-source-map --style=compressed --no-charset ./src/index.scss ./dist/index.min.css && npm run build:css-modules",
     "build:css-modules": "sass --no-source-map ./src/core.scss ./dist/core.css && sass --no-source-map ./src/components.scss ./dist/components.css && sass --no-source-map ./src/forms.scss ./dist/forms.css && sass --no-source-map ./src/pickers.scss ./dist/pickers.css && sass --no-source-map ./src/advanced.scss ./dist/advanced.css && sass --no-source-map ./src/utilities.scss ./dist/utilities.css",
-    "dev": "concurrently \"rollup -c rollup.config.mjs -w\" \"npm run css:watch\"",
+    "dev": "concurrently \"rollup -c rollup.config.mjs -w\" \"pnpm run css:watch\"",
     "start": "pnpm run dev",
     "clean": "rimraf dist node_modules/.cache",
     "test": "jest",
@@ -55,7 +55,7 @@
     "dry-run": "npm publish --dry-run",
     "sass:watch": "sass --watch ./sass/materialize.scss ./dist/index.css",
     "css:watch": "sass --watch --no-source-map --style=compressed --no-charset ./src/index.scss ./dist/index.min.css",
-    "dev:full": "npm run dev & npm run css:watch",
+    "dev:full": "pnpm run dev & pnpm run css:watch",
     "patch-release": "npm run clean && npm run build && npm version patch --force -m \"Patch release\" && npm publish && git push --follow-tags",
     "minor-release": "npm run clean && npm run build && npm version minor --force -m \"Minor release\" && npm publish && git push --follow-tags",
     "major-release": "npm run clean && npm run build && npm version major --force -m \"Major release\" && npm publish && git push --follow-tags"
@@ -72,30 +72,29 @@
   "author": "Erik Vullings <erik.vullings@gmail.com> (http://www.tno.nl)",
   "license": "MIT",
   "dependencies": {
-    "mithril": "^2.3.7"
+    "mithril": "^2.3.8"
   },
   "devDependencies": {
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.57.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/mithril": "^2.2.7",
-    "autoprefixer": "^10.4.21",
+    "autoprefixer": "^10.4.23",
     "concurrently": "^9.2.1",
-    "express": "^5.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
-    "js-yaml": "^4.1.0",
-    "rimraf": "^6.1.0",
-    "rollup": "^4.52.5",
+    "js-yaml": "^4.1.1",
+    "rimraf": "^6.1.2",
+    "rollup": "^4.54.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.93.2",
-    "ts-jest": "^29.4.5",
+    "sass": "^1.97.1",
+    "ts-jest": "^29.4.6",
     "tslib": "^2.8.1",
-    "typedoc": "^0.28.14",
+    "typedoc": "^0.28.15",
     "typescript": "^5.9.3"
   }
 }

package/sass/components/_sidenav.scss

@@ -130,6 +130,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;
 
   @extend .z-depth-1 !optional;
   
@@ -590,6 +592,11 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   }
 }
 
+// Footer item positioning
+.sidenav-footer-item {
+  margin-top: auto;
+}
+
 // Animation for smooth width transitions
 .sidenav {
   transition: transform 0.3s ease, width 0.3s ease;