@ngx-km/grid 0.0.1

package/fesm2022/ngx-km-grid.mjs

@@ -0,0 +1,820 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, Directive, computed, Component, InjectionToken, Injector, DestroyRef, signal, output, effect, untracked } from '@angular/core';
+import { NgStyle, NgComponentOutlet } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/**
+ * Directive that automatically registers/unregisters grid elements for dimension tracking
+ */
+class GridElementRefDirective {
+    elementRef = inject(ElementRef);
+    gridComponent = inject(GridComponent);
+    /** The element ID to register */
+    gridElementRef = input.required(...(ngDevMode ? [{ debugName: "gridElementRef" }] : []));
+    ngOnInit() {
+        this.gridComponent.registerElement(this.gridElementRef(), this.elementRef.nativeElement);
+    }
+    ngOnDestroy() {
+        this.gridComponent.unregisterElement(this.gridElementRef());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GridElementRefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: GridElementRefDirective, isStandalone: true, selector: "[gridElementRef]", inputs: { gridElementRef: { classPropertyName: "gridElementRef", publicName: "gridElementRef", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GridElementRefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gridElementRef]',
+                    standalone: true,
+                }]
+        }], propDecorators: { gridElementRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridElementRef", required: true }] }] } });
+
+class ToolbarComponent {
+    sanitizer = inject(DomSanitizer);
+    /** Toolbar configuration */
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    /** Computed host classes based on position */
+    hostClasses = computed(() => {
+        const cfg = this.config();
+        const posClass = `pos-${cfg.position}`;
+        return cfg.className ? `${posClass} ${cfg.className}` : posClass;
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    /** Computed classes for the toolbar div */
+    toolbarClasses = computed(() => {
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "toolbarClasses" }] : []));
+    /** Sanitize HTML for safe rendering of SVG icons */
+    sanitizeHtml(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    /** Handle button click */
+    onButtonClick(button, event) {
+        event.stopPropagation();
+        if (!button.disabled && button.onClick) {
+            button.onClick();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ToolbarComponent, isStandalone: true, selector: "ngx-grid-toolbar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <div class="toolbar" [class]="toolbarClasses()">
+      @for (button of config().buttons; track button.id) {
+        <button
+          class="toolbar-btn"
+          [class.active]="button.active"
+          [class.disabled]="button.disabled"
+          [disabled]="button.disabled"
+          [title]="button.label"
+          (click)="onButtonClick(button, $event)">
+          @if (button.icon) {
+            <span class="btn-icon" [innerHTML]="sanitizeHtml(button.icon)"></span>
+          } @else {
+            <span class="btn-label">{{ button.label }}</span>
+          }
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [":host{position:absolute;z-index:100;pointer-events:none}.toolbar{display:flex;gap:4px;padding:6px;background:#1e1e2ef2;border:1px solid #444;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto}:host(.pos-top-left){top:12px;left:12px}:host(.pos-top-center){top:12px;left:50%;transform:translate(-50%)}:host(.pos-top-right){top:12px;right:12px}:host(.pos-bottom-left){bottom:12px;left:12px}:host(.pos-bottom-center){bottom:12px;left:50%;transform:translate(-50%)}:host(.pos-bottom-right){bottom:12px;right:12px}.toolbar-btn{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border:1px solid #555;background:#2a2a3e;color:#fff;border-radius:4px;cursor:pointer;transition:all .15s ease;font-size:.875rem}.toolbar-btn:hover:not(.disabled){background:#3a3a4e;border-color:#666}.toolbar-btn.active{background:#4a4a6e;border-color:#6a6a8e}.toolbar-btn.disabled{opacity:.5;cursor:not-allowed}.btn-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;pointer-events:none}.btn-icon ::ng-deep svg{width:100%;height:100%;pointer-events:none}.btn-label{white-space:nowrap}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-grid-toolbar', standalone: true, template: `
+    <div class="toolbar" [class]="toolbarClasses()">
+      @for (button of config().buttons; track button.id) {
+        <button
+          class="toolbar-btn"
+          [class.active]="button.active"
+          [class.disabled]="button.disabled"
+          [disabled]="button.disabled"
+          [title]="button.label"
+          (click)="onButtonClick(button, $event)">
+          @if (button.icon) {
+            <span class="btn-icon" [innerHTML]="sanitizeHtml(button.icon)"></span>
+          } @else {
+            <span class="btn-label">{{ button.label }}</span>
+          }
+        </button>
+      }
+    </div>
+  `, host: {
+                        '[class]': 'hostClasses()',
+                    }, styles: [":host{position:absolute;z-index:100;pointer-events:none}.toolbar{display:flex;gap:4px;padding:6px;background:#1e1e2ef2;border:1px solid #444;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto}:host(.pos-top-left){top:12px;left:12px}:host(.pos-top-center){top:12px;left:50%;transform:translate(-50%)}:host(.pos-top-right){top:12px;right:12px}:host(.pos-bottom-left){bottom:12px;left:12px}:host(.pos-bottom-center){bottom:12px;left:50%;transform:translate(-50%)}:host(.pos-bottom-right){bottom:12px;right:12px}.toolbar-btn{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border:1px solid #555;background:#2a2a3e;color:#fff;border-radius:4px;cursor:pointer;transition:all .15s ease;font-size:.875rem}.toolbar-btn:hover:not(.disabled){background:#3a3a4e;border-color:#666}.toolbar-btn.active{background:#4a4a6e;border-color:#6a6a8e}.toolbar-btn.disabled{opacity:.5;cursor:not-allowed}.btn-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;pointer-events:none}.btn-icon ::ng-deep svg{width:100%;height:100%;pointer-events:none}.btn-label{white-space:nowrap}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
+
+/**
+ * Injection token for accessing element data in dynamically rendered components.
+ * The data can be either a plain value or a Signal for reactive updates.
+ */
+const GRID_ELEMENT_DATA = new InjectionToken('GRID_ELEMENT_DATA');
+/** Default cell size in pixels */
+const DEFAULT_CELL_SIZE = 20;
+/** Default background pattern color */
+const DEFAULT_PATTERN_COLOR = '#3a3a5a';
+/** Default minimum zoom level */
+const DEFAULT_ZOOM_MIN = 0.1;
+/** Default maximum zoom level */
+const DEFAULT_ZOOM_MAX = 5;
+/** Default zoom speed multiplier */
+const DEFAULT_ZOOM_SPEED = 0.001;
+/** Default background color */
+const DEFAULT_BACKGROUND_COLOR = '#1a1a2e';
+/**
+ * Default grid configuration
+ */
+const DEFAULT_GRID_CONFIG = {
+    dimensionMode: 'full',
+    backgroundMode: 'lines',
+    cellSize: DEFAULT_CELL_SIZE,
+    backgroundPatternColor: DEFAULT_PATTERN_COLOR,
+    backgroundPatternOpacity: 1,
+    backgroundColor: DEFAULT_BACKGROUND_COLOR,
+    panEnabled: true,
+};
+/**
+ * Default viewport state
+ */
+const DEFAULT_VIEWPORT_STATE = {
+    x: 0,
+    y: 0,
+    zoom: 1,
+};
+
+class GridComponent {
+    elementRef = inject(ElementRef);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    /** Grid configuration */
+    config = input(DEFAULT_GRID_CONFIG, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    /** Elements to render on the grid */
+    elements = input([], ...(ngDevMode ? [{ debugName: "elements" }] : []));
+    /** Current viewport state (pan offset and zoom) */
+    viewport = signal({ ...DEFAULT_VIEWPORT_STATE }, ...(ngDevMode ? [{ debugName: "viewport" }] : []));
+    /** Emits when viewport changes */
+    viewportChange = output();
+    /** Emits when element dimensions are measured or change */
+    elementsRendered = output();
+    /** Emits when an element is dragged to a new position */
+    elementPositionChange = output();
+    /** Map of element IDs to their DOM elements for dimension tracking */
+    elementRefs = new Map();
+    /** ResizeObserver for tracking element dimension changes */
+    resizeObserver = null;
+    /** Debounce timer for batching dimension updates */
+    dimensionUpdateTimer = null;
+    /** Internal state for pan tracking */
+    isPanning = signal(false, ...(ngDevMode ? [{ debugName: "isPanning" }] : []));
+    panStartX = 0;
+    panStartY = 0;
+    panStartViewportX = 0;
+    panStartViewportY = 0;
+    /** Internal state for element drag tracking */
+    isDraggingElement = signal(false, ...(ngDevMode ? [{ debugName: "isDraggingElement" }] : []));
+    draggingElementId = null;
+    dragStartX = 0;
+    dragStartY = 0;
+    dragStartElementX = 0;
+    dragStartElementY = 0;
+    /** Internal copy of element positions for drag updates */
+    elementPositions = new Map();
+    /** Track if we're currently dragging to avoid overwriting drag position */
+    syncPositionsFromInput = true;
+    constructor() {
+        // Sync element positions from input when elements change
+        // This allows external code to update positions programmatically
+        effect(() => {
+            const inputElements = this.elements();
+            untracked(() => {
+                // Skip sync if currently dragging
+                if (this.isDraggingElement())
+                    return;
+                // Update internal positions from input
+                inputElements.forEach(el => {
+                    const currentPos = this.elementPositions.get(el.id);
+                    // Only update if position is different (allows external updates)
+                    if (!currentPos || currentPos.x !== el.x || currentPos.y !== el.y) {
+                        this.elementPositions.set(el.id, { x: el.x, y: el.y });
+                    }
+                });
+                // Remove positions for elements that no longer exist
+                const inputIds = new Set(inputElements.map(e => e.id));
+                for (const id of this.elementPositions.keys()) {
+                    if (!inputIds.has(id)) {
+                        this.elementPositions.delete(id);
+                    }
+                }
+            });
+        });
+    }
+    /** Computed container styles based on config */
+    containerStyles = computed(() => {
+        const cfg = this.config();
+        const styles = {};
+        if (cfg.dimensionMode === 'fixed') {
+            if (cfg.width)
+                styles['width'] = `${cfg.width}px`;
+            if (cfg.height)
+                styles['height'] = `${cfg.height}px`;
+        }
+        else {
+            styles['width'] = '100%';
+            styles['height'] = '100%';
+        }
+        if (cfg.minWidth)
+            styles['min-width'] = `${cfg.minWidth}px`;
+        if (cfg.minHeight)
+            styles['min-height'] = `${cfg.minHeight}px`;
+        if (cfg.maxWidth)
+            styles['max-width'] = `${cfg.maxWidth}px`;
+        if (cfg.maxHeight)
+            styles['max-height'] = `${cfg.maxHeight}px`;
+        // Background color
+        styles['background-color'] = cfg.backgroundColor ?? DEFAULT_BACKGROUND_COLOR;
+        // Cursor style
+        const panEnabled = cfg.panEnabled ?? true;
+        if (panEnabled) {
+            styles['cursor'] = this.isPanning() ? 'grabbing' : 'grab';
+        }
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "containerStyles" }] : []));
+    /** Computed background styles for the pattern layer */
+    backgroundStyles = computed(() => {
+        const cfg = this.config();
+        const vp = this.viewport();
+        const mode = cfg.backgroundMode ?? 'lines';
+        const cellSize = cfg.cellSize ?? DEFAULT_CELL_SIZE;
+        const patternColor = cfg.backgroundPatternColor ?? DEFAULT_PATTERN_COLOR;
+        const opacity = cfg.backgroundPatternOpacity ?? 1;
+        const styles = {};
+        if (mode === 'none') {
+            return styles;
+        }
+        // Apply zoom to cell size
+        const scaledCellSize = cellSize * vp.zoom;
+        if (mode === 'lines') {
+            styles['background-image'] = `linear-gradient(to right, ${patternColor} 1px, transparent 1px), linear-gradient(to bottom, ${patternColor} 1px, transparent 1px)`;
+            styles['background-size'] = `${scaledCellSize}px ${scaledCellSize}px`;
+        }
+        else if (mode === 'dots') {
+            // Scale dot size with zoom
+            const dotSize = 1.5 * vp.zoom;
+            styles['background-image'] = `radial-gradient(circle, ${patternColor} ${dotSize}px, transparent ${dotSize}px)`;
+            styles['background-size'] = `${scaledCellSize}px ${scaledCellSize}px`;
+        }
+        // Apply pan offset to background position for seamless scrolling
+        styles['background-position'] = `${vp.x}px ${vp.y}px`;
+        styles['opacity'] = String(opacity);
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "backgroundStyles" }] : []));
+    /** Computed transform styles for the viewport layer (contains all elements) */
+    viewportTransform = computed(() => {
+        const vp = this.viewport();
+        return `translate(${vp.x}px, ${vp.y}px) scale(${vp.zoom})`;
+    }, ...(ngDevMode ? [{ debugName: "viewportTransform" }] : []));
+    /** Whether the integrated toolbar should be shown */
+    showToolbar = computed(() => !!this.config().toolbar, ...(ngDevMode ? [{ debugName: "showToolbar" }] : []));
+    /** Whether the loading overlay should be shown */
+    isLoading = computed(() => !!this.config().loading, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    /** Computed toolbar configuration for the integrated toolbar */
+    integratedToolbarConfig = computed(() => {
+        const cfg = this.config();
+        if (!cfg.toolbar)
+            return null;
+        const toolbarCfg = cfg.toolbar;
+        const buttons = [];
+        // Add reset view button if enabled (default: true)
+        if (toolbarCfg.showResetView !== false) {
+            buttons.push({
+                id: 'grid-reset-view',
+                label: 'Reset View',
+                icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>',
+                onClick: () => this.resetViewport(),
+            });
+        }
+        // Add zoom controls if enabled (default: true)
+        if (toolbarCfg.showZoomControls !== false) {
+            buttons.push({
+                id: 'grid-zoom-in',
+                label: 'Zoom In',
+                icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>',
+                onClick: () => this.zoomIn(),
+            });
+            buttons.push({
+                id: 'grid-zoom-out',
+                label: 'Zoom Out',
+                icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>',
+                onClick: () => this.zoomOut(),
+            });
+        }
+        // Add custom buttons
+        if (toolbarCfg.customButtons?.length) {
+            buttons.push(...toolbarCfg.customButtons);
+        }
+        return {
+            position: toolbarCfg.position ?? 'top-left',
+            buttons,
+        };
+    }, ...(ngDevMode ? [{ debugName: "integratedToolbarConfig" }] : []));
+    /** Get screen position styles for an element */
+    getElementStyles(element) {
+        // Use tracked position if dragging, otherwise use input position
+        const pos = this.elementPositions.get(element.id) ?? { x: element.x, y: element.y };
+        const cfg = this.config();
+        const dragEnabled = cfg.dragEnabled ?? true;
+        return {
+            position: 'absolute',
+            left: `${pos.x}px`,
+            top: `${pos.y}px`,
+            'transform-origin': 'top left',
+            cursor: dragEnabled ? (this.isDraggingElement() && this.draggingElementId === element.id ? 'grabbing' : 'grab') : 'default',
+        };
+    }
+    /** Create an injector for passing data to a dynamically rendered component */
+    createElementInjector(element) {
+        return Injector.create({
+            providers: [
+                { provide: GRID_ELEMENT_DATA, useValue: element.data },
+            ],
+            parent: this.injector,
+        });
+    }
+    /** Handle mouse down to start panning */
+    onMouseDown(event) {
+        const cfg = this.config();
+        if (!(cfg.panEnabled ?? true))
+            return;
+        // Only pan on left mouse button
+        if (event.button !== 0)
+            return;
+        this.isPanning.set(true);
+        this.panStartX = event.clientX;
+        this.panStartY = event.clientY;
+        const vp = this.viewport();
+        this.panStartViewportX = vp.x;
+        this.panStartViewportY = vp.y;
+        // Prevent text selection during drag
+        event.preventDefault();
+        // Add window-level listeners for move and up
+        window.addEventListener('mousemove', this.onMouseMove);
+        window.addEventListener('mouseup', this.onMouseUp);
+    }
+    /** Handle mouse move during panning */
+    onMouseMove = (event) => {
+        if (!this.isPanning())
+            return;
+        const deltaX = event.clientX - this.panStartX;
+        const deltaY = event.clientY - this.panStartY;
+        let newX = this.panStartViewportX + deltaX;
+        let newY = this.panStartViewportY + deltaY;
+        // Apply boundaries if configured
+        const cfg = this.config();
+        if (cfg.panMinX !== undefined)
+            newX = Math.max(cfg.panMinX, newX);
+        if (cfg.panMaxX !== undefined)
+            newX = Math.min(cfg.panMaxX, newX);
+        if (cfg.panMinY !== undefined)
+            newY = Math.max(cfg.panMinY, newY);
+        if (cfg.panMaxY !== undefined)
+            newY = Math.min(cfg.panMaxY, newY);
+        const currentVp = this.viewport();
+        const newViewport = { ...currentVp, x: newX, y: newY };
+        this.viewport.set(newViewport);
+        this.viewportChange.emit(newViewport);
+    };
+    /** Handle mouse up to stop panning */
+    onMouseUp = () => {
+        this.isPanning.set(false);
+        window.removeEventListener('mousemove', this.onMouseMove);
+        window.removeEventListener('mouseup', this.onMouseUp);
+    };
+    /** Handle mouse down on an element to start dragging */
+    onElementMouseDown(event, element) {
+        const cfg = this.config();
+        if (!(cfg.dragEnabled ?? true))
+            return;
+        // Only drag on left mouse button
+        if (event.button !== 0)
+            return;
+        // Stop propagation to prevent pan from starting
+        event.stopPropagation();
+        event.preventDefault();
+        // Initialize position tracking if not already done
+        if (!this.elementPositions.has(element.id)) {
+            this.elementPositions.set(element.id, { x: element.x, y: element.y });
+        }
+        const pos = this.elementPositions.get(element.id);
+        this.isDraggingElement.set(true);
+        this.draggingElementId = element.id;
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.dragStartElementX = pos.x;
+        this.dragStartElementY = pos.y;
+        // Add window-level listeners for move and up
+        window.addEventListener('mousemove', this.onElementMouseMove);
+        window.addEventListener('mouseup', this.onElementMouseUp);
+    }
+    /** Handle mouse move during element dragging */
+    onElementMouseMove = (event) => {
+        if (!this.isDraggingElement() || !this.draggingElementId)
+            return;
+        const cfg = this.config();
+        // Calculate delta in screen space, then convert to world space (account for zoom)
+        const vp = this.viewport();
+        const deltaX = (event.clientX - this.dragStartX) / vp.zoom;
+        const deltaY = (event.clientY - this.dragStartY) / vp.zoom;
+        let newX = this.dragStartElementX + deltaX;
+        let newY = this.dragStartElementY + deltaY;
+        // Apply snap if enabled
+        if (cfg.snapEnabled) {
+            const snapSize = cfg.snapGridSize ?? cfg.cellSize ?? DEFAULT_CELL_SIZE;
+            newX = Math.round(newX / snapSize) * snapSize;
+            newY = Math.round(newY / snapSize) * snapSize;
+        }
+        const previousPos = this.elementPositions.get(this.draggingElementId) ?? { x: this.dragStartElementX, y: this.dragStartElementY };
+        // Update internal position
+        this.elementPositions.set(this.draggingElementId, { x: newX, y: newY });
+        // Emit position change
+        this.elementPositionChange.emit({
+            id: this.draggingElementId,
+            x: newX,
+            y: newY,
+            previousX: previousPos.x,
+            previousY: previousPos.y,
+        });
+    };
+    /** Handle mouse up to stop element dragging */
+    onElementMouseUp = () => {
+        this.isDraggingElement.set(false);
+        this.draggingElementId = null;
+        window.removeEventListener('mousemove', this.onElementMouseMove);
+        window.removeEventListener('mouseup', this.onElementMouseUp);
+    };
+    /** Reset viewport to default position */
+    resetViewport() {
+        const newViewport = { ...DEFAULT_VIEWPORT_STATE };
+        this.viewport.set(newViewport);
+        this.viewportChange.emit(newViewport);
+    }
+    /**
+     * Fit all content to view
+     * Centers content in the viewport, optionally zooming out to fit everything
+     * @param fitZoom If true, zooms out if needed to fit all content (never zooms in beyond 1.0)
+     * @param padding Padding around content in pixels (default: 40)
+     */
+    fitToView(fitZoom = false, padding = 40) {
+        const currentElements = this.elements();
+        if (currentElements.length === 0) {
+            this.resetViewport();
+            return;
+        }
+        // Calculate bounding box of all elements
+        const bounds = this.calculateContentBounds();
+        if (!bounds) {
+            this.resetViewport();
+            return;
+        }
+        // Get container dimensions
+        const containerRect = this.elementRef.nativeElement.getBoundingClientRect();
+        const containerWidth = containerRect.width;
+        const containerHeight = containerRect.height;
+        // Available space for content (with padding)
+        const availableWidth = containerWidth - padding * 2;
+        const availableHeight = containerHeight - padding * 2;
+        let newZoom = 1;
+        if (fitZoom) {
+            // Calculate zoom needed to fit content
+            const scaleX = availableWidth / bounds.width;
+            const scaleY = availableHeight / bounds.height;
+            const fitScale = Math.min(scaleX, scaleY);
+            // Never zoom in beyond 1.0, only zoom out if needed
+            newZoom = Math.min(1, fitScale);
+            // Respect zoom limits
+            const cfg = this.config();
+            const zoomMin = cfg.zoomMin ?? DEFAULT_ZOOM_MIN;
+            newZoom = Math.max(zoomMin, newZoom);
+        }
+        // Calculate center of content in world space
+        const contentCenterX = bounds.x + bounds.width / 2;
+        const contentCenterY = bounds.y + bounds.height / 2;
+        // Calculate viewport offset to center content
+        // Container center = contentCenter * zoom + offset
+        // offset = containerCenter - contentCenter * zoom
+        const newX = containerWidth / 2 - contentCenterX * newZoom;
+        const newY = containerHeight / 2 - contentCenterY * newZoom;
+        const newViewport = {
+            x: newX,
+            y: newY,
+            zoom: newZoom,
+        };
+        this.viewport.set(newViewport);
+        this.viewportChange.emit(newViewport);
+    }
+    /**
+     * Check if an element is fully visible in the viewport
+     * @param elementId The element ID to check
+     * @param padding Padding from viewport edges (default: 0)
+     * @returns true if element is fully visible, false otherwise
+     */
+    isElementVisible(elementId, padding = 0) {
+        const bounds = this.getElementBounds(elementId);
+        if (!bounds)
+            return false;
+        const vp = this.viewport();
+        const containerRect = this.elementRef.nativeElement.getBoundingClientRect();
+        // Convert element bounds to screen space
+        const screenLeft = bounds.x * vp.zoom + vp.x;
+        const screenTop = bounds.y * vp.zoom + vp.y;
+        const screenRight = (bounds.x + bounds.width) * vp.zoom + vp.x;
+        const screenBottom = (bounds.y + bounds.height) * vp.zoom + vp.y;
+        // Check if fully within viewport (with padding)
+        return (screenLeft >= padding &&
+            screenTop >= padding &&
+            screenRight <= containerRect.width - padding &&
+            screenBottom <= containerRect.height - padding);
+    }
+    /**
+     * Center viewport on a specific element (no zoom change)
+     * @param elementId The element ID to center on
+     */
+    centerOnElement(elementId) {
+        const bounds = this.getElementBounds(elementId);
+        if (!bounds)
+            return;
+        const vp = this.viewport();
+        const containerRect = this.elementRef.nativeElement.getBoundingClientRect();
+        // Calculate element center in world space
+        const elementCenterX = bounds.x + bounds.width / 2;
+        const elementCenterY = bounds.y + bounds.height / 2;
+        // Calculate viewport offset to center element
+        const newX = containerRect.width / 2 - elementCenterX * vp.zoom;
+        const newY = containerRect.height / 2 - elementCenterY * vp.zoom;
+        const newViewport = {
+            x: newX,
+            y: newY,
+            zoom: vp.zoom,
+        };
+        this.viewport.set(newViewport);
+        this.viewportChange.emit(newViewport);
+    }
+    /**
+     * Scroll element into view with minimal pan
+     * Only pans if element is not fully visible
+     * @param elementId The element ID to scroll into view
+     * @param padding Padding from viewport edges (default: 40)
+     */
+    scrollToElement(elementId, padding = 40) {
+        if (this.isElementVisible(elementId, padding)) {
+            return; // Already visible, no need to scroll
+        }
+        const bounds = this.getElementBounds(elementId);
+        if (!bounds)
+            return;
+        const vp = this.viewport();
+        const containerRect = this.elementRef.nativeElement.getBoundingClientRect();
+        // Convert element bounds to screen space
+        const screenLeft = bounds.x * vp.zoom + vp.x;
+        const screenTop = bounds.y * vp.zoom + vp.y;
+        const screenRight = (bounds.x + bounds.width) * vp.zoom + vp.x;
+        const screenBottom = (bounds.y + bounds.height) * vp.zoom + vp.y;
+        let newX = vp.x;
+        let newY = vp.y;
+        // Calculate minimal pan needed to bring element into view
+        // Check horizontal
+        if (screenLeft < padding) {
+            // Element is too far left, pan right
+            newX = vp.x + (padding - screenLeft);
+        }
+        else if (screenRight > containerRect.width - padding) {
+            // Element is too far right, pan left
+            newX = vp.x - (screenRight - (containerRect.width - padding));
+        }
+        // Check vertical
+        if (screenTop < padding) {
+            // Element is too far up, pan down
+            newY = vp.y + (padding - screenTop);
+        }
+        else if (screenBottom > containerRect.height - padding) {
+            // Element is too far down, pan up
+            newY = vp.y - (screenBottom - (containerRect.height - padding));
+        }
+        if (newX !== vp.x || newY !== vp.y) {
+            const newViewport = {
+                x: newX,
+                y: newY,
+                zoom: vp.zoom,
+            };
+            this.viewport.set(newViewport);
+            this.viewportChange.emit(newViewport);
+        }
+    }
+    /**
+     * Get bounds of a specific element
+     * @param elementId The element ID
+     * @returns Element bounds in world coordinates, or null if not found
+     */
+    getElementBounds(elementId) {
+        const element = this.elements().find(e => e.id === elementId);
+        if (!element)
+            return null;
+        const pos = this.elementPositions.get(elementId) ?? { x: element.x, y: element.y };
+        const domElement = this.elementRefs.get(elementId);
+        let width = 100; // default
+        let height = 50; // default
+        if (domElement) {
+            const rect = domElement.getBoundingClientRect();
+            const zoom = this.viewport().zoom;
+            width = rect.width / zoom;
+            height = rect.height / zoom;
+        }
+        return {
+            x: pos.x,
+            y: pos.y,
+            width,
+            height,
+        };
+    }
+    /**
+     * Calculate the bounding box of all elements
+     * @returns Bounding box in world coordinates, or null if no elements
+     */
+    calculateContentBounds() {
+        const currentElements = this.elements();
+        if (currentElements.length === 0)
+            return null;
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (const element of currentElements) {
+            const bounds = this.getElementBounds(element.id);
+            if (!bounds)
+                continue;
+            minX = Math.min(minX, bounds.x);
+            minY = Math.min(minY, bounds.y);
+            maxX = Math.max(maxX, bounds.x + bounds.width);
+            maxY = Math.max(maxY, bounds.y + bounds.height);
+        }
+        if (minX === Infinity)
+            return null;
+        return {
+            x: minX,
+            y: minY,
+            width: maxX - minX,
+            height: maxY - minY,
+        };
+    }
+    /** Zoom in by a factor (default 1.25x) */
+    zoomIn(factor = 1.25) {
+        const cfg = this.config();
+        const zoomMax = cfg.zoomMax ?? DEFAULT_ZOOM_MAX;
+        const vp = this.viewport();
+        const newZoom = Math.min(zoomMax, vp.zoom * factor);
+        if (newZoom === vp.zoom)
+            return;
+        const newViewport = { ...vp, zoom: newZoom };
+        this.viewport.set(newViewport);
+        this.viewportChange.emit(newViewport);
+    }
+    /** Zoom out by a factor (default 1.25x) */
+    zoomOut(factor = 1.25) {
+        const cfg = this.config();
+        const zoomMin = cfg.zoomMin ?? DEFAULT_ZOOM_MIN;
+        const vp = this.viewport();
+        const newZoom = Math.max(zoomMin, vp.zoom / factor);
+        if (newZoom === vp.zoom)
+            return;
+        const newViewport = { ...vp, zoom: newZoom };
+        this.viewport.set(newViewport);
+        this.viewportChange.emit(newViewport);
+    }
+    /** Handle mouse wheel for zooming */
+    onWheel(event) {
+        const cfg = this.config();
+        if (!(cfg.zoomEnabled ?? true))
+            return;
+        // Prevent default scroll behavior
+        event.preventDefault();
+        const zoomMin = cfg.zoomMin ?? DEFAULT_ZOOM_MIN;
+        const zoomMax = cfg.zoomMax ?? DEFAULT_ZOOM_MAX;
+        const zoomSpeed = cfg.zoomSpeed ?? DEFAULT_ZOOM_SPEED;
+        const vp = this.viewport();
+        // Calculate new zoom level
+        const delta = -event.deltaY * zoomSpeed;
+        const newZoom = Math.max(zoomMin, Math.min(zoomMax, vp.zoom * (1 + delta)));
+        // If zoom hasn't changed (at limits), don't update
+        if (newZoom === vp.zoom)
+            return;
+        // Get cursor position relative to the grid container
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        const cursorX = event.clientX - rect.left;
+        const cursorY = event.clientY - rect.top;
+        // Calculate the world position under the cursor before zoom
+        // worldX = (cursorX - vp.x) / vp.zoom
+        const worldX = (cursorX - vp.x) / vp.zoom;
+        const worldY = (cursorY - vp.y) / vp.zoom;
+        // After zoom, we want the same world position under the cursor
+        // cursorX = worldX * newZoom + newVpX
+        // newVpX = cursorX - worldX * newZoom
+        const newX = cursorX - worldX * newZoom;
+        const newY = cursorY - worldY * newZoom;
+        const newViewport = {
+            x: newX,
+            y: newY,
+            zoom: newZoom,
+        };
+        this.viewport.set(newViewport);
+        this.viewportChange.emit(newViewport);
+    }
+    /** Initialize ResizeObserver after view is ready */
+    ngAfterViewInit() {
+        this.setupResizeObserver();
+    }
+    /** Clean up resources */
+    ngOnDestroy() {
+        this.cleanupResizeObserver();
+        if (this.dimensionUpdateTimer) {
+            clearTimeout(this.dimensionUpdateTimer);
+        }
+    }
+    /** Register an element for dimension tracking */
+    registerElement(elementId, element) {
+        this.elementRefs.set(elementId, element);
+        if (this.resizeObserver) {
+            this.resizeObserver.observe(element);
+        }
+        this.scheduleDimensionUpdate();
+    }
+    /** Unregister an element from dimension tracking */
+    unregisterElement(elementId) {
+        const element = this.elementRefs.get(elementId);
+        if (element && this.resizeObserver) {
+            this.resizeObserver.unobserve(element);
+        }
+        this.elementRefs.delete(elementId);
+        this.scheduleDimensionUpdate();
+    }
+    /** Set up the ResizeObserver to track element dimension changes */
+    setupResizeObserver() {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleDimensionUpdate();
+        });
+        // Observe any already-registered elements
+        this.elementRefs.forEach((element) => {
+            this.resizeObserver.observe(element);
+        });
+    }
+    /** Clean up the ResizeObserver */
+    cleanupResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+    /** Schedule a debounced dimension update */
+    scheduleDimensionUpdate() {
+        if (this.dimensionUpdateTimer) {
+            clearTimeout(this.dimensionUpdateTimer);
+        }
+        this.dimensionUpdateTimer = setTimeout(() => {
+            this.emitRenderedElements();
+        }, 10);
+    }
+    /** Collect and emit all rendered element dimensions */
+    emitRenderedElements() {
+        const currentElements = this.elements();
+        const renderedElements = [];
+        for (const element of currentElements) {
+            const domElement = this.elementRefs.get(element.id);
+            if (domElement) {
+                const rect = domElement.getBoundingClientRect();
+                // Get the actual size without zoom transform
+                const zoom = this.viewport().zoom;
+                renderedElements.push({
+                    id: element.id,
+                    x: element.x,
+                    y: element.y,
+                    width: rect.width / zoom,
+                    height: rect.height / zoom,
+                });
+            }
+        }
+        if (renderedElements.length > 0) {
+            this.elementsRendered.emit(renderedElements);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: GridComponent, isStandalone: true, selector: "ngx-grid", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewportChange: "viewportChange", elementsRendered: "elementsRendered", elementPositionChange: "elementPositionChange" }, ngImport: i0, template: "<div\n  class=\"grid-container\"\n  [ngStyle]=\"containerStyles()\"\n  (mousedown)=\"onMouseDown($event)\"\n  (wheel)=\"onWheel($event)\">\n  <div class=\"grid-background\" [ngStyle]=\"backgroundStyles()\"></div>\n  <div class=\"grid-viewport\" [style.transform]=\"viewportTransform()\">\n    @for (element of elements(); track element.id) {\n      <div\n        class=\"grid-element\"\n        [gridElementRef]=\"element.id\"\n        [ngStyle]=\"getElementStyles(element)\"\n        (mousedown)=\"onElementMouseDown($event, element)\">\n        <ng-container\n          *ngComponentOutlet=\"element.component; injector: createElementInjector(element)\" />\n      </div>\n    }\n  </div>\n  @if (showToolbar() && integratedToolbarConfig()) {\n    <ngx-grid-toolbar [config]=\"integratedToolbarConfig()!\" />\n  }\n  @if (isLoading()) {\n    <div class=\"loading-overlay\">\n      <div class=\"loading-spinner\"></div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;position:absolute;inset:0}.grid-container{position:relative;overflow:hidden}.grid-background{position:absolute;inset:0;pointer-events:none}.grid-viewport{position:absolute;top:0;left:0;transform-origin:0 0;pointer-events:none}.grid-element{pointer-events:auto}.loading-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.loading-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:#6366f1;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: GridElementRefDirective, selector: "[gridElementRef]", inputs: ["gridElementRef"] }, { kind: "component", type: ToolbarComponent, selector: "ngx-grid-toolbar", inputs: ["config"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-grid', imports: [NgStyle, NgComponentOutlet, GridElementRefDirective, ToolbarComponent], template: "<div\n  class=\"grid-container\"\n  [ngStyle]=\"containerStyles()\"\n  (mousedown)=\"onMouseDown($event)\"\n  (wheel)=\"onWheel($event)\">\n  <div class=\"grid-background\" [ngStyle]=\"backgroundStyles()\"></div>\n  <div class=\"grid-viewport\" [style.transform]=\"viewportTransform()\">\n    @for (element of elements(); track element.id) {\n      <div\n        class=\"grid-element\"\n        [gridElementRef]=\"element.id\"\n        [ngStyle]=\"getElementStyles(element)\"\n        (mousedown)=\"onElementMouseDown($event, element)\">\n        <ng-container\n          *ngComponentOutlet=\"element.component; injector: createElementInjector(element)\" />\n      </div>\n    }\n  </div>\n  @if (showToolbar() && integratedToolbarConfig()) {\n    <ngx-grid-toolbar [config]=\"integratedToolbarConfig()!\" />\n  }\n  @if (isLoading()) {\n    <div class=\"loading-overlay\">\n      <div class=\"loading-spinner\"></div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;position:absolute;inset:0}.grid-container{position:relative;overflow:hidden}.grid-background{position:absolute;inset:0;pointer-events:none}.grid-viewport{position:absolute;top:0;left:0;transform-origin:0 0;pointer-events:none}.grid-element{pointer-events:auto}.loading-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.loading-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:#6366f1;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: false }] }], viewportChange: [{ type: i0.Output, args: ["viewportChange"] }], elementsRendered: [{ type: i0.Output, args: ["elementsRendered"] }], elementPositionChange: [{ type: i0.Output, args: ["elementPositionChange"] }] } });
+
+// Components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_BACKGROUND_COLOR, DEFAULT_CELL_SIZE, DEFAULT_GRID_CONFIG, DEFAULT_PATTERN_COLOR, DEFAULT_VIEWPORT_STATE, DEFAULT_ZOOM_MAX, DEFAULT_ZOOM_MIN, DEFAULT_ZOOM_SPEED, GRID_ELEMENT_DATA, GridComponent, ToolbarComponent };
+//# sourceMappingURL=ngx-km-grid.mjs.map