@keenthemes/ktui 1.0.29 → 1.1.0

package/src/components/datepicker/core/event-manager.ts

@@ -0,0 +1,159 @@
+/*
+ * event-manager.ts - Internal event management for KTDatepicker
+ * Replaces external dependency on select component's EventManager
+ */
+
+/**
+ * Event listener function type
+ */
+export type EventListener = (event: Event) => void;
+
+/**
+ * Event manager configuration
+ */
+export interface EventManagerConfig {
+  enableEventBubbling: boolean;
+  enableCustomEvents: boolean;
+  enableValidation: boolean;
+  enableDebugging: boolean;
+}
+
+/**
+ * Event manager for handling DOM events
+ */
+export class EventManager {
+  // Alias for backward compatibility
+  static KTDropdownEventManager = EventManager;
+  private _listeners: Map<HTMLElement, Map<string, Set<EventListener>>> = new Map();
+  private _config: EventManagerConfig;
+
+  constructor(config?: Partial<EventManagerConfig>) {
+    this._config = {
+      enableEventBubbling: true,
+      enableCustomEvents: false,
+      enableValidation: true,
+      enableDebugging: false,
+      ...config
+    };
+  }
+
+  /**
+   * Add event listener to element
+   */
+  public addListener(element: HTMLElement, eventType: string, listener: EventListener): void {
+    if (!this._listeners.has(element)) {
+      this._listeners.set(element, new Map());
+    }
+
+    const elementListeners = this._listeners.get(element)!;
+    if (!elementListeners.has(eventType)) {
+      elementListeners.set(eventType, new Set());
+    }
+
+    const listeners = elementListeners.get(eventType)!;
+    listeners.add(listener);
+
+    element.addEventListener(eventType, listener, !this._config.enableEventBubbling);
+  }
+
+  /**
+   * Remove event listener from element
+   */
+  public removeListener(element: HTMLElement, eventType: string, listener: EventListener): void {
+    const elementListeners = this._listeners.get(element);
+    if (!elementListeners) return;
+
+    const listeners = elementListeners.get(eventType);
+    if (!listeners) return;
+
+    listeners.delete(listener);
+    element.removeEventListener(eventType, listener, !this._config.enableEventBubbling);
+
+    if (listeners.size === 0) {
+      elementListeners.delete(eventType);
+    }
+
+    if (elementListeners.size === 0) {
+      this._listeners.delete(element);
+    }
+  }
+
+  /**
+   * Remove all listeners from element
+   */
+  public removeAllListeners(element: HTMLElement): void {
+    const elementListeners = this._listeners.get(element);
+    if (!elementListeners) return;
+
+    elementListeners.forEach((listeners, eventType) => {
+      listeners.forEach(listener => {
+        element.removeEventListener(eventType, listener, !this._config.enableEventBubbling);
+      });
+    });
+
+    this._listeners.delete(element);
+  }
+
+  /**
+   * Remove all listeners from all elements
+   */
+  public removeAllListenersFromAll(): void {
+    this._listeners.forEach((elementListeners, element) => {
+      elementListeners.forEach((listeners, eventType) => {
+        listeners.forEach(listener => {
+          element.removeEventListener(eventType, listener, !this._config.enableEventBubbling);
+        });
+      });
+    });
+
+    this._listeners.clear();
+  }
+
+  /**
+   * Dispatch custom event
+   */
+  public dispatchEvent(element: HTMLElement, eventType: string, detail?: any): boolean {
+    if (!this._config.enableCustomEvents) {
+      return false;
+    }
+
+    const event = new CustomEvent(eventType, {
+      detail,
+      bubbles: this._config.enableEventBubbling,
+      cancelable: true
+    });
+
+    const result = element.dispatchEvent(event);
+
+    return result;
+  }
+
+  /**
+   * Get listener count for element and event type
+   */
+  public getListenerCount(element: HTMLElement, eventType?: string): number {
+    const elementListeners = this._listeners.get(element);
+    if (!elementListeners) return 0;
+
+    if (eventType) {
+      return elementListeners.get(eventType)?.size || 0;
+    }
+
+    let total = 0;
+    elementListeners.forEach(listeners => {
+      total += listeners.size;
+    });
+    return total;
+  }
+
+  /**
+   * Dispose of event manager
+   */
+  public dispose(): void {
+    this.removeAllListenersFromAll();
+    this._listeners.clear();
+  }
+}
+
+// Export alias for backward compatibility
+export { EventManager as KTDropdownEventManager };

