@panyam/tsappkit 0.0.3

package/src/LifecycleController.ts

@@ -0,0 +1,213 @@
+
+import {
+    LCMComponent,
+    LCMComponentConfig,
+    LCMComponentEvent,
+} from './LCMComponent';
+import { EventBus, LifecycleEventTypes, LifecycleEventType } from './EventBus';
+import { ComponentLifecycleEvent } from './events';
+
+/**
+ * LifecycleController - Orchestrates breadth-first component initialization
+ *
+ * This controller implements a breadth-first traversal of the component tree
+ * followed by phase-wise initialization with synchronization barriers.
+ *
+ * Process:
+ * 1. Discovery Phase: Traverse component tree to find all components
+ * 2. DOM Binding Phase: All components bind to DOM simultaneously
+ * 3. Dependency Injection Phase: All components receive dependencies
+ * 4. Activation Phase: All components complete initialization
+ *
+ * Each phase acts as a synchronization barrier - no component can proceed
+ * to the next phase until ALL components have completed the current phase.
+ */
+export class LifecycleController {
+    private allComponents: LCMComponent[];
+    private componentsByLevel: LCMComponent[][];
+    private config: Required<LCMComponentConfig>;
+    public static DefaultConfig: LCMComponentConfig = {
+        enableDebugLogging: true,
+        phaseTimeoutMs: 15000, // Increased timeout for component loading
+        continueOnError: false // Fail fast for debugging
+    }
+
+    constructor(protected eventBus: EventBus, config: LCMComponentConfig = {}) {
+        this.config = {
+            phaseTimeoutMs: config.phaseTimeoutMs ?? 10000,
+            continueOnError: config.continueOnError ?? false,
+            validateDependencies: false,
+            enableDebugLogging: config.enableDebugLogging ?? false
+        };
+        this.allComponents = [];
+        this.componentsByLevel = [];
+    }
+
+    /**
+     * Initialize component tree starting from root component
+     *
+     * @param rootComponent The root component to start initialization from
+     * @param rootName Optional name for the root component (for debugging)
+     * @returns Promise that resolves when all components are fully initialized
+     */
+    public async initializeFromRoot(rootComponent: LCMComponent): Promise<void> {
+        // Phase 1 - Performance post-load setup where each parent will have the change
+        // to set dependencies on its children (either to its siblings or to itself).
+        await this.performLocalInit(rootComponent);
+
+        // Phase 2: Dependency Injection - All components receive dependencies
+        await this.injectDependencies();
+
+        await this.activate();
+    }
+
+    /**
+     * Phase 0: Discover all components via breadth-first traversal
+     */
+    private async performLocalInit(rootComponent: LCMComponent): Promise<void> {
+        const visited = new Set<LCMComponent>();
+        let queue = [rootComponent] as LCMComponent[]
+        this.allComponents = [rootComponent]
+
+        if (this.componentsByLevel.length > 0) {
+          throw new Error("Already done")
+        }
+        for (let level = 0; queue.length > 0; level ++) {
+            const newqueue = [] as LCMComponent[];
+            const promises = new Array<Promise<LCMComponent[]>>()
+            this.componentsByLevel.push(queue)
+            for (let i = 0;i < queue.length;i++) {
+                const component = queue[i]
+
+                // Enforce tree structure: each component should have exactly one parent
+                if (visited.has(component)) {
+                    throw new Error(
+                        `Component hierarchy integrity violation: Component '${component.constructor.name}' ` +
+                        `discovered as child of multiple parents at level ${level}. ` +
+                        `Component hierarchies must form a tree structure where each component has exactly one parent.`
+                    );
+                }
+
+                this.emitEvent(LifecycleEventTypes.LOCAL_INIT_STARTED, component, level)
+                const result = component.performLocalInit()
+                promises.push(Promise.resolve(result).then((children: LCMComponent[]) => {
+                  for (const ch of children) {
+                    this.allComponents.push(ch)
+                    newqueue.push(ch)
+                  }
+                  return children
+                }))
+
+                // now wait for all the promises to finish
+                await Promise.all(promises)
+
+                // TODO - Handle errors
+                this.emitEvent(LifecycleEventTypes.LOCAL_INIT_FINISHED, component, level)
+            }
+            queue = newqueue
+        }
+    }
+
+    /**
+     * Phase 1: Dependency injection.
+     * Here all our components are already discovered so we can call directly
+     */
+    protected injectDependencies(): void {
+      // This is guaranteed to be in order of levels
+      for (const comp of this.allComponents) {
+          comp.setupDependencies()
+      }
+    }
+
+    /**
+     * Phase 2: Activate all components
+     *
+     * Here all our components are already discovered and their dependencies setup
+     * so we can call directly
+     */
+    protected async activate(): Promise<void> {
+        // This is guaranteed to be in order of levels
+        const visited = new Set<LCMComponent>();
+        for (let level = 0;level < this.componentsByLevel.length; level++) {
+            const promises = new Array<Promise<void>>()
+            const levelComps = this.componentsByLevel[level]
+            for (const comp of levelComps) {
+                if (visited.has(comp)) {
+                  throw new Error("Comp already visited")
+                }
+                visited.add(comp)
+                this.emitEvent(LifecycleEventTypes.ACTIVATION_STARTED , comp, 0)
+                const result = comp.activate()
+                promises.push(Promise.resolve(result).then(() => {
+                    this.emitEvent(LifecycleEventTypes.ACTIVATION_FINISHED, comp, 0)
+                }))
+            }
+            await Promise.all(promises)
+        }
+    }
+
+    /**
+     * Deactivate all components in reverse order.  This is usually called when a page quits or a component is
+     * deactivated
+     */
+    public async deactivateAll(): Promise<void> {
+        // destruction should leaf to the root so we are removing things from bottom to top
+        for (let level = this.componentsByLevel.length - 1;level >= 0; level--) {
+            const promises = new Array<Promise<void>>()
+            const levelComps = this.componentsByLevel[level]
+            for (const comp of levelComps) {
+                this.emitEvent(LifecycleEventTypes.DEACTIVATION_STARTED , comp, level)
+                const result = comp.deactivate()
+                promises.push(Promise.resolve(result).then(() => {
+                    this.emitEvent(LifecycleEventTypes.DEACTIVATION_FINISHED, comp, level)
+                }))
+            }
+            await Promise.all(promises)
+        }
+    }
+
+    /**
+     * Emit lifecycle event to registered callbacks
+     */
+    private emitEvent(
+        event: LifecycleEventType,
+        component: LCMComponent,
+        level: number,
+        error: Error | null = null,
+    ): void {
+        this.eventBus.emit<ComponentLifecycleEvent>(
+            event,
+            { error: error, success: error == null},
+            this,
+            component
+        );
+    }
+
+    /**
+     * Log message if debug logging is enabled
+     */
+    private log(message: string, ...args: any[]): void {
+        if (this.config.enableDebugLogging) {
+            console.log(`[LifecycleController] ${message}`, ...args);
+        }
+    }
+
+    /**
+     * Log error message
+     */
+    private logError(message: string, error?: any): void {
+        console.error(`[LifecycleController] ${message}`, error);
+    }
+
+    /**
+     * Get current status of all components
+     */
+    /*
+    public getComponentStatus(): Array<{ name: string; phase: ComponentPhase }> {
+        return Array.from(this.allComponents).map(component => ({
+            name: this.getComponentName(component),
+            phase: this.componentPhases.get(component) || 'created'
+        }));
+    }
+    */
+}

