mithril-materialized 3.11.0 → 3.13.0

package/dist/index.umd.js

@@ -1639,7 +1639,7 @@
     const ListItem = () => {
         return {
             view: ({ attrs: { item, mode } }) => {
-                const { title, content = '', active, iconName, avatar, className, onclick } = item;
+                const { title, content, active, iconName, avatar, className, onclick } = item;
                 return mode === exports.CollectionMode.AVATAR
                     ? m('li.collection-item.avatar', {
                         className: active ? 'active' : '',
@@ -1649,12 +1649,21 @@
                             ? m('img.circle', { src: avatar })
                             : m('i.material-icons.circle', { className }, avatar),
                         m('span.title', title),
-                        m('p', m.trust(content)),
-                        m(SecondaryContent, item),
-                    ])
+                        content ? (typeof content === 'string' ? m('p', m.trust(content)) : m('p', content)) : undefined,
+                        iconName ? m(SecondaryContent, item) : undefined,
+                    ].filter(Boolean))
                     : m('li.collection-item', {
                         className: active ? 'active' : '',
-                    }, iconName ? m('div', [title, m(SecondaryContent, item)]) : title);
+                        onclick: onclick ? () => onclick(item) : undefined,
+                    }, content
+                        ? m('div', [
+                            m('div', title),
+                            typeof content === 'string' ? m('p.secondary-text', content) : content,
+                            iconName ? m(SecondaryContent, item) : undefined,
+                        ].filter(Boolean))
+                        : iconName
+                            ? m('div', [title, m(SecondaryContent, item)])
+                            : title);
             },
         };
     };
@@ -10755,12 +10764,12 @@
         const RatingItem = () => {
             return {
                 view: ({ attrs }) => {
-                    const { index, displayValue, step, icons, allowHalfSteps, disabled, onclick, onmouseover } = attrs;
+                    const { index, displayValue, step, icons, allowHalfSteps, disabled, showTooltip, tooltipLabel, onclick, onmouseover, } = attrs;
                     const itemValue = (index + 1) * step;
                     // Calculate fill state based on displayValue vs itemValue
                     const diff = displayValue - itemValue;
                     const fillState = diff >= 0 ? 'full' : allowHalfSteps && diff >= -step / 2 ? 'half' : 'empty';
-                    return m('.rating__item', {
+                    return m('.rating__item.no-select', {
                         className: [
                             fillState === 'full' ? 'rating__item--filled' : '',
                             fillState === 'half' ? 'rating__item--half' : '',
@@ -10781,6 +10790,8 @@
                                 clipPath: fillState === 'half' ? 'inset(0 50% 0 0)' : undefined,
                             },
                         }, typeof icons.filled === 'string' ? icons.filled : m(icons.filled)),
+                        // Tooltip
+                        showTooltip && tooltipLabel && m('.rating__tooltip', tooltipLabel),
                     ]);
                 },
             };
@@ -10852,6 +10863,7 @@
                     }, 
                     // Array.from({ length: itemCount }, (_, i) => renderRatingItem(attrs, i))
                     [...Array(itemCount)].map((_, i) => {
+                        var _a;
                         const itemValue = (i + 1) * step;
                         return m(RatingItem, {
                             key: `rating-item-${i}`,
@@ -10861,6 +10873,8 @@
                             icons: Object.assign(Object.assign({}, DEFAULT_ICONS), attrs.icon),
                             allowHalfSteps: attrs.allowHalfSteps,
                             disabled: attrs.disabled,
+                            showTooltip: attrs.showTooltips,
+                            tooltipLabel: (_a = attrs.tooltipLabels) === null || _a === void 0 ? void 0 : _a[i],
                             onclick: () => handleItemClick(attrs, itemValue),
                             onmouseover: () => handleItemHover(attrs, itemValue),
                         });
@@ -10876,6 +10890,237 @@
         };
     };
 