package/src/components/datepicker/core/focus-manager.ts

@@ -0,0 +1,201 @@
+/*
+ * focus-manager.ts - Internal focus management for KTDatepicker
+ * Replaces external dependency on select component's FocusManager
+ */
+
+/**
+ * Focus manager configuration
+ */
+export interface FocusManagerConfig {
+  enableFocusTrapping: boolean;
+  enableFocusRestoration: boolean;
+  enableKeyboardNavigation: boolean;
+  enableDebugging: boolean;
+}
+
+/**
+ * Focusable element interface
+ */
+export interface FocusableElement {
+  element: HTMLElement;
+  tabIndex: number;
+  isFocusable: boolean;
+}
+
+/**
+ * Focus manager for handling focus states and navigation
+ */
+export class FocusManager {
+  private _config: FocusManagerConfig;
+  private _focusedElement: HTMLElement | null = null;
+  private _previousFocusedElement: HTMLElement | null = null;
+  private _focusableElements: FocusableElement[] = [];
+  private _currentFocusIndex: number = -1;
+
+  constructor(config?: Partial<FocusManagerConfig>) {
+    this._config = {
+      enableFocusTrapping: true,
+      enableFocusRestoration: true,
+      enableKeyboardNavigation: true,
+      enableDebugging: false,
+      ...config
+    };
+  }
+
+  /**
+   * Set focus to element
+   */
+  public focus(element: HTMLElement): boolean {
+    if (!element || !this._isElementFocusable(element)) {
+      return false;
+    }
+
+    this._previousFocusedElement = this._focusedElement;
+    this._focusedElement = element;
+
+    try {
+      element.focus();
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  /**
+   * Get currently focused element
+   */
+  public getFocusedElement(): HTMLElement | null {
+    return this._focusedElement;
+  }
+
+  /**
+   * Get previously focused element
+   */
+  public getPreviousFocusedElement(): HTMLElement | null {
+    return this._previousFocusedElement;
+  }
+
+  /**
+   * Restore focus to previous element
+   */
+  public restoreFocus(): boolean {
+    if (!this._config.enableFocusRestoration || !this._previousFocusedElement) {
+      return false;
+    }
+
+    return this.focus(this._previousFocusedElement);
+  }
+
+  /**
+   * Set focusable elements for navigation
+   */
+  public setFocusableElements(elements: HTMLElement[]): void {
+    this._focusableElements = elements
+      .filter(element => this._isElementFocusable(element))
+      .map(element => ({
+        element,
+        tabIndex: this._getTabIndex(element),
+        isFocusable: true
+      }))
+      .sort((a, b) => a.tabIndex - b.tabIndex);
+  }
+
+  /**
+   * Focus next element
+   */
+  public focusNext(): boolean {
+    if (!this._config.enableKeyboardNavigation || this._focusableElements.length === 0) {
+      return false;
+    }
+
+    this._currentFocusIndex = (this._currentFocusIndex + 1) % this._focusableElements.length;
+    const nextElement = this._focusableElements[this._currentFocusIndex];
+
+    return this.focus(nextElement.element);
+  }
+
+  /**
+   * Focus previous element
+   */
+  public focusPrevious(): boolean {
+    if (!this._config.enableKeyboardNavigation || this._focusableElements.length === 0) {
+      return false;
+    }
+
+    this._currentFocusIndex = this._currentFocusIndex <= 0
+      ? this._focusableElements.length - 1
+      : this._currentFocusIndex - 1;
+
+    const prevElement = this._focusableElements[this._currentFocusIndex];
+
+    return this.focus(prevElement.element);
+  }
+
+  /**
+   * Focus first element
+   */
+  public focusFirst(): boolean {
+    if (this._focusableElements.length === 0) {
+      return false;
+    }
+
+    this._currentFocusIndex = 0;
+    return this.focus(this._focusableElements[0].element);
+  }
+
+  /**
+   * Focus last element
+   */
+  public focusLast(): boolean {
+    if (this._focusableElements.length === 0) {
+      return false;
+    }
+
+    this._currentFocusIndex = this._focusableElements.length - 1;
+    return this.focus(this._focusableElements[this._currentFocusIndex].element);
+  }
+
+  /**
+   * Check if element is focusable
+   */
+  private _isElementFocusable(element: HTMLElement): boolean {
+    if (!element || element.hidden || element.style.display === 'none') {
+      return false;
+    }
+
+    const tabIndex = this._getTabIndex(element);
+    return tabIndex >= 0;
+  }
+
+  /**
+   * Get tab index of element
+   */
+  private _getTabIndex(element: HTMLElement): number {
+    const tabIndex = element.getAttribute('tabindex');
+    if (tabIndex === null) {
+      // Check if element is naturally focusable
+      const tagName = element.tagName.toLowerCase();
+      const naturallyFocusable = ['input', 'button', 'select', 'textarea', 'a'].includes(tagName);
+      return naturallyFocusable ? 0 : -1;
+    }
+
+    return parseInt(tabIndex, 10);
+  }
+
+  /**
+   * Clear focus
+   */
+  public clearFocus(): void {
+    this._focusedElement = null;
+    this._currentFocusIndex = -1;
+  }
+
+  /**
+   * Dispose of focus manager
+   */
+  public dispose(): void {
+    this.clearFocus();
+    this._focusableElements = [];
+    this._previousFocusedElement = null;
+  }
+}

package/src/components/datepicker/core/helpers.ts

@@ -0,0 +1,231 @@
+/*
+ * datepicker-helpers.ts - Modular helpers for KTDatepicker input rendering and state
+ */
+import { KTDatepickerConfig, KTDatepickerState } from '../config/types';
+import { renderTemplateToDOM, createTemplateRenderer, getTemplateStrings } from '../ui/templates/templates';
+import { SegmentedInput } from '../ui/input/segmented-input';
+import { getTimeSegments } from '../utils/time-utils';
+import { getSegmentOrderFromFormat, normalizeDateToLocalMidnight } from '../utils/date-utils';
+
+/**
+ * Get segments array based on configuration (date + optional time)
+ * @param config Datepicker configuration
+ * @returns Array of segment types
+ */
+export function getSegmentsForConfig(config: KTDatepickerConfig): Array<'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'ampm'> {
+  // Determine date segments based on format
+  let segments: Array<'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'ampm'>;
+
+  if (config.format && typeof config.format === 'string') {
+    // Use format-derived segment order for date parts
+    segments = getSegmentOrderFromFormat(config.format);
+  } else {
+    // Default fallback
+    segments = ['month', 'day', 'year'];
+  }
+
+  // Add time segments if time is enabled
+  if (config.enableTime) {
+    const timeSegments = getTimeSegments(config.timeGranularity || 'minute');
+    segments = [...segments, ...timeSegments];
+
+    // Add AM/PM for 12-hour format
+    if (config.timeFormat === '12h') {
+      segments.push('ampm');
+    }
+  }
+
+  return segments;
+}
+
+export {};
+
+export function renderSingleSegmentedInputUI(
+  inputWrapperTpl: string | ((data: any) => string),
+  calendarButtonHtml: string,
+  config?: KTDatepickerConfig
+): HTMLElement {
+  // Get template renderer with proper configuration
+  const templates = getTemplateStrings(config);
+  const templateRenderer = createTemplateRenderer(templates);
+
+  // Create the segmented input container using the template system
+  const segmentedInputEl = templateRenderer.renderTemplateToElement({
+    templateKey: 'segmentedDateInput',
+    data: { segments: '' }, // Empty segments initially, will be populated by SegmentedInput
+    configClasses: config?.classes // Pass config classes for proper styling
+  });
+
+  let inputWrapperHtml: string;
+  if (typeof inputWrapperTpl === 'function') {
+    inputWrapperHtml = inputWrapperTpl({ input: segmentedInputEl.outerHTML, icon: calendarButtonHtml, class: '' });
+  } else {
+    inputWrapperHtml = inputWrapperTpl
+      .replace(/{{icon}}/g, calendarButtonHtml)
+      .replace(/{{input}}/g, segmentedInputEl.outerHTML)
+      .replace(/{{class}}/g, ''); // Replace class placeholder with empty string if no class provided
+  }
+  const inputWrapperFrag = renderTemplateToDOM(inputWrapperHtml);
+  return inputWrapperFrag.firstElementChild as HTMLElement;
+}
+
+export function renderRangeSegmentedInputUI(
+  inputWrapperTpl: string | ((data: any) => string),
+  rangeTpl: string | ((data: any) => string),
+  calendarButtonHtml: string,
+  config?: KTDatepickerConfig
+): { inputWrapperEl: HTMLElement; startContainer: HTMLElement; endContainer: HTMLElement } {
+  // Get template renderer with proper configuration
+  const templates = getTemplateStrings(config);
+  const templateRenderer = createTemplateRenderer(templates);
+
+  let inputWrapperHtml: string;
+  if (typeof inputWrapperTpl === 'function') {
+    inputWrapperHtml = inputWrapperTpl({ input: '', icon: calendarButtonHtml, class: '' });
+  } else {
+    inputWrapperHtml = inputWrapperTpl
+      .replace(/{{icon}}/g, calendarButtonHtml)
+      .replace(/{{input}}/g, '')
+      .replace(/{{class}}/g, ''); // Replace class placeholder with empty string if no class provided
+  }
+  const inputWrapperFrag = renderTemplateToDOM(inputWrapperHtml);
+  const inputWrapperEl = inputWrapperFrag.firstElementChild as HTMLElement;
+
+  // Create containers for start and end segmented inputs using template system
+  const startContainer = templateRenderer.renderTemplateToElement({
+    templateKey: 'segmentedDateInput',
+    data: { segments: '' },
+    configClasses: { ...config?.classes, segmentedDateInput: 'kt-segmented-input-start' }
+  });
+  startContainer.setAttribute('aria-label', 'Start date');
+  startContainer.setAttribute('data-kt-datepicker-start-container', '');
+
+  const endContainer = templateRenderer.renderTemplateToElement({
+    templateKey: 'segmentedDateInput',
+    data: { segments: '' },
+    configClasses: { ...config?.classes, segmentedDateInput: 'kt-segmented-input-end' }
+  });
+  endContainer.setAttribute('aria-label', 'End date');
+  endContainer.setAttribute('data-kt-datepicker-end-container', '');
+  // Render template with placeholders using template system
+  const separator = '–';
+
+  // Render start and end containers using templates
+  const startContainerHtml = templateRenderer.renderTemplateString({
+    templateKey: 'rangeStartContainer',
+    data: {},
+    configClasses: config?.classes
+  });
+
+  const endContainerHtml = templateRenderer.renderTemplateString({
+    templateKey: 'rangeEndContainer',
+    data: {},
+    configClasses: config?.classes
+  });
+
+  let rangeHtml: string;
+  if (typeof rangeTpl === 'function') {
+    rangeHtml = rangeTpl({
+      start: startContainerHtml,
+      separator,
+      end: endContainerHtml,
+      class: ''
+    });
+  } else {
+    rangeHtml = rangeTpl
+      .replace(/{{start}}/g, startContainerHtml)
+      .replace(/{{separator}}/g, separator)
+      .replace(/{{end}}/g, endContainerHtml)
+      .replace(/{{class}}/g, ''); // Replace class placeholder with empty string if no class provided
+  }
+  const rangeFrag = renderTemplateToDOM(rangeHtml);
+  // Find mount points
+  const startMount = rangeFrag.querySelector('[data-kt-datepicker-segmented-start]') as HTMLElement;
+  const endMount = rangeFrag.querySelector('[data-kt-datepicker-segmented-end]') as HTMLElement;
+  if (startMount) startMount.replaceWith(startContainer);
+  if (endMount) endMount.replaceWith(endContainer);
+  // Insert the range input UI at the start of the wrapper
+  inputWrapperEl.insertBefore(rangeFrag.firstElementChild!, inputWrapperEl.firstChild);
+  return { inputWrapperEl, startContainer, endContainer };
+}
+
+export function instantiateSingleSegmentedInput(
+  container: HTMLElement,
+  state: KTDatepickerState,
+  config: KTDatepickerConfig,
+  onChange: (date: Date) => void
+): void {
+  // Use shared utility to determine segments
+  const segments = getSegmentsForConfig(config);
+
+  SegmentedInput(container, {
+    value: state.selectedDate || state.currentDate || new Date(),
+    format: config.format,
+    segments,
+    disabled: !!config.disabled,
+    required: !!config.required,
+    readOnly: !!config.readOnly,
+    locale: config.locale,
+    timeFormat: config.timeFormat,
+    onChange,
+  });
+}
+
+export function instantiateRangeSegmentedInputs(
+  startContainer: HTMLElement,
+  endContainer: HTMLElement,
+  state: KTDatepickerState,
+  config: KTDatepickerConfig,
+  onStartChange: (date: Date) => void,
+  onEndChange: (date: Date) => void
+): void {
+  // Use shared utility to determine segments (includes time if enabled)
+  const segments = getSegmentsForConfig(config);
+
+  SegmentedInput(startContainer, {
+    value: state.selectedRange?.start || new Date(),
+    format: config.format,
+    segments,
+    disabled: !!config.disabled,
+    required: !!config.required,
+    readOnly: !!config.readOnly,
+    locale: config.locale,
+    timeFormat: config.timeFormat,
+    onChange: onStartChange,
+  });
+  SegmentedInput(endContainer, {
+    value: state.selectedRange?.end || new Date(),
+    format: config.format,
+    segments,
+    disabled: !!config.disabled,
+    required: !!config.required,
+    readOnly: !!config.readOnly,
+    locale: config.locale,
+    timeFormat: config.timeFormat,
+    onChange: onEndChange,
+  });
+}
+
+export function updateRangeSelection(
+  selectedRange: { start: Date | null; end: Date | null } | null,
+  date: Date
+): { start: Date | null; end: Date | null } {
+  // Normalize dates to local midnight for date-only comparisons
+  const normalizedDate = normalizeDateToLocalMidnight(date);
+
+  if (!selectedRange || (!selectedRange.start && !selectedRange.end)) {
+    return { start: normalizedDate, end: null };
+  } else if (selectedRange.start && !selectedRange.end) {
+    const normalizedStart = normalizeDateToLocalMidnight(selectedRange.start);
+    if (normalizedDate >= normalizedStart) {
+      // Forward selection: new date is after start, becomes end
+      return { start: selectedRange.start, end: normalizedDate };
+    } else {
+      // Backward selection: new date is before start, swap so start is always earlier
+      // The clicked date becomes the actual start, original start becomes end
+      return { start: normalizedDate, end: selectedRange.start };
+    }
+  } else {
+    return { start: normalizedDate, end: null };
+  }
+}

package/src/components/datepicker/core/index.ts

@@ -0,0 +1,9 @@
+/*
+ * core/index.ts - Core module exports
+ * Provides core logic components for KTDatepicker
+ */
+
+export * from './unified-state-manager';
+export * from './event-manager';
+export * from './focus-manager';
+export * from './helpers';