package/src/MobileBottomDrawer.ts

@@ -0,0 +1,236 @@
+import { BaseComponent } from './Component';
+import { LCMComponent } from './LCMComponent';
+import { EventBus } from './EventBus';
+
+/**
+ * MobileBottomDrawer - Reusable bottom drawer component for mobile layouts
+ *
+ * Features:
+ * - Slides up from bottom covering 60-70% of viewport
+ * - Backdrop overlay that dims the content behind
+ * - Auto-closes when backdrop is tapped
+ * - Swipe down to close gesture
+ * - Smooth slide-up/down animations
+ * - Holds any panel content
+ */
+export class MobileBottomDrawer extends BaseComponent implements LCMComponent {
+    private backdropElement: HTMLElement;
+    private drawerElement: HTMLElement;
+    private contentElement: HTMLElement;
+    private closeButton: HTMLElement | null;
+    private isOpen: boolean = false;
+    private onCloseCallback?: () => void;
+
+    // Swipe gesture tracking
+    private touchStartY: number = 0;
+    private touchCurrentY: number = 0;
+    private isDragging: boolean = false;
+
+    /**
+     * Create a MobileBottomDrawer
+     * @param rootElement - The root container element for the drawer
+     * @param eventBus - Event bus for component communication
+     * @param debugMode - Enable debug logging
+     */
+    constructor(rootElement: HTMLElement, eventBus: EventBus, debugMode: boolean = false) {
+        super('mobile-bottom-drawer', rootElement, eventBus, debugMode);
+    }
+
+    /**
+     * Phase 1: Initialize DOM and discover child components
+     */
+    async performLocalInit(): Promise<LCMComponent[]> {
+        // Find drawer elements
+        this.backdropElement = this.rootElement.querySelector('.drawer-backdrop') as HTMLElement;
+        this.drawerElement = this.rootElement.querySelector('.drawer-container') as HTMLElement;
+        this.contentElement = this.rootElement.querySelector('.drawer-content') as HTMLElement;
+        this.closeButton = this.rootElement.querySelector('.drawer-close-btn') as HTMLElement;
+
+        if (!this.backdropElement || !this.drawerElement || !this.contentElement) {
+            throw new Error('MobileBottomDrawer: Required drawer elements not found');
+        }
+
+        // Bind event listeners
+        this.bindEvents();
+
+        return [];
+    }
+
+    /**
+     * Bind event listeners for drawer interactions
+     */
+    private bindEvents(): void {
+        // Close drawer on backdrop click
+        this.backdropElement.addEventListener('click', (e) => {
+            if (e.target === this.backdropElement) {
+                this.close();
+            }
+        });
+
+        // Close drawer on close button click
+        if (this.closeButton) {
+            this.closeButton.addEventListener('click', () => {
+                this.close();
+            });
+        }
+
+        // Close drawer on Escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && this.isOpen) {
+                this.close();
+            }
+        });
+
+        // Swipe-to-close gesture on drawer element
+        this.drawerElement.addEventListener('touchstart', (e) => this.handleTouchStart(e), { passive: true });
+        this.drawerElement.addEventListener('touchmove', (e) => this.handleTouchMove(e), { passive: false });
+        this.drawerElement.addEventListener('touchend', (e) => this.handleTouchEnd(e), { passive: true });
+    }
+
+    /**
+     * Handle touch start for swipe gesture
+     */
+    private handleTouchStart(e: TouchEvent): void {
+        // Only track if touching the drawer itself (not scrollable content)
+        const contentScrollTop = this.contentElement.scrollTop;
+
+        // If content is scrolled down, let normal scrolling happen
+        if (contentScrollTop > 0) {
+            return;
+        }
+
+        this.touchStartY = e.touches[0].clientY;
+        this.touchCurrentY = this.touchStartY;
+        this.isDragging = true;
+    }
+
+    /**
+     * Handle touch move for swipe gesture
+     */
+    private handleTouchMove(e: TouchEvent): void {
+        if (!this.isDragging) return;
+
+        this.touchCurrentY = e.touches[0].clientY;
+        const deltaY = this.touchCurrentY - this.touchStartY;
+
+        // Only allow downward swipes
+        if (deltaY > 0) {
+            // Prevent default scrolling when swiping down
+            e.preventDefault();
+
+            // Apply drag transform with resistance
+            const dragAmount = Math.min(deltaY, 300); // Cap at 300px
+            this.drawerElement.style.transform = `translateY(${dragAmount}px)`;
+
+            // Reduce backdrop opacity based on drag amount
+            const opacity = Math.max(0, 0.5 - (dragAmount / 600));
+            this.backdropElement.style.background = `rgba(0, 0, 0, ${opacity})`;
+        }
+    }
+
+    /**
+     * Handle touch end for swipe gesture
+     */
+    private handleTouchEnd(e: TouchEvent): void {
+        if (!this.isDragging) return;
+
+        const deltaY = this.touchCurrentY - this.touchStartY;
+        const velocity = deltaY / 300; // Rough velocity calculation
+
+        // Close if swiped down more than 100px or with high velocity
+        if (deltaY > 100 || velocity > 0.3) {
+            this.close();
+        } else {
+            // Snap back to open position
+            this.drawerElement.style.transform = '';
+            this.backdropElement.style.background = '';
+        }
+
+        this.isDragging = false;
+    }
+
+    /**
+     * Open the drawer with slide-up animation
+     */
+    public open(): void {
+        if (this.isOpen) return;
+
+        this.isOpen = true;
+
+        // Reset any drag transform
+        this.drawerElement.style.transform = '';
+        this.backdropElement.style.background = '';
+
+        // Add open class - CSS handles all animations
+        this.rootElement.classList.add('open');
+
+        // Emit event
+        this.eventBus.emit('drawer-opened', { drawerId: this.componentId }, null, this);
+    }
+
+    /**
+     * Close the drawer with slide-down animation
+     */
+    public close(): void {
+        if (!this.isOpen) return;
+
+        this.isOpen = false;
+
+        // Reset any drag transform
+        this.drawerElement.style.transform = '';
+        this.backdropElement.style.background = '';
+
+        // Remove open class - CSS handles animation
+        this.rootElement.classList.remove('open');
+
+        // Emit event
+        this.eventBus.emit('drawer-closed', { drawerId: this.componentId }, null, this);
+
+        // Call close callback if provided
+        if (this.onCloseCallback) {
+            this.onCloseCallback();
+        }
+    }
+
+    /**
+     * Toggle drawer open/closed
+     */
+    public toggle(): void {
+        if (this.isOpen) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+    /**
+     * Check if drawer is currently open
+     */
+    public getIsOpen(): boolean {
+        return this.isOpen;
+    }
+
+    /**
+     * Set the content element for the drawer
+     * @param element - The element to insert into the drawer content area
+     */
+    public setContent(element: HTMLElement): void {
+        this.contentElement.innerHTML = '';
+        this.contentElement.appendChild(element);
+    }
+
+    /**
+     * Set a callback to be called when drawer closes
+     * @param callback - Function to call on close
+     */
+    public setOnClose(callback: () => void): void {
+        this.onCloseCallback = callback;
+    }
+
+    /**
+     * Get the content container element
+     */
+    public getContentContainer(): HTMLElement {
+        return this.contentElement;
+    }
+}

