@keenthemes/ktui 1.1.0 → 1.1.1

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

@@ -1,159 +0,0 @@
-/*
- * 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

@@ -1,201 +0,0 @@
-/*
- * 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

@@ -1,231 +0,0 @@
-/*
- * 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

@@ -1,9 +0,0 @@
-/*
- * 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';