commons-shared-web-ui 0.0.61 → 0.0.62

package/src/lib/modules/time-picker/components/time-wheel-panel/time-wheel-panel.component.ts

@@ -0,0 +1,595 @@
+import { Component, Input, Output, EventEmitter, OnInit, AfterViewInit, OnDestroy, ViewChild, ElementRef, NgZone, OnChanges, SimpleChanges } from '@angular/core';
+import { TimeMode, TimePickerLabels } from '../../models/time-picker.models';
+
+type WheelType = 'hour' | 'minute' | 'period';
+
+@Component({
+  selector: 'lib-time-wheel-panel',
+  templateUrl: './time-wheel-panel.component.html',
+  styleUrls: ['./time-wheel-panel.component.scss'],
+  standalone: false
+})
+export class TimeWheelPanelComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+  @Input() mode: TimeMode = '12';
+  @Input() value: string = '';
+  @Input() labels?: TimePickerLabels;
+  @Input() minuteStep: number = 0;
+  @Input() minTime?: string; // "HH:mm" 24h
+  @Input() maxTime?: string; // "HH:mm" 24h
+
+  @Output() confirmed = new EventEmitter<string>();
+  @Output() cancelled = new EventEmitter<void>();
+
+  @ViewChild('hourWheel') hourWheel!: ElementRef<HTMLDivElement>;
+  @ViewChild('minuteWheel') minuteWheel!: ElementRef<HTMLDivElement>;
+  @ViewChild('periodWheel') periodWheel?: ElementRef<HTMLDivElement>;
+
+  // ─── Geometry (single source of truth; keep in sync with SCSS) ───
+  static readonly ITEM_HEIGHT = 36;
+  static readonly VISIBLE_ROWS = 3;
+  readonly ITEM_HEIGHT = TimeWheelPanelComponent.ITEM_HEIGHT;
+  readonly SPACERS = (TimeWheelPanelComponent.VISIBLE_ROWS - 1) / 2; // leading == trailing
+  readonly spacerRows: number[] = Array.from({ length: this.SPACERS }, (_, i) => i);
+  private get containerHeight(): number {
+    return TimeWheelPanelComponent.VISIBLE_ROWS * this.ITEM_HEIGHT;
+  }
+
+  hours: string[] = [];
+  minutes: string[] = [];
+  periods: string[] = ['AM', 'PM'];
+
+  // How many times each list is repeated in the DOM for the infinite loop.
+  // Computed per-list so one repeat band is always >= the viewport height.
+  hourRepeats: number[] = [0, 1, 2];
+  minuteRepeats: number[] = [0, 1, 2];
+
+  selectedHour: string = '09';
+  selectedMinute: string = '00';
+  selectedPeriod: string = 'AM';
+
+  disabledHours = new Set<string>();
+  disabledMinutes = new Set<string>();
+  disabledPeriods = new Set<string>();
+
+  private isInitialScrollDone: boolean = false;
+
+  private scrollListeners: Partial<Record<WheelType, () => void>> = {};
+  private idleTimers: Partial<Record<WheelType, ReturnType<typeof setTimeout>>> = {};
+  private rafIds: Partial<Record<WheelType, number>> = {};
+
+  private static readonly IDLE_MS = 90;
+
+  constructor(private zone: NgZone) {}
+
+  ngOnInit(): void {
+    this.generateHours();
+    this.generateMinutes();
+    this.parseInitialValue(this.value);
+    this.computeConstraints();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['mode'] || changes['minuteStep'] || changes['minTime'] || changes['maxTime']) {
+      this.generateHours();
+      this.generateMinutes();
+      this.computeConstraints();
+      if (this.isInitialScrollDone) {
+        this.zone.runOutsideAngular(() => {
+          this.scrollToValue('hour', this.selectedHour, false);
+          this.scrollToValue('minute', this.selectedMinute, false);
+          if (this.mode === '12') {
+            this.scrollToValue('period', this.selectedPeriod, false);
+          }
+        });
+      }
+    }
+  }
+
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.scrollToValue('hour', this.selectedHour, false);
+      this.scrollToValue('minute', this.selectedMinute, false);
+      if (this.mode === '12') {
+        this.scrollToValue('period', this.selectedPeriod, false);
+      }
+
+      this.updateWheelEffects(this.hourWheel.nativeElement);
+      this.updateWheelEffects(this.minuteWheel.nativeElement);
+      if (this.periodWheel) {
+        this.updateWheelEffects(this.periodWheel.nativeElement);
+      }
+
+      this.isInitialScrollDone = true;
+    }, 150);
+
+    // Native scroll drives everything. On each scroll event we (rAF-throttled)
+    // repaint the 3D wheel effect, and after the wheel goes idle we read the
+    // settled value + do the seamless wrap-around reposition.
+    this.zone.runOutsideAngular(() => {
+      this.attachScroll('hour', this.hourWheel.nativeElement);
+      this.attachScroll('minute', this.minuteWheel.nativeElement);
+      if (this.periodWheel) {
+        this.attachScroll('period', this.periodWheel.nativeElement);
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    const map: Partial<Record<WheelType, ElementRef<HTMLDivElement> | undefined>> = {
+      hour: this.hourWheel,
+      minute: this.minuteWheel,
+      period: this.periodWheel
+    };
+    (Object.keys(this.scrollListeners) as WheelType[]).forEach(type => {
+      const el = map[type]?.nativeElement;
+      const listener = this.scrollListeners[type];
+      if (el && listener) {
+        el.removeEventListener('scroll', listener);
+      }
+      const raf = this.rafIds[type];
+      if (raf) cancelAnimationFrame(raf);
+      const timer = this.idleTimers[type];
+      if (timer) clearTimeout(timer);
+    });
+  }
+
+  private attachScroll(type: WheelType, element: HTMLElement): void {
+    const listener = () => {
+      // Throttle the visual repaint to one per frame.
+      if (!this.rafIds[type]) {
+        this.rafIds[type] = requestAnimationFrame(() => {
+          this.rafIds[type] = undefined as unknown as number;
+          this.updateWheelEffects(element);
+        });
+      }
+
+      // Debounce the "settled" read.
+      const existing = this.idleTimers[type];
+      if (existing) clearTimeout(existing);
+      this.idleTimers[type] = setTimeout(() => {
+        this.onScrollIdle(type, element);
+      }, TimeWheelPanelComponent.IDLE_MS);
+    };
+
+    this.scrollListeners[type] = listener;
+    element.addEventListener('scroll', listener, { passive: true });
+  }
+
+  private generateHours(): void {
+    if (this.mode === '12') {
+      this.hours = Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, '0'));
+    } else {
+      this.hours = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'));
+    }
+    this.hourRepeats = this.buildRepeats(this.hours.length);
+  }
+
+  private generateMinutes(): void {
+    const step = Math.max(1, this.minuteStep);
+    this.minutes = [];
+    for (let i = 0; i < 60; i += step) {
+      this.minutes.push(i.toString().padStart(2, '0'));
+    }
+    this.minuteRepeats = this.buildRepeats(this.minutes.length);
+  }
+
+  // Odd repeat count so that one buffer band (N*ITEM_HEIGHT) on each side of the
+  // central band is always >= the viewport height. Common case (N=12/24/60) → 3.
+  private buildRepeats(n: number): number[] {
+    const band = n * this.ITEM_HEIGHT;
+    const count = Math.max(3, 2 * Math.ceil(this.containerHeight / band) + 1);
+    return Array.from({ length: count }, (_, i) => i);
+  }
+
+  private centralBandStart(list: string[], repeats: number[]): number {
+    // Index (in the repeated DOM list) of the first item of the central band.
+    return Math.floor(repeats.length / 2) * list.length;
+  }
+
+  private parseInitialValue(valStr: string): void {
+    if (!valStr) {
+      this.setDefaultTime();
+      return;
+    }
+
+    const twelveRegex = /^(\d{1,2}):(\d{2})\s*(AM|PM)$/i;
+    const twentyFourRegex = /^(\d{1,2}):(\d{2})$/;
+
+    let match = valStr.trim().match(twelveRegex);
+    if (match) {
+      const hh = match[1].padStart(2, '0');
+      const mm = match[2];
+      const period = match[3].toUpperCase();
+
+      if (this.mode === '12') {
+        this.selectedHour = hh;
+        this.selectedMinute = this.findClosestMinute(mm);
+        this.selectedPeriod = period;
+      } else {
+        // Convert to 24h
+        let hNum = parseInt(hh, 10);
+        if (period === 'PM' && hNum !== 12) hNum += 12;
+        if (period === 'AM' && hNum === 12) hNum = 0;
+        this.selectedHour = hNum.toString().padStart(2, '0');
+        this.selectedMinute = this.findClosestMinute(mm);
+      }
+      return;
+    }
+
+    match = valStr.trim().match(twentyFourRegex);
+    if (match) {
+      const hh = match[1].padStart(2, '0');
+      const mm = match[2];
+
+      if (this.mode === '24') {
+        this.selectedHour = hh;
+        this.selectedMinute = this.findClosestMinute(mm);
+      } else {
+        // Convert to 12h
+        let hNum = parseInt(hh, 10);
+        const period = hNum >= 12 ? 'PM' : 'AM';
+        if (hNum > 12) hNum -= 12;
+        if (hNum === 0) hNum = 12;
+        this.selectedHour = hNum.toString().padStart(2, '0');
+        this.selectedMinute = this.findClosestMinute(mm);
+        this.selectedPeriod = period;
+      }
+      return;
+    }
+
+    this.setDefaultTime();
+  }
+
+  private findClosestMinute(mmStr: string): string {
+    const mmVal = parseInt(mmStr, 10);
+    if (isNaN(mmVal)) return '00';
+    let closest = this.minutes[0];
+    let minDiff = 60;
+    for (const m of this.minutes) {
+      const mVal = parseInt(m, 10);
+      const diff = Math.abs(mVal - mmVal);
+      if (diff < minDiff) {
+        minDiff = diff;
+        closest = m;
+      }
+    }
+    return closest;
+  }
+
+  private setDefaultTime(): void {
+    if (this.mode === '12') {
+      this.selectedHour = '09';
+      this.selectedMinute = '00';
+      this.selectedPeriod = 'AM';
+    } else {
+      this.selectedHour = '09';
+      this.selectedMinute = '00';
+    }
+  }
+
+  private toMinutes(h: number, m: number): number {
+    return h * 60 + m;
+  }
+
+  private parseLimit(hhmm: string): { h: number; m: number } {
+    const parts = hhmm.split(':');
+    return {
+      h: parseInt(parts[0], 10) || 0,
+      m: parseInt(parts[1], 10) || 0
+    };
+  }
+
+  private to24hrHour(displayHour: string, period: 'AM' | 'PM'): number {
+    const h = parseInt(displayHour, 10);
+    if (period === 'AM') {
+      return h === 12 ? 0 : h;
+    } else {
+      return h === 12 ? 12 : h + 12;
+    }
+  }
+
+  computeConstraints(): void {
+    this.disabledHours.clear();
+    this.disabledMinutes.clear();
+    this.disabledPeriods.clear();
+
+    if (!this.minTime && !this.maxTime) return;
+
+    let minMin = 0;
+    let maxMin = 23 * 60 + 59;
+
+    if (this.minTime) {
+      const parsed = this.parseLimit(this.minTime);
+      minMin = this.toMinutes(parsed.h, parsed.m);
+    }
+    if (this.maxTime) {
+      const parsed = this.parseLimit(this.maxTime);
+      maxMin = this.toMinutes(parsed.h, parsed.m);
+    }
+
+    if (minMin > maxMin) {
+      // Invalid config
+      return;
+    }
+
+    if (this.mode === '24') {
+      for (const h of this.hours) {
+        const hNum = parseInt(h, 10);
+        const hourStart = this.toMinutes(hNum, 0);
+        const hourEnd = this.toMinutes(hNum, 59);
+        if (hourEnd < minMin || hourStart > maxMin) {
+          this.disabledHours.add(h);
+        }
+      }
+
+      const selH = parseInt(this.selectedHour, 10);
+      for (const m of this.minutes) {
+        const mNum = parseInt(m, 10);
+        const total = this.toMinutes(selH, mNum);
+        if (total < minMin || total > maxMin) {
+          this.disabledMinutes.add(m);
+        }
+      }
+      return;
+    }
+
+    // 12-hour mode logic
+    const amCoversAny = minMin < 12 * 60;
+    const pmCoversAny = maxMin >= 12 * 60;
+
+    if (!amCoversAny) this.disabledPeriods.add('AM');
+    if (!pmCoversAny) this.disabledPeriods.add('PM');
+
+    for (const h of this.hours) {
+      const hNum = parseInt(h, 10);
+
+      const h24_AM = hNum === 12 ? 0 : hNum;
+      const amStart = this.toMinutes(h24_AM, 0);
+      const amEnd = this.toMinutes(h24_AM, 59);
+      const amValid = amEnd >= minMin && amStart <= maxMin && amCoversAny;
+
+      const h24_PM = hNum === 12 ? 12 : hNum + 12;
+      const pmStart = this.toMinutes(h24_PM, 0);
+      const pmEnd = this.toMinutes(h24_PM, 59);
+      const pmValid = pmEnd >= minMin && pmStart <= maxMin && pmCoversAny;
+
+      if (this.selectedPeriod === 'AM' && !amValid) this.disabledHours.add(h);
+      if (this.selectedPeriod === 'PM' && !pmValid) this.disabledHours.add(h);
+    }
+
+    const selH24 = this.to24hrHour(this.selectedHour, this.selectedPeriod as 'AM' | 'PM');
+    for (const m of this.minutes) {
+      const mNum = parseInt(m, 10);
+      const total = this.toMinutes(selH24, mNum);
+      if (total < minMin || total > maxMin) {
+        this.disabledMinutes.add(m);
+      }
+    }
+  }
+
+  updateWheelEffects(element: HTMLElement): void {
+    const scrollTop = element.scrollTop;
+    const items = element.children;
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i] as HTMLElement;
+      if (item.classList.contains('cc-twp-spacer')) continue;
+
+      const itemTop = (i - this.SPACERS) * this.ITEM_HEIGHT;
+      const distance = Math.abs(itemTop - scrollTop);
+
+      const maxDist = this.ITEM_HEIGHT * 2;
+      const ratio = Math.max(0, 1 - distance / maxDist);
+
+      // Flatter than the old drum look: gentle scale + opacity fade only.
+      const scale = 0.85 + 0.15 * ratio;
+      const opacity = 0.4 + 0.6 * ratio;
+
+      item.style.transform = `scale(${scale}) translateZ(0)`;
+      item.style.opacity = String(opacity);
+    }
+  }
+
+  private listFor(type: WheelType): string[] {
+    if (type === 'hour') return this.hours;
+    if (type === 'minute') return this.minutes;
+    return this.periods;
+  }
+
+  private repeatsFor(type: WheelType): number[] {
+    if (type === 'hour') return this.hourRepeats;
+    if (type === 'minute') return this.minuteRepeats;
+    return [0];
+  }
+
+  private isDisabled(type: WheelType, val: string): boolean {
+    if (type === 'hour') return this.disabledHours.has(val);
+    if (type === 'minute') return this.disabledMinutes.has(val);
+    return this.disabledPeriods.has(val);
+  }
+
+  // Called after native inertial scrolling settles.
+  private onScrollIdle(type: WheelType, element: HTMLElement): void {
+    if (!this.isInitialScrollDone) return;
+
+    const list = this.listFor(type);
+    const N = list.length;
+    const looping = type === 'hour' || type === 'minute';
+
+    // 1. Seamless wrap-around: keep the resting position inside the central band.
+    if (looping) {
+      const band = N * this.ITEM_HEIGHT;
+      const start = this.centralBandStart(list, this.repeatsFor(type)) * this.ITEM_HEIGHT;
+      const end = start + band;
+      if (element.scrollTop < start || element.scrollTop >= end) {
+        const originalScrollBehavior = element.style.scrollBehavior;
+        element.style.scrollBehavior = 'auto';
+        
+        if (element.scrollTop < start) {
+          element.scrollTop += band;
+        } else {
+          element.scrollTop -= band;
+        }
+        
+        // Force layout reflow
+        const _ = element.scrollTop;
+        element.style.scrollBehavior = originalScrollBehavior;
+      }
+    }
+
+    // 2. Read the settled value.
+    let index = Math.round(element.scrollTop / this.ITEM_HEIGHT);
+    let origIndex = looping ? ((index % N) + N) % N : Math.max(0, Math.min(N - 1, index));
+    let val = list[origIndex];
+
+    // 3. If it landed on a disabled value, snap to the nearest enabled one.
+    if (val && this.isDisabled(type, val)) {
+      const enabled = this.nearestEnabled(type, origIndex);
+      if (enabled != null) {
+        this.scrollToValue(type, list[enabled], true);
+        origIndex = enabled;
+        val = list[enabled];
+      }
+    } else {
+      // Enforce a clean rest position (native mandatory-snap usually already did).
+      const target = index * this.ITEM_HEIGHT;
+      if (Math.abs(element.scrollTop - target) > 0.5) {
+        this.scrollToValue(type, val, true);
+      }
+    }
+
+    if (!val) return;
+
+    // 4. Commit the selection inside Angular's zone.
+    if (type === 'hour' && this.selectedHour !== val) {
+      this.zone.run(() => {
+        this.selectedHour = val!;
+        this.computeConstraints();
+        this.adjustSelectionOnConstraintChange();
+      });
+    } else if (type === 'minute' && this.selectedMinute !== val) {
+      this.zone.run(() => {
+        this.selectedMinute = val!;
+      });
+    } else if (type === 'period' && this.selectedPeriod !== val) {
+      this.zone.run(() => {
+        this.selectedPeriod = val!;
+        this.computeConstraints();
+        this.adjustSelectionOnConstraintChange();
+      });
+    }
+  }
+
+  // Search outward from origIndex for the closest enabled value index.
+  private nearestEnabled(type: WheelType, origIndex: number): number | null {
+    const list = this.listFor(type);
+    const N = list.length;
+    const looping = type === 'hour' || type === 'minute';
+
+    if (!this.isDisabled(type, list[origIndex])) return origIndex;
+
+    for (let offset = 1; offset < N; offset++) {
+      const up = looping ? (origIndex + offset) % N : origIndex + offset;
+      if (up >= 0 && up < N && !this.isDisabled(type, list[up])) return up;
+
+      const down = looping ? ((origIndex - offset) % N + N) % N : origIndex - offset;
+      if (down >= 0 && down < N && !this.isDisabled(type, list[down])) return down;
+    }
+    return null;
+  }
+
+  private adjustSelectionOnConstraintChange(): void {
+    if (this.mode === '12') {
+      if (this.disabledPeriods.has(this.selectedPeriod)) {
+        const alt = this.periods.find(p => !this.disabledPeriods.has(p));
+        if (alt) {
+          this.selectedPeriod = alt;
+          this.scrollToValue('period', alt, true);
+          this.computeConstraints();
+        }
+      }
+
+      if (this.disabledHours.has(this.selectedHour)) {
+        const validHour = this.hours.find(h => !this.disabledHours.has(h));
+        if (validHour) {
+          this.selectedHour = validHour;
+          this.scrollToValue('hour', validHour, true);
+          this.computeConstraints();
+        }
+      }
+    } else {
+      if (this.disabledHours.has(this.selectedHour)) {
+        const validHour = this.hours.find(h => !this.disabledHours.has(h));
+        if (validHour) {
+          this.selectedHour = validHour;
+          this.scrollToValue('hour', validHour, true);
+          this.computeConstraints();
+        }
+      }
+    }
+
+    if (this.disabledMinutes.has(this.selectedMinute)) {
+      const validMinute = this.minutes.find(m => !this.disabledMinutes.has(m));
+      if (validMinute) {
+        this.selectedMinute = validMinute;
+        this.scrollToValue('minute', validMinute, true);
+      }
+    }
+  }
+
+  selectValue(type: WheelType, val: string): void {
+    if (type === 'hour') {
+      if (this.disabledHours.has(val)) return;
+      this.selectedHour = val;
+    } else if (type === 'minute') {
+      if (this.disabledMinutes.has(val)) return;
+      this.selectedMinute = val;
+    } else if (type === 'period') {
+      if (this.disabledPeriods.has(val)) return;
+      this.selectedPeriod = val;
+    }
+    this.scrollToValue(type, val, true);
+    this.computeConstraints();
+    this.adjustSelectionOnConstraintChange();
+  }
+
+  scrollToValue(type: WheelType, val: string, smooth: boolean): void {
+    let element: HTMLElement | null = null;
+    if (type === 'hour') element = this.hourWheel?.nativeElement ?? null;
+    else if (type === 'minute') element = this.minuteWheel?.nativeElement ?? null;
+    else element = this.periodWheel?.nativeElement ?? null;
+
+    if (!element) return;
+
+    const list = this.listFor(type);
+    const index = list.indexOf(val);
+    if (index === -1) return;
+
+    const looping = type === 'hour' || type === 'minute';
+    const base = looping ? this.centralBandStart(list, this.repeatsFor(type)) : 0;
+    const targetIndex = base + index;
+
+    const originalBehavior = element.style.scrollBehavior;
+    element.style.scrollBehavior = smooth ? 'smooth' : 'auto';
+    element.scrollTop = targetIndex * this.ITEM_HEIGHT;
+    // Force layout reflow
+    const _ = element.scrollTop;
+    element.style.scrollBehavior = originalBehavior;
+  }
+
+  onCancel(): void {
+    this.cancelled.emit();
+  }
+
+  onConfirm(): void {
+    this.confirmed.emit(this.getFormattedTime());
+  }
+
+  getFormattedTime(): string {
+    if (this.mode === '24') {
+      return `${this.selectedHour}:${this.selectedMinute}`;
+    } else {
+      return `${this.selectedHour}:${this.selectedMinute} ${this.selectedPeriod}`;
+    }
+  }
+}