+    /** Create a LikertScale component */
+    const LikertScale = () => {
+        const state = {
+            id: uniqueId(),
+            groupId: uniqueId(),
+            internalValue: undefined,
+            isFocused: false,
+        };
+        const isControlled = (attrs) => typeof attrs.value !== 'undefined' && typeof attrs.onchange === 'function';
+        const getCurrentValue = (attrs) => {
+            var _a, _b;
+            const controlled = isControlled(attrs);
+            const isNonInteractive = attrs.readonly || attrs.disabled;
+            if (controlled) {
+                return attrs.value;
+            }
+            // Non-interactive components: prefer defaultValue, fallback to value
+            if (isNonInteractive) {
+                return (_a = attrs.defaultValue) !== null && _a !== void 0 ? _a : attrs.value;
+            }
+            // Interactive uncontrolled: use internal state (user can change it)
+            return (_b = state.internalValue) !== null && _b !== void 0 ? _b : attrs.defaultValue;
+        };
+        const getLabelText = (value, min, max, getLabelFn) => {
+            if (getLabelFn && value !== undefined) {
+                return getLabelFn(value, min, max);
+            }
+            if (value === undefined) {
+                return `No selection, please choose a value between ${min} and ${max}`;
+            }
+            return `Selected ${value} out of ${min} to ${max}`;
+        };
+        const getSizeClass = (size = 'medium') => {
+            switch (size) {
+                case 'small':
+                    return 'likert-scale--small';
+                case 'large':
+                    return 'likert-scale--large';
+                default:
+                    return 'likert-scale--medium';
+            }
+        };
+        const getDensityClass = (density = 'standard') => {
+            switch (density) {
+                case 'compact':
+                    return 'likert-scale--compact';
+                case 'comfortable':
+                    return 'likert-scale--comfortable';
+                default:
+                    return 'likert-scale--standard';
+            }
+        };
+        const getLayoutClass = (layout = 'responsive') => {
+            switch (layout) {
+                case 'horizontal':
+                    return 'likert-scale--horizontal';
+                case 'vertical':
+                    return 'likert-scale--vertical';
+                default:
+                    return 'likert-scale--responsive';
+            }
+        };
+        const handleChange = (attrs, newValue) => {
+            var _a;
+            if (attrs.readonly || attrs.disabled)
+                return;
+            if (!isControlled(attrs)) {
+                state.internalValue = newValue;
+            }
+            (_a = attrs.onchange) === null || _a === void 0 ? void 0 : _a.call(attrs, newValue);
+        };
+        const handleKeyDown = (attrs, e) => {
+            if (attrs.readonly || attrs.disabled)
+                return;
+            const min = attrs.min || 1;
+            const max = attrs.max || 5;
+            const step = attrs.step || 1;
+            const currentValue = getCurrentValue(attrs);
+            let newValue = currentValue;
+            switch (e.key) {
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    e.preventDefault();
+                    newValue = currentValue !== undefined ? Math.min(max, currentValue + step) : min;
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    e.preventDefault();
+                    newValue = currentValue !== undefined ? Math.max(min, currentValue - step) : min;
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    newValue = min;
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    newValue = max;
+                    break;
+                default:
+                    return;
+            }
+            if (newValue !== currentValue) {
+                handleChange(attrs, newValue);
+            }
+        };
+        const LikertScaleItem = () => {
+            return {
+                view: ({ attrs }) => {
+                    const { value, currentValue, showNumber, showTooltip, tooltipLabel, groupId, name, disabled, readonly, onchange, } = attrs;
+                    const radioId = `${groupId}-${value}`;
+                    const isChecked = currentValue === value;
+                    return m('.likert-scale__item.no-select', {
+                        className: [
+                            isChecked ? 'likert-scale__item--checked' : '',
+                            disabled ? 'likert-scale__item--disabled' : '',
+                            readonly ? 'likert-scale__item--readonly' : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' '),
+                    }, [
+                        // Number label (optional)
+                        showNumber && m('.likert-scale__number', value),
+                        // Radio button input
+                        m('input[type=radio].likert-scale__input', {
+                            id: radioId,
+                            name: name || groupId,
+                            value: value,
+                            checked: isChecked,
+                            disabled: disabled || readonly,
+                            onchange: () => onchange(value),
+                        }),
+                        // Label for radio button
+                        m('label.likert-scale__label', {
+                            for: radioId,
+                        }),
+                        // Tooltip (optional)
+                        showTooltip && tooltipLabel && m('.likert-scale__tooltip', tooltipLabel),
+                    ]);
+                },
+            };
+        };
+        return {
+            oninit: ({ attrs }) => {
+                const controlled = isControlled(attrs);
+                const isNonInteractive = attrs.readonly || attrs.disabled;
+                // Warn developer for improper controlled usage
+                if (attrs.value !== undefined && !controlled && !isNonInteractive) {
+                    console.warn(`LikertScale component received 'value' prop without 'onchange' handler. ` +
+                        `Use 'defaultValue' for uncontrolled components or add 'onchange' for controlled components.`);
+                }
+                if (!controlled) {
+                    state.internalValue = attrs.defaultValue;
+                }
+            },
+            view: ({ attrs }) => {
+                const { min = 1, max = 5, step = 1, size = 'medium', density = 'standard', layout = 'responsive', className = '', style = {}, readonly = false, disabled = false, id = state.id, name, label, description, isMandatory, startLabel, middleLabel, endLabel, showNumbers = false, showTooltips = false, tooltipLabels, alignLabels = false } = attrs, ariaAttrs = __rest(attrs, ["min", "max", "step", "size", "density", "layout", "className", "style", "readonly", "disabled", "id", "name", "label", "description", "isMandatory", "startLabel", "middleLabel", "endLabel", "showNumbers", "showTooltips", "tooltipLabels", "alignLabels"]);
+                const currentValue = getCurrentValue(attrs);
+                const itemCount = Math.floor((max - min) / step) + 1;
+                // Generate scale values
+                const scaleValues = Array.from({ length: itemCount }, (_, i) => min + i * step);
+                return m('.likert-scale', {
+                    className: [
+                        'likert-scale',
+                        getSizeClass(size),
+                        getDensityClass(density),
+                        getLayoutClass(layout),
+                        readonly ? 'likert-scale--readonly' : '',
+                        disabled ? 'likert-scale--disabled' : '',
+                        state.isFocused ? 'likert-scale--focused' : '',
+                        alignLabels ? 'likert-scale--aligned' : '',
+                        className,
+                    ]
+                        .filter(Boolean)
+                        .join(' '),
+                    style,
+                    id,
+                    role: 'radiogroup',
+                    'aria-label': ariaAttrs['aria-label'] || attrs.ariaLabel || label || `Rating scale from ${min} to ${max}`,
+                    'aria-labelledby': ariaAttrs['aria-labelledby'],
+                    'aria-readonly': readonly,
+                    'aria-disabled': disabled,
+                    onkeydown: (e) => handleKeyDown(attrs, e),
+                    onfocus: () => {
+                        state.isFocused = true;
+                    },
+                    onblur: () => {
+                        state.isFocused = false;
+                    },
+                    tabindex: readonly || disabled ? -1 : 0,
+                }, [
+                    // Label section (only text label, not the description)
+                    label &&
+                        m('.likert-scale__question-label', [
+                            m('span', label + (isMandatory ? ' *' : '')),
+                            description && m('.likert-scale__description', m.trust(description)),
+                        ]),
+                    // Scale section container
+                    m('.likert-scale__scale-container', [
+                        // Scale items with numbers
+                        m('.likert-scale__scale', scaleValues.map((value) => m(LikertScaleItem, {
+                            key: `likert-item-${value}`,
+                            value,
+                            currentValue,
+                            showNumber: showNumbers,
+                            showTooltip: showTooltips,
+                            tooltipLabel: tooltipLabels === null || tooltipLabels === void 0 ? void 0 : tooltipLabels[value - min],
+                            groupId: state.groupId,
+                            name,
+                            disabled,
+                            readonly,
+                            onchange: (v) => handleChange(attrs, v),
+                        }))),
+                        // Scale anchors
+                        (startLabel || middleLabel || endLabel) &&
+                            m('.likert-scale__anchors', [
+                                startLabel && m('.likert-scale__anchor.likert-scale__anchor--start', startLabel),
+                                middleLabel && m('.likert-scale__anchor.likert-scale__anchor--middle', middleLabel),
+                                endLabel && m('.likert-scale__anchor.likert-scale__anchor--end', endLabel),
+                            ]),
+                    ]),
+                    // Screen reader text
+                    m('.likert-scale__sr-only', {
+                        className: 'likert-scale__sr-only',
+                        'aria-live': 'polite',
+                        'aria-atomic': 'true',
+                    }, getLabelText(currentValue, min, max, attrs.getLabelText)),
+                ]);
+            },
+        };
+    };
+
     /**
      * ToggleButton component.
      *
@@ -11227,6 +11472,7 @@
     exports.InputCheckbox = InputCheckbox;
     exports.Label = Label;
     exports.LargeButton = LargeButton;
+    exports.LikertScale = LikertScale;
     exports.LinearProgress = LinearProgress;
     exports.ListItem = ListItem;
     exports.Mandatory = Mandatory;

package/dist/likert-scale.d.ts

@@ -0,0 +1,70 @@
+import { FactoryComponent, Attributes } from 'mithril';
+/** Likert scale component size options */
+export type LikertScaleSize = 'small' | 'medium' | 'large';
+/** Likert scale component density options */
+export type LikertScaleDensity = 'compact' | 'standard' | 'comfortable';
+/** Likert scale layout options */
+export type LikertScaleLayout = 'horizontal' | 'vertical' | 'responsive';
+/** Likert scale component attributes */
+export interface LikertScaleAttrs<T extends number = number> extends Attributes {
+    /** Minimum scale value (default: 1) */
+    min?: number;
+    /** Maximum scale value (default: 5) */
+    max?: number;
+    /** Step size for scale increments (default: 1) */
+    step?: number;
+    /** Current value for controlled mode */
+    value?: T;
+    /** Initial value for uncontrolled mode */
+    defaultValue?: T;
+    /** Callback when value changes */
+    onchange?: (value: T) => void;
+    /** Question/prompt text */
+    label?: string;
+    /** Helper text description */
+    description?: string;
+    /** Anchor label for minimum value (e.g., "Very Unhappy") */
+    startLabel?: string;
+    /** Anchor label for middle value (optional, e.g., "Neutral") */
+    middleLabel?: string;
+    /** Anchor label for maximum value (e.g., "Very Happy") */
+    endLabel?: string;
+    /** Whether to display numeric values (default: false) */
+    showNumbers?: boolean;
+    /** Whether to show tooltips on hover (default: false) */
+    showTooltips?: boolean;
+    /** Custom tooltip labels for each value */
+    tooltipLabels?: string[];
+    /** Density variant (default: 'standard') */
+    density?: LikertScaleDensity;
+    /** Size variant (default: 'medium') */
+    size?: LikertScaleSize;
+    /** Layout mode (default: 'responsive' = horizontal on desktop, vertical on mobile) */
+    layout?: LikertScaleLayout;
+    /** HTML ID for the component */
+    id?: string;
+    /** Name for form submission */
+    name?: string;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Whether the component is read-only */
+    readonly?: boolean;
+    /** If true, add a mandatory '*' after the label */
+    isMandatory?: boolean;
+    /** ARIA label for the component */
+    'aria-label'?: string;
+    /** ARIA label for the component (camelCase alternative) */
+    ariaLabel?: string;
+    /** ARIA labelledby reference */
+    'aria-labelledby'?: string;
+    /** Function to get label text for accessibility */
+    getLabelText?: (value: number, min: number, max: number) => string;
+    /** Class name for the container */
+    className?: string;
+    /** Additional CSS styles */
+    style?: any;
+    /** Use CSS grid for label/scale alignment in multi-question surveys (default: false) */
+    alignLabels?: boolean;
+}
+/** Create a LikertScale component */
+export declare const LikertScale: FactoryComponent<LikertScaleAttrs>;

package/dist/utilities.css

@@ -2778,6 +2778,11 @@ td, th {
 .collection .collection-item.active .secondary-content {
   color: var(--mm-text-on-primary, #fff);
 }
+.collection .collection-item .secondary-text {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
+  font-size: 0.9rem;
+  margin-top: 4px;
+}
 .collection a.collection-item {
   display: block;
   transition: 0.25s;

package/package.json

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

package/sass/components/_global.scss

@@ -591,6 +591,13 @@ td, th{
         color: var(--mm-text-on-primary, #fff);
       }
     }
+
+    // Secondary text styling for BASIC mode with content
+    .secondary-text {
+      color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
+      font-size: 0.9rem;
+      margin-top: 4px;
+    }
   }
   a.collection-item{
     display: block;