mithril-materialized 3.5.8 → 3.5.10

package/dist/index.js

@@ -1411,19 +1411,18 @@ const CollapsibleItem = () => {
                         onclick: onToggle,
                     }, [
                         iconName ? m('i.material-icons', iconName) : undefined,
-                        header ? (typeof header === 'string' ? m('span', header) : header) : undefined,
+                        header
+                            ? typeof header === 'string'
+                                ? m('span.collapsible-header-text', header)
+                                : m('.collapsible-header-content', header)
+                            : undefined,
                     ])
                     : undefined,
                 m('.collapsible-body', {
                     style: {
                         display: isActive ? 'block' : 'none',
-                        transition: 'display 0.3s ease',
                     },
-                }, [
-                    m('.collapsible-body-content', {
-                        style: { padding: '2rem' },
-                    }, body ? (typeof body === 'string' ? m('div', { innerHTML: body }) : body) : undefined),
-                ]),
+                }, body ? (typeof body === 'string' ? m('div', { innerHTML: body }) : body) : undefined),
             ]);
         },
     };
@@ -1446,7 +1445,7 @@ const Collapsible = () => {
             });
         },
         view: ({ attrs }) => {
-            const { items, accordion = true, class: c, className, style, id } = attrs;
+            const { items, header, accordion = true, class: c, className, style, id } = attrs;
             const toggleItem = (index) => {
                 if (accordion) {
                     // Accordion mode: only one item can be active
@@ -1468,12 +1467,22 @@ const Collapsible = () => {
                     }
                 }
             };
+            const collapsibleItems = items.map((item, index) => m(CollapsibleItem, Object.assign(Object.assign({}, item), { key: index, isActive: state.activeItems.has(index), onToggle: () => toggleItem(index) })));
             return items && items.length > 0
-                ? m('ul.collapsible', {
-                    class: c || className,
-                    style: Object.assign({ border: '1px solid #ddd', borderRadius: '2px', margin: '0.5rem 0 1rem 0' }, style),
-                    id,
-                }, items.map((item, index) => m(CollapsibleItem, Object.assign(Object.assign({}, item), { key: index, isActive: state.activeItems.has(index), onToggle: () => toggleItem(index) }))))
+                ? header
+                    ? m('ul.collapsible.with-header', {
+                        class: c || className,
+                        style,
+                        id,
+                    }, [
+                        m('li.collapsible-main-header', m('h4', typeof header === 'string' ? header : header)),
+                        collapsibleItems,
+                    ])
+                    : m('ul.collapsible', {
+                        class: c || className,
+                        style,
+                        id,
+                    }, collapsibleItems)
                 : undefined;
         },
     };
@@ -1577,7 +1586,7 @@ const Collection = () => {
     };
 };
 
-const defaultI18n$2 = {
+const defaultI18n$3 = {
     cancel: 'Cancel',
     clear: 'Clear',
     done: 'Ok',
@@ -1685,9 +1694,9 @@ const DatePicker = () => {
         else if (attrs.displayFormat) {
             finalFormat = attrs.displayFormat;
         }
-        const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n$2, onSelect: null, onOpen: null, onClose: null }, attrs);
+        const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n$3, onSelect: null, onOpen: null, onClose: null }, attrs);
         // Merge i18n properly
