mithril-materialized 3.7.0 → 3.9.0

package/dist/index.umd.js

@@ -10715,6 +10715,302 @@
         };
     };
 
+    /**
+     * ToggleButton component.
+     *
+     * A button that can be toggled on/off. Typically used within a ToggleGroup
+     * to create grouped button controls where one or more buttons can be selected.
+     *
+     * @example
+     * ```typescript
+     * m(ToggleButton, {
+     *   value: 'bold',
+     *   iconName: 'format_bold',
+     *   checked: true,
+     *   tooltip: 'Bold',
+     *   onchange: () => console.log('Toggled')
+     * })
+     * ```
+     */
+    const ToggleButton = () => {
+        return {
+            view: ({ attrs }) => {
+                const { checked, iconName, icon, label, onchange, className, tooltip } = attrs, rest = __rest(attrs, ["checked", "iconName", "icon", "label", "onchange", "className", "tooltip"]);
+                const classes = [className, checked ? 'checked' : ''].filter(Boolean).join(' ');
+                return m('button.btn-flat.waves-effect.toggle-button', Object.assign(Object.assign({}, rest), { className: classes, title: tooltip, onclick: () => {
+                        if (onchange) {
+                            onchange();
+                        }
+                    }, onmousedown: WavesEffect.onMouseDown, onmouseup: WavesEffect.onMouseUp, onmouseleave: WavesEffect.onMouseLeave, ontouchstart: WavesEffect.onTouchStart, ontouchend: WavesEffect.onTouchEnd }), [icon, iconName && m(Icon, { iconName, className: attrs.iconClass }), label]);
+            },
+        };
+    };
+
+    /**
+     * ToggleGroup component.
+     *
+     * A group of toggle buttons that can operate in single-select or multi-select mode.
+     * The component supports both controlled and uncontrolled modes.
+     *
+     * **Controlled mode**: Manage the state externally using the `value` prop.
+     * **Uncontrolled mode**: Let the component manage its own state using `defaultValue`.
+     *
+     * @example
+     * ```typescript
+     * // Single-select, controlled mode
+     * let selected = 'left';
+     * m(ToggleGroup, {
+     *   value: selected,
+     *   onchange: (v) => selected = v,
+     *   items: [
+     *     { value: 'left', iconName: 'format_align_left', tooltip: 'Align Left' },
+     *     { value: 'center', iconName: 'format_align_center', tooltip: 'Align Center' },
+     *     { value: 'right', iconName: 'format_align_right', tooltip: 'Align Right' }
+     *   ]
+     * });
+     *
+     * // Multi-select, controlled mode
+     * let selected = ['bold', 'italic'];
+     * m(ToggleGroup, {
+     *   multiple: true,
+     *   value: selected,
+     *   onchange: (v) => selected = v,
+     *   items: [
+     *     { value: 'bold', iconName: 'format_bold', tooltip: 'Bold' },
+     *     { value: 'italic', iconName: 'format_italic', tooltip: 'Italic' },
+     *     { value: 'underline', iconName: 'format_underlined', tooltip: 'Underline' }
+     *   ]
+     * });
+     *
+     * // Uncontrolled mode
+     * m(ToggleGroup, {
+     *   defaultValue: 'left',
+     *   onchange: (v) => console.log('Changed to:', v),
+     *   items: [...]
+     * });
+     * ```
+     */
+    const ToggleGroup = () => {
+        let internalValue;
+        const handleSelect = (attrs, item, currentValue) => {
+            if (attrs.disabled || item.disabled) {
+                return;
+            }
+            const { value, multiple, onchange } = attrs;
+            const isControlled = value !== undefined;
+            if (multiple) {
+                const currentValues = (Array.isArray(currentValue) ? currentValue : currentValue !== undefined ? [currentValue] : []);
+                const newValues = currentValues.includes(item.value)
+                    ? currentValues.filter((v) => v !== item.value)
+                    : [...currentValues, item.value];
+                if (!isControlled) {
+                    internalValue = newValues;
+                }
+                if (onchange) {
+                    onchange(newValues);
+                }
+            }
+            else {
+                const newValue = item.value;
+                if (!isControlled) {
+                    internalValue = newValue;
+                }
+                if (onchange) {
+                    onchange(newValue);
+                }
+            }
+        };
+        return {
+            oninit: ({ attrs }) => {
+                internalValue = attrs.defaultValue;
+            },
+            view: ({ attrs }) => {
+                const { value, items, multiple } = attrs;
+                const isControlled = value !== undefined;
+                const currentValue = isControlled ? value : internalValue;
+                return m('.toggle-group', items.map((item) => m(ToggleButton, Object.assign(Object.assign({}, item), { checked: multiple && Array.isArray(currentValue)
+                        ? currentValue.includes(item.value)
+                        : currentValue === item.value, onchange: () => handleSelect(attrs, item, currentValue) }))));
+            },
+        };
+    };
+
+    /** Size dimensions in pixels */
+    const SIZE_MAP = {
+        small: 36,
+        medium: 50,
+        large: 64,
+    };
+    /** Stroke width in pixels */
+    const STROKE_WIDTH = 3;
+    /** Create a CircularProgress component */
+    const CircularProgress = () => {
+        const state = {
+            id: uniqueId(),
+        };
+        /**
+         * Calculate SVG stroke properties for determinate progress
+         */
+        const calculateStrokeProperties = (size, value, max) => {
+            const radius = (size - STROKE_WIDTH) / 2;
+            const circumference = 2 * Math.PI * radius;
+            const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+            const strokeDashoffset = circumference - (percentage / 100) * circumference;
+            return {
+                radius,
+                circumference,
+                strokeDashoffset,
+                percentage,
+            };
+        };
+        /**
+         * Get size class name
+         */
+        const getSizeClass = (size = 'medium') => {
+            return `circular-progress--${size}`;
+        };
+        /**
+         * Get color class name
+         */
+        const getColorClass = (color, intensity) => {
+            if (!color)
+                return '';
+            return intensity ? `circular-progress--${color} circular-progress--${intensity}` : `circular-progress--${color}`;
+        };
+        return {
+            view: ({ attrs }) => {
+                const { mode = 'indeterminate', value = 0, max = 100, size = 'medium', color = 'teal', colorIntensity, label, showPercentage = false, className = '', style = {}, id = state.id, 'aria-label': ariaLabel, 'aria-valuemin': ariaValueMin = 0, 'aria-valuemax': ariaValueMax = max, 'aria-valuenow': ariaValueNow, 'aria-valuetext': ariaValueText } = attrs, params = __rest(attrs, ["mode", "value", "max", "size", "color", "colorIntensity", "label", "showPercentage", "className", "style", "id", 'aria-label', 'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'aria-valuetext']);
+                const isDeterminate = mode === 'determinate';
+                const sizePixels = SIZE_MAP[size];
+                const { radius, circumference, strokeDashoffset, percentage } = isDeterminate
+                    ? calculateStrokeProperties(sizePixels, value, max)
+                    : { radius: 0, circumference: 0, strokeDashoffset: 0, percentage: 0 };
+                // Determine label content
+                const labelContent = label !== undefined ? label : showPercentage && isDeterminate ? `${Math.round(percentage)}%` : '';
+                // Build class names
+                const classNames = [
+                    'circular-progress',
+                    getSizeClass(size),
+                    getColorClass(color, colorIntensity),
+                    `circular-progress--${mode}`,
+                    className,
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                // ARIA attributes
+                const ariaAttrs = isDeterminate
+                    ? {
+                        'aria-valuenow': ariaValueNow !== undefined ? ariaValueNow : value,
+                        'aria-valuemin': ariaValueMin,
+                        'aria-valuemax': ariaValueMax,
+                        'aria-valuetext': ariaValueText || `${Math.round(percentage)}%`,
+                    }
+                    : {
+                        'aria-valuetext': ariaValueText || label || 'Loading',
+                    };
+                return m('.circular-progress', Object.assign(Object.assign(Object.assign({}, params), { className: classNames, style: Object.assign({ width: `${sizePixels}px`, height: `${sizePixels}px` }, style), id, role: 'progressbar', 'aria-label': ariaLabel || (isDeterminate ? `Progress: ${Math.round(percentage)}%` : 'Loading') }), ariaAttrs), [
+                    // SVG circle
+                    m('svg.circular-progress__svg', {
+                        viewBox: `0 0 ${sizePixels} ${sizePixels}`,
+                        xmlns: 'http://www.w3.org/2000/svg',
+                    }, [
+                        // Background track circle
+                        m('circle.circular-progress__circle.circular-progress__circle--track', {
+                            cx: sizePixels / 2,
+                            cy: sizePixels / 2,
+                            r: radius || (sizePixels - STROKE_WIDTH) / 2,
+                            fill: 'none',
+                            stroke: 'currentColor',
+                            'stroke-width': STROKE_WIDTH,
+                        }),
+                        // Progress indicator circle
+                        m('circle.circular-progress__circle.circular-progress__circle--indicator', {
+                            cx: sizePixels / 2,
+                            cy: sizePixels / 2,
+                            r: radius || (sizePixels - STROKE_WIDTH) / 2,
+                            fill: 'none',
+                            stroke: 'currentColor',
+                            'stroke-width': STROKE_WIDTH,
+                            'stroke-dasharray': isDeterminate ? circumference : undefined,
+                            'stroke-dashoffset': isDeterminate ? strokeDashoffset : undefined,
+                            'stroke-linecap': 'round',
+                        }),
+                    ]),
+                    // Label inside circle
+                    labelContent &&
+                        m('.circular-progress__label', {
+                            'aria-hidden': 'true',
+                        }, labelContent),
+                ]);
+            },
+        };
+    };
+
+    /** Create a LinearProgress component */
+    const LinearProgress = () => {
+        const state = {
+            id: uniqueId(),
+        };
+        /**
+         * Get size class name
+         */
+        const getSizeClass = (size = 'medium') => {
+            return `linear-progress__track--${size}`;
+        };
+        /**
+         * Get color class name
+         */
+        const getColorClass = (color, intensity) => {
+            if (!color)
+                return '';
+            return intensity ? `linear-progress--${color} linear-progress--${intensity}` : `linear-progress--${color}`;
+        };
+        return {
+            view: ({ attrs }) => {
+                const { mode = 'indeterminate', value = 0, max = 100, size = 'medium', color = 'teal', colorIntensity, label, showPercentage = false, className = '', style = {}, id = state.id, 'aria-label': ariaLabel, 'aria-valuemin': ariaValueMin = 0, 'aria-valuemax': ariaValueMax = max, 'aria-valuenow': ariaValueNow, 'aria-valuetext': ariaValueText } = attrs, params = __rest(attrs, ["mode", "value", "max", "size", "color", "colorIntensity", "label", "showPercentage", "className", "style", "id", 'aria-label', 'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'aria-valuetext']);
+                const isDeterminate = mode === 'determinate';
+                const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+                // Determine label content
+                const labelContent = label !== undefined ? label : showPercentage && isDeterminate ? `${Math.round(percentage)}%` : '';
+                // Build class names
+                const classNames = [
+                    'linear-progress',
+                    getColorClass(color, colorIntensity),
+                    className,
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                // ARIA attributes
+                const ariaAttrs = isDeterminate
+                    ? {
+                        'aria-valuenow': ariaValueNow !== undefined ? ariaValueNow : value,
+                        'aria-valuemin': ariaValueMin,
+                        'aria-valuemax': ariaValueMax,
+                        'aria-valuetext': ariaValueText || `${Math.round(percentage)}%`,
+                    }
+                    : {
+                        'aria-valuetext': ariaValueText || label || 'Loading',
+                    };
+                return m('.linear-progress', Object.assign(Object.assign({}, params), { className: classNames, style,
+                    id }), [
+                    // Progress track container
+                    m('.linear-progress__track', Object.assign({ className: `linear-progress__track ${getSizeClass(size)}`, role: 'progressbar', 'aria-label': ariaLabel || (isDeterminate ? `Progress: ${Math.round(percentage)}%` : 'Loading') }, ariaAttrs), [
+                        // Progress bar
+                        m('.linear-progress__bar', {
+                            className: `linear-progress__bar ${isDeterminate ? '' : 'linear-progress__bar--indeterminate'}`,
+                            style: isDeterminate ? { width: `${percentage}%` } : undefined,
+                        }),
+                    ]),
+                    // Label at the end (right side)
+                    labelContent &&
+                        m('.linear-progress__label', {
+                            'aria-hidden': 'true',
+                        }, labelContent),
+                ]);
+            },
+        };
+    };
+
     /**
      * @fileoverview Core TypeScript utility types for mithril-materialized library
      * These types improve type safety and developer experience across all components
@@ -10746,6 +11042,7 @@
     exports.Carousel = Carousel;
     exports.CharacterCounter = CharacterCounter;
     exports.Chips = Chips;
+    exports.CircularProgress = CircularProgress;
     exports.CodeBlock = CodeBlock;
     exports.Collapsible = Collapsible;
     exports.CollapsibleItem = CollapsibleItem;
@@ -10768,6 +11065,7 @@
     exports.InputCheckbox = InputCheckbox;
     exports.Label = Label;
     exports.LargeButton = LargeButton;
+    exports.LinearProgress = LinearProgress;
     exports.ListItem = ListItem;
     exports.Mandatory = Mandatory;
     exports.Masonry = Masonry;
@@ -10810,6 +11108,7 @@
     exports.Timeline = Timeline;
     exports.Toast = Toast;
     exports.ToastComponent = ToastComponent;
+    exports.ToggleGroup = ToggleGroup;
     exports.Tooltip = Tooltip;
     exports.TooltipComponent = TooltipComponent;
     exports.TreeView = TreeView;

package/dist/linear-progress.d.ts

@@ -0,0 +1,40 @@
+import { FactoryComponent, Attributes } from 'mithril';
+import { MaterialColor, ColorIntensity } from './types';
+import { ProgressMode, ProgressSize } from './circular-progress';
+/** LinearProgress component attributes */
+export interface LinearProgressAttrs extends Attributes {
+    /** Progress mode (default: 'indeterminate') */
+    mode?: ProgressMode;
+    /** Current progress value (0-100) for determinate mode */
+    value?: number;
+    /** Maximum progress value (default: 100) */
+    max?: number;
+    /** Size variant (default: 'medium') */
+    size?: ProgressSize;
+    /** Materialize color (default: 'teal') */
+    color?: MaterialColor;
+    /** Color intensity modifier */
+    colorIntensity?: ColorIntensity;
+    /** Label to display at the end (right side) */
+    label?: string | number;
+    /** Auto-show percentage at the end for determinate mode (default: false) */
+    showPercentage?: boolean;
+    /** Additional CSS class names */
+    className?: string;
+    /** Additional CSS styles */
+    style?: any;
+    /** HTML ID for the component */
+    id?: string;
+    /** ARIA label for accessibility */
+    'aria-label'?: string;
+    /** ARIA valuemin (default: 0) */
+    'aria-valuemin'?: number;
+    /** ARIA valuemax (default: 100) */
+    'aria-valuemax'?: number;
+    /** ARIA valuenow (current value) */
+    'aria-valuenow'?: number;
+    /** ARIA valuetext (custom text description) */
+    'aria-valuetext'?: string;
+}
+/** Create a LinearProgress component */
+export declare const LinearProgress: FactoryComponent<LinearProgressAttrs>;

package/dist/toggle-button.d.ts

@@ -0,0 +1,46 @@
+import { FactoryComponent, Attributes, Vnode } from 'mithril';
+/**
+ * Attributes for the ToggleButton component.
+ *
+ * A toggle button is a button that can be in a checked or unchecked state.
+ * It is typically used within a ToggleGroup to create button groups where
+ * one or more buttons can be selected.
+ */
+export interface ToggleButtonAttrs extends Attributes {
+    /** The value of the button. This is returned when the button is selected. */
+    value: string | number;
+    /** The label text to display next to the icon. */
+    label?: string;
+    /** The name of the Material Design icon to display. */
+    iconName?: string;
+    /** A custom SVG icon vnode to display instead of a Material icon. */
+    icon?: Vnode<any, any>;
+    /** Additional CSS class for the icon element. */
+    iconClass?: string;
+    /** Whether the button is in a checked/selected state. */
+    checked?: boolean;
+    /** Whether the button is disabled and cannot be interacted with. */
+    disabled?: boolean;
+    /** Optional tooltip text to display on hover. */
+    tooltip?: string;
+    /** Callback function invoked when the button is clicked. */
+    onchange?: () => void;
+}
+/**
+ * ToggleButton component.
+ *
+ * A button that can be toggled on/off. Typically used within a ToggleGroup
+ * to create grouped button controls where one or more buttons can be selected.
+ *
+ * @example
+ * ```typescript
+ * m(ToggleButton, {
+ *   value: 'bold',
+ *   iconName: 'format_bold',
+ *   checked: true,
+ *   tooltip: 'Bold',
+ *   onchange: () => console.log('Toggled')
+ * })
+ * ```
+ */
+export declare const ToggleButton: FactoryComponent<ToggleButtonAttrs>;

package/dist/toggle-group.d.ts

@@ -0,0 +1,84 @@
+import { FactoryComponent, Attributes } from 'mithril';
+import { ToggleButtonAttrs } from './toggle-button';
+/**
+ * Attributes for the ToggleGroup component.
+ *
+ * A toggle group is a container for multiple toggle buttons that manages their
+ * selection state. It can operate in single-select or multi-select mode.
+ */
+export interface ToggleGroupAttrs extends Attributes {
+    /**
+     * The current value(s) of the toggle group (controlled mode).
+     * - Single-select: a single value
+     * - Multi-select: an array of values
+     */
+    value?: string | number | Array<string | number>;
+    /**
+     * The default value(s) for uncontrolled mode.
+     * Use this when you want the component to manage its own state.
+     */
+    defaultValue?: string | number | Array<string | number>;
+    /** Whether all buttons in the group are disabled. */
+    disabled?: boolean;
+    /**
+     * Callback invoked when the selection changes.
+     * @param value - The new value (single value or array depending on `multiple`)
+     */
+    onchange?: (value: string | number | Array<string | number>) => void;
+    /**
+     * Array of button configurations to display in the group.
+     * Each item can have its own icon, label, tooltip, and disabled state.
+     */
+    items: Array<ToggleButtonAttrs>;
+    /**
+     * Whether to allow multiple buttons to be selected simultaneously.
+     * - false (default): only one button can be selected at a time
+     * - true: multiple buttons can be selected
+     */
+    multiple?: boolean;
+}
+/**
+ * ToggleGroup component.
+ *
+ * A group of toggle buttons that can operate in single-select or multi-select mode.
+ * The component supports both controlled and uncontrolled modes.
+ *
+ * **Controlled mode**: Manage the state externally using the `value` prop.
+ * **Uncontrolled mode**: Let the component manage its own state using `defaultValue`.
+ *
+ * @example
+ * ```typescript
+ * // Single-select, controlled mode
+ * let selected = 'left';
+ * m(ToggleGroup, {
+ *   value: selected,
+ *   onchange: (v) => selected = v,
+ *   items: [
+ *     { value: 'left', iconName: 'format_align_left', tooltip: 'Align Left' },
+ *     { value: 'center', iconName: 'format_align_center', tooltip: 'Align Center' },
+ *     { value: 'right', iconName: 'format_align_right', tooltip: 'Align Right' }
+ *   ]
+ * });
+ *
+ * // Multi-select, controlled mode
+ * let selected = ['bold', 'italic'];
+ * m(ToggleGroup, {
+ *   multiple: true,
+ *   value: selected,
+ *   onchange: (v) => selected = v,
+ *   items: [
+ *     { value: 'bold', iconName: 'format_bold', tooltip: 'Bold' },
+ *     { value: 'italic', iconName: 'format_italic', tooltip: 'Italic' },
+ *     { value: 'underline', iconName: 'format_underlined', tooltip: 'Underline' }
+ *   ]
+ * });
+ *
+ * // Uncontrolled mode
+ * m(ToggleGroup, {
+ *   defaultValue: 'left',
+ *   onchange: (v) => console.log('Changed to:', v),
+ *   items: [...]
+ * });
+ * ```
+ */
+export declare const ToggleGroup: FactoryComponent<ToggleGroupAttrs>;

package/package.json

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