mithril-materialized 3.3.8 → 3.4.0

package/dist/button.d.ts

@@ -83,5 +83,6 @@ export declare const Button: m.FactoryComponent<ButtonAttrs>;
 export declare const LargeButton: m.FactoryComponent<ButtonAttrs>;
 export declare const SmallButton: m.FactoryComponent<ButtonAttrs>;
 export declare const FlatButton: m.FactoryComponent<ButtonAttrs>;
+export declare const IconButton: m.FactoryComponent<ButtonAttrs>;
 export declare const RoundIconButton: m.FactoryComponent<ButtonAttrs>;
 export declare const SubmitButton: m.FactoryComponent<ButtonAttrs>;

package/dist/components.css

@@ -977,6 +977,20 @@ button.btn-floating {
   display: block;
 }
 
+.btn-flat.btn-icon {
+  min-width: auto;
+  padding: 0 8px;
+  width: auto;
+  line-height: 36px;
+  background-color: transparent !important;
+}
+.btn-flat.btn-icon i {
+  margin: 0;
+}
+.btn-flat.btn-icon:hover, .btn-flat.btn-icon:focus, .btn-flat.btn-icon:active, .btn-flat.btn-icon.active {
+  background-color: transparent !important;
+}
+
 .modal:focus {
   outline: none;
 }
@@ -4245,6 +4259,11 @@ body {
 .theme-switcher .theme-switcher-buttons .btn-flat .material-icons {
   font-size: 1rem;
 }
+.theme-switcher .theme-switcher-buttons .btn-flat svg {
+  width: 1rem !important;
+  height: 1rem !important;
+  flex-shrink: 0;
+}
 .theme-switcher .theme-switcher-buttons .btn-flat span {
   font-size: 0.75rem;
   font-weight: 500;
@@ -4271,6 +4290,9 @@ body {
 .theme-toggle .material-icons {
   font-size: 1.25rem;
 }
+.theme-toggle svg {
+  flex-shrink: 0;
+}
 
 nav .theme-toggle {
   background: transparent;

package/dist/forms.css

@@ -2722,6 +2722,11 @@ input[type=range]::-ms-thumb {
 .theme-switcher .theme-switcher-buttons .btn-flat .material-icons {
   font-size: 1rem;
 }
+.theme-switcher .theme-switcher-buttons .btn-flat svg {
+  width: 1rem !important;
+  height: 1rem !important;
+  flex-shrink: 0;
+}
 .theme-switcher .theme-switcher-buttons .btn-flat span {
   font-size: 0.75rem;
   font-weight: 500;
@@ -2748,6 +2753,9 @@ input[type=range]::-ms-thumb {
 .theme-toggle .material-icons {
   font-size: 1.25rem;
 }
+.theme-toggle svg {
+  flex-shrink: 0;
+}
 
 nav .theme-toggle {
   background: transparent;

package/dist/index.css

@@ -5234,6 +5234,20 @@ button.btn-floating {
   display: block;
 }
 
+.btn-flat.btn-icon {
+  min-width: auto;
+  padding: 0 8px;
+  width: auto;
+  line-height: 36px;
+  background-color: transparent !important;
+}
+.btn-flat.btn-icon i {
+  margin: 0;
+}
+.btn-flat.btn-icon:hover, .btn-flat.btn-icon:focus, .btn-flat.btn-icon:active, .btn-flat.btn-icon.active {
+  background-color: transparent !important;
+}
+
 .dropdown-content:focus {
   outline: 0;
 }
@@ -9060,6 +9074,11 @@ input[type=range]::-ms-thumb {
 .theme-switcher .theme-switcher-buttons .btn-flat .material-icons {
   font-size: 1rem;
 }
+.theme-switcher .theme-switcher-buttons .btn-flat svg {
+  width: 1rem !important;
+  height: 1rem !important;
+  flex-shrink: 0;
+}
 .theme-switcher .theme-switcher-buttons .btn-flat span {
   font-size: 0.75rem;
   font-weight: 500;
@@ -9086,6 +9105,9 @@ input[type=range]::-ms-thumb {
 .theme-toggle .material-icons {
   font-size: 1.25rem;
 }
+.theme-toggle svg {
+  flex-shrink: 0;
+}
 
 nav .theme-toggle {
   background: transparent;

package/dist/index.esm.js

@@ -432,6 +432,103 @@ const Icon = () => ({
     },
 });
 
+/*!
+ * 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.
  *
@@ -445,13 +542,18 @@ const ButtonFactory = (element, defaultClassNames, type = '') => {
                 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);
             },
         };
     };
@@ -460,6 +562,7 @@ const Button = ButtonFactory('a', 'waves-effect waves-light btn', 'button');
 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');
 
@@ -896,7 +999,7 @@ const MaterialIcon = () => {
             };
             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',
             })));
@@ -4344,12 +4447,17 @@ const FloatingActionButton = () => {
                     }
                     : 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 +4468,11 @@ const FloatingActionButton = () => {
                             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))))),
             ]));
         },
@@ -8988,4 +9101,4 @@ const isValidationError = (result) => !isValidationSuccess(result);
 // ============================================================================
 // All types are already exported via individual export declarations above
 
-export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, Timeline, Toast, ToastComponent, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, createBreadcrumb, getDropdownStyles, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, toast, uniqueId, uuid4 };
+export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, Timeline, Toast, ToastComponent, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, createBreadcrumb, getDropdownStyles, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, toast, uniqueId, uuid4 };

package/dist/index.js

@@ -434,6 +434,103 @@ const Icon = () => ({
     },
 });
 
+/*!
+ * 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.
  *
@@ -447,13 +544,18 @@ const ButtonFactory = (element, defaultClassNames, type = '') => {
                 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);
             },
         };
     };
@@ -462,6 +564,7 @@ const Button = ButtonFactory('a', 'waves-effect waves-light btn', 'button');
 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');
 
@@ -898,7 +1001,7 @@ const MaterialIcon = () => {
             };
             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',
             })));
@@ -4346,12 +4449,17 @@ const FloatingActionButton = () => {
                     }
                     : 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)',
@@ -4362,6 +4470,11 @@ const FloatingActionButton = () => {
                             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))))),
             ]));
         },
@@ -9015,6 +9128,7 @@ exports.FlatButton = FlatButton;
 exports.FloatingActionButton = FloatingActionButton;
 exports.HelperText = HelperText;
 exports.Icon = Icon;
+exports.IconButton = IconButton;
 exports.ImageList = ImageList;
 exports.InputCheckbox = InputCheckbox;
 exports.Label = Label;