package/src/Modal.ts

@@ -0,0 +1,233 @@
+import { TemplateLoader } from './TemplateLoader';
+
+/**
+ * Modal manager for the application
+ * Handles showing and hiding modals with different content
+ */
+export class Modal {
+  private static instance: Modal | null = null;
+
+  // Modal DOM elements
+  private modalContainer: HTMLDivElement
+  private modalBackdrop: HTMLElement | null;
+  private modalPanel: HTMLElement | null;
+  private modalContent: HTMLElement | null;
+  private closeButton: HTMLElement | null;
+
+  private templateLoader: TemplateLoader;
+
+  // Current modal data - including optional callbacks
+  private currentTemplateId: string | null = null;
+  private currentData: any = null;
+  private onSubmitCallback: ((modalData: any) => void) | null = null; // Store the callback
+  private onApplyCallback: ((modalData: any) => void) | null = null; // Store the Apply callback
+
+
+  /**
+   * Private constructor for singleton pattern
+   */
+  private constructor() {
+    // Get modal elements
+    this.modalContainer = document.getElementById('modal-container') as HTMLDivElement;
+    this.modalBackdrop = document.getElementById('modal-backdrop');
+    this.modalPanel = document.getElementById('modal-panel');
+    this.modalContent = document.getElementById('modal-content');
+    this.closeButton = document.getElementById('modal-close');
+
+    this.templateLoader = new TemplateLoader();
+
+    this.bindEvents();
+  }
+
+  /**
+   * Get the Modal instance (singleton)
+   */
+  public static getInstance(): Modal {
+    if (!Modal.instance) {
+      Modal.instance = new Modal();
+    }
+    return Modal.instance;
+  }
+
+  /**
+   * Bind event listeners for modal interactions
+   */
+  private bindEvents(): void {
+    // Close button click
+    if (this.closeButton) {
+      this.closeButton.addEventListener('click', () => this.hide());
+    }
+
+    // Click on backdrop to close
+    if (this.modalBackdrop) {
+      this.modalBackdrop.addEventListener('click', (e) => {
+        // Only close if clicking directly on the backdrop
+        if (e.target === this.modalBackdrop) {
+          this.hide();
+        }
+      });
+    }
+
+    // Listen for Escape key
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && this.isVisible()) {
+        this.hide();
+      }
+    });
+
+    // --- Event Delegation for Modal Actions ---
+    if (this.modalPanel) { // Listen on a persistent parent element
+        this.modalPanel.addEventListener('click', (e: MouseEvent) => {
+            const target = e.target as HTMLElement;
+
+            // Handle generic close/cancel buttons
+            const closeButton = target.closest('button[id$="-cancel"], button[id$="-close"]');
+            if (closeButton) {
+                this.hide();
+                return; // Stop further processing
+            }
+
+            // Handle specific actions like submit
+            const actionButton = target.closest('button[data-modal-action]');
+            if (actionButton) {
+                const action = actionButton.getAttribute('data-modal-action');
+
+                if (action === 'submit' && this.onSubmitCallback) {
+                    this.onSubmitCallback(this.currentData); // Call the stored callback
+                } else if (action === 'apply' && this.onApplyCallback) {
+                    this.onApplyCallback(this.currentData); // Call the Apply callback
+                    this.hide(); // Typically hide after applying
+                }
+                // Add more actions (e.g., 'apply', 'revise') later if needed
+            }
+        });
+    }
+  }
+
+  /**
+   * Check if the modal is currently visible
+   */
+  public isVisible(): boolean {
+    return this.modalContainer ? !this.modalContainer.classList.contains('hidden') : false;
+  }
+
+  /**
+   * Show a modal with content from the specified template ID.
+   * Uses TemplateLoader to get the content element.
+   * @param templateId ID used in `data-template-id` attribute in TemplateRegistry.html
+   * @param data Optional data to pass to the modal. Can include callbacks like `onSubmit`.
+   * @returns The root HTMLElement of the loaded content, or null if failed.
+   */
+  public show(templateId: string, data: any = null): HTMLElement | null {
+    if (!this.modalContainer || !this.modalContent) {
+        console.error("Modal container or content area not found.");
+        return null;
+    }
+
+    // Use TemplateLoader to get the content element
+    // Load content directly into the modal content area
+    const success = this.templateLoader.loadInto(templateId, this.modalContent);
+    if (!success) {
+         // Error message is already placed into modalContent by loadInto on failure
+         // Ensure modal is still visible
+         this.modalContainer.classList.remove('hidden');
+         setTimeout(() => this.modalContainer.classList.add('modal-active'), 10);
+        return null; // Indicate failure
+    }
+
+    // Store current modal info
+    this.currentTemplateId = templateId;
+    this.currentData = data || {}; // Ensure data is an object
+    this.onSubmitCallback = data?.onSubmit || null; // Store the submit callback
+    this.onApplyCallback = data?.onApply || null; // Store the apply callback
+
+    // Set data attributes for non-function data
+    if (data) {
+      Object.entries(data).forEach(([key, value]) => {
+        if (key !== 'onSubmit' && (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean')) {
+          if (this.modalContent) this.modalContent.dataset[key] = String(value);
+        }
+      });
+    }
+
+    // Show modal container
+    this.modalContainer.classList.remove('hidden');
+
+    // Trigger animations if needed (add active class after a tick)
+    setTimeout(() => {
+      this.modalContainer.classList.add('modal-active');
+    }, 10); // Small delay ensures transition applies correctly
+
+    const firstElement = this.modalContent//?.firstElementChild as HTMLElement | null;
+    return firstElement;
+  }
+
+  /**
+   * Hide the modal
+   */
+  public hide(): Promise<void> {
+    return new Promise((resolve) => {
+        if (!this.modalContainer) return;
+
+        // Remove active class first (for animations)
+        this.modalContainer.classList.remove('modal-active');
+
+        // Hide after a short delay
+        setTimeout(() => {
+          this.modalContainer.classList.add('hidden');
+
+          // Clear current modal info
+          this.currentTemplateId = null;
+          this.currentData = null;
+          this.onSubmitCallback = null; // Clear callback
+          this.onApplyCallback = null; // Clear apply callback
+          if(this.modalContent) this.modalContent.innerHTML = ''; // Clear content
+          resolve();
+        }, 200); // Match typical transition duration
+    });
+  }
+
+  /**
+   * Get the current modal content element
+   */
+  public getContentElement(): HTMLElement | null {
+    return this.modalContent;
+  }
+
+  /**
+   * Get the current template ID
+   */
+  public getCurrentTemplate(): string | null {
+    return this.currentTemplateId;
+  }
+
+  /**
+   * Get the current modal data
+   */
+  public getCurrentData(): any {
+    return this.currentData;
+  }
+
+  /**
+   * Update modal data (excluding callbacks for now)
+   */
+  public updateData(newData: any): void {
+    this.currentData = { ...this.currentData, ...newData };
+
+    // Update data attributes for non-function data
+    if (this.modalContent && newData) {
+      Object.entries(newData).forEach(([key, value]) => { // Exclude callbacks when setting data attributes
+         if (key !== 'onSubmit' && (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean')) {
+          if (this.modalContent) this.modalContent.dataset[key] = String(value);
+        }
+      });
+    }
+  }
+
+  /**
+   * Initialize the modal component
+   */
+  public static init(): Modal {
+    return Modal.getInstance();
+  }
+}