mithril-materialized 3.8.0 → 3.9.0

package/dist/index.esm.js

@@ -10831,6 +10831,182 @@ const ToggleGroup = () => {
     };
 };
 
+/** 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
@@ -10852,4 +11028,4 @@ const isValidationError = (result) => !isValidationSuccess(result);
 // ============================================================================
 // All types are already exported via individual export declarations above
 
-export { AnalogClock, AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DigitalClock, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, TimeRangePicker, Timeline, Toast, ToastComponent, ToggleGroup, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, addLeadingZero, clearPortal, createBreadcrumb, formatTime, generateHourOptions, generateMinuteOptions, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isTimeDisabled, isValidationError, isValidationSuccess, padLeft, parseTime, range, releasePortalContainer, renderToPortal, scrollToValue, snapToNearestItem, sortOptions, timeToMinutes, toast, uniqueId, uuid4 };
+export { AnalogClock, AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CircularProgress, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DigitalClock, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, LinearProgress, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, TimeRangePicker, Timeline, Toast, ToastComponent, ToggleGroup, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, addLeadingZero, clearPortal, createBreadcrumb, formatTime, generateHourOptions, generateMinuteOptions, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isTimeDisabled, isValidationError, isValidationSuccess, padLeft, parseTime, range, releasePortalContainer, renderToPortal, scrollToValue, snapToNearestItem, sortOptions, timeToMinutes, toast, uniqueId, uuid4 };

package/dist/index.js

@@ -10833,6 +10833,182 @@ const ToggleGroup = () => {
     };
 };
 
+/** 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
@@ -10864,6 +11040,7 @@ exports.ButtonFactory = ButtonFactory;
 exports.Carousel = Carousel;
 exports.CharacterCounter = CharacterCounter;
 exports.Chips = Chips;
+exports.CircularProgress = CircularProgress;
 exports.CodeBlock = CodeBlock;
 exports.Collapsible = Collapsible;
 exports.CollapsibleItem = CollapsibleItem;
@@ -10886,6 +11063,7 @@ exports.ImageList = ImageList;
 exports.InputCheckbox = InputCheckbox;
 exports.Label = Label;
 exports.LargeButton = LargeButton;
+exports.LinearProgress = LinearProgress;
 exports.ListItem = ListItem;
 exports.Mandatory = Mandatory;
 exports.Masonry = Masonry;