mithril-materialized 2.0.0-beta.10 → 2.0.0-beta.11

package/dist/index.umd.js

@@ -420,12 +420,18 @@
         return () => {
             return {
                 view: ({ attrs }) => {
-                    const { modalId, tooltip, tooltipPostion, iconName, iconClass, label, className, attr } = attrs, params = __rest(attrs, ["modalId", "tooltip", "tooltipPostion", "iconName", "iconClass", "label", "className", "attr"]);
-                    const cn = [modalId ? 'modal-trigger' : '', tooltip ? 'tooltipped' : '', defaultClassNames, className]
+                    const { modalId, tooltip, tooltipPosition, tooltipPostion, // Keep for backwards compatibility
+                    iconName, iconClass, label, className, attr, variant } = attrs, params = __rest(attrs, ["modalId", "tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "attr", "variant"]);
+                    // Handle both new variant prop and legacy modalId/type
+                    const buttonType = (variant === null || variant === void 0 ? void 0 : variant.type) || (modalId ? 'modal' : type || 'button');
+                    const modalTarget = (variant === null || variant === void 0 ? void 0 : variant.type) === 'modal' ? variant.modalId : modalId;
+                    const cn = [modalTarget ? 'modal-trigger' : '', tooltip ? 'tooltipped' : '', defaultClassNames, className]
                         .filter(Boolean)
                         .join(' ')
                         .trim();
-                    return m(element, Object.assign(Object.assign(Object.assign({}, params), attr), { className: cn, href: modalId ? `#${modalId}` : undefined, 'data-position': tooltip ? tooltipPostion || 'top' : undefined, 'data-tooltip': tooltip || undefined, type }), 
+                    // Use tooltipPosition if available, fallback to legacy tooltipPostion
+                    const position = tooltipPosition || tooltipPostion || 'top';
+                    return m(element, Object.assign(Object.assign(Object.assign({}, params), attr), { className: cn, href: modalTarget ? `#${modalTarget}` : undefined, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType === 'modal' ? 'button' : buttonType }), 
                     // `${dca}${modalId ? `.modal-trigger[href=#${modalId}]` : ''}${
                     //   tooltip ? `.tooltipped[data-position=${tooltipPostion || 'top'}][data-tooltip=${tooltip}]` : ''
                     // }${toAttributeString(attr)}`, {}
@@ -2039,248 +2045,6 @@
         };
     };
 
-    /** Pure TypeScript Dropdown component - no Materialize dependencies */
-    const Dropdown = () => {
-        const state = {
-            isOpen: false,
-            initialValue: undefined,
-            id: '',
-            focusedIndex: -1,
-            inputRef: null,
-            dropdownRef: null,
-        };
-        const handleKeyDown = (e, items, onchange) => {
-            const availableItems = items.filter((item) => !item.divider && !item.disabled);
-            switch (e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    if (!state.isOpen) {
-                        state.isOpen = true;
-                        state.focusedIndex = 0;
-                    }
-                    else {
-                        state.focusedIndex = Math.min(state.focusedIndex + 1, availableItems.length - 1);
-                    }
-                    break;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    if (state.isOpen) {
-                        state.focusedIndex = Math.max(state.focusedIndex - 1, 0);
-                    }
-                    break;
-                case 'Enter':
-                case ' ':
-                    e.preventDefault();
-                    if (state.isOpen && state.focusedIndex >= 0 && state.focusedIndex < availableItems.length) {
-                        const selectedItem = availableItems[state.focusedIndex];
-                        const value = (selectedItem.id || selectedItem.label);
-                        state.initialValue = value;
-                        state.isOpen = false;
-                        state.focusedIndex = -1;
-                        if (onchange)
-                            onchange(value);
-                    }
-                    else if (!state.isOpen) {
-                        state.isOpen = true;
-                        state.focusedIndex = 0;
-                    }
-                    break;
-                case 'Escape':
-                    e.preventDefault();
-                    state.isOpen = false;
-                    state.focusedIndex = -1;
-                    break;
-            }
-        };
-        return {
-            oninit: ({ attrs: { id = uniqueId(), initialValue, checkedId } }) => {
-                state.id = id;
-                state.initialValue = initialValue || checkedId;
-                // Mithril will handle click events through the component structure
-            },
-            view: ({ attrs: { key, label, onchange, disabled = false, items, iconName, helperText, style, className = 'col s12' }, }) => {
-                const { initialValue } = state;
-                const selectedItem = initialValue
-                    ? items.filter((i) => (i.id ? i.id === initialValue : i.label === initialValue)).shift()
-                    : undefined;
-                const title = selectedItem ? selectedItem.label : label || 'Select';
-                const availableItems = items.filter((item) => !item.divider && !item.disabled);
-                return m('.dropdown-wrapper.input-field', { className, key, style }, [
-                    iconName ? m('i.material-icons.prefix', iconName) : undefined,
-                    m(HelperText, { helperText }),
-                    m('.select-wrapper', {
-                        onclick: disabled
-                            ? undefined
-                            : () => {
-                                state.isOpen = !state.isOpen;
-                                state.focusedIndex = state.isOpen ? 0 : -1;
-                            },
-                        onkeydown: disabled ? undefined : (e) => handleKeyDown(e, items, onchange),
-                        tabindex: disabled ? -1 : 0,
-                        'aria-expanded': state.isOpen ? 'true' : 'false',
-                        'aria-haspopup': 'listbox',
-                        role: 'combobox',
-                    }, [
-                        m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
-                            id: state.id,
-                            value: title,
-                            oncreate: ({ dom }) => {
-                                state.inputRef = dom;
-                            },
-                            onclick: (e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                if (!disabled) {
-                                    state.isOpen = !state.isOpen;
-                                    state.focusedIndex = state.isOpen ? 0 : -1;
-                                }
-                            },
-                        }),
-                        // Dropdown Menu using Select component's positioning logic
-                        state.isOpen &&
-                            m('ul.dropdown-content.select-dropdown', {
-                                tabindex: 0,
-                                role: 'listbox',
-                                'aria-labelledby': state.id,
-                                oncreate: ({ dom }) => {
-                                    state.dropdownRef = dom;
-                                },
-                                onremove: () => {
-                                    state.dropdownRef = null;
-                                },
-                                style: getDropdownStyles(state.inputRef, true, items.map((item) => (Object.assign(Object.assign({}, item), { 
-                                    // Convert dropdown items to format expected by getDropdownStyles
-                                    group: undefined }))), true),
-                            }, items.map((item, index) => {
-                                if (item.divider) {
-                                    return m('li.divider', {
-                                        key: `divider-${index}`,
-                                    });
-                                }
-                                const itemIndex = availableItems.indexOf(item);
-                                const isFocused = itemIndex === state.focusedIndex;
-                                return m('li', Object.assign({ key: item.id || `item-${index}`, class: [
-                                        item.disabled ? 'disabled' : '',
-                                        isFocused ? 'focused' : '',
-                                        (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label ? 'selected' : '',
-                                    ]
-                                        .filter(Boolean)
-                                        .join(' ') }, (item.disabled
-                                    ? {}
-                                    : {
-                                        onclick: (e) => {
-                                            e.stopPropagation();
-                                            const value = (item.id || item.label);
-                                            state.initialValue = value;
-                                            state.isOpen = false;
-                                            state.focusedIndex = -1;
-                                            if (onchange)
-                                                onchange(value);
-                                        },
-                                    })), m('span', {
-                                    style: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        padding: '14px 16px',
-                                    },
-                                }, [
-                                    item.iconName
-                                        ? m('i.material-icons', {
-                                            style: { marginRight: '32px' },
-                                        }, item.iconName)
-                                        : undefined,
-                                    item.label,
-                                ]));
-                            })),
-                        m(MaterialIcon, {
-                            name: 'caret',
-                            direction: 'down',
-                            class: 'caret',
-                        }),
-                    ]),
-                ]);
-            },
-        };
-    };
-
-    /**
-     * Floating Action Button
-     */
-    const FloatingActionButton = () => {
-        const state = {
-            isOpen: false,
-        };
-        const handleClickOutside = (e) => {
-            const target = e.target;
-            if (!target.closest('.fixed-action-btn')) {
-                state.isOpen = false;
-            }
-        };
-        return {
-            oncreate: () => {
-                document.addEventListener('click', handleClickOutside);
-            },
-            onremove: () => {
-                document.removeEventListener('click', handleClickOutside);
-            },
-            view: ({ attrs: { className, iconName, iconClass, position, style = position === 'left' || position === 'inline-left'
-                ? 'position: absolute; display: inline-block; left: 24px;'
-                : position === 'right' || position === 'inline-right'
-                    ? 'position: absolute; display: inline-block; right: 24px;'
-                    : undefined, buttons, direction = 'top', hoverEnabled = true, }, }) => {
-                const fabClasses = [
-                    'fixed-action-btn',
-                    direction ? `direction-${direction}` : '',
-                    state.isOpen ? 'active' : '',
-                    // hoverEnabled ? 'hover-enabled' : '',
-                ]
-                    .filter(Boolean)
-                    .join(' ');
-                return m('div', {
-                    style: position === 'inline-right' || position === 'inline-left' ? 'position: relative; height: 70px;' : undefined,
-                }, m(`.${fabClasses}`, {
-                    style,
-                    onclick: (e) => {
-                        e.stopPropagation();
-                        if (buttons && buttons.length > 0) {
-                            state.isOpen = !state.isOpen;
-                        }
-                    },
-                    onmouseover: hoverEnabled
-                        ? () => {
-                            if (buttons && buttons.length > 0) {
-                                state.isOpen = true;
-                            }
-                        }
-                        : undefined,
-                    onmouseleave: hoverEnabled
-                        ? () => {
-                            state.isOpen = false;
-                        }
-                        : undefined,
-                }, [
-                    m('a.btn-floating.btn-large', {
-                        className,
-                    }, 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'}`, {
-                            style: {
-                                opacity: state.isOpen ? '1' : '0',
-                                transform: state.isOpen ? 'scale(1)' : 'scale(0.4)',
-                                transition: `all 0.3s ease ${index * 40}ms`,
-                            },
-                            onclick: (e) => {
-                                e.stopPropagation();
-                                if (button.onClick)
-                                    button.onClick(e);
-                            },
-                        }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
-                ]));
-            },
-        };
-    };
-
     /** Character counter component that tracks text length against maxLength */
     const CharacterCounter = () => {
         return {
@@ -2454,7 +2218,8 @@
                     : false;
                 return m('.input-field', { className: cn, style }, [
                     iconName ? m('i.material-icons.prefix', iconName) : undefined,
-                    m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id, 
+                    m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id,
+                        placeholder, 
                         // attributes,
                         oncreate: ({ dom }) => {
                             const input = (state.inputElement = dom);
@@ -2589,80 +2354,1007 @@
                 ]);
             },
         };
-    };
-    /** Component for entering some text */
-    const TextInput = InputField('text');
-    /** Component for entering a password */
-    const PasswordInput = InputField('password');
-    /** Component for entering a number */
-    const NumberInput = InputField('number');
-    /** Component for entering a URL */
-    const UrlInput = InputField('url');
-    /** Component for entering a color */
-    const ColorInput = InputField('color');
-    /** Component for entering a range */
-    const RangeInput = InputField('range', '.range-field');
-    /** Component for entering an email */
-    const EmailInput = InputField('email');
-    /** Component for uploading a file */
-    const FileInput = () => {
-        let canClear = false;
-        let i;
+    };
+    /** Component for entering some text */
+    const TextInput = InputField('text');
+    /** Component for entering a password */
+    const PasswordInput = InputField('password');
+    /** Component for entering a number */
+    const NumberInput = InputField('number');
+    /** Component for entering a URL */
+    const UrlInput = InputField('url');
+    /** Component for entering a color */
+    const ColorInput = InputField('color');
+    /** Component for entering a range */
+    const RangeInput = InputField('range', '.range-field');
+    /** Component for entering an email */
+    const EmailInput = InputField('email');
+    /** Component for uploading a file */
+    const FileInput = () => {
+        let canClear = false;
+        let i;
+        return {
+            view: ({ attrs }) => {
+                const { multiple, disabled, initialValue, placeholder, onchange, className = 'col s12', accept: acceptedFiles, label = 'File', } = attrs;
+                const accept = acceptedFiles
+                    ? acceptedFiles instanceof Array
+                        ? acceptedFiles.join(', ')
+                        : acceptedFiles
+                    : undefined;
+                return m('.file-field.input-field', {
+                    className: attrs.class || className,
+                }, [
+                    m('.btn', [
+                        m('span', label),
+                        m('input[type=file]', {
+                            title: label,
+                            accept,
+                            multiple,
+                            disabled,
+                            onchange: onchange
+                                ? (e) => {
+                                    const i = e.target;
+                                    if (i && i.files && onchange) {
+                                        canClear = true;
+                                        onchange(i.files);
+                                    }
+                                }
+                                : undefined,
+                        }),
+                    ]),
+                    m('.file-path-wrapper', m('input.file-path.validate[type=text]', {
+                        placeholder,
+                        oncreate: ({ dom }) => {
+                            i = dom;
+                            if (initialValue)
+                                i.value = initialValue;
+                        },
+                    })),
+                    (canClear || (i === null || i === void 0 ? void 0 : i.value)) &&
+                        m('a.waves-effect.waves-teal.btn-flat', {
+                            style: {
+                                float: 'right',
+                                position: 'relative',
+                                top: '-3rem',
+                                padding: 0,
+                            },
+                            onclick: () => {
+                                canClear = false;
+                                i.value = '';
+                                onchange && onchange({});
+                            },
+                        }, m(MaterialIcon, {
+                            name: 'close',
+                            className: 'close',
+                        })),
+                ]);
+            },
+        };
+    };
+
+    /** Component to show a check box */
+    const InputCheckbox = () => {
+        return {
+            view: ({ attrs: { className = 'col s12', onchange, label, checked, disabled, description, style, inputId } }) => {
+                const checkboxId = inputId || uniqueId();
+                return m(`p`, { className, style }, m('label', { for: checkboxId }, [
+                    m('input[type=checkbox][tabindex=0]', {
+                        id: checkboxId,
+                        checked,
+                        disabled,
+                        onclick: onchange
+                            ? (e) => {
+                                if (e.target && typeof e.target.checked !== 'undefined') {
+                                    onchange(e.target.checked);
+                                }
+                            }
+                            : undefined,
+                    }),
+                    label ? (typeof label === 'string' ? m('span', label) : label) : undefined,
+                ]), description && m(HelperText, { className: 'input-checkbox-desc', helperText: description }));
+            },
+        };
+    };
+    /** A list of checkboxes */
+    const Options = () => {
+        const state = {};
+        const isChecked = (id) => state.checkedIds.indexOf(id) >= 0;
+        const selectAll = (options, callback) => {
+            const allIds = options.map((option) => option.id);
+            state.checkedIds = [...allIds];
+            if (callback)
+                callback(allIds);
+        };
+        const selectNone = (callback) => {
+            state.checkedIds = [];
+            if (callback)
+                callback([]);
+        };
+        return {
+            oninit: ({ attrs: { initialValue, checkedId, id } }) => {
+                const iv = checkedId || initialValue;
+                state.checkedId = checkedId;
+                state.checkedIds = iv ? (iv instanceof Array ? [...iv] : [iv]) : [];
+                state.componentId = id || uniqueId();
+            },
+            view: ({ attrs: { label, options, description, className = 'col s12', style, disabled, checkboxClass, newRow, isMandatory, layout = 'vertical', showSelectAll = false, onchange: callback, }, }) => {
+                const onchange = callback
+                    ? (propId, checked) => {
+                        const checkedIds = state.checkedIds.filter((i) => i !== propId);
+                        if (checked) {
+                            checkedIds.push(propId);
+                        }
+                        state.checkedIds = checkedIds;
+                        callback(checkedIds);
+                    }
+                    : undefined;
+                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+                const optionsContent = layout === 'horizontal'
+                    ? m('div.grid-container', options.map((option) => m(InputCheckbox, {
+                        disabled: disabled || option.disabled,
+                        label: option.label,
+                        onchange: onchange ? (v) => onchange(option.id, v) : undefined,
+                        className: option.className || checkboxClass,
+                        checked: isChecked(option.id),
+                        description: option.description,
+                        inputId: `${state.componentId}-${option.id}`,
+                    })))
+                    : options.map((option) => m(InputCheckbox, {
+                        disabled: disabled || option.disabled,
+                        label: option.label,
+                        onchange: onchange ? (v) => onchange(option.id, v) : undefined,
+                        className: option.className || checkboxClass,
+                        checked: isChecked(option.id),
+                        description: option.description,
+                        inputId: `${state.componentId}-${option.id}`,
+                    }));
+                return m('div', { id: state.componentId, className: cn, style }, [
+                    label && m('h5.form-group-label', label + (isMandatory ? ' *' : '')),
+                    showSelectAll &&
+                        m('div.select-all-controls', { style: 'margin-bottom: 10px;' }, [
+                            m('a', {
+                                href: '#',
+                                onclick: (e) => {
+                                    e.preventDefault();
+                                    selectAll(options, callback);
+                                },
+                                style: 'margin-right: 15px;',
+                            }, 'Select All'),
+                            m('a', {
+                                href: '#',
+                                onclick: (e) => {
+                                    e.preventDefault();
+                                    selectNone(callback);
+                                },
+                            }, 'Select None'),
+                        ]),
+                    description && m(HelperText, { helperText: description }),
+                    m('form', { action: '#' }, optionsContent),
+                ]);
+            },
+        };
+    };
+
+    const GlobalSearch = () => {
+        return {
+            view: ({ attrs }) => {
+                const { searchPlaceholder, onSearch, i18n } = attrs;
+                return m('.datatable-global-search', m(TextInput, {
+                    className: 'datatable-search',
+                    label: (i18n === null || i18n === void 0 ? void 0 : i18n.search) || 'Search',
+                    placeholder: searchPlaceholder || (i18n === null || i18n === void 0 ? void 0 : i18n.searchPlaceholder) || 'Search table...',
+                    oninput: onSearch,
+                }));
+            },
+        };
+    };
+    const TableHeader = () => {
+        return {
+            view: ({ attrs }) => {
+                const { columns, selection, sort, allSelected, helpers } = attrs;
+                return m('thead', m('tr', [
+                    // Selection column header
+                    ...(selection && selection.mode !== 'none'
+                        ? [
+                            m('th.selection-checkbox', [
+                                selection.mode === 'multiple' &&
+                                    m(InputCheckbox, {
+                                        checked: allSelected,
+                                        onchange: helpers.handleSelectAll,
+                                        className: '',
+                                    }),
+                            ]),
+                        ]
+                        : []),
+                    // Regular columns
+                    ...columns.map((column) => {
+                        const isSorted = (sort === null || sort === void 0 ? void 0 : sort.column) === column.key;
+                        const sortDirection = isSorted ? sort.direction : null;
+                        return m('th', {
+                            class: [
+                                column.headerClassName,
+                                column.sortable ? 'sortable' : '',
+                                isSorted ? `sorted-${sortDirection}` : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' '),
+                            style: column.width ? { width: column.width } : undefined,
+                            onclick: column.sortable ? () => helpers.handleSort(column.key) : undefined,
+                        }, [
+                            column.title,
+                            column.sortable &&
+                                m('.sort-indicators', [
+                                    m('span.sort-icon.sort-asc', {
+                                        className: isSorted && sortDirection === 'asc' ? 'active' : '',
+                                    }, '▲'),
+                                    m('span.sort-icon.sort-desc', {
+                                        className: isSorted && sortDirection === 'desc' ? 'active' : '',
+                                    }, '▼'),
+                                ]),
+                        ]);
+                    }),
+                ]));
+            },
+        };
+    };
+    const TableRow = () => {
+        return {
+            view: ({ attrs }) => {
+                const { row, index, columns, selection, onRowClick, onRowDoubleClick, getRowClassName, helpers, data } = attrs;
+                // Calculate the original data index for the row key
+                const originalIndex = data.findIndex((originalRow) => originalRow === row);
+                const rowKey = (selection === null || selection === void 0 ? void 0 : selection.getRowKey(row, originalIndex)) || String(originalIndex);
+                const isSelected = (selection === null || selection === void 0 ? void 0 : selection.selectedKeys.includes(rowKey)) || false;
+                return m('tr', {
+                    class: [getRowClassName ? getRowClassName(row, index) : '', isSelected ? 'selected' : '']
+                        .filter(Boolean)
+                        .join(' ') || undefined,
+                    onclick: onRowClick ? (e) => onRowClick(row, index, e) : undefined,
+                    ondblclick: onRowDoubleClick ? (e) => onRowDoubleClick(row, index, e) : undefined,
+                }, [
+                    // Selection column
+                    selection &&
+                        selection.mode !== 'none' &&
+                        m('td.selection-checkbox', [
+                            m(InputCheckbox, {
+                                checked: isSelected,
+                                onchange: (checked) => helpers.handleSelectionChange(rowKey, checked),
+                                className: '',
+                            }),
+                        ]),
+                    columns.map((column) => {
+                        const value = helpers.getCellValue(row, column);
+                        let cellContent;
+                        if (column.cellRenderer) {
+                            cellContent = m(column.cellRenderer, {
+                                value,
+                                row,
+                                index,
+                                column,
+                            });
+                        }
+                        else if (column.render) {
+                            // Backward compatibility with deprecated render function
+                            cellContent = column.render(value, row, index);
+                        }
+                        else {
+                            cellContent = String(value || '');
+                        }
+                        return m('td', {
+                            class: [column.className, column.align ? `align-${column.align}` : ''].filter(Boolean).join(' ') ||
+                                undefined,
+                        }, cellContent);
+                    }),
+                ]);
+            },
+        };
+    };
+    /**
+     * Standalone Pagination Controls component
+     *
+     * Provides navigation controls for paginated data with customizable text labels.
+     * Includes first page, previous page, next page, last page buttons and page info display.
+     * Can be used independently of DataTable for any paginated content.
+     *
+     * @example
+     * ```typescript
+     * m(PaginationControls, {
+     *   pagination: { page: 0, pageSize: 10, total: 100 },
+     *   onPaginationChange: (newPagination) => console.log('Page changed:', newPagination),
+     *   i18n: { showing: 'Showing', to: 'to', of: 'of', entries: 'entries', page: 'Page' }
+     * })
+     * ```
+     */
+    const PaginationControls = () => {
+        return {
+            view: ({ attrs }) => {
+                const { pagination, onPaginationChange, i18n } = attrs;
+                if (!pagination)
+                    return null;
+                const { page, pageSize, total } = pagination;
+                const totalPages = Math.ceil(total / pageSize);
+                const startItem = page * pageSize + 1;
+                const endItem = Math.min((page + 1) * pageSize, total);
+                const showingText = (i18n === null || i18n === void 0 ? void 0 : i18n.showing) || 'Showing';
+                const toText = (i18n === null || i18n === void 0 ? void 0 : i18n.to) || 'to';
+                const ofText = (i18n === null || i18n === void 0 ? void 0 : i18n.of) || 'of';
+                const entriesText = (i18n === null || i18n === void 0 ? void 0 : i18n.entries) || 'entries';
+                const pageText = (i18n === null || i18n === void 0 ? void 0 : i18n.page) || 'Page';
+                return m('.datatable-pagination', [
+                    m('.pagination-info', `${showingText} ${startItem} ${toText} ${endItem} ${ofText} ${total} ${entriesText}`),
+                    m('.pagination-controls', [
+                        m('button.btn-flat', {
+                            disabled: page === 0,
+                            onclick: () => onPaginationChange(Object.assign(Object.assign({}, pagination), { page: 0 })),
+                        }, '⏮'),
+                        m('button.btn-flat', {
+                            disabled: page === 0,
+                            onclick: () => onPaginationChange(Object.assign(Object.assign({}, pagination), { page: page - 1 })),
+                        }, '◀'),
+                        m('span.page-info', `${pageText} ${page + 1} ${ofText} ${totalPages}`),
+                        m('button.btn-flat', {
+                            disabled: page >= totalPages - 1,
+                            onclick: () => onPaginationChange(Object.assign(Object.assign({}, pagination), { page: page + 1 })),
+                        }, '▶'),
+                        m('button.btn-flat', {
+                            disabled: page >= totalPages - 1,
+                            onclick: () => onPaginationChange(Object.assign(Object.assign({}, pagination), { page: totalPages - 1 })),
+                        }, '⏭'),
+                    ]),
+                ]);
+            },
+        };
+    };
+    const TableContent = () => {
+        return {
+            view: ({ attrs: contentAttrs }) => {
+                const { processedData, tableClasses, columns, selection, internalSort, allSelected, someSelected, helpers, onRowClick, onRowDoubleClick, getRowClassName, data, } = contentAttrs;
+                return m('table', {
+                    class: tableClasses,
+                }, m(TableHeader(), {
+                    columns,
+                    selection,
+                    sort: internalSort,
+                    allSelected,
+                    someSelected,
+                    helpers,
+                }), m('tbody', processedData.map((row, index) => m(TableRow(), {
+                    key: (selection === null || selection === void 0 ? void 0 : selection.getRowKey(row, data.findIndex((originalRow) => originalRow === row))) || index,
+                    row,
+                    index,
+                    columns,
+                    selection,
+                    onRowClick,
+                    onRowDoubleClick,
+                    getRowClassName,
+                    helpers,
+                    data,
+                }))));
+            },
+        };
+    };
+    /**
+     * A comprehensive data table component with sorting, filtering, pagination, and selection capabilities.
+     *
+     * @template T The type of data objects displayed in each row
+     *
+     * @description
+     * The DataTable component provides a feature-rich interface for displaying and interacting with tabular data.
+     * It supports both controlled and uncontrolled modes for all interactive features.
+     *
+     * **Key Features:**
+     * - Sorting: Click column headers to sort data ascending/descending
+     * - Filtering: Global search across filterable columns
+     * - Pagination: Navigate through large datasets with customizable page sizes
+     * - Selection: Single or multiple row selection with callbacks
+     * - Custom rendering: Use cellRenderer for complex cell content
+     * - Responsive: Adapts to different screen sizes
+     * - Internationalization: Customize all UI text
+     * - Accessibility: Proper ARIA attributes and keyboard navigation
+     *
+     * @example Basic usage
+     * ```typescript
+     * interface User { id: number; name: string; email: string; }
+     * const users: User[] = [...];
+     * const columns: DataTableColumn<User>[] = [
+     *   { key: 'name', title: 'Name', field: 'name', sortable: true, filterable: true },
+     *   { key: 'email', title: 'Email', field: 'email', sortable: true, filterable: true }
+     * ];
+     *
+     * return m(DataTable<User>, { data: users, columns });
+     * ```
+     *
+     * @example Advanced usage with all features
+     * ```typescript
+     * return m(DataTable<User>, {
+     *   data: users,
+     *   columns,
+     *   title: 'User Management',
+     *   striped: true,
+     *   hoverable: true,
+     *   height: 400,
+     *
+     *   // Pagination
+     *   pagination: { page: 0, pageSize: 10, total: users.length },
+     *   onPaginationChange: (pagination) => console.log('Page changed:', pagination),
+     *
+     *   // Selection
+     *   selection: {
+     *     mode: 'multiple',
+     *     selectedKeys: [],
+     *     getRowKey: (user) => String(user.id),
+     *     onSelectionChange: (keys, selectedUsers) => console.log('Selection:', selectedUsers)
+     *   },
+     *
+     *   // Search
+     *   enableGlobalSearch: true,
+     *   searchPlaceholder: 'Search users...',
+     *
+     *   // Events
+     *   onRowClick: (user, index, event) => console.log('Clicked:', user),
+     *   onRowDoubleClick: (user) => editUser(user),
+     *
+     *   // Styling
+     *   getRowClassName: (user) => user.active ? '' : 'inactive-row'
+     * });
+     * ```
+     *
+     * @returns A Mithril component that renders the data table
+     */
+    const DataTable = () => {
+        const state = {
+            internalSort: undefined,
+            internalFilter: undefined,
+            internalPagination: undefined,
+            processedData: [],
+            tableId: '',
+            // Performance optimization caches
+            lastProcessedHash: ''};
+        // Helper functions
+        const quickDataHash = (data) => {
+            if (data.length === 0)
+                return '0';
+            if (data.length === 1)
+                return '1';
+            // Sample first, middle, and last items for quick hash
+            const first = JSON.stringify(data[0]);
+            const middle = data.length > 2 ? JSON.stringify(data[Math.floor(data.length / 2)]) : '';
+            const last = JSON.stringify(data[data.length - 1]);
+            return `${data.length}-${first.length}-${middle.length}-${last.length}`;
+        };
+        const getDataHash = (attrs) => {
+            const { data, sort, filter, pagination } = attrs;
+            const { internalSort, internalFilter, internalPagination } = state;
+            const hashInputs = {
+                dataLength: data.length,
+                dataHash: quickDataHash(data),
+                sort: sort || internalSort,
+                filter: filter || internalFilter,
+                pagination: pagination || internalPagination,
+            };
+            return JSON.stringify(hashInputs);
+        };
+        const getCellValue = (row, column) => {
+            if (column.field) {
+                return row[column.field];
+            }
+            return row;
+        };
+        const applyFiltering = (data, filter, columns) => {
+            var _a;
+            if (!filter.searchTerm && !filter.columnFilters)
+                return data;
+            const filterableColumns = columns.filter((col) => col.filterable);
+            if (filterableColumns.length === 0 && !filter.searchTerm)
+                return data;
+            const searchTerm = (_a = filter.searchTerm) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            const hasColumnFilters = filter.columnFilters &&
+                Object.keys(filter.columnFilters).some((key) => {
+                    const value = filter.columnFilters[key];
+                    return value !== null && value !== undefined && value !== '';
+                });
+            return data.filter((row) => {
+                // Global search
+                if (searchTerm) {
+                    const matchesGlobal = filterableColumns.some((column) => {
+                        const value = getCellValue(row, column);
+                        if (value == null)
+                            return false;
+                        return String(value).toLowerCase().includes(searchTerm);
+                    });
+                    if (!matchesGlobal)
+                        return false;
+                }
+                // Column-specific filters
+                if (hasColumnFilters) {
+                    const matchesColumnFilters = Object.entries(filter.columnFilters).every(([columnKey, filterValue]) => {
+                        if (filterValue === null || filterValue === undefined || filterValue === '')
+                            return true;
+                        const column = columns.find((col) => col.key === columnKey);
+                        if (!column)
+                            return true;
+                        const value = getCellValue(row, column);
+                        if (value == null)
+                            return false;
+                        return String(value).toLowerCase().includes(String(filterValue).toLowerCase());
+                    });
+                    if (!matchesColumnFilters)
+                        return false;
+                }
+                return true;
+            });
+        };
+        const applySorting = (data, sort, columns) => {
+            const column = columns.find((col) => col.key === sort.column);
+            if (!column || !column.sortable)
+                return data;
+            const multiplier = sort.direction === 'asc' ? 1 : -1;
+            return [...data].sort((a, b) => {
+                const aValue = getCellValue(a, column);
+                const bValue = getCellValue(b, column);
+                // Handle null/undefined values
+                if (aValue == null && bValue == null)
+                    return 0;
+                if (aValue == null)
+                    return -1 * multiplier;
+                if (bValue == null)
+                    return 1 * multiplier;
+                // Type-specific comparisons
+                const aType = typeof aValue;
+                const bType = typeof bValue;
+                if (aType === bType) {
+                    if (aType === 'number') {
+                        return (aValue - bValue) * multiplier;
+                    }
+                    if (aType === 'boolean') {
+                        return (aValue === bValue ? 0 : aValue ? 1 : -1) * multiplier;
+                    }
+                    if (aValue instanceof Date && bValue instanceof Date) {
+                        return (aValue.getTime() - bValue.getTime()) * multiplier;
+                    }
+                }
+                // Fallback to string comparison
+                return String(aValue).localeCompare(String(bValue)) * multiplier;
+            });
+        };
+        const processData = (attrs) => {
+            const { data } = attrs;
+            const { internalSort, internalFilter, internalPagination } = state;
+            let processedData = [...data];
+            // Apply filtering
+            if (internalFilter) {
+                processedData = applyFiltering(processedData, internalFilter, attrs.columns);
+            }
+            // Apply sorting
+            if (internalSort) {
+                processedData = applySorting(processedData, internalSort, attrs.columns);
+            }
+            // Update total count for pagination
+            if (internalPagination) {
+                state.internalPagination = Object.assign(Object.assign({}, internalPagination), { total: processedData.length });
+            }
+            // Apply pagination
+            if (internalPagination) {
+                const { page, pageSize } = internalPagination;
+                const start = page * pageSize;
+                const end = start + pageSize;
+                processedData = processedData.slice(start, end);
+            }
+            state.processedData = processedData;
+        };
+        // Create stable helper functions that don't get recreated on every render
+        const createHelpers = (attrs) => ({
+            getCellValue,
+            handleSort: (columnKey) => {
+                var _a;
+                const column = attrs.columns.find((col) => col.key === columnKey);
+                if (!column || !column.sortable)
+                    return;
+                const currentSort = state.internalSort;
+                let newSort;
+                if ((currentSort === null || currentSort === void 0 ? void 0 : currentSort.column) === columnKey) {
+                    // Toggle direction
+                    if (currentSort.direction === 'asc') {
+                        newSort = { column: columnKey, direction: 'desc' };
+                    }
+                    else {
+                        newSort = { column: columnKey, direction: 'asc' };
+                    }
+                }
+                else {
+                    // New column sort
+                    newSort = { column: columnKey, direction: 'asc' };
+                }
+                state.internalSort = newSort;
+                (_a = attrs.onSortChange) === null || _a === void 0 ? void 0 : _a.call(attrs, newSort);
+            },
+            handleGlobalSearch: (searchTerm) => {
+                var _a;
+                const newFilter = Object.assign(Object.assign({}, state.internalFilter), { searchTerm });
+                state.internalFilter = newFilter;
+                // Reset pagination to first page when filtering
+                if (state.internalPagination) {
+                    state.internalPagination = Object.assign(Object.assign({}, state.internalPagination), { page: 0 });
+                }
+                (_a = attrs.onFilterChange) === null || _a === void 0 ? void 0 : _a.call(attrs, newFilter);
+            },
+            handleSelectionChange: (rowKey, selected) => {
+                var _a, _b;
+                if (!attrs.selection)
+                    return;
+                let newSelectedKeys;
+                if (attrs.selection.mode === 'single') {
+                    newSelectedKeys = selected ? [rowKey] : [];
+                }
+                else if (attrs.selection.mode === 'multiple') {
+                    if (selected) {
+                        newSelectedKeys = [...attrs.selection.selectedKeys, rowKey];
+                    }
+                    else {
+                        newSelectedKeys = attrs.selection.selectedKeys.filter((key) => key !== rowKey);
+                    }
+                }
+                else {
+                    return; // No selection mode
+                }
+                // Get selected rows
+                const selectedRows = attrs.data.filter((row, index) => {
+                    const key = attrs.selection.getRowKey(row, index);
+                    return newSelectedKeys.includes(key);
+                });
+                (_b = (_a = attrs.selection).onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(_a, newSelectedKeys, selectedRows);
+            },
+            handleSelectAll: (selected) => {
+                var _a, _b;
+                if (!attrs.selection || attrs.selection.mode !== 'multiple')
+                    return;
+                let newSelectedKeys;
+                if (selected) {
+                    // Select all visible rows
+                    newSelectedKeys = state.processedData.map((row) => {
+                        const originalIndex = attrs.data.findIndex((originalRow) => originalRow === row);
+                        return attrs.selection.getRowKey(row, originalIndex);
+                    });
+                }
+                else {
+                    newSelectedKeys = [];
+                }
+                const selectedRows = attrs.data.filter((row, index) => {
+                    const key = attrs.selection.getRowKey(row, index);
+                    return newSelectedKeys.includes(key);
+                });
+                (_b = (_a = attrs.selection).onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(_a, newSelectedKeys, selectedRows);
+            },
+        });
+        return {
+            oninit(vnodeInit) {
+                const { sort, filter, pagination } = vnodeInit.attrs;
+                state.tableId = uniqueId();
+                state.internalSort = sort || undefined;
+                state.internalFilter = filter || { searchTerm: '', columnFilters: {} };
+                state.internalPagination = pagination || undefined;
+                processData(vnodeInit.attrs);
+            },
+            onbeforeupdate(vnodeUpdate) {
+                // Only reprocess data if inputs have changed
+                const currentHash = getDataHash(vnodeUpdate.attrs);
+                if (currentHash !== state.lastProcessedHash) {
+                    processData(vnodeUpdate.attrs);
+                    state.lastProcessedHash = currentHash;
+                }
+            },
+            view(vnodeView) {
+                const attrs = vnodeView.attrs;
+                const { loading, emptyMessage, striped, hoverable, responsive, centered, className, id, title, height, enableGlobalSearch, searchPlaceholder, selection, columns, onRowClick, onRowDoubleClick, getRowClassName, data, onPaginationChange, i18n, } = attrs;
+                const { processedData, tableId, internalSort, internalPagination } = state;
+                if (loading) {
+                    return m('.datatable-loading', [
+                        m('.preloader-wrapper.small.active', m('.spinner-layer.spinner-blue-only', m('.circle-clipper.left', m('.circle')))),
+                        m('p', (i18n === null || i18n === void 0 ? void 0 : i18n.loading) || 'Loading...'),
+                    ]);
+                }
+                // Create stable helpers object using the factory function
+                const helpers = createHelpers(attrs);
+                // Calculate selection state for "select all" checkbox
+                let allSelected = false;
+                let someSelected = false;
+                if (selection && selection.mode === 'multiple') {
+                    const visibleRowKeys = processedData.map((row) => {
+                        const originalIndex = data.findIndex((originalRow) => originalRow === row);
+                        return selection.getRowKey(row, originalIndex);
+                    });
+                    const selectedVisibleKeys = visibleRowKeys.filter((key) => selection.selectedKeys.includes(key));
+                    allSelected = visibleRowKeys.length > 0 && selectedVisibleKeys.length === visibleRowKeys.length;
+                    someSelected = selectedVisibleKeys.length > 0 && selectedVisibleKeys.length < visibleRowKeys.length;
+                }
+                const tableClasses = [
+                    'datatable',
+                    striped ? 'striped' : '',
+                    hoverable ? 'highlight' : '',
+                    responsive ? 'responsive-table' : '',
+                    centered ? 'centered' : '',
+                    className || '',
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                return m('.datatable-container', {
+                    id: id || tableId,
+                }, title && m('h5.datatable-title', title), enableGlobalSearch &&
+                    m(GlobalSearch, {
+                        searchPlaceholder,
+                        onSearch: helpers.handleGlobalSearch,
+                        i18n,
+                    }), m('.datatable-wrapper', {
+                    style: {
+                        maxHeight: height ? `${height}px` : undefined,
+                        overflowY: height ? 'auto' : undefined,
+                    },
+                }, processedData.length === 0
+                    ? m('.datatable-empty', emptyMessage || (i18n === null || i18n === void 0 ? void 0 : i18n.noDataAvailable) || 'No data available')
+                    : m(TableContent(), {
+                        processedData,
+                        height,
+                        tableClasses,
+                        columns,
+                        selection,
+                        internalSort,
+                        allSelected,
+                        someSelected,
+                        helpers,
+                        onRowClick,
+                        onRowDoubleClick,
+                        getRowClassName,
+                        data,
+                    })), m(PaginationControls, {
+                    pagination: internalPagination,
+                    onPaginationChange: (pagination) => {
+                        state.internalPagination = pagination;
+                        onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(pagination);
+                    },
+                    i18n,
+                }));
+            },
+        };
+    };
+
+    /** Pure TypeScript Dropdown component - no Materialize dependencies */
+    const Dropdown = () => {
+        const state = {
+            isOpen: false,
+            initialValue: undefined,
+            id: '',
+            focusedIndex: -1,
+            inputRef: null,
+            dropdownRef: null,
+        };
+        const handleKeyDown = (e, items, onchange) => {
+            const availableItems = items.filter((item) => !item.divider && !item.disabled);
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!state.isOpen) {
+                        state.isOpen = true;
+                        state.focusedIndex = 0;
+                    }
+                    else {
+                        state.focusedIndex = Math.min(state.focusedIndex + 1, availableItems.length - 1);
+                    }
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (state.isOpen) {
+                        state.focusedIndex = Math.max(state.focusedIndex - 1, 0);
+                    }
+                    break;
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    if (state.isOpen && state.focusedIndex >= 0 && state.focusedIndex < availableItems.length) {
+                        const selectedItem = availableItems[state.focusedIndex];
+                        const value = (selectedItem.id || selectedItem.label);
+                        state.initialValue = value;
+                        state.isOpen = false;
+                        state.focusedIndex = -1;
+                        if (onchange)
+                            onchange(value);
+                    }
+                    else if (!state.isOpen) {
+                        state.isOpen = true;
+                        state.focusedIndex = 0;
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    state.isOpen = false;
+                    state.focusedIndex = -1;
+                    break;
+            }
+        };
+        return {
+            oninit: ({ attrs: { id = uniqueId(), initialValue, checkedId } }) => {
+                state.id = id;
+                state.initialValue = initialValue || checkedId;
+                // Mithril will handle click events through the component structure
+            },
+            view: ({ attrs: { key, label, onchange, disabled = false, items, iconName, helperText, style, className = 'col s12' }, }) => {
+                const { initialValue } = state;
+                const selectedItem = initialValue
+                    ? items.filter((i) => (i.id ? i.id === initialValue : i.label === initialValue)).shift()
+                    : undefined;
+                const title = selectedItem ? selectedItem.label : label || 'Select';
+                const availableItems = items.filter((item) => !item.divider && !item.disabled);
+                return m('.dropdown-wrapper.input-field', { className, key, style }, [
+                    iconName ? m('i.material-icons.prefix', iconName) : undefined,
+                    m(HelperText, { helperText }),
+                    m('.select-wrapper', {
+                        onclick: disabled
+                            ? undefined
+                            : () => {
+                                state.isOpen = !state.isOpen;
+                                state.focusedIndex = state.isOpen ? 0 : -1;
+                            },
+                        onkeydown: disabled ? undefined : (e) => handleKeyDown(e, items, onchange),
+                        tabindex: disabled ? -1 : 0,
+                        'aria-expanded': state.isOpen ? 'true' : 'false',
+                        'aria-haspopup': 'listbox',
+                        role: 'combobox',
+                    }, [
+                        m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
+                            id: state.id,
+                            value: title,
+                            oncreate: ({ dom }) => {
+                                state.inputRef = dom;
+                            },
+                            onclick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                if (!disabled) {
+                                    state.isOpen = !state.isOpen;
+                                    state.focusedIndex = state.isOpen ? 0 : -1;
+                                }
+                            },
+                        }),
+                        // Dropdown Menu using Select component's positioning logic
+                        state.isOpen &&
+                            m('ul.dropdown-content.select-dropdown', {
+                                tabindex: 0,
+                                role: 'listbox',
+                                'aria-labelledby': state.id,
+                                oncreate: ({ dom }) => {
+                                    state.dropdownRef = dom;
+                                },
+                                onremove: () => {
+                                    state.dropdownRef = null;
+                                },
+                                style: getDropdownStyles(state.inputRef, true, items.map((item) => (Object.assign(Object.assign({}, item), { 
+                                    // Convert dropdown items to format expected by getDropdownStyles
+                                    group: undefined }))), true),
+                            }, items.map((item, index) => {
+                                if (item.divider) {
+                                    return m('li.divider', {
+                                        key: `divider-${index}`,
+                                    });
+                                }
+                                const itemIndex = availableItems.indexOf(item);
+                                const isFocused = itemIndex === state.focusedIndex;
+                                return m('li', Object.assign({ key: item.id || `item-${index}`, class: [
+                                        item.disabled ? 'disabled' : '',
+                                        isFocused ? 'focused' : '',
+                                        (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label ? 'selected' : '',
+                                    ]
+                                        .filter(Boolean)
+                                        .join(' ') }, (item.disabled
+                                    ? {}
+                                    : {
+                                        onclick: (e) => {
+                                            e.stopPropagation();
+                                            const value = (item.id || item.label);
+                                            state.initialValue = value;
+                                            state.isOpen = false;
+                                            state.focusedIndex = -1;
+                                            if (onchange)
+                                                onchange(value);
+                                        },
+                                    })), m('span', {
+                                    style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        padding: '14px 16px',
+                                    },
+                                }, [
+                                    item.iconName
+                                        ? m('i.material-icons', {
+                                            style: { marginRight: '32px' },
+                                        }, item.iconName)
+                                        : undefined,
+                                    item.label,
+                                ]));
+                            })),
+                        m(MaterialIcon, {
+                            name: 'caret',
+                            direction: 'down',
+                            class: 'caret',
+                        }),
+                    ]),
+                ]);
+            },
+        };
+    };
+
+    /**
+     * Floating Action Button
+     */
+    const FloatingActionButton = () => {
+        const state = {
+            isOpen: false,
+        };
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (!target.closest('.fixed-action-btn')) {
+                state.isOpen = false;
+            }
+        };
         return {
-            view: ({ attrs }) => {
-                const { multiple, disabled, initialValue, placeholder, onchange, className = 'col s12', accept: acceptedFiles, label = 'File', } = attrs;
-                const accept = acceptedFiles
-                    ? acceptedFiles instanceof Array
-                        ? acceptedFiles.join(', ')
-                        : acceptedFiles
-                    : undefined;
-                return m('.file-field.input-field', {
-                    className: attrs.class || className,
+            oncreate: () => {
+                document.addEventListener('click', handleClickOutside);
+            },
+            onremove: () => {
+                document.removeEventListener('click', handleClickOutside);
+            },
+            view: ({ attrs: { className, iconName, iconClass, position, style = position === 'left' || position === 'inline-left'
+                ? 'position: absolute; display: inline-block; left: 24px;'
+                : position === 'right' || position === 'inline-right'
+                    ? 'position: absolute; display: inline-block; right: 24px;'
+                    : undefined, buttons, direction = 'top', hoverEnabled = true, }, }) => {
+                const fabClasses = [
+                    'fixed-action-btn',
+                    direction ? `direction-${direction}` : '',
+                    state.isOpen ? 'active' : '',
+                    // hoverEnabled ? 'hover-enabled' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                return m('div', {
+                    style: position === 'inline-right' || position === 'inline-left' ? 'position: relative; height: 70px;' : undefined,
+                }, m(`.${fabClasses}`, {
+                    style,
+                    onclick: (e) => {
+                        e.stopPropagation();
+                        if (buttons && buttons.length > 0) {
+                            state.isOpen = !state.isOpen;
+                        }
+                    },
+                    onmouseover: hoverEnabled
+                        ? () => {
+                            if (buttons && buttons.length > 0) {
+                                state.isOpen = true;
+                            }
+                        }
+                        : undefined,
+                    onmouseleave: hoverEnabled
+                        ? () => {
+                            state.isOpen = false;
+                        }
+                        : undefined,
                 }, [
-                    m('.btn', [
-                        m('span', label),
-                        m('input[type=file]', {
-                            title: label,
-                            accept,
-                            multiple,
-                            disabled,
-                            onchange: onchange
-                                ? (e) => {
-                                    const i = e.target;
-                                    if (i && i.files && onchange) {
-                                        canClear = true;
-                                        onchange(i.files);
-                                    }
-                                }
-                                : undefined,
-                        }),
-                    ]),
-                    m('.file-path-wrapper', m('input.file-path.validate[type=text]', {
-                        placeholder,
-                        oncreate: ({ dom }) => {
-                            i = dom;
-                            if (initialValue)
-                                i.value = initialValue;
-                        },
-                    })),
-                    (canClear || (i === null || i === void 0 ? void 0 : i.value)) &&
-                        m('a.waves-effect.waves-teal.btn-flat', {
+                    m('a.btn-floating.btn-large', {
+                        className,
+                    }, 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'}`, {
                             style: {
-                                float: 'right',
-                                position: 'relative',
-                                top: '-3rem',
-                                padding: 0,
+                                opacity: state.isOpen ? '1' : '0',
+                                transform: state.isOpen ? 'scale(1)' : 'scale(0.4)',
+                                transition: `all 0.3s ease ${index * 40}ms`,
                             },
-                            onclick: () => {
-                                canClear = false;
-                                i.value = '';
-                                onchange && onchange({});
+                            onclick: (e) => {
+                                e.stopPropagation();
+                                if (button.onClick)
+                                    button.onClick(e);
                             },
-                        }, m(MaterialIcon, {
-                            name: 'close',
-                            className: 'close',
-                        })),
-                ]);
+                        }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
+                ]));
             },
         };
     };
@@ -2948,21 +3640,23 @@
                         role: 'dialog',
                         'aria-labelledby': `${id}-title`,
                         'aria-describedby': description ? `${id}-desc` : undefined,
-                        style: {
-                            display: state.isOpen ? 'block' : 'none',
-                            position: 'fixed',
+                        style: Object.assign(Object.assign({ display: state.isOpen ? 'flex' : 'none', position: 'fixed' }, (bottomSheet ? {
+                            // Bottom sheet positioning
+                            top: 'auto',
+                            bottom: '0',
+                            left: '0',
+                            right: '0',
+                            transform: 'none',
+                            maxWidth: '100%',
+                            borderRadius: '8px 8px 0 0',
+                        } : {
+                            // Regular modal positioning
                             top: '50%',
                             left: '50%',
                             transform: 'translate(-50%, -50%)',
-                            backgroundColor: '#fff',
-                            borderRadius: '4px',
                             maxWidth: '75%',
-                            maxHeight: '85%',
-                            overflow: 'auto',
-                            zIndex: '1003',
-                            padding: '0',
-                            boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)',
-                        },
+                            borderRadius: '4px',
+                        })), { backgroundColor: 'var(--mm-modal-background, #fff)', maxHeight: '85%', overflow: 'auto', zIndex: '1003', padding: '0', flexDirection: 'column', boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)' }),
                         onclick: (e) => e.stopPropagation(), // Prevent backdrop click when clicking inside modal
                     }, [
                         // Close button
@@ -2982,7 +3676,12 @@
                             }, '×'),
                         // Modal content
                         m('.modal-content', {
-                            style: { padding: '24px', paddingTop: showCloseButton ? '48px' : '24px' },
+                            style: {
+                                padding: '24px',
+                                paddingTop: showCloseButton ? '48px' : '24px',
+                                minHeight: 'auto',
+                                flex: '1 1 auto',
+                            },
                         }, [
                             m('h4', { id: `${id}-title`, style: { margin: '0 0 20px 0' } }, title),
                             description &&
@@ -2994,7 +3693,7 @@
                             m('.modal-footer', {
                                 style: {
                                     padding: '4px 6px',
-                                    borderTop: '1px solid rgba(160,160,160,0.2)',
+                                    borderTop: '1px solid var(--mm-border-color, rgba(160,160,160,0.2))',
                                     textAlign: 'right',
                                 },
                             }, buttons.map((buttonProps) => m(FlatButton, Object.assign(Object.assign({}, buttonProps), { className: `modal-close ${buttonProps.className || ''}`, onclick: (e) => {
@@ -3008,109 +3707,6 @@
         };
     };
 
-    /** Component to show a check box */
-    const InputCheckbox = () => {
-        return {
-            view: ({ attrs: { className = 'col s12', onchange, label, checked, disabled, description, style, inputId } }) => {
-                const checkboxId = inputId || uniqueId();
-                return m(`p`, { className, style }, m('label', { for: checkboxId }, [
-                    m('input[type=checkbox][tabindex=0]', {
-                        id: checkboxId,
-                        checked,
-                        disabled,
-                        onclick: onchange
-                            ? (e) => {
-                                if (e.target && typeof e.target.checked !== 'undefined') {
-                                    onchange(e.target.checked);
-                                }
-                            }
-                            : undefined,
-                    }),
-                    label ? (typeof label === 'string' ? m('span', label) : label) : undefined,
-                ]), description && m(HelperText, { className: 'input-checkbox-desc', helperText: description }));
-            },
-        };
-    };
-    /** A list of checkboxes */
-    const Options = () => {
-        const state = {};
-        const isChecked = (id) => state.checkedIds.indexOf(id) >= 0;
-        const selectAll = (options, callback) => {
-            const allIds = options.map((option) => option.id);
-            state.checkedIds = [...allIds];
-            if (callback)
-                callback(allIds);
-        };
-        const selectNone = (callback) => {
-            state.checkedIds = [];
-            if (callback)
-                callback([]);
-        };
-        return {
-            oninit: ({ attrs: { initialValue, checkedId, id } }) => {
-                const iv = checkedId || initialValue;
-                state.checkedId = checkedId;
-                state.checkedIds = iv ? (iv instanceof Array ? [...iv] : [iv]) : [];
-                state.componentId = id || uniqueId();
-            },
-            view: ({ attrs: { label, options, description, className = 'col s12', style, disabled, checkboxClass, newRow, isMandatory, layout = 'vertical', showSelectAll = false, onchange: callback, }, }) => {
-                const onchange = callback
-                    ? (propId, checked) => {
-                        const checkedIds = state.checkedIds.filter((i) => i !== propId);
-                        if (checked) {
-                            checkedIds.push(propId);
-                        }
-                        state.checkedIds = checkedIds;
-                        callback(checkedIds);
-                    }
-                    : undefined;
-                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
-                const optionsContent = layout === 'horizontal'
-                    ? m('div.grid-container', options.map((option) => m(InputCheckbox, {
-                        disabled: disabled || option.disabled,
-                        label: option.label,
-                        onchange: onchange ? (v) => onchange(option.id, v) : undefined,
-                        className: option.className || checkboxClass,
-                        checked: isChecked(option.id),
-                        description: option.description,
-                        inputId: `${state.componentId}-${option.id}`,
-                    })))
-                    : options.map((option) => m(InputCheckbox, {
-                        disabled: disabled || option.disabled,
-                        label: option.label,
-                        onchange: onchange ? (v) => onchange(option.id, v) : undefined,
-                        className: option.className || checkboxClass,
-                        checked: isChecked(option.id),
-                        description: option.description,
-                        inputId: `${state.componentId}-${option.id}`,
-                    }));
-                return m('div', { id: state.componentId, className: cn, style }, [
-                    label && m('h5.form-group-label', label + (isMandatory ? ' *' : '')),
-                    showSelectAll &&
-                        m('div.select-all-controls', { style: 'margin-bottom: 10px;' }, [
-                            m('a', {
-                                href: '#',
-                                onclick: (e) => {
-                                    e.preventDefault();
-                                    selectAll(options, callback);
-                                },
-                                style: 'margin-right: 15px;',
-                            }, 'Select All'),
-                            m('a', {
-                                href: '#',
-                                onclick: (e) => {
-                                    e.preventDefault();
-                                    selectNone(callback);
-                                },
-                            }, 'Select None'),
-                        ]),
-                    description && m(HelperText, { helperText: description }),
-                    m('form', { action: '#' }, optionsContent),
-                ]);
-            },
-        };
-    };
-
     const PaginationItem = () => ({
         view: ({ attrs: { title, href, active, disabled } }) => m('li', { className: active ? 'active' : disabled ? 'disabled' : 'waves-effect' }, typeof title === 'number' ? m(m.route.Link, { href }, title) : title),
     });
@@ -3375,12 +3971,15 @@
         };
         const updateTimeFromInput = (inputValue) => {
             let value = ((inputValue || options.defaultTime || '') + '').split(':');
+            let amPmWasProvided = false;
             if (options.twelveHour && value.length > 1) {
                 if (value[1].toUpperCase().indexOf('AM') > -1) {
                     state.amOrPm = 'AM';
+                    amPmWasProvided = true;
                 }
                 else if (value[1].toUpperCase().indexOf('PM') > -1) {
                     state.amOrPm = 'PM';
+                    amPmWasProvided = true;
                 }
                 value[1] = value[1].replace('AM', '').replace('PM', '').trim();
             }
@@ -3389,21 +3988,33 @@
                 value = [now.getHours().toString(), now.getMinutes().toString()];
                 if (options.twelveHour) {
                     state.amOrPm = parseInt(value[0]) >= 12 ? 'PM' : 'AM';
+                    amPmWasProvided = false; // For 'now', we need to do conversion
                 }
             }
             let hours = +value[0] || 0;
             let minutes = +value[1] || 0;
-            // Handle 24-hour to 12-hour conversion if needed
-            if (options.twelveHour && hours >= 12) {
-                state.amOrPm = 'PM';
-                if (hours > 12) {
-                    hours = hours - 12;
+            if (options.twelveHour) {
+                if (!amPmWasProvided) {
+                    // No AM/PM was provided, assume this is 24-hour format input - convert it
+                    if (hours >= 12) {
+                        state.amOrPm = 'PM';
+                        if (hours > 12) {
+                            hours = hours - 12;
+                        }
+                    }
+                    else {
+                        state.amOrPm = 'AM';
+                        if (hours === 0) {
+                            hours = 12;
+                        }
+                    }
                 }
-            }
-            else if (options.twelveHour && hours < 12) {
-                state.amOrPm = 'AM';
-                if (hours === 0) {
-                    hours = 12;
+                else {
+                    // AM/PM was provided, hours are already in 12-hour format
+                    // Just handle midnight/noon edge cases
+                    if (hours === 0 && state.amOrPm === 'AM') {
+                        hours = 12;
+                    }
                 }
             }
             state.hours = hours;
@@ -6189,6 +6800,27 @@
         };
     };
 
+    /**
+     * @fileoverview Core TypeScript utility types for mithril-materialized library
+     * These types improve type safety and developer experience across all components
+     */
+    /**
+     * Type guard to check if validation result indicates success
+     * @param result - The validation result to check
+     * @returns True if validation passed
+     */
+    const isValidationSuccess = (result) => result === true || result === '';
+    /**
+     * Type guard to check if validation result indicates an error
+     * @param result - The validation result to check
+     * @returns True if validation failed
+     */
+    const isValidationError = (result) => !isValidationSuccess(result);
+    // ============================================================================
+    // EXPORTS
+    // ============================================================================
+    // All types are already exported via individual export declarations above
+
     exports.AnchorItem = AnchorItem;
     exports.Autocomplete = Autocomplete;
     exports.Breadcrumb = Breadcrumb;
@@ -6203,6 +6835,7 @@
     exports.CollapsibleItem = CollapsibleItem;
     exports.Collection = Collection;
     exports.ColorInput = ColorInput;
+    exports.DataTable = DataTable;
     exports.DatePicker = DatePicker;
     exports.Dropdown = Dropdown;
     exports.EmailInput = EmailInput;
@@ -6222,6 +6855,7 @@
     exports.NumberInput = NumberInput;
     exports.Options = Options;
     exports.Pagination = Pagination;
+    exports.PaginationControls = PaginationControls;
     exports.Parallax = Parallax;
     exports.PasswordInput = PasswordInput;
     exports.Pushpin = Pushpin;
@@ -6258,6 +6892,8 @@
     exports.initPushpins = initPushpins;
     exports.initTooltips = initTooltips;
     exports.isNumeric = isNumeric;
+    exports.isValidationError = isValidationError;
+    exports.isValidationSuccess = isValidationSuccess;
     exports.padLeft = padLeft;
     exports.range = range;
     exports.toast = toast;