package/src/lib/modules/time-picker/models/time-picker.models.ts

@@ -0,0 +1,49 @@
+export type TimeMode = '12' | '24';
+export type TimePickerVariant = 'default' | 'wheel';
+
+export interface TimePickerLabels {
+  label?: string;
+  placeholder?: string;
+  hourLabel?: string;          // "HOUR" column header — default 'Hour'
+  minuteLabel?: string;        // "MINUTE" column header — default 'Minute'
+  periodLabel?: string;        // "AM/PM" column header — default 'AM/PM'
+  amLabel?: string;            // "AM" — default 'AM'
+  pmLabel?: string;            // "PM" — default 'PM'
+  confirmLabel?: string;       // Confirm button — default 'Confirm'
+  cancelLabel?: string;        // Cancel button — default 'Cancel'
+  selectTimeTitle?: string;    // Popup title — default 'Select Time'
+  requiredMarker?: string;
+  clearLabel?: string;
+}
+
+export interface TimePickerConfig {
+  label?: string;
+  placeholder?: string;
+  variant?: TimePickerVariant; // 'default' | 'wheel' — default 'wheel'
+  mode?: TimeMode;             // '12' | '24' — default '12'
+  minuteStep?: number;         // 0/1 (default) = every minute 00–59; 5, 10, 15, 30 add the break
+  disabled?: boolean;
+  required?: boolean;
+  errorMessage?: string;
+  // Style overrides (mirror datepicker pattern)
+  width?: string;
+  height?: string;
+  borderRadius?: string;
+  fontSize?: string;
+  gap?: string;
+  fontFamily?: string;
+  labelColor?: string;
+  labelFontSize?: string;
+  labelFontWeight?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  borderWidth?: string;
+  padding?: string;
+  fontWeight?: string;
+  color?: string;
+  placeholderColor?: string;
+  focusBorderColor?: string;
+  errorColor?: string;
+  disabledBackgroundColor?: string;
+  disabledColor?: string;
+}

package/src/lib/modules/time-picker/time-picker.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TimePickerComponent } from './components/time-picker/time-picker.component';
+import { TimeWheelPanelComponent } from './components/time-wheel-panel/time-wheel-panel.component';
+import { FormComponentsModule } from '../form-components/form-components.module';
+
+@NgModule({
+  declarations: [
+    TimePickerComponent,
+    TimeWheelPanelComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    FormComponentsModule
+  ],
+  exports: [
+    TimePickerComponent,
+    TimeWheelPanelComponent
+  ]
+})
+export class TimePickerModule {}