mithril-materialized 3.6.0 → 3.8.0

package/dist/pickers.css

@@ -353,12 +353,14 @@
 .timepicker-modal {
   max-width: 325px;
   max-height: none;
+  overflow: hidden;
 }
 
 .timepicker-container.modal-content {
   display: flex;
   flex-direction: column;
   padding: 0;
+  overflow: hidden;
 }
 
 .text-primary {
@@ -442,6 +444,10 @@
   bottom: 0;
 }
 
+.timepicker-dial {
+  pointer-events: none;
+}
+
 .timepicker-minutes {
   visibility: hidden;
 }
@@ -456,6 +462,7 @@
   position: absolute;
   cursor: pointer;
   font-size: 15px;
+  pointer-events: none;
 }
 
 .timepicker-tick.active,
@@ -521,6 +528,169 @@
   padding: 0 20px;
 }
 
+/* Digital Clock Mode */
+.timepicker-digital-mode {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 2.5 auto;
+  overflow: hidden;
+}
+
+.timepicker-digital-clock {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+  user-select: none;
+  overflow: hidden;
+}
+
+.digital-clock-column {
+  width: 80px;
+  height: 240px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  scroll-snap-type: y mandatory;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  position: relative;
+}
+.digital-clock-column::-webkit-scrollbar {
+  width: 6px;
+}
+.digital-clock-column::-webkit-scrollbar-track {
+  background: transparent;
+}
+.digital-clock-column::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 3px;
+}
+.digital-clock-column:hover {
+  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+}
+.digital-clock-column:hover::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.3);
+}
+.digital-clock-column:hover::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.5);
+}
+.digital-clock-column {
+  background: linear-gradient(to bottom, var(--mm-background-color, #fafafa) 0%, transparent 20%, transparent 80%, var(--mm-background-color, #fafafa) 100%);
+}
+.digital-clock-column.ampm-column {
+  width: 60px;
+  scrollbar-width: none;
+}
+.digital-clock-column.ampm-column::-webkit-scrollbar {
+  display: none;
+}
+.digital-clock-column::before, .digital-clock-column::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1px;
+  pointer-events: none;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.digital-clock-column::before {
+  top: calc(50% - 24px);
+}
+.digital-clock-column::after {
+  top: calc(50% + 24px);
+}
+
+.digital-clock-item {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  font-weight: 300;
+  scroll-snap-align: center;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.4);
+  transition: all 0.2s ease;
+}
+.digital-clock-item:hover:not(.padding):not(.disabled) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.digital-clock-item.selected {
+  color: var(--mm-primary-color, #26a69a);
+  font-weight: 500;
+  font-size: 2rem;
+}
+.digital-clock-item.disabled {
+  color: rgba(0, 0, 0, 0.15);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.digital-clock-item.padding {
+  pointer-events: none;
+  cursor: default;
+}
+
+.digital-clock-separator {
+  font-size: 2rem;
+  font-weight: 300;
+  margin: 0 4px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+/* Time Range Picker Styles */
+.timerange-display-vertical {
+  flex: 1 auto;
+  background-color: #26a69a;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-width: 200px;
+}
+
+.timerange-time-section {
+  color: rgba(255, 255, 255, 0.6);
+}
+.timerange-time-section.active {
+  color: rgb(255, 255, 255);
+}
+
+.timerange-label {
+  font-size: 0.9rem;
+  font-weight: 300;
+  margin-bottom: 8px;
+  opacity: 0.8;
+}
+
+.timerange-time {
+  font-size: 3rem;
+  font-weight: 300;
+  letter-spacing: 0.05em;
+  min-width: 200px;
+  display: flex;
+  align-items: baseline;
+}
+
+.timerange-hours {
+  display: inline-block;
+  min-width: 2ch;
+  text-align: right;
+}
+
+.timerange-minutes {
+  display: inline-block;
+  min-width: 2ch;
+  text-align: left;
+}
+
+.timerange-ampm {
+  font-size: 1.5rem;
+  margin-left: 8px;
+}
+
 /* Media Queries */
 @media only screen and (min-width : 601px) {
   .timepicker-modal {

package/dist/select.d.ts

@@ -1,5 +1,6 @@
 import { Attributes, Component } from 'mithril';
 import { InputOption } from './option';
+export type SortSelected<T extends string | number> = 'asc' | 'desc' | 'none' | ((a: InputOption<T>, b: InputOption<T>) => number);
 export interface SelectAttrs<T extends string | number> extends Attributes {
     /** Options to select from */
     options: InputOption<T>[];
@@ -48,7 +49,7 @@ export interface SelectAttrs<T extends string | number> extends Attributes {
     /** Max height of the dropdown menu, default '400px' */
     maxHeight?: string;
     /** Sort selected items: 'asc' (alphabetically A-Z), 'desc' (Z-A), 'none' (insertion order), or custom sort function */
-    sortSelected?: 'asc' | 'desc' | 'none' | ((a: InputOption<T>, b: InputOption<T>) => number);
+    sortSelected?: SortSelected<T>;
 }
 /** Select component */
 export declare const Select: <T extends string | number>() => Component<SelectAttrs<T>>;

package/dist/time-range-picker.d.ts

@@ -0,0 +1,51 @@
+import { FactoryComponent } from 'mithril';
+import { InputAttrs } from './input-options';
+export interface TimepickerI18n {
+    cancel?: string;
+    clear?: string;
+    done?: string;
+    next?: string;
+}
+export interface TimeRangePickerAttrs extends Omit<InputAttrs<string>, 'defaultValue' | 'onchange'> {
+    /** Starting time value in HH:MM or HH:MM AM/PM format */
+    startValue?: string;
+    /** Ending time value in HH:MM or HH:MM AM/PM format */
+    endValue?: string;
+    /** Enable validation: end time must be after start time */
+    validateRange?: boolean;
+    /** Callback when time range changes */
+    onchange?: (startTime: string, endTime: string) => void;
+    /** i18n for time range picker */
+    i18n?: TimepickerI18n;
+    /** Use 12-hour format with AM/PM */
+    twelveHour?: boolean;
+    /** Display mode: 'analog' or 'digital' (default: 'digital') */
+    displayMode?: 'analog' | 'digital';
+    /** Step for minute increments (default 5) */
+    minuteStep?: number;
+    /** Step for hour increments (default 1) */
+    hourStep?: number;
+    /** Minimum selectable time in HH:MM or HH:MM AM/PM format */
+    minTime?: string;
+    /** Maximum selectable time in HH:MM or HH:MM AM/PM format */
+    maxTime?: string;
+    /** Show clear button */
+    showClearBtn?: boolean;
+    /** Dial radius for analog clock (default: 135) */
+    dialRadius?: number;
+    /** Outer radius for analog clock (default: 105) */
+    outerRadius?: number;
+    /** Inner radius for analog clock (default: 70) */
+    innerRadius?: number;
+    /** Tick radius for analog clock (default: 20) */
+    tickRadius?: number;
+    /** Round by 5 minutes for analog clock (default: false) */
+    roundBy5?: boolean;
+    /** Vibrate on value change for analog clock (default: true) */
+    vibrate?: boolean;
+}
+/**
+ * TimeRangePicker component for selecting time ranges
+ * Custom implementation with embedded digital clock picker
+ */
+export declare const TimeRangePicker: FactoryComponent<TimeRangePickerAttrs>;

package/dist/time-utils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Shared utility functions for TimePicker and TimeRangePicker components
+ */
+export interface TimeValue {
+    hours: number;
+    minutes: number;
+    amOrPm: 'AM' | 'PM';
+}
+export declare const addLeadingZero: (num: number) => string;
+export declare const parseTime: (timeStr: string, twelveHour: boolean) => TimeValue;
+export declare const formatTime: (time: TimeValue, twelveHour: boolean) => string;
+export declare const timeToMinutes: (time: TimeValue, twelveHour: boolean) => number;
+export declare const generateHourOptions: (twelveHour: boolean, hourStep: number) => number[];
+export declare const generateMinuteOptions: (minuteStep: number) => number[];
+export declare const isTimeDisabled: (hours: number, minutes: number, amOrPm: "AM" | "PM", minTime?: string, maxTime?: string, twelveHour?: boolean) => boolean;
+export declare const scrollToValue: (container: HTMLElement, index: number, itemHeight: number, animated?: boolean) => void;
+export declare const snapToNearestItem: (container: HTMLElement, itemHeight: number, onSnap: (index: number) => void) => void;

package/dist/timepicker.d.ts

@@ -4,6 +4,7 @@ export interface TimepickerI18n {
     cancel?: string;
     clear?: string;
     done?: string;
+    next?: string;
 }
 export interface TimepickerOptions {
     dialRadius?: number;
@@ -20,6 +21,16 @@ export interface TimepickerOptions {
     twelveHour?: boolean;
     vibrate?: boolean;
     roundBy5?: boolean;
+    /** Display mode: 'analog' (default) or 'digital' */
+    displayMode?: 'analog' | 'digital';
+    /** Step for minute increments in digital mode (default 5) */
+    minuteStep?: number;
+    /** Step for hour increments (default 1) */
+    hourStep?: number;
+    /** Minimum selectable time in HH:MM or HH:MM AM/PM format */
+    minTime?: string;
+    /** Maximum selectable time in HH:MM or HH:MM AM/PM format */
+    maxTime?: string;
     onOpen?: () => void;
     onOpenStart?: () => void;
     onOpenEnd?: () => void;

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/dist/utils.d.ts

@@ -1,3 +1,5 @@
+import { SortSelected } from './select';
+import { InputOption } from '.';
 /**
  * Create a unique ID
  * @see https://stackoverflow.com/a/2117523/319711
@@ -20,16 +22,7 @@ export declare const isNumeric: (n: string | number) => boolean;
  * @param sortConfig - Sort configuration: 'asc', 'desc', 'none', or custom comparator function
  * @returns Sorted array (or original if 'none' or undefined)
  */
-export declare const sortOptions: <T extends string | number>(options: {
-    id: T;
-    label?: string;
-}[], sortConfig?: "asc" | "desc" | "none" | ((a: {
-    id: T;
-    label?: string;
-}, b: {
-    id: T;
-    label?: string;
-}) => number)) => {
+export declare const sortOptions: <T extends string | number>(options: InputOption<T>[], sortConfig?: SortSelected<T>) => {
     id: T;
     label?: string;
 }[];

package/package.json

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

package/sass/components/_timepicker.scss

@@ -81,12 +81,14 @@
 .timepicker-modal {
   max-width: 325px;
   max-height: none;
+  overflow: hidden;
 }
 
 .timepicker-container.modal-content {
   display: flex;
   flex-direction: column;
   padding: 0;
+  overflow: hidden;
 }
 
 .text-primary {
@@ -171,6 +173,10 @@
   top: 0;
   bottom: 0;
 }
+
+.timepicker-dial {
+  pointer-events: none;
+}
 .timepicker-minutes {
 	visibility: hidden;
 }
@@ -185,6 +191,7 @@
 	position: absolute;
 	cursor: pointer;
   font-size: 15px;
+  pointer-events: none;
 }
 
 .timepicker-tick.active,
@@ -248,6 +255,194 @@
   padding: 0 20px;
 }
 
+/* Digital Clock Mode */
+.timepicker-digital-mode {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 2.5 auto;
+  overflow: hidden;
+}
+
+.timepicker-digital-clock {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+  user-select: none;
+  overflow: hidden;
+}
+
+.digital-clock-column {
+  width: 80px;
+  height: 240px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  scroll-snap-type: y mandatory;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  position: relative;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 3px;
+  }
+
+  // Show scrollbar on hover
+  &:hover {
+    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.3);
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.5);
+      }
+    }
+  }
+
+  // Gradient fade at edges - theme aware
+  background: linear-gradient(
+    to bottom,
+    var(--mm-background-color, #fafafa) 0%,
+    transparent 20%,
+    transparent 80%,
+    var(--mm-background-color, #fafafa) 100%
+  );
+
+  &.ampm-column {
+    width: 60px;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  // Selection indicator lines
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 1px;
+    pointer-events: none;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  &::before {
+    top: calc(50% - 24px);
+  }
+
+  &::after {
+    top: calc(50% + 24px);
+  }
+}
+
+.digital-clock-item {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  font-weight: 300;
+  scroll-snap-align: center;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.4);
+  transition: all 0.2s ease;
+
+  &:hover:not(.padding):not(.disabled) {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  &.selected {
+    color: var(--mm-primary-color, variables.$secondary-color);
+    font-weight: 500;
+    font-size: 2rem;
+  }
+
+  &.disabled {
+    color: rgba(0, 0, 0, 0.15);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &.padding {
+    pointer-events: none;
+    cursor: default;
+  }
+}
+
+.digital-clock-separator {
+  font-size: 2rem;
+  font-weight: 300;
+  margin: 0 4px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+/* Time Range Picker Styles */
+.timerange-display-vertical {
+  flex: 1 auto;
+  background-color: variables.$secondary-color;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-width: 200px;
+}
+
+.timerange-time-section {
+  color: rgba(255, 255, 255, 0.6);
+
+  &.active {
+    color: rgba(255, 255, 255, 1);
+  }
+}
+
+.timerange-label {
+  font-size: 0.9rem;
+  font-weight: 300;
+  margin-bottom: 8px;
+  opacity: 0.8;
+}
+
+.timerange-time {
+  font-size: 3rem;
+  font-weight: 300;
+  letter-spacing: 0.05em;
+  min-width: 200px; // Prevent width changes when time updates
+  display: flex;
+  align-items: baseline;
+}
+
+.timerange-hours {
+  display: inline-block;
+  min-width: 2ch;
+  text-align: right;
+}
+
+.timerange-minutes {
+  display: inline-block;
+  min-width: 2ch;
+  text-align: left;
+}
+
+.timerange-ampm {
+  font-size: 1.5rem;
+  margin-left: 8px;
+}
+
 /* Media Queries */
 @media #{variables.$medium-and-up} {
   .timepicker-modal {
@@ -269,4 +464,4 @@
 	  text-align: center;
 	  margin-top: 1.2rem;
 	}
-}
+}