mithril-materialized 3.3.7 → 3.4.0

package/dist/index.umd.js

@@ -436,6 +436,103 @@
         },
     });
 
+    /*!
+     * Waves Effect for Mithril Materialized
+     * Based on Waves v0.6.4 by Alfiana E. Sibuea
+     * Adapted for TypeScript and Mithril integration
+     */
+    class WavesEffect {
+        static offset(elem) {
+            const rect = elem.getBoundingClientRect();
+            return {
+                top: rect.top + window.pageYOffset,
+                left: rect.left + window.pageXOffset
+            };
+        }
+        static createRipple(e, element) {
+            // Disable right click
+            if (e.button === 2) {
+                return;
+            }
+            // Create ripple element
+            const ripple = document.createElement('div');
+            ripple.className = 'waves-ripple';
+            // Get click position relative to element
+            const pos = this.offset(element);
+            const relativeY = e.pageY - pos.top;
+            const relativeX = e.pageX - pos.left;
+            // Calculate scale based on element size
+            const scale = (element.clientWidth / 100) * 10;
+            // Set initial ripple position and style
+            ripple.style.cssText = `
+      top: ${relativeY}px;
+      left: ${relativeX}px;
+      transform: scale(0);
+      opacity: 1;
+    `;
+            // Add ripple to element
+            element.appendChild(ripple);
+            // Force reflow and animate
+            ripple.offsetHeight;
+            ripple.style.transform = `scale(${scale})`;
+            ripple.style.opacity = '1';
+            // Store reference for cleanup
+            ripple.setAttribute('data-created', Date.now().toString());
+        }
+        static removeRipples(element) {
+            const ripples = element.querySelectorAll('.waves-ripple');
+            ripples.forEach((ripple) => {
+                const created = parseInt(ripple.getAttribute('data-created') || '0');
+                const age = Date.now() - created;
+                const fadeOut = () => {
+                    ripple.style.opacity = '0';
+                    setTimeout(() => {
+                        if (ripple.parentNode) {
+                            ripple.parentNode.removeChild(ripple);
+                        }
+                    }, this.duration);
+                };
+                if (age >= 350) {
+                    fadeOut();
+                }
+                else {
+                    setTimeout(fadeOut, 350 - age);
+                }
+            });
+        }
+    }
+    WavesEffect.duration = 750;
+    WavesEffect.onMouseDown = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.createRipple(e, element);
+        }
+    };
+    WavesEffect.onMouseUp = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.removeRipples(element);
+        }
+    };
+    WavesEffect.onMouseLeave = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.removeRipples(element);
+        }
+    };
+    WavesEffect.onTouchStart = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.createRipple(e, element);
+        }
+    };
+    WavesEffect.onTouchEnd = (e) => {
+        const element = e.currentTarget;
+        if (element && element.classList.contains('waves-effect')) {
+            WavesEffect.removeRipples(element);
+        }
+    };
+
     /**
      * A factory to create new buttons.
      *
@@ -449,13 +546,18 @@
                     iconName, iconClass, label, className, variant } = attrs, params = __rest(attrs, ["tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "variant"]);
                     // Use variant or fallback to factory type
                     const buttonType = variant || type || 'button';
-                    const cn = [tooltip ? 'tooltipped' : '', defaultClassNames, className]
-                        .filter(Boolean)
-                        .join(' ')
-                        .trim();
+                    const cn = [tooltip ? 'tooltipped' : '', defaultClassNames, className].filter(Boolean).join(' ').trim();
                     // Use tooltipPosition if available, fallback to legacy tooltipPostion
                     const position = tooltipPosition || tooltipPostion || 'top';
-                    return m(element, Object.assign(Object.assign({}, params), { className: cn, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType }), iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
+                    // Add waves effect event handlers if waves-effect class is present
+                    const wavesHandlers = cn.includes('waves-effect') ? {
+                        onmousedown: WavesEffect.onMouseDown,
+                        onmouseup: WavesEffect.onMouseUp,
+                        onmouseleave: WavesEffect.onMouseLeave,
+                        ontouchstart: WavesEffect.onTouchStart,
+                        ontouchend: WavesEffect.onTouchEnd
+                    } : {};
+                    return m(element, Object.assign(Object.assign(Object.assign({}, params), wavesHandlers), { className: cn, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType }), iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
                 },
             };
         };
@@ -464,6 +566,7 @@
     const LargeButton = ButtonFactory('a', 'waves-effect waves-light btn-large', 'button');
     const SmallButton = ButtonFactory('a', 'waves-effect waves-light btn-small', 'button');
     const FlatButton = ButtonFactory('a', 'waves-effect waves-teal btn-flat', 'button');
+    const IconButton = ButtonFactory('button', 'btn-flat btn-icon waves-effect waves-teal', 'button');
     const RoundIconButton = ButtonFactory('button', 'btn-floating btn-large waves-effect waves-light', 'button');
     const SubmitButton = ButtonFactory('button', 'btn waves-effect waves-light', 'submit');
 
@@ -900,7 +1003,7 @@
                 };
                 const rotation = (_a = rotationMap[direction]) !== null && _a !== void 0 ? _a : 0;
                 const transform = rotation ? `rotate(${rotation}deg)` : undefined;
-                return m('svg', Object.assign(Object.assign({}, props), { style: Object.assign({ transform }, style), height: '1lh', width: '24', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' }), iconPaths[name].map((d) => m('path', {
+                return m('svg', Object.assign(Object.assign({}, props), { style: Object.assign({ transform }, style), height: '24px', width: '24px', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' }), iconPaths[name].map((d) => m('path', {
                     d,
                     fill: d.includes('M0 0h24v24H0z') ? 'none' : 'currentColor',
                 })));
@@ -2815,6 +2918,7 @@
             height: undefined,
             active: false,
             textarea: undefined,
+            hiddenDiv: undefined,
             internalValue: '',
         };
         const updateHeight = (textarea, hiddenDiv) => {
@@ -2911,13 +3015,13 @@
                             overflowWrap: 'break-word',
                         },
                         oncreate: ({ dom }) => {
-                            const hiddenDiv = dom;
+                            const hiddenDiv = state.hiddenDiv = dom;
                             if (state.textarea) {
                                 updateHeight(state.textarea, hiddenDiv);
                             }
                         },
                         onupdate: ({ dom }) => {
-                            const hiddenDiv = dom;
+                            const hiddenDiv = state.hiddenDiv = dom;
                             if (state.textarea) {
                                 updateHeight(state.textarea, hiddenDiv);
                             }
@@ -2942,7 +3046,10 @@
                                 const textarea = dom;
                                 if (state.height)
                                     textarea.style.height = state.height;
-                                // No need to manually sync in onupdate since value attribute handles it
+                                // Trigger height recalculation when value changes programmatically
+                                if (state.hiddenDiv) {
+                                    updateHeight(textarea, state.hiddenDiv);
+                                }
                             }, onfocus: () => {
                                 state.active = true;
                             }, oninput: (e) => {
@@ -3102,9 +3209,6 @@
                 const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate, canClear } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate", "canClear"]);
                 // const attributes = toAttrs(params);
                 const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim() || undefined;
-                const isActive = state.active || ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) || placeholder || type === 'color' || type === 'range'
-                    ? true
-                    : false;
                 // Special rendering for minmax range sliders
                 if (type === 'range' && (attrs.minmax || attrs.valueDisplay)) {
                     return m(attrs.minmax ? DoubleRangeSlider : SingleRangeSlider, Object.assign(Object.assign({}, attrs), { state,
@@ -3125,12 +3229,15 @@
                 }
                 else if (isNonInteractive) {
                     // Non-interactive components: prefer defaultValue, fallback to value
-                    value = ((_c = (_b = attrs.defaultValue) !== null && _b !== void 0 ? _b : attrs.value) !== null && _c !== void 0 ? _c : (isNumeric ? 0 : ''));
+                    value = ((_b = (_a = attrs.defaultValue) !== null && _a !== void 0 ? _a : attrs.value) !== null && _b !== void 0 ? _b : (isNumeric ? 0 : ''));
                 }
                 else {
                     // Interactive uncontrolled: use internal state
-                    value = ((_e = (_d = state.internalValue) !== null && _d !== void 0 ? _d : attrs.defaultValue) !== null && _e !== void 0 ? _e : (isNumeric ? 0 : ''));
+                    value = ((_d = (_c = state.internalValue) !== null && _c !== void 0 ? _c : attrs.defaultValue) !== null && _d !== void 0 ? _d : (isNumeric ? 0 : ''));
                 }
+                const isActive = state.active || ((_e = state.inputElement) === null || _e === void 0 ? void 0 : _e.value) || value || placeholder || type === 'color' || type === 'range'
+                    ? true
+                    : false;
                 const rangeType = type === 'range' && !attrs.minmax;
                 return m('.input-field', { className: cn, style }, [
                     iconName ? m('i.material-icons.prefix', iconName) : undefined,
@@ -4344,12 +4451,17 @@
                         }
                         : undefined,
                 }, [
-                    m('a.btn-floating.btn-large', {
+                    m('a.btn-floating.btn-large.waves-effect.waves-light', {
                         className,
+                        onmousedown: WavesEffect.onMouseDown,
+                        onmouseup: WavesEffect.onMouseUp,
+                        onmouseleave: WavesEffect.onMouseLeave,
+                        ontouchstart: WavesEffect.onTouchStart,
+                        ontouchend: WavesEffect.onTouchEnd,
                     }, m('i.material-icons', { className: iconClass }, iconName)),
                     buttons &&
                         buttons.length > 0 &&
-                        m('ul', buttons.map((button, index) => m('li', m(`a.btn-floating.${button.className || 'red'}`, {
+                        m('ul', buttons.map((button, index) => m('li', m(`a.btn-floating.waves-effect.waves-light.${button.className || 'red'}`, {
                             style: {
                                 opacity: state.isOpen ? '1' : '0',
                                 transform: state.isOpen ? 'scale(1)' : 'scale(0.4)',
@@ -4360,6 +4472,11 @@
                                 if (button.onclick)
                                     button.onclick(e);
                             },
+                            onmousedown: WavesEffect.onMouseDown,
+                            onmouseup: WavesEffect.onMouseUp,
+                            onmouseleave: WavesEffect.onMouseLeave,
+                            ontouchstart: WavesEffect.onTouchStart,
+                            ontouchend: WavesEffect.onTouchEnd,
                         }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
                 ]));
             },
@@ -5756,11 +5873,13 @@
     const Select = () => {
         const state = {
             id: '',
+            dropdownId: '',
             isOpen: false,
             focusedIndex: -1,
             inputRef: null,
             dropdownRef: null,
             internalSelectedIds: [],
+            isInsideModal: false,
         };
         const isControlled = (attrs) => attrs.checkedId !== undefined && attrs.onchange !== undefined;
         const isSelected = (id, selectedIds) => {
@@ -5849,9 +5968,124 @@
                 m.redraw();
             }
         };
+        const getPortalStyles = (inputRef) => {
+            if (!inputRef)
+                return {};
+            const rect = inputRef.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            return {
+                position: 'fixed',
+                top: `${rect.bottom}px`,
+                left: `${rect.left}px`,
+                width: `${rect.width}px`,
+                zIndex: 10000, // Higher than modal z-index
+                maxHeight: `${viewportHeight - rect.bottom - 20}px`, // Leave 20px margin from bottom
+            };
+        };
+        const renderDropdownContent = (attrs, selectedIds, multiple, placeholder) => [
+            placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
+            // Render ungrouped options first
+            attrs.options
+                .filter((option) => !option.group)
+                .map((option) => m('li', Object.assign({ key: option.id, class: option.disabled
+                    ? 'disabled'
+                    : state.focusedIndex === attrs.options.indexOf(option)
+                        ? 'focused'
+                        : '' }, (option.disabled
+                ? {}
+                : {
+                    onclick: (e) => {
+                        e.stopPropagation();
+                        toggleOption(option.id, multiple, attrs);
+                    },
+                })), [
+                option.img && m('img', { src: option.img, alt: option.label }),
+                m('span', [
+                    multiple
+                        ? m('label', { for: option.id }, m('input', {
+                            id: option.id,
+                            type: 'checkbox',
+                            checked: selectedIds.includes(option.id),
+                            disabled: option.disabled ? true : undefined,
+                            onclick: (e) => {
+                                e.stopPropagation();
+                            },
+                        }), m('span', option.label))
+                        : m('span', option.label),
+                ].filter(Boolean)),
+            ])),
+            // Render grouped options
+            Object.entries(attrs.options
+                .filter((option) => option.group)
+                .reduce((groups, option) => {
+                const group = option.group;
+                if (!groups[group])
+                    groups[group] = [];
+                groups[group].push(option);
+                return groups;
+            }, {}))
+                .map(([groupName, groupOptions]) => [
+                m('li.optgroup', { key: `group-${groupName}`, tabindex: 0 }, m('span', groupName)),
+                ...groupOptions.map((option) => m('li', Object.assign({ key: option.id, class: `optgroup-option${option.disabled ? ' disabled' : ''}${isSelected(option.id, selectedIds) ? ' selected' : ''}${state.focusedIndex === attrs.options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
+                    ? {}
+                    : {
+                        onclick: (e) => {
+                            e.stopPropagation();
+                            toggleOption(option.id, multiple, attrs);
+                        },
+                    })), [
+                    option.img && m('img', { src: option.img, alt: option.label }),
+                    m('span', [
+                        multiple
+                            ? m('label', { for: option.id }, m('input', {
+                                id: option.id,
+                                type: 'checkbox',
+                                checked: selectedIds.includes(option.id),
+                                disabled: option.disabled ? true : undefined,
+                                onclick: (e) => {
+                                    e.stopPropagation();
+                                },
+                            }), m('span', option.label))
+                            : m('span', option.label),
+                    ].filter(Boolean)),
+                ])),
+            ])
+                .reduce((acc, val) => acc.concat(val), []),
+        ];
+        const updatePortalDropdown = (attrs, selectedIds, multiple, placeholder) => {
+            var _a;
+            if (!state.isInsideModal)
+                return;
+            let portalElement = document.getElementById(state.dropdownId);
+            if (!state.isOpen) {
+                // Clean up portal when dropdown is closed
+                if (portalElement) {
+                    m.render(portalElement, []);
+                    (_a = portalElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(portalElement);
+                }
+                return;
+            }
+            if (!portalElement) {
+                portalElement = document.createElement('div');
+                portalElement.id = state.dropdownId;
+                document.body.appendChild(portalElement);
+            }
+            const dropdownVnode = m('ul.dropdown-content.select-dropdown', {
+                tabindex: 0,
+                style: getPortalStyles(state.inputRef),
+                oncreate: ({ dom }) => {
+                    state.dropdownRef = dom;
+                },
+                onremove: () => {
+                    state.dropdownRef = null;
+                },
+            }, renderDropdownContent(attrs, selectedIds, multiple, placeholder));
+            m.render(portalElement, dropdownVnode);
+        };
         return {
             oninit: ({ attrs }) => {
                 state.id = attrs.id || uniqueId();
+                state.dropdownId = `${state.id}-dropdown`;
                 const controlled = isControlled(attrs);
                 // Warn developer for improper controlled usage
                 if (attrs.checkedId !== undefined && !controlled && !attrs.disabled) {
@@ -5870,9 +6104,20 @@
                 // Add global click listener to close dropdown
                 document.addEventListener('click', closeDropdown);
             },
+            oncreate: ({ dom }) => {
+                // Detect if component is inside a modal
+                state.isInsideModal = !!dom.closest('.modal');
+            },
             onremove: () => {
                 // Cleanup global listener
                 document.removeEventListener('click', closeDropdown);
+                // Cleanup portaled dropdown if it exists
+                if (state.isInsideModal && state.dropdownRef) {
+                    const portalElement = document.getElementById(state.dropdownId);
+                    if (portalElement && portalElement.parentNode) {
+                        portalElement.parentNode.removeChild(portalElement);
+                    }
+                }
             },
             view: ({ attrs }) => {
                 var _a;
@@ -5896,6 +6141,10 @@
                 const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, style, } = attrs;
                 const finalClassName = newRow ? `${className} clear` : className;
                 const selectedOptions = options.filter((opt) => isSelected(opt.id, selectedIds));
+                // Update portal dropdown when inside modal
+                if (state.isInsideModal) {
+                    updatePortalDropdown(attrs, selectedIds, multiple, placeholder);
+                }
                 return m('.input-field.select-space', {
                     className: finalClassName,
                     key,
@@ -5908,6 +6157,7 @@
                         tabindex: disabled ? -1 : 0,
                         'aria-expanded': state.isOpen ? 'true' : 'false',
                         'aria-haspopup': 'listbox',
+                        'aria-controls': state.dropdownId,
                         role: 'combobox',
                     }, [
                         m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
@@ -5924,8 +6174,8 @@
                                 }
                             },
                         }),
-                        // Dropdown Menu
-                        state.isOpen &&
+                        // Dropdown Menu - render inline only when NOT inside modal
+                        state.isOpen && !state.isInsideModal &&
                             m('ul.dropdown-content.select-dropdown', {
                                 tabindex: 0,
                                 oncreate: ({ dom }) => {
@@ -5935,76 +6185,7 @@
                                     state.dropdownRef = null;
                                 },
                                 style: getDropdownStyles(state.inputRef, true, options),
-                            }, [
-                                placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
-                                // Render ungrouped options first
-                                options
-                                    .filter((option) => !option.group)
-                                    .map((option) => m('li', Object.assign({ key: option.id, class: option.disabled
-                                        ? 'disabled'
-                                        : state.focusedIndex === options.indexOf(option)
-                                            ? 'focused'
-                                            : '' }, (option.disabled
-                                    ? {}
-                                    : {
-                                        onclick: (e) => {
-                                            e.stopPropagation();
-                                            toggleOption(option.id, multiple, attrs);
-                                        },
-                                    })), [
-                                    option.img && m('img', { src: option.img, alt: option.label }),
-                                    m('span', [
-                                        multiple
-                                            ? m('label', { for: option.id }, m('input', {
-                                                id: option.id,
-                                                type: 'checkbox',
-                                                checked: selectedIds.includes(option.id),
-                                                disabled: option.disabled ? true : undefined,
-                                                onclick: (e) => {
-                                                    e.stopPropagation();
-                                                },
-                                            }), m('span', option.label))
-                                            : m('span', option.label),
-                                    ].filter(Boolean)),
-                                ])),
-                                // Render grouped options
-                                Object.entries(options
-                                    .filter((option) => option.group)
-                                    .reduce((groups, option) => {
-                                    const group = option.group;
-                                    if (!groups[group])
-                                        groups[group] = [];
-                                    groups[group].push(option);
-                                    return groups;
-                                }, {}))
-                                    .map(([groupName, groupOptions]) => [
-                                    m('li.optgroup', { key: `group-${groupName}`, tabindex: 0 }, m('span', groupName)),
-                                    ...groupOptions.map((option) => m('li', Object.assign({ key: option.id, class: `optgroup-option${option.disabled ? ' disabled' : ''}${isSelected(option.id, selectedIds) ? ' selected' : ''}${state.focusedIndex === options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
-                                        ? {}
-                                        : {
-                                            onclick: (e) => {
-                                                e.stopPropagation();
-                                                toggleOption(option.id, multiple, attrs);
-                                            },
-                                        })), [
-                                        option.img && m('img', { src: option.img, alt: option.label }),
-                                        m('span', [
-                                            multiple
-                                                ? m('label', { for: option.id }, m('input', {
-                                                    id: option.id,
-                                                    type: 'checkbox',
-                                                    checked: selectedIds.includes(option.id),
-                                                    disabled: option.disabled ? true : undefined,
-                                                    onclick: (e) => {
-                                                        e.stopPropagation();
-                                                    },
-                                                }), m('span', option.label))
-                                                : m('span', option.label),
-                                        ].filter(Boolean)),
-                                    ])),
-                                ])
-                                    .reduce((acc, val) => acc.concat(val), []),
-                            ]),
+                            }, renderDropdownContent(attrs, selectedIds, multiple, placeholder)),
                         m(MaterialIcon, {
                             name: 'caret',
                             direction: 'down',
@@ -8949,6 +9130,7 @@
     exports.FloatingActionButton = FloatingActionButton;
     exports.HelperText = HelperText;
     exports.Icon = Icon;
+    exports.IconButton = IconButton;
     exports.ImageList = ImageList;
     exports.InputCheckbox = InputCheckbox;
     exports.Label = Label;

package/dist/waves.d.ts

@@ -0,0 +1,16 @@
+/*!
+ * Waves Effect for Mithril Materialized
+ * Based on Waves v0.6.4 by Alfiana E. Sibuea
+ * Adapted for TypeScript and Mithril integration
+ */
+export declare class WavesEffect {
+    private static duration;
+    private static offset;
+    private static createRipple;
+    private static removeRipples;
+    static onMouseDown: (e: MouseEvent) => void;
+    static onMouseUp: (e: MouseEvent) => void;
+    static onMouseLeave: (e: MouseEvent) => void;
+    static onTouchStart: (e: TouchEvent) => void;
+    static onTouchEnd: (e: TouchEvent) => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.3.7",
+  "version": "3.4.0",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/sass/components/_buttons.scss

@@ -325,3 +325,24 @@ button.btn-floating {
 .btn-block {
   display: block;
 }
+
+// Icon button - compact flat button for icons only
+.btn-flat.btn-icon {
+  min-width: auto;
+  padding: 0 8px;
+  width: auto;
+  line-height: variables.$button-height;
+  background-color: transparent !important;
+
+  i {
+    margin: 0;
+  }
+
+  // Ensure background stays transparent in all states
+  &:hover,
+  &:focus,
+  &:active,
+  &.active {
+    background-color: transparent !important;
+  }
+}

package/sass/components/_theme-switcher.scss

@@ -53,6 +53,12 @@
       .material-icons {
         font-size: 1rem;
       }
+
+      svg {
+        width: 1rem !important;
+        height: 1rem !important;
+        flex-shrink: 0;
+      }
       
       span {
         font-size: 0.75rem;
@@ -84,6 +90,10 @@
   .material-icons {
     font-size: 1.25rem;
   }
+
+  svg {
+    flex-shrink: 0;
+  }
 }
 
 // Navbar theme toggle specific styles