mithril-materialized 3.6.0 → 3.7.0

package/dist/analog-clock.d.ts

@@ -0,0 +1,57 @@
+import { FactoryComponent } from 'mithril';
+/**
+ * Attributes for the AnalogClock component
+ */
+export interface AnalogClockAttrs {
+    /** Current hours value (1-12 for 12-hour, 0-23 for 24-hour) */
+    hours: number;
+    /** Current minutes value (0-59) */
+    minutes: number;
+    /** Current AM/PM value (only relevant in 12-hour mode) */
+    amOrPm: 'AM' | 'PM';
+    /** Current view mode: 'hours' or 'minutes' */
+    currentView: 'hours' | 'minutes';
+    /** Whether to use 12-hour format (true) or 24-hour format (false) */
+    twelveHour: boolean;
+    /** Radius of the clock dial (default: 135) */
+    dialRadius?: number;
+    /** Radius of outer clock ticks (default: 105) */
+    outerRadius?: number;
+    /** Radius of inner clock ticks for 24-hour mode (default: 70) */
+    innerRadius?: number;
+    /** Radius of tick circles (default: 20) */
+    tickRadius?: number;
+    /** Round minutes to nearest 5 when dragging (default: false) */
+    roundBy5?: boolean;
+    /** Enable haptic feedback vibration (default: true) */
+    vibrate?: boolean;
+    /** Callback when time changes */
+    onTimeChange: (hours: number, minutes: number) => void;
+    /** Callback when view changes (optional) */
+    onViewChange?: (view: 'hours' | 'minutes') => void;
+    /** Optional reference to external hours display element for updates */
+    spanHours?: HTMLElement;
+    /** Optional reference to external minutes display element for updates */
+    spanMinutes?: HTMLElement;
+}
+/**
+ * AnalogClock component - A draggable analog clock face for time selection
+ *
+ * @example
+ * ```typescript
+ * m(AnalogClock, {
+ *   hours: 10,
+ *   minutes: 30,
+ *   amOrPm: 'AM',
+ *   currentView: 'hours',
+ *   twelveHour: true,
+ *   onTimeChange: (hours, minutes) => {
+ *     console.log(`Time changed to ${hours}:${minutes}`);
+ *   },
+ *   onViewChange: (view) => {
+ *     console.log(`View changed to ${view}`);
+ *   }
+ * })
+ * ```
+ */
+export declare const AnalogClock: FactoryComponent<AnalogClockAttrs>;

package/dist/digital-clock.d.ts

@@ -0,0 +1,48 @@
+import { FactoryComponent } from 'mithril';
+/**
+ * Attributes for the DigitalClock component
+ */
+export interface DigitalClockAttrs {
+    /** Current hours value (1-12 for 12-hour, 0-23 for 24-hour) */
+    hours: number;
+    /** Current minutes value (0-59) */
+    minutes: number;
+    /** Current AM/PM value (only relevant in 12-hour mode) */
+    amOrPm: 'AM' | 'PM';
+    /** Whether to use 12-hour format (true) or 24-hour format (false) */
+    twelveHour: boolean;
+    /** Step between minute options (default: 5) */
+    minuteStep?: number;
+    /** Step between hour options (default: 1) */
+    hourStep?: number;
+    /** Minimum allowed time in format "HH:MM" or "HH:MM AM/PM" */
+    minTime?: string;
+    /** Maximum allowed time in format "HH:MM" or "HH:MM AM/PM" */
+    maxTime?: string;
+    /** Callback when time changes */
+    onTimeChange: (hours: number, minutes: number, amOrPm: 'AM' | 'PM') => void;
+    /** Optional reference to external hours display element for updates */
+    spanHours?: HTMLElement;
+    /** Optional reference to external minutes display element for updates */
+    spanMinutes?: HTMLElement;
+    /** Optional reference to external AM/PM display element for updates */
+    spanAmPm?: HTMLElement;
+}
+/**
+ * DigitalClock component - A scrollable digital time picker
+ *
+ * @example
+ * ```typescript
+ * m(DigitalClock, {
+ *   hours: 10,
+ *   minutes: 30,
+ *   amOrPm: 'AM',
+ *   twelveHour: true,
+ *   minuteStep: 5,
+ *   onTimeChange: (hours, minutes, amOrPm) => {
+ *     console.log(`Time changed to ${hours}:${minutes} ${amOrPm}`);
+ *   }
+ * })
+ * ```
+ */
+export declare const DigitalClock: FactoryComponent<DigitalClockAttrs>;

package/dist/index.css

@@ -9096,12 +9096,14 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
 .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 {
@@ -9189,6 +9191,10 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   bottom: 0;
 }
 
+.timepicker-dial {
+  pointer-events: none;
+}
+
 .timepicker-minutes {
   visibility: hidden;
 }
@@ -9203,6 +9209,7 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   position: absolute;
   cursor: pointer;
   font-size: 15px;
+  pointer-events: none;
 }
 
 .timepicker-tick.active,
@@ -9268,6 +9275,171 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   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;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          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/index.d.ts

@@ -30,6 +30,11 @@ export * from './switch';
 export * from './tabs';
 export * from './search-select';
 export * from './timepicker';
+export { TimeRangePicker } from './time-range-picker';
+export type { TimeRangePickerAttrs } from './time-range-picker';
+export * from './digital-clock';
+export * from './analog-clock';
+export * from './time-utils';
 export * from './toast';
 export * from './tooltip';
 export * from './utils';