Some ignored filles was missing

wwwroot/js/renderers/GridRenderer.d.ts

@@ -0,0 +1,180 @@
+import { Configuration } from '../configurations/CalendarConfig';
+import { CalendarView, ICalendarEvent } from '../types/CalendarTypes';
+import { IColumnRenderer } from './ColumnRenderer';
+import { DateService } from '../utils/DateService';
+import { WorkHoursManager } from '../managers/WorkHoursManager';
+/**
+ * GridRenderer - Centralized DOM rendering for calendar grid structure
+ *
+ * ARCHITECTURE OVERVIEW:
+ * =====================
+ * GridRenderer is responsible for creating and managing the complete DOM structure
+ * of the calendar grid. It follows the Strategy Pattern by delegating specific
+ * rendering tasks to specialized renderers (DateHeaderRenderer, ColumnRenderer).
+ *
+ * RESPONSIBILITY HIERARCHY:
+ * ========================
+ * GridRenderer (this file)
+ * ├─ Creates overall grid skeleton
+ * ├─ Manages time axis (hour markers)
+ * └─ Delegates to specialized renderers:
+ *    ├─ DateHeaderRenderer → Renders date headers
+ *    └─ ColumnRenderer → Renders day columns
+ *
+ * DOM STRUCTURE CREATED:
+ * =====================
+ * <swp-calendar-container>
+ *   <swp-header-spacer />                    ← GridRenderer
+ *   <swp-time-axis>                          ← GridRenderer
+ *     <swp-hour-marker>00:00</...>           ← GridRenderer (iterates hours)
+ *   </swp-time-axis>
+ *   <swp-grid-container>                     ← GridRenderer
+ *     <swp-calendar-header>                  ← GridRenderer creates container
+ *       <swp-day-header />                   ← DateHeaderRenderer (iterates dates)
+ *     </swp-calendar-header>
+ *     <swp-scrollable-content>               ← GridRenderer
+ *       <swp-time-grid>                      ← GridRenderer
+ *         <swp-grid-lines />                 ← GridRenderer
+ *         <swp-day-columns>                  ← GridRenderer creates container
+ *           <swp-day-column />               ← ColumnRenderer (iterates dates)
+ *         </swp-day-columns>
+ *       </swp-time-grid>
+ *     </swp-scrollable-content>
+ *   </swp-grid-container>
+ * </swp-calendar-container>
+ *
+ * RENDERING FLOW:
+ * ==============
+ * 1. renderGrid() - Entry point called by GridManager
+ *    ├─ First render: createCompleteGridStructure()
+ *    └─ Updates: updateGridContent()
+ *
+ * 2. createCompleteGridStructure()
+ *    ├─ Creates header spacer
+ *    ├─ Creates time axis (calls createOptimizedTimeAxis)
+ *    └─ Creates grid container (calls createOptimizedGridContainer)
+ *
+ * 3. createOptimizedGridContainer()
+ *    ├─ Creates calendar header container
+ *    ├─ Creates scrollable content structure
+ *    └─ Creates column container (calls renderColumnContainer)
+ *
+ * 4. renderColumnContainer()
+ *    └─ Delegates to ColumnRenderer.render()
+ *       └─ ColumnRenderer iterates dates and creates columns
+ *
+ * OPTIMIZATION STRATEGY:
+ * =====================
+ * - Caches DOM references (cachedGridContainer, cachedTimeAxis)
+ * - Uses DocumentFragment for batch DOM insertions
+ * - Only updates changed content on re-renders
+ * - Delegates specialized tasks to strategy renderers
+ *
+ * USAGE EXAMPLE:
+ * =============
+ * const gridRenderer = new GridRenderer(columnRenderer, dateService, config);
+ * gridRenderer.renderGrid(containerElement, new Date(), 'week');
+ */
+export declare class GridRenderer {
+    private cachedGridContainer;
+    private cachedTimeAxis;
+    private dateService;
+    private columnRenderer;
+    private config;
+    private workHoursManager;
+    constructor(columnRenderer: IColumnRenderer, dateService: DateService, config: Configuration, workHoursManager: WorkHoursManager);
+    /**
+     * Main entry point for rendering the complete calendar grid
+     *
+     * This method decides between full render (first time) or optimized update.
+     * It caches the grid reference for performance.
+     *
+     * @param grid - Container element where grid will be rendered
+     * @param currentDate - Base date for the current view (e.g., any date in the week)
+     * @param view - Calendar view type (day/week/month)
+     * @param dates - Array of dates to render as columns
+     * @param events - All events for the period
+     */
+    renderGrid(grid: HTMLElement, currentDate: Date, view?: CalendarView, dates?: Date[], events?: ICalendarEvent[]): void;
+    /**
+     * Creates the complete grid structure from scratch
+     *
+     * Uses DocumentFragment for optimal performance by minimizing reflows.
+     * Creates all child elements in memory first, then appends everything at once.
+     *
+     * Structure created:
+     * 1. Header spacer (placeholder for alignment)
+     * 2. Time axis (hour markers 00:00-23:00)
+     * 3. Grid container (header + scrollable content)
+     *
+     * @param grid - Parent container
+     * @param currentDate - Current view date
+     * @param view - View type
+     * @param dates - Array of dates to render
+     */
+    private createCompleteGridStructure;
+    /**
+     * Creates the time axis with hour markers
+     *
+     * Iterates from dayStartHour to dayEndHour (configured in GridSettings).
+     * Each marker shows the hour in the configured time format.
+     *
+     * @returns Time axis element with all hour markers
+     */
+    private createOptimizedTimeAxis;
+    /**
+     * Creates the main grid container with header and columns
+     *
+     * This is the scrollable area containing:
+     * - Calendar header (dates/resources) - created here, populated by DateHeaderRenderer
+     * - Time grid (grid lines + day columns) - structure created here
+     * - Column container - created here, populated by ColumnRenderer
+     *
+     * @param currentDate - Current view date
+     * @param view - View type
+     * @param dates - Array of dates to render
+     * @returns Complete grid container element
+     */
+    private createOptimizedGridContainer;
+    /**
+     * Renders columns by iterating through dates
+     *
+     * GridRenderer creates column structure with work hours styling.
+     * Event rendering is handled by EventRenderingService listening to GRID_RENDERED.
+     *
+     * @param columnContainer - Empty container to populate
+     * @param dates - Array of dates to render
+     * @param events - All events for the period (passed through, not used here)
+     */
+    private renderColumnContainer;
+    /**
+     * Apply work hours styling to a column
+     */
+    private applyWorkHoursStyling;
+    /**
+     * Optimized update of grid content without full rebuild
+     *
+     * Only updates the column container content, leaving the structure intact.
+     * This is much faster than recreating the entire grid.
+     *
+     * @param grid - Existing grid element
+     * @param currentDate - New view date
+     * @param view - View type
+     * @param dates - Array of dates to render
+     * @param events - All events for the period
+     */
+    private updateGridContent;
+    /**
+     * Creates a new grid for slide animations during navigation
+     *
+     * Used by NavigationManager for smooth week-to-week transitions.
+     * Creates a complete grid positioned absolutely for animation.
+     *
+     * Note: Positioning is handled by Animation API, not here.
+     *
+     * @param parentContainer - Container for the new grid
+     * @param weekStart - Start date of the new week
+     * @returns New grid element ready for animation
+     */
+    createNavigationGrid(parentContainer: HTMLElement, weekStart: Date): HTMLElement;
+}