-        merged.i18n = Object.assign(Object.assign({}, defaultI18n$2), attrs.i18n);
+        merged.i18n = Object.assign(Object.assign({}, defaultI18n$3), attrs.i18n);
         return merged;
     };
     const toString = (date, format) => {
@@ -2138,11 +2147,11 @@ const DatePicker = () => {
                             prevMonth();
                         },
                     }, m('svg', {
-                        fill: '#000000',
                         height: '24',
                         viewBox: '0 0 24 24',
                         width: '24',
                         xmlns: 'http://www.w3.org/2000/svg',
+                        style: 'fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));',
                     }, [
                         m('path', { d: 'M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z' }),
                         m('path', { d: 'M0-.5h24v24H0z', fill: 'none' }),
@@ -2204,11 +2213,11 @@ const DatePicker = () => {
                             nextMonth();
                         },
                     }, m('svg', {
-                        fill: '#000000',
                         height: '24',
                         viewBox: '0 0 24 24',
                         width: '24',
                         xmlns: 'http://www.w3.org/2000/svg',
+                        style: 'fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));',
                     }, [
                         m('path', { d: 'M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z' }),
                         m('path', { d: 'M0-.25h24v24H0z', fill: 'none' }),
@@ -3221,19 +3230,29 @@ const TextArea = () => {
                             if (!controlled && attrs.defaultValue !== undefined) {
                                 textarea.value = String(attrs.defaultValue);
                             }
-                            // Height will be calculated by hidden div
                             // Update character count state for counter component
                             if (maxLength) {
                                 state.currentLength = textarea.value.length;
                             }
+                            // Calculate initial height after DOM is fully ready
+                            // Use requestAnimationFrame to ensure layout is complete
+                            if (state.hiddenDiv) {
+                                requestAnimationFrame(() => {
+                                    if (state.hiddenDiv) {
+                                        updateHeight(textarea, state.hiddenDiv);
+                                        m.redraw();
+                                    }
+                                });
+                            }
                         }, onupdate: ({ dom }) => {
                             const textarea = dom;
-                            if (state.height)
-                                textarea.style.height = state.height;
-                            // Trigger height recalculation when value changes programmatically
+                            // Recalculate and apply height
                             if (state.hiddenDiv) {
                                 updateHeight(textarea, state.hiddenDiv);
                             }
+                            if (state.height) {
+                                textarea.style.height = state.height;
+                            }
                         }, onfocus: () => {
                             state.active = true;
                         }, oninput: (e) => {
@@ -4774,7 +4793,7 @@ const FloatingActionButton = () => {
 
 /**
  * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
- * No MaterializeCSS dependencies
+ * Uses CSS classes from _materialbox.scss
  */
 const MaterialBox = () => {
     const state = {
@@ -4790,21 +4809,11 @@ const MaterialBox = () => {
         state.originalImage = img;
         if (attrs.onOpenStart)
             attrs.onOpenStart();
+        const inDuration = attrs.inDuration || 275;
         // Create overlay
         const overlay = document.createElement('div');
         overlay.className = 'materialbox-overlay';
-        overlay.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: rgba(0, 0, 0, 0.85);
-      z-index: 1000;
-      opacity: 0;
-      transition: opacity ${attrs.inDuration || 275}ms ease;
-      cursor: zoom-out;
-    `;
+        overlay.style.transition = `opacity ${inDuration}ms ease`;
         // Create enlarged image
         const enlargedImg = document.createElement('img');
         enlargedImg.src = img.src;
@@ -4825,36 +4834,18 @@ const MaterialBox = () => {
             finalWidth = maxHeight * aspectRatio;
         }
         // Set initial position and size (same as original image)
-        enlargedImg.style.cssText = `
-      position: fixed;
-      top: ${imgRect.top}px;
-      left: ${imgRect.left}px;
-      width: ${imgRect.width}px;
-      height: ${imgRect.height}px;
-      transition: all ${attrs.inDuration || 275}ms ease;
-      cursor: zoom-out;
-      max-width: none;
-      z-index: 1001;
-    `;
+        enlargedImg.style.top = `${imgRect.top}px`;
+        enlargedImg.style.left = `${imgRect.left}px`;
+        enlargedImg.style.width = `${imgRect.width}px`;
+        enlargedImg.style.height = `${imgRect.height}px`;
+        enlargedImg.style.transition = `all ${inDuration}ms ease`;
         // Add caption if provided
         let caption = null;
         if (attrs.caption) {
             caption = document.createElement('div');
             caption.className = 'materialbox-caption';
             caption.textContent = attrs.caption;
-            caption.style.cssText = `
-        position: fixed;
-        bottom: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-        color: white;
-        font-size: 16px;
-        text-align: center;
-        opacity: 0;
-        transition: opacity ${attrs.inDuration || 275}ms ease ${attrs.inDuration || 275}ms;
-        z-index: 1002;
-        pointer-events: none;
-      `;
+            caption.style.transition = `opacity ${inDuration}ms ease ${inDuration}ms`;
         }
         // Add to DOM
         document.body.appendChild(overlay);
@@ -4889,7 +4880,7 @@ const MaterialBox = () => {
         setTimeout(() => {
             if (attrs.onOpenEnd)
                 attrs.onOpenEnd();
-        }, attrs.inDuration || 275);
+        }, inDuration);
     };
     const closeBox = (attrs) => {
         if (!state.isOpen || !state.originalImage || !state.overlay || !state.overlayImage)
@@ -4946,8 +4937,14 @@ const MaterialBox = () => {
         },
         view: ({ attrs }) => {
             const { src, alt, width, height, caption, className, style } = attrs, otherAttrs = __rest(attrs, ["src", "alt", "width", "height", "caption", "className", "style"]);
+            // Build style attribute - handle both string and object styles
+            let imgStyle = style || {};
+            if (typeof style !== 'string') {
+                // If style is an object or undefined, add default styles as object
+                imgStyle = Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, (style || {}));
+            }
             return m('img.materialboxed', Object.assign(Object.assign({}, otherAttrs), { src, alt: alt || '', width,
-                height, className: ['materialboxed', className].filter(Boolean).join(' ') || undefined, style: Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, style), onclick: (e) => {
+                height, className: ['materialboxed', className].filter(Boolean).join(' ') || undefined, style: imgStyle, onclick: (e) => {
                     e.preventDefault();
                     openBox(e.target, attrs);
                 } }));
@@ -5020,7 +5017,7 @@ const ModalPanel = () => {
                     closeModal(attrs);
                 }
             }
-            const { id, title, description, fixedFooter, bottomSheet, buttons, richContent, className, showCloseButton = true, closeOnBackdropClick = true, closeOnButtonClick = true, } = attrs;
+            const { id, title, description, fixedFooter, bottomSheet, buttons, richContent, className, showCloseButton = true, closeOnBackdropClick = true, closeOnButtonClick = false, } = attrs;
             const modalClasses = [
                 'modal',
                 className || '',
@@ -5277,6 +5274,11 @@ const Parallax = () => {
     };
 };
 
+const defaultI18n$2 = {
+    cancel: 'Cancel',
+    clear: 'Clear',
+    done: 'Ok',
+};
 const defaultOptions = {
     dialRadius: 135,
     outerRadius: 105,
@@ -5287,11 +5289,7 @@ const defaultOptions = {
     defaultTime: 'now',
     fromNow: 0,
     showClearBtn: false,
-    i18n: {
-        cancel: 'Cancel',
-        clear: 'Clear',
-        done: 'Ok',
-    },
+    i18n: defaultI18n$2,
     autoClose: false,
     twelveHour: true,
     vibrate: true,
@@ -5441,7 +5439,7 @@ const TimePicker = () => {
         state.hours = hours;
         state.minutes = minutes;
         if (state.spanHours) {
-            state.spanHours.innerHTML = state.hours.toString();
+            state.spanHours.innerHTML = addLeadingZero(state.hours);
         }
         if (state.spanMinutes) {
             state.spanMinutes.innerHTML = addLeadingZero(state.minutes);
@@ -5549,7 +5547,7 @@ const TimePicker = () => {
         }
         state[state.currentView] = value;
         if (isHours && state.spanHours) {
-            state.spanHours.innerHTML = value.toString();
+            state.spanHours.innerHTML = addLeadingZero(value);
         }
         else if (!isHours && state.spanMinutes) {
             state.spanMinutes.innerHTML = addLeadingZero(value);
@@ -5683,7 +5681,7 @@ const TimePicker = () => {
     const TimepickerModal = () => {
         return {
             view: ({ attrs }) => {
-                const { showClearBtn, clearLabel, closeLabel, doneLabel } = attrs;
+                const { i18n, showClearBtn } = attrs;
                 return [
                     m('.modal-content.timepicker-container', [
                         m('.timepicker-digital-display', [
@@ -5695,7 +5693,7 @@ const TimePicker = () => {
                                         oncreate: (vnode) => {
                                             state.spanHours = vnode.dom;
                                         },
-                                    }, state.hours.toString()),
+                                    }, addLeadingZero(state.hours)),
                                     ':',
                                     m('span.timepicker-span-minutes', {
                                         class: state.currentView === 'minutes' ? 'text-primary' : '',
@@ -5775,18 +5773,18 @@ const TimePicker = () => {
                                     tabindex: options.twelveHour ? '3' : '1',
                                     style: showClearBtn ? '' : 'visibility: hidden;',
                                     onclick: () => clear(),
-                                }, clearLabel),
+                                }, i18n.clear),
                                 m('.confirmation-btns', [
                                     m('button.btn-flat.timepicker-close.waves-effect', {
                                         type: 'button',
                                         tabindex: options.twelveHour ? '3' : '1',
                                         onclick: () => close(),
-                                    }, closeLabel),
+                                    }, i18n.cancel),
                                     m('button.btn-flat.timepicker-close.waves-effect', {
                                         type: 'button',
                                         tabindex: options.twelveHour ? '3' : '1',
                                         onclick: () => done(),
-                                    }, doneLabel),
+                                    }, i18n.done),
                                 ]),
                             ]),
                         ]),
@@ -5803,7 +5801,6 @@ const TimePicker = () => {
         }
     };
     const renderPickerToPortal = (attrs) => {
-        const { showClearBtn = false, clearLabel = 'Clear', closeLabel = 'Cancel' } = attrs;
         const pickerModal = m('.timepicker-modal-wrapper', {
             style: {
                 position: 'fixed',
@@ -5846,10 +5843,8 @@ const TimePicker = () => {
                 },
             }, [
                 m(TimepickerModal, {
-                    showClearBtn,
-                    clearLabel,
-                    closeLabel,
-                    doneLabel: 'OK',
+                    i18n: options.i18n,
+                    showClearBtn: options.showClearBtn,
                 }),
             ]),
         ]);
@@ -5909,7 +5904,7 @@ const TimePicker = () => {
             }
         },
         view: ({ attrs }) => {
-            const { id = state.id, label, placeholder, disabled, readonly, required, iconName, helperText, onchange, oninput, useModal = true, showClearBtn = false, clearLabel = 'Clear', closeLabel = 'Cancel', twelveHour, className: cn1, class: cn2, } = attrs;
+            const { id = state.id, label, placeholder, disabled, readonly, required, iconName, helperText, onchange, oninput, useModal = true, twelveHour, className: cn1, class: cn2, } = attrs;
             const className = cn1 || cn2 || 'col s12';
             // Format time value for display
             const formatTime = (hours, minutes, use12Hour) => {
@@ -6355,7 +6350,7 @@ const Select = () => {
         // Render ungrouped options first
         attrs.options
             .filter((option) => !option.group)
-            .map((option) => m('li', Object.assign({ class: option.disabled ? 'disabled' : state.focusedIndex === attrs.options.indexOf(option) ? 'focused' : '' }, (option.disabled
+            .map((option) => m('li', Object.assign({ class: `${option.disabled ? 'disabled' : ''}${isSelected(option.id, selectedIds) ? ' selected' : ''}${state.focusedIndex === attrs.options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
             ? {}
             : {
                 onclick: () => {